shaka-player 4.3.2 → 4.3.4

package/test/text/vtt_text_parser_unit.js

@@ -852,11 +852,11 @@ describe('VttTextParser', () => {
   it('support escaped html payload', () => {
     verifyHelper(
         [
-          {startTime: 20.1, endTime: 40.505, payload: '"Test & 1"'},
+          {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"',
+        '"Test & 1" ',
         {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0});
   });
 
@@ -997,25 +997,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: [],
           },
         ],
@@ -1067,6 +1074,53 @@ describe('VttTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 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(
         [
@@ -1087,12 +1141,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, vttOffset: 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

package/test/text/web_vtt_layout_integration.js

@@ -0,0 +1,528 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+filterDescribe('WebVTT layout', shaka.test.TextLayoutTests.supported, () => {
+  /** @type {shaka.test.TextLayoutTests} */
+  let helper;
+
+  describe('using UI', () => {
+    beforeAll(async () => {
+      helper = new shaka.test.DomTextLayoutTests('webvtt-ui');
+
+      await helper.beforeAll();
+    });
+
+    beforeEach(async () => {
+      await helper.beforeEach();
+    });
+
+    afterEach(async () => {
+      await helper.afterEach();
+    });
+
+    afterAll(async () => {
+      await helper.afterAll();
+    });
+
+    defineTests();
+  });
+
+  describe('using browser-native rendering', () => {
+    beforeAll(async () => {
+      helper = new shaka.test.NativeTextLayoutTests('webvtt-native');
+
+      await helper.beforeAll();
+    });
+
+    beforeEach(async () => {
+      await helper.beforeEach();
+    });
+
+    afterEach(async () => {
+      await helper.afterEach();
+    });
+
+    afterAll(async () => {
+      await helper.afterAll();
+    });
+
+    defineTests();
+  });
+
+  function defineTests() {
+    // The initial set of tests here were a subset of the official test suite:
+    // https://github.com/web-platform-tests/wpt/tree/master/webvtt/rendering/cues-with-video/processing-model
+
+    it('align center', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:center\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-center');
+    });
+
+    // FIXME: UI version is slightly wrong: black background should hug text
+    it('align center long', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:center\n',
+        'This is a test subtitle that most likely will span over several ',
+        'rows since it is a pretty long cue with a lot of text.\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-center-long');
+    });
+
+    it('align center position 50%', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:center position:50%\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-center-position-50');
+    });
+
+    // FIXME: UI version is wrong: not positioned on the right
+    it('align center position 90%', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:center position:90%\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-center-position-90');
+    });
+
+    // FIXME: UI version is wrong: not positioned on the left
+    it('align center position 10%', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:center position:10%\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-center-position-10');
+    });
+
+    // FIXME: UI version is wrong: not positioned on the left
+    it('align center position 10% size 10%', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:center position:10% size:10%\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-center-position-10-size-10');
+    });
+
+    // FIXME: UI version is wrong: not positioned on the right
+    it('align end', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:end\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-end');
+    });
+
+    // FIXME: UI version is slightly wrong: black background should hug text
+    it('align end long', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:end\n',
+        'This is a test subtitle that most likely will span over several ',
+        'rows since it is a pretty long cue with a lot of text.\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-end-long');
+    });
+
+    // FIXME: UI version is wrong: not positioned on the left
+    it('align start', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:start\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-start');
+    });
+
+    // FIXME: UI version is slightly wrong: black background should hug text
+    it('align start long', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:start\n',
+        'This is a test subtitle that most likely will span over several ',
+        'rows since it is a pretty long cue with a lot of text.\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-start-long');
+    });
+
+    // FIXME: both versions are wrong, top-left corner should be centered
+    it('align with position and line', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 ', // continued on next line
+        'align:start position:50%,line-left line:50%,start\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('align-position-line');
+    });
+
+    it('size 50%', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 size:50%\n',
+        'This is a test subtitle that should wrap no matter what\n',
+      ].join(''));
+
+      await helper.checkScreenshot('size-50');
+    });
+
+    // FIXME: UI version is wrong: not positioned by line
+    it('line -2', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 line:-2\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('line-negative-2');
+    });
+
+    // FIXME: UI version is wrong: not positioned by line
+    it('line 0', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 line:0\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('line-0');
+    });
+
+    // FIXME: UI version is wrong: not positioned by line
+    it('line 1', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 line:1\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('line-1');
+    });
+
+    it('line 50%', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 line:50%\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('line-50');
+    });
+
+    // Regression case for http://b/259121343
+    // The top center of the cue box should be 85% from the top and
+    // horizontally centered.
+    // NOTE: The native version is wrong on Chrome and Edge due to layout bugs
+    // in Chrome.  https://crbug.com/1411464
+    it('align to bottom center with restricted size', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 ', // continued on next line
+        'line:85% position:50% size:63%\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('line-85-position-50-size-63');
+    });
+
+    // FIXME: UI version is slightly wrong: gaps between lines when bold
+    it('bold long', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:start\n',
+        '<b>This is a test subtitle that most likely will span over several ',
+        'rows since it is a pretty long cue with a lot of text.</b>\n',
+      ].join(''));
+
+      await helper.checkScreenshot('bold-long');
+    });
+
+    // FIXME: UI version is slightly wrong: gaps between lines when italic
+    it('italic long', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:start\n',
+        '<i>This is a test subtitle that most likely will span over several ',
+        'rows since it is a pretty long cue with a lot of text.</i>\n',
+      ].join(''));
+
+      await helper.checkScreenshot('italic-long');
+    });
+
+    // FIXME: UI version is slightly wrong: gaps between lines when italic
+    it('underline long', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 align:start\n',
+        '<u>This is a test subtitle that most likely will span over several ',
+        'rows since it is a pretty long cue with a lot of text.</u>\n',
+      ].join(''));
+
+      await helper.checkScreenshot('underline-long');
+    });
+
+    it('escaped entities', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000\n',
+        'Here are the escaped entities: &amp; &lt; &gt; &lrm; &rlm; &nbsp;\n',
+      ].join(''));
+
+      await helper.checkScreenshot('escaped-entities');
+    });
+
+    it('white spaces', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000\n',
+        // eslint-disable-next-line no-tabs
+        'A A  A   A	A		A\n',
+      ].join(''));
+
+      await helper.checkScreenshot('white-spaces');
+    });
+
+    it('embedded styles', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        'STYLE\n',
+        '*|*::cue(b) {\n',
+        '  background: blue;\n',
+        '}\n',
+        '|*::cue(i) {\n',
+        '  color: blue;\n',
+        '}\n',
+        '::cue(i) {\n',
+        '  background: white;\n',
+        '}\n',
+        '*::cue(b) {\n',
+        '  color: white;\n',
+        '}\n',
+        '::cue {\n',
+        '  font-size: 30px;\n',
+        '}\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000\n',
+        'This <i>is</i> a <b>test</b> subtitle\n',
+      ].join(''));
+
+      await helper.checkScreenshot('embedded-styles');
+    });
+
+    it('voices', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000\n',
+        'This is a <v foo>test subtitle</v>, <v bar>test subtitle</v>\n',
+      ].join(''));
+
+      await helper.checkScreenshot('voices');
+    });
+
+    it('voices with styles', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        'STYLE\n',
+        '::cue(v[voice=foo]) {\n',
+        '  background: blue;\n',
+        '}\n',
+        '::cue(v[voice=bar]) {\n',
+        '  background: red;\n',
+        '}\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000\n',
+        'This is a <v foo>test subtitle</v>, <v bar>test subtitle</v>\n',
+      ].join(''));
+
+      await helper.checkScreenshot('voices-with-styles');
+    });
+
+    it('classes', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000\n',
+        'This is a <c.foo>test subtitle</c>, <c.bar>test subtitle</c>\n',
+      ].join(''));
+
+      await helper.checkScreenshot('classes');
+    });
+
+    it('classes with styles', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        'STYLE\n',
+        '::cue(.foo) {\n',
+        '  background: blue;\n',
+        '}\n',
+        '::cue(.bar) {\n',
+        '  background: red;\n',
+        '}\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000\n',
+        'This is a <c.foo>test subtitle</c>, <c.bar>test subtitle</c>\n',
+      ].join(''));
+
+      await helper.checkScreenshot('classes-with-styles');
+    });
+
+    // FIXME: regions not supported
+    it('region without anchors', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        'REGION\n',
+        'id:1\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 region:1\n',
+        'This is a test subtitle\n',
+      ].join(''));
+
+      await helper.checkScreenshot('region-no-anchors');
+    });
+
+    // FIXME: regions not supported
+    it('region anchored at top center', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        'REGION\n',
+        'id:1\n',
+        'regionanchor:50%,0%\n',
+        'viewportanchor:50%,0%\n',
+        'width:100%\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 region:1\n',
+        'This is a test subtitle\n',
+      ].join(''));
+
+      await helper.checkScreenshot('region-anchor-top-center');
+    });
+
+    // FIXME: regions not supported
+    it('region anchored at top left', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        'REGION\n',
+        'id:1\n',
+        'regionanchor:0%,0%\n',
+        'viewportanchor:0%,0%\n',
+        'width:100%\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 region:1\n',
+        'This is a test subtitle\n',
+      ].join(''));
+
+      await helper.checkScreenshot('region-anchor-top-left');
+    });
+
+    // FIXME: regions not supported
+    it('region with complex anchors', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        'REGION\n',
+        'id:1\n',
+        'regionanchor:0%,100%\n',
+        'viewportanchor:50%,50%\n',
+        'width:30%\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 region:1\n',
+        'This is a test subtitle\n',
+      ].join(''));
+
+      await helper.checkScreenshot('region-complex-anchors');
+    });
+
+    // FIXME: regions not supported
+    it('region 2 lines scroll up', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        'REGION\n',
+        'id:1\n',
+        'regionanchor:50%,0%\n',
+        'viewportanchor:50%,0%\n',
+        'width:100%\n',
+        'lines:2\n',
+        'scroll:up\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 region:1\n',
+        'This is a first test subtitle\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 region:1\n',
+        'This is a second test subtitle\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 region:1\n',
+        'This is a third test subtitle\n',
+      ].join(''));
+
+      await helper.checkScreenshot('region-2-lines-scroll-up');
+    });
+  }
+
+  /** @param {string} text */
+  function parseAndDisplay(text) {
+    const data =
+        shaka.util.BufferUtils.toUint8(shaka.util.StringUtils.toUTF8(text));
+    const time = {
+      periodStart: 0,
+      segmentStart: 0,
+      segmentEnd: 100,
+      vttOffset: 0,
+    };
+    const textParser = new shaka.text.VttTextParser();
+    const cues = textParser.parseMedia(data, time);
+    helper.textDisplayer.append(cues);
+  }
+});