Other modernizations including XHR->Fetch

imscjs-demo/js/index.js

@@ -1,52 +1,48 @@
-function initTTML() {
-  var renderDiv = document.getElementById("render-div");
-  var myVideo = document.getElementById("imscVideo");
+async function initTTML() {
+  const renderDiv = document.getElementById("render-div");
+  const myVideo = document.getElementById("imscVideo");
   //Track object generated by the first <track> child element
-  var myTrack = myVideo.textTracks[0];
+  const myTrack = myVideo.textTracks[0];
   //Src is only available from the <track> DOM element, not the obj
-  var ttmlUrl = myVideo.getElementsByTagName("track")[0].src;
+  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();
+    const imscDoc = imsc.fromXML(text);
+    const timeEvents = imscDoc.getMediaTimeEvents();
     //create cue per timed event and render isd
-    for (var i = 0; i < timeEvents.length; i++) {
+    for (let i = 0; i < timeEvents.length; i++) {
       //Edge/IE implement "Generic Cue", other browsers VTTCue
-      var Cue = window.VTTCue || window.TextTrackCue;
+      const Cue = window.VTTCue || window.TextTrackCue;
+      let myCue;
       if (i < timeEvents.length - 1) {
         //We have to provide empty string as VTTText
-        var myCue = new Cue(timeEvents[i], timeEvents[i + 1], "");
+        myCue = new Cue(timeEvents[i], timeEvents[i + 1], "");
       } else {
         /*
       "End" time of last "imsc event" is end of video
       */
-        var myCue = new Cue(timeEvents[i], myVideo.duration, "");
+        myCue = new Cue(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);
     }