feat(WebVTT): Add support to ruby, rt, rp html tags (#5642)

Related to #2853
shaka-project · Sep 12, 2023 · 76ffd38 · 76ffd38
1 parent eed393f
commit 76ffd38
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 0 deletions.
diff --git a/lib/text/cue.js b/lib/text/cue.js
@@ -299,6 +299,14 @@ shaka.text.Cue = class {
      */
     this.lineBreak = false;
 
+    /**
+     * Used to indicate the type of ruby tag that should be used when rendering
+     * the cue. Valid values: ruby, rp, rt.
+     * @type {?string}
+     * @exportDoc
+     */
+    this.rubyTag = null;
+
     /**
      * The number of horizontal and vertical cells into which the Root Container
      * Region area is divided.

diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js
@@ -452,6 +452,9 @@ shaka.text.UITextDisplayer = class {
     if (cue.lineBreak) {
       type = 'br';
     }
+    if (cue.rubyTag) {
+      type = cue.rubyTag;
+    }
 
     const needWrapper = !isNested && cue.nestedCues.length > 0;
 

diff --git a/lib/text/vtt_text_parser.js b/lib/text/vtt_text_parser.js
@@ -676,6 +676,7 @@ shaka.text.VttTextParser = class {
     cue.fontWeight = refCue.fontWeight;
     cue.fontStyle = refCue.fontStyle;
     cue.opacity = refCue.opacity;
+    cue.rubyTag = refCue.rubyTag;
     cue.textCombineUpright = refCue.textCombineUpright;
     cue.textShadow = refCue.textShadow;
     cue.wrapLine = refCue.wrapLine;
@@ -747,6 +748,11 @@ shaka.text.VttTextParser = class {
             }
             break;
           }
+          case 'ruby':
+          case 'rp':
+          case 'rt':
+            nestedCue.rubyTag = tag;
+            break;
           default:
             break;
         }

diff --git a/test/text/vtt_text_parser_unit.js b/test/text/vtt_text_parser_unit.js
@@ -921,6 +921,41 @@ 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: 'Test',
+                rubyTag: 'ruby',
+              },
+              {
+                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(
         [