From 9ffc111c497f90028d0d1f2662aa9e7563c9694f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= <alvaro.velad@mirada.tv>
Date: Mon, 17 May 2021 22:30:08 +0200
Subject: [PATCH] feat: Add align and vertical settings to WebVttGenerator
 (#3413)

---
 lib/text/web_vtt_generator.js       | 36 ++++++++++++++++++++++++++++-
 test/text/web_vtt_generator_unit.js | 27 ++++++++++++++++++----
 2 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/lib/text/web_vtt_generator.js b/lib/text/web_vtt_generator.js
index 17c722d9a6..800dae44b5 100644
--- a/lib/text/web_vtt_generator.js
+++ b/lib/text/web_vtt_generator.js
@@ -91,8 +91,42 @@ shaka.text.WebVttGenerator = class {
             (milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') : '') +
             milliseconds;
       };
+      const webvttSettings = (cue) => {
+        const settings = [];
+        const Cue = shaka.text.Cue;
+        switch (cue.textAlign) {
+          case Cue.textAlign.LEFT:
+            settings.push('align:left');
+            break;
+          case Cue.textAlign.RIGHT:
+            settings.push('align:right');
+            break;
+          case Cue.textAlign.CENTER:
+            settings.push('align:middle');
+            break;
+          case Cue.textAlign.START:
+            settings.push('align:start');
+            break;
+          case Cue.textAlign.END:
+            settings.push('align:end');
+            break;
+        }
+        switch (cue.writingMode) {
+          case Cue.writingMode.VERTICAL_LEFT_TO_RIGHT:
+            settings.push('vertical:lr');
+            break;
+          case Cue.writingMode.VERTICAL_RIGHT_TO_LEFT:
+            settings.push('vertical:rl');
+            break;
+        }
+
+        if (settings.length) {
+          return ' ' + settings.join(' ');
+        }
+        return '';
+      };
       webvttString += webvttTimeString(cue.startTime) + ' --> ' +
-          webvttTimeString(cue.endTime) + '\n';
+          webvttTimeString(cue.endTime) + webvttSettings(cue) + '\n';
       webvttString += cue.payload + '\n\n';
     }
     return webvttString;
diff --git a/test/text/web_vtt_generator_unit.js b/test/text/web_vtt_generator_unit.js
index 0a9453379f..184b72455d 100644
--- a/test/text/web_vtt_generator_unit.js
+++ b/test/text/web_vtt_generator_unit.js
@@ -14,18 +14,37 @@ describe('WebVttGenerator', () => {
 
   it('convert cues to WebVTT', () => {
     const shakaCue1 = new shaka.text.Cue(20, 40, 'Test');
+    shakaCue1.textAlign = shaka.text.Cue.textAlign.LEFT;
+    shakaCue1.writingMode = shaka.text.Cue.writingMode.VERTICAL_LEFT_TO_RIGHT;
     const shakaCue2 = new shaka.text.Cue(40, 50, 'Test2');
+    shakaCue2.textAlign = shaka.text.Cue.textAlign.RIGHT;
+    shakaCue2.writingMode = shaka.text.Cue.writingMode.VERTICAL_RIGHT_TO_LEFT;
+    const shakaCue3 = new shaka.text.Cue(50, 51, 'Test3');
+    shakaCue3.textAlign = shaka.text.Cue.textAlign.CENTER;
+    const shakaCue4 = new shaka.text.Cue(52, 53, 'Test4');
+    shakaCue4.textAlign = shaka.text.Cue.textAlign.START;
+    const shakaCue5 = new shaka.text.Cue(53, 54, 'Test5');
+    shakaCue5.textAlign = shaka.text.Cue.textAlign.END;
 
     verifyHelper(
         [
           shakaCue1,
           shakaCue2,
+          shakaCue3,
+          shakaCue4,
+          shakaCue5,
         ],
         'WEBVTT\n\n' +
-        '00:00:20.000 --> 00:00:40.000\n' +
+        '00:00:20.000 --> 00:00:40.000 align:left vertical:lr\n' +
         'Test\n\n' +
-        '00:00:40.000 --> 00:00:50.000\n' +
-        'Test2\n\n');
+        '00:00:40.000 --> 00:00:50.000 align:right vertical:rl\n' +
+        'Test2\n\n' +
+        '00:00:50.000 --> 00:00:51.000 align:middle\n' +
+        'Test3\n\n' +
+        '00:00:52.000 --> 00:00:53.000 align:start\n' +
+        'Test4\n\n' +
+        '00:00:53.000 --> 00:00:54.000 align:end\n' +
+        'Test5\n\n');
   });
 
   it('creates style tags for cues with underline/italics/bold', () => {
@@ -52,7 +71,7 @@ describe('WebVttGenerator', () => {
     verifyHelper(
         [shakaCue],
         'WEBVTT\n\n' +
-        '00:00:10.000 --> 00:00:20.000\n' +
+        '00:00:10.000 --> 00:00:20.000 align:middle\n' +
         '<i><u>Test1</u></i><b><i>Test2</i></b>Test3<u>Test4</u>\n\n');
   });