HD label added when the large video is in HD.

config.js

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

css/videolayout_default.css

@@ -44,7 +44,7 @@
     /*margin-right: 1px;*/
 }
 
-#remoteVideos .videocontainer:hover,
+/*#remoteVideos .videocontainer:hover,*/
 #remoteVideos .videocontainer.videoContainerFocused {
     cursor: hand;
     /* transform:scale(1.08, 1.08);
@@ -58,8 +58,7 @@
 }
 
 #remoteVideos .videocontainer:hover {
-    box-shadow:  inset 0 0 10px #FFFFFF, 0 0 10px #FFFFFF;
-    border: 1px solid #FFFFFF;
+    border: 1px solid #c1c1c1;
 }
 
 #remoteVideos .videocontainer.videoContainerFocused {
@@ -68,15 +67,12 @@
 }
 
 #remoteVideos .videocontainer.videoContainerFocused:hover {
-    box-shadow: inset 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, inset 0 0 60px #006d91;
-    border: 1px 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:1px !important;*/
-    /*border: 0px !important;*/
 }
 
 /* With TemasysWebRTC plugin <object/> element is used
@@ -431,6 +427,7 @@
     border-radius: 100px;
     z-index: 3;
     visibility: inherit;
+    background-color: #000000;
 }
 
 .userAvatar {
@@ -493,4 +490,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;
 }

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

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.minHDResolution)
+                        showResolutionLabel = true;
+                });
+        }
+
+        VideoLayout.updateResolutionLabel(showResolutionLabel);
+    }
+};
+
 export default ConnectionIndicator;

modules/UI/videolayout/FilmStrip.js

@@ -76,7 +76,7 @@ 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

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