shaka-player 3.2.2 → 3.3.0

package/test/player_integration.js

@@ -87,6 +87,41 @@ describe('Player', () => {
     });
   });  // describe('attach')
 
+  describe('updateStartTime() in manifestparsed event handler', () => {
+    it('does not get segments prior to startTime', async () => {
+      player.addEventListener('manifestparsed', () => {
+        player.updateStartTime(24);
+      });
+      const results = {
+        requestedVideoSegment0: false,
+        requestedVideoSegment1: false,
+        requestedVideoSegment2: false,
+      };
+      const expected = {
+        requestedVideoSegment0: false,
+        requestedVideoSegment1: false,
+        requestedVideoSegment2: true,
+      };
+      player.getNetworkingEngine().registerRequestFilter(
+          (type, request) => {
+            if (request.uris[0] == 'test:sintel/video/0') {
+              results.requestedVideoSegment0 = true;
+            }
+            if (request.uris[0] == 'test:sintel/video/1') {
+              results.requestedVideoSegment1 = true;
+            }
+            if (request.uris[0] == 'test:sintel/video/2') {
+              results.requestedVideoSegment2 = true;
+            }
+          });
+      await player.load('test:sintel_compiled');
+      video.play();
+      await waiter.waitUntilPlayheadReachesOrFailOnTimeout(video, 25, 30);
+      expect(results).toEqual(expected);
+    });
+  });
+
+
   describe('getStats', () => {
     it('gives stats about current stream', async () => {
       // This is tested more in player_unit.js.  This is here to test the public
@@ -652,6 +687,70 @@ describe('Player', () => {
     });
   });
 
+  describe('mediaQualityChanges', () => {
+    /** @type {!jasmine.Spy} */
+    let onQualityChange;
+    /** @type {!shaka.test.Waiter} */
+    let waiter;
+
+    const qualityChange1 = jasmine.objectContaining({
+      mediaQuality: jasmine.objectContaining({
+        bandwidth: 1,
+        codecs: 'mp4a.40.2',
+        contentType: 'audio',
+        mimeType: 'audio/mp4',
+      }),
+      type: 'mediaqualitychanged',
+      position: jasmine.any(Number),
+    });
+    const qualityChange2 = jasmine.objectContaining({
+      mediaQuality: jasmine.objectContaining({
+        bandwidth: 1,
+        codecs: 'avc1.42c01e',
+        contentType: 'video',
+        mimeType: 'video/mp4',
+      }),
+      type: 'mediaqualitychanged',
+      position: jasmine.any(Number),
+    });
+
+    beforeEach(() => {
+      onQualityChange = jasmine.createSpy('onQualityChange');
+      // const spyFunc = Util.spyFunc(onQualityChange);
+      player.addEventListener('mediaqualitychanged',
+          Util.spyFunc(onQualityChange));
+      waiter = new shaka.test.Waiter(eventManager)
+          .timeoutAfter(10)
+          .failOnTimeout(true);
+    });
+
+    it('emits audio/video quality changes at start when enabled', async () => {
+      player.configure('streaming.observeQualityChanges', true);
+
+      await player.load('test:sintel_compiled');
+      video.play();
+
+      // Wait for the video to start playback.  If it takes longer than 10
+      // seconds, fail the test.
+      await waiter.waitForMovementOrFailOnTimeout(video, 10);
+      expect(onQualityChange).toHaveBeenCalledTimes(2);
+      expect(onQualityChange).toHaveBeenCalledWith(qualityChange1);
+      expect(onQualityChange).toHaveBeenCalledWith(qualityChange2);
+    });
+
+    it('does not emit quality changes at start when disabled', async () => {
+      player.configure('streaming.observeQualityChanges', false);
+
+      await player.load('test:sintel_compiled');
+      video.play();
+
+      // Wait for the video to start playback.  If it takes longer than 10
+      // seconds, fail the test.
+      await waiter.waitForMovementOrFailOnTimeout(video, 10);
+      expect(onQualityChange).not.toHaveBeenCalled();
+    });
+  });
+
   describe('seek range', () => {
     // Regression test for Issue #3675.
     it('has a reasonable seek range after going from live to VOD', async () => {

package/test/test/util/dash_parser_util.js

@@ -46,6 +46,8 @@ shaka.test.Dash = class {
 
     const playerInterface = {
       networkingEngine: networkingEngine,
+      modifyManifestRequest: (request, manifestInfo) => {},
+      modifySegmentRequest: (request, segmentInfo) => {},
       filter: () => {},
       makeTextStreamsForClosedCaptions: (manifest) => {},
       onTimelineRegionAdded: fail,  // Should not have any EventStream elements.
@@ -78,6 +80,8 @@ shaka.test.Dash = class {
 
     const playerInterface = {
       networkingEngine: networkingEngine,
+      modifyManifestRequest: (request, manifestInfo) => {},
+      modifySegmentRequest: (request, segmentInfo) => {},
       filter: () => {},
       makeTextStreamsForClosedCaptions: (manifest) => {},
       onTimelineRegionAdded: fail,  // Should not have any EventStream elements.

package/test/test/util/fake_ad.js

@@ -154,6 +154,13 @@ shaka.test.FakeAd = class {
   }
 
 
+  /**
+   * @override
+   */
+  isLinear() {
+    return true;
+  }
+
   /**
    * @override
    */

package/test/test/util/fake_drm_engine.js

@@ -17,7 +17,7 @@ goog.require('shaka.test.Util');
  */
 shaka.test.FakeDrmEngine = class {
   constructor() {
-    /** @private {!Array.<number>} */
+    /** @private {!Array.<string>} */
     this.offlineSessions_ = [];
     /** @private {?shaka.extern.DrmInfo} */
     this.drmInfo_ = null;
@@ -45,6 +45,13 @@ shaka.test.FakeDrmEngine = class {
     // be returned.
     this.getDrmInfo.and.callFake(() => this.drmInfo_);
 
+    /** @type {!jasmine.Spy} */
+    this.newInitData = jasmine.createSpy('newInitData');
+    this.newInitData.and.callFake((initDataType, initData) => {
+      const num = 1 + this.offlineSessions_.length;
+      this.offlineSessions_.push('session-' + num);
+    });
+
     /** @type {!jasmine.Spy} */
     this.getExpiration = jasmine.createSpy('getExpiration');
     this.getExpiration.and.returnValue(Infinity);
@@ -90,7 +97,7 @@ shaka.test.FakeDrmEngine = class {
   }
 
   /**
-   * @param {!Array.<number>} sessions
+   * @param {!Array.<string>} sessions
    */
   setSessionIds(sessions) {
     // Copy the values to break the reference to the input value.

package/test/test/util/manifest_generator.js

@@ -653,15 +653,16 @@ shaka.test.ManifestGenerator.Stream = class {
    * @param {!Array.<string>} uris
    * @param {number} startByte
    * @param {?number} endByte
+   * @param {null|shaka.extern.MediaQualityInfo=} mediaQuality
    */
-  setInitSegmentReference(uris, startByte, endByte) {
+  setInitSegmentReference(uris, startByte, endByte, mediaQuality) {
     goog.asserts.assert(this.manifest_,
         'A top-level generated Manifest is required to use this method!');
 
     const getUris = () => uris;
     this.initSegmentReference_ =
         new this.manifest_.shaka_.media.InitSegmentReference(
-            getUris, startByte, endByte);
+            getUris, startByte, endByte, mediaQuality);
   }
 
   /**

package/test/test/util/test_scheme.js

@@ -206,10 +206,23 @@ shaka.test.TestScheme = class {
      * @param {string} name
      */
     function addStreamInfo(stream, variant, data, contentType, name) {
+      const mediaQualityInfo = {
+        bandwidth: 1,
+        codecs: data[contentType].codecs || 'unknown',
+        contentType: contentType,
+        mimeType: data[contentType].mimeType,
+        audioSamplingRate: null,
+        frameRate: null,
+        height: null,
+        channelsCount: null,
+        pixelAspectRatio: null,
+        width: null,
+      };
       stream.mimeType = data[contentType].mimeType;
       stream.codecs = data[contentType].codecs;
       stream.setInitSegmentReference(
-          ['test:' + name + '/' + contentType + '/init'], 0, null);
+          ['test:' + name + '/' + contentType + '/init'], 0, null,
+          mediaQualityInfo);
       stream.useSegmentTemplate(
           'test:' + name + '/' + contentType + '/%d',
           data[contentType].segmentDuration);

package/test/text/ttml_text_parser_unit.js

@@ -1266,6 +1266,8 @@ describe('TtmlTextParser', () => {
             fontStyle: Cue.fontStyle.ITALIC,
             lineHeight: '20px',
             fontSize: '10em',
+            textStrokeColor: 'blue',
+            textStrokeWidth: '3px',
           },
           {
             startTime: 2,
@@ -1277,6 +1279,7 @@ describe('TtmlTextParser', () => {
         '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
         '<styling>' +
         '<style xml:id="s1" tts:color="red" ' +
+        'tts:textOutline="blue 3px" ' +
         'tts:backgroundColor="blue" ' +
         'tts:fontWeight="bold" ' +
         'tts:fontFamily="Times New Roman" ' +
@@ -1295,6 +1298,50 @@ describe('TtmlTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 
+  it('uses text color if tts:textOutline does not specify color', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 1,
+            endTime: 2,
+            payload: 'Test',
+            color: 'red',
+            textStrokeColor: 'red',
+            textStrokeWidth: '3px',
+          },
+        ],
+        '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
+        '<styling>' +
+        '<style xml:id="s1" tts:color="red" ' +
+        'tts:textOutline="3px" />' +
+        '</styling>' +
+        '<body region="subtitleArea"><div>' +
+        '<p begin="00:01.00" end="00:02.00" style="s1">Test</p>' +
+        '</div></body></tt>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0});
+  });
+
+  it('does not add an outline if tts:textOutline only contains color', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 1,
+            endTime: 2,
+            payload: 'Test',
+            color: 'red',
+          },
+        ],
+        '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
+        '<styling>' +
+        '<style xml:id="s1" tts:color="red" ' +
+        'tts:textOutline="blue" />' +
+        '</styling>' +
+        '<body region="subtitleArea"><div>' +
+        '<p begin="00:01.00" end="00:02.00" style="s1">Test</p>' +
+        '</div></body></tt>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0});
+  });
+
   // Regression test for #2623
   it('does not apply background colors to containers', () => {
     verifyHelper(

package/test/ui/ui_unit.js

@@ -409,6 +409,80 @@ describe('UI', () => {
       });
     });
 
+    describe('control panel buttons with submenus', () => {
+      /** @type {!HTMLElement} */
+      let resolutionMenu;
+      /** @type {!Element} */
+      let resolutionMenuButton;
+      /** @type {!HTMLElement} */
+      let languageMenu;
+      /** @type {!Element} */
+      let languageMenuButton;
+
+      beforeEach(() => {
+        const config = {
+          controlPanelElements: [
+            'quality',
+            'language',
+          ],
+        };
+        const ui = UiUtils.createUIThroughAPI(videoContainer, video, config);
+        player = ui.getControls().getLocalPlayer();
+
+        const resolutionsMenus =
+        videoContainer.getElementsByClassName('shaka-resolutions');
+        expect(resolutionsMenus.length).toBe(1);
+        resolutionMenu = /** @type {!HTMLElement} */ (resolutionsMenus[0]);
+
+        const resolutionMenuButtons =
+        videoContainer.getElementsByClassName('shaka-resolution-button');
+        expect(resolutionMenuButtons.length).toBe(1);
+        resolutionMenuButton = resolutionMenuButtons[0];
+
+        const languageMenus =
+        videoContainer.getElementsByClassName('shaka-audio-languages');
+        expect(languageMenus.length).toBe(1);
+        languageMenu = /** @type {!HTMLElement} */ (languageMenus[0]);
+
+        const languageMenuButtons =
+        videoContainer.getElementsByClassName('shaka-language-button');
+        expect(languageMenuButtons.length).toBe(1);
+        languageMenuButton = languageMenuButtons[0];
+      });
+
+      it('menus are initially hidden', () => {
+        expect(resolutionMenu.classList.contains('shaka-hidden')).toBe(true);
+        expect(languageMenu.classList.contains('shaka-hidden')).toBe(true);
+      });
+
+      it('a menu becomes visible if the button is clicked', () => {
+        resolutionMenuButton.click();
+
+        expect(resolutionMenu.classList.contains('shaka-hidden')).toBe(false);
+      });
+
+      it('a menu becomes hidden if the "close" button is clicked', () => {
+        resolutionMenuButton.click();
+
+        const backToOverflowButtons =
+        videoContainer.getElementsByClassName('shaka-back-to-overflow-button');
+        expect(backToOverflowButtons.length).toBe(2);
+        const backToOverflowButton =
+        /** @type {!HTMLElement} */ (backToOverflowButtons[0]);
+        backToOverflowButton.click();
+
+        expect(resolutionMenu.classList.contains('shaka-hidden')).toBe(true);
+      });
+
+      it('a menu becomes hidden if another one is opened', () => {
+        resolutionMenuButton.click();
+        languageMenuButton.click();
+
+        expect(resolutionMenu.classList.contains('shaka-hidden')).toBe(true);
+        expect(languageMenu.classList.contains('shaka-hidden')).toBe(false);
+      });
+    });
+
     describe('resolutions menu', () => {
       /** @type {!HTMLElement} */
       let resolutionsMenu;
@@ -611,6 +685,182 @@ describe('UI', () => {
         goog.asserts.assert(found, 'Unable to find resolution menu');
       }
     });
+
+    describe('custom context menu', () => {
+      /** @type {!HTMLElement} */
+      let controlsContainer;
+      /** @type {!HTMLElement} */
+      let contextMenu;
+
+      beforeEach(() => {
+        const config = {
+          customContextMenu: true,
+          contextMenuElements: [
+            'fakeElement',
+            'statistics',
+            'fakeElement',
+          ],
+        };
+        const ui = UiUtils.createUIThroughAPI(videoContainer, video, config);
+
+        controlsContainer = ui.getControls().getControlsContainer();
+
+        const contextMenus =
+        videoContainer.getElementsByClassName('shaka-context-menu');
+        expect(contextMenus.length).toBe(1);
+        contextMenu = /** @type {!HTMLElement} */
+            (contextMenus[0]);
+      });
+
+      it('responds to contextmenu event', () => {
+        expect(contextMenu.classList.contains('shaka-hidden')).toBe(true);
+        UiUtils.simulateEvent(controlsContainer, 'contextmenu');
+        expect(contextMenu.classList.contains('shaka-hidden')).toBe(false);
+        UiUtils.simulateEvent(controlsContainer, 'contextmenu');
+        expect(contextMenu.classList.contains('shaka-hidden')).toBe(true);
+      });
+      it('hides on click event', () => {
+        UiUtils.simulateEvent(controlsContainer, 'contextmenu');
+        UiUtils.simulateEvent(controlsContainer, 'click');
+        expect(contextMenu.classList.contains('shaka-hidden')).toBe(true);
+        UiUtils.simulateEvent(controlsContainer, 'contextmenu');
+        UiUtils.simulateEvent(window, 'click');
+        expect(contextMenu.classList.contains('shaka-hidden')).toBe(true);
+      });
+      it('builds internal elements', () => {
+        expect(contextMenu.childNodes.length).toBe(1);
+
+        expect(contextMenu.childNodes[0]['className'])
+            .toBe('shaka-statistics-button');
+      });
+    });
+
+    describe('statistics context menu', () => {
+      /** @type {!HTMLElement} */
+      let statisticsButton;
+      /** @type {!HTMLElement} */
+      let statisticsContainer;
+
+      beforeEach(() => {
+        const config = {
+          customContextMenu: true,
+          contextMenuElements: [
+            'statistics',
+          ],
+          statisticsList: Object.keys(new shaka.util.Stats().getBlob()),
+        };
+        const ui = UiUtils.createUIThroughAPI(videoContainer, video, config);
+        player = ui.getControls().getLocalPlayer();
+
+        const statisticsButtons =
+        videoContainer.getElementsByClassName('shaka-statistics-button');
+        expect(statisticsButtons.length).toBe(1);
+        statisticsButton = /** @type {!HTMLElement} */
+            (statisticsButtons[0]);
+
+        const statisticsContainers =
+        videoContainer.getElementsByClassName('shaka-statistics-container');
+        expect(statisticsContainers.length).toBe(1);
+        statisticsContainer = /** @type {!HTMLElement} */
+            (statisticsContainers[0]);
+      });
+
+      it('appears and disappears on toggle', () => {
+        expect(statisticsContainer.classList.contains('shaka-hidden'))
+            .toBe(true);
+
+        statisticsButton.click();
+        expect(statisticsContainer.classList.contains('shaka-hidden'))
+            .toBe(false);
+
+        statisticsButton.click();
+        expect(statisticsContainer.classList.contains('shaka-hidden'))
+            .toBe(true);
+      });
+
+      it('displays all the available statistics', () => {
+        const skippedStats = ['stateHistory', 'switchHistory'];
+        const nodes = statisticsContainer.childNodes;
+        let nodeIndex = 0;
+
+        for (const statistic in new shaka.util.Stats().getBlob()) {
+          if (!skippedStats.includes(statistic)) {
+            // Text content of label (without ':') is a valid statistic
+            const label = nodes[nodeIndex].childNodes[0].textContent;
+            expect(label.replace(':', '')).toBe(statistic);
+
+            // Value has been parsed and it is not the default 'NaN'
+            const value = nodes[nodeIndex].childNodes[1].textContent;
+            expect(value).not.toBe('NaN');
+
+            nodeIndex += 1;
+          }
+        }
+      });
+      it('is updated periodically', async () => {
+        function getStatsFromContainer() {
+          const nodes = statisticsContainer.childNodes;
+          width = nodes[0].childNodes[1].textContent.replace(' (px)', '');
+          height = nodes[1].childNodes[1].textContent.replace(' (px)', '');
+          bufferingTime =
+              nodes[13].childNodes[1].textContent.replace(' (s)', '');
+        }
+
+        /** @type {!string} */
+        let width;
+        /** @type {!string} */
+        let height;
+        /** @type {!string} */
+        let bufferingTime;
+        /** @type {!string} */
+        let lastBufferingTime;
+
+        const manifest =
+        shaka.test.ManifestGenerator.generate((manifest) => {
+          manifest.addVariant(/* id= */ 0, (variant) => {
+            variant.addVideo(1, (stream) => {
+              stream.size(1920, 1080);
+            });
+          });
+        });
+
+        shaka.media.ManifestParser.registerParserByMime(
+            fakeMimeType, () => new shaka.test.FakeManifestParser(manifest));
+
+        await player.load(
+            /* uri= */ 'fake', /* startTime= */ 0, fakeMimeType);
+
+        // Placeholder statistics are available before toggle
+        getStatsFromContainer();
+        expect(width).toBe('NaN');
+        expect(height).toBe('NaN');
+        expect(bufferingTime).toBe('NaN');
+
+        // Statistics are displayed on toggle
+        statisticsButton.click();
+        await Util.delay(0.2);
+
+        getStatsFromContainer();
+        expect(width).toBe('1920');
+        expect(height).toBe('1080');
+        expect(bufferingTime).toBeGreaterThanOrEqual(0.1);
+
+        // Statistics are updated over time
+        lastBufferingTime = bufferingTime;
+        await Util.delay(0.2);
+
+        getStatsFromContainer();
+        expect(bufferingTime).toBeGreaterThan(lastBufferingTime);
+
+        // Statistics stop updating when the container is hidden
+        statisticsButton.click();
+        lastBufferingTime = bufferingTime;
+        await Util.delay(0.2);
+
+        getStatsFromContainer();
+        expect(bufferingTime).toBe(lastBufferingTime);
+      });
+    });
   });