Use simpler markup for chapters

3 files changed, 69 insertions, 51 deletions

diff --git a/templates/chapters.md b/templates/chapters.md
new file mode 100644
index 00000000..ec06bf02
--- /dev/null
+++ b/templates/chapters.md
@@ -0,0 +1,3 @@
+<pre class="chapters" data-target="<TMPL_VAR vidid>">
+<TMPL_VAR data>
+</pre>
diff --git a/templates/page.tmpl b/templates/page.tmpl
index 65d12e3b..11606228 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -76,6 +76,17 @@
     }, 0);
   }
 
+  function handleSubtitleClick(event) {
+    var video = event.target.attributes['data-video'].value;
+    var start = event.target.attributes['data-start'].value
+    var videoElem = document.getElementById(video);
+    if (videoElem) {
+      videoElem.currentTime = parseSeconds(start);
+      videoElem.scrollIntoView();
+    }
+    event.preventDefault();
+  }
+
   window.onload = function initScript() {
     mainVideo = document.getElementById("mainVideo");
     qnaVideo = document.getElementById("qnaVideo");
@@ -88,16 +99,6 @@
         video.currentTime = parseSeconds(this.innerText)
       };
     }
-    handleSubtitleClick = function(event) {
-      video = event.target.attributes['data-video'].value;
-      start = event.target.attributes['data-start'].value
-      videoElem = document.getElementById(video);
-      if (videoElem) {
-        videoElem.currentTime = parseSeconds(start);
-        videoElem.scrollIntoView();
-      }
-    }
-
     let subtitles = document.getElementsByClassName('subtitle');
     for (let i = 0; i < subtitles.length; i++) {
       subtitles[i].onclick = handleSubtitleClick;
@@ -315,48 +316,62 @@ transcriptDiv.appendChild(transcriptLink)
 <script>
  // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0
  // Copyright (c) 2021 Sacha Chua
- // Based on http://thenewcode.com/977/Create-Interactive-HTML5-Video-with-WebVTT-Chapters
- function displayChapters(trackElement){
-   if ((trackElement) && (textTrack = trackElement.track)){
-     if (textTrack.kind === "chapters"){
-       textTrack.mode = 'hidden';
-       var video = trackElement.closest('video');
-       var chapterList = trackElement.closest('.vid').querySelector('ol');
-       chapterList.innerHTML = '';
-       for (var i = 0; i < textTrack.cues.length; ++i) {
-         cue = textTrack.cues[i],
-         chapterName = cue.text,
-         start = cue.startTime,
-         chapter = document.createElement("li");
-         chapter.setAttribute('data-start', start);
-         date = new Date(0);
-         date.setSeconds(cue.startTime);
-         var chapterDescription = document.createTextNode(date.toISOString().substr(14, 5) + ' ' + cue.text);
-         chapter.appendChild(chapterDescription);
-         //locationList.insertBefore(newLocale);
-         chapter.addEventListener("click",
-                                  function() {
-                                    video.currentTime = this.getAttribute('data-start');
-                                  },false);
-         chapterList.append(chapter);
+ function displayChapters(elem) {
+   var i;
+   var chapter;
+   var list = document.createElement('ol');
+   list.setAttribute('class', 'chapters');
+   var link;
+   var target = elem.getAttribute('data-target');
+   var video = document.getElementById(target);
+   var track;
+   if (video) {
+     track = video.addTextTrack('chapters');
+     track.mode = 'hidden';
+   }
+   var chapters = elem.textContent.split(/[ \t]*\n+[ \t]*/).forEach(function(line) {
+     var m = (line.match(/^(([0-9]+:)?[0-9]+:[0-9]+)[ \t]+(.*)/));
+     if (m) {
+       var start = m[1];
+       var text = m[3];
+       chapter = document.createElement('li');
+       link = document.createElement('a');
+       link.setAttribute('href', '#');
+       link.setAttribute('data-video', target);
+       link.setAttribute('data-start', start);
+       link.setAttribute('data-start-s', parseSeconds(start));
+       link.appendChild(document.createTextNode(m[1] + ' ' + text));
+       link.onclick = handleSubtitleClick;
+       chapter.appendChild(link);
+       list.appendChild(chapter);
+       if (track) {
+         var time = parseSeconds(start);
+         if (track.cues.length > 0) {
+           track.cues[track.cues.length - 1].endTime = time;
+         }
+         track.addCue(new VTTCue(time, time, text));
        }
-       textTrack.addEventListener("cuechange",
-                                  function() {
-                                    if (!this.activeCues[0]) return;
-                                    var currentLocation = this.activeCues[0].startTime;
-                                    if (chapter = chapterList.querySelector('li[data-start="' + currentLocation + '"]')) {
-                                      var locations = [].slice.call(chapterList.querySelectorAll("li"));
-                                      for (var i = 0; i < locations.length; ++i) { 
-                                        locations[i].classList.remove("current");
-                                      }
-                                      chapter.classList.add("current");
-                                    }
-                                  },false);
      }
+   })
+   if (track && track.cues.length > 0) {
+     video.addEventListener('durationchange', function() {
+       track.cues[track.cues.length - 1].endTime = video.duration;
+     });
+     track.addEventListener('cuechange', function() {
+       if (!this.activeCues[0]) return;
+       if (list.querySelector('.current')) {
+         list.querySelector('.current').className = '';
+       }
+       var chapter;
+       if (chapter = list.querySelector('a[data-start-s="' + this.activeCues[0].startTime + '"]')) {
+         chapter.parentNode.className = 'current';
+       }
+     });
    }
+   elem.parentNode.replaceChild(list, elem);
  }
-                                                          
-  document.querySelectorAll('track[kind=chapters]').forEach(function(e) { displayChapters(e); e.addEventListener('load', function() { displayChapters(e); });});
+  
+  document.querySelectorAll('pre.chapters').forEach(displayChapters);
 
  // @license-end
 </script>
diff --git a/templates/vid.md b/templates/vid.md
index b50349c4..2a48e3a0 100644
--- a/templates/vid.md
+++ b/templates/vid.md
@@ -1,6 +1,6 @@
 <div class="vid" data-id="<TMPL_VAR vidid>">
-<video controls preload="metadata" id="<TMPL_VAR vidid>">
-<source src="<TMPL_VAR src>" type="<TMPL_VAR type>" />
+<video controls preload="metadata" id="<TMPL_VAR vidid>" poster="<TMPL_VAR poster>">
+<source src="<TMPL_VAR src>" type="<TMPL_VAR type>" /><TMPL_VAR captions>
 <TMPL_IF subtitles>
 <track label="English" kind="captions" srclang="en" src="<TMPL_VAR subtitles>" default />
 </TMPL_IF>
@@ -8,6 +8,6 @@
 </video>
 <div class="resources">
   <a href="<TMPL_VAR src>"><TMPL_IF download><TMPL_VAR download><TMPL_ELSE>Download video</TMPL_IF><TMPL_IF duration>, <TMPL_VAR duration></TMPL_IF><TMPL_IF size>, <TMPL_VAR size></TMPL_IF></a><br />
-  <TMPL_IF subtitles><a href="<TMPL_VAR subtitles>">Download captions</a><br /></TMPL_IF>
+  <TMPL_IF subtitles><a href="<TMPL_VAR subtitles>">Download captions</a><br /></TMPL_IF><TMPL_VAR other_resources>
 </div>
 </div>