Merge pull request #868 from m-voloshin/ui-redesign-in-progress

Fix for left toolbar (FireFox)

css/_mixins.scss

@@ -36,6 +36,19 @@
   }
 }
 
+@mixin circle($diameter) {
+    width: $diameter;
+    height: $diameter;
+    border-radius: 50%;
+}
+
+@mixin absoluteAligning($sizeX, $sizeY) {
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
+}
+
 @mixin transform($func) {
     -moz-transform: $func;
     -ms-transform: $func;

css/_toolbars.scss

@@ -56,11 +56,11 @@
 }
 
 #extendedToolbar {
-    display: flex;
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
+    display: -webkit-box;
     display: -webkit-flex;
+    display: flex;
     width: $defaultToolbarSize;
     height: 100%;
     top: 0px;

css/_unsupported_browser.scss

@@ -0,0 +1,136 @@
+body {
+    width:100%;
+    height:100%;
+    background-color: white;
+    color: #424242;
+    font-family: $baseFontFamily;
+    font-size: 28px;
+    margin:0;
+    padding:0;
+}
+#wrap{
+    display: block;
+    position: absolute;
+    width:500px;
+    height: 565px;
+    overflow:hidden;
+    text-align: center;
+    margin: auto;
+    top: 0; left: 0; bottom: 0; right: 0;
+}
+.firefox{
+    font-size: 11pt;
+    color: #c8c8c8;
+    width: 468px;
+    text-align: center;
+    margin: 30px auto 0px auto;
+    padding-left: 15px;
+}
+#text{
+    display:inline-block;
+    font-size: 28px;
+    /* width: 568px; */
+    vertical-align:middle;
+    padding-top: 25px;
+}
+
+a {
+    color: #087dba;
+    text-decoration:none;
+}
+
+.browser {
+    width: 138px;
+    height: 163px;
+    margin-top: 5px;
+    background-color: #e8e8e8;
+    border: 1px solid #cfcfcf;
+    border-radius: 10px;
+}
+
+.browser_wrapper
+{
+    width: 138px;
+    /* height: 188px; */
+    vertical-align: middle;
+    color: #929391;
+    font-size: 20px;
+    float: left;
+    margin-left: 15px;
+    margin-top: 5px;
+}
+
+.browser_text
+{
+    height: 2em;
+}
+.supported_browsers
+{
+    margin: 0px auto 0px auto;
+    /* width: 660px; */
+}
+
+.clear
+{
+    clear: both;
+}
+
+.button
+{
+    background-color: #62c82a;
+    border: 1px solid #3c8117;
+    border-radius: 10px;
+    color: #FFFFFF;
+    font-size: 12px;
+    text-align: center;
+    width: 115px;
+    height: 26px;
+    padding-top: 13px;
+    margin: 15px auto 0px auto;
+}
+
+.logo
+{
+    margin: 20px auto 0px auto;
+}
+
+#chrome_logo
+{
+    width: 78px;
+    height: 78px;
+    background-image: url('../images/chrome.png');
+}
+#chromium_logo
+{
+    width: 77px;
+    height: 78px;
+    background-image: url('../images/chromium.png');
+}
+#firefox_logo
+{
+    width: 86px;
+    height: 80px;
+    background-image: url('../images/firefox.png');
+}
+
+#opera_logo
+{
+    width: 73px;
+    height: 78px;
+    background-image: url('../images/opera.png');
+}
+
+#safari_logo
+{
+    width: 78px;
+    height: 79px;
+    background-image: url('../images/safari.png');
+}
+
+#ie_logo
+{
+    width: 80px;
+    height: 78px;
+    background-image: url('../images/ie.png');
+}
+

css/_variables.scss

@@ -24,6 +24,18 @@ $inputLightBackground: #EBEBEB;
 $inputBorderColor: #EBEBEB;
 $buttonBackground: #44A5FF;
 
+$connectionIndicatorBg: #bf2117;
+$thumbnailPictogramColor: #fff;
+$dominantSpeakerBg: #165ecc;
+$raiseHandBg: #6c64a6;
+$participantNameColor: #fff;
+$bodyBg: #091e42;
+$bodyBgLight: #06a5df;
+
+$rateStarDefault: #ccc;
+$rateStarActivity: #f6c342;
+$rateStarLabelColor: #333;
+
 /**
  * Misc.
  */
