add cachedVideos and only hit api when cache is empty

script.js

@@ -10,13 +10,23 @@ const videos = []
 let videosLoaded = 0
 let aspectRatio = 1
 
+let cachedVideos = []
+
+let showText = true
+
+function debugLog(...args) {
+  if (debugMode) {
+    console.log(...args)
+  }
+}
+
 function loadVideos(num) {
-  console.log(`Loading ${num} videos`)
+  debugLog(`Loading ${num} videos`)
   while (num > 0) {
     let video = createVideoElement()
     video.addEventListener("loadedmetadata", handleVideoLoaded)
-    video.addEventListener("loaded", handleVideoEnded)
     video.addEventListener("ended", handleVideoEnded)
+    video.addEventListener("error", handleVideoEnded)
     video.src = selectRandomVideo(video)
     videos.push(video)
     num--
@@ -51,10 +61,10 @@ function handleVideoLoaded() {
 
 function handleVideoEnded(event) {
   const video = event.target
+  //debugLog(video,event)
   selectRandomVideo(video)
 }
 
-
 function drawVideos() {
   ctx.clearRect(0, 0, canvas.width, canvas.height)
 
@@ -86,8 +96,8 @@ function drawVideos() {
     ctx.globalCompositeOperation = "source-over"
   })
 
-  // If debugMode is true, draw debug text
+  // If showText is true, draw debug text
-  if (debugMode) {
+  if (showText) {
     drawDebugText()
   }
 
@@ -138,7 +148,7 @@ function formatTime(seconds) {
   const hours = Math.floor(seconds / 3600)
   const minutes = Math.floor((seconds % 3600) / 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?hours.toString().padStart(2, '0')+':':'')}${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
 }
 
 function updateCanvasSize() {
@@ -153,30 +163,44 @@ function updateCanvasSize() {
 
 window.addEventListener("resize", updateCanvasSize)
 
-
+function getSourceFiles() {
-function selectRandomVideo(videoElement) {
+  debugLog("Getting source files")
-    fetch("/api/videos")
+  return fetch("/api/videos")
       .then(response => response.json())
       .then(videoFiles => {
-            const currentSrc = videoElement.src
+          debugLog("Success")
-            const filteredVideos = videoFiles.filter(video => video.src !== currentSrc)
+          cachedVideos = videoFiles;
+      })
+      .catch(error => console.error("Error fetching videos:", error));
+}
+
+function selectRandomVideo(videoElement) {
+  if (cachedVideos.length) {
+    const currentSrc = videoElement.src;
+    const filteredVideos = cachedVideos.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.")
+        debugLog("No other videos available.");
+        getSourceFiles().then(()=>{
+          selectRandomVideo(videoElement)
+        })
     }
+  } else {
+    debugLog("Cache empty, doing new request")
+    getSourceFiles().then(()=>{
+      selectRandomVideo(videoElement)
     })
-        .catch(error => console.error("Error fetching videos:", error))
+  }
 }
 
 document.addEventListener('keydown', function(event) {
     console.log('keyDown',event)
     // Check if the pressed key is the one you want to bind
     if (event.key === 'Enter') {
-        debugMode = !debugMode
+        showText = !showText
-        console.log("debugMode:",debugMode)
     }
     if (event.key === 'ArrowDown') {
         loadVideos(-1)
@@ -186,5 +210,7 @@ document.addEventListener('keydown', function(event) {
     }
 })
 
+getSourceFiles().then(()=>{
   loadVideos(videosToLoad)
   updateCanvasSize()
+})