summaryrefslogtreecommitdiffstats
path: root/templates/page.tmpl
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--templates/page.tmpl132
1 files changed, 70 insertions, 62 deletions
diff --git a/templates/page.tmpl b/templates/page.tmpl
index f12dfd12..cc8357d7 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -42,7 +42,7 @@
/*
SeekToTime - simple script to add video time jump functionality to timestamp links
- Copyright (C) 2020 Grant Shangreaux
+ Copyright (C) 2020-2024 Grant Shangreaux and Sacha Chua
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
@@ -65,9 +65,7 @@
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;
+ let timestamps;
// expects a string like "mm:ss.mmm"
function parseSeconds(timeString) {
@@ -78,36 +76,27 @@
function handleSubtitleClick(event) {
var video = event.target.getAttribute('data-video');
- var start = event.target.getAttribute('data-start');
- let m = video.match(/(mainVideo|qnaVideo)-(.*)/);
- if (m) {
- video = m[2] + '-' + m[1];
- }
- var videoElem = document.getElementById(video);
- if (videoElem) {
- videoElem.currentTime = parseSeconds(start);
- videoElem.scrollIntoView();
- }
- event.preventDefault();
- }
+ var start = event.target.getAttribute('data-start');
+ const stickyVideo = document.querySelector('.transcript #' + video);
+ const indexCardVideo = document.querySelector('.vid #' + video);
+ if (indexCardVideo) {
+ indexCardVideo.currentTime = parseSeconds(start);
+ }
+ if (stickyVideo && window.getComputedStyle(stickyVideo).display == 'block') {
+ stickyVideo.currentTime = parseSeconds(start);
+ } else {
+ indexCardVideo.scrollIntoView();
+ }
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ }
window.onload = function initScript() {
- mainVideo = document.getElementById("mainVideo");
- qnaVideo = document.getElementById("qnaVideo");
- timestamps = document.getElementsByClassName("time-link");
- var len = timestamps.length;
- for (let i = 0; i < len; i++) {
- timestamps[i].onclick = function () {
- videoType = this.href.split("/").pop();
- video = (videoType == "#mainVideo") ? mainVideo : qnaVideo;
- video.currentTime = parseSeconds(this.innerText)
- };
- }
let subtitles = document.getElementsByClassName('subtitle');
for (let i = 0; i < subtitles.length; i++) {
subtitles[i].onclick = handleSubtitleClick;
}
-
}
// @license-end
</script>
@@ -409,49 +398,68 @@ Last edited <TMPL_VAR MTIME>
}
elem.parentNode.replaceChild(list, elem);
}
-
- document.querySelectorAll('pre.chapters').forEach(displayChapters);
+
+ document.querySelectorAll('pre.chapters').forEach(displayChapters);
var video = document.querySelector('video.reload');
-if (video) {
- var myVar = setInterval(reloadAsNeeded, 1000);
- var oldTime = '';
- function reloadAsNeeded() {
- if ((video.paused != true && (video.currentTime - oldTime) == 0 && video.currentTime != 0)) {
- var source = video.querySelector('source');
- var oldVideo = source.src;
- source.src = '';
- source.src = oldVideo;
- video.load();
- video.play();
- }
- oldTime = video.currentTime;
- };
-}
+ if (video) {
+ var myVar = setInterval(reloadAsNeeded, 1000);
+ var oldTime = '';
+ function reloadAsNeeded() {
+ if ((video.paused != true && (video.currentTime - oldTime) == 0 && video.currentTime != 0)) {
+ var source = video.querySelector('source');
+ var oldVideo = source.src;
+ source.src = '';
+ source.src = oldVideo;
+ video.load();
+ video.play();
+ }
+ oldTime = video.currentTime;
+ };
+ }
+
+ /* videoType: mainVideo, qanda */
+ function addStickyVideo(videoType) {
+ const transcriptDiv = document.querySelector('.transcript-' + videoType);
+ const video = document.querySelector('.vid.' + videoType + ' video');
+ if (!video || !transcriptDiv) return;
+ if (transcriptDiv.querySelector('.vid'))
+ transcriptDiv.querySelector('.vid').remove();
+ // already has it
+ // TODO: Make a copy of the video and place it at the start of the transcript div, positioned to the left, and sticky, but only on large screens.
+ const videoCopy = video.cloneNode(true);
+ transcriptDiv.prepend(videoCopy);
+ videoCopy.classList.add('sticky-video');
+ // TODO: fix the ID
+ }
// @license-end
// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0
- // Copyright (c) 2023 Sacha Chua - CC0 Public Domain
- function highlightTalks() {
- // highlight any talk mentioned in the highlight URL parameter
- var params = new URLSearchParams(window.location.search);
- if (!params.get('highlight')) return;
- var talks = params.get('highlight').split(',').filter(function(o) { return o.match(/^[-a-z0-9]+$/); });
- var regexp = new RegExp('/talks/(' + talks.join('|') + ')/?$');
- document.querySelectorAll('a[href]').forEach(function(link) {
- console.debug(link.getAttribute('href'), link.getAttribute('href').match(regexp));
- if (link.getAttribute('href').match(regexp)) {
- console.debug(link);
- link.classList.add('highlight');
- }
- });
- }
+ // Copyright (c) 2023 Sacha Chua - CC0 Public Domain
+ function highlightTalks() {
+ // highlight any talk mentioned in the highlight URL parameter
+ var params = new URLSearchParams(window.location.search);
+ if (!params.get('highlight')) return;
+ var talks = params.get('highlight').split(',').filter(function(o) { return o.match(/^[-a-z0-9]+$/); });
+ var regexp = new RegExp('/talks/(' + talks.join('|') + ')/?$');
+ document.querySelectorAll('a[href]').forEach(function(link) {
+ console.debug(link.getAttribute('href'), link.getAttribute('href').match(regexp));
+ if (link.getAttribute('href').match(regexp)) {
+ console.debug(link);
+ link.classList.add('highlight');
+ }
+ });
+ }
- addEventListener('DOMContentLoaded', highlightTalks);
- // @license-end
+ addEventListener('DOMContentLoaded', highlightTalks);
+ addEventListener('DOMContentLoaded', function() {
+ addStickyVideo('mainVideo');
+ addStickyVideo('qanda');
+ });
+ // @license-end
</script>
</body>
</html>