Quality Indicator

fluidplayer.css

@@ -243,7 +243,7 @@
     -ms-transition: opacity 0.3s ease-in-out;
     -o-transition: opacity 0.3s ease-in-out;
     transition: opacity 0.3s ease-in-out;
-    background-position: -220px -67px;
+    background-position: -122px -57px;
 }
 
 .skip_button a span.skip_button_icon:before:hover {
@@ -594,11 +594,6 @@ _:-ms-lang(x),
     transition: opacity 0.3s;
 }
 
-
-.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right .fluid_button_video_source {
-    right: 5px;
-}
-
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right .fluid_control_volume_container {
     height: 24px;
     width: 56px;
@@ -703,7 +698,8 @@ _:-ms-lang(x),
     overflow: hidden;
 }
 
-.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right .fluid_button_video_source .fluid_video_sources_list {
+.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right .fluid_button_video_source .fluid_video_sources_list,
+.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right .fluid_video_playback_rates {
     position: absolute;
     bottom: 20px;
     right: 3px;
@@ -719,7 +715,7 @@ _:-ms-lang(x),
 }
 
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right .fluid_button_video_source .fluid_video_sources_list .fluid_video_source_list_item {
-    padding: 13px 21px 13px 55px;
+    padding: 12px 34px 12px 24px;
     line-height: 15px;
 }
 
@@ -776,31 +772,31 @@ _:-ms-lang(x),
 }
 
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_play:before {
-    background-position: -20px -19px;
+    background-position: -15px -19px;
 }
 
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_pause:before {
-    background-position: -20px -66px;
+    background-position: -15px -57px;
 }
 
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_volume:before {
-    background-position: -87px -19px;
+    background-position: -52px -19px;
 }
 
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_mute:before {
-    background-position: -87px -67px;
+    background-position: -52px -57px;
 }
 
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen:before {
-    background-position: -158px -19px;
+    background-position: -88px -19px;
 }
 
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen_exit:before {
-    background-position: -160px -67px;
+    background-position: -88px -57px;
 }
 
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source:before {
-    background-position: -220px -19px;
+    background-position: -122px -19px;
 }
 
 .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source:hover:before,
@@ -880,4 +876,18 @@ _:-ms-lang(x),
 .fluid_nonLinear_bottom {
     bottom: 50px;
     transform: translate(-50%);
+}
+
+.source_button_icon {
+    background: url('images/fluid_icons.svg') no-repeat;
+    float: left;
+    cursor:pointer;
+    height: 18px;
+    width: 18px;
+    background-position: -164px -21px;
+    opacity: 0;
+}
+
+.source_selected {
+    opacity: 1 !important;
 }

fluidplayer.js

@@ -2911,7 +2911,6 @@ var fluidPlayerClass = {
         });
 
         player.videoSources = sources;
-
         if (player.videoSources.length > 1) {
             var sourceChangeButton = document.getElementById(player.videoPlayerId + '_fluid_control_video_source');
 
@@ -2920,15 +2919,22 @@ var fluidPlayerClass = {
             sourceChangeList.className = 'fluid_video_sources_list';
             sourceChangeList.style.display = 'none';
 
-
+            var firstSource = true;
             player.videoSources.forEach(function(source) {
+                var sourceSelected = (firstSource) ? "source_selected" :  "";
+                firstSource = false;
                 var sourceChangeDiv = document.createElement('div');
                 sourceChangeDiv.className = 'fluid_video_source_list_item';
-                sourceChangeDiv.innerText = source.title;
+                sourceChangeDiv.innerHTML = '<span class="source_button_icon ' + sourceSelected + '"></span>' + source.title;
 
                 sourceChangeDiv.addEventListener('click', function(event) {
                     event.stopPropagation();
                     var videoChangedTo = this;
+                    var sourceIcons = document.getElementsByClassName('source_button_icon');
+                    for (var i = 0; i < sourceIcons.length; i++) {
+                        sourceIcons[i].className = sourceIcons[i].className.replace("source_selected", "");
+                    }
+                    videoChangedTo.firstChild.className += ' source_selected';
 
                     player.videoSources.forEach(function(source) {
                         if (source.title == videoChangedTo.innerText) {
@@ -2969,7 +2975,7 @@ var fluidPlayerClass = {
             var mouseOut = function(event) {
                 sourceChangeListContainer.removeEventListener('mouseleave', mouseOut);
                 sourceChangeList.style.display = 'none';
-            }
+            };
             sourceChangeListContainer.addEventListener('mouseleave', mouseOut);
         } else {
             sourceChangeList.style.display = 'none';
@@ -3062,7 +3068,7 @@ var fluidPlayerClass = {
         containerDiv.innerHTML = player.displayOptions.layoutControls.htmlOnPauseBlock.html;
         containerDiv.onclick = function(event) {
             player.playPauseToggle(videoPlayer);
-        }
+        };
 
         if (player.displayOptions.layoutControls.htmlOnPauseBlock.width) {
             containerDiv.style.width = player.displayOptions.layoutControls.htmlOnPauseBlock.width + 'px';
@@ -3168,7 +3174,7 @@ var fluidPlayerClass = {
         var videoPlayerInstance = fluidPlayerClass.getInstanceById(videoInstanceId);
         var videoPlayerTag = document.getElementById(videoInstanceId);
 
-        if (videoPlayerInstance.isCurrentlyPlayingAd) {
+        if (videoPlayerInstance.isCurrentlyPlayingAd && !videoPlayerTag.paused) {
             videoPlayerInstance.toggleAdCountdown(true);
         }
 
@@ -3191,7 +3197,7 @@ var fluidPlayerClass = {
         var videoPlayerInstance = fluidPlayerClass.getInstanceById(videoInstanceId);
         var videoPlayerTag = document.getElementById(videoInstanceId);
 
-        if (videoPlayerInstance.isCurrentlyPlayingAd) {
+        if (videoPlayerInstance.isCurrentlyPlayingAd && !videoPlayerTag.paused) {
             videoPlayerInstance.toggleAdCountdown(false);
         }