Merge pull request #2744 from edx/valera/move_slider_and_vcr_to_start_time_2

Show start time or starting position on slider and VCR

CHANGELOG.rst

@@ -5,6 +5,8 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Blades: Show start time or starting position on slider and VCR. BLD-823.
+
 Common: Upgraded CodeMirror to 3.21.0 with an accessibility patch applied.
   LMS-1802
 

common/lib/xmodule/xmodule/js/spec/helper.js

@@ -253,8 +253,8 @@
         return state;
     };
 
-    jasmine.initializePlayerYouTube = function () {
+    jasmine.initializePlayerYouTube = function (params) {
         // "video.html" contains HTML template for a YouTube video.
-        return jasmine.initializePlayer('video.html');
+        return jasmine.initializePlayer('video.html', params);
     };
 }).call(this, window.jQuery);

common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js

@@ -538,10 +538,8 @@ function (VideoPlayer) {
 
         describe('updatePlayTime', function () {
             beforeEach(function () {
-                state = jasmine.initializePlayer();
-
+                state = jasmine.initializePlayerYouTube();
                 state.videoEl = $('video, iframe');
-
                 spyOn(state.videoCaption, 'updatePlayTime').andCallThrough();
                 spyOn(state.videoProgressSlider, 'updatePlayTime').andCallThrough();
             });
@@ -560,27 +558,10 @@ function (VideoPlayer) {
                 }, 'Video is fully loaded.', WAIT_TIMEOUT);
 
                 runs(function () {
-                    var htmlStr;
-
                     state.videoPlayer.goToStartTime = false;
                     state.videoPlayer.updatePlayTime(60);
 
-                    htmlStr = $('.vidtime').html();
-
-                    // We resort to this trickery because Firefox and Chrome
-                    // round the total time a bit differently.
-                    if (
-                        htmlStr.match('1:00 / 1:01') ||
-                        htmlStr.match('1:00 / 1:00')
-                    ) {
-                        expect(true).toBe(true);
-                    } else {
-                        expect(true).toBe(false);
-                    }
-
-                    // The below test has been replaced by above trickery:
-                    //
-                    //     expect($('.vidtime')).toHaveHtml('1:00 / 1:01');
+                    expect($('.vidtime')).toHaveHtml('1:00 / 1:00');
                 });
             });
 
@@ -691,7 +672,9 @@ function (VideoPlayer) {
                         endTime: undefined,
                         player: {
                             seekTo: function () {}
-                        }
+                        },
+                        figureOutStartEndTime: jasmine.createSpy(),
+                        figureOutStartingTime: jasmine.createSpy().andReturn(0)
                     },
                     config: {
                         savedVideoPosition: 0,
@@ -712,6 +695,11 @@ function (VideoPlayer) {
             it('invalid endTime is reset to null', function () {
                 VideoPlayer.prototype.updatePlayTime.call(state, 0);
 
+                expect(state.videoPlayer.figureOutStartingTime).toHaveBeenCalled();
+
+                VideoPlayer.prototype.figureOutStartEndTime.call(state, 60);
+                VideoPlayer.prototype.figureOutStartingTime.call(state, 60);
+
                 expect(state.videoPlayer.endTime).toBe(null);
             });
         });

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

@@ -35,6 +35,8 @@ function (HTML5Video, Resizer) {
             play: play,
             setPlaybackRate: setPlaybackRate,
             update: update,
+            figureOutStartEndTime: figureOutStartEndTime,
+            figureOutStartingTime: figureOutStartingTime,
             updatePlayTime: updatePlayTime
         };
 
@@ -62,7 +64,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, duration;
+        var youTubeId, player;
 
         // The function is called just once to apply pre-defined configurations
         // by student before video starts playing. Waits until the video's
