tagliatelle

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

timestamps.js (2221B)

      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       }
     40     } else if (e.target.classList.contains("rotate")) {
     41       e.preventDefault();
     42       const angle = Number(e.target.dataset.angle);
     43 
     44       if (video) {
     45 		applyRotation(video, angle);
     46 	  } else if (image) {
     47 		applyRotation(image, angle);
     48 	  }
     49 	}
     50   });
     51 }
     52 
     53 function applyRotation(element, angle) {
     54   element.style.transform = `rotate(${angle}deg)`;
     55   element.style.transformOrigin = "center center";
     56 
     57   if (angle === 90 || angle === 270) {
     58     element.style.maxWidth = "none";
     59   } else {
     60     element.style.maxWidth = "100%";
     61   }
     62 }
     63 
     64 // Run it
     65 document.addEventListener("DOMContentLoaded", () => {
     66   makeTimestampsClickable("current-description", "videoPlayer", "imageViewer");
     67 });