@@ -34,8 +46,4 @@ $defaultWatermarkLink: '../images/watermark.png';
  * Z-indexes. TODO: Replace this by a function.
  */
 $toolbarZ: 900;
-$overlayZ: 800;
-
-$rateStarDefault: #ccc;
-$rateStarActivity: #f6c342;
-$rateStarLabelColor: #333;
+$overlayZ: 800;

css/_videolayout_default.scss

@@ -13,17 +13,17 @@
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     flex-wrap: nowrap;
-    justify-content: flex-end;
+    justify-content: flex-start;
 
     position:absolute;
     text-align:right;
     height:196px;
-    padding: 18px;
+    padding: 10px 10px 10px 10px;
     bottom: 0;
     left: 0;
-    right: 20px;
+    right: 0px;
     width:auto;
     border:1px solid transparent;
     z-index: 5;
@@ -43,12 +43,25 @@
 
 #remoteVideos .videocontainer {
     display: none;
+    position: relative;
     background-color: black;
     background-size: contain;
     border-radius:1px;
+    margin: 0 5px;
     border: 1px solid #212425;
 }
 
+.videocontainer__toolbar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 25px;
+    max-height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 #remoteVideos .videocontainer.videoContainerFocused {
     cursor: hand;
     transition-duration: 0.5s;
@@ -63,12 +76,12 @@
 }
 
 #remoteVideos .videocontainer.videoContainerFocused {
-    box-shadow: inset 0 0 28px #006d91;
+    //box-shadow: inset 0 0 28px #006d91;
     border: 1px solid #006d91;
 }
 
 #remoteVideos .videocontainer.videoContainerFocused:hover {
-    box-shadow: inset 0 0 5px #c1c1c1, 0 0 10px #c1c1c1, inset 0 0 60px #006d91;
+    //box-shadow: inset 0 0 5px #c1c1c1, 0 0 10px #c1c1c1, inset 0 0 60px #006d91;
     border: 1px solid #c1c1c1;
 }
 
@@ -145,11 +158,11 @@
 #remoteVideos .videocontainer>div.remotevideomenu {
     position: absolute;
     color: #FFFFFF;
-    top: 0;
-    left: 0;
+    bottom: 0;
+    right: 0;
     padding: 5px 0px;
     width: 25px;
-    font-size: 11pt;
+    font-size: 9pt;
     text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
     border: 0px;
     z-index: 2;
@@ -166,22 +179,28 @@
 
 .videocontainer>span.displayname,
 .videocontainer>input.displayname {
-    display: none;
+    display: inline-block;
     position: absolute;
-    color: #FFFFFF;
-    background: rgba(0,0,0,.7);
+    bottom: 4px;
+    left: 25%;
+    color: $participantNameColor;
     text-align: center;
     text-overflow: ellipsis;
-    width: 70%;
-    height: 20%;
-    left: 15%;
-    top: 40%;
-    padding: 5px;
-    font-size: 11pt;
+    width: 50%;
+    font-size: 12px;
+    font-weight: 100;
+    letter-spacing: 1px;
     overflow: hidden;
     white-space: nowrap;
     z-index: 2;
-    border-radius:3px;
+}
+
+.videocontainer>input.displayname {
+    outline: none;
+    border: none;
+    background: none;
+    box-shadow: none;
+    padding: 0;
 }
 
 .videocontainer>span.status {
@@ -231,8 +250,8 @@
 {
     position: absolute;
     left: 0px;
-    top: 0px;
-    font-size: 8pt;
+    top: 3px;
+    font-size: 7.5px;
     border: 0px;
     width: 18px;
     height: 13px;
@@ -291,7 +310,8 @@
     display: inline-block;
     position: absolute;
     color: #FFFFFF;
-    top: 0;
+    bottom: 0;
+    left: 0;
     padding: 8px 5px;
     width: 25px;
     font-size: 8pt;
@@ -305,8 +325,7 @@
     display: inline-block;
     position: absolute;
     color: #FFFFFF;
-    top: 0;
-    right: 0;
+    bottom: 0;
     padding: 8px 5px;
     width: 25px;
     font-size: 8pt;
@@ -316,24 +335,30 @@
 }
 
 .videocontainer>span.indicator {
-    bottom: 0px;
+
+    position: absolute;
+    top: 0px;
     left: 0px;
-    width: 25px;
-    height: 25px;
+    @include circle(23px);
+    box-sizing: border-box;
     z-index: 3;
     text-align: center;
-    border-radius: 50%;
-    background: #21B9FC;
-    margin: 5px;
+    background: $dominantSpeakerBg;
+    margin: 7px;
     display: inline-block;
-    position: absolute;
-    color: #FFFFFF;
+
+    color: $thumbnailPictogramColor;
     font-size: 11pt;
-    border: 0px;
+    border: 2px solid $thumbnailPictogramColor;
+}
+
+.videocontainer>#raisehandindicator {
+    background: $raiseHandBg;
 }
 
 #indicatoricon {
