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

Use setInterval and two canvases for ambient mode

Browse source
This commit is contained in:
Emre Özcan 2024-03-20 19:00:30 +03:00
parent 6390fb6155
commit c9d19b76a6
1 changed files with 36 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
html/poketube.ejs
View file

@ -1075,7 +1075,8 @@ display: block; !important;" autoplay controls>
</video> </video>
<% if (!a) { %> <% if (!a) { %>
<canvas width="12" height="6" id="ambient-canvas"></canvas> <canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-1"></canvas>
<canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-2"></canvas>
<% } %> <% } %>
@ -1930,29 +1931,43 @@ if (/[?&]autoplay=/.test(location.search)) {
<script> <script>
const AMvideo = document.getElementById("video") const AMvideo = document.getElementById("video")
const canvas = document.getElementById("ambient-canvas") const oddCanvas = document.getElementById("ambient-canvas-1")
const ctx = canvas.getContext("2d") const evenCanvas = document.getElementById("ambient-canvas-2")
const oddCtx = oddCanvas.getContext("2d")
const evenCtx = evenCanvas.getContext("2d")
let requestId; const frameIntervalMs = 200
let lastDrawTime = 0; // Timestamp of the last draw request const canvasOpacity = "0.4"
const loop = () => {
const now = performance.now(); let intervalId
const elapsed = now - lastDrawTime; let oddFrame = true
if (elapsed >= (1000 / 30)) { const drawFrame = () => {
lastDrawTime = now; if (oddFrame) {
ctx.drawImage(AMvideo, 0, 0, canvas.width, canvas.height); oddCtx.drawImage(AMvideo, 0, 0, oddCanvas.width, oddCanvas.height)
transitionToOddCanvas()
} else {
evenCtx.drawImage(AMvideo, 0, 0, evenCanvas.width, evenCanvas.height)
transitionToEvenCanvas()
} }
oddFrame = !oddFrame
requestId = window.requestAnimationFrame(loop);
}; };
const transitionToOddCanvas = () => {
oddCanvas.style.opacity = canvasOpacity
evenCanvas.style.opacity = "0"
}
const transitionToEvenCanvas = () => {
evenCanvas.style.opacity = canvasOpacity
oddCanvas.style.opacity = "0"
}
const drawStart = () => { const drawStart = () => {
requestId = window.requestAnimationFrame(loop) intervalId = window.setInterval(drawFrame, frameIntervalMs)
} }
const drawPause = () => { const drawPause = () => {
window.cancelAnimationFrame(requestId) if (intervalId) window.clearInterval(intervalId)
requestId = undefined
} }
const init = () => { const init = () => {
@ -1960,12 +1975,15 @@ 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}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();
} }
window.addEventListener("load", init) window.addEventListener("load", init)
@ -1977,7 +1995,7 @@ window.addEventListener("unload", cleanup)
z-index: 0; z-index: 0;
} }
.popup {z-index: 1} .popup {z-index: 1}
#ambient-canvas { .ambient-canvas {
width: 100%; width: 100%;
height: calc(100% - 18px); height: calc(100% - 18px);
position: absolute; position: absolute;
@ -1985,7 +2003,6 @@ window.addEventListener("unload", cleanup)
border-radius: 18px; border-radius: 18px;
filter: blur(20px); filter: blur(20px);
transform: scale(1.1); transform: scale(1.1);
opacity: 0.4;
z-index: -1; z-index: -1;
} }
</style> </style>