shaka-player 4.4.3 → 4.6.0

package/test/text/text_engine_unit.js

@@ -105,6 +105,7 @@ describe('TextEngine', () => {
       expect(mockParseMedia).toHaveBeenCalledOnceMoreWith([
         dummyData,
         {periodStart: 0, segmentStart: 0, segmentEnd: 3, vttOffset: 0},
+        undefined,
       ]);
 
       expect(mockDisplayer.appendSpy).toHaveBeenCalledOnceMoreWith([
@@ -120,6 +121,7 @@ describe('TextEngine', () => {
       expect(mockParseMedia).toHaveBeenCalledOnceMoreWith([
         dummyData,
         {periodStart: 0, segmentStart: 3, segmentEnd: 5, vttOffset: 0},
+        undefined,
       ]);
 
       expect(mockDisplayer.appendSpy).toHaveBeenCalledOnceMoreWith([
@@ -272,6 +274,7 @@ describe('TextEngine', () => {
       expect(mockParseMedia).toHaveBeenCalledOnceMoreWith([
         dummyData,
         {periodStart: 0, segmentStart: 0, segmentEnd: 3, vttOffset: 0},
+        undefined,
       ]);
       expect(mockDisplayer.appendSpy).toHaveBeenCalledOnceMoreWith([
         [
@@ -286,6 +289,7 @@ describe('TextEngine', () => {
       expect(mockParseMedia).toHaveBeenCalledOnceMoreWith([
         dummyData,
         {periodStart: 4, segmentStart: 4, segmentEnd: 7, vttOffset: 4},
+        undefined,
       ]);
       expect(mockDisplayer.appendSpy).toHaveBeenCalledOnceMoreWith([
         [
@@ -316,6 +320,7 @@ describe('TextEngine', () => {
       expect(mockParseMedia).toHaveBeenCalledOnceMoreWith([
         dummyData,
         {periodStart: 0, segmentStart: 0, segmentEnd: 3, vttOffset: 0},
+        undefined,
       ]);
 
       textEngine.setTimestampOffset(8);
@@ -325,6 +330,7 @@ describe('TextEngine', () => {
       expect(mockParseMedia).toHaveBeenCalledOnceMoreWith([
         dummyData,
         {periodStart: 8, segmentStart: 4, segmentEnd: 7, vttOffset: 4},
+        undefined,
       ]);
     });
   });

package/test/text/ttml_text_parser_unit.js

@@ -1147,6 +1147,31 @@ describe('TtmlTextParser', () => {
         {startTime: 62.05, endTime: 3723.2});
   });
 
+  it('supports textCombine setting', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 62.05,
+            endTime: 3723.2,
+            payload: 'Test',
+            textCombineUpright: 'all',
+            writingMode: Cue.writingMode.VERTICAL_LEFT_TO_RIGHT,
+          },
+        ],
+        '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
+        '<layout>' +
+        '<region xml:id="subtitleArea" ' +
+        'tts:writingMode="tb" ' +
+        'tts:textCombine="all"/>' +
+        '</layout>' +
+        '<body region="subtitleArea"><div>' +
+        '<p begin="01:02.05" end="01:02:03.200">Test</p>' +
+        '</div></body></tt>',
+        {periodStart: 0, segmentStart: 60, segmentEnd: 3730, vttOffset: 0},
+        {startTime: 62.05, endTime: 3723.2, region: {id: 'subtitleArea'}},
+        {startTime: 62.05, endTime: 3723.2});
+  });
+
   it('disregards empty divs and ps', () => {
     verifyHelper(
         [
@@ -1238,6 +1263,35 @@ describe('TtmlTextParser', () => {
         });
   });
 
+  it('supports smpte:backgroundImage attribute with url', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 62.05,
+            endTime: 3723.2,
+            payload: '',
+          },
+        ],
+        '<tt ' +
+        'xmlns:ttm="http://www.w3.org/ns/ttml#metadata" ' +
+        'xmlns:smpte="http://www.smpte-ra.org/schemas/2052-1/2010/smpte-tt">' +
+        '<metadata>' +
+        '<smpte:image imageType="PNG" encoding="Base64" xml:id="img_0">' +
+        'base64EncodedImage</smpte:image>' +
+        '</metadata>' +
+        '<body><div smpte:backgroundImage="img_0.png">' +
+        '<p begin="01:02.05" end="01:02:03.200"></p>' +
+        '</div></body></tt>',
+        {periodStart: 0, segmentStart: 60, segmentEnd: 3730, vttOffset: 0},
+        {startTime: 62.05, endTime: 3723.2},
+        {
+          startTime: 62.05,
+          endTime: 3723.2,
+          backgroundImage: 'foo://bar/img_0.png',
+          isContainer: false,
+        });
+  });
+
   it('supports smpte:backgroundImage attribute in div element', () => {
     verifyHelper(
         [],
@@ -1286,6 +1340,33 @@ describe('TtmlTextParser', () => {
         {startTime: 62.05, endTime: 3723.2});
   });
 
+  it('supports tts:ruby', () => {
+    verifyHelper(
+        [{
+          startTime: 62.05,
+          endTime: 3723.2,
+          payload: '',
+          nestedCues: [{
+            startTime: 62.05,
+            endTime: 3723.2,
+            payload: 'Line1',
+          }, {
+            startTime: 62.05,
+            endTime: 3723.2,
+            payload: 'Line2',
+            rubyTag: 'rt',
+          }],
+          rubyTag: 'ruby',
+        }],
+        // With anonymous spans
+        '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling"><body><div>' +
+        '<p begin="01:02.05" end="01:02:03.200" tts:ruby="container">' +
+        '<span tts:ruby="base">Line1</span><span tts:ruby="text">Line2' +
+        '</span></p></div></body></tt>',
+        {periodStart: 0, segmentStart: 60, segmentEnd: 3730, vttOffset: 0},
+        {startTime: 62.05, endTime: 3723.2});
+  });
+
   it('inserts line breaks for <br> tags', () => {
     verifyHelper(
         [{
@@ -2060,7 +2141,8 @@ describe('TtmlTextParser', () => {
   function verifyHelper(cues, text, time, bodyProperties, divProperties) {
     const data =
         shaka.util.BufferUtils.toUint8(shaka.util.StringUtils.toUTF8(text));
-    const result = new shaka.text.TtmlTextParser().parseMedia(data, time);
+    const result = new shaka.text.TtmlTextParser()
+        .parseMedia(data, time, 'foo://bar');
     shaka.test.TtmlUtils.verifyHelper(
         cues, result, bodyProperties, divProperties);
   }
@@ -2087,7 +2169,8 @@ describe('TtmlTextParser', () => {
     expect(() => {
       new shaka.text.TtmlTextParser().parseMedia(
           shaka.util.BufferUtils.toUint8(data),
-          {periodStart: 0, segmentStart: 0, segmentEnd: 10, vttOffset: 0});
+          {periodStart: 0, segmentStart: 0, segmentEnd: 10, vttOffset: 0},
+          'foo://bar');
     }).toThrow(error);
   }
 });

package/test/text/vtt_text_parser_unit.js

@@ -646,6 +646,7 @@ describe('VttTextParser', () => {
             payload: 'Test',
             color: 'cyan',
             fontSize: '10px',
+            textCombineUpright: 'all',
             textShadow: textShadow,
           },
           {
@@ -654,6 +655,7 @@ describe('VttTextParser', () => {
             payload: 'Test2',
             color: 'cyan',
             fontSize: '10px',
+            textCombineUpright: 'all',
             textShadow: textShadow,
           },
         ],
@@ -663,6 +665,7 @@ describe('VttTextParser', () => {
         'color: cyan;\n'+
         'font-size: 10px;\n'+
         `text-shadow: ${textShadow};\n`+
+        'text-combine-upright: all;\n'+
         '}\n\n' +
         '00:00:20.000 --> 00:00:40.000\n' +
         'Test\n\n' +
@@ -761,16 +764,21 @@ describe('VttTextParser', () => {
               {
                 startTime: 50,
                 endTime: 60,
-                payload: 'Test',
-                fontWeight: Cue.fontWeight.BOLD,
-                fontStyle: Cue.fontStyle.NORMAL,
-              },
-              {
-                startTime: 50,
-                endTime: 60,
-                payload: '5',
+                payload: '',
                 fontWeight: Cue.fontWeight.BOLD,
-                fontStyle: Cue.fontStyle.ITALIC,
+                nestedCues: [
+                  {
+                    startTime: 50,
+                    endTime: 60,
+                    payload: 'Test',
+                  },
+                  {
+                    startTime: 50,
+                    endTime: 60,
+                    payload: '5',
+                    fontStyle: Cue.fontStyle.ITALIC,
+                  },
+                ],
               },
             ],
           },
@@ -801,16 +809,21 @@ describe('VttTextParser', () => {
               {
                 startTime: 80,
                 endTime: 90,
-                payload: 'Test ',
-                fontWeight: Cue.fontWeight.BOLD,
-                fontStyle: Cue.fontStyle.NORMAL,
-              },
-              {
-                startTime: 80,
-                endTime: 90,
-                payload: '7',
+                payload: '',
                 fontWeight: Cue.fontWeight.BOLD,
-                fontStyle: Cue.fontStyle.ITALIC,
+                nestedCues: [
+                  {
+                    startTime: 80,
+                    endTime: 90,
+                    payload: 'Test ',
+                  },
+                  {
+                    startTime: 80,
+                    endTime: 90,
+                    payload: '7',
+                    fontStyle: Cue.fontStyle.ITALIC,
+                  },
+                ],
               },
             ],
           },
@@ -903,6 +916,48 @@ describe('VttTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0});
   });
 
+  it('supports ruby html tags', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 20,
+            endTime: 40,
+            payload: '',
+            nestedCues: [
+              {
+                startTime: 20,
+                endTime: 40,
+                payload: '',
+                rubyTag: 'ruby',
+                nestedCues: [
+                  {
+                    startTime: 20,
+                    endTime: 40,
+                    payload: 'Test',
+                  },
+                  {
+                    startTime: 20,
+                    endTime: 40,
+                    payload: '2',
+                    rubyTag: 'rt',
+                  },
+                  {
+                    startTime: 20,
+                    endTime: 40,
+                    payload: '3',
+                    rubyTag: 'rp',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        'WEBVTT\n\n' +
+        '00:00:20.000 --> 00:00:40.000\n' +
+        '<ruby>Test<rt>2</rt><rp>3</rp></ruby>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0});
+  });
+
   it('supports only two digits in the timestamp', () => {
     verifyHelper(
         [
@@ -998,14 +1053,22 @@ describe('VttTextParser', () => {
               {
                 startTime: 70,
                 endTime: 80,
-                payload: 'Test5.1',
+                payload: '',
                 color: 'red',
-              },
-              {
-                startTime: 70,
-                endTime: 80,
-                payload: 'Test5.2',
-                color: 'lime',
+                nestedCues: [
+                  {
+                    startTime: 70,
+                    endTime: 80,
+                    payload: 'Test5.1',
+                    color: 'red',
+                  },
+                  {
+                    startTime: 70,
+                    endTime: 80,
+                    payload: 'Test5.2',
+                    color: 'lime',
+                  },
+                ],
               },
             ],
           },
@@ -1185,9 +1248,17 @@ describe('VttTextParser', () => {
               {
                 startTime: 10,
                 endTime: 20,
-                payload: '2',
+                payload: '',
                 color: 'magenta',
-                fontStyle: Cue.fontStyle.ITALIC,
+                nestedCues: [
+                  {
+                    startTime: 10,
+                    endTime: 20,
+                    payload: '2',
+                    color: 'magenta',
+                    fontStyle: Cue.fontStyle.ITALIC,
+                  },
+                ],
               },
             ],
           },
@@ -1255,13 +1326,14 @@ describe('VttTextParser', () => {
     parser.setSequenceMode(sequenceMode);
     const result = parser.parseMedia(data, time);
 
-    const expected = cues.map((cue) => {
+    const checkCue = (cue) => {
       if (cue.nestedCues) {
-        cue.nestedCues = cue.nestedCues.map(
-            (nestedCue) => jasmine.objectContaining(nestedCue));
+        cue.nestedCues = cue.nestedCues.map((nestedCue) => checkCue(nestedCue));
       }
       return jasmine.objectContaining(cue);
-    });
+    };
+
+    const expected = cues.map(checkCue);
     expect(result).toEqual(expected);
   }
 

package/test/transmuxer/transmuxer_engine_integration.js

@@ -56,5 +56,14 @@ describe('TransmuxerEngine', () => {
           ContentType.VIDEO, 'video/MP2T; codecs="avc1.420001"'))
           .toBe('video/mp4; codecs="avc1.420001"');
     });
+
+    it('converts legacy avc1 codec strings', () => {
+      expect(convertCodecs(
+          ContentType.VIDEO, 'video/mp2t; codecs="avc1.100.42"'))
+          .toBe('video/mp4; codecs="avc1.64002a"');
+      expect(convertCodecs(
+          ContentType.VIDEO, 'video/mp2t; codecs="avc1.66.1"'))
+          .toBe('video/mp4; codecs="avc1.420001"');
+    });
   });
 });

package/test/transmuxer/transmuxer_integration.js

@@ -4,7 +4,36 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-describe('Transmuxer Player', () => {
+/**
+ * For unknown reasons, these tests fail in the test labs for Edge on Windows,
+ * in ways that do not seem to be unrelated to transmuxers.
+ * Practical testing has not found any sign that playback is actually broken in
+ * Edge, so these tests are disabled on Edge for the time being.
+ * TODO(#5834): Remove this filter once the tests are fixed.
+ * @return {boolean}
+ */
+function checkNoBrokenEdge() {
+  const chromeVersion = shaka.util.Platform.chromeVersion();
+  if (shaka.util.Platform.isWindows() && shaka.util.Platform.isEdge() &&
+      chromeVersion && chromeVersion <= 118) {
+    // When the tests fail, it's due to the manifest parser failing to find a
+    // factory. Attempt to find a factory first, to avoid filtering the tests
+    // when running in a non-broken Edge environment.
+    const uri = 'fakeuri.m3u8';
+    const mimeType = 'application/x-mpegurl';
+    /* eslint-disable no-restricted-syntax */
+    try {
+      shaka.media.ManifestParser.getFactory(uri, mimeType);
+      return true;
+    } catch (error) {
+      return false;
+    }
+    /* eslint-enable no-restricted-syntax */
+  }
+  return true;
+}
+
+filterDescribe('Transmuxer Player', checkNoBrokenEdge, () => {
   const Util = shaka.test.Util;
 
   /** @type {!jasmine.Spy} */
@@ -73,7 +102,8 @@ describe('Transmuxer Player', () => {
 
   beforeEach(async () => {
     await shaka.test.TestScheme.createManifests(compiledShaka, '_compiled');
-    player = new compiledShaka.Player(video);
+    player = new compiledShaka.Player();
+    await player.attach(video);
 
     player.configure('mediaSource.forceTransmux', true);
     player.configure('streaming.useNativeHlsOnSafari', false);
@@ -161,7 +191,7 @@ describe('Transmuxer Player', () => {
         pending('Codec EC-3 is not supported by the platform.');
       }
 
-      await player.load('/base/test/test/assets/hls-raw-ac3/prog_index.m3u8');
+      await player.load('/base/test/test/assets/hls-raw-ec3/prog_index.m3u8');
       await video.play();
       expect(player.isLive()).toBe(false);
 
@@ -273,6 +303,33 @@ describe('Transmuxer Player', () => {
 
       await player.unload();
     });
+
+    it('H.265 in TS', async () => {
+      const chromeVersion = shaka.util.Platform.chromeVersion();
+      if (shaka.util.Platform.isWindows() &&
+          chromeVersion && chromeVersion === 117) {
+        // It appears that Chrome 117 beta in Windows is incorrectly reporting
+        // H.265 in MediaCapabilities
+        pending('Codec H.265 is not supported by the platform.');
+      }
+      const mimeType = 'video/mp4; codecs="hvc1.2.4.L123.B0"';
+      if (!MediaSource.isTypeSupported(mimeType)) {
+        pending('Codec H.265 is not supported by the platform.');
+      }
+      await player.load('/base/test/test/assets/hls-ts-h265/hevc.m3u8');
+      await video.play();
+      expect(player.isLive()).toBe(false);
+
+      // Wait for the video to start playback.  If it takes longer than 10
+      // seconds, fail the test.
+      await waiter.waitForMovementOrFailOnTimeout(video, 10);
+
+      // Play for 15 seconds, but stop early if the video ends.  If it takes
+      // longer than 45 seconds, fail the test.
+      await waiter.waitUntilPlayheadReachesOrFailOnTimeout(video, 15, 45);
+
+      await player.unload();
+    });
   });
 
   describe('for muxed content', () => {
@@ -292,5 +349,95 @@ describe('Transmuxer Player', () => {
 
       await player.unload();
     });
+
+    it('H.265+AAC in TS', async () => {
+      const chromeVersion = shaka.util.Platform.chromeVersion();
+      if (shaka.util.Platform.isWindows() &&
+          chromeVersion && chromeVersion === 117) {
+        // It appears that Chrome 117 beta in Windows is incorrectly reporting
+        // H.265 in MediaCapabilities
+        pending('Codec H.265 is not supported by the platform.');
+      }
+      if (!MediaSource.isTypeSupported('video/mp4; codecs="hvc1.1.6.L93.90"')) {
+        pending('Codec H.265 is not supported by the platform.');
+      }
+      // eslint-disable-next-line max-len
+      await player.load('/base/test/test/assets/hls-ts-muxed-aac-h265/media.m3u8');
+      await video.play();
+      expect(player.isLive()).toBe(false);
+
+      // Wait for the video to start playback.  If it takes longer than 10
+      // seconds, fail the test.
+      await waiter.waitForMovementOrFailOnTimeout(video, 10);
+
+      // Play for 15 seconds, but stop early if the video ends.  If it takes
+      // longer than 45 seconds, fail the test.
+      await waiter.waitUntilPlayheadReachesOrFailOnTimeout(video, 15, 45);
+
+      await player.unload();
+    });
+
+    it('H.264+MP3 in TS', async () => {
+      if (!MediaSource.isTypeSupported('audio/mp4; codecs="mp3"')) {
+        pending('Codec MP3 in MP4 is not supported by the platform.');
+      }
+
+      // eslint-disable-next-line max-len
+      await player.load('/base/test/test/assets/hls-ts-muxed-mp3-h264/index.m3u8');
+      await video.play();
+      expect(player.isLive()).toBe(false);
+
+      // Wait for the video to start playback.  If it takes longer than 10
+      // seconds, fail the test.
+      await waiter.waitForMovementOrFailOnTimeout(video, 10);
+
+      // Play for 15 seconds, but stop early if the video ends.  If it takes
+      // longer than 45 seconds, fail the test.
+      await waiter.waitUntilPlayheadReachesOrFailOnTimeout(video, 15, 45);
+
+      await player.unload();
+    });
+
+    it('H.264+AC3 in TS', async () => {
+      if (!isAc3Supported()) {
+        pending('Codec AC-3 is not supported by the platform.');
+      }
+
+      // eslint-disable-next-line max-len
+      await player.load('/base/test/test/assets/hls-ts-muxed-ac3-h264/media.m3u8');
+      await video.play();
+      expect(player.isLive()).toBe(false);
+
+      // Wait for the video to start playback.  If it takes longer than 10
+      // seconds, fail the test.
+      await waiter.waitForMovementOrFailOnTimeout(video, 10);
+
+      // Play for 15 seconds, but stop early if the video ends.  If it takes
+      // longer than 45 seconds, fail the test.
+      await waiter.waitUntilPlayheadReachesOrFailOnTimeout(video, 15, 45);
+
+      await player.unload();
+    });
+
+    it('H.264+EC3 in TS', async () => {
+      if (!isEc3Supported()) {
+        pending('Codec EC-3 is not supported by the platform.');
+      }
+
+      // eslint-disable-next-line max-len
+      await player.load('/base/test/test/assets/hls-ts-muxed-ec3-h264/prog_index.m3u8');
+      await video.play();
+      expect(player.isLive()).toBe(false);
+
+      // Wait for the video to start playback.  If it takes longer than 10
+      // seconds, fail the test.
+      await waiter.waitForMovementOrFailOnTimeout(video, 10);
+
+      // Play for 15 seconds, but stop early if the video ends.  If it takes
+      // longer than 45 seconds, fail the test.
+      await waiter.waitUntilPlayheadReachesOrFailOnTimeout(video, 15, 45);
+
+      await player.unload();
+    });
   });
 });

package/test/ui/ad_ui_unit.js

@@ -25,14 +25,14 @@ describe('Ad UI', () => {
     shaka.Player.setAdManagerFactory(() => new shaka.test.FakeAdManager());
   });
 
-  beforeEach(() => {
+  beforeEach(async () => {
     container =
       /** @type {!HTMLElement} */ (document.createElement('div'));
     document.body.appendChild(container);
 
     video = shaka.test.UiUtils.createVideoElement();
     container.appendChild(video);
-    UiUtils.createUIThroughAPI(container, video);
+    await UiUtils.createUIThroughAPI(container, video);
     adManager = video['ui'].getControls().getPlayer().getAdManager();
   });
 

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