Store and restore text tracks from JSON.

When switching techs, we want to clear out the old text tracks and then
restore them using the currently appropriate tracks.

src/js/player.js

@@ -21,6 +21,7 @@ import globalOptions from './global-options.js';
 import safeParseTuple from 'safe-json-parse/tuple';
 import assign from 'object.assign';
 import mergeOptions from './utils/merge-options.js';
+import textTrackConverter from './tracks/text-track-list-converter.js';
 
 // Include required child components (importing also registers them)
 import MediaLoader from './tech/loader.js';
@@ -522,6 +523,8 @@ class Player extends Component {
     let techComponent = Component.getComponent(techName);
     this.tech = new techComponent(techOptions);
 
+    textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech);
+
     this.on(this.tech, 'ready', this.handleTechReady);
     this.on(this.tech, 'usenativecontrols', this.handleTechUseNativeControls);
 
@@ -580,6 +583,7 @@ class Player extends Component {
   unloadTech() {
     // Save the current text tracks so that we can reuse the same text tracks with the next tech
     this.textTracks_ = this.textTracks();
+    this.textTracksJson_ = textTrackConverter.textTracksToJson(this);
 
     this.isReady_ = false;
 

src/js/tech/tech.js

@@ -238,6 +238,14 @@ class Tech extends Component {
    * @method dispose
    */
   dispose() {
+    // clear out text tracks because we can't reuse them between techs
+    let tt = this.textTracks();
+    let i = tt.length;
+    while(i--) {
+      this.removeRemoteTextTrack(tt[i]);
+    }
+
+
     // Turn off any manual progress or timeupdate tracking
     if (this.manualProgress) { this.manualProgressOff(); }
 

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

@@ -0,0 +1,47 @@
+let ttToJson = function(track) {
+  return {
+    kind: track.kind,
+    label: track.label,
+    language: track.language,
+    id: track.id,
+    inBandMetadataTrackDispatchType: track.inBandMetadataTrackDispatchType,
+    mode: track.mode,
+    cues: track.cues && Array.prototype.map.call(track.cues, function(cue) {
+      return {
+        startTime: cue.startTime,
+        endTime: cue.endTime,
+        text: cue.text,
+        id: cue.id
+      };
+    }),
+    src: track.src
+  };
+};
+
+let textTracksToJson = function(tech) {
+  let trackEls = tech.el().querySelectorAll('track');
+
+  let trackObjs = Array.prototype.map.call(trackEls, (t) => t.track);
+  let tracks = Array.prototype.map.call(trackEls, function(trackEl) {
+    let json = ttToJson(trackEl.track);
+    json.src = trackEl.src;
+    return json;
+  });
+
+  return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function(track) {
+    return trackObjs.indexOf(track) === -1;
+  }).map(ttToJson));
+};
+
+let jsonToTextTracks = function(json, tech) {
+  json.forEach(function(track) {
+    let addedTrack = tech.addRemoteTextTrack(track).track;
+    if (!track.src) {
+      track.cues.forEach((cue) => addedTrack.addCue(cue));
+    }
+  });
+
+  return tech.textTracks();
+};
+
+export default {textTracksToJson, jsonToTextTracks};

src/js/tracks/text-track.js

@@ -176,6 +176,7 @@ let TextTrack = function(options={}) {
   });
 
   if (options.src) {
+    tt.src = options.src;
     loadTrack(options.src, tt);
   } else {
     tt.loaded_ = true;