Add Milieu modes and settings

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

package.json

@@ -15,7 +15,7 @@
     "live-streaming"
   ],
   "type": "module",
-  "version": "0.4.62",
+  "version": "0.4.63",
   "exports": {
     ".": "./index.ts"
   },

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

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>

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%);