Make timestamps.js re-useable

This commit is contained in:
Kovid Goyal
2023-06-01 05:56:02 +05:30
parent 0d9f08f82e
commit af65b68ac3
4 changed files with 29 additions and 19 deletions

View File

@@ -4,6 +4,7 @@
* *
* Distributed under terms of the GPLv3 license * Distributed under terms of the GPLv3 license
*/ */
/*jshint esversion: 6 */
(function() { (function() {
"use strict"; "use strict";
@@ -39,7 +40,7 @@ function mark_current_link(sidebar_tree, a, onload) {
} }
function show_hash_in_sidebar(onload) { function show_hash_in_sidebar(onload) {
var sidebar_tree = document.querySelector('.sidebar-tree'); const sidebar_tree = get_sidebar_tree();
if (document.location.hash.length > 1) { if (document.location.hash.length > 1) {
var a = sidebar_tree.querySelector('a[href="' + document.location.hash + '"]'); var a = sidebar_tree.querySelector('a[href="' + document.location.hash + '"]');
if (a) mark_current_link(sidebar_tree, a, onload); if (a) mark_current_link(sidebar_tree, a, onload);
@@ -48,10 +49,16 @@ function show_hash_in_sidebar(onload) {
} }
} }
document.addEventListener("DOMContentLoaded", function() { function init_sidebar() {
const sidebar_tree = document.querySelector('.sidebar-tree');
if (!sidebar_tree || sidebar_tree.dataset.inited === 'true') return;
sidebar_tree.dataset.inited = 'true';
show_hash_in_sidebar(true); show_hash_in_sidebar(true);
window.addEventListener('hashchange', show_hash_in_sidebar.bind(null, false)); window.addEventListener('hashchange', show_hash_in_sidebar.bind(null, false));
}); }
document.addEventListener("DOMContentLoaded", init_sidebar);
init_sidebar();
}()); }());

View File

@@ -1,13 +1,13 @@
.timestamp-list dl { .video-with-timestamps dl {
display: grid; display: grid;
grid-template-columns: max-content auto; grid-template-columns: max-content auto;
} }
.timestamp-list dt { .video-with-timestamps dt {
grid-column-start: 1; grid-column-start: 1;
} }
.timestamp-list dd { .video-with-timestamps dd {
grid-column-start: 2; grid-column-start: 2;
margin-left: 1em; margin-left: 1em;
} }

View File

@@ -1,29 +1,35 @@
/*jshint esversion: 6 */ /*jshint esversion: 6 */
(function() { (function() {
'use strict';
function init_timestamps() { function init_timestamps() {
document.querySelectorAll('.timestamp-list').forEach(loc => { document.querySelectorAll('.video-with-timestamps').forEach(loc => {
var dl = loc.querySelector('dl'); if (loc.dataset.inited === 'true') return;
loc.dataset.inited = 'true';
const container_id = loc.id;
const dl = loc.querySelector('dl');
dl.querySelectorAll('dt').forEach(dt => { dl.querySelectorAll('dt').forEach(dt => {
dt.innerHTML = '<a href="javascript:void(0)" style="text-decoration: none"><time>' + dt.innerHTML + '</time></a>'; dt.innerHTML = '<a href="javascript:void(0)" style="text-decoration: none"><time>' + dt.innerHTML + '</time></a>';
dt.style.display = 'inline'; dt.style.display = 'inline';
}); });
dl.addEventListener('click', handle_timestamp_click); dl.addEventListener('click', handle_timestamp_click.bind(null, container_id));
}); });
} }
function handle_timestamp_click(e) { function handle_timestamp_click(container_id, e) {
if (e.target.tagName.toUpperCase() === 'TIME') { if (e.target.tagName.toUpperCase() === 'TIME') {
const timestamp = e.target.textContent; const timestamp = e.target.textContent;
if (timestamp) { if (timestamp) {
const [minutes, seconds] = timestamp.split(':'); const [minutes, seconds] = timestamp.split(':');
const totalSeconds = parseInt(minutes) * 60 + parseInt(seconds); const total_seconds = parseInt(minutes) * 60 + parseInt(seconds);
const video = document.querySelector('video'); const video = document.querySelector('#' + container_id + ' video');
video.currentTime = totalSeconds; video.currentTime = total_seconds;
video.play(); video.play();
} }
} }
} }
window.addEventListener('load', init_timestamps); init_timestamps();
document.addEventListener('DOMContentloaded', init_timestamps);
})(); })();

View File

@@ -1,5 +1,7 @@
.. raw:: html .. raw:: html
<div id="intro-video-container" class="video-with-timestamps">
<video controls width="640" height="360" poster="_static/poster.png"> <video controls width="640" height="360" poster="_static/poster.png">
<source src="https://download.calibre-ebook.com/videos/kitty.mp4" type="video/mp4"> <source src="https://download.calibre-ebook.com/videos/kitty.mp4" type="video/mp4">
<source src="https://download.calibre-ebook.com/videos/kitty.webm" type="video/webm"> <source src="https://download.calibre-ebook.com/videos/kitty.webm" type="video/webm">
@@ -9,11 +11,6 @@
Watch kitty in action! Watch kitty in action!
.. raw:: html
<div id="timestamps-for-intro-video" class="timestamp-list">
Timestamps for the above video: Timestamps for the above video:
00:00 00:00