feat: toJSON methods for text track serialization (#8998)

Author: wseymour15

src/css/components/_volume.scss

@@ -160,7 +160,6 @@
   }
 }
 
-// here
 // Update placement of circle icon when using SVG icons
 .vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
   right: -0.3em;

src/js/tracks/text-track-list-converter.js

@@ -18,7 +18,7 @@
  *         A serializable javascript representation of the TextTrack.
  * @private
  */
-const trackToJson_ = function(track) {
+const trackToJson = function(track) {
   const ret = [
     'kind', 'label', 'language', 'id',
     'inBandMetadataTrackDispatchType', 'mode', 'src'
@@ -61,7 +61,7 @@ const textTracksToJson = function(tech) {
 
   const trackObjs = Array.prototype.map.call(trackEls, (t) => t.track);
   const tracks = Array.prototype.map.call(trackEls, function(trackEl) {
-    const json = trackToJson_(trackEl.track);
+    const json = trackToJson(trackEl.track);
 
     if (trackEl.src) {
       json.src = trackEl.src;
@@ -71,7 +71,7 @@ const textTracksToJson = function(tech) {
 
   return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function(track) {
     return trackObjs.indexOf(track) === -1;
-  }).map(trackToJson_));
+  }).map(trackToJson));
 };
 
 /**
@@ -97,4 +97,4 @@ const jsonToTextTracks = function(json, tech) {
   return tech.textTracks();
 };
 
-export default {textTracksToJson, jsonToTextTracks, trackToJson_};
+export default {textTracksToJson, jsonToTextTracks, trackToJson};

src/js/tracks/text-track-list.js

@@ -56,5 +56,15 @@ class TextTrackList extends TrackList {
       }
     }
   }
+
+  /**
+   * Creates a serializable array of objects that contains serialized copies
+   * of each text track.
+   *
+   * @return {Object[]} A serializable list of objects for the text track list
+   */
+  toJSON() {
+    return this.tracks_.map((track) => track.toJSON());
+  }
 }
 export default TextTrackList;

src/js/tracks/text-track.js

@@ -7,6 +7,7 @@ import {TextTrackKind, TextTrackMode} from './track-enums';
 import log from '../utils/log.js';
 import window from 'global/window';
 import Track from './track.js';
+import textTrackConverter from './text-track-list-converter.js';
 import { isCrossOrigin } from '../utils/url.js';
 import XHR from '@videojs/xhr';
 import {merge} from '../utils/obj';
@@ -420,6 +421,16 @@ class TextTrack extends Track {
     this.cues.setCues_(this.cues_);
   }
 
+  /**
+   * Creates a copy of the text track and makes it serializable
+   * by removing circular dependencies.
+   *
+   * @return {Object} The track information as a serializable object
+   */
+  toJSON() {
+    return textTrackConverter.trackToJson(this);
+  }
+
   /**
    * Remove a cue from our internal list
    *

test/unit/tracks/text-track-list-converter.test.js

@@ -32,7 +32,7 @@ if (Html5.supportsNativeTextTracks()) {
     track.srclang = 'en';
     track.label = 'English';
 
-    assert.deepEqual(cleanup(c.trackToJson_(track.track)), {
+    assert.deepEqual(cleanup(c.trackToJson(track.track)), {
       kind: 'captions',
       label: 'English',
       language: 'en',
@@ -181,7 +181,7 @@ QUnit.test('trackToJson_ produces correct representation for emulated track obje
     }
   });
 
-  assert.deepEqual(cleanup(c.trackToJson_(track)), {
+  assert.deepEqual(cleanup(c.trackToJson(track)), {
     src: 'example.com/english.vtt',
     kind: 'captions',
     label: 'English',

test/unit/tracks/text-track-list.test.js

@@ -60,3 +60,46 @@ QUnit.test('trigger "change" event when mode changes on a TextTrack', function(a
   ttl.removeTrack(tt);
   tech.dispose();
 });
+
+QUnit.test('toJSON', function(assert) {
+  const tech = new TechFaker();
+  const ttl = new TextTrackList([]);
+
+  let textTrackListJSON = ttl.toJSON();
+
+  assert.ok(textTrackListJSON.length === 0, 'an empty array is returned when the list is empty');
+
+  const tt1 = new TextTrack({tech});
+
+  ttl.addTrack(tt1);
+  textTrackListJSON = ttl.toJSON();
+
+  assert.equal(textTrackListJSON[0].id, tt1.id, 'text track in array of JSON should match the original track');
+  assert.notOk(textTrackListJSON[0].tech_, 'tech_ should not exist on the text track value in the JSON list');
+
+  const tt2 = new TextTrack({tech});
+  const tt3 = new TextTrack({tech});
+
+  ttl.addTrack(tt2);
+  ttl.addTrack(tt3);
+  textTrackListJSON = ttl.toJSON();
+
+  assert.equal(textTrackListJSON[1].id, tt2.id, 'text track in second spot of array should match the original track');
+  assert.equal(textTrackListJSON[2].id, tt3.id, 'text track in third spot of array should match the original track');
+});
+
+QUnit.test('serialize', function(assert) {
+  const tech = new TechFaker();
+  const tt1 = new TextTrack({tech});
+  const tt2 = new TextTrack({tech});
+  const tt3 = new TextTrack({tech});
+  const ttl = new TextTrackList([tt1, tt2, tt3]);
+
+  const serializedTrackList = JSON.stringify(ttl);
+
+  assert.notOk(serializedTrackList.includes('"tech_":'), 'tech_ does not exist in the serialized data');
+
+  assert.ok(serializedTrackList.includes(`"id":"${tt1.id}"`), 'serialzed track is found for text track 1');
+  assert.ok(serializedTrackList.includes(`"id":"${tt2.id}"`), 'serialzed track is found for text track 2');
+  assert.ok(serializedTrackList.includes(`"id":"${tt3.id}"`), 'serialzed track is found for text track 3');
+});

test/unit/tracks/text-track.test.js

@@ -746,3 +746,61 @@ QUnit.test('stops processing if vttjs loading errored out', function(assert) {
   testTech.off();
   log.error = oldLogError;
 });
+
+QUnit.test('toJSON', function(assert) {
+  const tt = new TextTrack({
+    tech: this.tech
+  });
+
+  tt.addCue({
+    id: '1',
+    startTime: 1,
+    endTime: 2.555
+  });
+  tt.addCue({
+    id: '2',
+    startTime: 2.555,
+    endTime: 2.555
+  });
+
+  const jsonTrack = tt.toJSON();
+
+  // Properties we want copied are copied correctly
+  assert.equal(tt.id, jsonTrack.id, 'the id for the copied track stayed the same');
+  assert.equal(tt.mode, jsonTrack.mode, 'the mode for the copied track stayed the same');
+  assert.equal(tt.kind, jsonTrack.kind, 'the kind for the copied track stayed the same');
+
+  // The tech_ property stays on the original track, but is removed from the copy
+  assert.ok(tt.tech_, 'the tech exists on the original track');
+  assert.notOk(jsonTrack.tech_, 'the tech does not exist on the copied track');
+});
+
+QUnit.test('serialize', function(assert) {
+  const tt = new TextTrack({
+    tech: this.tech
+  });
+
+  tt.addCue({
+    id: '1',
+    startTime: 1,
+    endTime: 2.555
+  });
+  tt.addCue({
+    id: '2',
+    startTime: 2.555,
+    endTime: 2.555
+  });
+
+  const serializedTrack = JSON.stringify(tt);
+
+  // Ensure tech was not removed from the actual track
+  assert.ok(tt.tech_, 'the tech exists on the original track');
+
+  // Values from the track should be found in the serialized string
+  assert.ok(serializedTrack.includes(`"id":"${tt.id}"`), 'serialized data should include id');
+  assert.ok(serializedTrack.includes(`"mode":"${tt.mode}"`), 'serialized data should include mode');
+  assert.ok(serializedTrack.includes(`"kind":"${tt.kind}"`), 'serialized data should include cues');
+
+  // tech_ should not be found in the serialized string
+  assert.notOk(serializedTrack.includes('"tech_":'), 'serialized data should not include tech_');
+});