Update Compatibility list

README.md

@@ -216,44 +216,43 @@ Just add the `Live` option with an `.m3u8` source.
 
 ## Compatibility
 ### Web Browsers
-| Browser            | Live Streams |Player | CSS | JavaScript |
+| Browser            | Live Streams |Player | CSS | JavaScript | Milieu |
-|--------------------|--------------|-------|-----|------------|
+|--------------------|--------------|-------|-----|------------|--------|
 | **Other Browsers**|
-| FOSS Browser       | ✅           | ✅    | ❌  | ✅         |
+| FOSS Browser       | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Ladybird           | 🔘           | 🔘    | 🔘  | 🔘         |
+| Ladybird           | 🔘           | 🔘    | 🔘  | 🔘         | 🔘     |
-| Pale Moon          | 🔘           | 🔘    | 🔘  | 🔘         |
+| Pale Moon          | ❌           | ✅    | ✅  | ✅         | ✅     |
 | **WebKit Browsers**|
-| Safari             | 🔘           | 🔘    | 🔘  | 🔘         |
+| Safari             | ✅           | ✅    | ✅  | ✅         | ✅     |
-| GNOME Web          | ✅           | ✅    | ✅  | ✅         |
+| GNOME Web          | ✅           | ✅    | ✅  | ✅         | ❌     |
-| DuckDuckGo         | 🔘           | 🔘    | 🔘  | 🔘         |
+| DuckDuckGo         | ✅           | ✅    | ✅  | ✅         | ✅     |
 | **Electron Browsers**|
-| Min                | 🔘           | ✅    | ✅  | ✅         |
+| Min                | ✅           | ✅    | ✅  | ✅         | ✅     |
 | **Chromium Browsers**|
-| Brave              | ✅           | ✅    | ✅  | ✅         |
+| Brave              | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Chromium           | ✅           | ✅    | ✅  | ✅         |
+| Chromium           | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Google Chrome      | ✅           | ✅    | ✅  | ✅         |
+| Google Chrome      | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Microsoft Edge     | ✅           | ✅    | ✅  | ✅         |
+| Microsoft Edge     | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Opera              | ✅           | ✅    | ✅  | ✅         |
+| Opera              | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Vanadium           | 🔘           | 🔘    | 🔘  | 🔘         |
+| Vivaldi            | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Vivaldi            | ✅           | ✅    | ✅  | ✅         |
+| Yandex             | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Yandex             | ✅           | ✅    | ✅  | ✅         |
 | **Firefox Browsers**|
-| Basilisk           | 🔘           | 🔘    | 🔘  | 🔘         |
+| Falkon             | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Falkon             | ✅           | ✅    | ✅  | ✅         |
+| Firefox            | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Firefox            | ✅           | ✅    | ✅  | ✅         |
+| Floorp             | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Floorp             | ✅           | ✅    | ✅  | ✅         |
+| GNU/IceCat         | ✅           | ✅    | ✅  | ✅❶        | ✅     |
-| GNU/IceCat         | ✅           | ✅    | ✅  | ✅*IC      |
+| Ghostery           | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Librewolf          | ✅           | ✅    | ✅  | ✅         |
+| Huma               | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Mull               | ✅           | ✅    | ✅  | ✅         |
+| Librewolf          | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Mullvad            | ✅           | ✅    | ✅  | ✅         |
+| Mull               | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Tor                | 🔘           | 🔘    | 🔘  | 🔘         |
+| Mullvad            | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Waterfox           | ✅           | ✅    | ✅  | ✅         |
+| Waterfox           | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Zen                | ✅           | ✅    | ✅  | ✅         |
+| Zen                | ✅           | ✅    | ✅  | ✅         | ✅     |
-| **Outdated Browsers**|
+
-| Internet Explorer  | 🔘           | 🔘    | 🔘  | 🔘         |
+**Symbols**
+ - ✅ Supported
+ - ❌ Not Supported or broken
+ - 🔘 Not Tested
 
 > [!NOTE]
-> All browsers are tested as-is out of box. Some functions with ❌ can probably work if you tweak the settings or interact with a built-in extension. 🔘 means it's not been tested yet.
+> ❶ By default, GNU/IceCat has the LibreJS extension installed, it will block all JS by default if it does not provide a valid license. Examples for settings menu do not provide one nor one is shown in the test version. For settings menu script, you can add [this license](https://ark.sudovanilla.org/MinPluto/Zorn/src/commit/9bcbd72237f7ccb56f526d96b8f4a3caf1289bfb/src/Controls/Controller.astro#L2-L26) to the top of the script. Learn more: https://www.gnu.org/software/librejs/free-your-javascript.html
-
-> [!NOTE]
-> IC: By default, GNU/IceCat has the LibreJS extension installed, it will block all JS by default if it does not provide a valid license. Examples for settings menu do not provide one nor one is shown in the test version.

package.json

@@ -14,7 +14,7 @@
     "live-streaming"
   ],
   "type": "module",
-  "version": "0.4.53",
+  "version": "0.4.54",
   "exports": {
     ".": "./index.ts"
   },

