;

script.js

@@ -1,64 +1,62 @@
 // Define a debug mode variable
-let debugMode = true;
+let debugMode = true
 
-const canvas = document.getElementById("videoCanvas");
+const canvas = document.getElementById("videoCanvas")
-const ctx = canvas.getContext("2d");
+const ctx = canvas.getContext("2d")
 
 let videosToLoad = 2
 const maxVideosToLoad = 9
-const videos = [];
+const videos = []
-let videosLoaded = 0;
+let videosLoaded = 0
-let aspectRatio = 1;
+let aspectRatio = 1
 
 function loadVideos(num) {
   console.log(`Loading ${num} videos`)
   while (num > 0) {
     let video = createVideoElement()
-    video.addEventListener("loadedmetadata", handleVideoLoaded);
+    video.addEventListener("loadedmetadata", handleVideoLoaded)
-    video.addEventListener("loaded", handleVideoEnded);
+    video.addEventListener("loaded", handleVideoEnded)
-    video.addEventListener("ended", handleVideoEnded);
+    video.addEventListener("ended", handleVideoEnded)
     video.src = selectRandomVideo(video)
     videos.push(video)
     num--
   }
   while (num < 0) {
     let video = videos.pop()
-    video.removeEventListener("loadedmetadata", handleVideoLoaded);
+    video.removeEventListener("loadedmetadata", handleVideoLoaded)
-    video.removeEventListener("ended", handleVideoEnded);
+    video.removeEventListener("ended", handleVideoEnded)
     num++
   }
 }
 
-loadVideos(videosToLoad)
-
 videos.forEach((video) => {
-  video.addEventListener("loadedmetadata", handleVideoLoaded);
+  video.addEventListener("loadedmetadata", handleVideoLoaded)
-  video.addEventListener("ended", handleVideoEnded);
+  video.addEventListener("ended", handleVideoEnded)
-});
+})
 
 function createVideoElement() {
-  const video = document.createElement("video");
+  const video = document.createElement("video")
-  video.autoplay = true;
+  video.autoplay = true
-  video.muted = true;
+  video.muted = true
-  return video;
+  return video
 }
 
 function handleVideoLoaded() {
-  videosLoaded++;
+  videosLoaded++
   if (videosLoaded === videos.length) {
-    updateCanvasSize();
+    updateCanvasSize()
-    drawVideos();
+    drawVideos()
   }
 }
 
 function handleVideoEnded(event) {
-  const video = event.target;
+  const video = event.target
-  selectRandomVideo(video);
+  selectRandomVideo(video)
 }
 
 
 function drawVideos() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
 
   let blendModes = ["source-over","overlay","screen"]
 
@@ -76,102 +74,101 @@ function drawVideos() {
 
     // Use default blend mode for first video (i=0), repeat the rest of blendModes
     if (i === 0) {
-      ctx.globalCompositeOperation = blendModes[0];
+      ctx.globalCompositeOperation = blendModes[0]
     } else {
-      ctx.globalCompositeOperation = blendModes[(i - 1) % (blendModes.length - 1) + 1];
+      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";
+    ctx.globalCompositeOperation = "source-over"
   })
 
   // If debugMode is true, draw debug text
   if (debugMode) {
-    drawDebugText();
+    drawDebugText()
   }
 
   // Request next frame
-  requestAnimationFrame(drawVideos);
+  requestAnimationFrame(drawVideos)
 }
 
 function drawDebugText() {
   // Set font style and color
-  ctx.font = "16px Arial";
+  ctx.font = "16px Arial"
-  ctx.fillStyle = "white";
+  ctx.fillStyle = "white"
 
   let corners = [[0, 0], [1, 1], [0, 1], [1, 0]]; // Top-left, bottom-right, top-right, bottom-left
   let padding = 20
 
   videos.forEach((video, i) => {
     // Get the corner coordinates for the current video
-    const corner = corners[i];
+    const corner = corners[i]
 
     // Calculate the position of the text in the corner
     let positionX = corner[0] ? canvas.width : padding
     let positionY = corner[1] ? canvas.height : padding
 
     // Adjust position to ensure text is within the canvas bounds
-    //positionX = Math.max(0, Math.min(positionX, canvas.width - ctx.measureText(getFilename(video.src)).width));
+    //positionX = Math.max(0, Math.min(positionX, canvas.width - ctx.measureText(getFilename(video.src)).width))
-    positionY = Math.max(0, Math.min(positionY, canvas.height - padding*3));
+    positionY = Math.max(0, Math.min(positionY, canvas.height - padding*3))
 
     // Set text alignment based on corner
     ctx.textAlign = corner[0] ? "right" : "left"
     ctx.textBaseline = corner[1]  ? "bottom" : "top"
 
     // Draw debug text for the video
-    ctx.fillText(getFilename(video.src), positionX, positionY);
+    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);
+    ctx.fillText(formatTime(video.currentTime) + "/" + formatTime(video.duration), positionX, positionY + 40)
     // Add more debug information as needed
-  });
+  })
 }
 
 // Function to extract filename from full path
 function getFilename(src) {
-  const parts = src.split('/');
+  const parts = src.split('/')
-  return decodeURIComponent(parts[parts.length - 1].replace(/\%20/g, ' '));
+  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);
+  const hours = Math.floor(seconds / 3600)
-  const minutes = Math.floor((seconds % 3600) / 60);
+  const minutes = Math.floor((seconds % 3600) / 60)
-  const remainingSeconds = Math.floor(seconds % 60);
+  const remainingSeconds = Math.floor(seconds % 60)
-  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
 }
 
 function updateCanvasSize() {
   aspectRatio = Math.max(
     videos[0].videoWidth / videos[0].videoHeight,
     videos[1].videoWidth / videos[1].videoHeight
-  );
+  )
 
-  canvas.width = window.innerWidth;
+  canvas.width = window.innerWidth
-  canvas.height = window.innerWidth / aspectRatio;
+  canvas.height = window.innerWidth / aspectRatio
 }
 
-window.addEventListener("resize", updateCanvasSize);
+window.addEventListener("resize", updateCanvasSize)
 
-updateCanvasSize()
 
 function selectRandomVideo(videoElement) {
     fetch("/api/videos")
         .then(response => response.json())
         .then(videoFiles => {
-            const currentSrc = videoElement.src;
+            const currentSrc = videoElement.src
-            const filteredVideos = videoFiles.filter(video => video.src !== currentSrc);
+            const filteredVideos = videoFiles.filter(video => video.src !== currentSrc)
             if (filteredVideos.length > 0) {
-                const randomIndex = Math.floor(Math.random() * filteredVideos.length);
+                const randomIndex = Math.floor(Math.random() * filteredVideos.length)
-                const randomVideo = filteredVideos[randomIndex];
+                const randomVideo = filteredVideos[randomIndex]
-                videoElement.src = randomVideo.src;
+                videoElement.src = randomVideo.src
             } else {
-                console.log("No other videos available.");
+                console.log("No other videos available.")
             }
         })
-        .catch(error => console.error("Error fetching videos:", error));
+        .catch(error => console.error("Error fetching videos:", error))
 }
 
 document.addEventListener('keydown', function(event) {
@@ -187,4 +184,7 @@ document.addEventListener('keydown', function(event) {
     if (event.key === 'ArrowUp') {
         loadVideos(1)
     }
-});
+})
+
+loadVideos(videosToLoad)
+updateCanvasSize()