Start-end time range always shown, even before video plays.

BLD-529.

common/lib/xmodule/xmodule/js/src/video/03_video_player.js

@@ -60,7 +60,7 @@ function (HTML5Video, Resizer) {
     //     via the 'state' object. Much easier to work this way - you don't
     //     have to do repeated jQuery element selects.
     function _initialize(state) {
-        var youTubeId, player;
+        var youTubeId, player, duration;
 
         // The function is called just once to apply pre-defined configurations
         // by student before video starts playing. Waits until the video's
@@ -134,11 +134,20 @@ function (HTML5Video, Resizer) {
 
                 _resize(state, videoWidth, videoHeight);
 
+                duration = state.videoPlayer.duration();
+
                 state.trigger(
                     'videoControl.updateVcrVidTime',
                     {
                         time: 0,
-                        duration: state.videoPlayer.duration()
+                        duration: duration
+                    }
+                );
+
+                state.trigger(
+                    'videoProgressSlider.updateStartEndTimeRegion',
+                    {
+                        duration: duration
                     }
                 );
             }, false);
@@ -167,10 +176,11 @@ function (HTML5Video, Resizer) {
 
                 _resize(state, videoWidth, videoHeight);
 
-                // We wait for metdata to arrive, before we request the update
-                // of the VCR video time. Metadata contains duration of the
-                // video. We wait for 2 seconds, and then abandon our attempts
-                // to update the VCR video time using metadata.
+                // We wait for metadata to arrive, before we request the update
+                // of the VCR video time, and of the start-end time region.
+                // Metadata contains duration of the video. We wait for 2
+                // seconds, and then abandon our attempts to update the VCR
+                // video time (and the start-end time region) using metadata.
                 (function () {
                     var checkInterval = window.setInterval(
                             checkForMetadata, 50
@@ -181,7 +191,8 @@ function (HTML5Video, Resizer) {
 
                     function checkForMetadata() {
                         if (state.metadata && state.metadata[state.youtubeId()]) {
-                            console.log('[_initialize]: (youtube) .duration');
+                            duration = state.videoPlayer.duration();
+
                             // After initialization, update the VCR with total time.
                             // At this point only the metadata duration is available (not
                             // very precise), but it is better than having 00:00:00 for
@@ -190,7 +201,14 @@ function (HTML5Video, Resizer) {
                                 'videoControl.updateVcrVidTime',
                                 {
                                     time: 0,
-                                    duration: state.videoPlayer.duration()
+                                    duration: duration
+                                }
+                            );
+
+                            state.trigger(
+                                'videoProgressSlider.updateStartEndTimeRegion',
+                                {
+                                    duration: duration
                                 }
                             );
 

common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js

@@ -113,10 +113,28 @@ function () {
             duration = params.duration;
         }
 
-        start = this.videoPlayer.startTime;
+        start = this.config.startTime;
+        end = this.config.endTime;
 
-        // If end is set to null, then we set it to the end of the video.
-        end = this.videoPlayer.endTime || duration;
+        if (start > duration) {
+            start = 0;
+        } else {
+            if (this.currentPlayerMode === 'flash') {
+                start /= Number(this.speed);
+            }
+        }
+
+        // If end is set to null, or it is greater than the duration of the
+        // video, then we set it to the end of the video.
+        if (
+            end === null || end > duration
+        ) {
+            end = duration;
+        } else if (end !== null) {
+            if (this.currentPlayerMode === 'flash') {
+                end /= Number(this.speed);
+            }
+        }
 
         // Don't build a range if it takes up the whole slider.
         if (start === 0 && end === duration) {