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

Allow for Multi-Instances of the Player on one page #1

Merged
Korbs merged 6 commits from multi-instance into main 2024-11-04 19:56:12 -05:00
Conversation 0 Commits 6 Files changed 13 +188 -80
13 changed files with 188 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -42,6 +42,7 @@ import {Zorn} from '@minpluto/zorn'
--- ---
<Zorn <Zorn
PlayerName="nameit_whatever_you_want"
Poster="https://md.sudovanilla.org/images/eay-p-v.jpg" Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm" Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
CustomControls CustomControls
@ -49,6 +50,9 @@ import {Zorn} from '@minpluto/zorn'
/> />
``` ```
> [!NOTE]
> The option `PlayerName` is now required as of v0.4.6.
**With Separated Audio Source** **With Separated Audio Source**
Since Zorn is built for the MinPluto project, there are scenarios where the video source has no audio to get higher quality options, so Zorn has an option to add a seprated audio source to include. Since Zorn is built for the MinPluto project, there are scenarios where the video source has no audio to get higher quality options, so Zorn has an option to add a seprated audio source to include.
@ -59,6 +63,7 @@ import {Zorn} from '@minpluto/zorn'
--- ---
<Zorn <Zorn
PlayerName="nameit_whatever_you_want"
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg" Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4" Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4" Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"

4
TODO.md
View file

@ -3,11 +3,11 @@
- [ ] Multi-Video Tracks ([`videoTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks)) - [ ] Multi-Video Tracks ([`videoTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks))
- [ ] Multi-Audio Tracks ([`audioTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks)) - [ ] Multi-Audio Tracks ([`audioTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks))
- [ ] Playback Rate ([`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate)) - [ ] Playback Rate ([`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate))
- [ ] Add Picture-in-Picture button - [x] Add Picture-in-Picture button
- [x] Volume Controller - [x] Volume Controller
- [ ] Mobile Gestures - [ ] Mobile Gestures
- [ ] Cast Support - [ ] Cast Support
- [ ] Allow for multiple players on one page - [x] Allow for multiple players on one page
- [ ] 360 Video Support - [ ] 360 Video Support
- [ ] Milieu Settings - [ ] Milieu Settings
- [ ] Mode (Default | Fullscreen) - [ ] Mode (Default | Fullscreen)

2
package.json
View file

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

97
src/Controls/Controller.astro
View file