-    padding-top: 5px;
+    font-size: 12px;
+    padding-top: 3px;
 }
 
 #reloadPresentation {
@@ -395,10 +420,8 @@
 }
 
 .userAvatar {
-    height: 100%;
-    position: absolute;
-    left: 0;
-    border-radius: 2px;
+    @include circle(60px);
+    @include absoluteAligning(60px, 60px);
 }
 
 .sharedVideoAvatar {

css/chat/_chat.scss

@@ -0,0 +1,12 @@
+.chat {
+    &__nickname {
+        position: absolute;
+        top: 100px;
+        left: 5px;
+        right: 5px;
+    }
+
+    &__input {
+        
+    }
+}

css/chat/_main.scss

@@ -0,0 +1,222 @@
+@import 'chat';
+
+#chatspace {
+    * {
+        -webkit-user-select: text;
+        user-select: text;
+    }
+
+    display: none;
+    background-color: black;
+    border-left: 1px solid #424242;
+
+    &.is-conversation-mode {
+        #chatconversation {
+            visibility: visible;
+        }
+
+        #usermsg {
+            visibility: visible;
+        }
+
+        #nickname {
+            visibility: hidden;
+        }
+
+        #smileysarea {
+            visibility: visible;
+        }
+    }
+
+    .username {
+        float: left;
+        padding-left: 5px;
+        font-weight: bold;
+    }
+
+    .timestamp {
+        float: right;
+        padding-right: 5px;
+        font-size: 11px;
+    }
+
+    .usermessage {
+        padding-top: 20px;
+        padding-left: 5px;
+    }
+}
+
+#chatconversation {
+    visibility: hidden;
+    position: relative;
+    top: 5px;
+    padding: 5px;
+    text-align: left;
+    line-height: 20px;
+    font-size: 10pt;
+    width: 100%;
+    height: 90%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    word-wrap: break-word;
+}
+
+.localuser {
+    color: #087dba;
+}
+
+.errorMessage {
+    color: red;
+}
+
+.remoteuser {
+    color: white;
+}
+
+#usermsg {
+    visibility:hidden;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    width: 83%;
+    height: 30px;
+    padding: 5px 5px 5px 0px;
+    max-height:150px;
+    min-height:35px;
+    border: 0px none;
+    background: #3a3a3a;
+    color: #a7a7a7;
+    box-shadow: none;
+    border-radius:0;
+    font-size: 10pt;
+    line-height: 30px;
+    overflow: hidden;
+    resize: none;
+
+    &:hover {
+        border: 0px none;
+        box-shadow: none;
+    }
+
+    &::-webkit-scrollbar-track-piece {
+        background: #3a3a3a;
+    }
+
+    &::-webkit-input-placeholder {
+        line-height: 30px;
+    }
+}
+
+#unreadMessages {
+    font-size: 8px;
+    position: absolute;
+}
+
+#bottomUnreadMessages {
+    top: 5px;
+    left: 10px;
+    position: absolute;
+    font-size: 8px;
+}
+
+.chatArrow {
+    position: absolute;
+    height: 15px;
+    left: 5px;
+}
+
+.chatmessage {
+    background: #3a3a3a;
+    width: 93%;
+    margin-left: 5%;
+    margin-right: auto;
+    border-radius: 5px;
+    border-top-left-radius: 0px;
+    margin-top: 3px;
+    left: 5px;
+    color: #a7a7a7;
+    overflow: hidden;
+    padding-bottom: 3px;
+}
+
+.smiley {
+    height: 26px;
+}
+
+#smileys {
+    position: absolute;
+    bottom: 7px;
+    right: 5px;
+    background: white;
+    border-radius: 50px;
+    height: 26px;
+    margin: auto;
+    cursor: pointer;
+
+    img {
+        width: 22px;
+        padding: 2px;
+    }
+}
+
+#smileysarea {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 17%;
+    min-width: 31px;
+    height: 40px;
+    padding: 0px;
+    max-height: 150px;
+    min-height: 35px;
+    border: 0px none;
+    background: #3a3a3a;
+    overflow: hidden;
+    visibility: hidden;
+}
+
+#smileysContainer {
+    display: none;
+    position: absolute;
+    background: #3a3a3a;
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    width: 100%;
+    bottom: 10%;
+
+    .smiley {
+        padding: 7px;
+    }
+}
+
+.smileyContainer {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+
+    &:hover {
+        background: #3e3e3e;
+    }
+}
+
+::-webkit-scrollbar {
+    background: #06a5df;
+    width: 7px;
+}
+
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+::-webkit-scrollbar-track {
+    background: black;
+}
+
+::-webkit-scrollbar-track-piece {
+    background: black;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #06a5df;
+    border-radius: 4px;
+}

