From 61f4b52a152a33c237a4724ff7f7243d15002dbc Mon Sep 17 00:00:00 2001 From: hristoterezov Date: Thu, 12 Jan 2017 14:51:53 -0600 Subject: [PATCH] fix(filmstrip_only): Remove unrelated UI elements --- conference.js | 102 ++++++++++---------- modules/UI/videolayout/FilmStrip.js | 27 +++--- modules/UI/videolayout/LargeVideoManager.js | 6 +- modules/UI/videolayout/RemoteVideo.js | 31 +++--- 4 files changed, 85 insertions(+), 81 deletions(-) diff --git a/conference.js b/conference.js index 96676dc4d..a1636820a 100644 --- a/conference.js +++ b/conference.js @@ -1260,6 +1260,57 @@ export default { APP.API.notifyReceivedChatMessage(id, nick, text, ts); APP.UI.addMessage(id, nick, text, ts); }); + APP.UI.addListener(UIEvents.MESSAGE_CREATED, (message) => { + APP.API.notifySendingChatMessage(message); + room.sendTextMessage(message); + }); + + APP.UI.addListener(UIEvents.SELECTED_ENDPOINT, (id) => { + try { + // do not try to select participant if there is none (we + // are alone in the room), otherwise an error will be + // thrown cause reporting mechanism is not available + // (datachannels currently) + if (room.getParticipants().length === 0) + return; + + room.selectParticipant(id); + } catch (e) { + JitsiMeetJS.analytics.sendEvent( + 'selectParticipant.failed'); + reportError(e); + } + }); + + APP.UI.addListener(UIEvents.PINNED_ENDPOINT, + (smallVideo, isPinned) => { + let smallVideoId = smallVideo.getId(); + let isLocal = APP.conference.isLocalId(smallVideoId); + + let eventName + = (isPinned ? "pinned" : "unpinned") + "." + + (isLocal ? "local" : "remote"); + let participantCount = room.getParticipantCount(); + JitsiMeetJS.analytics.sendEvent( + eventName, + { value: participantCount }); + + // FIXME why VIDEO_CONTAINER_TYPE instead of checking if + // the participant is on the large video ? + if (smallVideo.getVideoType() === VIDEO_CONTAINER_TYPE + && !isLocal) { + + // When the library starts supporting multiple pins we + // would pass the isPinned parameter together with the + // identifier, but currently we send null to indicate that + // we unpin the last pinned. + try { + room.pinParticipant(isPinned ? smallVideoId : null); + } catch (e) { + reportError(e); + } + } + }); } room.on(ConferenceEvents.CONNECTION_INTERRUPTED, () => { @@ -1337,13 +1388,6 @@ export default { APP.UI.addListener(UIEvents.AUDIO_MUTED, muteLocalAudio); APP.UI.addListener(UIEvents.VIDEO_MUTED, muteLocalVideo); - if (!interfaceConfig.filmStripOnly) { - APP.UI.addListener(UIEvents.MESSAGE_CREATED, (message) => { - APP.API.notifySendingChatMessage(message); - room.sendTextMessage(message); - }); - } - room.on(ConnectionQualityEvents.LOCAL_STATS_UPDATED, (stats) => { APP.UI.updateLocalStats(stats.connectionQuality, stats); @@ -1466,50 +1510,6 @@ export default { AuthHandler.authenticate(room); }); - APP.UI.addListener(UIEvents.SELECTED_ENDPOINT, (id) => { - try { - // do not try to select participant if there is none (we are - // alone in the room), otherwise an error will be thrown cause - // reporting mechanism is not available (datachannels currently) - if (room.getParticipants().length === 0) - return; - - room.selectParticipant(id); - } catch (e) { - JitsiMeetJS.analytics.sendEvent('selectParticipant.failed'); - reportError(e); - } - }); - - APP.UI.addListener(UIEvents.PINNED_ENDPOINT, (smallVideo, isPinned) => { - let smallVideoId = smallVideo.getId(); - let isLocal = APP.conference.isLocalId(smallVideoId); - - let eventName - = (isPinned ? "pinned" : "unpinned") + "." + - (isLocal ? "local" : "remote"); - let participantCount = room.getParticipantCount(); - JitsiMeetJS.analytics.sendEvent( - eventName, - { value: participantCount }); - - // FIXME why VIDEO_CONTAINER_TYPE instead of checking if - // the participant is on the large video ? - if (smallVideo.getVideoType() === VIDEO_CONTAINER_TYPE - && !isLocal) { - - // When the library starts supporting multiple pins we would - // pass the isPinned parameter together with the identifier, - // but currently we send null to indicate that we unpin the - // last pinned. - try { - room.pinParticipant(isPinned ? smallVideoId : null); - } catch (e) { - reportError(e); - } - } - }); - APP.UI.addListener( UIEvents.VIDEO_DEVICE_CHANGED, (cameraDeviceId) => { diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js index 6c944b78a..06a6163e6 100644 --- a/modules/UI/videolayout/FilmStrip.js +++ b/modules/UI/videolayout/FilmStrip.js @@ -42,13 +42,14 @@ const FilmStrip = { let container = document.createElement('div'); let isVisible = this.isFilmStripVisible(); container.className = 'filmstrip__toolbar'; - - container.innerHTML = ` - - `; + if(!interfaceConfig.filmStripOnly) { + container.innerHTML = ` + + `; + } return container; }, @@ -94,8 +95,10 @@ const FilmStrip = { */ showMenuDownIcon() { let icon = this.toggleFilmStripIcon; - icon.classList.add(this.iconMenuDownClassName); - icon.classList.remove(this.iconMenuUpClassName); + if(icon) { + icon.classList.add(this.iconMenuDownClassName); + icon.classList.remove(this.iconMenuUpClassName); + } }, /** @@ -103,8 +106,10 @@ const FilmStrip = { */ showMenuUpIcon() { let icon = this.toggleFilmStripIcon; - icon.classList.add(this.iconMenuUpClassName); - icon.classList.remove(this.iconMenuDownClassName); + if(icon) { + icon.classList.add(this.iconMenuUpClassName); + icon.classList.remove(this.iconMenuDownClassName); + } }, /** diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index 403007860..d37cd0c79 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/modules/UI/videolayout/LargeVideoManager.js @@ -37,7 +37,8 @@ export default class LargeVideoManager { display: 'inline-block' }); - if (interfaceConfig.SHOW_JITSI_WATERMARK) { + if (interfaceConfig.SHOW_JITSI_WATERMARK + && !interfaceConfig.filmStripOnly) { let leftWatermarkDiv = this.$container.find("div.watermark.leftwatermark"); @@ -48,7 +49,8 @@ export default class LargeVideoManager { interfaceConfig.JITSI_WATERMARK_LINK); } - if (interfaceConfig.SHOW_BRAND_WATERMARK) { + if (interfaceConfig.SHOW_BRAND_WATERMARK + && !interfaceConfig.filmStripOnly) { let rightWatermarkDiv = this.$container.find("div.watermark.rightwatermark"); diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 8a4dfbffc..ac156ddbd 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -302,26 +302,23 @@ RemoteVideo.prototype._figureOutMutedWhileDisconnected * @param id the id indicating the video for which we're adding a menu. * @param parentElement the parent element where this menu will be added */ -if (!interfaceConfig.filmStripOnly) { - RemoteVideo.prototype.addRemoteVideoMenu = function () { +RemoteVideo.prototype.addRemoteVideoMenu = function () { + if (interfaceConfig.filmStripOnly) { + return; + } + var spanElement = document.createElement('span'); + spanElement.className = 'remotevideomenu'; - var spanElement = document.createElement('span'); - spanElement.className = 'remotevideomenu'; + this.container.appendChild(spanElement); - this.container.appendChild(spanElement); + var menuElement = document.createElement('i'); + menuElement.className = 'icon-menu-up'; + menuElement.title = 'Remote user controls'; + spanElement.appendChild(menuElement); - var menuElement = document.createElement('i'); - menuElement.className = 'icon-menu-up'; - menuElement.title = 'Remote user controls'; - spanElement.appendChild(menuElement); - - this._initPopupMenu(this._generatePopupContent()); - this.hasRemoteVideoMenu = true; - }; - -} else { - RemoteVideo.prototype.addRemoteVideoMenu = function() {}; -} + this._initPopupMenu(this._generatePopupContent()); + this.hasRemoteVideoMenu = true; +}; /** * Removes the remote stream element corresponding to the given stream and