src/Controls.astro

@@ -13,7 +13,8 @@ import {
     ForwardSolid,
     PlaySolid,
     Refresh,
-    SoundHighSolid
+    SoundHighSolid,
+    MultiWindow
 } from "@iconoir/vue"
 ---
 
@@ -55,12 +56,14 @@ import {
             }
         </div>
         <div class="vc-end">
-            <slot/>
             {Live ?
                 <span id="live-text" style="pointer-events: none;border-radius: 3rem;padding: 6px 12px;background: #933c3c;letter-spacing: 4px;">Live</span>
                 :
                 null
             }
+            <slot/>
+            <!-- The requestPictureInPicture() function is not supported in Firefox -->
+            <button id="vc-pip" onclick="Player.requestPictureInPicture()"><MultiWindow/></button>
             <button id="vc-fullscreen"><Enlarge /></button>
         </div>
     </div>

src/Index.scss

@@ -1,3 +1,14 @@
+// Platform Support
+/// requestPictureInPicture() - Firefox Not Supported
+/// https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestPictureInPicture
+@-moz-document url-prefix() {
+    #vc-pip {
+        display: none;
+    }
+}
+  
+
+// Zorn Player
 .video-container {
     position: relative;
     .video-controls, video {

test/src/pages/index.astro

@@ -43,6 +43,7 @@ import {Zorn} from '@minpluto/zorn'
 <br/>
 <a href="/with-separate-audio">View with separated audio</a>
 <a href="/live">Live Stream</a>
+<a href="/milieu">Milieu effect</a>
 
 <style>
 body {

test/src/pages/live.astro

@@ -24,4 +24,5 @@ body {
 <p>This demo pulls from: <a href="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8">https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8</a></p>
 <br/>
 <a href="/">Generic Usage</a>
-<a href="/with-separate-audio">View with separated audio</a>
+<a href="/with-separate-audio">View with separated audio</a>
+<a href="/milieu">Milieu effect</a>

test/src/pages/milieu.astro

@@ -0,0 +1,75 @@
+---
+// Components
+import {
+	ArrowUpRight,
+	NavArrowLeft,
+	SwitchOn,
+	NavArrowRight
+} from '@iconoir/vue'
+import {Zorn} from '@minpluto/zorn'
+---
+<meta charset="utf-8">
+
+<Zorn
+	Title="Ennie and Yoyki: Non-Girly Games"
+	Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
+	Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
+	CustomControlsWithMenu
+	SettingsMenu
+    Milieu
+>
+	<div id="settings" class="vc-menu">
+		<button>Stats for Geeks</button>
+		<hr/>
+		<button>Open Video URL <ArrowUpRight/></button>
+		<button>Download <ArrowUpRight/></button>
+		<button>Embed <ArrowUpRight/></button>
+		<hr/>
+		<button id="has-switch">Milieu <SwitchOn/></button>
+		<button>Close Captions <NavArrowRight/></button>
+		<button onclick="PlayerMenu_Quality()">Quality <NavArrowRight/></button>
+	</div>
+    <div id="quality-changer" class="vc-menu">
+        <button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button>
+        <button>1080p</button>
+        <button>720p</button>
+        <button>360p</button>
+    </div>
+</Zorn>
+
+<h2>Ennie and Yoyki: Non-Girly Games</h2>
+<p>Created by Daniyar Yambushev</p>
+<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">https://www.youtube.com/watch?v=MuyJtxzyU3o</a></p>
+<p>This demo pulls from: <a href="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm">https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm</a></p>
+<br/>
+<a href="/with-separate-audio">View with separated audio</a>
+<a href="/live">Live Stream</a>
+<a href="/milieu">Milieu effect</a>
+
+<style>
+body {
+	background: #010101;
+	color: white;
+	font-family: Arial, Helvetica, sans-serif;
+	a {
+		color: white;
+	}
+}
+</style>
+
+<script is:inline>
+    function PlayerMenu_HideAll() {
+        document.querySelector('.vc-menu#settings').style.display = 'none'
+        document.querySelector('.vc-menu#quality-changer').style.display = 'none'
+		document.querySelector('#open-zorn-settings-button').setAttribute('onclick', 'OpenZornMenu()')
+    }
+    function OpenZornMenu() {
+        PlayerMenu_HideAll()
+        document.querySelector('.vc-menu#settings').style.display = 'flex'
+		document.querySelector('#open-zorn-settings-button').setAttribute('onclick', 'PlayerMenu_HideAll()')
+    }
+    function PlayerMenu_Quality() {
+        PlayerMenu_HideAll()
+        document.querySelector('.vc-menu#quality-changer').style.display = 'flex'
+    }
+</script>

test/src/pages/with-separate-audio.astro

@@ -21,6 +21,7 @@ import {Zorn} from '@minpluto/zorn'
 <br/>
 <a href="/">Generic Usage</a>
 <a href="/live">Live Stream</a>
+<a href="/milieu">Milieu effect</a>
 
 <style>
 body {