shaka-player 4.5.0 → 4.6.1

package/test/ui/ui_customization_unit.js

@@ -36,9 +36,9 @@ describe('UI Customization', () => {
     container.appendChild(video);
   });
 
-  it('only the specified controls are created', () => {
+  it('only the specified controls are created', async () => {
     const config = {controlPanelElements: ['time_and_duration', 'mute']};
-    UiUtils.createUIThroughAPI(container, video, config);
+    await UiUtils.createUIThroughAPI(container, video, config);
 
     // Only current time and mute button should've been created
     UiUtils.confirmElementFound(container, 'shaka-current-time');
@@ -49,9 +49,9 @@ describe('UI Customization', () => {
     UiUtils.confirmElementMissing(container, 'shaka-overflow-menu-button');
   });
 
-  it('only the specified overflow menu buttons are created', () => {
+  it('only the specified overflow menu buttons are created', async () => {
     const config = {overflowMenuButtons: ['cast']};
-    UiUtils.createUIThroughAPI(container, video, config);
+    await UiUtils.createUIThroughAPI(container, video, config);
 
     UiUtils.confirmElementFound(container, 'shaka-cast-button');
 
@@ -59,30 +59,31 @@ describe('UI Customization', () => {
   });
 
   it('seek bar only created when configured', async () => {
-    const ui =
-        UiUtils.createUIThroughAPI(container, video, {addSeekBar: false});
+    const ui = await UiUtils.createUIThroughAPI(
+        container, video, {addSeekBar: false});
     UiUtils.confirmElementMissing(container, 'shaka-seek-bar');
     await ui.destroy();
 
-    UiUtils.createUIThroughAPI(container, video, {addSeekBar: true});
+    await UiUtils.createUIThroughAPI(container, video, {addSeekBar: true});
     UiUtils.confirmElementFound(container, 'shaka-seek-bar');
   });
 
   it('big play button only created when configured', async () => {
-    const ui =
-        UiUtils.createUIThroughAPI(container, video, {addBigPlayButton: false});
+    const ui = await UiUtils.createUIThroughAPI(
+        container, video, {addBigPlayButton: false});
     UiUtils.confirmElementMissing(container, 'shaka-play-button-container');
     UiUtils.confirmElementMissing(container, 'shaka-play-button');
     await ui.destroy();
 
-    UiUtils.createUIThroughAPI(container, video, {addBigPlayButton: true});
+    await UiUtils.createUIThroughAPI(
+        container, video, {addBigPlayButton: true});
     UiUtils.confirmElementFound(container, 'shaka-play-button-container');
     UiUtils.confirmElementFound(container, 'shaka-play-button');
   });
 
-  it('settings menus are positioned lower when seek bar is absent', () => {
+  it('settings menus are lower when seek bar is absent', async () => {
     const config = {addSeekBar: false};
-    UiUtils.createUIThroughAPI(container, video, config);
+    await UiUtils.createUIThroughAPI(container, video, config);
 
     function confirmLowPosition(className) {
       const elements =
@@ -101,7 +102,7 @@ describe('UI Customization', () => {
     confirmLowPosition('shaka-playback-rates');
   });
 
-  it('controls are created in specified order', () => {
+  it('controls are created in specified order', async () => {
     const config = {
       controlPanelElements: [
         'mute',
@@ -110,7 +111,7 @@ describe('UI Customization', () => {
       ],
     };
 
-    UiUtils.createUIThroughAPI(container, video, config);
+    await UiUtils.createUIThroughAPI(container, video, config);
 
     const controlsButtonPanels =
         container.getElementsByClassName('shaka-controls-button-panel');
@@ -131,7 +132,7 @@ describe('UI Customization', () => {
 
   it('layout can be re-configured after the creation', async () => {
     const config = {controlPanelElements: ['time_and_duration', 'mute']};
-    const ui = UiUtils.createUIThroughAPI(container, video, config);
+    const ui = await UiUtils.createUIThroughAPI(container, video, config);
 
     // Only current time and mute button should've been created
     UiUtils.confirmElementFound(container, 'shaka-current-time');
@@ -177,7 +178,7 @@ describe('UI Customization', () => {
   it('cast proxy and controls are unchanged by reconfiguration', async () => {
     const config = {controlPanelElements: ['time_and_duration', 'mute']};
     /** @type {!shaka.ui.Overlay} */
-    const ui = UiUtils.createUIThroughAPI(container, video, config);
+    const ui = await UiUtils.createUIThroughAPI(container, video, config);
 
     const eventManager = new shaka.util.EventManager();
     const waiter = new shaka.test.Waiter(eventManager);

package/test/ui/ui_integration.js

@@ -45,7 +45,8 @@ describe('UI', () => {
     videoContainer = shaka.util.Dom.createHTMLElement('div');
     videoContainer.appendChild(video);
     document.body.appendChild(videoContainer);
-    player = new compiledShaka.Player(video);
+    player = new compiledShaka.Player();
+    await player.attach(video);
 
     // Create UI
     // Add all of the buttons we have
@@ -313,8 +314,6 @@ describe('UI', () => {
   describe('resolution selection', () => {
     /** @type {!Map.<number, !HTMLElement>} */
     let resolutionsToButtons;
-    /** @type {!Array.<number>} */
-    let resolutionsFromContent;
     /** @type {!Array.<!HTMLElement>} */
     let resolutionButtons;
     /** @type {!Element} */
@@ -329,6 +328,8 @@ describe('UI', () => {
     let preferredLanguage;
     /** @type {!shaka.extern.Track} */
     let oldResolutionTrack;
+    /** @type {number} */
+    let newResolutionTrackId;
 
     beforeEach(async () => {
       oldResolution = 182;
@@ -353,6 +354,7 @@ describe('UI', () => {
       updateResolutionButtonsAndMap();
 
       oldResolutionTrack = findTrackWithHeight(tracks, oldResolution);
+      newResolutionTrackId = findTrackWithHeight(tracks, newResolution).id;
 
       const selectedResolution =
           getSelectedTrack(player.getVariantTracks()).height;
@@ -363,9 +365,8 @@ describe('UI', () => {
     });
 
     it('contains all the relevant resolutions', () => {
-      const formattedResolutions = resolutionsFromContent.map((res) => {
-        return formatResolution(res);
-      });
+      const formattedResolutions =
+          tracks.map((t) => formatResolution(t.id, tracks));
       verifyItems(formattedResolutions, resolutionButtons);
     });
 
@@ -374,7 +375,7 @@ describe('UI', () => {
       tracks = player.getVariantTracks();
       expect(getSelectedTrack(tracks).height).toBe(oldResolution);
 
-      const button = resolutionsToButtons.get(newResolution);
+      const button = resolutionsToButtons.get(newResolutionTrackId);
       button.click();
 
       // Wait for the change to take effect
@@ -400,7 +401,7 @@ describe('UI', () => {
 
       expect(getSelectedTrack(tracks).height).toBe(newResolution);
 
-      const button = resolutionsToButtons.get(newResolution);
+      const button = resolutionsToButtons.get(newResolutionTrackId);
       const isChosen = button.querySelector('.shaka-chosen-item');
 
       expect(isChosen).not.toBe(null);
@@ -427,7 +428,7 @@ describe('UI', () => {
       const p = waiter.waitForEvent(controls, 'resolutionselectionupdated');
 
       // Any resolution would works
-      const button = resolutionsToButtons.get(newResolution);
+      const button = resolutionsToButtons.get(newResolutionTrackId);
       button.click();
 
       await p;
@@ -467,13 +468,26 @@ describe('UI', () => {
 
     /**
      * Gets the resolution to the same format it
-     * appears in the UI: height + 'p'.
+     * appears in the UI
      *
-     * @param {number} height
+     * @param {number} id
+     * @param {!Array.<!shaka.extern.Track>} tracks
      * @return {string}
      */
-    function formatResolution(height) {
-      return height.toString() + 'p';
+    function formatResolution(id, tracks) {
+      const track = tracks.find((t) => t.id == id);
+      const trackHeight = track.height || 0;
+      const trackWidth = track.width || 0;
+      let height = trackHeight;
+      const aspectRatio = trackWidth / trackHeight;
+      if (aspectRatio > (16 / 9)) {
+        height = Math.round(trackWidth * 9 / 16);
+      }
+      let text = height + 'p';
+      if (height == 2160) {
+        text = '4K';
+      }
+      return text;
     }
 
     /**
@@ -500,10 +514,6 @@ describe('UI', () => {
         return track.language == preferredLanguage;
       });
 
-      resolutionsFromContent = tracks.map((track) => {
-        return track.height;
-      });
-
       resolutionButtons = filterButtons(
           /* buttons= */ resolutionsMenu.childNodes,
           /* excludeClasses= */ [
@@ -513,8 +523,8 @@ describe('UI', () => {
 
       resolutionsToButtons = mapChoicesToButtons(
           /* buttons= */ resolutionButtons,
-          /* choices= */ resolutionsFromContent,
-          /* modifier= */ formatResolution);
+          /* choices= */ tracks.map((track) => track.id),
+          /* modifier= */ (id) => formatResolution(id, tracks));
     }
   });  // describe('resolution selection')
 
@@ -598,7 +608,7 @@ describe('UI', () => {
 
   /**
     * @param {!Array.<!HTMLElement>} buttons
-    * @param {!Array.<string>} choices
+    * @param {!Array.<string>|!Array.<number>} choices
     * @param {function(string):string|function(number):string} modifier
     * @return {!Map.<string, !HTMLElement>|!Map.<number, !HTMLElement>}
     */

package/test/ui/ui_unit.js

@@ -36,14 +36,14 @@ describe('UI', () => {
     /** @type {!HTMLVideoElement} */
     let video;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       videoContainer =
         /** @type {!HTMLElement} */ (document.createElement('div'));
       document.body.appendChild(videoContainer);
 
       video = shaka.test.UiUtils.createVideoElement();
       videoContainer.appendChild(video);
-      UiUtils.createUIThroughAPI(videoContainer, video);
+      await UiUtils.createUIThroughAPI(videoContainer, video);
     });
 
     it('has all the basic elements', () => {
@@ -193,7 +193,8 @@ describe('UI', () => {
         ],
         doubleClickForFullscreen: false,
       };
-      const ui = UiUtils.createUIThroughAPI(videoContainer, video, config);
+      const ui = await UiUtils.createUIThroughAPI(
+          videoContainer, video, config);
       const controls = ui.getControls();
 
       const spy = spyOn(controls, 'toggleFullScreen');
@@ -216,8 +217,8 @@ describe('UI', () => {
       /** @type {!HTMLElement} */
       let controlsContainer;
 
-      beforeEach(() => {
-        const ui = UiUtils.createUIThroughAPI(videoContainer, video);
+      beforeEach(async () => {
+        const ui = await UiUtils.createUIThroughAPI(videoContainer, video);
         player = ui.getControls().getLocalPlayer();
         const controlsContainers =
             videoContainer.getElementsByClassName('shaka-controls-container');
@@ -246,13 +247,14 @@ describe('UI', () => {
       /** @type {!HTMLElement} */
       let overflowMenu;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         const config = {
           controlPanelElements: [
             'overflow_menu',
           ],
         };
-        const ui = UiUtils.createUIThroughAPI(videoContainer, video, config);
+        const ui = await UiUtils.createUIThroughAPI(
+            videoContainer, video, config);
         player = ui.getControls().getLocalPlayer();
 
         const overflowMenus =
@@ -323,8 +325,8 @@ describe('UI', () => {
       /** @type {!HTMLElement} */
       let controlsButtonPanel;
 
-      it('has default elements', () => {
-        UiUtils.createUIThroughAPI(videoContainer, video);
+      it('has default elements', async () => {
+        await UiUtils.createUIThroughAPI(videoContainer, video);
         const controlsButtonPanels = videoContainer.getElementsByClassName(
             'shaka-controls-button-panel');
 
@@ -357,7 +359,7 @@ describe('UI', () => {
         }
       });
 
-      it('is accessible', () => {
+      it('is accessible', async () => {
         function confirmAriaLabel(className) {
           const elements =
               controlsButtonPanel.getElementsByClassName(className);
@@ -376,7 +378,7 @@ describe('UI', () => {
           ],
         };
 
-        UiUtils.createUIThroughAPI(videoContainer, video, config);
+        await UiUtils.createUIThroughAPI(videoContainer, video, config);
         const controlsButtonPanels = videoContainer.getElementsByClassName(
             'shaka-controls-button-panel');
         expect(controlsButtonPanels.length).toBe(1);
@@ -403,14 +405,15 @@ describe('UI', () => {
       /** @type {!Element} */
       let languageMenuButton;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         const config = {
           controlPanelElements: [
             'quality',
             'language',
           ],
         };
-        const ui = UiUtils.createUIThroughAPI(videoContainer, video, config);
+        const ui = await UiUtils.createUIThroughAPI(
+            videoContainer, video, config);
         player = ui.getControls().getLocalPlayer();
 
         const resolutionsMenus =
@@ -473,7 +476,7 @@ describe('UI', () => {
       /** @type {shaka.ui.Controls} */
       let controls;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         const config = {
           controlPanelElements: [
             'overflow_menu',
@@ -482,7 +485,8 @@ describe('UI', () => {
             'quality',
           ],
         };
-        const ui = UiUtils.createUIThroughAPI(videoContainer, video, config);
+        const ui = await UiUtils.createUIThroughAPI(
+            videoContainer, video, config);
         controls = ui.getControls();
         player = controls.getLocalPlayer();
 
@@ -696,7 +700,7 @@ describe('UI', () => {
       /** @type {!HTMLElement} */
       let contextMenu;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         const config = {
           customContextMenu: true,
           contextMenuElements: [
@@ -705,7 +709,8 @@ describe('UI', () => {
             'fakeElement',
           ],
         };
-        const ui = UiUtils.createUIThroughAPI(videoContainer, video, config);
+        const ui = await UiUtils.createUIThroughAPI(
+            videoContainer, video, config);
 
         controlsContainer = ui.getControls().getControlsContainer();
 
@@ -745,7 +750,7 @@ describe('UI', () => {
       /** @type {!HTMLElement} */
       let statisticsContainer;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         const config = {
           customContextMenu: true,
           contextMenuElements: [
@@ -753,7 +758,8 @@ describe('UI', () => {
           ],
           statisticsList: Object.keys(new shaka.util.Stats().getBlob()),
         };
-        const ui = UiUtils.createUIThroughAPI(videoContainer, video, config);
+        const ui = await UiUtils.createUIThroughAPI(
+            videoContainer, video, config);
         player = ui.getControls().getLocalPlayer();
 
         const statisticsButtons =

package/test/util/buffer_utils_unit.js

@@ -42,7 +42,7 @@ describe('BufferUtils', () => {
 
     it('compares with same buffer', () => {
       const a = new Uint8Array([0, 1, 2, 3]);
-      const b = new Uint16Array(a.buffer);
+      const b = BufferUtils.toUint16(a);
       expect(BufferUtils.equal(a, b)).toBe(true);
     });