diff --git a/script.js b/script.js index 9f4d7db..67b8c4f 100644 --- a/script.js +++ b/script.js @@ -1,64 +1,62 @@ // Define a debug mode variable -let debugMode = true; +let debugMode = true -const canvas = document.getElementById("videoCanvas"); -const ctx = canvas.getContext("2d"); +const canvas = document.getElementById("videoCanvas") +const ctx = canvas.getContext("2d") let videosToLoad = 2 const maxVideosToLoad = 9 -const videos = []; -let videosLoaded = 0; -let aspectRatio = 1; +const videos = [] +let videosLoaded = 0 +let aspectRatio = 1 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.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); + video.removeEventListener("loadedmetadata", handleVideoLoaded) + video.removeEventListener("ended", handleVideoEnded) num++ } } -loadVideos(videosToLoad) - videos.forEach((video) => { - video.addEventListener("loadedmetadata", handleVideoLoaded); - video.addEventListener("ended", handleVideoEnded); -}); + video.addEventListener("loadedmetadata", handleVideoLoaded) + video.addEventListener("ended", handleVideoEnded) +}) function createVideoElement() { - const video = document.createElement("video"); - video.autoplay = true; - video.muted = true; - return video; + const video = document.createElement("video") + video.autoplay = true + video.muted = true + return video } function handleVideoLoaded() { - videosLoaded++; + videosLoaded++ if (videosLoaded === videos.length) { - updateCanvasSize(); - drawVideos(); + updateCanvasSize() + drawVideos() } } function handleVideoEnded(event) { - const video = event.target; - selectRandomVideo(video); + const video = event.target + 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.fillStyle = "white"; + ctx.font = "16px Arial" + 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)); - positionY = Math.max(0, Math.min(positionY, canvas.height - padding*3)); + //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)) // 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(`Dimensions: ${video.videoWidth}x${video.videoHeight} ()`, positionX, positionY + 20); - ctx.fillText(formatTime(video.currentTime) + "/" + formatTime(video.duration), positionX, positionY + 40); + ctx.fillText(getFilename(video.src), positionX, positionY) + 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 - }); + }) } // Function to extract filename from full path function getFilename(src) { - const parts = src.split('/'); - return decodeURIComponent(parts[parts.length - 1].replace(/\%20/g, ' ')); + const parts = src.split('/') + 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 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')}`; + 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')}` } function updateCanvasSize() { aspectRatio = Math.max( videos[0].videoWidth / videos[0].videoHeight, videos[1].videoWidth / videos[1].videoHeight - ); + ) - canvas.width = window.innerWidth; - canvas.height = window.innerWidth / aspectRatio; + canvas.width = window.innerWidth + 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 filteredVideos = videoFiles.filter(video => video.src !== currentSrc); + const currentSrc = videoElement.src + const filteredVideos = videoFiles.filter(video => video.src !== currentSrc) if (filteredVideos.length > 0) { - const randomIndex = Math.floor(Math.random() * filteredVideos.length); - const randomVideo = filteredVideos[randomIndex]; - videoElement.src = randomVideo.src; + const randomIndex = Math.floor(Math.random() * filteredVideos.length) + const randomVideo = filteredVideos[randomIndex] + 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) } -}); \ No newline at end of file +}) + +loadVideos(videosToLoad) +updateCanvasSize() \ No newline at end of file