shaka-player 3.3.15 → 3.3.17

package/test/text/ui_text_displayer_unit.js

@@ -338,15 +338,13 @@ describe('UITextDisplayer', () => {
   it('hides and shows nested cues at appropriate times', () => {
     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);
+    parentCue1.nestedCues = [cue1, cue2, cue3];
 
     const parentCue2 = new shaka.text.Cue(90, 190, '');
     const cue4 = new shaka.text.Cue(90, 130, 'Four');
-    parentCue2.nestedCues.push(cue4);
+    parentCue2.nestedCues = [cue4];
 
     textDisplayer.setTextVisibility(true);
     textDisplayer.append([parentCue1, parentCue2]);
@@ -537,4 +535,74 @@ describe('UITextDisplayer', () => {
         '.shaka-text-region');
     expect(allRegionElements.length).toBe(1);
   });
+
+  it('creates separate regions when dimensions differ but id same', () => {
+    const identicalRegionId = 'regionId';
+
+    const cueRegion1 = new shaka.text.CueRegion();
+    const cueRegion2 = new shaka.text.CueRegion();
+    cueRegion1.id = identicalRegionId;
+    cueRegion2.id = identicalRegionId;
+
+    cueRegion1.height = 80;
+    cueRegion1.heightUnits = shaka.text.CueRegion.units.PERCENTAGE;
+    cueRegion1.width = 80;
+    cueRegion1.widthUnits = shaka.text.CueRegion.units.PERCENTAGE;
+
+    cueRegion2.height = 160; // the only difference!
+    cueRegion2.heightUnits = shaka.text.CueRegion.units.PERCENTAGE;
+    cueRegion2.width = 80;
+    cueRegion2.widthUnits = shaka.text.CueRegion.units.PERCENTAGE;
+
+    cueRegion1.viewportAnchorX = 10;
+    cueRegion1.viewportAnchorY = 10;
+    cueRegion1.viewportAnchorUnits = shaka.text.CueRegion.units.PERCENTAGE;
+
+    cueRegion2.viewportAnchorX = 10;
+    cueRegion2.viewportAnchorY = 10;
+    cueRegion2.viewportAnchorUnits = shaka.text.CueRegion.units.PERCENTAGE;
+
+    // These all attach to the same region, but only one region element should
+    // be created.
+    const firstBatchOfCues = [
+      new shaka.text.Cue(0, 100, ''),
+      new shaka.text.Cue(0, 100, ''),
+      new shaka.text.Cue(0, 100, ''),
+    ];
+    for (const cue of firstBatchOfCues) {
+      cue.displayAlign = shaka.text.Cue.displayAlign.CENTER;
+      cue.region = cueRegion1;
+    }
+
+    // Another batch for the other region
+    const secondBatchOfCues = [
+      new shaka.text.Cue(0, 100, ''),
+      new shaka.text.Cue(0, 100, ''),
+      new shaka.text.Cue(0, 100, ''),
+    ];
+    for (const cue of secondBatchOfCues) {
+      cue.displayAlign = shaka.text.Cue.displayAlign.CENTER;
+      cue.region = cueRegion2;
+    }
+
+    textDisplayer.setTextVisibility(true);
+    textDisplayer.append(firstBatchOfCues);
+    textDisplayer.append(secondBatchOfCues);
+    updateCaptions();
+
+    const textContainer = videoContainer.querySelector('.shaka-text-container');
+    const allRegionElements = textContainer.querySelectorAll(
+        '.shaka-text-region');
+
+    // Verify that the nested cues are attached to respective region element.
+    expect(allRegionElements.length).toBe(2);
+
+    const childrenOfOne = Array.from(allRegionElements[0].childNodes).filter(
+        (e) => e.nodeType == Node.ELEMENT_NODE);
+    expect(childrenOfOne.length).toBe(3);
+
+    const childrenOfTwo = Array.from(allRegionElements[1].childNodes).filter(
+        (e) => e.nodeType == Node.ELEMENT_NODE);
+    expect(childrenOfTwo.length).toBe(3);
+  });
 });

package/test/text/vtt_text_parser_unit.js

