mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-22 14:37:56 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

test

Browse source
This commit is contained in:
Ashley //// 2024-02-26 20:24:13 +00:00
parent 67fc4b76df
commit 645c979c18
1 changed files with 16 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
html/poketube.ejs
View file

@ -1033,7 +1033,7 @@ display: block; !important;" autoplay controls>
</video> </video>
<% if (!a) { %> <% if (!a) { %>
<canvas width="150" height="150" id="ambient-canvas"></canvas> <canvas width="12" height="6" id="ambient-canvas"></canvas>
<% } %> <% } %>
@ -1889,61 +1889,41 @@ if (/[?&]autoplay=/.test(location.search)) {
<% if(!IsOldWindows) { %> <% if(!IsOldWindows) { %>
<script> <script>
let requestId;
let lastDrawTime = 0; // Timestamp of the last draw request
const loopStart = () => {
const now = performance.now();
const elapsed = now - lastDrawTime;
if (elapsed >= (1000 / 30)) { // Adjusted for milliseconds
lastDrawTime = now;
draw();
}
// Continue loop using requestAnimationFrame
requestId = window.requestAnimationFrame(loopStart);
};
const loopCancel = () => {
window.cancelAnimationFrame(requestId)
requestId = undefined
}
const AMvideo = document.getElementById("video") const AMvideo = document.getElementById("video")
const canvas = document.getElementById("ambient-canvas") const canvas = document.getElementById("ambient-canvas")
const ctx = canvas.getContext("2d") const ctx = canvas.getContext("2d")
let step; let requestId;
let lastDrawTime = 0; // Timestamp of the last draw request
const loop = () => {
const now = performance.now();
const elapsed = now - lastDrawTime;
if (elapsed >= (1000 / 24)) {
lastDrawTime = now;
ctx.drawImage(AMvideo, 0, 0, canvas.width, canvas.height);
}
const draw = () => { requestId = window.requestAnimationFrame(loop);
ctx.drawImage(AMvideo, 0, 0, canvas.width, canvas.height); };
};
const drawLoop = () => { const drawStart = () => {
draw() requestId = window.requestAnimationFrame(loop)
step = window.requestAnimationFrame(drawLoop)
} }
const drawPause = () => { const drawPause = () => {
window.cancelAnimationFrame(step) window.cancelAnimationFrame(requestId)
step = undefined requestId = undefined
} }
const init = () => { const init = () => {
video.pause();video.play(); video.pause();video.play();
AMvideo.addEventListener("loadeddata", draw, false) AMvideo.addEventListener("play", drawStart, false)
AMvideo.addEventListener("seeked", draw, false)
AMvideo.addEventListener("play", drawLoop, false)
AMvideo.addEventListener("pause", drawPause, false) AMvideo.addEventListener("pause", drawPause, false)
AMvideo.addEventListener("ended", drawPause, false) AMvideo.addEventListener("ended", drawPause, false)
} }
const cleanup = () => { const cleanup = () => {
AMvideo.removeEventListener("loadeddata", draw) AMvideo.removeEventListener("play", drawStart)
AMvideo.removeEventListener("seeked", draw)
AMvideo.removeEventListener("play", drawLoop)
AMvideo.removeEventListener("pause", drawPause) AMvideo.removeEventListener("pause", drawPause)
AMvideo.removeEventListener("ended", drawPause) AMvideo.removeEventListener("ended", drawPause)
} }