css/main.scss

@@ -2,14 +2,14 @@
 
 @import 'variables';
 
-/* Variables END */
-
 /* Mixins BEGIN */
 
 @import "mixins";
 
 /* Mixins END */
 
+/* Variables END */
+
 /* Fonts BEGIN */
 
 @import 'font';

css/nickname/_nickname.scss

@@ -0,0 +1,15 @@
+.nickname {
+    text-align: center;
+    color: #9d9d9d;
+    font-size: 18px;
+    width: 95%;
+
+    &__input {
+       margin-top: 20px;
+       font-size: 14px;
+       background: #3a3a3a;
+       box-shadow: inset 0 0 3px 2px #a7a7a7;
+       border: 1px solid #a7a7a7;
+       color: #a7a7a7;
+    }
+}

index.html

@@ -238,12 +238,13 @@
             </div>
 
             <div id="remoteVideos">
-                <span id="localVideoContainer" class="videocontainer">
+                <span id="localVideoContainer" class="videocontainer videocontainer_small">
                     <span id="localVideoWrapper">
                         <!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
                     </span>
                     <audio id="localAudio" autoplay muted></audio>
                     <span class="focusindicator"></span>
+                    <div class="videocontainer__toolbar"></div>
                 </span>
                 <audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
                 <audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>

interface_config.js

@@ -34,5 +34,9 @@ var interfaceConfig = {
     filmStripOnly: false,
     RANDOM_AVATAR_URL_PREFIX: false,
     RANDOM_AVATAR_URL_SUFFIX: false,
-    FILM_STRIP_MAX_HEIGHT: 120
-};
+    FILM_STRIP_MAX_HEIGHT: 120,
+    LOCAL_THUMBNAIL_RATIO_WIDTH: 16,
+    LOCAL_THUMBNAIL_RATIO_HEIGHT: 9,
+    REMOTE_THUMBNAIL_RATIO_WIDTH: 1,
+    REMOTE_THUMBNAIL_RATIO_HEIGHT: 1
+};

modules/UI/Feedback.js

@@ -1,5 +1,6 @@
 /* global $, APP, config, interfaceConfig, JitsiMeetJS */
 import UIEvents from "../../service/UI/UIEvents";
+import UIUtil from "./util/UIUtil";
 
 /**
  * Constructs the html for the overall feedback window.

modules/UI/audio_levels/AudioLevels.js

@@ -242,19 +242,25 @@ const AudioLevels = {
         ASDrawContext.fill();
     },
 
-    updateCanvasSize (thumbWidth, thumbHeight) {
-        let canvasWidth = thumbWidth + interfaceConfig.CANVAS_EXTRA;
-        let canvasHeight = thumbHeight + interfaceConfig.CANVAS_EXTRA;
+    updateCanvasSize (remoteVideo, localVideo) {
+        let localCanvasWidth = localVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA;
+        let localCanvasHeight = localVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA;
+        let remoteCanvasWidth = remoteVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA;
+        let remoteCanvasHeight = remoteVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA;
 
-        FilmStrip.getThumbs().children('canvas').each(function () {
-            $(this).attr('width', canvasWidth);
-            $(this).attr('height', canvasHeight);
+        let { remoteThumbs, localThumb } = FilmStrip.getThumbs();
+
+        remoteThumbs.children('canvas').each(function () {
+            $(this).attr('width', remoteCanvasWidth);
+            $(this).attr('height', remoteCanvasHeight);
         });
 
-        Object.keys(audioLevelCanvasCache).forEach(function (id) {
-            audioLevelCanvasCache[id].width = canvasWidth;
-            audioLevelCanvasCache[id].height = canvasHeight;
-        });
+        if(localThumb) {
+            localThumb.children('canvas').each(function () {
+                $(this).attr('width', localCanvasWidth);
+                $(this).attr('height', localCanvasHeight);
+            });
+        }
     }
 };
 

modules/UI/toolbars/Toolbar.js

@@ -7,7 +7,6 @@ import SideContainerToggler from "../side_pannels/SideContainerToggler";
 let roomUrl = null;
 let emitter = null;
 
-
 /**
  * Opens the invite link dialog.
  */
