From 22903a132cb09454e0054a9441e3dc8465f80498 Mon Sep 17 00:00:00 2001
From: wbamberg <will@bootbonnet.ca>
Date: Tue, 2 Jan 2024 09:07:43 -0800
Subject: [PATCH] De-XHRify (#14)

* Prettier

* Other modernizations including XHR->Fetch

* Apply suggestions from code review

Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>

* Remove IE shim

* Update imscjs-demo/js/index.js

Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>

* Update imscjs-demo/js/index.js

Co-authored-by: Pierre-Anthony Lemieux <pal@sandflow.com>

---------

Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
Co-authored-by: Pierre-Anthony Lemieux <pal@sandflow.com>
---
 imscjs-demo/js/index.js | 70 ++++++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 39 deletions(-)

diff --git a/imscjs-demo/js/index.js b/imscjs-demo/js/index.js
index 56899bc..8193572 100644
--- a/imscjs-demo/js/index.js
+++ b/imscjs-demo/js/index.js
@@ -1,59 +1,51 @@
-
-function initTTML() {
-  var renderDiv = document.getElementById("render-div");
-  var myVideo = document.getElementById("imscVideo");
-  //Track object generated by the first <track> child element
-  var myTrack = myVideo.textTracks[0];
-  //Src is only available from the <track> DOM element, not the obj
-  var ttmlUrl = myVideo.getElementsByTagName("track")[0].src;
-  //The track is disabled by default, 'hidden' does not display VTT Text
-  //but fires the events
+async function initTTML() {
+  const renderDiv = document.getElementById("render-div");
+  const myVideo = document.getElementById("imscVideo");
+  // Track object generated by the first <track> child element
+  const myTrack = myVideo.textTracks[0];
+  // The source is only available from the <track> DOM element, not the object
+  const ttmlUrl = myVideo.getElementsByTagName("track")[0].src;
+  // The track is disabled by default, 'hidden' does not display VTT Text
+  // but fires the events
   myTrack.mode = "hidden";
 
-  var client = new XMLHttpRequest();
-
-  client.open('GET', ttmlUrl);
-  client.onreadystatechange = function () {
-    initTrack(client.responseText);
-  }
-  client.send();
-
+  const response = await fetch(ttmlUrl);
+  initTrack(await response.text());
 
   function initTrack(text) {
-    var imscDoc = imsc.fromXML(text);
-    var timeEvents = imscDoc.getMediaTimeEvents();
-    //create cue per timed event and render isd
-    for (var i = 0; i < timeEvents.length; i++) {
-      //Edge/IE implement "Generic Cue", other browsers VTTCue
-      var Cue = window.VTTCue || window.TextTrackCue;
+    const imscDoc = imsc.fromXML(text);
+    const timeEvents = imscDoc.getMediaTimeEvents();
+    // Since `TextTrackCue`/`VTTCue` does not support TTML natively, we create one (empty)
+    // cue per event on the timeline of the TTML document. When the cue is triggered 
+    // (`enter` event), we render the TTML document corresponding to the cue time, 
+    // which is called an Intermediary Synchronic Document (ISD), into `renderDiv`.
+    for (let i = 0; i < timeEvents.length; i++) {
+      let myCue;
       if (i < timeEvents.length - 1) {
-        //We have to provide empty string as VTTText
-        var myCue = new Cue(timeEvents[i], timeEvents[i + 1], "");
+        // We have to provide an empty string as the VTTText
+        myCue = new VTTCue(timeEvents[i], timeEvents[i + 1], "");
       } else {
-      /*
-      "End" time of last "imsc event" is end of video
-      */
-        var myCue = new Cue(timeEvents[i], myVideo.duration, "");
+        // "End" time of the last "imsc event" is the end of the video
+        myCue = new VTTCue(timeEvents[i], myVideo.duration, "");
       }
-      myCue.onenter = function () {
+      myCue.addEventListener("enter", function () {
         clearSubFromScreen();
-        var myIsd = imsc.generateISD(imscDoc, this.startTime);
+        const myIsd = imsc.generateISD(imscDoc, this.startTime);
         imsc.renderHTML(myIsd, renderDiv);
-      };
-      myCue.onexit = function () {
+      });
+      myCue.addEventListener("exit", function () {
         clearSubFromScreen();
-      };
-      var r = myTrack.addCue(myCue);
+      });
+      const r = myTrack.addCue(myCue);
     }
   }
 
   function clearSubFromScreen() {
-    var subtitleActive = renderDiv.getElementsByTagName("div")[0];
+    const subtitleActive = renderDiv.getElementsByTagName("div")[0];
     if (subtitleActive) {
       renderDiv.removeChild(subtitleActive);
     }
   }
-
 }
 
-window.addEventListener("load", initTTML);
+addEventListener("load", initTTML);