From ac4c1c37b74330284a14ffee8c232c4a7707d9ff Mon Sep 17 00:00:00 2001 From: Jeff Witt Date: Tue, 2 Mar 2021 19:17:15 -0500 Subject: [PATCH] feat: Allow HTML video player to use 2x playback speed LEARNER-8247 Co-Authored-By: Sarina Canelake --- common/lib/xmodule/xmodule/js/spec/helper.js | 2 +- .../xmodule/js/spec/video/html5_video_spec.js | 12 +++++++--- .../xmodule/js/spec/video/initialize_spec.js | 18 ++++++++++---- .../js/spec/video/video_speed_control_spec.js | 24 +++++++++---------- .../xmodule/js/src/video/01_initialize.js | 6 ++--- .../xmodule/js/src/video/02_html5_video.js | 2 +- 6 files changed, 40 insertions(+), 24 deletions(-) diff --git a/common/lib/xmodule/xmodule/js/spec/helper.js b/common/lib/xmodule/xmodule/js/spec/helper.js index 19c614217e..f7321b22ae 100644 --- a/common/lib/xmodule/xmodule/js/spec/helper.js +++ b/common/lib/xmodule/xmodule/js/spec/helper.js @@ -123,7 +123,7 @@ } }; - jasmine.stubbedHtml5Speeds = ['0.75', '1.0', '1.25', '1.50']; + jasmine.stubbedHtml5Speeds = ['0.75', '1.0', '1.25', '1.50', '2.0']; jasmine.stubRequests = function() { var spy = $.ajax; diff --git a/common/lib/xmodule/xmodule/js/spec/video/html5_video_spec.js b/common/lib/xmodule/xmodule/js/spec/video/html5_video_spec.js index 2dad745505..8772efad27 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/html5_video_spec.js +++ b/common/lib/xmodule/xmodule/js/spec/video/html5_video_spec.js @@ -3,7 +3,7 @@ var STATUS = window.STATUS; var state, oldOTBD, - playbackRates = [0.75, 1.0, 1.25, 1.5], + playbackRates = [0.75, 1.0, 1.25, 1.5, 2.0], describeInfo, POSTER_URL = '/media/video-images/poster.png'; @@ -280,8 +280,14 @@ }); describe('setPlaybackRate', function() { - it('set a correct value', function() { - playbackRate = 1.5; + it('set a slow value', function() { + playbackRate = 0.75; + state.videoPlayer.player.setPlaybackRate(playbackRate); + expect(state.videoPlayer.player.video.playbackRate).toBe(playbackRate); + }); + + it('set a fast value', function() { + playbackRate = 2.0; state.videoPlayer.player.setPlaybackRate(playbackRate); expect(state.videoPlayer.player.video.playbackRate).toBe(playbackRate); }); diff --git a/common/lib/xmodule/xmodule/js/spec/video/initialize_spec.js b/common/lib/xmodule/xmodule/js/spec/video/initialize_spec.js index 8ac70da495..c60256eb56 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/initialize_spec.js +++ b/common/lib/xmodule/xmodule/js/spec/video/initialize_spec.js @@ -194,12 +194,12 @@ function(Initialize) { describe('HTML5', function() { beforeEach(function() { state = { - speeds: ['0.75', '1.0', '1.25', '1.50'], + speeds: ['0.75', '1.0', '1.25', '1.50', '2.0'], storage: jasmine.createSpyObj('storage', ['setItem']) }; }); - describe('when new speed is available', function() { + describe('when 0.75 speed is available', function() { beforeEach(function() { Initialize.prototype.setSpeed.call(state, '0.75'); }); @@ -209,6 +209,17 @@ function(Initialize) { }); }); + describe('when 2.0 speed is available', function() { + beforeEach(function() { + Initialize.prototype.setSpeed.call(state, '2.0'); + }); + + it('set new speed', function() { + expect(state.speed).toEqual(2.0); + }); + }); + + describe('when new speed is not available', function() { beforeEach(function() { Initialize.prototype.setSpeed.call(state, '1.75'); @@ -222,8 +233,7 @@ function(Initialize) { it('check mapping', function() { var map = { 0.25: '0.75', - '0.50': '0.75', - '2.0': '1.50' + '0.50': '0.75' }; $.each(map, function(key, expected) { diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js index d042f2fd96..5540a14342 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js +++ b/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js @@ -143,36 +143,36 @@ expect($speedButton).toBeFocused(); }); - it('ENTER keydown on speed entry selects speed and closes menu', + it('ENTER keydown on speed entry selects 2.0x speed and closes menu', function() { // First open menu. $speedControl.trigger(keyPressEvent(KEY.UP)); - // Focus on 1.50x speed + // Focus on 2.0x speed speedEntries.eq(0).focus(); speedEntries.eq(0).trigger(keyPressEvent(KEY.ENTER)); // Menu is closed, focus has been returned to speed - // control and video speed is 1.50x. + // control and video speed is 2.0x. expect($speedButton).toBeFocused(); - expect($('.video-speeds li[data-speed="1.50"]')) + expect($('.video-speeds li[data-speed="2.0"]')) .toHaveClass('is-active'); - expect($('.speeds .value')).toHaveHtml('1.50x'); + expect($('.speeds .value')).toHaveHtml('2.0x'); }); - it('SPACE keydown on speed entry selects speed and closes menu', + it('SPACE keydown on speed entry selects 0.75x speed and closes menu', function() { // First open menu. $speedControl.trigger(keyPressEvent(KEY.UP)); - // Focus on 1.50x speed - speedEntries.eq(0).focus(); - speedEntries.eq(0).trigger(keyPressEvent(KEY.SPACE)); + // Focus on 0.75x speed + speedEntries.eq(4).focus(); + speedEntries.eq(4).trigger(keyPressEvent(KEY.SPACE)); // Menu is closed, focus has been returned to speed - // control and video speed is 1.50x. + // control and video speed is 0.75x. expect($speedButton).toBeFocused(); - expect($('.video-speeds li[data-speed="1.50"]')) + expect($('.video-speeds li[data-speed="0.75"]')) .toHaveClass('is-active'); - expect($('.speeds .value')).toHaveHtml('1.50x'); + expect($('.speeds .value')).toHaveHtml('0.75x'); }); }); }); diff --git a/common/lib/xmodule/xmodule/js/src/video/01_initialize.js b/common/lib/xmodule/xmodule/js/src/video/01_initialize.js index 72a8092e2c..fea584b879 100644 --- a/common/lib/xmodule/xmodule/js/src/video/01_initialize.js +++ b/common/lib/xmodule/xmodule/js/src/video/01_initialize.js @@ -269,7 +269,7 @@ function(VideoPlayer, i18n, moment, _) { // The function prepare HTML5 video, parse HTML5 // video sources etc. function _prepareHTML5Video(state) { - state.speeds = ['0.75', '1.0', '1.25', '1.50']; + state.speeds = ['0.75', '1.0', '1.25', '1.50', '2.0']; // If none of the supported video formats can be played and there is no // short-hand video links, than hide the spinner and show error message. if (!state.config.sources.length) { @@ -669,7 +669,7 @@ function(VideoPlayer, i18n, moment, _) { function setSpeed(newSpeed) { // Possible speeds for each player type. - // HTML5 = [0.75, 1, 1.25, 1.5] + // HTML5 = [0.75, 1, 1.25, 1.5, 2] // Youtube Flash = [0.75, 1, 1.25, 1.5] // Youtube HTML5 = [0.25, 0.5, 1, 1.5, 2] var map = { @@ -677,7 +677,7 @@ function(VideoPlayer, i18n, moment, _) { '0.50': '0.75', // Youtube HTML5 -> HTML5 or Youtube Flash 0.75: '0.50', // HTML5 or Youtube Flash -> Youtube HTML5 1.25: '1.50', // HTML5 or Youtube Flash -> Youtube HTML5 - '2.0': '1.50' // Youtube HTML5 -> HTML5 or Youtube Flash + 2.0: '1.50' // HTML5 or Youtube HTML5 -> Youtube Flash }; if (_.contains(this.speeds, newSpeed)) { diff --git a/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js b/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js index 9dd82cd071..027122dcea 100644 --- a/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js +++ b/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js @@ -192,7 +192,7 @@ function(_) { }; Player.prototype.getAvailablePlaybackRates = function() { - return [0.75, 1.0, 1.25, 1.5]; + return [0.75, 1.0, 1.25, 1.5, 2.0]; }; // eslint-disable-next-line no-underscore-dangle