From adcc6dcbb6dfd0a4cc2bfc3788340963077c1bc8 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 16 Aug 2024 22:27:23 -0400
Subject: [PATCH] Update the README

---
 README.md | 133 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 122 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 58da377..25b8575 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ A custom video player tailored for MinPluto.
 To install Zorn for your Astro project, run the following:
 
 ```bash
-bun install @minpluto/zorn --registry https://npm.sudovanilla.org
+npm install @minpluto/zorn --registry https://npm.sudovanilla.org
 ```
 
 Zorn uses icons from Iconoir using their Vue package, you'll need to integrate Astro's Vue package if you want to use the custom controls.
@@ -55,12 +55,20 @@ import {Zorn} from '@minpluto/zorn'
 Make sure to add `muted` to the `VideoAttributes` option, just in case.
 
 ## References
+**Title** - `Title`
+
+When the video enters fullscreen, the title of the video will appear in the upper left corner of the screen.
+
+```jsx
+<Zorn Title="Ennie and Yoyki: Non-Girly Games"/>
+```
+
 **Poster** - `Poster`
 
 Setting a thumbnail for the video player is done using the [`poster`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#poster) attribute. Just use a valid URL.
 
 ```jsx
-Poster="https://example.org/media/thumbnail.webp"
+<Zorn Poster="https://example.org/media/thumbnail.webp"/>
 ```
 
 **Video Source** - `Video`
@@ -69,13 +77,13 @@ The main part of the video player, is of course the video. You can set any video
 
 Local:
 ```jsx
-Video="/media/video.webm"
+<Zorn Video="/media/video.webm"/>
 ```
 > Use the `/public/` folder in your Astro project.
 
 Remote:
 ```jsx
-Video="https://example.org/media/video.webm"
+<Zorn Video="https://example.org/media/video.webm"/>
 ```
 
 **Audio Source** - `Audio`
@@ -84,23 +92,82 @@ If you're in a scenario where the video source is missing audio, but you do have
 
 Local:
 ```jsx
-Audio="/media/audio.ogg"
+<Zorn Audio="/media/audio.ogg"/>
 ```
 > Use the `/public/` folder in your Astro project.
 
 Remote:
 ```jsx
-Audio="https://example.org/media/audio.ogg"
+<Zorn Audio="https://example.org/media/audio.ogg"/>
 ```
 
-**Custom Controls** - `CustomControls`
+**Settings Menu** - `SettingsMenu`
 
-Use the custom controls for Zorn. If this is not applied, no controls will appears.
+<video title="Settings Menu in action on MinPluto" controls autoplay muted loop src="https://md.sudovanilla.org/videos/webm/Screencast%20from%202024-07-31%2000-44-01.webm"></video>
 
-If you want to use the built-in player from the web browser, then use `VideoAttributes="controls"`.
+If you want to add additional settings to the player, you can enable the Settings button and add your own menu and sub-menus.
 
+To enable the menu, add the `SettingsMenu` option:
 ```jsx
-<Zorn CustomControls/>
+<Zorn SettingsMenu/>
+```
+
+Then, as a slot, add your menu like so:
+```jsx
+<Zorn SettingsMenu>
+	<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>
+	</div>
+</Zorn>
+```
+
+> Use `OpenZornMenu()` as the open menu function. You can use the scripts provided in `/test/` of this package.
+
+You can also add sub-menus with additional scripts you'll need to add:
+```jsx
+<Zorn SettingsMenu>
+	<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>
+
+<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>
 ```
 
 **Attributes** - `VideoAttributes` / `AudioAttributes`
@@ -117,4 +184,48 @@ The Milieu option is an attempt to copy YouTube's ambient player feature. Where
 
 ```jsx
 <Zorn Milieu/>
-```
\ No newline at end of file
+```
+
+## Compatibility
+### Web Browsers
+| Browser            | Live Streams |Player | CSS | JavaScript |
+|--------------------|--------------|-------|-----|------------|
+| **Other Browsers**|
+| FOSS Browser       | 🔘           | 🔘    | 🔘  | 🔘         |
+| Ladybird           | 🔘           | 🔘    | 🔘  | 🔘         |
+| **WebKit Browsers**|
+| Safari             | 🔘           | 🔘    | 🔘  | 🔘         |
+| GNOME Web          | 🔘           | ✅    | ✅*N| ✅         |
+| DuckDuckGo         | 🔘           | 🔘    | 🔘  | 🔘         |
+| **Electron Browsers**|
+| Min                | 🔘           | ✅    | ✅  | ✅         |
+| **Chromium Browsers**|
+| Brave              | 🔘           | ✅    | ✅  | ✅         |
+| Chromium           | 🔘           | ✅    | ✅  | ✅         |
+| Google Chrome      | 🔘           | ✅    | ✅  | ✅         |
+| Microsoft Edge     | 🔘           | ✅    | ✅  | ✅         |
+| Opera              | 🔘           | ✅    | ✅  | ✅         |
+| Vivaldi            | 🔘           | ✅    | ✅  | ✅         |
+| Yandex             | 🔘           | ❌    | ✅  | ❌         |
+| **Firefox Browsers**|
+| Falkon             | 🔘           | ✅    | ✅  | ✅         |
+| Firefox            | 🔘           | ✅    | ✅  | ✅         |
+| Floorp             | 🔘           | ✅    | ✅  | ✅         |
+| GNU/IceCat         | 🔘           | ✅    | ✅  | ✅*IC      |
+| Librewolf          | 🔘           | ✅    | ✅  | ✅         |
+| Mull               | 🔘           | ✅    | ✅  | ✅         |
+| Mullvad            | 🔘           | ✅    | ✅  | ✅         |
+| Tor                | 🔘           | 🔘    | 🔘  | 🔘         |
+| Waterfox           | 🔘           | ✅    | ✅  | ✅         |
+| **Outdated Browsers**|
+| Internet Explorer  | 🔘           | 🔘    | 🔘  | 🔘         |
+
+> 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.
+
+> 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. 
+
+> N: The backdrop blur does not work. This should not affect the function of the video player.
+
+## To Do
+ - Support HLS (HTTP Live Streaming)
+ - Touch gestures for mobile
\ No newline at end of file