FLUID-4632: Fixed two issues: 1. In IE9, the buffer progress bar sits…

… on top of the scrubber instead of overlay; 2. In Chrom or IE9, the buffer progress replays when the controller bar is shown from the hidden state.

css/VideoPlayer.css

@@ -249,7 +249,6 @@ ul.fl-videoPlayer-transcripts-languageList li {
  *********************/
 
 .fl-videoPlayer-buffered-progress {
-    float: left;
     height: 1em;
     left: 0;
     top: 0;
@@ -294,6 +293,7 @@ ul.fl-videoPlayer-transcripts-languageList li {
     width: 100%;
     text-align: center;
     margin-bottom: -0.4em;
+    position: relative;
 }
 .fl-videoPlayer-scrubberContainer * {
     margin: auto;

js/VideoPlayer.js

@@ -580,6 +580,10 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
 
         // Set the width of the overlay to be the width of the video, otherwise, the controller bar spreads into transcript area
         overlay.css({width: videoWidth});
+
+        // Save the video width/height in the model so they are accessible by the sub-components
+        that.model.videoWidth = videoWidth;
+        that.model.videoHeight = videoHeight;
     };
 
     /*********************************************************************************

js/VideoPlayer_controllers.js

@@ -48,12 +48,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                     components: {
                         bufferedProgress: {
                             type: "fluid.progress",
-                            container: "{scrubber}.dom.bufferedProgress",
-                            options: {
-                                initiallyHidden: false,
-                                speed: 1000,
-                                minWidth: 0
-                            }
+                            container: "{scrubber}.dom.bufferedProgress"
                         },
                     },
                     events: {
@@ -275,6 +270,15 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         gradeNames: ["fluid.viewComponent", "autoInit"],
         finalInitFunction: "fluid.videoPlayer.controllers.scrubber.finalInit",
         postInitFunction: "fluid.videoPlayer.controllers.scrubber.postInit",
+        components: {
+            bufferedProgress: {
+                type: "fluid.progress",
+                options: {
+                    initiallyHidden: false,
+                    minWidth: 0
+                }
+            },
+        },
         events: {
             afterScrub: null,
             onScrub: null,
@@ -286,7 +290,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             currentTime: ".flc-videoPlayer-current",
             scrubber: ".flc-videoPlayer-scrubber",
             handle: ".ui-slider-handle",
-            bufferedProgress: ".flc-videoPlayer-buffered-progress"
+            bufferedProgress: ".flc-videoPlayer-buffered-progress",
+            bufferedProgressBar: ".flc-progress-bar"
         },
         // TODO: Strings should be moved out into a single top-level bundle (FLUID-4590)
         strings: {
@@ -334,6 +339,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             if (totalTime && lastBufferedTime && !bufferCompleted) {
                 var percent = Math.round(lastBufferedTime / totalTime * 100);
 
+                // Explicitly setting the width of .flc-progress-bar is a work-around for the Chrome/IE9 issue
+                // that the width of the progress div is reduced at the controller bar slide-up
+                that.locate("bufferedProgressBar").width(that.model.videoWidth);
                 that.bufferedProgress.update(percent);
 
                 // Stops the buffer progress from being kept updated once the progress reaches 100%