Hide the bottom toolbar with the header toolbar if the film strip is hidden.

app.js

@@ -601,7 +601,7 @@ $(document).bind('joined.muc', function (event, jid, info) {
     ContactList.addContact(jid);
 
     // Once we've joined the muc show the toolbar
-    Toolbar.showToolbar();
+    ToolbarToggler.showToolbar();
 
     if (info.displayName)
         $(document).trigger('displaynamechanged',

bottom_toolbar.js

@@ -22,7 +22,7 @@ var BottomToolbar = (function (my) {
     };
 
     my.toggleFilmStrip = function() {
-        $("#remoteVideos").toggleClass("hidden");
+        $("#remoteVideos").toggle("slide", { direction: "down", duration: 700});
     };
 
 

chat.js

@@ -207,7 +207,7 @@ var Chat = (function (my) {
             // Undock the toolbar when the chat is shown and if we're in a 
             // video mode.
             if (VideoLayout.isLargeVideoVisible())
-                Toolbar.dockToolbar(false);
+                ToolbarToggler.dockToolbar(false);
 
             videospace.animate({right: chatSize[0],
                                 width: videospaceWidth,
@@ -333,7 +333,7 @@ var Chat = (function (my) {
         if (unreadMessages) {
             unreadMsgElement.innerHTML = unreadMessages.toString();
 
-            Toolbar.dockToolbar(true);
+            ToolbarToggler.dockToolbar(true);
 
             var chatButtonElement
                 = document.getElementById('chatButton').parentNode;

contact_list.js

@@ -143,7 +143,7 @@ var ContactList = (function (my) {
             // Undock the toolbar when the chat is shown and if we're in a 
             // video mode.
             if (VideoLayout.isLargeVideoVisible())
-                Toolbar.dockToolbar(false);
+                ToolbarToggler.dockToolbar(false);
 
             videospace.animate({right: chatSize[0],
                                 width: videospaceWidth,

css/videolayout_default.css

@@ -19,12 +19,6 @@
     width:auto;
     border:1px solid transparent;
     z-index: 5;
-    -webkit-transition: bottom 2s; /* For Safari 3.1 to 6.0 */
-    transition: bottom 2s;
-}
-
-#remotevideos.hidden {
-    bottom: -196px;
 }
 
 .videocontainer {

etherpad.js

@@ -46,7 +46,7 @@ var Etherpad = (function (my) {
                     largeVideo.css({opacity: '0'});
                 } else {
                     VideoLayout.setLargeVideoVisible(false);
-                    Toolbar.dockToolbar(true);
+                    ToolbarToggler.dockToolbar(true);
                 }
 
                 $('#etherpad>iframe').fadeIn(300, function () {
@@ -64,7 +64,7 @@ var Etherpad = (function (my) {
                 if (!isPresentation) {
                     $('#largeVideo').fadeIn(300, function () {
                         VideoLayout.setLargeVideoVisible(true);
-                        Toolbar.dockToolbar(false);
+                        ToolbarToggler.dockToolbar(false);
                     });
                 }
             });

fonts/selection.json

@@ -1,6 +1,34 @@
 {
 	"IcoMoonType": "selection",
 	"icons": [
+		{
+			"icon": {
+				"paths": [
+					"M46.993-1.7c461.234 0 553.793 0 1015.024 0 35.919 0 53.356 25.959 53.356 57.959-0.581 303.259-0.325 606.488-0.449 909.809 0 43.984-13.203 57.058-57.703 57.058-443.072 0.126-556.453 0.126-999.553 0-44.534 0-57.799-13.009-57.799-57.058-0.098-303.257 0.485-608.072-0.093-911.329-0.034-26.21 11.301-53.761 47.217-56.439zM311.405 509.702c0 119.045-0.072 172.168 0.057 291.249 0.036 50.043 11.208 61.050 62.12 61.050 233.352 0 137.075 0 370.522 0 47.075 0 59.249-11.982 59.249-58.095 0.126-239.111 0.126-346.338 0-585.389 0-48.138-10.687-58.991-57.768-58.991-235.323-0.101-140.844-0.101-376.157 0-47.044 0-57.93 11.043-57.966 58.89-0.129 119.109-0.057 172.209-0.057 291.287zM153.944 121.434c-74.929 0.062-66.687-5.958-66.845 66.685-0.201 63.95-7.054 63.534 62.528 63.372 72.999-0.194 67.201 3.764 67.302-67.554 0-67.722 4.087-62.595-62.985-62.502zM963.644 121.434c-71.159 0.034-65.56-6.185-65.751 65.364-0.129 67.302-4.508 64.693 64.528 64.693 73.089 0 65.299 2.031 65.299-66.238-0.003-68.646 6.956-63.911-64.076-63.818zM216.828 837.592c0.359-73.094 4.639-66.914-67.358-67.17-68.104-0.191-62.569-2.763-62.407 63.31 0.129 73.476-6.954 66.52 67.074 66.649 66.042 0.065 63.142 6.056 62.691-62.789zM1027.718 835.6c0.134-68.334 6.443-65.304-63.297-65.178-70.132 0.132-66.656-5.793-66.527 65.304 0.129 70.645-4.384 64.721 63.756 64.657 71.995-0.132 66.202 6.698 66.068-64.783zM1027.718 617.923c0-70.55 7.219-66.842-67.485-66.522-0.898 0-1.873 0-2.838 0-59.375 0-59.375 0-59.375 58.023 0 77.922-6.443 69.936 69.293 70.196 66.076 0.387 60.539 3.091 60.405-61.697zM151.307 470.127c68.295 0.163 65.815 5.568 65.624-62.982-0.194-71.128 4.895-64.917-66.014-65.010-69.905-0.101-63.813-4.704-63.885 63.978-0.062 67.431-5.7 64.463 64.275 64.014zM961.263 470.127c72.511 0.258 66.589 4.603 66.455-64.494 0-68.558 6.185-63.537-64.267-63.498-70.196 0.028-65.686-6.053-65.498 65.493 0.132 62.5 0.067 62.5 63.31 62.5zM150.399 679.62c71.004 0 66.659 6.567 66.466-64.528-0.163-63.694-0.036-63.501-65.013-63.756-70.805-0.258-64.822-2.673-64.822 63.756 0.036 69.167-5.919 64.788 63.369 64.528z"
+				],
+				"attrs": [
+					{}
+				],
+				"width": 1115,
+				"grid": 0,
+				"tags": [
+					"filmstrip"
+				]
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 26,
+				"id": 29,
+				"prevSize": 32,
+				"code": 58905,
+				"name": "filmstrip",
+				"ligatures": ""
+			},
+			"setIdx": 0,
+			"iconIdx": 0
+		},
 		{
 			"icon": {
 				"paths": [
@@ -33,7 +61,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 0
+			"iconIdx": 1
 		},
 		{
 			"icon": {
@@ -61,7 +89,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 1
+			"iconIdx": 2
 		},
 		{
 			"icon": {
@@ -89,7 +117,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 2
+			"iconIdx": 3
 		},
 		{
 			"icon": {
@@ -128,7 +156,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 3
+			"iconIdx": 4
 		},
 		{
 			"icon": {
@@ -151,7 +179,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 4
+			"iconIdx": 5
 		},
 		{
 			"icon": {
@@ -174,7 +202,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 5
+			"iconIdx": 6
 		},
 		{
 			"icon": {
@@ -198,7 +226,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 6
+			"iconIdx": 7
 		},
 		{
 			"icon": {
@@ -223,7 +251,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 7
+			"iconIdx": 8
 		},
 		{
 			"icon": {
@@ -246,7 +274,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 8
+			"iconIdx": 9
 		},
 		{
 			"icon": {
@@ -270,7 +298,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 9
+			"iconIdx": 10
 		},
 		{
 			"icon": {
@@ -294,7 +322,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 10
+			"iconIdx": 11
 		},
 		{
 			"icon": {
@@ -316,7 +344,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 11
+			"iconIdx": 12
 		},
 		{
 			"icon": {
@@ -340,7 +368,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 12
+			"iconIdx": 13
 		},
 		{
 			"icon": {
@@ -364,7 +392,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 13
+			"iconIdx": 14
 		},
 		{
 			"icon": {
@@ -391,7 +419,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 14
+			"iconIdx": 15
 		},
 		{
 			"icon": {
@@ -415,7 +443,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 15
+			"iconIdx": 16
 		},
 		{
 			"icon": {
@@ -439,7 +467,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 16
+			"iconIdx": 17
 		},
 		{
 			"icon": {
@@ -464,7 +492,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 17
+			"iconIdx": 18
 		},
 		{
 			"icon": {
@@ -486,7 +514,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 18
+			"iconIdx": 19
 		},
 		{
 			"icon": {
@@ -509,7 +537,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 19
+			"iconIdx": 20
 		},
 		{
 			"icon": {
@@ -531,7 +559,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 20
+			"iconIdx": 21
 		},
 		{
 			"icon": {
@@ -554,7 +582,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 21
+			"iconIdx": 22
 		},
 		{
 			"icon": {
@@ -577,7 +605,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 22
+			"iconIdx": 23
 		},
 		{
 			"icon": {
@@ -601,7 +629,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 23
+			"iconIdx": 24
 		},
 		{
 			"icon": {
@@ -624,7 +652,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 24
+			"iconIdx": 25
 		}
 	],
 	"height": 1024,
@@ -637,7 +665,9 @@
 		"fontPref": {
 			"prefix": "icon-",
 			"metadata": {
-				"fontFamily": "jitsi"
+				"fontFamily": "jitsi",
+				"majorVersion": 1,
+				"minorVersion": 0
 			},
 			"metrics": {
 				"emSize": 512,

index.html

@@ -44,6 +44,7 @@
     <script src="local_sts.js?v=1"></script><!-- Local stats processing -->
     <script src="videolayout.js?v=8"></script><!-- video ui -->
     <script src="toolbar.js?v=4"></script><!-- toolbar ui -->
+    <script src="toolbar_toggler.js"></script>
     <script src="canvas_util.js?v=1"></script><!-- canvas drawing utils -->
     <script src="audio_levels.js?v=1"></script><!-- audio levels plugin -->
     <script src="media_stream.js?v=1"></script><!-- media stream -->
@@ -228,7 +229,7 @@
           </form>
         </div>
         <div id="reloadPresentation"><a onclick='Prezi.reloadPresentation();'><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
-        <div id="videospace" onmousemove="Toolbar.showToolbar();">
+        <div id="videospace" onmousemove="ToolbarToggler.showToolbar();">
             <div id="largeVideoContainer" class="videocontainer">
                 <div id="presentation"></div>
                 <div id="etherpad"></div>

prezi.js

@@ -22,7 +22,7 @@ var Prezi = (function (my) {
                 VideoLayout.setLargeVideoVisible(false);
                 $('#presentation>iframe').fadeIn(300, function() {
                     $('#presentation>iframe').css({opacity:'1'});
-                    Toolbar.dockToolbar(true);
+                    ToolbarToggler.dockToolbar(true);
                 });
             });
         }
@@ -33,7 +33,7 @@ var Prezi = (function (my) {
                     $('#reloadPresentation').css({display:'none'});
                     $('#largeVideo').fadeIn(300, function() {
                         VideoLayout.setLargeVideoVisible(true);
-                        Toolbar.dockToolbar(false);
+                        ToolbarToggler.dockToolbar(false);
                     });
                 });
             }

toolbar.js

@@ -1,6 +1,4 @@
 var Toolbar = (function (my) {
-    var INITIAL_TOOLBAR_TIMEOUT = 20000;
-    var TOOLBAR_TIMEOUT = INITIAL_TOOLBAR_TIMEOUT;
 
     /**
      * Opens the lock room dialog.
@@ -199,61 +197,6 @@ var Toolbar = (function (my) {
             }
         }
     };
-
-    /**
-     * Shows the main toolbar.
-     */
-    my.showToolbar = function() {
-        if (!$('#header').is(':visible')) {
-            $('#header').show("slide", { direction: "up", duration: 300});
-            $('#subject').animate({top: "+=40"}, 300);
-
-            if (toolbarTimeout) {
-                clearTimeout(toolbarTimeout);
-                toolbarTimeout = null;
-            }
-            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
-            TOOLBAR_TIMEOUT = 4000;
-        }
-
-        if (focus != null)
-        {
-//            TODO: Enable settings functionality. Need to uncomment the settings button in index.html.
-//            $('#settingsButton').css({visibility:"visible"});
-        }
-
-        // Show/hide desktop sharing button
-        showDesktopSharingButton();
-    };
-
-    /**
-     * Docks/undocks the toolbar.
-     *
-     * @param isDock indicates what operation to perform
-     */
-    my.dockToolbar = function(isDock) {
-        if (isDock) {
-            // First make sure the toolbar is shown.
-            if (!$('#header').is(':visible')) {
-                Toolbar.showToolbar();
-            }
-
-            // Then clear the time out, to dock the toolbar.
-            if (toolbarTimeout) {
-                clearTimeout(toolbarTimeout);
-                toolbarTimeout = null;
-            }
-        }
-        else {
-            if (!$('#header').is(':visible')) {
-                Toolbar.showToolbar();
-            }
-            else {
-                toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
-            }
-        }
-    };
-
     /**
      * Updates the lock button state.
      */
@@ -261,30 +204,6 @@ var Toolbar = (function (my) {
         buttonClick("#lockIcon", "icon-security icon-security-locked");
     };
 
-    /**
-     * Hides the toolbar.
-     */
-    var hideToolbar = function () {
-        var isToolbarHover = false;
-        $('#header').find('*').each(function () {
-            var id = $(this).attr('id');
-            if ($("#" + id + ":hover").length > 0) {
-                isToolbarHover = true;
-            }
-        });
-
-        clearTimeout(toolbarTimeout);
-        toolbarTimeout = null;
-
-        if (!isToolbarHover) {
-            $('#header').hide("slide", { direction: "up", duration: 300});
-            $('#subject').animate({top: "-=40"}, 300);
-        }
-        else {
-            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
-        }
-    };
-
     // Shows or hides the 'recording' button.
     my.showRecordingButton = function (show) {
         if (!config.enableRecording) {

toolbar_toggler.js

@@ -0,0 +1,100 @@
+var ToolbarToggler = (function(my) {
+    var INITIAL_TOOLBAR_TIMEOUT = 20000;
+    var TOOLBAR_TIMEOUT = INITIAL_TOOLBAR_TIMEOUT;
+    var toolbarTimeout;
+
+    /**
+     * Shows the main toolbar.
+     */
+    my.showToolbar = function() {
+        var header = $("#header"),
+            bottomToolbar = $("#bottomToolbar");
+        if (!header.is(':visible') || !bottomToolbar.is(":visible")) {
+            header.show("slide", { direction: "up", duration: 300});
+            $('#subject').animate({top: "+=40"}, 300);
+            if(!bottomToolbar.is(":visible")) {
+                bottomToolbar.show("slide", {direction: "right",cduration: 300});
+            }
+
+            if (toolbarTimeout) {
+                clearTimeout(toolbarTimeout);
+                toolbarTimeout = null;
+            }
+            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
+            TOOLBAR_TIMEOUT = 4000;
+        }
+
+        if (focus != null)
+        {
+//            TODO: Enable settings functionality. Need to uncomment the settings button in index.html.
+//            $('#settingsButton').css({visibility:"visible"});
+        }
+
+        // Show/hide desktop sharing button
+        showDesktopSharingButton();
+    };
+
+    /**
+     * Hides the toolbar.
+     */
+    var hideToolbar = function () {
+        var header = $("#header"),
+            bottomToolbar = $("#bottomToolbar");
+        var isToolbarHover = false;
+        header.find('*').each(function () {
+            var id = $(this).attr('id');
+            if ($("#" + id + ":hover").length > 0) {
+                isToolbarHover = true;
+            }
+        });
+        if($("#bottomToolbar:hover").length > 0) {
+                isToolbarHover = true;
+        }
+
+        clearTimeout(toolbarTimeout);
+        toolbarTimeout = null;
+
+        if (!isToolbarHover) {
+            header.hide("slide", { direction: "up", duration: 300});
+            $('#subject').animate({top: "-=40"}, 300);
+            if(!$("#remoteVideos").is(":visible")) {
+                bottomToolbar.hide("slide", {direction: "right", cduration: 300});
+            }
+        }
+        else {
+            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
+        }
+    };
+
+
+    /**
+     * Docks/undocks the toolbar.
+     *
+     * @param isDock indicates what operation to perform
+     */
+    my.dockToolbar = function(isDock) {
+        if (isDock) {
+            // First make sure the toolbar is shown.
+            if (!$('#header').is(':visible')) {
+                ToolbarToggler.showToolbar();
+            }
+
+            // Then clear the time out, to dock the toolbar.
+            if (toolbarTimeout) {
+                clearTimeout(toolbarTimeout);
+                toolbarTimeout = null;
+            }
+        }
+        else {
+            if (!$('#header').is(':visible')) {
+                ToolbarToggler.showToolbar();
+            }
+            else {
+                toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
+            }
+        }
+    };
+
+
+    return my;
+}(ToolbarToggler || {}));