taggart

Simple golang tagging filesystem webapp
Log | Files | Refs

timestamps.js (1756B)

      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) {
     11   const container = document.getElementById(containerId);
     12   const video = document.getElementById(videoId);
     13 
     14   // Regex for timestamps: [h:mm:ss] or [mm:ss] or [ss]
     15   const timestampRegex = /\[(\d{1,2}(?::\d{2}){0,2})\]/g;
     16   // Regex for rotations: [rotate90], [rotate180], [rotate270], [rotate0]
     17   const rotateRegex = /\[rotate(0|90|180|270)\]/g;
     18 
     19   // Replace timestamps
     20   container.innerHTML = container.innerHTML.replace(timestampRegex, (match, ts) => {
     21     const seconds = parseTimestamp(ts);
     22     return `<a href="#" class="timestamp" data-time="${seconds}">${match}</a>`;
     23   });
     24 
     25   // Replace rotations
     26   container.innerHTML = container.innerHTML.replace(rotateRegex, (match, angle) => {
     27     return `<a href="#" class="rotate" data-angle="${angle}">${match}</a>`;
     28   });
     29 
     30   // Handle clicks
     31   container.addEventListener("click", e => {
     32     if (e.target.classList.contains("timestamp")) {
     33       e.preventDefault();
     34       const time = Number(e.target.dataset.time);
     35       video.currentTime = time;
     36       video.play();
     37     } else if (e.target.classList.contains("rotate")) {
     38       e.preventDefault();
     39       const angle = Number(e.target.dataset.angle);
     40       video.style.transform = `rotate(${angle}deg)`;
     41       video.style.transformOrigin = "center center";
     42     }
     43   });
     44 }
     45 
     46 // Run it
     47 document.addEventListener("DOMContentLoaded", () => {
     48   makeTimestampsClickable("current-description", "videoPlayer");
     49 });