2 files changed, 32 insertions, 15 deletions

diff --git a/templates/page.tmpl b/templates/page.tmpl
index 576f3d66..0ccf7af6 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -69,26 +69,40 @@
   let qnaVideo; // some pages have a questions and answers video
   let timestamps;
 
-  // expects a string like "mm:ss"
+  // expects a string like "mm:ss.mmm"
   function parseSeconds(timeString) {
-      const times = timeString.split(":");
-      const minutes = parseFloat(times[0]);
-      const seconds = parseFloat(times[1]);
-      return (minutes * 60) + seconds;
+    return timeString.split(":").reduce(function(prev, o) {
+      return prev * 60 + parseFloat(o);
+    }, 0);
   }
 
   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 () {
-              const videoType = this.href.split("/").pop();
-              const video = (videoType == "#mainVideo") ? mainVideo : qnaVideo;
-              video.currentTime = parseSeconds(this.innerText)
-          };
+    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 () {
+        const videoType = this.href.split("/").pop();
+        const video = (videoType == "#mainVideo") ? mainVideo : qnaVideo;
+        video.currentTime = parseSeconds(this.innerText)
+      };
+    }
+    let handleSubtitleClick = function(event) {
+      let video = event.target.attributes['data-video'].value;
+      let start = event.target.attributes['data-start'].value
+      let 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;
+    }
+
   }
   // @license-end
 </script>
diff --git a/templates/subtitle.md b/templates/subtitle.md
new file mode 100644
index 00000000..67906b4b
--- /dev/null
+++ b/templates/subtitle.md
@@ -0,0 +1,3 @@
+<TMPL_IF new>
+
+<a href="#<TMPL_VAR video>" class="subtitle" data-start="<TMPL_VAR start>" data-video="<TMPL_VAR video>">[<TMPL_VAR start>]</a> <span class="subtitle" data-start="<TMPL_VAR start>" title="<TMPL_VAR start">" data-video="<TMPL_VAR video>"><TMPL_VAR text></span><TMPL_ELSE><span class="subtitle" title="<TMPL_VAR start>" data-start="<TMPL_VAR start>" data-video="<TMPL_VAR video>"><TMPL_VAR text></span></TMPL_IF>
\ No newline at end of file