diff options
Diffstat (limited to 'templates/page.tmpl')
| -rw-r--r-- | templates/page.tmpl | 58 |
1 files changed, 56 insertions, 2 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> |