110 lines
No EOL
3.4 KiB
Text
110 lines
No EOL
3.4 KiB
Text
---
|
|
const {
|
|
PlayerName,
|
|
MilieuMode,
|
|
MilieuSpeed,
|
|
MilieuBlur,
|
|
MilieuScale,
|
|
} = Astro.props
|
|
---
|
|
<canvas id="zorn-canvas-1"/>
|
|
<canvas id="zorn-canvas-2"/>
|
|
|
|
{
|
|
()=> {
|
|
if (MilieuMode === "Default") {
|
|
return <style is:global>.video-container canvas {position: absolute}</style>
|
|
} else if (MilieuMode === "Fullscreen") {
|
|
return <style is:global>.video-container canvas {position: fixed}</style>
|
|
}
|
|
}
|
|
}
|
|
|
|
<style is:global define:vars={{MilieuScale, MilieuBlur}}>
|
|
.video-container canvas {
|
|
transform: scale(var(--MilieuScale));
|
|
filter: blur(var(--MilieuBlur))
|
|
}
|
|
</style>
|
|
|
|
<script define:vars={{PlayerName, MilieuSpeed }}>
|
|
/**
|
|
* @licstart The following is the entire license notice for the
|
|
* JavaScript code in this page.
|
|
*
|
|
* Copyright (C) 2024 SudoVanilla
|
|
*
|
|
*
|
|
* The JavaScript code in this page is free software: you can
|
|
* redistribute it and/or modify it under the terms of the GNU
|
|
* General Public License (GNU GPL) as published by the Free Software
|
|
* Foundation, either version 3 of the License, or (at your option)
|
|
* any later version. The code is distributed WITHOUT ANY WARRANTY;
|
|
* without even the implied warranty of MERCHANTABILITY or FITNESS
|
|
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
|
|
*
|
|
* As additional permission under GNU GPL version 3 section 7, you
|
|
* may distribute non-source (e.g., minimized or compacted) forms of
|
|
* that code without the copy of the GNU GPL normally required by
|
|
* section 4, provided you include this license notice and a URL
|
|
* through which recipients can access the Corresponding Source.
|
|
*
|
|
* @licend The above is the entire license notice
|
|
* for the JavaScript code in this page.
|
|
*
|
|
*/
|
|
//https://gist.sudovanilla.org/Korbs/ambient-video-effect
|
|
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
|
var FirstCanvas = document.getElementById("zorn-canvas-1")
|
|
var SecondCanvas = document.getElementById("zorn-canvas-2")
|
|
var FirstCtx = FirstCanvas.getContext("2d")
|
|
var SecondCtx = SecondCanvas.getContext("2d")
|
|
|
|
const FrameInterval = MilieuSpeed
|
|
const CanvasOpacity = "0.4"
|
|
|
|
let IntervalId
|
|
let FirstFrame = true
|
|
const Draw = () => {
|
|
if (FirstFrame) {
|
|
FirstCtx.drawImage(Player, 0, 0, FirstCanvas.width, FirstCanvas.height)
|
|
ToFirstCanvas()
|
|
} else {
|
|
SecondCtx.drawImage(Player, 0, 0, SecondCanvas.width, SecondCanvas.height)
|
|
ToSecondCanvas()
|
|
}
|
|
FirstFrame = !FirstFrame
|
|
}
|
|
|
|
const ToFirstCanvas = () => {
|
|
FirstCanvas.style.opacity = CanvasOpacity
|
|
SecondCanvas.style.opacity = "0"
|
|
}
|
|
|
|
const ToSecondCanvas = () => {
|
|
SecondCanvas.style.opacity = CanvasOpacity
|
|
FirstCanvas.style.opacity = "0"
|
|
}
|
|
|
|
const StartDrawing = () => {IntervalId = window.setInterval(Draw, FrameInterval)}
|
|
const PauseDrawing = () => {if (IntervalId) window.clearInterval(IntervalId)}
|
|
|
|
const init = () => {
|
|
Player.pause()
|
|
Player.play()
|
|
Player.addEventListener("play", StartDrawing, false)
|
|
Player.addEventListener("pause", PauseDrawing, false)
|
|
Player.addEventListener("ended", PauseDrawing, false)
|
|
FirstCanvas.style.transition = SecondCanvas.style.transition = `opacity ${FrameInterval}ms`
|
|
}
|
|
|
|
const cleanup = () => {
|
|
Player.removeEventListener("play", StartDrawing)
|
|
Player.removeEventListener("pause", PauseDrawing)
|
|
Player.removeEventListener("ended", PauseDrawing)
|
|
PauseDrawing()
|
|
}
|
|
|
|
window.addEventListener("load", init)
|
|
window.addEventListener("unload", cleanup)
|
|
</script> |