fix(text): Made nested cues inherit region (#3837)

Closes #3743
shaka-project · Jan 12, 2022 · 3ff48cb · 3ff48cb
1 parent 922778a
commit 3ff48cb
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 6 deletions.
diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
@@ -154,7 +154,7 @@ shaka.text.TtmlTextParser = class {
             const cue = TtmlTextParser.parseCue_(
                 p, time.periodStart, rateInfo, metadataElements, styles,
                 regionElements, cueRegions, whitespaceTrim,
-                /* isNested= */ false, cellResolutionInfo);
+                cellResolutionInfo, /* parentCueElement= */ null);
             if (cue) {
               cues.push(cue);
             }
@@ -164,7 +164,7 @@ shaka.text.TtmlTextParser = class {
           const cue = TtmlTextParser.parseCue_(
               div, time.periodStart, rateInfo, metadataElements, styles,
               regionElements, cueRegions, whitespaceTrim,
-              /* isNested= */ false, cellResolutionInfo);
+              cellResolutionInfo, /* parentCueElement= */ null);
           if (cue) {
             cues.push(cue);
           }
@@ -186,14 +186,14 @@ shaka.text.TtmlTextParser = class {
    * @param {!Array.<!Element>} regionElements
    * @param {!Array.<!shaka.text.CueRegion>} cueRegions
    * @param {boolean} whitespaceTrim
-   * @param {boolean} isNested
    * @param {?{columns: number, rows: number}} cellResolution
+   * @param {?Element} parentCueElement
    * @return {shaka.text.Cue}
    * @private
    */
   static parseCue_(
       cueNode, offset, rateInfo, metadataElements, styles, regionElements,
-      cueRegions, whitespaceTrim, isNested, cellResolution) {
+      cueRegions, whitespaceTrim, cellResolution, parentCueElement) {
     /** @type {Element} */
     let cueElement;
     /** @type {Element} */
@@ -243,8 +243,8 @@ shaka.text.TtmlTextParser = class {
             regionElements,
             cueRegions,
             localWhitespaceTrim,
-            /* isNested= */ true,
             cellResolution,
+            cueElement,
         );
 
         // This node may or may not generate a nested cue.
@@ -254,6 +254,8 @@ shaka.text.TtmlTextParser = class {
       }
     }
 
+    const isNested = /** @type {boolean} */(parentCueElement != null);
+
     // In this regex, "\S" means "non-whitespace character".
     const hasTextContent = /\S/.test(cueElement.textContent);
     const hasTimeAttributes =
@@ -358,10 +360,19 @@ shaka.text.TtmlTextParser = class {
 
     const isLeaf = nestedCues.length == 0;
 
+    let regionElementForStyle = regionElement;
+    if (parentCueElement && isNested && !cueElement.getAttribute('region') &&
+      !cueElement.getAttribute('style')) {
+      regionElementForStyle =
+          shaka.text.TtmlTextParser.getElementsFromCollection_(
+              parentCueElement, 'region', regionElements, /* prefix= */ '')[0];
+    }
+
+
     shaka.text.TtmlTextParser.addStyle_(
         cue,
         cueElement,
-        regionElement,
+        regionElementForStyle,
         imageElement,
         styles,
         isNested,

diff --git a/test/text/ttml_text_parser_unit.js b/test/text/ttml_text_parser_unit.js
@@ -1702,6 +1702,66 @@ describe('TtmlTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 
+  // Regression test for https://github.com/google/shaka-player/issues/3743
+  it('inherits styles from other styles on nestedCues', () => {
+    verifyHelper(
+        [
+          {
+            // p element
+            startTime: 0,
+            endTime: 60,
+            payload: '',
+            fontSize: '',
+            nestedCues: [
+              {
+                startTime: 0,
+                endTime: 60,
+                payload: 'A',
+                fontSize: '16px',
+              },
+              {
+                startTime: 0,
+                endTime: 60,
+                payload: '',
+                fontSize: '',
+              },
+              {
+                startTime: 0,
+                endTime: 60,
+                payload: 'B',
+                fontSize: '16px',
+              },
+            ],
+          },
+        ],
+        '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
+        '<head>' +
+        '  <styling>' +
+        '   <style tts:backgroundColor="rgba(0,0,0,100)" ' +
+        '          tts:displayAlign="center" ' +
+        '          tts:extent="80% 10%" ' +
+        '          tts:fontFamily="proportionalSansSerif" ' +
+        '          tts:fontSize="16px" ' +
+        '          tts:origin="10% 85%" ' +
+        '          tts:textAlign="center" ' +
+        '          xml:id="backgroundStyle"/>' +
+        '   <style style="backgroundStyle" ' +
+        '          tts:backgroundColor="transparent" ' +
+        '          tts:color="white" ' +
+        '          xml:id="speakerStyle"/>' +
+        '  </styling>' +
+        '  <layout>' +
+        '    <region style="speakerStyle" tts:zIndex="1" xml:id="speaker"/>' +
+        '  </layout>' +
+        '</head>' +
+        '<body><div>' +
+        '  <p begin="00:00" end="01:00" region="speaker">' +
+        '    A<br/>B' +
+        '  </p>' +
+        '</div></body></tt>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0});
+  });
+
   /**
    * @param {!Array} cues
    * @param {string} text