tagliatelle

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

timestamps.js (2278B)

      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   const videoContainer = document.getElementById('videoContainer');
     15   const imageContainer = document.getElementById('imageContainer');
     16 
     17   // Regex for timestamps: [h:mm:ss] or [mm:ss] or [ss]
     18   const timestampRegex = /\[(\d{1,2}(?::\d{2}){0,2})\]/g;
     19   // Regex for rotations: [rotate90], [rotate180], [rotate270], [rotate0]
     20   const rotateRegex = /\[rotate(0|90|180|270)\]/g;
     21 
     22   // Replace timestamps
     23   container.innerHTML = container.innerHTML
     24     .replace(timestampRegex, (match, ts) => {
     25       const seconds = parseTimestamp(ts);
     26       return `<a href="#" class="timestamp" data-time="${seconds}">${match}</a>`;
     27     })
     28     .replace(rotateRegex, (match, angle) => {
     29       return `<a href="#" class="rotate" data-angle="${angle}">${match}</a>`;
     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         window.scrollTo({ top: 0, behavior: "smooth" });
     40       }
     41     } else if (e.target.classList.contains("rotate")) {
     42       e.preventDefault();
     43       const angle = Number(e.target.dataset.angle);
     44 
     45       if (video) {
     46 		applyRotation(video, angle);
     47 	  } else if (image) {
     48 		applyRotation(image, angle);
     49 	  }
     50 	}
     51   });
     52 }
     53 
     54 function applyRotation(element, angle) {
     55   element.style.transform = `rotate(${angle}deg)`;
     56   element.style.transformOrigin = "center center";
     57 
     58   if (angle === 90 || angle === 270) {
     59     element.style.maxWidth = "none";
     60   } else {
     61     element.style.maxWidth = "100%";
     62   }
     63 }
     64 
     65 // Run it
     66 document.addEventListener("DOMContentLoaded", () => {
     67   makeTimestampsClickable("current-description", "videoPlayer", "imageViewer");
     68 });