From e37525514c6d5eb24e947c0f23724c3978252715 Mon Sep 17 00:00:00 2001 From: HxxxxxS <16c52527@opayq.com> Date: Mon, 6 May 2024 16:12:55 +0200 Subject: [PATCH] update videos array to be dynamic --- index.html | 5 ----- script.js | 40 ++++++++++++++++++++++++++++++++-------- 2 files changed, 32 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index da03713..f9f66fc 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,6 @@
-
-
- -
-
diff --git a/script.js b/script.js index 0624e20..4f39812 100644 --- 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) + } }); \ No newline at end of file