shaka-player 3.2.2 → 3.3.2

package/test/ui/text_displayer_layout_unit.js

@@ -34,11 +34,8 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
    */
   let beforeScreenshot;
 
-  // Legacy Edge seems to have inconsistent font kerning.  A one-pixel offset in
-  // the position of one character appears about 60% of the time, requiring us
-  // to have this change tolerance in our tests.  So far, all past bugs in our
-  // implementation that we have tests for would exceed this threshold by a lot.
-  const threshold = 160;  // px
+  // A minimum similarity score for screenshots, between 0 and 1.
+  const minSimilarity = 0.95;
 
   const originalCast = window.chrome && window.chrome.cast;
 
@@ -196,6 +193,7 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
 
         // The video must be played a little now, after the cues were appended,
         // but before the screenshot.
+        video.playbackRate = 1;
         video.play();
         await waiter.failOnTimeout(false).timeoutAfter(5)
             .waitForMovement(video);
@@ -203,10 +201,13 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
 
         // Seek to a time when cues should be showing.
         video.currentTime = time;
+        // Get into a playing state, but without movement.
+        video.playbackRate = 0;
+        video.play();
 
         // Add a short delay to ensure that the system has caught up and that
         // native text displayers have been updated by the browser.
-        await Util.shortDelay();
+        await Util.delay(0.1);
       };
     });
 
@@ -475,6 +476,6 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
     return Util.checkScreenshot(
         /* element= */ videoContainer,
         prefix + '-' + baseName,
-        threshold);
+        minSimilarity);
   }
 });

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

package/test/util/cmcd_manager_unit.js

