diff options
Diffstat (limited to '')
| -rw-r--r-- | templates/page.tmpl | 58 | ||||
| -rw-r--r-- | templates/vid.md | 2 |
2 files changed, 57 insertions, 3 deletions
diff --git a/templates/page.tmpl b/templates/page.tmpl index 28d650ad..576f3d66 100644 --- a/templates/page.tmpl +++ b/templates/page.tmpl @@ -37,6 +37,61 @@ </TMPL_LOOP> </TMPL_UNLESS> +<script> + // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0-or-later + /* + + SeekToTime - simple script to add video time jump functionality to timestamp links + Copyright (C) 2020 Grant Shangreaux + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <https://www.gnu.org/licenses/>. + + This script enables wiki editors to create anchor tags with the class "time-link" + that will be parsed for seeking to specific time stamps in the main video on a page. + The tag should look like this: + + <a href="#mainVideo" class="time-link">mm:ss</a> + + 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" + function parseSeconds(timeString) { + const times = timeString.split(":"); + const minutes = parseFloat(times[0]); + const seconds = parseFloat(times[1]); + return (minutes * 60) + seconds; + } + + 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) + }; + } + } + // @license-end +</script> </head> <body> @@ -48,7 +103,7 @@ <span> <span class="parentlinks"> <TMPL_LOOP PARENTLINKS> -<a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a>/ +<a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a>/ </TMPL_LOOP> </span> <span class="title"> @@ -221,6 +276,5 @@ Last edited <TMPL_VAR MTIME> <TMPL_IF HTML5></footer><TMPL_ELSE></div></TMPL_IF> <TMPL_IF HTML5></article><TMPL_ELSE></div></TMPL_IF> - </body> </html> diff --git a/templates/vid.md b/templates/vid.md index 803e0fb6..3d48a0bb 100644 --- a/templates/vid.md +++ b/templates/vid.md @@ -1,5 +1,5 @@ <div class="vid"> -<video controls preload="metadata"> +<video controls preload="metadata" id="<TMPL_VAR vidid>"> <source src="<TMPL_VAR src>" type="<TMPL_VAR type>" /> <TMPL_IF subtitles> <track label="English" kind="subtitles" srclang="en" src="<TMPL_VAR subtitles>" default /> |