From 48a44dade7158142548b4b6c27232cf71e09be66 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Mon, 11 Nov 2024 21:56:07 -0500
Subject: [PATCH] Add Milieu modes and settings

---
 TODO.md                   | 10 +++++-----
 package.json              |  2 +-
 src/Features/Milieu.astro | 27 ++++++++++++++++++++++++---
 src/Player.astro          | 22 +++++++++++++++++++++-
 src/Styles/Index.scss     |  4 +---
 5 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/TODO.md b/TODO.md
index df05778..790a1a1 100644
--- a/TODO.md
+++ b/TODO.md
@@ -10,11 +10,11 @@
  - [x] Allow for multiple players on one page
  - [ ] 360 Video Support
  - [x] Remove Iconoir's Vue package, [replace with CSS](https://iconoir.com/docs/packages/css)
- - [ ] Milieu Settings
-   - [ ] Mode (Default | Fullscreen)
-   - [ ] Speed (Default | Instant | Slow)
-   - [ ] Blur
-   - [ ] Scale
+ - [x] Milieu Settings
+   - [x] Mode (Default | Fullscreen)
+   - [x] Speed
+   - [x] Blur
+   - [x] Scale
  - [ ] Modes
     - [ ] Audio-Only
     - [ ] Pop-Up
diff --git a/package.json b/package.json
index 8a8942b..c09bac5 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "live-streaming"
   ],
   "type": "module",
-  "version": "0.4.62",
+  "version": "0.4.63",
   "exports": {
     ".": "./index.ts"
   },
diff --git a/src/Features/Milieu.astro b/src/Features/Milieu.astro
index 2d0cd3b..362aa75 100644
--- a/src/Features/Milieu.astro
+++ b/src/Features/Milieu.astro
@@ -1,12 +1,33 @@
 ---
 const {
-  PlayerName
+    PlayerName,
+    MilieuMode,
+    MilieuSpeed,
+    MilieuBlur,
+    MilieuScale,
 } = Astro.props
 ---
 <canvas id="zorn-canvas-1"/>
 <canvas id="zorn-canvas-2"/>
 
-<script define:vars={{PlayerName}}>
+{ 
+    ()=> {
+      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.
@@ -38,7 +59,7 @@ var SecondCanvas = document.getElementById("zorn-canvas-2")
 var FirstCtx = FirstCanvas.getContext("2d")
 var SecondCtx = SecondCanvas.getContext("2d")
 
-const FrameInterval = 2000
+const FrameInterval = MilieuSpeed
 const CanvasOpacity = "0.4"
 
 let IntervalId
diff --git a/src/Player.astro b/src/Player.astro
index e4ee39e..929f839 100644
--- a/src/Player.astro
+++ b/src/Player.astro
@@ -2,13 +2,23 @@
 // Properties
 const {
     PlayerName,
+
+    Whitelabel = false,
+    
     Poster,
     Video,
     Audio,
     VideoAttributes,
     AudioAttributes,
+
     Milieu,
+    MilieuMode = "Default",
+    MilieuSpeed = "2000",
+    MilieuScale = "1.05",
+    MilieuBlur = "16px",
+    
     SettingsMenu,
+    
     Live
 } = Astro.props
 
@@ -28,7 +38,17 @@ import './Styles/Iconoir.css'
     <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 PlayerName={PlayerName}/> : null }
+    {Milieu ?
+        <MilieuEffect
+            PlayerName={PlayerName}
+            MilieuMode={MilieuMode}
+            MilieuSpeed={MilieuSpeed}
+            MilieuScale={MilieuScale}
+            MilieuBlur={MilieuBlur}
+        />
+        :
+        null
+    }
     {SettingsMenu ?
         <Controls PlayerName={PlayerName} Live={Live}>
             <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>
diff --git a/src/Styles/Index.scss b/src/Styles/Index.scss
index 499b678..17905ed 100644
--- a/src/Styles/Index.scss
+++ b/src/Styles/Index.scss
@@ -24,15 +24,13 @@
         z-index: 1;
     }
     canvas {
-        position: absolute;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%;
         object-fit: cover;
         z-index: -1;
-        filter: blur(24px);
-        transform: scale(1.05);
+        transition: 0.6s filter;
     }
     .video-controls {
         background: linear-gradient(0deg, rgba(0, 0, 0, 0.7523460068) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 94%, rgb(0 0 0 / 0%) 100%);