Korbs/poke
Korbs/poke
1
Fork 0
Code Activity

test 3

Browse source
This commit is contained in:
ashley 2024-08-27 22:55:15 +00:00
parent c3b0209489
commit cb67431323
1 changed files with 26 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
html/poketube.ejs
View file

@ -2112,59 +2112,60 @@ const oddCtx = oddCanvas.getContext("2d");
const evenCtx = evenCanvas.getContext("2d"); const evenCtx = evenCanvas.getContext("2d");
const canvasOpacity = "0.4"; const canvasOpacity = "0.4";
const baseFrameIntervalMs = 500;
let intervalId; let intervalId;
let oddFrame = true; let oddFrame = true;
const getFrameInterval = () => { const getCoreCount = () => navigator.hardwareConcurrency || 2;
const cores = navigator.hardwareConcurrency || 2;
return Math.max(500 / cores, 33); const getOptimizedInterval = () => {
const coreCount = getCoreCount();
return Math.max(baseFrameIntervalMs / coreCount, 33);
}; };
const adjustCanvasSize = () => { const updateCanvasSize = () => {
const cores = navigator.hardwareConcurrency || 2; const coreCount = getCoreCount();
const size = Math.min(1000, 800 / cores); const size = Math.min(1000, 800 / coreCount);
oddCanvas.style.width = evenCanvas.style.width = `${size}px`; oddCanvas.style.width = evenCanvas.style.width = `${size}px`;
oddCanvas.style.height = evenCanvas.style.height = `${size * 0.75}px`; oddCanvas.style.height = evenCanvas.style.height = `${size * 0.75}px`;
}; };
const drawFrame = () => { const drawFrame = () => {
const ctx = oddFrame ? oddCtx : evenCtx;
const canvas = oddFrame ? oddCanvas : evenCanvas;
ctx.drawImage(AMvideo, 0, 0, canvas.width, canvas.height);
if (oddFrame) { if (oddFrame) {
oddCtx.drawImage(AMvideo, 0, 0, oddCanvas.width, oddCanvas.height); oddCanvas.style.opacity = canvasOpacity;
transitionToOddCanvas(); evenCanvas.style.opacity = "0";
} else { } else {
evenCtx.drawImage(AMvideo, 0, 0, evenCanvas.width, evenCanvas.height); evenCanvas.style.opacity = canvasOpacity;
transitionToEvenCanvas(); oddCanvas.style.opacity = "0";
} }
oddFrame = !oddFrame; 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 drawStart = () => {
const frameIntervalMs = getFrameInterval(); const frameIntervalMs = getOptimizedInterval();
intervalId = window.setInterval(drawFrame, frameIntervalMs); intervalId = setInterval(drawFrame, frameIntervalMs);
}; };
const drawPause = () => { const drawPause = () => {
if (intervalId) window.clearInterval(intervalId); if (intervalId) clearInterval(intervalId);
}; };
const init = () => { const init = () => {
AMvideo.pause(); AMvideo.pause();
AMvideo.play(); AMvideo.play();
adjustCanvasSize(); updateCanvasSize();
AMvideo.addEventListener("play", drawStart, false); AMvideo.addEventListener("play", drawStart, false);
AMvideo.addEventListener("pause", drawPause, false); AMvideo.addEventListener("pause", drawPause, false);
AMvideo.addEventListener("ended", 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 = () => { const cleanup = () => {
@ -2177,7 +2178,6 @@ const cleanup = () => {
window.addEventListener("load", init); window.addEventListener("load", init);
window.addEventListener("unload", cleanup); window.addEventListener("unload", cleanup);
</script> </script>
<style> <style>
.video-player-container, #video { .video-player-container, #video {