Skip to content

Commit

Permalink
Fix: Remove use of manifest loaded event (#763)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jeremy Press authored Apr 9, 2018
1 parent 203e55d commit 99edac8
Show file tree
Hide file tree
Showing 6 changed files with 132 additions and 41 deletions.
1 change: 0 additions & 1 deletion codecept.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const MOBILE_PLATFORMS = ['iOS', 'Android'];
const commonConfigObj = {
browser: BROWSER_NAME,
url: 'http://localhost:8000',
smartWait: DEFAULT_WAIT_TIME,
restart: true,
waitForTimeout: DEFAULT_WAIT_TIME
};
Expand Down
18 changes: 17 additions & 1 deletion functional-tests/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,22 @@ exports.SELECTOR_NAVIGATION_LEFT = '.bp-navigate-left';
exports.SELECTOR_NAVIGATION_RIGHT = '.bp-navigate-right';
exports.SELECTOR_BOX_PREVIEW_LOADED = '.bp-loaded';
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_CONTAINER = '.bp-media-container';
exports.SELECTOR_MEDIA_TIMESTAMP = '.bp-media-controls-timecode';
exports.SELECTOR_MEDIA_DURATION = '.bp-media-controls-duration';
exports.SELECTOR_MEDIA_CONTROLS_GEAR = '.bp-media-gear-icon';
exports.SELECTOR_MEDIA_SETTINGS_MENU_QUALITY = '.bp-media-settings-menu-quality';
exports.SELECTOR_MEDIA_SETTINGS_QUALITY_ITEM = '.bp-media-settings-item-quality';
exports.SELECTOR_MEDIA_SETTINGS_LABEL = '.bp-media-settings-label';
exports.SELECTOR_HD_SETTINGS_VALUE = '[data-value="hd"] > .bp-media-settings-value';
exports.SELECTOR_MEDIA_CONTROLS_HD = '.bp-media-controls-hd';
exports.SELECTOR_MEDIA_CONTROLS_CC_ICON = '.bp-media-cc-icon';
exports.SELECTOR_MEDIA_SETTINGS_SUBTITLES_ON = '.bp-media-settings-subtitles-on';
exports.SELECTOR_MEDIA_SETTINGS_SUBTITLES_ITEM = '//div[@data-type="subtitles"]';
exports.SELECTOR_MEDIA_SETTINGS_AUDIOTRACKS_ITEM = '//div[@data-type="audiotracks"]';
exports.SELECTOR_MEDIA_SETTINGS_AUTOPLAY_ITEM = '//div[@data-type="autoplay"]';
exports.SELECTOR_MEDIA_SETTINGS_SPEED_ITEM = '//div[@data-type="speed"]';
exports.SELECTOR_BOX_PREVIEW = '.bp';
exports.SELECTOR_BOX_PREVIEW_DOC = '.bp-doc';
exports.SELECTOR_BOX_PREVIEW_MP3 = '.bp-media-mp3';
Expand All @@ -25,3 +37,7 @@ exports.SELECTOR_BOX_PREVIEW_EXIT_FULLSCREEN_ICON = '.bp-exit-fullscreen-icon';
exports.SELECTOR_BOX_PREVIEW_PAGE_NUM_WRAPPER = '.bp-page-num-wrapper';
exports.SELECTOR_BOX_PREVIEW_ERROR = '.bp-error';
exports.SELECTOR_BOX_PREVIEW_NAV_VISIBLE = '.bp-is-navigation-visible';

exports.CLASS_BOX_PREVIEW_LOADING_WRAPPER = '.bp-loading-wrapper';

exports.TEXT_1080P = '1080p';
4 changes: 3 additions & 1 deletion functional-tests/media-controls.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,15 @@
var ACCESS_TOKEN = 'edRiUpeLD9A1nLyWqc1gZOt2OnSNNYp9';

var FILE_ID_VIDEO = '286114565199';
var FILE_ID_VIDEO_SUBTITLES_TRACKS = '286840567797';
var FILE_ID_MP3 = '286509191779';
var FILE_ID_VIDEO_SMALL = '286114192023';

var preview = new Box.Preview();
preview.show(FILE_ID_VIDEO, ACCESS_TOKEN, {
container: '.preview-container',
showDownload: false,
collection: [FILE_ID_VIDEO, FILE_ID_MP3],
collection: [FILE_ID_VIDEO, FILE_ID_VIDEO_SUBTITLES_TRACKS, FILE_ID_MP3, FILE_ID_VIDEO_SMALL],
});

function disableDash() {
Expand Down
104 changes: 103 additions & 1 deletion functional-tests/media_controls_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,29 @@ const {
CLASS_BOX_PREVIEW_LOADING_WRAPPER,
SELECTOR_BOX_PREVIEW_MP3,
SELECTOR_BOX_PREVIEW_DASH,
SELECTOR_BOX_PREVIEW_MP4
SELECTOR_BOX_PREVIEW_MP4,
SELECTOR_MEDIA_CONTAINER,
SELECTOR_MEDIA_CONTROLS_GEAR,
SELECTOR_MEDIA_SETTINGS_QUALITY_ITEM,
SELECTOR_MEDIA_SETTINGS_MENU_QUALITY,
SELECTOR_MEDIA_SETTINGS_LABEL,
SELECTOR_MEDIA_CONTROLS_HD,
SELECTOR_HD_SETTINGS_VALUE,
SELECTOR_MEDIA_CONTROLS_CC_ICON,
SELECTOR_MEDIA_SETTINGS_SUBTITLES_ON,
SELECTOR_MEDIA_SETTINGS_SUBTITLES_ITEM,
SELECTOR_MEDIA_SETTINGS_AUDIOTRACKS_ITEM,
SELECTOR_MEDIA_SETTINGS_AUTOPLAY_ITEM,
SELECTOR_MEDIA_SETTINGS_SPEED_ITEM,
TEXT_1080P
} = require('./constants');

const { navigateToNextItem, makeNavAppear, waitForLoad } = require('./helpers');

const { CI } = process.env;
const DEFAULT_START = '0:00';
const VIDEO_DURATION = '3:52';
const VIDEO_WITH_SUBTITLES_TRACKS_DURATION = '0:46';
const AUDIO_DURATION = '7:47';
const SELECTOR_VIDEO = 'video';

Expand All @@ -39,6 +54,15 @@ Scenario(
I.seeTextEquals(VIDEO_DURATION, SELECTOR_MEDIA_DURATION);
navigateToNextItem(I);

// video (tracks and subtitles)
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_WITH_SUBTITLES_TRACKS_DURATION, SELECTOR_MEDIA_DURATION);
navigateToNextItem(I);

// mp3
waitForLoad(I);
I.waitForElement(SELECTOR_BOX_PREVIEW_MP3);
Expand All @@ -63,3 +87,81 @@ Scenario(
I.seeTextEquals(VIDEO_DURATION, SELECTOR_MEDIA_DURATION);
}
);

// Exclude IE as it can't handle media files with saucelabs
// Exclude iOS because it doesn't HD/subtitles/audiotracks etc.
Scenario(
'Check that the media controls show the correct settings items @ci @chrome @firefox @edge @safari',
{ retries: 3 },
(I) => {
// Video (dash)
waitForLoad(I);
I.waitForElement(SELECTOR_BOX_PREVIEW_DASH);
makeNavAppear(I, SELECTOR_VIDEO);
I.waitForVisible(SELECTOR_MEDIA_CONTROLS_GEAR);
// Click on the Gear
I.click(SELECTOR_MEDIA_CONTROLS_GEAR);
I.waitForVisible(SELECTOR_MEDIA_SETTINGS_QUALITY_ITEM);
// Click on the quality item
I.click(`${SELECTOR_MEDIA_SETTINGS_QUALITY_ITEM} ${SELECTOR_MEDIA_SETTINGS_LABEL}`);
// Find the 1080 text
I.waitForText(TEXT_1080P);
// Click the 1080 text
I.click(SELECTOR_HD_SETTINGS_VALUE);
// Check that the HD icon is there
I.waitForVisible(SELECTOR_MEDIA_CONTROLS_HD);

navigateToNextItem(I);

// Video with tracks
waitForLoad(I);
I.waitForElement(SELECTOR_BOX_PREVIEW_DASH);
makeNavAppear(I, SELECTOR_VIDEO);
// Wait for the CC button to be visisble
I.waitForVisible(SELECTOR_MEDIA_CONTROLS_CC_ICON);

// Look for this class bp-media-settings-subtitles-on
I.seeElement(SELECTOR_MEDIA_SETTINGS_SUBTITLES_ON);

// Click the CC button
I.click(SELECTOR_MEDIA_CONTROLS_CC_ICON);

// Look for this class bp-media-settings-subtitles-on
I.dontSeeElement(SELECTOR_MEDIA_SETTINGS_SUBTITLES_ON);

// Click on the Gear
I.waitForVisible(SELECTOR_MEDIA_CONTROLS_GEAR);
I.click(SELECTOR_MEDIA_CONTROLS_GEAR);
// Wait for audio tracks and for subtitles items to be visisble
I.waitForVisible(SELECTOR_MEDIA_SETTINGS_SUBTITLES_ITEM);
I.waitForVisible(SELECTOR_MEDIA_SETTINGS_AUDIOTRACKS_ITEM);

navigateToNextItem(I);

// mp3
waitForLoad(I);
I.waitForElement(SELECTOR_BOX_PREVIEW_MP3);
// Click on the Gear
I.click(SELECTOR_MEDIA_CONTROLS_GEAR);
// Look for autoplay and speed
I.waitForVisible(SELECTOR_MEDIA_SETTINGS_AUTOPLAY_ITEM);
I.waitForVisible(SELECTOR_MEDIA_SETTINGS_SPEED_ITEM);

navigateToNextItem(I);

// video (no HD)
I.waitForElement(CLASS_BOX_PREVIEW_LOADING_WRAPPER);
/* eslint-enable prefer-arrow-callback */
waitForLoad(I);
I.waitForElement(SELECTOR_MEDIA_CONTAINER);

makeNavAppear(I, SELECTOR_VIDEO);
// Click on the Gear
I.waitForVisible(SELECTOR_MEDIA_CONTROLS_GEAR);
I.click(SELECTOR_MEDIA_CONTROLS_GEAR);
// Look for autoplay and speed
I.waitForVisible(SELECTOR_MEDIA_SETTINGS_AUTOPLAY_ITEM);
I.waitForVisible(SELECTOR_MEDIA_SETTINGS_SPEED_ITEM);
I.dontSeeElement(SELECTOR_MEDIA_SETTINGS_MENU_QUALITY);
}
);
18 changes: 3 additions & 15 deletions src/lib/viewers/media/DashViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ class DashViewer extends VideoBaseViewer {
this.loadeddataHandler = this.loadeddataHandler.bind(this);
this.adaptationHandler = this.adaptationHandler.bind(this);
this.shakaErrorHandler = this.shakaErrorHandler.bind(this);
this.shakaManifestLoadedHandler = this.shakaManifestLoadedHandler.bind(this);
this.requestFilter = this.requestFilter.bind(this);
this.handleQuality = this.handleQuality.bind(this);
this.handleSubtitle = this.handleSubtitle.bind(this);
Expand Down Expand Up @@ -153,7 +152,6 @@ class DashViewer extends VideoBaseViewer {
this.adapting = true;
this.player = new shaka.Player(this.mediaEl);
this.player.addEventListener('adaptation', this.adaptationHandler);
this.player.addEventListener('streaming', this.shakaManifestLoadedHandler);
this.player.addEventListener('error', this.shakaErrorHandler);
this.player.configure({
abr: {
Expand Down Expand Up @@ -408,19 +406,6 @@ class DashViewer extends VideoBaseViewer {
}
}

/**
* Handles streaming event which is the first time the manifest is available. See https://shaka-player-demo.appspot.com/docs/api/shaka.Player.html#event:StreamingEvent
*
* @private
* @param {Object} shakaError - Error to handle
* @return {void}
*/
shakaManifestLoadedHandler() {
this.calculateVideoDimensions();
this.loadSubtitles();
this.loadAlternateAudio();
}

/**
* Adds event listeners to the media controls.
* Makes changes to the media element.
Expand Down Expand Up @@ -497,11 +482,14 @@ class DashViewer extends VideoBaseViewer {
this.autoplay();
}

this.calculateVideoDimensions();
this.loadUI();
this.loadFilmStrip();
this.resize();
this.handleVolume();
this.startBandwidthTracking();
this.loadSubtitles();
this.loadAlternateAudio();
this.showPlayButton();

this.loaded = true;
Expand Down
28 changes: 6 additions & 22 deletions src/lib/viewers/media/__tests__/DashViewer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,6 @@ describe('lib/viewers/media/DashViewer', () => {
dash.mediaUrl = 'url';
sandbox.stub(shaka, 'Player').returns(dash.player);
stubs.mockPlayer.expects('addEventListener').withArgs('adaptation', sinon.match.func);
stubs.mockPlayer.expects('addEventListener').withArgs('streaming', sinon.match.func);
stubs.mockPlayer.expects('addEventListener').withArgs('error', sinon.match.func);
stubs.mockPlayer.expects('configure');
stubs.mockPlayer
Expand Down Expand Up @@ -589,27 +588,6 @@ describe('lib/viewers/media/DashViewer', () => {
});
});

describe('shakaManifestLoadedHandler()', () => {
beforeEach(() => {
sandbox.stub(dash, 'calculateVideoDimensions');
sandbox.stub(dash, 'loadSubtitles');
sandbox.stub(dash, 'loadAlternateAudio');
});

it('should calculate video dimensions and load UI', () => {
dash.shakaManifestLoadedHandler();

expect(dash.calculateVideoDimensions).to.be.called;
});

it('should load subtitles and additional audio tracks', () => {
dash.shakaManifestLoadedHandler();

expect(dash.loadSubtitles).to.be.called;
expect(dash.loadAlternateAudio).to.be.called;
});
});

describe('addEventListenersForMediaControls()', () => {
const listenerFunc = DashViewer.prototype.addEventListenersForMediaControls;

Expand Down Expand Up @@ -650,12 +628,18 @@ describe('lib/viewers/media/DashViewer', () => {
sandbox.stub(dash, 'startBandwidthTracking');
sandbox.stub(dash, 'handleQuality');
sandbox.stub(dash, 'showPlayButton');
sandbox.stub(dash, 'calculateVideoDimensions');
sandbox.stub(dash, 'loadSubtitles');
sandbox.stub(dash, 'loadAlternateAudio');

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.calculateVideoDimensions).to.be.called;
expect(dash.loadSubtitles).to.be.called;
expect(dash.loadAlternateAudio).to.be.called;
expect(dash.emit).to.be.calledWith(VIEWER_EVENT.load);
expect(dash.loaded).to.be.true;
expect(document.activeElement).to.equal(dash.mediaContainerEl);
Expand Down

0 comments on commit 99edac8

Please sign in to comment.