Update file structure

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>

src/Milieu.astro

@@ -1,84 +0,0 @@
-<canvas id="ambient-canvas-1"/>
-<canvas id="ambient-canvas-2"/>
-
-<script is:inline>
-/**
- * @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.
- *
- */
-const AMvideo = document.querySelector("video")
-const oddCanvas = document.getElementById("ambient-canvas-1")
-const evenCanvas = document.getElementById("ambient-canvas-2")
-const oddCtx = oddCanvas.getContext("2d")
-const evenCtx = evenCanvas.getContext("2d")
-
-const frameIntervalMs = 2000
-const canvasOpacity = "0.4"
-
-let intervalId
-let oddFrame = true
-const drawFrame = () => {
-    if (oddFrame) {
-    oddCtx.drawImage(AMvideo, 0, 0, oddCanvas.width, oddCanvas.height)
-    transitionToOddCanvas()
-    } else {
-    evenCtx.drawImage(AMvideo, 0, 0, evenCanvas.width, evenCanvas.height)
-    transitionToEvenCanvas()
-    }
-    oddFrame = !oddFrame
-}
-
-const transitionToOddCanvas = () => {
-    oddCanvas.style.opacity = canvasOpacity
-    evenCanvas.style.opacity = "0"
-}
-
-const transitionToEvenCanvas = () => {
-    evenCanvas.style.opacity = canvasOpacity
-    oddCanvas.style.opacity = "0"
-}
-
-const drawStart = () => {intervalId = window.setInterval(drawFrame, frameIntervalMs)}
-
-const drawPause = () => {if (intervalId) window.clearInterval(intervalId)}
-
-const init = () => {    
-    AMvideo.pause()
-    AMvideo.play()
-    AMvideo.addEventListener("play", drawStart, false)
-    AMvideo.addEventListener("pause", drawPause, false)
-    AMvideo.addEventListener("ended", drawPause, false)
-    oddCanvas.style.transition = evenCanvas.style.transition = `opacity ${frameIntervalMs}ms`
-}
-
-const cleanup = () => {
-    AMvideo.removeEventListener("play", drawStart)
-    AMvideo.removeEventListener("pause", drawPause)
-    AMvideo.removeEventListener("ended", drawPause)
-    drawPause()
-}
-
-window.addEventListener("load", init)
-window.addEventListener("unload", cleanup)
-</script>

src/Player.astro

@@ -14,21 +14,21 @@ const {
 
 // Components
 import Controls from './Controls.astro'
-import MilieuEffect from './Milieu.astro'
+import MilieuEffect from './Features/Milieu.astro'
 import Controller from './Controls/Controller.astro'
 import Seek from './Controls/Seek.astro'
 import Sync from './Controls/Sync.astro'
 
 // Icons and Styles
-import './Index.scss'
-import './Iconoir.css'
+import './Styles/Index.scss'
+import './Styles/Iconoir.css'
 ---
 
 <div class="video-container" id={"zorn-player-" + PlayerName}>
     <video class="main-video" {VideoAttributes} disableremoteplayback src={Video} poster={Poster} preload="auto"></video>
     {Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
     {Audio ? <Sync PlayerName={PlayerName}/> : null }
-    {Milieu ? <MilieuEffect/> : null }
+    {Milieu ? <MilieuEffect PlayerName={PlayerName}/> : null }
     {SettingsMenu ?
         <Controls PlayerName={PlayerName} Live={Live}>
             <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>