@@ -570,6 +570,7 @@ describe('VttTextParser', () => {
   });
 
   it('supports global style blocks', () => {
+    const textShadow = '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black';
     verifyHelper(
         [
           {
@@ -578,6 +579,7 @@ describe('VttTextParser', () => {
             payload: 'Test',
             color: 'cyan',
             fontSize: '10px',
+            textShadow: textShadow,
           },
           {
             startTime: 40,
@@ -585,6 +587,7 @@ describe('VttTextParser', () => {
             payload: 'Test2',
             color: 'cyan',
             fontSize: '10px',
+            textShadow: textShadow,
           },
         ],
         'WEBVTT\n\n' +
@@ -592,6 +595,7 @@ describe('VttTextParser', () => {
         '::cue {\n' +
         'color: cyan;\n'+
         'font-size: 10px;\n'+
+        `text-shadow: ${textShadow};\n`+
         '}\n\n' +
         '00:00:20.000 --> 00:00:40.000\n' +
         'Test\n\n' +
@@ -769,6 +773,17 @@ describe('VttTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 
+  it('support escaped html payload', () => {
+    verifyHelper(
+        [
+          {startTime: 20.1, endTime: 40.505, payload: '"Test & 1"\u{a0}'},
+        ],
+        'WEBVTT\n\n' +
+        '00:00:20.100 --> 00:00:40.505\n' +
+        '"Test & 1" ',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0});
+  });
+
   it('supports specific style blocks', () => {
     verifyHelper(
         [
@@ -906,25 +921,32 @@ describe('VttTextParser', () => {
           {
             startTime: 80,
             endTime: 90,
-            payload: '<b><c.lime>Parse fail 1</b></c>',
+            payload: '<b><c.lime>Parse fail 1</b></c.lime>',
             nestedCues: [],
           },
           {
             startTime: 90,
             endTime: 100,
-            payload: '<c.lime><b>Parse fail 2</c></b>',
+            payload: '<c.lime><b>Parse fail 2</c.lime></b>',
             nestedCues: [],
           },
           {
             startTime: 100,
             endTime: 110,
-            payload: '<c.lime>forward slash 1/2 in text</c>',
-            nestedCues: [],
+            payload: '',
+            nestedCues: [
+              {
+                startTime: 100,
+                endTime: 110,
+                payload: 'forward slash 1/2 in text',
+                color: '#0F0',
+              },
+            ],
           },
           {
             startTime: 110,
             endTime: 120,
-            payload: '<c.lime>less or more < > in text</c>',
+            payload: '<c.lime>less or more < > in text</c.lime>',
             nestedCues: [],
           },
         ],
@@ -950,6 +972,53 @@ describe('VttTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 
+  it('supports voice style blocks', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 20,
+            endTime: 40,
+            payload: '',
+            nestedCues: [
+              {
+                startTime: 20,
+                endTime: 40,
+                payload: 'Test',
+                color: 'cyan',
+              },
+            ],
+          },
+          {
+            startTime: 40,
+            endTime: 50,
+            payload: '',
+            nestedCues: [
+              {
+                startTime: 40,
+                endTime: 50,
+                payload: 'Test',
+                color: 'red',
+              },
+              {
+                startTime: 40,
+                endTime: 50,
+                payload: '2',
+                fontStyle: Cue.fontStyle.ITALIC,
+              },
+            ],
+          },
+        ],
+        'WEBVTT\n\n' +
+        'STYLE\n' +
+        '::cue(v[voice="Shaka"]) { color: cyan; }\n' +
+        '::cue(v[voice=ShakaBis]) { color: red; }\n\n' +
+        '00:00:20.000 --> 00:00:40.000\n' +
+        '<v Shaka>Test\n\n' +
+        '00:00:40.000 --> 00:00:50.000\n' +
+        '<v ShakaBis>Test</v><i>2</i>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0});
+  });
+
   it('supports default color overriding', () => {
     verifyHelper(
         [
@@ -970,12 +1039,64 @@ describe('VttTextParser', () => {
         ],
         'WEBVTT\n\n' +
         'STYLE\n' +
-        '::cue(bg_blue) { font-size: 10px; background-color: #FF0 }\n\n' +
+        '::cue(.bg_blue) { font-size: 10px; background-color: #FF0 }\n\n' +
         '00:00:10.000 --> 00:00:20.000\n' +
         '<c.red.bg_blue>Example 1</c>\n\n',
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 
+  // https://github.com/shaka-project/shaka-player/issues/4479
+  it('keep styles when there are line breaks', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 10, endTime: 20,
+            payload: '',
+            nestedCues: [
+              {
+                startTime: 10,
+                endTime: 20,
+                payload: '1',
+                color: '#F0F',
+              },
+              {
+                startTime: 10,
+                endTime: 20,
+                payload: '',
+                lineBreak: true,
+              },
+              {
+                startTime: 10,
+                endTime: 20,
+                payload: '2',
+                color: '#F0F',
+                fontStyle: Cue.fontStyle.ITALIC,
+              },
+            ],
+          },
+        ],
+        'WEBVTT\n\n' +
+        '00:00:10.000 --> 00:00:20.000\n' +
+        '<c.magenta>1</c><br/><c.magenta><i>2</i></c>\n\n',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0});
+  });
+
+  it('does not fail on REGION blocks', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 10, endTime: 20,
+            payload: 'test',
+          },
+        ],
+        'WEBVTT\n\n' +
+        'REGION\n' +
+        'id:1\n\n' +
+        '00:00:10.000 --> 00:00:20.000\n' +
+        'test\n\n',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0});
+  });
+
   /**
    * @param {!Array} cues
    * @param {string} text