Merge pull request #550 from jitsi/polish-ui

Polish ui

config.js

@@ -70,4 +70,5 @@ var config = {
     'During that time service will not be available. ' +
     'Apologise for inconvenience.',*/
     disableThirdPartyRequests: false,
+    minHDHeight: 540
 };

css/chat.css

@@ -95,8 +95,6 @@
 #unreadMessages {
     font-size: 8px;
     position: absolute;
-    left: 46%;
-    top: 27%
 }
 
 #bottomUnreadMessages {

css/main.css

@@ -9,7 +9,7 @@ html, body{
     color: #424242;
     font-family:'Helvetica Neue', Helvetica, sans-serif;
     font-weight: 400;
-    background: #000000;
+    background: #4E4E4E;
     overflow: hidden;
 }
 
@@ -38,16 +38,6 @@ html, body{
     position: relative;
 }
 
-#toolbar a.button::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    left: 40px;
-    width: 1px;
-    height: 20px;
-    background: #373737;
-}
-
 #toolbar a.button:last-child::after {
     content: none;
 }
@@ -56,14 +46,16 @@ html, body{
     display: inline-block;
     position: relative;
     color: #FFFFFF;
-    top: 0;
-    padding: 10px 0;
+    top:0px;
+    padding-top: 10px;
     width: 38px;
+    height: 28px;
     cursor: pointer;
     text-align: center;
     text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.6);
     z-index: 1;
     font-size: 1.22em !important;
+    vertical-align: middle;
 }
 
 .toolbar_span>span {
@@ -104,13 +96,13 @@ html, body{
 #numberOfParticipants {
     position: absolute;
     top: 0px;
-    right: -1;
+    right: -1px;
     color: white;
     width: 13px;
     height: 13px;
     line-height: 13px;
     font-weight: bold;
-    border-radius: 2px;
+    border-radius: 1px;
     font-size: 11px;
     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 }
@@ -119,6 +111,19 @@ html, body{
     color: #00ccff;
 }
 
+#toolbar {
+    display:inline-block;
+    position:relative;
+    top:5px;
+    margin-left:auto;
+    margin-right:auto;
+    height:38px;
+    width:auto;
+    background-color: rgba(0,0,0,0.5);
+    border-radius: 1px;
+    pointer-events: auto;
+}
+
 #toolbar_button_record {
     -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
