properly position debug text and change drawVideos to loop instead of boolish

script.js

@@ -40,44 +40,74 @@ function handleVideoEnded(event) {
   selectRandomVideo(video);
 }
 
-// Function to extract filename from full path and unescape it
+
-function extractFilename(src) {
+function drawVideos() {
-  // Split the path by '/'
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  const parts = src.split('/');
+
-  // Get the last part of the path (filename)
+  let blendModes = ["source-over","overlay","screen"]
-  const filename = parts[parts.length - 1];
+
-  // Unescape the filename and replace '%20' with whitespace
+  videos.forEach((video,i) => {
-  return decodeURIComponent(filename.replace(/\%20/g, ' '));
+    // Calculate scaling factor to fit the canvas
+    const scale = Math.max(canvas.width/video.videoWidth, canvas.height/video.videoHeight)
+
+    // Calculate scaled dimensions
+    const scaledWidth = video.videoWidth * scale
+    const scaledHeight = video.videoHeight * scale
+
+    // Calculate horizontal and vertical centering offset
+    const offsetX = (canvas.width-scaledWidth)/2
+    const offsetY = (canvas.height-scaledHeight)/2
+
+    // Use default blend mode for first video (i=0), repeat the rest of blendModes
+    if (i === 0) {
+      ctx.globalCompositeOperation = blendModes[0];
+    } else {
+      ctx.globalCompositeOperation = blendModes[(i - 1) % (blendModes.length - 1) + 1];
+    }
+
+    // Draw the current video frame onto the canvas
+    ctx.drawImage(video, offsetX, offsetY, scaledWidth, scaledHeight)
+
+    // 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
 function drawDebugText() {
   // Set font style and color
   ctx.font = "16px Arial";
   ctx.fillStyle = "white";
 
-  let corners = [[0,0],[1,1],[0,1],[1,0]];
+  let corners = [[0, 0], [1, 1], [0, 1], [1, 0]]; // Top-left, bottom-right, top-right, bottom-left
-  let padding = 20;
+  let padding = 20
 
-  videos.forEach((video,i) => {
+  videos.forEach((video, i) => {
-    //console.log("Drawing debug text for video",i,video);
+    // Get the corner coordinates for the current video
+    const corner = corners[i];
 
-    let corner = corners[i];
+    // Calculate the position of the text in the corner
-    let positionX = corner[0] === 0 ? padding : canvas.width - padding;
+    let positionX = corner[0] ? canvas.width : padding
-    let positionY = corner[1] === 0 ? padding : canvas.height - padding;
+    let positionY = corner[1] ? canvas.height : padding
 
-    // Adjust position for bottom right corner to stay within canvas bounds
+    // Adjust position to ensure text is within the canvas bounds
-    if (corner[0] === 1 && positionY + 40 > canvas.height) {
+    //positionX = Math.max(0, Math.min(positionX, canvas.width - ctx.measureText(getFilename(video.src)).width));
-      positionY = canvas.height - 40;
+    positionY = Math.max(0, Math.min(positionY, canvas.height - padding*3));
-    }
 
     // Set text alignment based on corner
-    ctx.textAlign = corner[0] === 0 ? "left" : "right";
+    ctx.textAlign = corner[0] ? "right" : "left"
-    ctx.textBaseline = corner[1] === 0 ? "top" : "bottom";
+    ctx.textBaseline = corner[1]  ? "bottom" : "top"
 
     // Draw debug text for the video
     ctx.fillText(getFilename(video.src), positionX, positionY);
-    ctx.fillText("Dimensions: " + video.videoWidth + "x" + video.videoHeight, positionX, positionY + 20);
+    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
   });
@@ -91,7 +121,6 @@ function getFilename(src) {
   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);
@@ -100,42 +129,6 @@ function formatTime(seconds) {
   return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
 }
 
-// Modify the drawVideos function to include debug text drawing
-function drawVideos() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-
-  // Resize the canvas to accommodate both videos side by side
-  canvas.width = Math.max(videos[0].videoWidth, videos[1].videoWidth);
-  canvas.height = Math.max(videos[0].videoHeight, videos[1].videoHeight);
-
-  // Calculate positions for each video
-  const video1X = (canvas.width - videos[0].videoWidth) / 2;
-  const video1Y = (canvas.height - videos[0].videoHeight) / 2;
-  const video2X = (canvas.width - videos[1].videoWidth) / 2;
-  const video2Y = (canvas.height - videos[1].videoHeight) / 2;
-
-  // Draw video 1
-  ctx.drawImage(videos[0], video1X, video1Y, videos[0].videoWidth, videos[0].videoHeight);
-
-  // Set composite operation to overlay
-  ctx.globalCompositeOperation = "overlay";
-
-  // Draw video 2
-  ctx.drawImage(videos[1], video2X, video2Y, videos[1].videoWidth, videos[1].videoHeight);
-
-  // Reset composite operation
-  ctx.globalCompositeOperation = "source-over";
-
-  // Draw debug text if debug mode is enabled
-  if (debugMode) {
-    drawDebugText();
-  }
-  // Request next frame
-  requestAnimationFrame(drawVideos);
-}
-
-
 function updateCanvasSize() {
   aspectRatio = Math.max(
     videos[0].videoWidth / videos[0].videoHeight,