---
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>