@@ -142,13 +147,10 @@ html, body{
 
 a.button:hover,
 a.bottomToolbarButton:hover {
-    top: 0px;
     cursor: pointer;
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
-    background-clip: padding-box;
-    -webkit-border-radius: 6px;
-    -webkit-background-clip: padding-box;
+    border-radius: 1px;
+    -webkit-border-radius: 1px;
 }
 
 .no-fa-video-camera, .fa-microphone-slash {
@@ -158,7 +160,7 @@ a.bottomToolbarButton:hover {
 .header_button_separator {
     display: inline-block;
     position:relative;
-    top: 5;
+    top: 5px;
     width: 1px;
     height: 20px;
     background: #373737;
@@ -167,7 +169,7 @@ a.bottomToolbarButton:hover {
 .bottom_button_separator {
     display: inline-block;
     position: relative;
-    left: 5;
+    left: 5px;
     width: 20px;
     height: 1px;
     background: #373737;
@@ -211,7 +213,7 @@ button {
     height: 35px;
     padding: 0 1em 0 2em;
     position: relative;
-    border-radius: 3px;
+    border-radius: 1px;
     font-weight: bold;
     color: #fff;
     line-height: 35px;
@@ -273,10 +275,9 @@ div.feedbackButton:hover {
     margin-right: 5px;
     bottom: 40px;
     width: 29px;
-    border-radius: 6px;
+    border-radius: 1px;
     color: #FFF;
-    border: 1px solid rgba(256, 256, 256, 0.2);
-    background: rgba(0,0,0,0.8);
+    background: rgba(0,0,0,0.5);
     z-index: 6; /*+1 from #remoteVideos*/
 }
 
@@ -350,7 +351,7 @@ div.feedbackButton:hover {
 }
 
 #toast-container.notification-bottom-right {
-    bottom: 120px;
+    bottom: 140px;
     right: 5px;
 }
 

css/popup_menu.css

@@ -13,7 +13,7 @@ ul.popupmenu {
     width: 100px;
     background-color: rgba(0,0,0,0.9);
     border: 1px solid rgba(256, 256, 256, 0.2);
-    border-radius:8px;
+    border-radius:3px;
 }
 
 ul.popupmenu:after {
@@ -31,7 +31,7 @@ ul.popupmenu li {
 
 ul.popupmenu li:hover {
     background-color: rgba(256, 256, 256, .2);
-    border-radius:6px;
+    border-radius:3px;
 }
 
 /*Link Appearance*/

css/videolayout_default.css

@@ -21,6 +21,7 @@
     z-index: 5;
     transition: bottom 2s;
     overflow: visible !important;
+    font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
 }
 
 #remotevideos.hidden {
@@ -38,12 +39,12 @@
     display: none;
     background-color: black;
     background-size: contain;
-    border-radius:8px;
-    border: 2px solid #212425;
-    margin-right: 3px;
+    border-radius:1px;
+    border: 1px solid #212425;
+    /*margin-right: 1px;*/
 }
 
-#remoteVideos .videocontainer:hover,
+/*#remoteVideos .videocontainer:hover,*/
 #remoteVideos .videocontainer.videoContainerFocused {
     cursor: hand;
     /* transform:scale(1.08, 1.08);
@@ -57,25 +58,21 @@
 }
 
 #remoteVideos .videocontainer:hover {
-    box-shadow:  inset 0 0 10px #FFFFFF, 0 0 10px #FFFFFF;
-    border: 2px solid #FFFFFF;
+    border: 1px solid #c1c1c1;
 }
 
 #remoteVideos .videocontainer.videoContainerFocused {
     box-shadow: inset 0 0 28px #006d91;
-    border: 2px solid #006d91;
+    border: 1px solid #006d91;
 }
 
 #remoteVideos .videocontainer.videoContainerFocused:hover {
-    box-shadow: inset 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, inset 0 0 60px #006d91;
-    border: 2px solid #FFFFFF;
+    box-shadow: inset 0 0 5px #c1c1c1, 0 0 10px #c1c1c1, inset 0 0 60px #006d91;
+    border: 1px solid #c1c1c1;
 }
 
 #localVideoWrapper {
     display:inline-block;
-    -webkit-mask-box-image: url(../images/videomask.svg);
-    border-radius:4px !important;
-    border: 0px !important;
 }
 
 /* With TemasysWebRTC plugin <object/> element is used
@@ -83,7 +80,8 @@
 #remoteVideos .videocontainer>video,
 #remoteVideos .videocontainer>object {
     cursor: hand;
-    border-radius:4px;
+    border-radius:1px;
+    object-fit: cover;
 }
 
 .flipVideoX {
@@ -96,7 +94,8 @@
 #localVideoWrapper>video,
 #localVideoWrapper>object {
     cursor: hand;
-    border-radius:4px !important;
+    border-radius:1px !important;
+    object-fit: cover;
 }
 
 #largeVideo,
@@ -177,7 +176,7 @@
     overflow: hidden;
     white-space: nowrap;
     z-index: 2;
-    border-radius:20px;
+    border-radius:3px;
 }
 
 .videocontainer>span.status {
@@ -196,7 +195,7 @@
     overflow: hidden;
     white-space: nowrap;
     z-index: 2;
-    border-radius:20px;
+    border-radius:3px;
 }
 
 .connectionindicator
@@ -360,22 +359,6 @@
     pointer-events: none;
 }
 
-#toolbar {
-    display:inline-block;
-    position:relative;
-    margin-top:5px;
-    margin-left:auto;
-    margin-right:auto;
-    padding-left:2px;
-    padding-right:2px;
-    height:38px;
-    width:auto;
-    background-color: rgba(0,0,0,0.8);
-    border: 1px solid rgba(256, 256, 256, 0.2);
-    border-radius: 6px;
-    pointer-events: auto;
-}
-
 #subject {
     position: relative;
     z-index: 3;
@@ -395,14 +378,14 @@
     display: inline-block;
     position: absolute;
     z-index: 0;
-    border-radius:10px;
+    border-radius:1px;
     pointer-events: none;
 }
 
 #dominantSpeaker {
     visibility: hidden;
-    width: 150px;
-    height: 150px;
+    width: 300px;
+    height: 300px;
     margin: auto;
     overflow: hidden;
     position: relative;
@@ -421,21 +404,22 @@
 }
 
 #dominantSpeakerAvatar {
-    width: 100px;
-    height: 100px;
-    top: 25px;
+    width: 200px;
+    height: 200px;
+    top: 50px;
     margin: auto;
     position: relative;
-    border-radius: 50px;
+    border-radius: 100px;
     z-index: 3;
     visibility: inherit;
+    background-color: #000000;
 }
 
 .userAvatar {
     height: 100%;
     position: absolute;
-    left: 35px;
-    border-radius: 200px;
+    left: 0;
+    border-radius: 2px;
 }
 
 .sharedVideoAvatar {
@@ -491,4 +475,15 @@
                     0px 1px 1px rgba(0,0,0,0.3),
                     1px 0px 1px rgba(0,0,0,0.3),
                     0px 0px 1px rgba(0,0,0,0.3);
+}
+
+#videoResolutionLabel {
+    display: none;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: rgba(0,0,0,.5);
+    padding: 10px;
+    color: rgba(255,255,255,.5);
+    z-index: 10000;
 }

css/welcome_page.css

@@ -42,11 +42,11 @@
 }
 
 #enter_room_form {
-    border-radius: 10px;
+    border-radius: 1px;
     background-color: #FFFFFF;
     border: none;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
+    -moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
     -webkit-appearance: none;
     height: 55px;
     box-shadow: none;
@@ -82,8 +82,8 @@
     width: 73px;
     height: 45px;
     background-color: #16a8fe;
-    moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
+    moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
     color: #ffffff;
     font-weight: 600;
     border: none;

index.html

@@ -153,6 +153,7 @@
                     <video id="largeVideo" muted="true" autoplay></video>
                 </div>
                 <span id="videoConnectionMessage"></span>
+                <span id="videoResolutionLabel">HD</span>
             </div>
 
             <div id="remoteVideos">

interface_config.js

@@ -1,6 +1,6 @@
 var interfaceConfig = {
     CANVAS_EXTRA: 104,
-    CANVAS_RADIUS: 7,
+    CANVAS_RADIUS: 0,
     SHADOW_COLOR: '#ffffff',
     INITIAL_TOOLBAR_TIMEOUT: 20000,
     TOOLBAR_TIMEOUT: 4000,
@@ -14,7 +14,6 @@ var interfaceConfig = {
     GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
     APP_NAME: "Jitsi Meet",
     INVITATION_POWERED_BY: true,
-    DOMINANT_SPEAKER_AVATAR_SIZE: 100,
     TOOLBAR_BUTTONS: ['authentication', 'microphone', 'camera', 'desktop',
         'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo',
         'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip',
@@ -30,5 +29,5 @@ var interfaceConfig = {
     filmStripOnly: false,
     RANDOM_AVATAR_URL_PREFIX: false,
     RANDOM_AVATAR_URL_SUFFIX: false,
-    FILM_STRIP_MAX_HEIGHT: 160
+    FILM_STRIP_MAX_HEIGHT: 120
 };

modules/UI/audio_levels/AudioLevels.js

@@ -8,13 +8,16 @@ const LOCAL_LEVEL = 'local';
 
 let ASDrawContext = null;
 let audioLevelCanvasCache = {};
+let dominantSpeakerAudioElement = null;
 
-function initDominantSpeakerAudioLevels() {
-    let ASRadius = interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE / 2;
-    let ASCenter = (interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE + ASRadius) / 2;
+function initDominantSpeakerAudioLevels(dominantSpeakerAvatarSize) {
+    let ASRadius = dominantSpeakerAvatarSize / 2;
+    let ASCenter = (dominantSpeakerAvatarSize + ASRadius) / 2;
 
     // Draw a circle.
+    ASDrawContext.beginPath();
     ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI);
+    ASDrawContext.closePath();
 
     // Add a shadow around the circle
     ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR;
@@ -90,14 +93,14 @@ function getShadowLevel (audioLevel) {
     let shadowLevel = 0;
 
     if (audioLevel <= 0.3) {
-        shadowLevel
-            = Math.round(interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
+        shadowLevel = Math.round(
+            interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
     } else if (audioLevel <= 0.6) {
-        shadowLevel
-            = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
+        shadowLevel = Math.round(
+            interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
     } else {
-        shadowLevel
-            = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
+        shadowLevel = Math.round(
+            interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
     }
 
     return shadowLevel;
@@ -124,8 +127,18 @@ function getVideoSpanId(id) {
 const AudioLevels = {
 
     init () {
-        ASDrawContext = $('#dominantSpeakerAudioLevel')[0].getContext('2d');
-        initDominantSpeakerAudioLevels();
+        dominantSpeakerAudioElement =  $('#dominantSpeakerAudioLevel')[0];
+        ASDrawContext = dominantSpeakerAudioElement.getContext('2d');
+
+        let parentContainer = $("#dominantSpeaker");
+        let dominantSpeakerWidth = parentContainer.width();
+        let dominantSpeakerHeight = parentContainer.height();
+
+        dominantSpeakerAudioElement.width = dominantSpeakerWidth;
+        dominantSpeakerAudioElement.height = dominantSpeakerHeight;
+
+        let dominantSpeakerAvatar = $("#dominantSpeakerAvatar");
+        initDominantSpeakerAudioLevels(dominantSpeakerAvatar.width());
     },
 
     /**
@@ -155,8 +168,10 @@ const AudioLevels = {
 
             audioLevelCanvas = document.createElement('canvas');
             audioLevelCanvas.className = "audiolevel";
-            audioLevelCanvas.style.bottom = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
-            audioLevelCanvas.style.left = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
+            audioLevelCanvas.style.bottom
+                = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
+            audioLevelCanvas.style.left
+                = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
             resizeAudioLevelCanvas(audioLevelCanvas, thumbWidth, thumbHeight);
 
             videoSpan.appendChild(audioLevelCanvas);
@@ -213,7 +228,10 @@ const AudioLevels = {
             return;
         }
 
-        ASDrawContext.clearRect(0, 0, 300, 300);
+        ASDrawContext.clearRect(0, 0,
+            dominantSpeakerAudioElement.width,
+            dominantSpeakerAudioElement.height);
+
         if (!audioLevel) {
             return;
         }

modules/UI/avatar/Avatar.js

@@ -48,14 +48,21 @@ export default {
         }
         avatarId = MD5.hexdigest(avatarId.trim().toLowerCase());
 
-        // Default to using gravatar.
-        let urlPref = 'https://www.gravatar.com/avatar/';
-        let urlSuf = "?d=wavatar&size=100";
 
-        if (random && interfaceConfig.RANDOM_AVATAR_URL_PREFIX) {
+        let urlPref = null;
+        let urlSuf = null;
+        if (!random) {
+            urlPref = 'https://www.gravatar.com/avatar/';
+            urlSuf = "?d=wavatar&size=200";
+        }
+        else if (random && interfaceConfig.RANDOM_AVATAR_URL_PREFIX) {
             urlPref = interfaceConfig.RANDOM_AVATAR_URL_PREFIX;
             urlSuf = interfaceConfig.RANDOM_AVATAR_URL_SUFFIX;
         }
+        else {
+            urlPref = 'https://robohash.org/';
+            urlSuf = ".png?size=200x200";
+        }
 
         return urlPref + avatarId + urlSuf;
     }

modules/UI/side_pannels/chat/Chat.js

@@ -35,7 +35,7 @@ function setVisualNotification(show) {
         var leftIndent = (UIUtil.getTextWidth(chatButtonElement) -
             UIUtil.getTextWidth(unreadMsgElement)) / 2;
         var topIndent = (UIUtil.getTextHeight(chatButtonElement) -
-            UIUtil.getTextHeight(unreadMsgElement)) / 2 - 3;
+            UIUtil.getTextHeight(unreadMsgElement)) / 2 - 5;
 
         unreadMsgElement.setAttribute(
             'style',

modules/UI/videolayout/ConnectionIndicator.js

@@ -1,6 +1,7 @@
-/* global APP, $ */
+/* global APP, $, config */
 /* jshint -W101 */
 import JitsiPopover from "../util/JitsiPopover";
+import VideoLayout from "./VideoLayout";
 
 /**
  * Constructs new connection indicator.
@@ -14,6 +15,7 @@ function ConnectionIndicator(videoContainer, id) {
     this.bitrate = null;
     this.showMoreValue = false;
     this.resolution = null;
+    this.isResolutionHD = null;
     this.transport = [];
     this.popover = null;
     this.id = id;
@@ -292,7 +294,6 @@ ConnectionIndicator.prototype.remove = function() {
  */
 ConnectionIndicator.prototype.updateConnectionQuality =
     function (percent, object) {
-
     if (percent === null) {
         this.connectionIndicatorContainer.style.display = "none";
         this.popover.forceHide();
@@ -316,6 +317,10 @@ ConnectionIndicator.prototype.updateConnectionQuality =
                 ConnectionIndicator.connectionQualityValues[quality];
         }
     }
+    if (object.isResolutionHD) {
+        this.isResolutionHD = object.isResolutionHD;
+    }
+    this.updateResolutionIndicator();
     this.updatePopoverData();
 };
 
@@ -325,6 +330,7 @@ ConnectionIndicator.prototype.updateConnectionQuality =
  */
 ConnectionIndicator.prototype.updateResolution = function (resolution) {
     this.resolution = resolution;
+    this.updateResolutionIndicator();
     this.updatePopoverData();
 };
 
@@ -354,4 +360,29 @@ ConnectionIndicator.prototype.hideIndicator = function () {
         this.popover.forceHide();
 };
 
+/**
+ * Updates the resolution indicator.
+ */
+ConnectionIndicator.prototype.updateResolutionIndicator = function () {
+
+    if (this.id !== null
+        && VideoLayout.isCurrentlyOnLarge(this.id)) {
+
+        let showResolutionLabel = false;
+
+        if (this.isResolutionHD !== null)
+            showResolutionLabel = this.isResolutionHD;
+        else if (this.resolution !== null) {
+            let resolutions = this.resolution || {};
+            Object.keys(resolutions).map(function (ssrc) {
+                    let {width, height} = resolutions[ssrc];
+                    if (height >= config.minHDHeight)
+                        showResolutionLabel = true;
+                });
+        }
+
+        VideoLayout.updateResolutionLabel(showResolutionLabel);
+    }
+};
+
 export default ConnectionIndicator;

modules/UI/videolayout/FilmStrip.js

@@ -2,7 +2,7 @@
 
 import UIUtil from "../util/UIUtil";
 
-const thumbAspectRatio = 16.0 / 9.0;
+const thumbAspectRatio = 1 / 1;
 
 const FilmStrip = {
     init () {
@@ -44,11 +44,7 @@ const FilmStrip = {
      * that we want to take into account when calculating the film strip width.
      */
      calculateThumbnailSize (isSideBarVisible) {
-        // 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.
-        let availableHeight = 100;
+        let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
 
         let numvids = this.getThumbs(true).length;
 
@@ -80,17 +76,17 @@ const FilmStrip = {
         let maxHeight
             // If the MAX_HEIGHT property hasn't been specified
             // we have the static value.
-            = Math.min( interfaceConfig.FILM_STRIP_MAX_HEIGHT || 160,
+            = Math.min( interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120,
                         availableHeight);
 
         availableHeight
-            = Math.min( maxHeight,
-            availableWidth / thumbAspectRatio,
-            window.innerHeight - 18);
+            = Math.min( maxHeight, window.innerHeight - 18);
 
-        if (availableHeight < availableWidth / thumbAspectRatio) {
-            availableWidth = Math.floor(availableHeight * thumbAspectRatio);
+        if (availableHeight < availableWidth) {
+            availableWidth = availableHeight;
         }
+        else
+            availableHeight = availableWidth;
 
         return {
             thumbWidth: availableWidth,

modules/UI/videolayout/LargeVideo.js

@@ -8,7 +8,6 @@ import FilmStrip from './FilmStrip';
 import Avatar from "../avatar/Avatar";
 import {createDeferred} from '../../util/helpers';
 
-const avatarSize = interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE;
 const FADE_DURATION_MS = 300;
 
 export const VIDEO_CONTAINER_TYPE = "camera";
@@ -175,6 +174,8 @@ class VideoContainer extends LargeContainer {
         this.$avatar = $('#dominantSpeaker');
         this.$wrapper = $('#largeVideoWrapper');
 
+        this.avatarHeight = $("#dominantSpeakerAvatar").height();
+
         // This does not work with Temasys plugin - has to be a property to be
         // copied between new <object> elements
         //this.$video.on('play', onPlay);
@@ -245,7 +246,7 @@ class VideoContainer extends LargeContainer {
                                     containerWidth, containerHeight);
 
         // update avatar position
-        let top = containerHeight / 2 - avatarSize / 4 * 3;
+        let top = containerHeight / 2 - this.avatarHeight / 4 * 3;
 
         this.$avatar.css('top', top);
 
@@ -369,6 +370,7 @@ export default class LargeVideoManager {
         this.videoContainer = new VideoContainer(
             () => this.resizeContainer(VIDEO_CONTAINER_TYPE));
         this.addContainer(VIDEO_CONTAINER_TYPE, this.videoContainer);
+
         // use the same video container to handle and desktop tracks
         this.addContainer("desktop", this.videoContainer);
 
@@ -382,22 +384,26 @@ export default class LargeVideoManager {
         });
 
         if (interfaceConfig.SHOW_JITSI_WATERMARK) {
-            let leftWatermarkDiv = this.$container.find("div.watermark.leftwatermark");
+            let leftWatermarkDiv
+                = this.$container.find("div.watermark.leftwatermark");
 
             leftWatermarkDiv.css({display: 'block'});
 
-            leftWatermarkDiv.parent().attr('href', interfaceConfig.JITSI_WATERMARK_LINK);
+            leftWatermarkDiv.parent().attr(
+                'href', interfaceConfig.JITSI_WATERMARK_LINK);
         }
 
         if (interfaceConfig.SHOW_BRAND_WATERMARK) {
-            let rightWatermarkDiv = this.$container.find("div.watermark.rightwatermark");
+            let rightWatermarkDiv
+                = this.$container.find("div.watermark.rightwatermark");
 
             rightWatermarkDiv.css({
                 display: 'block',
                 backgroundImage: 'url(images/rightwatermark.png)'
             });
 
-            rightWatermarkDiv.parent().attr('href', interfaceConfig.BRAND_WATERMARK_LINK);
+            rightWatermarkDiv.parent().attr(
+                'href', interfaceConfig.BRAND_WATERMARK_LINK);
         }
 
         if (interfaceConfig.SHOW_POWERED_BY) {
@@ -478,7 +484,8 @@ export default class LargeVideoManager {
 
             return promise;
         }).then(() => {
-            // after everything is done check again if there are any pending new streams.
+            // after everything is done check again if there are any pending
+            // new streams.
             this.updateInProcess = false;
             this.scheduleLargeVideoUpdate();
         });

modules/UI/videolayout/VideoLayout.js

@@ -998,6 +998,19 @@ var VideoLayout = {
      */
     getLargeVideo () {
         return largeVideo;
+    },
+
+    /**
+     * Updates the resolution label, indicating to the user that the large
+     * video stream is currently HD.
+     */
+    updateResolutionLabel(isResolutionHD) {
+        let videoResolutionLabel = $("#videoResolutionLabel");
+
+        if (isResolutionHD && !videoResolutionLabel.is(":visible"))
+            videoResolutionLabel.css({display: "block"});
+        else if (!isResolutionHD && videoResolutionLabel.is(":visible"))
+            videoResolutionLabel.css({display: "none"});
     }
 };