feat: enable caption positioning (#1408)

package.json

@@ -63,7 +63,7 @@
     "global": "^4.4.0",
     "m3u8-parser": "^7.0.0",
     "mpd-parser": "^1.1.1",
-    "mux.js": "6.3.0",
+    "mux.js": "7.0.0",
     "video.js": "^7 || ^8"
   },
   "peerDependencies": {

src/util/text-tracks.js

@@ -82,11 +82,31 @@ export const addCaptionData = function({
   captionArray.forEach((caption) => {
     const track = caption.stream;
 
-    inbandTextTracks[track].addCue(new Cue(
-      caption.startTime + timestampOffset,
-      caption.endTime + timestampOffset,
-      caption.text
-    ));
+    // in CEA 608 captions, video.js/mux.js sends a content array
+    // with positioning data
+    if (caption.content) {
+      caption.content.forEach((value) => {
+        const cue = new Cue(
+          caption.startTime + timestampOffset,
+          caption.endTime + timestampOffset,
+          value.text
+        );
+
+        cue.line = value.line;
+        cue.align = 'left';
+        cue.position = value.position;
+        cue.positionAlign = 'line-left';
+
+        inbandTextTracks[track].addCue(cue);
+      });
+    } else {
+      // otherwise, a text value with combined captions is sent
+      inbandTextTracks[track].addCue(new Cue(
+        caption.startTime + timestampOffset,
+        caption.endTime + timestampOffset,
+        caption.text
+      ));
+    }
   });
 };
 

test/text-tracks.test.js

@@ -181,6 +181,63 @@ test('creates cues for 608 captions with "stream" property in ccX', function(ass
   );
 });
 
+test('creates cues for 608 captions with "content" property for positioning', function(assert) {
+  addCaptionData({
+    inbandTextTracks: this.inbandTextTracks,
+    timestampOffset: this.timestampOffset,
+    captionArray: [
+      {
+        startTime: 0,
+        endTime: 1,
+        content: [
+          {
+            text: 'CC1',
+            position: 10,
+            line: 15
+          },
+          {
+            text: 'text',
+            position: 15,
+            line: 14
+          }
+        ],
+        stream: 'CC1'
+      },
+      {
+        startTime: 0,
+        endTime: 1,
+        content: [{
+          text: 'CC2 text',
+          position: 80,
+          line: 1
+        }],
+        stream: 'CC2'
+      }
+    ]
+  });
+
+  // CC1
+  assert.strictEqual(this.inbandTextTracks.CC1.cues.length, 2, 'added two 608 cues to CC1');
+
+  // CC1 cue 1
+  assert.strictEqual(this.inbandTextTracks.CC1.cues[0].text, 'CC1', 'added text to first cue in CC1');
+  assert.strictEqual(this.inbandTextTracks.CC1.cues[0].line, 15, 'added line to first cue in CC1');
+  assert.strictEqual(this.inbandTextTracks.CC1.cues[0].position, 10, 'added position to first cue in CC1');
+
+  // CC1 cue 2
+  assert.strictEqual(this.inbandTextTracks.CC1.cues[1].text, 'text', 'added text to second cue in CC1');
+  assert.strictEqual(this.inbandTextTracks.CC1.cues[1].line, 14, 'added line to second cue in CC1');
+  assert.strictEqual(this.inbandTextTracks.CC1.cues[1].position, 15, 'added position to second cue in CC1');
+
+  // CC2
+  assert.strictEqual(this.inbandTextTracks.CC2.cues.length, 1, 'added one 608 cue to CC2');
+  assert.strictEqual(this.inbandTextTracks.CC2.cues[0].text, 'CC2 text', 'added text to CC2');
+  assert.strictEqual(this.inbandTextTracks.CC2.cues[0].line, 1, 'added line to CC2');
+  assert.strictEqual(this.inbandTextTracks.CC2.cues[0].position, 80, 'added position to CC2');
+  assert.strictEqual(this.inbandTextTracks.CC2.cues[0].align, 'left', 'left align 608 cues');
+  assert.strictEqual(this.inbandTextTracks.CC2.cues[0].positionAlign, 'line-left', 'left align position on 608 cues');
+});
+
 test('use existing tracks with id equal to CC#', function(assert) {
   const tech = new MockTech();
   const inbandTextTracks = {};

test/transmuxer-worker.test.js

@@ -296,7 +296,11 @@ QUnit.test('caption events are returned', function(assert) {
     assert.deepEqual(
       messages[28].caption,
       {
-        text: 'Bip!',
+        content: [{
+          line: 15,
+          position: 45,
+          text: 'Bip!'
+        }],
         stream: 'CC1',
         startPts: 157500,
         endPts: 175500,