diff options
Diffstat (limited to '')
| -rw-r--r-- | templates/page.tmpl | 44 | ||||
| -rw-r--r-- | templates/subtitle.md | 3 |
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 |