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 +84 -77
4 changed files with 84 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit bc1262d87e - Show all commits

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") {

26
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>
} }