Fiddle with page JS

1 files changed, 25 insertions, 11 deletions

diff --git a/templates/page.tmpl b/templates/page.tmpl
index 44b6a957..a764202d 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -73,21 +73,35 @@
   function parseSeconds(timeString) {
     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);
       }
+    }
+
+    let subtitles = document.getElementsByClassName('subtitle');
+    for (let i = 0; i < subtitles.length; i++) {
+      subtitles[i].onclick = handleSubtitleClick;
+    }
+
   }
   // @license-end
 </script>