update videos array to be dynamic

2 years ago · e37525514c
2 changed files with 32 additions and 13 deletions
--- a/index.html
+++ b/index.html
@ -7,11 +7,6 @@
 </head>
 <body>
    <div id="visualizer">
-        <div class="video-layer">
-        </div>
-
-        <div class="video-layer">
-        </div>

        <canvas id="videoCanvas"></canvas>

--- a/script.js
+++ b/script.js
@ -4,16 +4,32 @@ let debugMode = true;
 const canvas = document.getElementById("videoCanvas");
 const ctx = canvas.getContext("2d");

-const videos = [createVideoElement(), createVideoElement()];
+let videosToLoad = 2
+const maxVideosToLoad = 9
+const videos = [];
 let videosLoaded = 0;
 let aspectRatio = 1;

-window.addEventListener("DOMContentLoaded", () => {
-  let previousVideo
-  videos.forEach((video) => {
-    previousVideo = selectRandomVideo(previousVideo || video)
-  });
-})
+function loadVideos(num) {
+  console.log(`Loading ${num} videos`)
+  while (num > 0) {
+    let video = createVideoElement()
+    video.addEventListener("loadedmetadata", handleVideoLoaded);
+    video.addEventListener("loaded", 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("ended", handleVideoEnded);
+    num++
+  }
+}
+
+loadVideos(videosToLoad)

 videos.forEach((video) => {
  video.addEventListener("loadedmetadata", handleVideoLoaded);
@ -162,10 +178,18 @@ function selectRandomVideo(videoElement) {
    });
 }

+
 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') { // Change 'Enter' to the desired key
+    if (event.key === 'Enter') {
        debugMode = !debugMode
        console.log("debugMode:",debugMode)
    }
+    if (event.key === 'ArrowDown') {
+        loadVideos(-1)
+    }
+    if (event.key === 'ArrowUp') {
+        loadVideos(1)
+    }
 });