MinPluto/Zorn
MinPluto/Zorn
1
Fork 0
Code Issues Pull requests Activity

Compare commits

base: MinPluto:4e81f677dc107d3623efafe37f01e2b4a9955962
Branches Tags
MinPluto:main
...
compare: MinPluto:5193a5e4d39ed24686f13ec79fa2d90a318d6ce7
Branches Tags
MinPluto:main

5 commits
4e81f677dc ... 5193a5e4d3

Author SHA1 Message Date
Korbs
5193a5e4d3 Update Compatibility list 2024-11-02 21:08:07 -04:00
Korbs
e35c01cb95 Bump version 2024-11-02 21:07:57 -04:00
Korbs
531de5b849 Add PiP button 2024-11-02 21:07:48 -04:00
Korbs
97f12e6a7a Remove PiP for Firefox 2024-11-02 21:07:35 -04:00
Korbs
922e65065e Dedicated Milieu demo 2024-11-02 21:07:23 -04:00
8 changed files with 129 additions and 38 deletions
Show stats Expand all files Collapse all files

67
README.md
View file

@ -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 | ✅ | ✅ | ❌ | ✅ |
| Ladybird | 🔘 | 🔘 | 🔘 | 🔘 |
| Pale Moon | 🔘 | 🔘 | 🔘 | 🔘 |
| FOSS Browser | ✅ | ✅ | ✅ | ✅ | ✅ |
| Ladybird | 🔘 | 🔘 | 🔘 | 🔘 | 🔘 |
| Pale Moon | ❌ | ✅ | ✅ | ✅ | ✅ |
| **WebKit Browsers**|
| Safari | 🔘 | 🔘 | 🔘 | 🔘 |
| GNOME Web | ✅ | ✅ | ✅ | ✅ |
| DuckDuckGo | 🔘 | 🔘 | 🔘 | 🔘 |
| Safari | ✅ | ✅ | ✅ | ✅ | ✅ |
| GNOME Web | ✅ | ✅ | ✅ | ✅ | ❌ |
| DuckDuckGo | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Electron Browsers**|
| Min | 🔘 | ✅ | ✅ | ✅ |
| Min | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Chromium Browsers**|
| Brave | ✅ | ✅ | ✅ | ✅ |
| Chromium | ✅ | ✅ | ✅ | ✅ |
| Google Chrome | ✅ | ✅ | ✅ | ✅ |
| Microsoft Edge | ✅ | ✅ | ✅ | ✅ |
| Opera | ✅ | ✅ | ✅ | ✅ |
| Vanadium | 🔘 | 🔘 | 🔘 | 🔘 |
| Vivaldi | ✅ | ✅ | ✅ | ✅ |
| Yandex | ✅ | ✅ | ✅ | ✅ |
| Brave | ✅ | ✅ | ✅ | ✅ | ✅ |
| Chromium | ✅ | ✅ | ✅ | ✅ | ✅ |
| Google Chrome | ✅ | ✅ | ✅ | ✅ | ✅ |
| Microsoft Edge | ✅ | ✅ | ✅ | ✅ | ✅ |
| Opera | ✅ | ✅ | ✅ | ✅ | ✅ |
| Vivaldi | ✅ | ✅ | ✅ | ✅ | ✅ |
| Yandex | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Firefox Browsers**|
| Basilisk | 🔘 | 🔘 | 🔘 | 🔘 |
| Falkon | ✅ | ✅ | ✅ | ✅ |
| Firefox | ✅ | ✅ | ✅ | ✅ |
| Floorp | ✅ | ✅ | ✅ | ✅ |
| GNU/IceCat | ✅ | ✅ | ✅ | ✅*IC |
| Librewolf | ✅ | ✅ | ✅ | ✅ |
| Mull | ✅ | ✅ | ✅ | ✅ |
| Mullvad | ✅ | ✅ | ✅ | ✅ |
| Tor | 🔘 | 🔘 | 🔘 | 🔘 |
| Waterfox | ✅ | ✅ | ✅ | ✅ |
| Zen | ✅ | ✅ | ✅ | ✅ |
| **Outdated Browsers**|
| Internet Explorer | 🔘 | 🔘 | 🔘 | 🔘 |
| Falkon | ✅ | ✅ | ✅ | ✅ | ✅ |
| Firefox | ✅ | ✅ | ✅ | ✅ | ✅ |
| Floorp | ✅ | ✅ | ✅ | ✅ | ✅ |
| GNU/IceCat | ✅ | ✅ | ✅ | ✅❶ | ✅ |
| Ghostery | ✅ | ✅ | ✅ | ✅ | ✅ |
| Huma | ✅ | ✅ | ✅ | ✅ | ✅ |
| Librewolf | ✅ | ✅ | ✅ | ✅ | ✅ |
| Mull | ✅ | ✅ | ✅ | ✅ | ✅ |
| Mullvad | ✅ | ✅ | ✅ | ✅ | ✅ |
| Waterfox | ✅ | ✅ | ✅ | ✅ | ✅ |
| Zen | ✅ | ✅ | ✅ | ✅ | ✅ |
**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.
> [!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.
> ❶ 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

2
package.json
View file

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

7
src/Controls.astro
View file

@ -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>

11
src/Index.scss
View file

@ -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 {

1
test/src/pages/index.astro
View file

@ -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 {

1
test/src/pages/live.astro
View file

@ -25,3 +25,4 @@ body {
<br/>
<a href="/">Generic Usage</a>
<a href="/with-separate-audio">View with separated audio</a>
<a href="/milieu">Milieu effect</a>

75
test/src/pages/milieu.astro Normal file
View file

@ -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>

1
test/src/pages/with-separate-audio.astro
View file

@ -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 {