Use simpler markup for chapters

5 files changed, 137 insertions, 104 deletions

diff --git a/2021/info/forever-schedule.md b/2021/info/forever-schedule.md
index 82b4bf33..ab79e929 100644
--- a/2021/info/forever-schedule.md
+++ b/2021/info/forever-schedule.md
@@ -9,60 +9,74 @@ If you have questions and the speaker has not indicated public contact informati
 
 # Talk
 
-<div class="vid"><video controls preload="metadata" poster="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main.png" id="mainVideo"><source src="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main.webm" /><track label="English" kind="captions" srclang="en" src="/2021/captions/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main.vtt" default /><track kind="chapters" label="Chapters" src="/2021/captions/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main--chapters.vtt"" /></video><div class="files resources"><ul><li><a href="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main.webm">Download .webm video (24:52, 27.6MB)</a></li><li><a href="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters.org">Download .org</a></li><li><a href="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main.vtt">Download --main.vtt</a></li><li><a href="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--chapters.vtt">Download --chapters.vtt</a></li><li><a href="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main--chapters.vtt">Download --main--chapters.vtt</a></li><li><a href="https://toobnix.org/w/jSW4Gk3hsuv2ZfW8jXHz39">View on Toobnix</a></li></ul></div><ol class="chapters">
-<li data-start="1.280" data-stop="28.079">00:01 Introduction and conclusion</li>
-<li data-start="28.080" data-stop="67.199">00:28 Who am I?</li>
-<li data-start="67.200" data-stop="146.958">01:07 Is Emacs unpopular?</li>
-<li data-start="146.959" data-stop="255.679">02:26 What does popularity really mean?</li>
-<li data-start="255.680" data-stop="272.399">04:15 How do we measure popularity?</li>
-<li data-start="272.400" data-stop="378.318">04:32 Google Trends</li>
-<li data-start="378.319" data-stop="499.999">06:18 Stack Overflow Survey</li>
-<li data-start="500.000" data-stop="623.199">08:20 Community Activity</li>
-<li data-start="623.200" data-stop="638.319">10:23 How do editors lose popularity?</li>
-<li data-start="638.320" data-stop="745.679">10:38 A new editor with better features appears</li>
-<li data-start="745.680" data-stop="841.039">12:25 Lack of sufficient maintenance</li>
-<li data-start="841.040" data-stop="876.958">14:01 The "fashion" moves on</li>
-<li data-start="876.959" data-stop="1030.239">14:36 What happens when an editor loses popularity?</li>
-<li data-start="1030.240" data-stop="1040.159">17:10 How will Emacs survive *despite* popularity?</li>
-<li data-start="1040.160" data-stop="1191.439">17:20 Emacs is more deeply hackable than almost all other editors</li>
-<li data-start="1191.440" data-stop="1275.279">19:51 Emacs has a strong community of highly skilled package authors</li>
-<li data-start="1275.280" data-stop="1353.439">21:15 Emacs has a very strong user community</li>
-<li data-start="1353.440" data-stop="1420.959">22:33 The Emacs maintainers and contributors care about the users</li>
-<li data-start="1420.960" data-stop="1462.879">23:40 Isn't all this supposed to come when an editor is popular?</li>
-<li data-start="1462.880" data-stop="1463.880">24:22 When someone talks about popularity...</li>
-</ol></div>
+[[!template id="vid" vidid="mainVideo" src="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main.webm" poster="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main.png" captions="""<track label="English" kind="captions" srclang="en" src="/2021/captions/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main.vtt" default />"""
+size="27.6M" duration="24:52" other_resources="""[Download .org](https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters.org)  
+[Download --main.vtt](https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main.vtt)  
+[Download --chapters.vtt](https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--chapters.vtt)  
+[Download --main--chapters.vtt](https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--main--chapters.vtt)  
+[View on Toobnix](https://toobnix.org/w/jSW4Gk3hsuv2ZfW8jXHz39)  
+"""]]
+[[!template id="chapters" vidid="mainVideo" data="""
+00:01 Introduction and conclusion
+00:28 Who am I?
+01:07 Is Emacs unpopular?
+02:26 What does popularity really mean?
+04:15 How do we measure popularity?
+04:32 Google Trends
+06:18 Stack Overflow Survey
+08:20 Community Activity
+10:23 How do editors lose popularity?
+10:38 A new editor with better features appears
+12:25 Lack of sufficient maintenance
+14:01 The "fashion" moves on
+14:36 What happens when an editor loses popularity?
+17:10 How will Emacs survive *despite* popularity?
+17:20 Emacs is more deeply hackable than almost all other editors
+19:51 Emacs has a strong community of highly skilled package authors
+21:15 Emacs has a very strong user community
+22:33 The Emacs maintainers and contributors care about the users
+23:40 Isn't all this supposed to come when an editor is popular?
+24:22 When someone talks about popularity...
+
+"""]]
+
 
 # Q&A
 
