timestamps.js (1984B)
1 function parseTimestamp(ts) { 2 const parts = ts.split(":").map(Number).reverse(); 3 let seconds = 0; 4 if (parts[0]) seconds += parts[0]; // seconds 5 if (parts[1]) seconds += parts[1] * 60; // minutes 6 if (parts[2]) seconds += parts[2] * 3600; // hours 7 return seconds; 8 } 9 10 function makeTimestampsClickable(containerId, videoId, imageId) { 11 const container = document.getElementById(containerId); 12 const video = document.getElementById(videoId); 13 const image = document.getElementById(imageId); 14 15 // Regex for timestamps: [h:mm:ss] or [mm:ss] or [ss] 16 const timestampRegex = /\[(\d{1,2}(?::\d{2}){0,2})\]/g; 17 // Regex for rotations: [rotate90], [rotate180], [rotate270], [rotate0] 18 const rotateRegex = /\[rotate(0|90|180|270)\]/g; 19 20 // Replace timestamps 21 container.innerHTML = container.innerHTML.replace(timestampRegex, (match, ts) => { 22 const seconds = parseTimestamp(ts); 23 return `<a href="#" class="timestamp" data-time="${seconds}">${match}</a>`; 24 }); 25 26 // Replace rotations 27 container.innerHTML = container.innerHTML.replace(rotateRegex, (match, angle) => { 28 return `<a href="#" class="rotate" data-angle="${angle}">${match}</a>`; 29 }); 30 31 // Handle clicks 32 container.addEventListener("click", e => { 33 if (e.target.classList.contains("timestamp")) { 34 e.preventDefault(); 35 const time = Number(e.target.dataset.time); 36 if (video) { 37 video.currentTime = time; 38 video.play(); 39 } 40 } else if (e.target.classList.contains("rotate")) { 41 e.preventDefault(); 42 const angle = Number(e.target.dataset.angle); 43 // Apply rotation to whichever element exists 44 const target = video || image; 45 if (target) { 46 target.style.transform = `rotate(${angle}deg)`; 47 target.style.transformOrigin = "center center"; 48 } 49 } 50 }); 51 } 52 53 // Run it 54 document.addEventListener("DOMContentLoaded", () => { 55 makeTimestampsClickable("current-description", "videoPlayer", "imageViewer"); 56 });