Update Milieu functions and target PlayerName

src/Features/Milieu.astro

@@ -0,0 +1,88 @@
+---
+const {
+  PlayerName
+} = Astro.props
+---
+<canvas id="zorn-canvas-1"/>
+<canvas id="zorn-canvas-2"/>
+
+<script define:vars={{PlayerName}}>
+/**
+ * @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.
+ *
+ */
+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 = 2000
+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>