From cb674313232c8442a64a31d1d00963e5eb4af431 Mon Sep 17 00:00:00 2001 From: ashley Date: Tue, 27 Aug 2024 22:55:15 +0000 Subject: [PATCH] test 3 --- html/poketube.ejs | 52 +++++++++++++++++++++++------------------------ 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/html/poketube.ejs b/html/poketube.ejs index 75a779c1..d853babb 100644 --- a/html/poketube.ejs +++ b/html/poketube.ejs @@ -2112,59 +2112,60 @@ const oddCtx = oddCanvas.getContext("2d"); const evenCtx = evenCanvas.getContext("2d"); const canvasOpacity = "0.4"; +const baseFrameIntervalMs = 500; let intervalId; let oddFrame = true; -const getFrameInterval = () => { - const cores = navigator.hardwareConcurrency || 2; - return Math.max(500 / cores, 33); +const getCoreCount = () => navigator.hardwareConcurrency || 2; + +const getOptimizedInterval = () => { + const coreCount = getCoreCount(); + return Math.max(baseFrameIntervalMs / coreCount, 33); }; -const adjustCanvasSize = () => { - const cores = navigator.hardwareConcurrency || 2; - const size = Math.min(1000, 800 / cores); +const updateCanvasSize = () => { + const coreCount = getCoreCount(); + const size = Math.min(1000, 800 / coreCount); oddCanvas.style.width = evenCanvas.style.width = `${size}px`; oddCanvas.style.height = evenCanvas.style.height = `${size * 0.75}px`; }; const drawFrame = () => { + const ctx = oddFrame ? oddCtx : evenCtx; + const canvas = oddFrame ? oddCanvas : evenCanvas; + + ctx.drawImage(AMvideo, 0, 0, canvas.width, canvas.height); + if (oddFrame) { - oddCtx.drawImage(AMvideo, 0, 0, oddCanvas.width, oddCanvas.height); - transitionToOddCanvas(); + oddCanvas.style.opacity = canvasOpacity; + evenCanvas.style.opacity = "0"; } else { - evenCtx.drawImage(AMvideo, 0, 0, evenCanvas.width, evenCanvas.height); - transitionToEvenCanvas(); + evenCanvas.style.opacity = canvasOpacity; + oddCanvas.style.opacity = "0"; } + oddFrame = !oddFrame; }; -const transitionToOddCanvas = () => { - oddCanvas.style.opacity = canvasOpacity; - evenCanvas.style.opacity = "0"; -}; - -const transitionToEvenCanvas = () => { - evenCanvas.style.opacity = canvasOpacity; - oddCanvas.style.opacity = "0"; -}; - const drawStart = () => { - const frameIntervalMs = getFrameInterval(); - intervalId = window.setInterval(drawFrame, frameIntervalMs); + const frameIntervalMs = getOptimizedInterval(); + intervalId = setInterval(drawFrame, frameIntervalMs); }; const drawPause = () => { - if (intervalId) window.clearInterval(intervalId); + if (intervalId) clearInterval(intervalId); }; const init = () => { AMvideo.pause(); AMvideo.play(); - adjustCanvasSize(); + updateCanvasSize(); AMvideo.addEventListener("play", drawStart, false); AMvideo.addEventListener("pause", drawPause, false); AMvideo.addEventListener("ended", drawPause, false); - oddCanvas.style.transition = evenCanvas.style.transition = `opacity ${getFrameInterval()}ms`; + + const frameIntervalMs = getOptimizedInterval(); + oddCanvas.style.transition = evenCanvas.style.transition = `opacity ${frameIntervalMs}ms`; }; const cleanup = () => { @@ -2177,7 +2178,6 @@ const cleanup = () => { window.addEventListener("load", init); window.addEventListener("unload", cleanup); -