refactor

script.js

@@ -40,14 +40,44 @@ function handleVideoEnded(event) {
   selectRandomVideo(video);
 }
 
-// Function to extract filename from full path and unescape it
-function extractFilename(src) {
-  // Split the path by '/'
-  const parts = src.split('/');
-  // Get the last part of the path (filename)
-  const filename = parts[parts.length - 1];
-  // Unescape the filename and replace '%20' with whitespace
-  return decodeURIComponent(filename.replace(/\%20/g, ' '));
+function drawVideos() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  // Calculate scaling factors for each video to fit the canvas
+  const scale1 = Math.max(canvas.width / videos[0].videoWidth, canvas.height / videos[0].videoHeight);
+  const scale2 = Math.max(canvas.width / videos[1].videoWidth, canvas.height / videos[1].videoHeight);
+
+  // Calculate scaled dimensions for each video
+  const scaledWidth1 = videos[0].videoWidth * scale1;
+  const scaledHeight1 = videos[0].videoHeight * scale1;
+  const scaledWidth2 = videos[1].videoWidth * scale2;
+  const scaledHeight2 = videos[1].videoHeight * scale2;
+
+  // Calculate horizontal and vertical centering offsets for each video
+  const offsetX1 = (canvas.width - scaledWidth1) / 2;
+  const offsetY1 = (canvas.height - scaledHeight1) / 2;
+  const offsetX2 = (canvas.width - scaledWidth2) / 2;
+  const offsetY2 = (canvas.height - scaledHeight2) / 2;
+
+  // Draw video 1
+  ctx.drawImage(videos[0], offsetX1, offsetY1, scaledWidth1, scaledHeight1);
+
+  // Set composite operation to overlay
+  ctx.globalCompositeOperation = "overlay";
+
+  // Draw video 2
+  ctx.drawImage(videos[1], offsetX2, offsetY2, scaledWidth2, scaledHeight2);
+
+  // Reset composite operation
+  ctx.globalCompositeOperation = "source-over";
+
+  // If debugMode is true, draw debug text
+  if (debugMode) {
+    drawDebugText();
+  }
+
+  // Request next frame
+  requestAnimationFrame(drawVideos);
 }
 
 // Function to draw debug text on the canvas
@@ -56,6 +86,7 @@ function drawDebugText() {
   ctx.font = "16px Arial";
   ctx.fillStyle = "white";
 
+  let colors = ["blue","red","yellow","green","white","pink","purple"]
   let corners = [[0,0],[1,1],[0,1],[1,0]];
   let padding = 20;
 
@@ -80,18 +111,21 @@ function drawDebugText() {
     ctx.fillText("Dimensions: " + video.videoWidth + "x" + video.videoHeight, positionX, positionY + 20);
     ctx.fillText(formatTime(video.currentTime) + "/" + formatTime(video.duration), positionX, positionY + 40);
     // Add more debug information as needed
+
+    // Draw wireframes
+    ctx.strokeStyle = colors[i % colors.length];
+    ctx.lineWidth = 2;
+    console.log(ctx,video)
+    //ctx.strokeRect(offsetX2-1, offsetY2-1, scaledWidth2+1, scaledHeight2+1);
   });
 }
 
-
-
 // Function to extract filename from full path
 function getFilename(src) {
   const parts = src.split('/');
   return decodeURIComponent(parts[parts.length - 1].replace(/\%20/g, ' '));
 }
 
-
 // Helper function to format time in HH:MM:SS format
 function formatTime(seconds) {
   const hours = Math.floor(seconds / 3600);
@@ -99,61 +133,6 @@ function formatTime(seconds) {
   const remainingSeconds = Math.floor(seconds % 60);
   return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
 }
-function drawVideos() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-  // Calculate scaling factors for each video to fit the canvas
-  const scale1 = Math.max(canvas.width / videos[0].videoWidth, canvas.height / videos[0].videoHeight);
-  const scale2 = Math.max(canvas.width / videos[1].videoWidth, canvas.height / videos[1].videoHeight);
-
-  // Calculate scaled dimensions for each video
-  const scaledWidth1 = videos[0].videoWidth * scale1;
-  const scaledHeight1 = videos[0].videoHeight * scale1;
-  const scaledWidth2 = videos[1].videoWidth * scale2;
-  const scaledHeight2 = videos[1].videoHeight * scale2;
-
-  // Calculate horizontal and vertical centering offsets for each video
-  const offsetX1 = (canvas.width - scaledWidth1) / 2;
-  const offsetY1 = (canvas.height - scaledHeight1) / 2;
-  const offsetX2 = (canvas.width - scaledWidth2) / 2;
-  const offsetY2 = (canvas.height - scaledHeight2) / 2;
-
-  // Draw video 1
-  ctx.drawImage(videos[0], offsetX1, offsetY1, scaledWidth1, scaledHeight1);
-
-  // Draw bounding box for video 1 if debugMode is true
-  if (debugMode) {
-    ctx.strokeStyle = "red";
-    ctx.lineWidth = 2;
-    ctx.strokeRect(offsetX1-1, offsetY1-1, scaledWidth1+1, scaledHeight1+1);
-  }
-
-  // Set composite operation to overlay
-  ctx.globalCompositeOperation = "overlay";
-
-  // Draw video 2
-  ctx.drawImage(videos[1], offsetX2, offsetY2, scaledWidth2, scaledHeight2);
-
-  // Draw bounding box for video 2 if debugMode is true
-  if (debugMode) {
-    ctx.strokeStyle = "blue";
-    ctx.lineWidth = 2;
-    ctx.strokeRect(offsetX2-1, offsetY2-1, scaledWidth2+1, scaledHeight2+1);
-  }
-
-  // Reset composite operation
-  ctx.globalCompositeOperation = "source-over";
-
-  // If debugMode is true, draw debug text
-  if (debugMode) {
-    drawDebugText();
-  }
-
-  // Request next frame
-  requestAnimationFrame(drawVideos);
-}
-
-
 
 function updateCanvasSize() {
   aspectRatio = Math.max(