Chapters

2 files changed, 45 insertions, 0 deletions

diff --git a/local.css b/local.css
index 4ad12b50..7f5b59f7 100644
--- a/local.css
+++ b/local.css
@@ -83,3 +83,4 @@ summary h1 { display: inline-block }
 .speaker-details { margin: 0 }
 
 .vid .resources { margin-bottom: -1em; }
+ ol.chapters { list-style-type: none; padding: 0; }
diff --git a/templates/page.tmpl b/templates/page.tmpl
index d6cd9e3e..f93afdfc 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -309,5 +309,49 @@ transcriptDiv.appendChild(transcriptLink)
 }
   // @license-end
 </script>
+<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){
+   console.log(trackElement);
+   if ((trackElement) && (textTrack = trackElement.track)){
+     if (textTrack.kind === "chapters"){
+       textTrack.mode = 'hidden';
+       var video = trackElement.closest('video');
+       var chapterList = trackElement.closest('.video-card').querySelector('ol');
+       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);
+       }
+       textTrack.addEventListener("cuechange",
+                                  function() {
+                                    var currentLocation = this.activeCues[0].startTime;
+                                    if (chapter = chapterList.querySelector('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);
+     }
+   }
+ }
+ // @license-end
+</script>
 </body>
 </html>