Fixes desktop streaming layout.

modules/UI/UI.js

@@ -107,7 +107,7 @@ function setupChat() {
 function setupToolbars() {
     Toolbar.init(UI);
     Toolbar.setupButtonsFromConfig();
-    BottomToolbar.init();
+    BottomToolbar.init(eventEmitter);
 }
 
 function streamHandler(stream, isMuted) {
@@ -343,6 +343,10 @@ function registerListeners() {
         AudioLevels.init();
     });
 
+    UI.addListener(UIEvents.FILM_STRIP_TOGGLED, function (isToggled) {
+        VideoLayout.onFilmStripToggled(isToggled);
+    });
+
     if (!interfaceConfig.filmStripOnly) {
         APP.xmpp.addListener(XMPPEvents.MESSAGE_RECEIVED, updateChatConversation);
         APP.xmpp.addListener(XMPPEvents.CHAT_ERROR_RECEIVED, chatAddError);

modules/UI/toolbars/BottomToolbar.js

@@ -2,6 +2,9 @@
 var PanelToggler = require("../side_pannels/SidePanelToggler");
 var UIUtil = require("../util/UIUtil");
 var AnalyticsAdapter = require("../../statistics/AnalyticsAdapter");
+var UIEvents = require("../../../service/UI/UIEvents");
+
+var eventEmitter = null;
 
 var buttonHandlers = {
     "bottom_toolbar_contact_list": function () {
@@ -27,7 +30,8 @@ var defaultBottomToolbarButtons = {
 
 
 var BottomToolbar = (function (my) {
-    my.init = function () {
+    my.init = function (emitter) {
+        eventEmitter = emitter;
         UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
 
         for(var k in buttonHandlers)
@@ -45,6 +49,9 @@ var BottomToolbar = (function (my) {
     my.toggleFilmStrip = function() {
         var filmstrip = $("#remoteVideos");
         filmstrip.toggleClass("hidden");
+
+        eventEmitter.emit(  UIEvents.FILM_STRIP_TOGGLED,
+                            filmstrip.hasClass("hidden"));
     };
 
     $(document).bind("remotevideo.resized", function (event, width, height) {

modules/UI/videolayout/LargeVideo.js

@@ -115,7 +115,10 @@ function getDesktopVideoSize(videoWidth,
     var availableWidth = Math.max(videoWidth, videoSpaceWidth);
     var availableHeight = Math.max(videoHeight, videoSpaceHeight);
 
-    videoSpaceHeight -= $('#remoteVideos').outerHeight();
+    var filmstrip = $("#remoteVideos");
+
+    if (!filmstrip.hasClass("hidden"))
+        videoSpaceHeight -= filmstrip.outerHeight();
 
     if (availableWidth / aspectRatio >= videoSpaceHeight)
     {
@@ -268,13 +271,7 @@ function changeVideo(isVisible) {
 
     largeVideoElement.style.transform = flipX ? "scaleX(-1)" : "none";
 
-    var isDesktop = currentSmallVideo.getVideoType() === 'screen';
-    // Change the way we'll be measuring and positioning large video
-
-    getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
-    getVideoPosition = isDesktop ? getDesktopVideoPosition :
-        getCameraVideoPosition;
-
+    LargeVideo.updateVideoSizeAndPosition(currentSmallVideo.getVideoType());
 
     // Only if the large video is currently visible.
     if (isVisible) {
@@ -451,10 +448,8 @@ var LargeVideo = {
             return;
         if (LargeVideo.isCurrentlyOnLarge(resourceJid))
         {
-            var isDesktop = newVideoType === 'screen';
-            getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
-            getVideoPosition = isDesktop ? getDesktopVideoPosition
-                : getCameraVideoPosition;
+            LargeVideo.updateVideoSizeAndPosition(newVideoType);
+
             this.position(null, null, null, null, true);
         }
     },
@@ -496,17 +491,23 @@ var LargeVideo = {
     },
     /**
      * Resizes the large html elements.
-     * @param animate boolean property that indicates whether the resize should be animated or not.
-     * @param isChatVisible boolean property that indicates whether the chat area is displayed or not.
-     * If that parameter is null the method will check the chat pannel visibility.
-     * @param completeFunction a function to be called when the video space is resized
-     * @returns {*[]} array with the current width and height values of the largeVideo html element.
+     *
+     * @param animate boolean property that indicates whether the resize should
+     * be animated or not.
+     * @param isSideBarVisible boolean property that indicates whether the chat
+     * area is displayed or not.
+     * If that parameter is null the method will check the chat panel
+     * visibility.
+     * @param completeFunction a function to be called when the video space is
+     * resized
+     * @returns {*[]} array with the current width and height values of the
+     * largeVideo html element.
      */
-    resize: function (animate, isVisible, completeFunction) {
+    resize: function (animate, isSideBarVisible, completeFunction) {
         if(!isEnabled)
             return;
         var availableHeight = window.innerHeight;
-        var availableWidth = UIUtil.getAvailableVideoWidth(isVisible);
+        var availableWidth = UIUtil.getAvailableVideoWidth(isSideBarVisible);
 
         if (availableWidth < 0 || availableHeight < 0) return;
 
@@ -514,7 +515,8 @@ var LargeVideo = {
         var top = availableHeight / 2 - avatarSize / 4 * 3;
         $('#activeSpeaker').css('top', top);
 
-        this.VideoLayout.resizeVideoSpace(animate, isVisible, completeFunction);
+        this.VideoLayout
+            .resizeVideoSpace(animate, isSideBarVisible, completeFunction);
         if(animate) {
             $('#largeVideoContainer').animate({
                     width: availableWidth,
@@ -530,12 +532,36 @@ var LargeVideo = {
         }
         return [availableWidth, availableHeight];
     },
-    resizeVideoAreaAnimated: function (isVisible, completeFunction) {
+    /**
+     * Resizes the large video.
+     *
+     * @param isSideBarVisible indicating if the side bar is visible
+     * @param completeFunction the callback function to be executed after the
+     * resize
+     */
+    resizeVideoAreaAnimated: function (isSideBarVisible, completeFunction) {
         if(!isEnabled)
             return;
-        var size = this.resize(true, isVisible, completeFunction);
+        var size = this.resize(true, isSideBarVisible, completeFunction);
         this.position(null, null, size[0], size[1], true);
     },
+    /**
+     * Updates the video size and position.
+     *
+     * @param videoType the video type indicating if the stream is of type
+     * desktop or web cam
+     */
+    updateVideoSizeAndPosition: function (videoType) {
+        if (!videoType)
+            videoType = currentSmallVideo.getVideoType();
+
+        var isDesktop = videoType === 'screen';
+
+        // Change the way we'll be measuring and positioning large video
+        getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
+        getVideoPosition = isDesktop ? getDesktopVideoPosition :
+            getCameraVideoPosition;
+    },
     getResourceJid: function () {
         return currentSmallVideo ? currentSmallVideo.getResourceJid() : null;
     },

modules/UI/videolayout/VideoLayout.js

@@ -214,7 +214,8 @@ var VideoLayout = (function (my) {
     my.handleVideoThumbClicked = function(noPinnedEndpointChangedEvent,
                                           resourceJid) {
         if(focusedVideoResourceJid) {
-            var oldSmallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid);
+            var oldSmallVideo
+                    = VideoLayout.getSmallVideo(focusedVideoResourceJid);
             if (oldSmallVideo && !interfaceConfig.filmStripOnly)
                 oldSmallVideo.focus(false);
         }
@@ -400,7 +401,8 @@ var VideoLayout = (function (my) {
 
         if(animate) {
             $('#remoteVideos').animate({
-                    height: height + 2 // adds 2 px because of small video 1px border
+                    // adds 2 px because of small video 1px border
+                    height: height + 2
                 },
                 {
                     queue: false,
@@ -425,7 +427,8 @@ var VideoLayout = (function (my) {
         } else {
             // size videos so that while keeping AR and max height, we have a
             // nice fit
-            $('#remoteVideos').height(height + 2);// adds 2 px because of small video 1px border
+            // adds 2 px because of small video 1px border
+            $('#remoteVideos').height(height + 2);
             $('#remoteVideos>span').width(width);
             $('#remoteVideos>span').height(height);
 
@@ -439,10 +442,10 @@ var VideoLayout = (function (my) {
      * @param videoSpaceWidth the width of the video space
      */
     my.calculateThumbnailSize = function (videoSpaceWidth) {
-        // Calculate the available height, which is the inner window height minus
-       // 39px for the header minus 2px for the delimiter lines on the top and
-       // bottom of the large video, minus the 36px space inside the remoteVideos
-       // container used for highlighting shadow.
+        // Calculate the available height, which is the inner window height
+        // minus 39px for the header minus 2px for the delimiter lines on the
+        // top and bottom of the large video, minus the 36px space inside the
+        // remoteVideos container used for highlighting shadow.
        var availableHeight = 100;
 
         var numvids = $('#remoteVideos>span:visible').length;
@@ -458,7 +461,11 @@ var VideoLayout = (function (my) {
        var availableWidth = availableWinWidth / numvids;
        var aspectRatio = 16.0 / 9.0;
        var maxHeight = Math.min(160, availableHeight);
-       availableHeight = Math.min(maxHeight, availableWidth / aspectRatio, window.innerHeight - 18);
+       availableHeight
+           = Math.min(  maxHeight,
+                        availableWidth / aspectRatio,
+                        window.innerHeight - 18);
+
        if (availableHeight < availableWidth / aspectRatio) {
            availableWidth = Math.floor(availableHeight * aspectRatio);
        }
@@ -882,6 +889,17 @@ var VideoLayout = (function (my) {
 
     };
 
+    /**
+     * Updates the video size and position when the film strip is toggled.
+     *
+     * @param isToggled indicates if the film strip is toggled or not. True
+     * would mean that the film strip is hidden, false would mean it's shown
+     */
+    my.onFilmStripToggled = function(isToggled) {
+        LargeVideo.updateVideoSizeAndPosition();
+        LargeVideo.position(null, null, null, null, true);
+    };
+
     my.showMore = function (jid) {
         if (jid === 'local') {
             localVideoThumbnail.connectionIndicator.showMore();
@@ -914,21 +932,27 @@ var VideoLayout = (function (my) {
     };
 
     /**
-     * Resizes the video area
+     * Resizes the video area.
+     *
+     * @param isSideBarVisible indicates if the side bar is currently visible
      * @param callback a function to be called when the video space is
      * resized.
      */
-    my.resizeVideoArea = function(isVisible, callback) {
-        LargeVideo.resizeVideoAreaAnimated(isVisible, callback);
+    my.resizeVideoArea = function(isSideBarVisible, callback) {
+        LargeVideo.resizeVideoAreaAnimated(isSideBarVisible, callback);
         VideoLayout.resizeThumbnails(true);
     };
 
     /**
      * Resizes the #videospace html element
-     * @param animate boolean property that indicates whether the resize should be animated or not.
-     * @param isChatVisible boolean property that indicates whether the chat area is displayed or not.
-     * If that parameter is null the method will check the chat pannel visibility.
-     * @param completeFunction a function to be called when the video space is resized
+     * @param animate boolean property that indicates whether the resize should
+     * be animated or not.
+     * @param isChatVisible boolean property that indicates whether the chat
+     * area is displayed or not.
+     * If that parameter is null the method will check the chat panel
+     * visibility.
+     * @param completeFunction a function to be called when the video space
+     * is resized.
      */
     my.resizeVideoSpace = function (animate, isChatVisible, completeFunction) {
         var availableHeight = window.innerHeight;
@@ -998,7 +1022,8 @@ var VideoLayout = (function (my) {
         LargeVideo.enableVideoProblemFilter(true);
         var reconnectingKey = "connection.RECONNECTING";
         $('#videoConnectionMessage').attr("data-i18n", reconnectingKey);
-        $('#videoConnectionMessage').text(APP.translation.translateString(reconnectingKey));
+        $('#videoConnectionMessage')
+            .text(APP.translation.translateString(reconnectingKey));
         $('#videoConnectionMessage').css({display: "block"});
     };
 

service/UI/UIEvents.js

@@ -2,6 +2,11 @@ var UIEvents = {
     NICKNAME_CHANGED: "UI.nickname_changed",
     SELECTED_ENDPOINT: "UI.selected_endpoint",
     PINNED_ENDPOINT: "UI.pinned_endpoint",
-    LARGEVIDEO_INIT: "UI.largevideo_init"
+    LARGEVIDEO_INIT: "UI.largevideo_init",
+    /**
+     * Notifies interested parties when the film strip (remote video's panel)
+     * is hidden (toggled) or shown (un-toggled).
+     */
+    FILM_STRIP_TOGGLED: "UI.filmstrip_toggled"
 };
 module.exports = UIEvents;