shaka-player 3.1.0 → 3.1.4

package/test/text/ui_text_displayer_unit.js

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-goog.require('shaka.test.UiUtils');
 goog.require('shaka.test.Util');
 goog.require('shaka.text.Cue');
 goog.require('shaka.text.UITextDisplayer');
@@ -51,8 +50,7 @@ describe('UITextDisplayer', () => {
       /** @type {!HTMLElement} */ (document.createElement('div'));
     videoContainer.style.height = `${videoContainerHeight}px`;
     document.body.appendChild(videoContainer);
-    video = shaka.test.UiUtils.createVideoElement();
-    videoContainer.appendChild(video);
+    video = new shaka.test.FakeVideo();
   });
 
   beforeEach(() => {
@@ -86,19 +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');
+    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',
     };
 
@@ -115,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 () => {
@@ -138,14 +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 captions = textContainer.querySelector('span');
+    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,9 +189,8 @@ describe('UITextDisplayer', () => {
     // style.
     const expectedLinePadding = '11.25px';
 
-    const textContainer =
-        videoContainer.querySelector('.shaka-text-container');
-    const captions = textContainer.querySelector('span');
+    const textContainer = videoContainer.querySelector('.shaka-text-container');
+    const captions = textContainer.querySelector('div');
     const cssObj = parseCssText(captions.style.cssText);
     expect(cssObj).toEqual(
         jasmine.objectContaining({
@@ -221,9 +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');
+    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}));
@@ -316,4 +312,85 @@ describe('UITextDisplayer', () => {
     // duplicates.
     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');
+    parentCue1.nestedCues.push(cue1);
+    const cue2 = new shaka.text.Cue(25, 75, 'Two');
+    parentCue1.nestedCues.push(cue2);
+    const cue3 = new shaka.text.Cue(50, 100, 'Three');
+    parentCue1.nestedCues.push(cue3);
+
+    const parentCue2 = new shaka.text.Cue(90, 190, '');
+    const cue4 = new shaka.text.Cue(90, 130, 'Four');
+    parentCue2.nestedCues.push(cue4);
+
+    textDisplayer.setTextVisibility(true);
+    textDisplayer.append([parentCue1, parentCue2]);
+
+    video.currentTime = 10;
+    await shaka.test.Util.delay(0.5);
+    /** @type {Element} */
+    const textContainer = videoContainer.querySelector('.shaka-text-container');
+    let parentCueElements = textContainer.querySelectorAll('div');
+
+    expect(parentCueElements.length).toBe(1);
+    expect(parentCueElements[0].textContent).toBe('One');
+
+    video.currentTime = 35;
+    await shaka.test.Util.delay(0.5);
+    parentCueElements = textContainer.querySelectorAll('div');
+    expect(parentCueElements.length).toBe(1);
+    expect(parentCueElements[0].textContent).toBe('OneTwo');
+
+    video.currentTime = 60;
+    await shaka.test.Util.delay(0.5);
+    parentCueElements = textContainer.querySelectorAll('div');
+    expect(parentCueElements.length).toBe(1);
+    expect(parentCueElements[0].textContent).toBe('TwoThree');
+
+    video.currentTime = 85;
+    await shaka.test.Util.delay(0.5);
+    parentCueElements = textContainer.querySelectorAll('div');
+    expect(parentCueElements.length).toBe(1);
+    expect(parentCueElements[0].textContent).toBe('Three');
+
+    video.currentTime = 95;
+    await shaka.test.Util.delay(0.5);
+    parentCueElements = textContainer.querySelectorAll('div');
+    expect(parentCueElements.length).toBe(2);
+    expect(parentCueElements[0].textContent).toBe('Three');
+    expect(parentCueElements[1].textContent).toBe('Four');
+
+    video.currentTime = 105;
+    await shaka.test.Util.delay(0.5);
+    parentCueElements = textContainer.querySelectorAll('div');
+    expect(parentCueElements.length).toBe(1);
+    expect(parentCueElements[0].textContent).toBe('Four');
+
+    video.currentTime = 150;
+    await shaka.test.Util.delay(0.5);
+    parentCueElements = textContainer.querySelectorAll('div');
+    expect(parentCueElements.length).toBe(1);
+    expect(parentCueElements[0].textContent).toBe('');
+  });
 });

package/test/text/vtt_text_parser_unit.js

@@ -924,6 +924,18 @@ describe('VttTextParser', () => {
             payload: '<c.lime><b>Parse fail 2</c></b>',
             nestedCues: [],
           },
+          {
+            startTime: 100,
+            endTime: 110,
+            payload: '<c.lime>forward slash 1/2 in text</c>',
+            nestedCues: [],
+          },
+          {
+            startTime: 110,
+            endTime: 120,
+            payload: '<c.lime>less or more < > in text</c>',
+            nestedCues: [],
+          },
         ],
         'WEBVTT\n\n' +
         '00:00:20.000 --> 00:00:40.000\n' +
@@ -939,7 +951,11 @@ describe('VttTextParser', () => {
         '00:01:20.000 --> 00:01:30.000\n' +
         '<b><c.lime>Parse fail 1</b></c>\n\n' +
         '00:01:30.000 --> 00:01:40.000\n' +
-        '<c.lime><b>Parse fail 2</c></b>',
+        '<c.lime><b>Parse fail 2</c></b>\n\n' +
+        '00:01:40.000 --> 00:01:50.000\n' +
+        '<c.lime>forward slash 1/2 in text</c>\n\n' +
+        '00:01:50.000 --> 00:02:00.000\n' +
+        '<c.lime>less or more < > in text</c>',
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 

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');
@@ -299,6 +301,31 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
       await checkScreenshot(prefix, 'two-nested-cues');
     });
 
+    // Distinct from "newline" test above, which has a literal \n character in
+    // the text payload.  This uses a nested "lineBreak" cue, which is what you
+    // get with <br> in TTML.
+    it('nested cues with linebreak', async () => {
+      const cue = new shaka.text.Cue(0, 1, '');
+      cue.nestedCues = [
+        new shaka.text.Cue(0, 1, 'Captain\'s log,'),
+        shaka.text.Cue.lineBreak(0, 1),
+        new shaka.text.Cue(0, 1, 'stardate 41636.9'),
+      ];
+      textDisplayer.append([cue]);
+
+      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(
@@ -316,6 +343,30 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
       await checkScreenshot(prefix, 'region-position');
     });
 
+    // Regression test for #3379, in which the displayAlign was not respected,
+    // placing text at the top of the region instead of the bottom.
+    it('region with display alignment', async () => {
+      const cue = new shaka.text.Cue(0, 1, '');
+
+      cue.region.id = '1';
+      cue.region.viewportAnchorX = 10;
+      cue.region.viewportAnchorY = 10;
+      cue.region.width = 80;
+      cue.region.height = 80;
+
+      cue.positionAlign = shaka.text.Cue.positionAlign.CENTER;
+      cue.lineAlign = shaka.text.Cue.lineAlign.CENTER;
+      cue.displayAlign = shaka.text.Cue.displayAlign.AFTER;
+
+      cue.nestedCues = [
+        // For those who don't speak Unicode, \xbf is an upside down "?".
+        new shaka.text.Cue(0, 1, '\xbfBien?'),
+      ];
+      textDisplayer.append([cue]);
+
+      await checkScreenshot(prefix, 'region-with-display-alignment');
+    });
+
     // Regression test for #2188
     it('bitmap-based cues', async () => {
       const cue = new shaka.text.Cue(0, 1, '');

package/test/ui/ui_unit.js

@@ -196,6 +196,10 @@ describe('UI', () => {
     });
 
     it('goes into fullscreen on double click', async () => {
+      if (!document.fullscreenEnabled) {
+        pending('This test requires fullscreen support, which is unavailable.');
+      }
+
       const config = {
         controlPanelElements: [
           'overflow_menu',

package/test/util/mp4_box_parsers_unit.js

@@ -149,4 +149,32 @@ describe('Mp4BoxParsers', () => {
     expect(defaultSampleDuration).toBe(expectedDefaultSampleDuration);
     expect(baseMediaDecodeTime).toBe(expectedBaseMediaDecodeTime);
   });
+
+  /**
+   * Test on parsing an incomplete TKHD V1 box, since the parser doesn't
+   * parse the other fields
+   *
+   * Explanation on the Uint8Array:
+   * [
+   * <creation_time, 8 bytes>,
+   * <modification_time, 8 bytes>,
+   * <track_id, 4 bytes>
+   * ]
+   *
+   * Time is a 32B integer expressed in seconds since Jan 1, 1904, 0000 UTC
+   *
+   */
+  it('parses TKHD v1 box', () => {
+    const tkhdBox = new Uint8Array([
+      0x00, 0x00, 0x00, 0x00, 0xDC, 0xBF, 0x0F, 0xD7, // Creation time
+      0x00, 0x00, 0x00, 0x00, 0xDC, 0xBF, 0x0F, 0xD7, // Modification time
+      0x00, 0x00, 0x00, 0x01, // Track ID
+      // Remaining fields are not processed in parseTKHD()
+    ]);
+    const reader = new shaka.util.DataViewReader(
+        tkhdBox, shaka.util.DataViewReader.Endianness.BIG_ENDIAN);
+    const parsedTkhd = shaka.util.Mp4BoxParsers
+        .parseTKHD(reader, /* version= */ 1);
+    expect(parsedTkhd.trackId).toBe(1);
+  });
 });