From 613c0b523d84c1236f1928644220f2ff4862d857 Mon Sep 17 00:00:00 2001 From: Sacha Chua Date: Wed, 24 Nov 2021 02:03:26 -0500 Subject: Tweak chapter display --- local.css | 1 + templates/page.tmpl | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/local.css b/local.css index 7f5b59f7..7d714bac 100644 --- a/local.css +++ b/local.css @@ -84,3 +84,4 @@ summary h1 { display: inline-block } .vid .resources { margin-bottom: -1em; } ol.chapters { list-style-type: none; padding: 0; } + .vid figure { margin: 0 } diff --git a/templates/page.tmpl b/templates/page.tmpl index 6647f03a..ceaa1049 100644 --- a/templates/page.tmpl +++ b/templates/page.tmpl @@ -317,7 +317,6 @@ transcriptDiv.appendChild(transcriptLink) // 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'; @@ -343,7 +342,7 @@ transcriptDiv.appendChild(transcriptLink) textTrack.addEventListener("cuechange", function() { var currentLocation = this.activeCues[0].startTime; - if (chapter = chapterList.querySelector('data-start=[' + currentLocation + ']')) { + 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"); @@ -354,6 +353,7 @@ transcriptDiv.appendChild(transcriptLink) } } } +document.querySelectorAll('track[kind=chapters]').forEach(function(e) { displayChapters(e); }); // @license-end -- cgit v1.2.3