@@ -766,4 +765,4 @@ const Toolbar = {
     }
 };
 
-export default Toolbar;
+export default Toolbar;

modules/UI/videolayout/FilmStrip.js

@@ -3,8 +3,6 @@
 import UIEvents from "../../../service/UI/UIEvents";
 import UIUtil from "../util/UIUtil";
 
-const thumbAspectRatio = 1 / 1;
-
 const FilmStrip = {
     /**
      *
@@ -66,13 +64,52 @@ const FilmStrip = {
             - parseInt(this.filmStrip.css('paddingRight'), 10);
     },
 
-    /**
-     * Calculates the thumbnail size.
-     */
-     calculateThumbnailSize () {
-        let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
+    calculateThumbnailSize() {
+        let availableSizes = this.calculateAvailableSize();
+        let width = availableSizes.availableWidth;
+        let height = availableSizes.availableHeight;
 
-        let numvids = this.getThumbs(true).length;
+        return this.calculateThumbnailSizeFromAvailable(width, height);
+    },
+
+    /**
+     * Normalizes local and remote thumbnail ratios
+     */
+     normalizeThumbnailRatio () {
+        let remoteHeightRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_HEIGHT;
+        let remoteWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_WIDTH;
+
+        let localHeightRatio = interfaceConfig.LOCAL_THUMBNAIL_RATIO_HEIGHT;
+        let localWidthRatio = interfaceConfig.LOCAL_THUMBNAIL_RATIO_WIDTH;
+
+        let commonHeightRatio = remoteHeightRatio * localHeightRatio;
+
+        let localRatioCoefficient = localWidthRatio / localHeightRatio;
+        let remoteRatioCoefficient = remoteWidthRatio / remoteHeightRatio;
+
+        remoteWidthRatio = commonHeightRatio * remoteRatioCoefficient;
+        remoteHeightRatio = commonHeightRatio;
+
+        localWidthRatio = commonHeightRatio * localRatioCoefficient;
+        localHeightRatio = commonHeightRatio;
+
+        let localRatio = {
+            widthRatio: localWidthRatio,
+            heightRatio: localHeightRatio
+        };
+
+        let remoteRatio = {
+            widthRatio: remoteWidthRatio,
+            heightRatio: remoteHeightRatio
+        };
+
+        return { localRatio, remoteRatio };
+    },
+
+    calculateAvailableSize() {
+        let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
+        let thumbs = this.getThumbs(true);
+        let numvids = thumbs.remoteThumbs.length;
 
         let localVideoContainer = $("#localVideoContainer");
 
@@ -92,11 +129,10 @@ const FilmStrip = {
 
         let availableWidth = videoAreaAvailableWidth;
 
-        // If the number of videos is 0 or undefined we don't need to calculate
-        // further.
-        if (numvids)
+        // If local thumb is not hidden
+        if(thumbs.localThumb) {
             availableWidth = Math.floor(
-                (videoAreaAvailableWidth - numvids * (
+                (videoAreaAvailableWidth - (
                 UIUtil.parseCssInt(
                     localVideoContainer.css('borderLeftWidth'), 10)
                 + UIUtil.parseCssInt(
@@ -109,36 +145,90 @@ const FilmStrip = {
                     localVideoContainer.css('marginLeft'), 10)
                 + UIUtil.parseCssInt(
                     localVideoContainer.css('marginRight'), 10)))
-                / numvids);
+            );
+        }
+
+        // If the number of videos is 0 or undefined we don't need to calculate
+        // further.
+        if (numvids) {
+            let remoteVideoContainer = thumbs.remoteThumbs.eq(0);
+            availableWidth = Math.floor(
+                (videoAreaAvailableWidth - numvids * (
+                UIUtil.parseCssInt(
+                    remoteVideoContainer.css('borderLeftWidth'), 10)
+                + UIUtil.parseCssInt(
+                    remoteVideoContainer.css('borderRightWidth'), 10)
+                + UIUtil.parseCssInt(
+                    remoteVideoContainer.css('paddingLeft'), 10)
+                + UIUtil.parseCssInt(
+                    remoteVideoContainer.css('paddingRight'), 10)
+                + UIUtil.parseCssInt(
+                    remoteVideoContainer.css('marginLeft'), 10)
+                + UIUtil.parseCssInt(
+                    remoteVideoContainer.css('marginRight'), 10)))
+            );
+        }
 
         let maxHeight
             // If the MAX_HEIGHT property hasn't been specified
             // we have the static value.
-            = Math.min( interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120,
-                        availableHeight);
+            = Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120,
+            availableHeight);
 
         availableHeight
-            = Math.min( maxHeight, window.innerHeight - 18);
+            = Math.min(maxHeight, window.innerHeight - 18);
 
-        if (availableHeight < availableWidth) {
-            availableWidth = availableHeight;
+        return { availableWidth, availableHeight };
+    },
+
+    calculateThumbnailSizeFromAvailable(availableWidth, availableHeight) {
+        let { localRatio, remoteRatio } = this.normalizeThumbnailRatio();
+        let { remoteThumbs } = this.getThumbs(true);
+        let remoteProportion = remoteRatio.widthRatio * remoteThumbs.length;
+        let widthProportion = remoteProportion + localRatio.widthRatio;
+
+        let heightUnit = availableHeight / localRatio.heightRatio;
+        let widthUnit = availableWidth / widthProportion;
+
+        if (heightUnit < widthUnit) {
+            widthUnit = heightUnit;
         }
         else
-            availableHeight = availableWidth;
+            heightUnit = widthUnit;
+
+        let localVideo = {
+            thumbWidth: widthUnit * localRatio.widthRatio,
+            thumbHeight: heightUnit * localRatio.heightRatio
+        };
+        let remoteVideo = {
+            thumbWidth: widthUnit * remoteRatio.widthRatio,
+            thumbHeight: widthUnit * remoteRatio.heightRatio
+        };
 
         return {
-            thumbWidth: availableWidth,
-            thumbHeight: availableHeight
+            localVideo,
+            remoteVideo
         };
     },
 
-    resizeThumbnails (thumbWidth, thumbHeight,
+    resizeThumbnails (remote, local,
                       animate = false, forceUpdate = false) {
 
         return new Promise(resolve => {
-            this.getThumbs(!forceUpdate).animate({
-                height: thumbHeight,
-                width: thumbWidth
+            let thumbs = this.getThumbs(!forceUpdate);
+
+            thumbs.localThumb.animate({
+                height: local.thumbHeight,
+                width: local.thumbWidth
+            }, {
+                queue: false,
+                duration: animate ? 500 : 0,
+                complete:  resolve
+            });
+
+            thumbs.remoteThumbs.animate({
+                height: remote.thumbHeight,
+                width: remote.thumbWidth
             }, {
                 queue: false,
                 duration: animate ? 500 : 0,
@@ -147,7 +237,7 @@ const FilmStrip = {
 
             this.filmStrip.animate({
                 // adds 2 px because of small video 1px border
-                height: thumbHeight + 2
+                height: remote.thumbHeight + 2
             }, {
                 queue: false,
                 duration: animate ? 500 : 0
@@ -165,13 +255,19 @@ const FilmStrip = {
             selector += ':visible';
         }
 
+        let localThumb = $("#localVideoContainer");
+        let remoteThumbs = this.filmStrip.children(selector)
+            .not("#localVideoContainer");
+
         // Exclude the local video container if it has been hidden.
-        if ($("#localVideoContainer").hasClass("hidden"))
-            return this.filmStrip.children(selector)
-                    .not("#localVideoContainer");
-        else
-            return this.filmStrip.children(selector);
-    }
+        if (localThumb.hasClass("hidden")) {
+            return { remoteThumbs };
+        } else {
+            return { remoteThumbs, localThumb };
+        }
+
+    },
+
 };
 
 export default FilmStrip;

modules/UI/videolayout/LocalVideo.js

@@ -11,7 +11,6 @@ function LocalVideo(VideoLayout, emitter) {
     this.videoSpanId = "localVideoContainer";
     this.container = $("#localVideoContainer").get(0);
     this.localVideoId = null;
-    this.bindHoverHandler();
     if(config.enableLocalVideoFlip)
         this._buildContextMenu();
     this.isLocal = true;
@@ -44,7 +43,7 @@ function createEditDisplayNameButton() {
     editButton.className = 'displayname';
     UIUtil.setTooltip(editButton,
         "videothumbnail.editnickname",
-        "top");
+        "left");
     editButton.innerHTML = '<i class="icon-edit"></i>';
 
     return editButton;
@@ -72,7 +71,7 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
             if (displayName && displayName.length > 0) {
                 meHTML = APP.translation.generateTranslationHTML("me");
                 $('#localDisplayName').html(
-                    UIUtil.escapeHtml(displayName) + ' (' + meHTML + ')'
+                    `${UIUtil.escapeHtml(displayName)} (${meHTML})`
                 );
             } else {
                 $('#localDisplayName').html(defaultLocalDisplayName);
@@ -80,11 +79,9 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
         }
         this.updateView();
     } else {
-        var editButton = createEditDisplayNameButton();
-
         nameSpan = document.createElement('span');
         nameSpan.className = 'displayname';
-        $('#' + this.videoSpanId)[0].appendChild(nameSpan);
+        document.getElementById(this.videoSpanId).appendChild(nameSpan);
 
 
         if (displayName && displayName.length > 0) {
@@ -97,7 +94,6 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
 
 
         nameSpan.id = 'localDisplayName';
-        this.container.appendChild(editButton);
         //translates popover of edit button
         APP.translation.translateElement($("a.displayname"));
 
@@ -124,21 +120,23 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
         var self = this;
         $('#localVideoContainer .displayname')
             .bind("click", function (e) {
+                let $editDisplayName = $('#editDisplayName');
+                let $localDisplayName = $('#localDisplayName');
 
-                var editDisplayName = $('#editDisplayName');
                 e.preventDefault();
                 e.stopPropagation();
-                $('#localDisplayName').hide();
-                editDisplayName.show();
-                editDisplayName.focus();
-                editDisplayName.select();
+                $localDisplayName.hide();
+                $editDisplayName.show();
+                $editDisplayName.focus();
+                $editDisplayName.select();
 
-                editDisplayName.one("focusout", function (e) {
+                $editDisplayName.one("focusout", function (e) {
                     self.emitter.emit(UIEvents.NICKNAME_CHANGED, this.value);
-                    $('#editDisplayName').hide();
+                    $editDisplayName.hide();
+                    $localDisplayName.show();
                 });
 
-                editDisplayName.on('keydown', function (e) {
+                $editDisplayName.on('keydown', function (e) {
                     if (e.keyCode === 13) {
                         e.preventDefault();
                         $('#editDisplayName').hide();

modules/UI/videolayout/RemoteVideo.js

@@ -17,7 +17,6 @@ function RemoteVideo(id, VideoLayout, emitter) {
     this.addRemoteVideoContainer();
     this.connectionIndicator = new ConnectionIndicator(this, id);
     this.setDisplayName();
-    this.bindHoverHandler();
     this.flipX = false;
     this.isLocal = false;
     this.isMuted = false;
@@ -34,7 +33,9 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
     if (APP.conference.isModerator) {
         this.addRemoteVideoMenu();
     }
-    let {thumbWidth, thumbHeight} = this.VideoLayout.resizeThumbnails();
+
+    let { remoteVideo } = this.VideoLayout.resizeThumbnails();
+    let { thumbHeight, thumbWidth } = remoteVideo;
     AudioLevels.updateAudioLevelCanvas(this.id, thumbWidth, thumbHeight);
 
     return this.container;
@@ -427,9 +428,14 @@ RemoteVideo.prototype.removeRemoteVideoMenu = function() {
 };
 
 RemoteVideo.createContainer = function (spanId) {
-    var container = document.createElement('span');
+    let container = document.createElement('span');
     container.id = spanId;
     container.className = 'videocontainer';
+
+    let toolbar = document.createElement('div');
+    toolbar.className = "videocontainer__toolbar";
+    container.appendChild(toolbar);
+
     var remotes = document.getElementById('remoteVideos');
     return remotes.appendChild(container);
 };

modules/UI/videolayout/SmallVideo.js

@@ -219,6 +219,7 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) {
         if (audioMutedSpan.length > 0) {
             audioMutedSpan.popover('hide');
             audioMutedSpan.remove();
+            this.updateIconPositions();
         }
     }
     else {
@@ -236,6 +237,7 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) {
             audioMutedSpan.appendChild(mutedIndicator);
 
         }
+
         this.updateIconPositions();
     }
     this.isMuted = isMuted;
@@ -254,6 +256,7 @@ SmallVideo.prototype.setMutedView = function(isMuted) {
     if (isMuted === false) {
         if (videoMutedSpan.length > 0) {
             videoMutedSpan.remove();
+            this.updateIconPositions();
         }
     }
     else {
@@ -278,17 +281,10 @@ SmallVideo.prototype.setMutedView = function(isMuted) {
 };
 
 SmallVideo.prototype.updateIconPositions = function () {
-    var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
-    var connectionIndicator = $('#' + this.videoSpanId + '>div.connectionindicator');
-    var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
-    if(connectionIndicator.length > 0 &&
-        connectionIndicator[0].style.display != "none") {
-        audioMutedSpan.css({right: "23px"});
-        videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"});
-    } else {
-        audioMutedSpan.css({right: "0px"});
-        videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"});
-    }
+    let audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
+    let videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
+    audioMutedSpan.css({left: "0px"});
+    videoMutedSpan.css({left: (audioMutedSpan.length > 0? 25 : 0) + "px"});
 };
 
 /**
@@ -406,8 +402,6 @@ SmallVideo.prototype.updateView = function () {
         setVisibility(video, showVideo);
     }
     setVisibility(avatar, showAvatar);
-
-    this.showDisplayName(!showVideo && !showAvatar);
 };
 
 SmallVideo.prototype.avatarChanged = function (avatarUrl) {
@@ -465,7 +459,6 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
     var indicatorSpanId = "raisehandindicator";
     var indicatorSpan = this.getIndicatorSpan(indicatorSpanId);
 
-    indicatorSpan.style.background = "#D6D61E";
     indicatorSpan.innerHTML
         = "<i id='indicatoricon' class='fa fa-hand-paper-o'></i>";
 

modules/UI/videolayout/VideoLayout.js

@@ -487,19 +487,20 @@ var VideoLayout = {
                         forceUpdate = false,
                         onComplete = null) {
 
-        let {thumbWidth, thumbHeight}
+        let { remoteVideo, localVideo }
             = FilmStrip.calculateThumbnailSize();
 
-        $('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
+        let {thumbWidth, thumbHeight}
+            = remoteVideo;
 
-        FilmStrip.resizeThumbnails(thumbWidth, thumbHeight,
+        FilmStrip.resizeThumbnails(remoteVideo, localVideo,
             animate, forceUpdate)
             .then(function () {
-                AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
+                AudioLevels.updateCanvasSize(remoteVideo, localVideo);
                 if (onComplete && typeof onComplete === "function")
                     onComplete();
-        });
-        return {thumbWidth, thumbHeight};
+            });
+        return {remoteVideo, localVideo};
     },
 
     /**

package.json

@@ -21,18 +21,18 @@
     "bootstrap": "3.1.1",
     "events": "*",
     "i18next-client": "1.7.7",
-    "jquery": "~2.1.1",
     "jQuery-Impromptu": "git+https://github.com/trentrichardson/jQuery-Impromptu.git#v6.0.0",
-    "lib-jitsi-meet": "git+https://github.com/jitsi/lib-jitsi-meet.git",
+    "jquery": "~2.1.1",
     "jquery-contextmenu": "*",
     "jquery-ui": "1.10.5",
     "jssha": "1.5.0",
+    "jws": "*",
+    "lib-jitsi-meet": "git+https://github.com/jitsi/lib-jitsi-meet.git",
+    "postis": "^2.2.0",
     "retry": "0.6.1",
     "strophe": "^1.2.2",
     "strophejs-plugins": "^0.0.6",
-    "toastr": "^2.0.3",
-    "postis": "^2.2.0",
-    "jws": "*"
+    "toastr": "^2.0.3"
   },
   "devDependencies": {
     "babel-polyfill": "*",