Merge pull request #1042 from m-voloshin/FEATURE-hd-label-relocation

Relocate "HD" label

css/_recording.scss

@@ -1,4 +1,4 @@
 .recordingSpinner {
     display: none;
-    vertical-align: text-bottom;
+    vertical-align: top;
 }

css/_toolbars.scss

@@ -1,5 +1,5 @@
 .toolbar {
-    background-color: rgba(0,0,0,0.5);
+    background-color: $toolbarBackground;
     position: relative;
     z-index: $toolbarZ;
     height: 100%;

css/_variables.scss

@@ -27,6 +27,7 @@ $defaultBackground: #474747;
 $tooltipBg: rgba(0,0,0, 0.7);
 
 // Toolbar
+$toolbarBackground: rgba(0, 0, 0, 0.5);
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
@@ -46,6 +47,8 @@ $dominantSpeakerBg: #165ecc;
 $raiseHandBg: #D6D61E;
 $audioLevelBg: #44A5FF;
 $audioLevelShadow: rgba(9, 36, 77, 0.9);
+$videoStateIndicatorColor: $defaultColor;
+$videoStateIndicatorBackground: $toolbarBackground;
 
 /**
  * Feedback Modal

css/_videolayout_default.scss

@@ -546,47 +546,43 @@
                     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: 1011;
+.video-state-indicator {
+    background: $videoStateIndicatorBackground;
+    color: $videoStateIndicatorColor;
+    font-size: 13px;
+    line-height: 20px;
+    text-align: center;
+    min-width: 40px;
+    height: 40px;
+    padding: 10px 5px;
     border-radius: 50%;
+    position: absolute;
+    box-sizing: border-box;
+}
+
+#videoResolutionLabel,
+.centeredVideoLabel {
+    display: none;
+    z-index: 1011;
 }
 
 .centeredVideoLabel {
-    display: none;
-    position: absolute;
     bottom: 45%;
-    top: auto;
-    right: auto;
-    left: auto;
-    line-height: 28px;
-    height: 28px;
-    width: auto;
-    padding: 5px;
-    margin-right: auto;
-    margin-left: auto;
-    background: rgba(0,0,0,.5);
-    color: #FFF;
-    z-index: 1011;
     border-radius: 2px;
     -webkit-transition: all 2s 2s linear;
     transition: all 2s 2s linear;
+
+    &.moveToCorner {
+        bottom: auto;
+    }
 }
 
 .moveToCorner {
-    top: 5px;
-    right: 50px; /*leave free space for the HD label*/
-    margin-right: 0px;
-    margin-left: auto;
-    background: rgba(0,0,0,.3);
-    color: rgba(255,255,255,.5);
+    position: absolute;
+    top: 30px;
+    right: 30px;
 }
 
-.hidden {
+.moveToCorner + .moveToCorner {
+    right: 80px;
 }

index.html

@@ -240,8 +240,8 @@
                     <video id="largeVideo" muted="true" autoplay></video>
                 </div>
                 <span id="localConnectionMessage"></span>
-                <span id="videoResolutionLabel">HD</span>
-                <span id="recordingLabel" class="centeredVideoLabel">
+                <span id="videoResolutionLabel" class="video-state-indicator moveToCorner">HD</span>
+                <span id="recordingLabel" class="video-state-indicator centeredVideoLabel">
                     <span id="recordingLabelText"></span>
                     <img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img>
                 </span>