Merge pull request #1240 from jitsi/ilmstriponly_ui

fix(filmstrip_only): Remove unrelated UI elements

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) => {

modules/UI/videolayout/FilmStrip.js

@@ -42,13 +42,14 @@ const FilmStrip = {
         let container = document.createElement('div');
         let isVisible = this.isFilmStripVisible();
         container.className = 'filmstrip__toolbar';
-
+        if(!interfaceConfig.filmStripOnly) {
-        container.innerHTML = `
+            container.innerHTML = `
-            <button id="hideVideoToolbar">
+                <button id="hideVideoToolbar">
-                <i class="icon-menu-${isVisible ? 'down' : 'up'}">
+                    <i class="icon-menu-${isVisible ? 'down' : 'up'}">
-                </i>
+                    </i>
-            </button>
+                </button>
-        `;
+            `;
+        }
 
         return container;
     },
@@ -94,8 +95,10 @@ const FilmStrip = {
      */
     showMenuDownIcon() {
         let icon = this.toggleFilmStripIcon;
-        icon.classList.add(this.iconMenuDownClassName);
+        if(icon) {
-        icon.classList.remove(this.iconMenuUpClassName);
+            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);
+        if(icon) {
-        icon.classList.remove(this.iconMenuDownClassName);
+            icon.classList.add(this.iconMenuUpClassName);
+            icon.classList.remove(this.iconMenuDownClassName);
+        }
     },
 
     /**

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");
 

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');
+    this.container.appendChild(spanElement);
-        spanElement.className = 'remotevideomenu';
 
-        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');
+    this._initPopupMenu(this._generatePopupContent());
-        menuElement.className = 'icon-menu-up';
+    this.hasRemoteVideoMenu = true;
-        menuElement.title = 'Remote user controls';
+};
-        spanElement.appendChild(menuElement);
-
-        this._initPopupMenu(this._generatePopupContent());
-        this.hasRemoteVideoMenu = true;
-    };
-
-} else {
-    RemoteVideo.prototype.addRemoteVideoMenu = function() {};
-}
 
 /**
  * Removes the remote stream element corresponding to the given stream and