shaka-player 3.2.1 → 3.3.1

package/test/text/ui_text_displayer_unit.js

@@ -84,20 +84,16 @@ describe('UITextDisplayer', () => {
     // Wait until updateCaptions_() gets called.
     await shaka.test.Util.delay(0.5);
 
-    const textContainer =
-        videoContainer.querySelector('.shaka-text-container');
-    const captions =
-        textContainer.querySelector('span:not(.shaka-text-wrapper)');
+    const textContainer = videoContainer.querySelector('.shaka-text-container');
+    const captions = textContainer.querySelector('div');
     const cssObj = parseCssText(captions.style.cssText);
 
     const expectCssObj = {
       'color': 'green',
-      'background-color': 'black',
       'direction': 'ltr',
       'font-size': '10px',
       'font-style': 'normal',
       'font-weight': 400,
-      'line-height': 2,
       'text-align': 'center',
     };
 
@@ -114,6 +110,8 @@ describe('UITextDisplayer', () => {
     }
 
     expect(cssObj).toEqual(jasmine.objectContaining(expectCssObj));
+    expect(parseCssText(textContainer.querySelector('span').style.cssText))
+        .toEqual(jasmine.objectContaining({'background-color': 'black'}));
   });
 
   it('correctly displays styles for nested cues', async () => {
@@ -137,15 +135,13 @@ describe('UITextDisplayer', () => {
     await shaka.test.Util.delay(0.5);
 
     // Verify styles applied to the nested cues.
-    const textContainer =
-        videoContainer.querySelector('.shaka-text-container');
+    const textContainer = videoContainer.querySelector('.shaka-text-container');
     const captions =
         textContainer.querySelector('span:not(.shaka-text-wrapper)');
     const cssObj = parseCssText(captions.style.cssText);
 
     const expectCssObj = {
       'color': 'green',
-      'background-color': 'black',
       'font-size': '10px',
       'font-style': 'normal',
       'font-weight': 400,
@@ -165,6 +161,8 @@ describe('UITextDisplayer', () => {
     }
 
     expect(cssObj).toEqual(jasmine.objectContaining(expectCssObj));
+    expect(parseCssText(captions.querySelector('span').style.cssText))
+        .toEqual(jasmine.objectContaining({'background-color': 'black'}));
   });
 
   it('correctly displays styles for cellResolution units', async () => {
@@ -191,10 +189,8 @@ describe('UITextDisplayer', () => {
     // style.
     const expectedLinePadding = '11.25px';
 
-    const textContainer =
-        videoContainer.querySelector('.shaka-text-container');
-    const captions =
-        textContainer.querySelector('span:not(.shaka-text-wrapper)');
+    const textContainer = videoContainer.querySelector('.shaka-text-container');
+    const captions = textContainer.querySelector('div');
     const cssObj = parseCssText(captions.style.cssText);
     expect(cssObj).toEqual(
         jasmine.objectContaining({
@@ -222,10 +218,8 @@ describe('UITextDisplayer', () => {
     // videoContainerHeight=450px and tts:fontSize="90%" on the default style.
     const expectedFontSize = '27px';
 
-    const textContainer =
-        videoContainer.querySelector('.shaka-text-container');
-    const captions =
-        textContainer.querySelector('span:not(.shaka-text-wrapper)');
+    const textContainer = videoContainer.querySelector('.shaka-text-container');
+    const captions = textContainer.querySelector('div');
     const cssObj = parseCssText(captions.style.cssText);
     expect(cssObj).toEqual(
         jasmine.objectContaining({'font-size': expectedFontSize}));
@@ -319,6 +313,24 @@ describe('UITextDisplayer', () => {
     expect(captions.length).toBe(3);
   });
 
+  it('hides currently displayed cue when removed', async () => {
+    const cue = new shaka.text.Cue(0, 50, 'One');
+    textDisplayer.setTextVisibility(true);
+    textDisplayer.append([cue]);
+    video.currentTime = 10;
+    await shaka.test.Util.delay(0.5);
+    const textContainer = videoContainer.querySelector('.shaka-text-container');
+
+    let cueElements = textContainer.querySelectorAll('div');
+    expect(cueElements.length).toBe(1);
+    expect(cueElements[0].textContent).toBe('One');
+
+    textDisplayer.remove(0, 100);
+
+    cueElements = textContainer.querySelectorAll('div');
+    expect(cueElements.length).toBe(0);
+  });
+
   it('hides and shows nested cues at appropriate times', async () => {
     const parentCue1 = new shaka.text.Cue(0, 100, '');
     const cue1 = new shaka.text.Cue(0, 50, 'One');

package/test/ui/localization_unit.js

@@ -198,7 +198,7 @@ describe('Localization', () => {
       localization.changeLocale([ELVISH_WOODLAND]);
 
       expect(events.length).toBe(1);
-      expect(events[0].locales).toEqual([ELVISH_WOODLAND]);
+      expect(events[0]['locales']).toEqual([ELVISH_WOODLAND]);
     });
 
 
@@ -214,23 +214,23 @@ describe('Localization', () => {
       localization.changeLocale([ELVISH_WOODLAND, DWARFISH_NORTH]);
 
       expect(events.length).toBe(1);
-      expect(events[0].locales).toEqual([ELVISH_WOODLAND, DWARFISH_NORTH]);
+      expect(events[0]['locales']).toEqual([ELVISH_WOODLAND, DWARFISH_NORTH]);
 
       // We should see an event telling us that dwarfish is still missing.
       localization.insert(ELVISH_WOODLAND, new Map());
       localization.changeLocale([ELVISH_WOODLAND, DWARFISH_NORTH]);
 
       expect(events.length).toBe(2);
-      expect(events[0].locales).toEqual([ELVISH_WOODLAND, DWARFISH_NORTH]);
-      expect(events[1].locales).toEqual([DWARFISH_NORTH]);
+      expect(events[0]['locales']).toEqual([ELVISH_WOODLAND, DWARFISH_NORTH]);
+      expect(events[1]['locales']).toEqual([DWARFISH_NORTH]);
 
       // There should be no more events now that we added the last language.
       localization.insert(DWARFISH_NORTH, new Map());
       localization.changeLocale([ELVISH_WOODLAND, DWARFISH_NORTH]);
 
       expect(events.length).toBe(2);
-      expect(events[0].locales).toEqual([ELVISH_WOODLAND, DWARFISH_NORTH]);
-      expect(events[1].locales).toEqual([DWARFISH_NORTH]);
+      expect(events[0]['locales']).toEqual([ELVISH_WOODLAND, DWARFISH_NORTH]);
+      expect(events[1]['locales']).toEqual([DWARFISH_NORTH]);
     });
   });
 
@@ -373,8 +373,8 @@ describe('Localization', () => {
           // it was in the fallback (HALFLING) but not our preferred language
           // (EVLISH).
           expect(events.length).toBe(1);
-          expect(events[0].locales).toEqual([ELVISH_WOODLAND]);
-          expect(events[0].missing).toEqual(['hello']);
+          expect(events[0]['locales']).toEqual([ELVISH_WOODLAND]);
+          expect(events[0]['missing']).toEqual(['hello']);
         });
 
     it('fires when key/value is missing from preferred but found in base',
@@ -400,8 +400,8 @@ describe('Localization', () => {
           // because it was in the base (ELVISH) but not our preferred language
           // (EVLISH_WOODLAND).
           expect(events.length).toBe(1);
-          expect(events[0].locales).toEqual([ELVISH_WOODLAND]);
-          expect(events[0].missing).toEqual(['Best Wishes']);
+          expect(events[0]['locales']).toEqual([ELVISH_WOODLAND]);
+          expect(events[0]['missing']).toEqual(['Best Wishes']);
         });
 
     it('fires when key/value is missing from preferred but found in sibling',
@@ -427,8 +427,8 @@ describe('Localization', () => {
           // understand" because it was in a sibling locale (HALFLING_SHIRE)
           // but not our preferred language (HALFLING_COMMON).
           expect(events.length).toBe(1);
-          expect(events[0].locales).toEqual([HALFLING_COMMON]);
-          expect(events[0].missing).toEqual(['Do you understand']);
+          expect(events[0]['locales']).toEqual([HALFLING_COMMON]);
+          expect(events[0]['missing']).toEqual(['Do you understand']);
         });
 
     it('fires when key/value is missing from some preferred languages',
@@ -454,8 +454,9 @@ describe('Localization', () => {
 
           // There should have no missing localization events.
           expect(events.length).toBe(1);
-          expect(events[0].locales).toEqual([ELVISH_WOODLAND, DWARFISH_NORTH]);
-          expect(events[0].missing).toEqual(['may your forge burn bright']);
+          expect(events[0]['locales']).toEqual(
+              [ELVISH_WOODLAND, DWARFISH_NORTH]);
+          expect(events[0]['missing']).toEqual(['may your forge burn bright']);
         });
   });
 

package/test/ui/text_displayer_layout_unit.js

@@ -141,7 +141,9 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
         cue.region.id = '1';
         // Position the cue *explicitly* at the bottom of the screen.
         cue.region.viewportAnchorX = 0;  // %
-        cue.region.viewportAnchorY = 100;  // %
+        cue.region.viewportAnchorY = 90;  // %
+        cue.region.width = 100;  // %
+        cue.region.height = 10;  // %
         textDisplayer.append([cue]);
 
         await checkScreenshot('ui', 'cue-with-controls');
@@ -314,6 +316,16 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
       await checkScreenshot(prefix, 'nested-cues-with-linebreak');
     });
 
+    // Regression test for #3600
+    it('cue positioning', async () => {
+      const cue = new shaka.text.Cue(0, 1, 'Text');
+      cue.line = 10;
+      cue.lineInterpretation = shaka.text.Cue.lineInterpretation.PERCENTAGE;
+      textDisplayer.append([cue]);
+
+      await checkScreenshot(prefix, 'cue-position');
+    });
+
     // Regression test for #2157 and #2584
     it('region positioning', async () => {
       const nestedCue = new shaka.text.Cue(

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