From df2e9f899dbfaa8b07e89f824ca638fdcc04981b Mon Sep 17 00:00:00 2001 From: HxxxxxS <16c52527@opayq.com> Date: Mon, 6 May 2024 22:58:12 +0200 Subject: [PATCH] =?UTF-8?q?ymse=20sm=C3=A5plukk?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 59 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 25 deletions(-) diff --git a/script.js b/script.js index 1df3add..c25d02e 100644 --- a/script.js +++ b/script.js @@ -8,8 +8,8 @@ let videosToLoad = 2 const maxVideosToLoad = 9 const videos = [] let videosLoaded = 0 -let aspectRatio = 1 +let aspectRatio = 1 let cachedVideos = [] let showText = true @@ -24,6 +24,7 @@ const parameterStore = { blur: 0, }, transformParams: { + scale: 1, // Additional parameters specific to the tile mode or other transformation tilePositionX: 0, // X-coordinate for positioning the tiled video tilePositionY: 0, // Y-coordinate for positioning the tiled video @@ -54,7 +55,7 @@ function applyPreset(presetName) { for (const [category, categoryParams] of Object.entries(preset)) { // Check if the category exists in the parameter store if (parameterStore.hasOwnProperty(category)) { - // Iterate over each parameter in the preset + // Iterate over each parameter in the category for (const [paramKey, paramValue] of Object.entries(categoryParams)) { // Update the corresponding parameter in the parameter store parameterStore[category][paramKey] = paramValue; @@ -78,6 +79,11 @@ function debugLog(...args) { function loadVideos(num) { debugLog(`Loading ${num} videos`) + if (num < 0) { + num = Math.max(num,-Math.abs(maxVideosToLoad)) + } else { + num = Math.min(num,Math.abs(maxVideosToLoad)) + } while (num > 0) { let video = createVideoElement() video.addEventListener("loadedmetadata", handleVideoLoaded) @@ -91,15 +97,11 @@ function loadVideos(num) { let video = videos.pop() video.removeEventListener("loadedmetadata", handleVideoLoaded) video.removeEventListener("ended", handleVideoEnded) + video.removeEventListener("error", handleVideoEnded) num++ } } -videos.forEach((video) => { - video.addEventListener("loadedmetadata", handleVideoLoaded) - video.addEventListener("ended", handleVideoEnded) -}) - function createVideoElement() { const video = document.createElement("video") video.autoplay = true @@ -124,8 +126,6 @@ function handleVideoEnded(event) { function drawVideos() { ctx.clearRect(0, 0, canvas.width, canvas.height) - let blendModes = ["screen","overlay","difference","lighten"] - videos.forEach((video,i) => { // Calculate scaling factor to fit the canvas const scale = Math.max(canvas.width/video.videoWidth, canvas.height/video.videoHeight) @@ -142,8 +142,11 @@ function drawVideos() { if (i === 0) { ctx.globalCompositeOperation = "source-over" } else { - ctx.globalCompositeOperation = blendModes[i % blendModes.length] + // Using values from parameterStore + ctx.globalCompositeOperation = parameterStore.blendModeParams.mode + ctx.globalAlpha = parameterStore.blendModeParams.opacity } + video.globalCompositeOperation = ctx.globalCompositeOperation || "default" // Draw the current video frame onto the canvas ctx.drawImage(video, offsetX, offsetY, scaledWidth, scaledHeight) @@ -179,13 +182,14 @@ function drawDebugText() { ctx.textBaseline = "top"; // Draw the active preset text - ctx.fillText(presetText, positionX, positionY); + ctx.fillText(`${presetText}`, positionX, positionY); + ctx.fillText(`${canvas.width}x${canvas.height} (${aspectRatio.toFixed(2)})`, positionX, positionY+20); - let corners = [[0, 0], [1, 1], [0, 1], [1, 0]]; // Top-left, bottom-right, top-right, bottom-left + let corners = [[0, 0], [1, 1], [0, 1], [1, 0]]; // Top-left, bottom-right, bottom-left, top-right videos.forEach((video, i) => { // Get the corner coordinates for the current video - const corner = corners[i] + const corner = corners[i % corners.length] // Calculate the position of the text in the corner let positionX = corner[0] ? canvas.width : padding @@ -203,6 +207,7 @@ function drawDebugText() { 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(`${video.globalCompositeOperation}` ,positionX,positionY+60) // Add more debug information as needed }) } @@ -213,22 +218,27 @@ function getFilename(src) { 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?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 ? 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 - ) + let maxAspectRatio = 0; + + // Calculate the maximum aspect ratio among all videos + for (let i = 0; i < videos.length; i++) { + const videoAspectRatio = videos[i].videoWidth / videos[i].videoHeight; + maxAspectRatio = Math.max(maxAspectRatio, videoAspectRatio); + } - canvas.width = window.innerWidth - canvas.height = window.innerWidth / aspectRatio + canvas.width = window.innerWidth; + canvas.height = window.innerWidth / maxAspectRatio; } window.addEventListener("resize", updateCanvasSize) @@ -268,7 +278,6 @@ 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') { showText = !showText }