@@ -134,22 +136,7 @@ function (HTML5Video, Resizer) {
 
                 _resize(state, videoWidth, videoHeight);
 
-                duration = state.videoPlayer.duration();
-
-                state.trigger(
-                    'videoControl.updateVcrVidTime',
-                    {
-                        time: 0,
-                        duration: duration
-                    }
-                );
-
-                state.trigger(
-                    'videoProgressSlider.updateStartEndTimeRegion',
-                    {
-                        duration: duration
-                    }
-                );
+                _updateVcrAndRegion(state);
             }, false);
 
         } else { // if (state.videoType === 'youtube') {
@@ -200,22 +187,34 @@ function (HTML5Video, Resizer) {
     }
 
     function _updateVcrAndRegion(state) {
-        var duration = state.videoPlayer.duration();
+        var duration = state.videoPlayer.duration(),
+            time;
 
+        time = state.videoPlayer.figureOutStartingTime(duration);
+
+        // Update the VCR.
         state.trigger(
             'videoControl.updateVcrVidTime',
             {
-                time: 0,
+                time: time,
                 duration: duration
             }
         );
 
+        // Update the time slider.
         state.trigger(
             'videoProgressSlider.updateStartEndTimeRegion',
             {
                 duration: duration
             }
         );
+        state.trigger(
+            'videoProgressSlider.updatePlayTime',
+            {
+                time: time,
+                duration: duration
+            }
+        );
     }
 
     function _resize(state, videoWidth, videoHeight) {
@@ -642,62 +641,46 @@ function (HTML5Video, Resizer) {
         }
     }
 
-    function updatePlayTime(time) {
-        var videoPlayer = this.videoPlayer,
-            duration = this.videoPlayer.duration(),
-            savedVideoPosition = this.config.savedVideoPosition,
-            youTubeId, startTime, endTime;
+    function figureOutStartEndTime(duration) {
+        var videoPlayer = this.videoPlayer;
 
-        if (duration > 0 && videoPlayer.goToStartTime) {
-            videoPlayer.goToStartTime = false;
+        videoPlayer.startTime = this.config.startTime;
+        if (videoPlayer.startTime >= duration) {
+            videoPlayer.startTime = 0;
+        } else if (this.currentPlayerMode === 'flash') {
+            videoPlayer.startTime /= Number(this.speed);
+        }
 
-            videoPlayer.startTime = this.config.startTime;
-            if (videoPlayer.startTime >= duration) {
-                videoPlayer.startTime = 0;
-            } else if (this.currentPlayerMode === 'flash') {
-                videoPlayer.startTime /= Number(this.speed);
-            }
+        videoPlayer.endTime = this.config.endTime;
+        if (
+            videoPlayer.endTime <= videoPlayer.startTime ||
+            videoPlayer.endTime >= duration
+        ) {
+            videoPlayer.stopAtEndTime = false;
+            videoPlayer.endTime = null;
+        } else if (this.currentPlayerMode === 'flash') {
+            videoPlayer.endTime /= Number(this.speed);
+        }
+    }
 
-            videoPlayer.endTime = this.config.endTime;
-            if (
-                videoPlayer.endTime <= videoPlayer.startTime ||
-                videoPlayer.endTime >= duration
-            ) {
-                videoPlayer.stopAtEndTime = false;
-                videoPlayer.endTime = null;
-            } else if (this.currentPlayerMode === 'flash') {
-                videoPlayer.endTime /= Number(this.speed);
-            }
+    function figureOutStartingTime(duration) {
+        var savedVideoPosition = this.config.savedVideoPosition,
 
-            this.trigger(
-                'videoProgressSlider.updateStartEndTimeRegion',
-                {
-                    duration: duration
-                }
-            );
+            // Default starting time is 0. This is the case when
+            // there is not start-time, no previously saved position,
+            // or one (or both) of those values is incorrect.
+            time = 0,
 
-            startTime = videoPlayer.startTime;
-            endTime = videoPlayer.endTime;
+            startTime, endTime;
 
-            if (startTime) {
-                if (
-                    startTime < savedVideoPosition &&
-                    (endTime > savedVideoPosition || endTime === null) &&
+        this.videoPlayer.figureOutStartEndTime(duration);
 
-                    // We do not want to jump to the end of the video.
-                    // We subtract 1 from the duration for a 1 second
-                    // safety net.
-                    savedVideoPosition < duration - 1
-                ) {
-                    time = savedVideoPosition;
+        startTime = this.videoPlayer.startTime;
+        endTime   = this.videoPlayer.endTime;
 
-                    // When the video finishes playing, we will start from the
-                    // start-time, rather than from the remembered position
-                    this.config.savedVideoPosition = 0;
-                } else {
-                    time = startTime;
-                }
-            } else if (
+        if (startTime > 0) {
+            if (
+                startTime < savedVideoPosition &&
                 (endTime > savedVideoPosition || endTime === null) &&
 
                 // We do not want to jump to the end of the video.
@@ -706,13 +689,47 @@ function (HTML5Video, Resizer) {
                 savedVideoPosition < duration - 1
             ) {
                 time = savedVideoPosition;
-
-                // When the video finishes playing, we will start from the
-                // start-time, rather than from the remembered position
-                this.config.savedVideoPosition = 0;
             } else {
-                time = 0;
+                time = startTime;
             }
+        } else if (
+            savedVideoPosition > 0 &&
+            (endTime > savedVideoPosition || endTime === null) &&
+
+            // We do not want to jump to the end of the video.
+            // We subtract 1 from the duration for a 1 second
+            // safety net.
+            savedVideoPosition < duration - 1
+        ) {
+            time = savedVideoPosition;
+        }
+
+        return time;
+    }
+
+    function updatePlayTime(time) {
+        var videoPlayer = this.videoPlayer,
+            duration = this.videoPlayer.duration(),
+            youTubeId;
+
+        if (duration > 0 && videoPlayer.goToStartTime) {
+            videoPlayer.goToStartTime = false;
+
+            // The duration might have changed. Update the start-end time region to
+            // reflect this fact.
+            this.trigger(
+                'videoProgressSlider.updateStartEndTimeRegion',
+                {
+                    duration: duration
+                }
+            );
+
+            time = videoPlayer.figureOutStartingTime(duration);
+
+            // When the video finishes playing, we will start from the
+            // start-time, or from the beginning (rather than from the remembered
+            // position).
+            this.config.savedVideoPosition = 0;
 
             if (time > 0) {
                 // After a bug came up (BLD-708: "In Firefox YouTube video with