mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-26 17:58:17 +01:00
test commit 1
This commit is contained in:
parent
1642b99e1b
commit
9e5dd4f5f1
1 changed files with 55 additions and 42 deletions
|
@ -2105,70 +2105,83 @@ if (/[?&]autoplay=/.test(location.search)) {
|
||||||
<% if(!IsOldWindows) { %>
|
<% if(!IsOldWindows) { %>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const AMvideo = document.getElementById("video")
|
const AMvideo = document.getElementById("video");
|
||||||
const oddCanvas = document.getElementById("ambient-canvas-1")
|
const oddCanvas = document.getElementById("ambient-canvas-1");
|
||||||
const evenCanvas = document.getElementById("ambient-canvas-2")
|
const evenCanvas = document.getElementById("ambient-canvas-2");
|
||||||
const oddCtx = oddCanvas.getContext("2d")
|
const oddCtx = oddCanvas.getContext("2d");
|
||||||
const evenCtx = evenCanvas.getContext("2d")
|
const evenCtx = evenCanvas.getContext("2d");
|
||||||
|
|
||||||
const frameIntervalMs = 998
|
const canvasOpacity = "0.4";
|
||||||
const canvasOpacity = "0.4"
|
|
||||||
|
let intervalId;
|
||||||
|
let oddFrame = true;
|
||||||
|
|
||||||
|
const setFrameInterval = () => {
|
||||||
|
const cores = navigator.hardwareConcurrency || 2
|
||||||
|
return Math.max(500 / cores, 33);
|
||||||
|
};
|
||||||
|
|
||||||
|
const adjustCanvasSize = () => {
|
||||||
|
const cores = navigator.hardwareConcurrency || 2;
|
||||||
|
|
||||||
|
oddCanvas.style.width = evenCanvas.style.width = `${Math.min(1000, 800 / cores)}px`;
|
||||||
|
oddCanvas.style.height = evenCanvas.style.height = `${Math.min(1000, 600 / cores)}px`;
|
||||||
|
};
|
||||||
|
|
||||||
let intervalId
|
|
||||||
let oddFrame = true
|
|
||||||
const drawFrame = () => {
|
const drawFrame = () => {
|
||||||
if (oddFrame) {
|
if (oddFrame) {
|
||||||
oddCtx.drawImage(AMvideo, 0, 0, oddCanvas.width, oddCanvas.height)
|
oddCtx.drawImage(AMvideo, 0, 0, oddCanvas.width, oddCanvas.height);
|
||||||
transitionToOddCanvas()
|
transitionToOddCanvas();
|
||||||
} else {
|
} else {
|
||||||
evenCtx.drawImage(AMvideo, 0, 0, evenCanvas.width, evenCanvas.height)
|
evenCtx.drawImage(AMvideo, 0, 0, evenCanvas.width, evenCanvas.height);
|
||||||
transitionToEvenCanvas()
|
transitionToEvenCanvas();
|
||||||
}
|
}
|
||||||
oddFrame = !oddFrame
|
oddFrame = !oddFrame;
|
||||||
};
|
};
|
||||||
|
|
||||||
const transitionToOddCanvas = () => {
|
const transitionToOddCanvas = () => {
|
||||||
oddCanvas.style.opacity = canvasOpacity
|
oddCanvas.style.opacity = canvasOpacity;
|
||||||
evenCanvas.style.opacity = "0"
|
evenCanvas.style.opacity = "0";
|
||||||
}
|
};
|
||||||
|
|
||||||
const transitionToEvenCanvas = () => {
|
const transitionToEvenCanvas = () => {
|
||||||
evenCanvas.style.opacity = canvasOpacity
|
evenCanvas.style.opacity = canvasOpacity;
|
||||||
oddCanvas.style.opacity = "0"
|
oddCanvas.style.opacity = "0";
|
||||||
}
|
};
|
||||||
|
|
||||||
const drawStart = () => {
|
const drawStart = () => {
|
||||||
intervalId = window.setInterval(drawFrame, frameIntervalMs)
|
const frameIntervalMs = setFrameInterval(); // Get optimized frame interval
|
||||||
}
|
intervalId = window.setInterval(drawFrame, frameIntervalMs);
|
||||||
|
};
|
||||||
|
|
||||||
const drawPause = () => {
|
const drawPause = () => {
|
||||||
if (intervalId) window.clearInterval(intervalId)
|
if (intervalId) window.clearInterval(intervalId);
|
||||||
}
|
};
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
|
// Fixes an issue where Firefox/Chromium fails to load the ambient mode
|
||||||
|
AMvideo.pause();
|
||||||
|
AMvideo.play();
|
||||||
|
|
||||||
//fixes a issue where firefox/chromium fails to load the ambinet mode and doesnt load it. - please dont remove this line lmao
|
adjustCanvasSize(); // Adjust canvas size based on hardware
|
||||||
|
|
||||||
video.pause();video.play();
|
AMvideo.addEventListener("play", drawStart, false);
|
||||||
|
AMvideo.addEventListener("pause", drawPause, false);
|
||||||
|
AMvideo.addEventListener("ended", drawPause, false);
|
||||||
|
|
||||||
// DO NOT REMOVE
|
oddCanvas.style.transition = evenCanvas.style.transition = `opacity ${setFrameInterval()}ms`;
|
||||||
|
};
|
||||||
AMvideo.addEventListener("play", drawStart, false)
|
|
||||||
AMvideo.addEventListener("pause", drawPause, false)
|
|
||||||
AMvideo.addEventListener("ended", drawPause, false)
|
|
||||||
|
|
||||||
oddCanvas.style.transition = evenCanvas.style.transition = `opacity ${frameIntervalMs}ms`
|
|
||||||
}
|
|
||||||
|
|
||||||
const cleanup = () => {
|
const cleanup = () => {
|
||||||
AMvideo.removeEventListener("play", drawStart)
|
AMvideo.removeEventListener("play", drawStart);
|
||||||
AMvideo.removeEventListener("pause", drawPause)
|
AMvideo.removeEventListener("pause", drawPause);
|
||||||
AMvideo.removeEventListener("ended", drawPause)
|
AMvideo.removeEventListener("ended", drawPause);
|
||||||
drawPause();
|
drawPause();
|
||||||
}
|
};
|
||||||
|
|
||||||
|
window.addEventListener("load", init);
|
||||||
|
window.addEventListener("unload", cleanup);
|
||||||
|
|
||||||
window.addEventListener("load", init)
|
|
||||||
window.addEventListener("unload", cleanup)
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.video-player-container, #video {
|
.video-player-container, #video {
|
||||||
|
|
Loading…
Reference in a new issue