-<div class="vid"><video controls preload="metadata" poster="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--answers.png" id="qanda"><source src="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--answers.webm" /><track kind="chapters" label="Chapters" src="/2021/captions/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--answers--chapters.vtt"" /></video><div class="files resources"><ul><li><a href="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--answers.webm">Download .webm video (56:57, 116MB)</a></li><li><a href="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--answers--chapters.vtt">Download --answers--chapters.vtt</a></li></ul></div><ol class="chapters">
-<li data-start="0.000" data-stop="26.318">00:00 Thanks</li>
-<li data-start="26.319" data-stop="189.598">00:26 In your opinion, what is Emacs' Achilles heel?</li>
-<li data-start="189.599" data-stop="306.959">03:09 What is your opinion about the documentation of Emacs in other languages?</li>
-<li data-start="306.960" data-stop="391.839">05:06 Do you think more effort should be made to popularize hacking on the C parts of Emacs?</li>
-<li data-start="391.840" data-stop="431.999">06:31 Can you name a few features from other programming languages that you miss in Emacs Lisp?</li>
-<li data-start="432.000" data-stop="502.399">07:12 What are your opinions on Emacs's commitments to free software?</li>
-<li data-start="502.400" data-stop="702.959">08:22 Do you think that packages like Magit or Org mode make people see Emacs as an obstacle to these applications that they want to use?</li>
-<li data-start="702.960" data-stop="777.919">11:42 Another way people can help inspire others to use Emacs</li>
-<li data-start="777.920" data-stop="889.839">12:57 Should Emacs continue to present itself as an esoteric program and culture, or should we try to dispel the myth?</li>
-<li data-start="889.840" data-stop="922.079">14:49 Do you think there could be changes made to the core of Emacs that would betray the ethos you and most people here appreciate?</li>
-<li data-start="922.080" data-stop="938.479">15:22 When will David Wilson and Protesilaos collaborate?</li>
-<li data-start="938.480" data-stop="988.639">15:38 If you had to choose between graphics or real browser support within Emacs, which would you choose?</li>
-<li data-start="988.640" data-stop="1109.679">16:28 How do you feel being an Emacs-focused YouTuber?</li>
-<li data-start="1109.680" data-stop="1231.119">18:29 More typesetting capabilities versus better performance</li>
-<li data-start="1231.120" data-stop="1483.199">20:31 Sneak peek of what's coming in the YouTube channel soon?</li>
-<li data-start="1483.200" data-stop="1507.919">24:43 Principles and compromises</li>
-<li data-start="1507.920" data-stop="1570.399">25:07 Understanding the value of Emacs Lisp</li>
-<li data-start="1570.400" data-stop="1604.319">26:10 Will you do a video showing your personal workflow?</li>
-<li data-start="1604.320" data-stop="1692.799">26:44 What do you think about Guix or NixOS?</li>
-<li data-start="1692.800" data-stop="1878.399">28:12 Can you talk about your actual work?</li>
-<li data-start="1878.400" data-stop="2123.119">31:18 Do your colleagues use Emacs as well?</li>
-<li data-start="2123.120" data-stop="2363.599">35:23 Any thoughts on the idea that the best tool to use is the one that is easiest to leave?</li>
-<li data-start="2363.600" data-stop="2549.919">39:23 Do you think there should be an updated initial configuration for fresh Emacs installations with more modern UI features and cool shortcuts?</li>
-<li data-start="2549.920" data-stop="2630.719">42:29 How hard is it to get into the native code side of Emacs?</li>
-<li data-start="2630.720" data-stop="2788.399">43:50 Emacs Chats</li>
-<li data-start="2788.400" data-stop="3214.879">46:28 Livestreams</li>
-<li data-start="3214.880" data-stop="3215.880">53:34 Short-form videos</li>
-</ol></div>
+[[!template id="vid" vidid="qanda" src="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--answers.webm" poster="https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--answers.png" captions=""""""
+size="116M" duration="56:57" other_resources="""[Download --answers--chapters.vtt](https://media.emacsconf.org/2021/emacsconf-2021-forever--m-x-forever-why-emacs-will-outlast-text-editor-trends--david-wilson-system-crafters--answers--chapters.vtt)  
+"""]]
+[[!template id="chapters" vidid="qanda" data="""
+00:00 Thanks
+00:26 In your opinion, what is Emacs' Achilles heel?
+03:09 What is your opinion about the documentation of Emacs in other languages?
+05:06 Do you think more effort should be made to popularize hacking on the C parts of Emacs?
+06:31 Can you name a few features from other programming languages that you miss in Emacs Lisp?
+07:12 What are your opinions on Emacs's commitments to free software?
+08:22 Do you think that packages like Magit or Org mode make people see Emacs as an obstacle to these applications that they want to use?
+11:42 Another way people can help inspire others to use Emacs
+12:57 Should Emacs continue to present itself as an esoteric program and culture, or should we try to dispel the myth?
+14:49 Do you think there could be changes made to the core of Emacs that would betray the ethos you and most people here appreciate?
+15:22 When will David Wilson and Protesilaos collaborate?
+15:38 If you had to choose between graphics or real browser support within Emacs, which would you choose?
+16:28 How do you feel being an Emacs-focused YouTuber?
+18:29 More typesetting capabilities versus better performance
+20:31 Sneak peek of what's coming in the YouTube channel soon?
+24:43 Principles and compromises
+25:07 Understanding the value of Emacs Lisp
+26:10 Will you do a video showing your personal workflow?
+26:44 What do you think about Guix or NixOS?
+28:12 Can you talk about your actual work?
+31:18 Do your colleagues use Emacs as well?
+35:23 Any thoughts on the idea that the best tool to use is the one that is easiest to leave?
+39:23 Do you think there should be an updated initial configuration for fresh Emacs installations with more modern UI features and cool shortcuts?
+42:29 How hard is it to get into the native code side of Emacs?
+43:50 Emacs Chats
+46:28 Livestreams
+53:34 Short-form videos
+
+"""]]
+
 # Description
 
 
diff --git a/local.css b/local.css
index 20706e7e..7a9225d0 100644
--- a/local.css
+++ b/local.css
@@ -83,7 +83,8 @@ summary h1 { display: inline-block }
 .speaker-details { margin: 0 }
 
 .vid .resources ul { margin: 0; list-style-type: none; padding: 0 }
- ol.chapters { list-style-type: none; padding: 0; }
+ol.chapters { list-style-type: none; padding: 0; }
+#content ol.chapters a { text-decoration: none; color: inherit }
  .vid figure { margin: 0; padding: 0 }
 
 
@@ -99,4 +100,4 @@ summary h1 { display: inline-block }
     border: 1px solid rgb(0 0 0 / 20%);
     border-radius: 5px; }
  .all > ol > li video { max-width: 100%; width: 100% }
- .vid .chapters .current { background-color: rgba(0, 255, 0, 0.2); }
+ ol.chapters .current { background-color: rgba(0, 255, 0, 0.2); }
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>