Fix: Remove use of manifest loaded event

codecept.conf.js

@@ -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
 };

functional-tests/constants.js

@@ -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';
@@ -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';

functional-tests/media-controls.html

@@ -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() {

functional-tests/media_controls_test.js

@@ -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';
 
@@ -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);
@@ -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);
+    }
+);

src/lib/viewers/media/DashViewer.js

@@ -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);
@@ -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: {
@@ -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.
@@ -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;

src/lib/viewers/media/__tests__/DashViewer-test.js

@@ -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
@@ -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;
 
@@ -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);