@ -1,4 +1,10 @@
<script is:inline> ---
const {
PlayerName
} = Astro.props
---
<script define:vars={{PlayerName}}>
/** /**
* @licstart The following is the entire license notice for the * @licstart The following is the entire license notice for the
* JavaScript code in this page. * JavaScript code in this page.
@ -24,9 +30,9 @@
* for the JavaScript code in this page. * for the JavaScript code in this page.
* *
*/ */
var VideoContainer = document.querySelector('.video-container') var VideoContainer = document.querySelector('#zorn-player-' + PlayerName)
var VideoControls = document.querySelector('.video-controls') var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
var Player = document.querySelector('video') var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
// Icons // Icons
var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'; var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
@ -41,35 +47,35 @@ var ExitFullscreenIcon = exit_fullscreen_solid_default
// Fullscreen // Fullscreen
function Fullscreen() { function Fullscreen() {
const Button_Fullscreen = document.getElementById("vc-fullscreen"); const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
function Toggle_Fullscreen() { function Toggle_Fullscreen() {
if (document.fullscreenElement) { if (document.fullscreenElement) {
document.querySelector('.vc-top').style.opacity = '0' document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0'
document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)' document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '12px' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '12px'
document.querySelector('.video-container .video-controls').style.bottom = '4px' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '4px'
document.querySelector('.video-container .video-controls').style.height = 'calc(100% - 28px)' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = 'calc(100% - 28px)'
document.exitFullscreen(); document.exitFullscreen();
} else if (document.webkitFullscreenElement) { } else if (document.webkitFullscreenElement) {
document.querySelector('.vc-top').style.opacity = '0' document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0'
document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)' document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '12px' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '12px'
document.querySelector('.video-container .video-controls').style.bottom = '4px' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '4px'
document.querySelector('.video-container .video-controls').style.height = 'calc(100% - 28px)' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = 'calc(100% - 28px)'
document.webkitExitFullscreen(); document.webkitExitFullscreen();
} else if (VideoContainer.webkitRequestFullscreen) { } else if (VideoContainer.webkitRequestFullscreen) {
document.querySelector('.vc-top').style.opacity = '1' document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1'
document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)' document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '0' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '0'
document.querySelector('.video-container .video-controls').style.bottom = '0px' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '0px'
document.querySelector('.video-container .video-controls').style.height = '100%' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = '100%'
VideoContainer.webkitRequestFullscreen(); VideoContainer.webkitRequestFullscreen();
} else { } else {
document.querySelector('.vc-top').style.opacity = '1' document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1'
document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)' document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '0' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '0'
document.querySelector('.video-container .video-controls').style.bottom = '0px' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '0px'
document.querySelector('.video-container .video-controls').style.height = '100%' document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = '100%'
VideoContainer.requestFullscreen(); VideoContainer.requestFullscreen();
} }
Update_FullscreenButton() Update_FullscreenButton()
@ -90,20 +96,9 @@ function Fullscreen() {
}); });
} }
function Update_PlayPauseButton() {
if (Player.paused) {
Button_PlayPause.setAttribute("data-title", "Play (K)");
Button_PlayPause.innerHTML = `${PlayIcon}`;
} else {
Button_PlayPause.setAttribute("data-title", "Pause (K)");
Button_PlayPause.innerHTML = `${PauseIcon}`;
}
}
// Play/Pause // Play/Pause
function PlayPause() { function PlayPause() {
const Button_PlayPause = document.querySelector(".video-controls #vc-playpause"); const Button_PlayPause = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-playpause");
Button_PlayPause.addEventListener("click", Toggle_PlayPause); Button_PlayPause.addEventListener("click", Toggle_PlayPause);
Player.addEventListener("click", Toggle_PlayPause); Player.addEventListener("click", Toggle_PlayPause);
Player.addEventListener("play", Update_PlayPauseButton); Player.addEventListener("play", Update_PlayPauseButton);
@ -128,8 +123,8 @@ function PlayPause() {
// Skip Around // Skip Around
function SkipAround() { function SkipAround() {
const Button_SkipBack = document.querySelector(".video-controls #vc-backwards"); const Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards");
const Button_SkipForth = document.querySelector(".video-controls #vc-forwards"); const Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards");
Button_SkipBack.addEventListener("click", Toggle_SkipBack); Button_SkipBack.addEventListener("click", Toggle_SkipBack);
Button_SkipForth.addEventListener("click", Toggle_SkipForth); Button_SkipForth.addEventListener("click", Toggle_SkipForth);
function Toggle_SkipBack() { function Toggle_SkipBack() {
@ -149,11 +144,11 @@ function AutoToggleControls() {
if (Player.paused) { if (Player.paused) {
return; return;
} else { } else {
document.querySelector(".video-controls").classList.add("hide"); document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.add("hide");
} }
} }
function Show_Controls2() { function Show_Controls2() {
document.querySelector(".video-controls").classList.remove("hide"); document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.remove("hide");
} }
VideoControls.addEventListener("mouseenter", Show_Controls2); VideoControls.addEventListener("mouseenter", Show_Controls2);
VideoControls.addEventListener("mouseleave", Hide_Controls2); VideoControls.addEventListener("mouseleave", Hide_Controls2);
@ -249,21 +244,21 @@ function KeyboardShortcuts(events) {
// If Media Ends, fade main controls and show a "Replay" button // If Media Ends, fade main controls and show a "Replay" button
function PlayAgain() { function PlayAgain() {
Player.onended = (event) => { Player.onended = (event) => {
document.querySelector('.vc-start').style.opacity = '0' document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '0'
document.querySelector('.vc-start').style.pointerEvents = 'none' document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'none'
document.querySelector('.vc-center').style.opacity = '0' document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '0'
document.querySelector('.vc-center').style.pointerEvents = 'none' document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.pointerEvents = 'none'
document.querySelector('#vc-playagain').style.display = 'inherit' document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'inherit'
} }
document.querySelector('#vc-playagain').onclick = PlayItAgain document.querySelector('#vc-playagain').onclick = PlayItAgain
} }
function PlayItAgain() { function PlayItAgain() {
document.querySelector('.vc-start').style.opacity = '1' document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '1'
document.querySelector('.vc-start').style.pointerEvents = 'all' document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'all'
document.querySelector('.vc-center').style.opacity = '1' document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '1'
document.querySelector('.vc-center').style.pointerEvents = 'all' document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.pointerEvents = 'all'
document.querySelector('#vc-playagain').style.display = 'none' document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'none'
Player.pause(); Player.pause();
Player.currentTime = '0'; Player.currentTime = '0';

24
src/Controls/Seek.astro
View file

@ -1,4 +1,10 @@
<script is:inline> ---
const {
PlayerName
} = Astro.props
---
<script define:vars={{PlayerName}}>
/** /**
* @licstart The following is the entire license notice for the * @licstart The following is the entire license notice for the
* JavaScript code in this page. * JavaScript code in this page.
@ -25,9 +31,9 @@
* *
*/ */
function Seek() { function Seek() {
var Player = document.querySelector('video') var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
const timeElapsed = document.getElementById("current") const timeElapsed = document.querySelector('#zorn-player-' + PlayerName + ' #current')
const duration = document.getElementById("duration") const duration = document.querySelector('#zorn-player-' + PlayerName + ' #duration')
function formatTime(timeInSeconds) { function formatTime(timeInSeconds) {
const result = new Date(timeInSeconds * 1e3) const result = new Date(timeInSeconds * 1e3)
.toISOString() .toISOString()
@ -56,8 +62,8 @@ function Seek() {
) )
} }
Player.addEventListener("timeupdate", updateTimeElapsed) Player.addEventListener("timeupdate", updateTimeElapsed)
const progressBar = document.querySelector(".vc-progress-bar") const progressBar = document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar')
const seek = document.getElementById("seek") const seek = document.querySelector('#zorn-player-' + PlayerName + ' #seek')
function initializeVideo() { function initializeVideo() {
const videoDuration = Math.round(Player.duration) const videoDuration = Math.round(Player.duration)
seek.setAttribute("max", videoDuration) seek.setAttribute("max", videoDuration)
@ -71,10 +77,10 @@ function Seek() {
} }
function updateProgress() { function updateProgress() {
seek.value = Math.floor(Player.currentTime) seek.value = Math.floor(Player.currentTime)
document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%' document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
} }
Player.addEventListener("timeupdate", updateProgress) Player.addEventListener("timeupdate", updateProgress)
const seekTooltip = document.getElementById("seek-tooltip") const seekTooltip = document.querySelector('#zorn-player-' + PlayerName + ' #seek-tooltip')
function updateSeekTooltip(event) { function updateSeekTooltip(event) {
const skipTo = Math.round( const skipTo = Math.round(
(event.offsetX / event.target.clientWidth) * (event.offsetX / event.target.clientWidth) *
@ -86,7 +92,7 @@ function Seek() {
const rect = Player.getBoundingClientRect() const rect = Player.getBoundingClientRect()
seekTooltip.style.left = `${event.pageX - rect.left}px` seekTooltip.style.left = `${event.pageX - rect.left}px`
seekTooltip.style.opacity = '1' seekTooltip.style.opacity = '1'
document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%' document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
seek.addEventListener('mouseleave', () => { seek.addEventListener('mouseleave', () => {
seekTooltip.style.opacity = '0' seekTooltip.style.opacity = '0'
}) })

12
src/Controls/Sync.astro
View file

@ -1,4 +1,10 @@
<script is:inline> ---
const {
PlayerName
} = Astro.props
---
<script define:vars={{PlayerName}}>
/** /**
* @licstart The following is the entire license notice for the * @licstart The following is the entire license notice for the
* JavaScript code in this page. * JavaScript code in this page.
@ -27,8 +33,8 @@
*/ */
// https://gist.github.com/michancio/59b9f3dc54b3ff4f6a84 // https://gist.github.com/michancio/59b9f3dc54b3ff4f6a84
// Find elements // Find elements
var SyncVideo = document.querySelector(".main-video") var SyncVideo = document.querySelector("#zorn-player-" + PlayerName + " .main-video")
var SyncAudio = document.querySelector(".main-audio") var SyncAudio = document.querySelector("#zorn-player-" + PlayerName + " .main-audio")
// Object for synchronization of multiple media/sources // Object for synchronization of multiple media/sources
if (typeof window.MediaController === "function") { if (typeof window.MediaController === "function") {

28
src/Player.astro
View file

@ -1,6 +1,7 @@
--- ---
// Properties // Properties
const { const {
PlayerName,
Poster, Poster,
Video, Video,
Audio, Audio,
@ -23,35 +24,34 @@ import './Index.scss'
import { Settings } from '@iconoir/vue' import { Settings } from '@iconoir/vue'
--- ---
<div class="video-container"> <div class="video-container" id={"zorn-player-" + PlayerName}>
<video class="main-video" {VideoAttributes} disableremoteplayback src={Video} poster={Poster} preload="auto"></video> <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 ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
{Audio ? <Sync/> : null } {Audio ? <Sync PlayerName={PlayerName}/> : null }
{Milieu ? <MilieuEffect/> : null } {Milieu ? <MilieuEffect/> : null }
{SettingsMenu ? {SettingsMenu ?
<Controls Live={Live}> <Controls PlayerName={PlayerName} Live={Live}>
<button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button> <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button>
<slot/> <slot/>
</Controls> </Controls>
: :
<Controls Live={Live}/> <Controls PlayerName={PlayerName} Live={Live}/>
} }
<Controller/> <Controller PlayerName={PlayerName}/>
<Seek/> <Seek PlayerName={PlayerName}/>
</div> </div>
<!-- Needs control the correct source --> <!-- Needs control the correct source -->
{Audio ? {Audio ?
<script is:inline> <script define:vars={{PlayerName}}>
var ZornAudioSource = document.querySelector('.video-container audio') var ZornAudioSource = document.querySelector('#zorn-player-' + PlayerName + ' audio')
var VolumeRange = document.querySelector('.vc-volume-controller-input input') var VolumeRange = document.querySelector('#zorn-player-' + PlayerName + ' .vc-volume-controller-input input')
VolumeRange.addEventListener("input", (event) => {ZornAudioSource.volume = event.target.value}) VolumeRange.addEventListener("input", (event) => {ZornAudioSource.volume = event.target.value})
</script> </script>
: :
<script is:inline> <script define:vars={{PlayerName}}>
var Player = document.querySelector('.video-container video') var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
var VolumeRange = document.querySelector('.vc-volume-controller-input input') var VolumeRange = document.querySelector('#zorn-player-' + PlayerName + ' .vc-volume-controller-input input')
VolumeRange.addEventListener("input", (event) => {Player.volume = event.target.value}) VolumeRange.addEventListener("input", (event) => {Player.volume = event.target.value})
</script> </script>
} }

1
test/src/components/Switcher.astro
View file

@ -3,6 +3,7 @@
<a href="/with-separate-audio">Separated Audio</a> <a href="/with-separate-audio">Separated Audio</a>
<a href="/live">Live Stream</a> <a href="/live">Live Stream</a>
<a href="/milieu">Milieu Effect</a> <a href="/milieu">Milieu Effect</a>
<a href="/multi">Multiple Instances</a>
</div> </div>
<style lang="scss"> <style lang="scss">

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

@ -15,6 +15,7 @@ import {
<meta charset="utf-8"> <meta charset="utf-8">
<Zorn <Zorn
PlayerName="nameit_whatever_you_want"
Title="Ennie and Yoyki: Non-Girly Games" Title="Ennie and Yoyki: Non-Girly Games"
Poster="https://md.sudovanilla.org/images/eay-p-v.jpg" Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm" Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"

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

@ -6,6 +6,7 @@ import Switcher from '@components/Switcher.astro'
--- ---
<Zorn <Zorn
PlayerName="nameit_whatever_you_want"
Title="relaxbeats" Title="relaxbeats"
Video="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8" Video="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8"
Live Live

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

@ -15,6 +15,7 @@ import {
<meta charset="utf-8"> <meta charset="utf-8">
<Zorn <Zorn
PlayerName="nameit_whatever_you_want"
Title="Islandia" Title="Islandia"
Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png" Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4" Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"

91
test/src/pages/multi.astro Normal file
View file

@ -0,0 +1,91 @@
---
// Components
import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
import Switcher from '@components/Switcher.astro'
// Icons
import {
ArrowUpRight,
NavArrowLeft,
SwitchOff,
NavArrowRight
} from '@iconoir/vue'
---
<meta charset="utf-8">
<div style="display: grid; grid-template-columns: 45% auto 45%; gap: 24px;">
<div>
<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"
PlayerName="EAYNGG"
/>
<Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
<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>
<p>Subtitles shown are part of the video itself, not the player.</p>
</Info>
</div>
<span style="background: #232323;height: 600px;width: 6px;border-radius: 1rem;"></span>
<div>
<Zorn
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
CustomControls
VideoAttributes="muted"
AudioAttributes=""
PlayerName="TMOTW"
/>
<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
<p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
<p>This demo also pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
</Info>
</div>
</div>
<Switcher/>
<style is:inline>a[href="/multi"] {background: white !important;color: black !important;}</style>
<div style="margin: auto; max-width: 600px;">
<p>
As of Zorn Player v0.4.6, it is now possible to have multiple instances of the player on one page. With the new <code>PlayerName</code> option, which is required from now on.
<br/>
<br/>
This update now identities each Zorn Player with the <code>PlayerName</code> option, as an ID such as <code>zorn-player-PLAYER_NAME_HERE</code> is now used.
<br/>
<br/>
The <code>PlayerName</code> option will be identited by the built-in scripts using Astro's <code>definer:vars</code> feature for the script tag.
</p>
<p>
Having multiple instances can still be buggy, depending on how you have it setup.
</p>
</div>
<style is:global>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > center:nth-child(8),
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > center:nth-child(8),
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > hr:nth-child(7),
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > hr:nth-child(7) {
display: none !important;
}
code {
background: #fff;
border-radius: 4px;
padding: 0px 4px;
color: black;
}
</style>

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

@ -6,6 +6,7 @@ import Switcher from '@components/Switcher.astro'
--- ---
<Zorn <Zorn
PlayerName="nameit_whatever_you_want"
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg" Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4" Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4" Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"