@@ -0,0 +1,291 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.require('shaka.util.CmcdManager');
+goog.require('shaka.util.ObjectUtils');
+
+describe('CmcdManager', () => {
+  const CmcdManager = shaka.util.CmcdManager;
+  const uuidRegex =
+    '[A-F\\d]{8}-[A-F\\d]{4}-4[A-F\\d]{3}-[89AB][A-F\\d]{3}-[A-F\\d]{12}';
+  const data = {
+    'sid': 'c936730c-031e-4a73-976f-92bc34039c60',
+    'cid': 'xyz',
+    'su': false,
+    'nor': '../testing/3.m4v',
+    'nrr': '0-99',
+    'd': 6066.66,
+    'mtp': 10049,
+    'bs': true,
+    'br': 52317,
+    'v': 1,
+    'pr': 1,
+    'com.test-hello': 'world',
+    'com.test-testing': 1234,
+    'com.test-exists': true,
+    'com.test-notExists': false,
+    'com.test-token': Symbol('s'),
+  };
+
+  describe('Query serialization', () => {
+    it('produces correctly serialized data', () => {
+      const query = CmcdManager.toQuery(data);
+      const result = 'br=52317,bs,cid="xyz",com.test-exists,' +
+                     'com.test-hello="world",com.test-testing=1234,' +
+                     'com.test-token=s,d=6067,mtp=10000,' +
+                     'nor="..%2Ftesting%2F3.m4v",nrr="0-99",' +
+                     'sid="c936730c-031e-4a73-976f-92bc34039c60"';
+      expect(query).toBe(result);
+    });
+
+    it('escapes reserve character in string values', () => {
+      const query = CmcdManager.toQuery({
+        'com.test-escape': 'Double "Quotes"',
+      });
+      const result = 'com.test-escape="Double \\"Quotes\\""';
+      expect(query).toBe(result);
+    });
+  });
+
+  describe('Header serialization', () => {
+    it('produces all header shards', () => {
+      const header = CmcdManager.toHeaders(data);
+      expect(header).toEqual({
+        'CMCD-Object': 'br=52317,d=6067',
+        'CMCD-Request': 'com.test-exists,com.test-hello="world",' +
+                        'com.test-testing=1234,com.test-token=s,mtp=10000,' +
+                        'nor="..%2Ftesting%2F3.m4v",nrr="0-99"',
+        'CMCD-Session': 'cid="xyz",sid="c936730c-031e-4a73-976f-92bc34039c60"',
+        'CMCD-Status': 'bs',
+      });
+    });
+
+    it('ignores empty shards', () => {
+      expect(CmcdManager.toHeaders({br: 200})).toEqual({
+        'CMCD-Object': 'br=200',
+      });
+    });
+  });
+
+  describe('CmcdManager instance', () => {
+    const ObjectUtils = shaka.util.ObjectUtils;
+
+    const playerInterface = {
+      isLive: () => false,
+      getBandwidthEstimate: () => 10000000,
+      getBufferedInfo: () => ({
+        video: [
+          {start: 0, end: 5},
+          {start: 6, end: 31.234},
+          {start: 35, end: 40},
+        ],
+      }),
+      getVariantTracks: () => /** @type {Array.<shaka.extern.Track>} */([
+        {
+          type: 'variant',
+          bandwidth: 50000,
+          videoBandwidth: 40000,
+          audioBandWidth: 10000,
+        },
+        {
+          type: 'variant',
+          bandwidth: 5000000,
+          videoBandwidth: 4000000,
+          audioBandWidth: 1000000,
+        },
+      ]),
+      getPlaybackRate: () => 1,
+      getCurrentTime: () => 10,
+    };
+
+    const sid = '2ed2d1cd-970b-48f2-bfb3-50a79e87cfa3';
+    const config = {
+      enabled: false,
+      sessionId: '',
+      contentId: 'testing',
+      useHeaders: false,
+    };
+
+    /** @type shaka.util.CmcdManager */
+    let cmcdManager = new CmcdManager(playerInterface, config);
+
+    const request = {
+      uris: ['https://test.com/test.mpd'],
+      method: 'GET',
+      body: null,
+      headers: {
+        testing: '1234',
+      },
+      allowCrossSiteCredentials: false,
+      retryParameters: /** @type {shaka.extern.RetryParameters} */({}),
+      licenseRequestType: null,
+      sessionId: null,
+      streamDataCallback: null,
+    };
+
+    const manifestInfo = {
+      format: shaka.util.CmcdManager.StreamingFormat.DASH,
+    };
+
+    const segmentInfo = {
+      type: 'video',
+      init: false,
+      duration: 3.33,
+      mimeType: 'application/mp4',
+      codecs: 'avc1.42001e',
+      bandwidth: 5234167,
+    };
+
+    describe('configuration', () => {
+      it('does not modify requests when disabled', () => {
+        const r = ObjectUtils.cloneObject(request);
+
+        cmcdManager.applyManifestData(r, manifestInfo);
+        expect(r.uris[0]).toBe(request.uris[0]);
+
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.uris[0]).toBe(request.uris[0]);
+      });
+
+      it('generates a session id if not provided', () => {
+        config.enabled = true;
+        cmcdManager = new CmcdManager(playerInterface, config);
+
+        const r = ObjectUtils.cloneObject(request);
+
+        cmcdManager.applyManifestData(r, manifestInfo);
+        const regex = new RegExp(`sid%3D%22${uuidRegex}%22`, 'i');
+        expect(regex.test(r.uris[0])).toBe(true);
+      });
+    });
+
+    describe('query mode', () => {
+      beforeAll(() => {
+        config.sessionId = sid;
+        cmcdManager = new CmcdManager(playerInterface, config);
+      });
+
+      it('modifies manifest request uris', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applyManifestData(r, manifestInfo);
+        const uri = 'https://test.com/test.mpd?CMCD=cid%3D%22testing%22%2C' +
+          'mtp%3D10000%2Cot%3Dm%2Csf%3Dd%2C' +
+          'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r.uris[0]).toBe(uri);
+      });
+
+      it('modifies segment request uris', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        const uri = 'https://test.com/test.mpd?CMCD=bl%3D21200%2Cbr%3D5234%2Ccid%3D%22' +
+          'testing%22%2Cd%3D3330%2Cmtp%3D10000%2Cot%3Dv%2Csf%3Dd%2C' +
+          'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Cst%3Dv%2Csu%2C' +
+          'tb%3D4000';
+        expect(r.uris[0]).toBe(uri);
+      });
+
+      it('modifies text request uris', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applyTextData(r);
+        const uri = 'https://test.com/test.mpd?CMCD=cid%3D%22' +
+          'testing%22%2Cmtp%3D10000%2Cot%3Dc%2Csf%3Dd%2C' +
+          'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r.uris[0]).toBe(uri);
+      });
+    });
+
+    describe('header mode', () => {
+      beforeAll(() => {
+        config.useHeaders = true;
+        cmcdManager = new CmcdManager(playerInterface, config);
+      });
+
+      it('modifies manifest request headers', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applyManifestData(r, manifestInfo);
+        expect(r.headers).toEqual({
+          'testing': '1234',
+          'CMCD-Object': 'ot=m',
+          'CMCD-Request': 'mtp=10000,su',
+          'CMCD-Session': 'cid="testing",sf=d,' +
+                          'sid="2ed2d1cd-970b-48f2-bfb3-50a79e87cfa3"',
+        });
+      });
+
+      it('modifies segment request headers', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers).toEqual({
+          'testing': '1234',
+          'CMCD-Object': 'br=5234,d=3330,ot=v,tb=4000',
+          'CMCD-Request': 'bl=21200,mtp=10000,su',
+          'CMCD-Session': 'cid="testing",sf=d,' +
+                          'sid="2ed2d1cd-970b-48f2-bfb3-50a79e87cfa3",st=v',
+        });
+      });
+    });
+
+    describe('src= mode', () => {
+      it('modifies media stream uris', () => {
+        const r = cmcdManager
+            .appendSrcData('https://test.com/test.mp4', 'video/mp4');
+        const uri = 'https://test.com/test.mp4?CMCD=cid%3D%22testing%22%2C' +
+                    'mtp%3D10000%2Cot%3Dav%2Csf%3Dd%2C' +
+                    'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r).toBe(uri);
+      });
+
+      it('modifies manifest stream uris', () => {
+        const r = cmcdManager
+            .appendSrcData('https://test.com/test.m3u8', 'application/x-mpegurl');
+        const uri = 'https://test.com/test.m3u8?CMCD=cid%3D%22testing%22%2C' +
+                    'mtp%3D10000%2Cot%3Dm%2Csf%3Dd%2C' +
+                    'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r).toBe(uri);
+      });
+
+      it('modifies text track uris', () => {
+        const r = cmcdManager.appendTextTrackData('https://test.com/test.vtt');
+        const uri = 'https://test.com/test.vtt?CMCD=cid%3D%22testing%22%2C' +
+                    'mtp%3D10000%2Cot%3Dc%2Csf%3Dd%2C' +
+                    'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r).toBe(uri);
+      });
+    });
+
+    describe('adheres to the spec', () => {
+      beforeAll(() => {
+        cmcdManager.setBuffering(false);
+        cmcdManager.setBuffering(true);
+      });
+
+      it('sends bs only once', () => {
+        let r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Status']).toContain('bs');
+
+        r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Status']).not.toContain('bs');
+      });
+
+      it('sends su until buffering is complete', () => {
+        let r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Request']).toContain(',su');
+
+        r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Request']).toContain(',su');
+
+        cmcdManager.setBuffering(false);
+        r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Request']).not.toContain(',su');
+      });
+    });
+  });
+});