From df798d10c7bafd84a2fbdae6b606700d133e39df Mon Sep 17 00:00:00 2001 From: Jeremy Press Date: Thu, 5 Apr 2018 09:48:04 -0700 Subject: [PATCH] Fix: Revert media duration setting to on loadeddata (#759) --- functional-tests/constants.js | 1 + functional-tests/fileOptions_test.js | 4 +- functional-tests/media-controls.html | 45 +++++++++++++ functional-tests/media_controls_test.js | 65 +++++++++++++++++++ src/lib/viewers/media/DashViewer.js | 18 +++-- .../media/__tests__/DashViewer-test.js | 50 +++++++++----- 6 files changed, 158 insertions(+), 25 deletions(-) create mode 100644 functional-tests/media-controls.html create mode 100644 functional-tests/media_controls_test.js diff --git a/functional-tests/constants.js b/functional-tests/constants.js index 9fe7209d0..e9c7e0138 100644 --- a/functional-tests/constants.js +++ b/functional-tests/constants.js @@ -8,6 +8,7 @@ exports.SELECTOR_BOX_PREVIEW_LOGO = '.bp-default-logo'; exports.CLASS_BOX_PREVIEW_LOADING_WRAPPER = '.bp-loading-wrapper'; exports.SELECTOR_DOC_CURRENT_PAGE = '.bp-current-page'; exports.SELECTOR_MEDIA_TIMESTAMP = '.bp-media-controls-timecode'; +exports.SELECTOR_MEDIA_DURATION = '.bp-media-controls-duration'; exports.SELECTOR_BOX_PREVIEW = '.bp'; exports.SELECTOR_BOX_PREVIEW_DOC = '.bp-doc'; exports.SELECTOR_BOX_PREVIEW_MP3 = '.bp-media-mp3'; diff --git a/functional-tests/fileOptions_test.js b/functional-tests/fileOptions_test.js index 39194df8f..1987b2ffe 100644 --- a/functional-tests/fileOptions_test.js +++ b/functional-tests/fileOptions_test.js @@ -1,5 +1,4 @@ const { - SELECTOR_BOX_PREVIEW_LOADED, SELECTOR_MEDIA_TIMESTAMP, SELECTOR_DOC_CURRENT_PAGE, SELECTOR_BOX_PREVIEW_LOGO, @@ -7,8 +6,7 @@ const { SELECTOR_BOX_PREVIEW_DOC, SELECTOR_BOX_PREVIEW_MP3, SELECTOR_BOX_PREVIEW_DASH, - SELECTOR_BOX_PREVIEW_MP4, - SELECTOR_BOX_PREVIEW_ERROR + SELECTOR_BOX_PREVIEW_MP4 } = require('./constants'); const { navigateToNextItem, makeNavAppear, navigateToPrevItem, waitForLoad } = require('./helpers'); diff --git a/functional-tests/media-controls.html b/functional-tests/media-controls.html new file mode 100644 index 000000000..111035b7b --- /dev/null +++ b/functional-tests/media-controls.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + +
+ + + + diff --git a/functional-tests/media_controls_test.js b/functional-tests/media_controls_test.js new file mode 100644 index 000000000..b470a519e --- /dev/null +++ b/functional-tests/media_controls_test.js @@ -0,0 +1,65 @@ +const { + SELECTOR_MEDIA_TIMESTAMP, + SELECTOR_MEDIA_DURATION, + SELECTOR_BOX_PREVIEW_LOGO, + CLASS_BOX_PREVIEW_LOADING_WRAPPER, + SELECTOR_BOX_PREVIEW_MP3, + SELECTOR_BOX_PREVIEW_DASH, + SELECTOR_BOX_PREVIEW_MP4 +} = require('./constants'); + +const { navigateToNextItem, makeNavAppear, waitForLoad } = require('./helpers'); + +const { CI } = process.env; +const DEFAULT_START = '0:00'; +const VIDEO_DURATION = '3:52'; +const AUDIO_DURATION = '7:47'; +const SELECTOR_VIDEO = 'video'; + +Feature('Media Controls', { retries: CI ? 3 : 0 }); + +Before((I) => { + I.amOnPage('/functional-tests/media-controls.html'); + I.waitForElement(SELECTOR_BOX_PREVIEW_LOGO); + waitForLoad(I); + I.waitForElement(SELECTOR_BOX_PREVIEW_DASH); +}); + +// Exclude IE as it can't handle media files with saucelabs +Scenario( + 'Check that the media controls show the correct time current/total times @ci @chrome @firefox @edge @safari @android @ios', + { retries: 3 }, + (I) => { + // video (dash) + waitForLoad(I); + I.waitForElement(SELECTOR_BOX_PREVIEW_DASH); + makeNavAppear(I, SELECTOR_VIDEO); + I.waitForVisible(SELECTOR_MEDIA_TIMESTAMP); + I.seeTextEquals(DEFAULT_START, SELECTOR_MEDIA_TIMESTAMP); + I.seeTextEquals(VIDEO_DURATION, SELECTOR_MEDIA_DURATION); + navigateToNextItem(I); + + // mp3 + waitForLoad(I); + I.waitForElement(SELECTOR_BOX_PREVIEW_MP3); + makeNavAppear(I); + I.waitForVisible(SELECTOR_MEDIA_TIMESTAMP); + I.seeTextEquals(DEFAULT_START, SELECTOR_MEDIA_TIMESTAMP); + I.seeTextEquals(AUDIO_DURATION, SELECTOR_MEDIA_DURATION); + + // video (mp4) + /* eslint-disable prefer-arrow-callback */ + I.executeScript(function() { + window.disableDash(); + }); + I.waitForElement(CLASS_BOX_PREVIEW_LOADING_WRAPPER); + /* eslint-enable prefer-arrow-callback */ + waitForLoad(I); + I.waitForElement(SELECTOR_BOX_PREVIEW_MP4); + + makeNavAppear(I, SELECTOR_VIDEO); + I.waitForVisible(SELECTOR_MEDIA_TIMESTAMP); + I.seeTextEquals(DEFAULT_START, SELECTOR_MEDIA_TIMESTAMP); + I.seeTextEquals(VIDEO_DURATION, SELECTOR_MEDIA_DURATION); + } +); diff --git a/src/lib/viewers/media/DashViewer.js b/src/lib/viewers/media/DashViewer.js index 12b4c1450..8b62899ec 100644 --- a/src/lib/viewers/media/DashViewer.js +++ b/src/lib/viewers/media/DashViewer.js @@ -417,12 +417,6 @@ class DashViewer extends VideoBaseViewer { */ shakaManifestLoadedHandler() { this.calculateVideoDimensions(); - this.loadUI(); - - if (this.hdVideoId !== -1) { - this.mediaControls.enableHDSettings(); - } - this.loadSubtitles(); this.loadAlternateAudio(); } @@ -503,6 +497,7 @@ class DashViewer extends VideoBaseViewer { this.autoplay(); } + this.loadUI(); this.loadFilmStrip(); this.resize(); this.handleVolume(); @@ -518,6 +513,17 @@ class DashViewer extends VideoBaseViewer { this.mediaContainerEl.focus(); } + /** + * @inheritdoc + */ + loadUI() { + super.loadUI(); + + if (this.hdVideoId !== -1) { + this.mediaControls.enableHDSettings(); + } + } + /** * Loads the film strip * diff --git a/src/lib/viewers/media/__tests__/DashViewer-test.js b/src/lib/viewers/media/__tests__/DashViewer-test.js index ab4ee66e3..fea0fa26f 100644 --- a/src/lib/viewers/media/__tests__/DashViewer-test.js +++ b/src/lib/viewers/media/__tests__/DashViewer-test.js @@ -592,7 +592,6 @@ describe('lib/viewers/media/DashViewer', () => { describe('shakaManifestLoadedHandler()', () => { beforeEach(() => { sandbox.stub(dash, 'calculateVideoDimensions'); - sandbox.stub(dash, 'loadUI'); sandbox.stub(dash, 'loadSubtitles'); sandbox.stub(dash, 'loadAlternateAudio'); }); @@ -601,18 +600,6 @@ describe('lib/viewers/media/DashViewer', () => { dash.shakaManifestLoadedHandler(); expect(dash.calculateVideoDimensions).to.be.called; - expect(dash.loadUI).to.be.called; - }); - - it('should enable HD settings if there is an HD rep', () => { - dash.hdVideoId = -1; - stubs.mockControls.expects('enableHDSettings').never(); - dash.shakaManifestLoadedHandler(); - - dash.hdVideoId = 1; - stubs.mockControls.expects('enableHDSettings'); - dash.shakaManifestLoadedHandler(); - }); it('should load subtitles and additional audio tracks', () => { @@ -657,6 +644,7 @@ describe('lib/viewers/media/DashViewer', () => { sandbox.stub(dash, 'isAutoplayEnabled').returns(true); sandbox.stub(dash, 'autoplay'); sandbox.stub(dash, 'loadFilmStrip'); + sandbox.stub(dash, 'loadUI'); sandbox.stub(dash, 'resize'); sandbox.stub(dash, 'handleVolume'); sandbox.stub(dash, 'startBandwidthTracking'); @@ -665,6 +653,7 @@ describe('lib/viewers/media/DashViewer', () => { dash.loadeddataHandler(); expect(dash.autoplay).to.be.called; + expect(dash.loadUI).to.be.called; expect(dash.showMedia).to.be.called; expect(dash.showPlayButton).to.be.called; expect(dash.emit).to.be.calledWith(VIEWER_EVENT.load); @@ -674,6 +663,36 @@ describe('lib/viewers/media/DashViewer', () => { }); }); + describe('loadUI()', () => { + beforeEach(() => { + stubs.loadUI = DashViewer.prototype.loadUI; + dash.mediaControls = { + enableHDSettings: sandbox.stub(), + removeListener: sandbox.stub(), + removeAllListeners: sandbox.stub(), + destroy: sandbox.stub() + }; + + Object.defineProperty(VideoBaseViewer.prototype, 'loadUI', { value: sandbox.mock() }); + }); + + afterEach(() => { + Object.defineProperty(VideoBaseViewer.prototype, 'loadUI', { value: stubs.loadUI }); + }); + + it('should enable HD settings if an HD rep exists', () => { + dash.hdVideoId = 3; + dash.loadUI(); + expect(dash.mediaControls.enableHDSettings).to.be.called; + }); + + it('should do nothing if there is no HD rep', () => { + dash.hdVideoId = -1; + dash.loadUI(); + expect(dash.mediaControls.enableHDSettings).to.not.be.called; + }); + }); + describe('loadFilmStrip()', () => { beforeEach(() => { dash.options = { @@ -908,7 +927,7 @@ describe('lib/viewers/media/DashViewer', () => { beforeEach(() => { sandbox.stub(dash, 'enableAudioId'); }); - + it('should select correct audio', () => { dash.audioTracks = [ { language: 'eng', role: 'audio0' }, @@ -918,7 +937,7 @@ describe('lib/viewers/media/DashViewer', () => { sandbox.stub(dash.cache, 'get').returns('1'); dash.handleAudioTrack(); - expect(dash.enableAudioId).to.be.calledWith('audio1') + expect(dash.enableAudioId).to.be.calledWith('audio1'); }); it('should not select audio if index out of bounds', () => { @@ -931,7 +950,6 @@ describe('lib/viewers/media/DashViewer', () => { dash.handleAudioTrack(); expect(dash.enableAudioId).to.not.be.called; - }); });