mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-12-02 02:47:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

awa

Browse source
This commit is contained in:
ashley 2024-08-27 23:11:07 +00:00
parent 1370c899fa
commit d01a34f9b5
1 changed files with 25 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
html/poketube.ejs
View file

@ -2117,30 +2117,40 @@ const canvasOpacity = "0.4"
let intervalId let intervalId
let oddFrame = true let oddFrame = true
let numWorkers = navigator.hardwareConcurrency || 4 let numWorkers = navigator.hardwareConcurrency || 4
let workers = []
const drawFrame = () => { const drawFrame = (workerId) => {
if (oddFrame) { if (workers[workerId].oddFrame) {
oddCtx.drawImage(AMvideo, 0, 0, oddCanvas.width, oddCanvas.height) workers[workerId].ctx.drawImage(AMvideo, 0, 0, workers[workerId].canvas.width, workers[workerId].canvas.height)
transitionToOddCanvas() transitionToOddCanvas(workerId)
} else { } else {
evenCtx.drawImage(AMvideo, 0, 0, evenCanvas.width, evenCanvas.height) workers[workerId].ctx.drawImage(AMvideo, 0, 0, workers[workerId].canvas.width, workers[workerId].canvas.height)
transitionToEvenCanvas() transitionToEvenCanvas(workerId)
} }
oddFrame = !oddFrame workers[workerId].oddFrame = !workers[workerId].oddFrame
}; };
const transitionToOddCanvas = () => { const transitionToOddCanvas = (workerId) => {
oddCanvas.style.opacity = canvasOpacity workers[workerId].canvas.style.opacity = canvasOpacity
evenCanvas.style.opacity = "0" workers[workerId === 0 ? numWorkers - 1 : workerId - 1].canvas.style.opacity = "0"
} }
const transitionToEvenCanvas = () => { const transitionToEvenCanvas = (workerId) => {
evenCanvas.style.opacity = canvasOpacity workers[workerId].canvas.style.opacity = canvasOpacity
oddCanvas.style.opacity = "0" workers[workerId === numWorkers - 1 ? 0 : workerId + 1].canvas.style.opacity = "0"
} }
const drawStart = () => { const drawStart = () => {
intervalId = window.setInterval(drawFrame, frameIntervalMs / numWorkers) for (let i = 0; i < numWorkers; i++) {
workers[i] = {
canvas: i % 2 === 0 ? oddCanvas : evenCanvas,
ctx: i % 2 === 0 ? oddCtx : evenCtx,
oddFrame: i % 2 === 0
}
workers[i].canvas.style.transition = `opacity ${frameIntervalMs / numWorkers}ms`
workers[i].canvas.style.zIndex = i
intervalId = window.setInterval(() => drawFrame(i), frameIntervalMs / numWorkers)
}
} }
const drawPause = () => { const drawPause = () => {
@ -2155,8 +2165,6 @@ const init = () => {
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 ${frameIntervalMs / numWorkers}ms`
} }
const cleanup = () => { const cleanup = () => {
@ -2169,6 +2177,7 @@ 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 {