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

Add buffering indicator

Browse source
This commit is contained in:
Korbs 2024-12-03 15:56:01 -05:00
parent 145b462fdf
commit fe73d0380c
1 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/Controls/Controller.astro
View file

@ -2,11 +2,12 @@
const { const {
PlayerName, PlayerName,
BigPlayButton, BigPlayButton,
ShowBackAndForward ShowBackAndForward,
ShowFullscreen
} = Astro.props } = Astro.props
--- ---
<script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward}}> <script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward, ShowFullscreen}}>
/** /**
* @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.
@ -47,10 +48,23 @@ var exit_fullscreen_solid_default = '<svg width="24px" height="24px" stroke-widt
var FullscreenIcon = fullscreen_solid_default var FullscreenIcon = fullscreen_solid_default
var ExitFullscreenIcon = exit_fullscreen_solid_default var ExitFullscreenIcon = exit_fullscreen_solid_default
// Buffering
function Buffering() {
var BufferingIndicator = document.querySelector('#zorn-player-' + PlayerName + ' #vc-buffering')
Player.onwaiting = (event) => {
BufferingIndicator.style.opacity = '1'
}
Player.onplaying = (event) => {
BufferingIndicator.style.opacity = '0'
}
}
// Fullscreen // Fullscreen
function Fullscreen() { function Fullscreen() {
// Get Button // Get Button
const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen"); if (ShowFullscreen === true) {
var Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
}
// Create and Call Functions // Create and Call Functions
function Toggle_Fullscreen() { function Toggle_Fullscreen() {
@ -70,19 +84,19 @@ function Fullscreen() {
EnterFullscreen(); EnterFullscreen();
VideoContainer.requestFullscreen() VideoContainer.requestFullscreen()
} }
Update_FullscreenButton() if (ShowFullscreen === true) {Update_FullscreenButton()}
} }
function EnterFullscreen() { function EnterFullscreen() {
VideoContainer.classList.add('zorn-fullscreen'); VideoContainer.classList.add('zorn-fullscreen');
Update_FullscreenButton(); if (ShowFullscreen === true) {Update_FullscreenButton()}
} }
function ExitFullscreen() { function ExitFullscreen() {
VideoContainer.classList.remove('zorn-fullscreen'); VideoContainer.classList.remove('zorn-fullscreen');
Update_FullscreenButton(); if (ShowFullscreen === true) {Update_FullscreenButton()}
} }
// Event Listener // Event Listener
Button_Fullscreen.onclick = Toggle_Fullscreen; if (ShowFullscreen === true) {Button_Fullscreen.onclick = Toggle_Fullscreen;}
function Update_FullscreenButton() { function Update_FullscreenButton() {
if (document.fullscreenElement) { if (document.fullscreenElement) {
Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)"); Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)");
@ -96,7 +110,7 @@ function Fullscreen() {
// Gesture // Gesture
Player.addEventListener("dblclick", () => { Player.addEventListener("dblclick", () => {
Toggle_Fullscreen() Toggle_Fullscreen()
Update_FullscreenButton() if (ShowFullscreen === true) {Update_FullscreenButton()}
}); });
// Keyboard Shortcut // Keyboard Shortcut
@ -337,6 +351,7 @@ function PlayAgain() {
// Init Functions // Init Functions
AutoToggleControls() AutoToggleControls()
Buffering()
Fullscreen() Fullscreen()
Gestures() Gestures()
KeyboardShortcuts() KeyboardShortcuts()