95 lines
No EOL
2.8 KiB
Text
95 lines
No EOL
2.8 KiB
Text
---
|
|
// Properties
|
|
const {
|
|
PlayerName,
|
|
|
|
Whitelabel = false,
|
|
|
|
Poster,
|
|
Video,
|
|
Audio,
|
|
VideoAttributes,
|
|
AudioAttributes,
|
|
|
|
YouTube = false,
|
|
YouTubeQuality = '137',
|
|
Invidious,
|
|
WatchId,
|
|
|
|
Milieu,
|
|
MilieuMode = "Default",
|
|
MilieuSpeed = "2000",
|
|
MilieuScale = "1.05",
|
|
MilieuBlur = "16px",
|
|
|
|
SettingsMenu,
|
|
|
|
Live
|
|
} = Astro.props
|
|
|
|
// Components
|
|
import Controls from './Controls.astro'
|
|
import MilieuEffect from './Features/Milieu.astro'
|
|
import Controller from './Controls/Controller.astro'
|
|
import Seek from './Controls/Seek.astro'
|
|
import Sync from './Controls/Sync.astro'
|
|
|
|
// YouTube
|
|
if (YouTube === true) {
|
|
// 8K = 272
|
|
// 4K = 315
|
|
// 1080p = 137
|
|
// 720p = 302
|
|
// Dash Audio = 251
|
|
var YTVideo = 'https://' + Invidious +'/latest_version?id=' + WatchId + '&itag=' + YouTubeQuality
|
|
var YTAudio = 'https://' + Invidious +'/latest_version?id=' + WatchId + '&itag=251'
|
|
} else if (YouTube === false) {
|
|
null
|
|
}
|
|
|
|
// Icons and Styles
|
|
import './Styles/Index.scss'
|
|
import './Styles/Iconoir.css'
|
|
---
|
|
|
|
<div class="video-container" id={"zorn-player-" + PlayerName}>
|
|
<video class="main-video" {VideoAttributes} disableremoteplayback src={YouTube ? YTVideo : Video} poster={Poster} preload="auto"></video>
|
|
{Audio ? <audio class="main-audio"><source {AudioAttributes} src={YouTube ? YTAudio : Audio} type="audio/mp3"/></audio> : null }
|
|
{Audio ? <Sync PlayerName={PlayerName}/> : null }
|
|
{Milieu ?
|
|
<MilieuEffect
|
|
PlayerName={PlayerName}
|
|
MilieuMode={MilieuMode}
|
|
MilieuSpeed={MilieuSpeed}
|
|
MilieuScale={MilieuScale}
|
|
MilieuBlur={MilieuBlur}
|
|
/>
|
|
:
|
|
null
|
|
}
|
|
{SettingsMenu ?
|
|
<Controls PlayerName={PlayerName} Live={Live}>
|
|
<button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>
|
|
<slot/>
|
|
</Controls>
|
|
:
|
|
<Controls PlayerName={PlayerName} Live={Live}/>
|
|
}
|
|
<Controller PlayerName={PlayerName}/>
|
|
<Seek PlayerName={PlayerName}/>
|
|
</div>
|
|
|
|
<!-- Needs control the correct source -->
|
|
{Audio ?
|
|
<script define:vars={{PlayerName}}>
|
|
var ZornAudioSource = document.querySelector('#zorn-player-' + PlayerName + ' audio')
|
|
var VolumeRange = document.querySelector('#zorn-player-' + PlayerName + ' .vc-volume-controller-input input')
|
|
VolumeRange.addEventListener("input", (event) => {ZornAudioSource.volume = event.target.value})
|
|
</script>
|
|
:
|
|
<script define:vars={{PlayerName}}>
|
|
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
|
var VolumeRange = document.querySelector('#zorn-player-' + PlayerName + ' .vc-volume-controller-input input')
|
|
VolumeRange.addEventListener("input", (event) => {Player.volume = event.target.value})
|
|
</script>
|
|
} |