Add: Q&A video jump to time

2 files changed, 28 insertions, 13 deletions

diff --git a/2020/info/05.md b/2020/info/05.md
index 0da4c0a6..6dee63c8 100644
--- a/2020/info/05.md
+++ b/2020/info/05.md
@@ -5,7 +5,7 @@ Grant Shangreaux
 [Download compressed .webm video (20.3M)](https://mirror.csclub.uwaterloo.ca/emacsconf/2020/smaller/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux--vp9-q56-video-original-audio.webm)  
 [View transcript](#transcript)
 
-[[!template id=vid src="https://mirror.csclub.uwaterloo.ca/emacsconf/2020/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux.webm" download="Download Q&A video, 720p" subtitles="/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux.vtt"]]
+[[!template id=vid vidid="qnaVideo"src="https://mirror.csclub.uwaterloo.ca/emacsconf/2020/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux.webm" download="Download Q&A video, 720p" subtitles="/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux.vtt"]]
 [Download compressed Q&A .webm video (15.7M)](https://mirror.csclub.uwaterloo.ca/emacsconf/2020/smaller/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux--vp9-q56-video-original-audio.webm)  
 [View transcript for Q&A](#transcript-questions)
 
@@ -358,7 +358,8 @@ the webcam.) Yeah, okay. (Amin: I'll maximize your webcam.) Okay,
 thanks. I'll get to the answer for my color theme here in a bit in
 IRC. 
 
-(1:31) Next question on the Etherpad, does this metadata workflow also
+(<a href="qnaVideo" class="time-link">1:31</a>)
+Next question on the Etherpad, does this metadata workflow also
 support unsynchronized lyrics within ID3 tags, multi-line metadata? I
 don't know, actually. It's funny because I was trying out different
 things with metadata, and really the biggest thing was to figure out
@@ -372,7 +373,8 @@ if you can't do it out of the box, I think you could script EMMS to do
 that. I'd like to know more, and I'm certainly going to be
 investigating it. I will try and post my findings somewhere online. 
 
-(2:39) Is it possible to import batch metadata? I'm not sure. I would
+(<a href="qnaVideo" class="time-link">2:39</a>)
+Is it possible to import batch metadata? I'm not sure. I would
 guess yes is the answer. EMMS can connect to metadata services. I
 haven't done that because I was just using audio files that I created
 myself. I know that on the back end, it calls out to shell programs
@@ -382,7 +384,8 @@ I was working with. You can also use tiny tag, and there's some
 other... That might be the python library. I can't remember. There's
 two other libraries that I can shell out to for doing metadata. 
 
-(3:24) My current workflow for tagging music is to first apply replay
+(<a href="qnaVideo" class="time-link">3:24</a>)
+My current workflow for tagging music is to first apply replay
 gain in fubar 2000, fix egregious mistakes, use beats to apply
 metadata from music brains, or discogs, go over remaining albums with
 fubar 2000 again. Is there a chance textual tagging could allow doing
@@ -395,7 +398,8 @@ work with text, and being able to use Emacs as a front end for those
 updates would be really fantastic. So really, it's just a matter of
 writing the interface to the external tool. 
 
-(4:22) Is there a link to some info expanding philosophy of how to
+(<a href="qnaVideo" class="time-link">4:22</a>)
+Is there a link to some info expanding philosophy of how to
 compensate musicians? No, I don't really have a lot of philosophy
 around that. I guess the first thing I could say would be something
 like a universal income. I feel like that would solve a lot of
@@ -404,12 +408,14 @@ about their pay. I will think about it more. This is one of my first
 forays into getting public with some of these ideas, so I will try to
 do more and let the community know. 
 
-(4:54) What Emacs theme am I using? Can't remember. It's one of the
+(<a href="qnaVideo" class="time-link">4:54</a>)
+What Emacs theme am I using? Can't remember. It's one of the
 Kaolin themes. I think it was Aurora or or Bubble Gum, maybe, but the
 Kaolin themes are nice. I recommend them. Not using Doom Emacs, Doom
 mode line though. It's very pretty.
 
-(5:17) SVG support built into Emacs? I'm using Emacs 27.1, and yes,
+(<a href="qnaVideo" class="time-link">5:17</a>)
+SVG support built into Emacs? I'm using Emacs 27.1, and yes,
 SVG support is built in. I may have had to compile it with some Cairo
 support. I don't remember for sure. But yes, you can even take
 screenshots of your Emacs from within Emacs in SVG. It's pretty great.
@@ -423,17 +429,20 @@ it's been fun so far. How did I manage? I can post a snippet of that,
 or actually I can share my screen, can't I... Okay. I actually have it
 up right here. 
 
-(6:49) So I think I got this from alphapapa, to be honest. I define
+(<a href="qnaVideo" class="time-link">6:49</a>)
+So I think I got this from alphapapa, to be honest. I define
 screenshot-svg. It's an interactive command. Oh yeah, there's
 alphae.papa Okay, there we go. I would like to change this so that I
 can get it into the copy-paste buffer so I don't have to copy the file
 in, but I haven't really hacked on it yet. 
 
-(7:20) Okay, org heading colors. That might be a good question. I know, the
+(<a href="qnaVideo" class="time-link">7:20</a>)
+Okay, org heading colors. That might be a good question. I know, the
 presentation... Sorry, it's hard to think and type at the same time.
 Think and talk and type. 
 
-(7:41) So the presentation is just a normal org file, right, so I have my
+(<a href="qnaVideo" class="time-link">7:41</a>)
+So the presentation is just a normal org file, right, so I have my
 headers, and the author--you can even stick your email and other
 headers in there. But there's a package called org-tree-slide. Whoops,
 why is it not... I must have not required it. Good question. (Amin:
@@ -456,7 +465,8 @@ as well, because it's still just an Org document using narrowing, you
 know. It doesn't actually change anything. Definitely recommend
 org-tree-slide mode. Okay, let's see, what else... 
 
-(10:29) Share my screen to demo. Oh, that's the SVG. Let's see. Okay, so I
+(<a href="qnaVideo" class="time-link">10:29</a>)
+Share my screen to demo. Oh, that's the SVG. Let's see. Okay, so I
 don't know if you can see this now, but I'm actually viewing the SVG
 screenshot that I took with Emacs. See here's the source of it. So
 Emacs made that. And here's the image. It's cool because you can even
@@ -472,7 +482,8 @@ remembering correctly. I got Emacs 27. I'm not on a Mac. I saw
 alphapapa's comment on reddit, and then I recompiled it with Cairo
 support. Yes. 
 
-(12:18) Okay, lots of good conversation on here. Yep, I have like one or two
+(<a href="qnaVideo" class="time-link">12:18</a>)
+Okay, lots of good conversation on here. Yep, I have like one or two
 more minutes. Okay I guess while I'm here, I might as well say thank
 you to the organizers. I really appreciate everybody's work on this.
 It's fun to be a part of this community. I'm enjoying the other talks
diff --git a/templates/page.tmpl b/templates/page.tmpl
index 3f3044a9..576f3d66 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -66,6 +66,7 @@
   This could be extended to accept hours in the time stamp as well, but currently does not.
   */
   let mainVideo;
+  let qnaVideo; // some pages have a questions and answers video
   let timestamps;
 
   // expects a string like "mm:ss"
@@ -78,11 +79,14 @@
 
   window.onload = function initScript() {
       mainVideo = document.getElementById("mainVideo");
+      qnaVideo = document.getElementById("qnaVideo");
       timestamps = document.getElementsByClassName("time-link");
       let len = timestamps.length;
       for (let i = 0; i < len; i++) {
           timestamps[i].onclick = function () {
-              mainVideo.currentTime = parseSeconds(this.innerText)
+              const videoType = this.href.split("/").pop();
+              const video = (videoType == "#mainVideo") ? mainVideo : qnaVideo;
+              video.currentTime = parseSeconds(this.innerText)
           };
       }
   }