summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSacha Chua <sacha@sachachua.com>2021-12-12 01:24:30 -0500
committerSacha Chua <sacha@sachachua.com>2021-12-12 01:24:30 -0500
commite01eb580ac2040e34fc92a1da5f5156c0774ba8c (patch)
treeb427bae1f39f3de2fb0406f0c84177b90d8e7e8a
parentfa0bcb1e1f11799dfd20ee6f8e02dc31dc5566f5 (diff)
downloademacsconf-wiki-e01eb580ac2040e34fc92a1da5f5156c0774ba8c.tar.xz
emacsconf-wiki-e01eb580ac2040e34fc92a1da5f5156c0774ba8c.zip
Use simpler markup for chapters
-rw-r--r--2021/info/forever-schedule.md116
-rw-r--r--local.css5
-rw-r--r--templates/chapters.md3
-rw-r--r--templates/page.tmpl111
-rw-r--r--templates/vid.md6
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>