Add events and dialogs

This commit is contained in:
Korbs 2023-11-06 18:08:47 -05:00
parent 48972392cf
commit f4d0d829b5
No known key found for this signature in database
3 changed files with 69 additions and 5 deletions

View file

@ -1,6 +1,42 @@
const video = document.querySelector('.plyx-player') const video = document.querySelector('.plyx-player')
const videoContainer = document.querySelector('.video-container') const videoContainer = document.querySelector('.video-container')
// Events
video.addEventListener('error', function(event) {
document.querySelector('#invalid-src').style.display = 'inherit'
document.querySelector('.plyx-player-controls').style.display = 'none'
videoContainer.style.backgroundColor = '#101010'
setTimeout(() => {
video.style.opacity = '0.10'
document.querySelector('#buffering').style.display = 'none'
}, 0o250);
}, true)
video.onwaiting = (event) => {
document.querySelector('#buffering').style.display = 'inherit'
video.style.transition = '5s opacity'
video.style.opacity = '0.25'
}
video.oncanplaythrough = (event) => {
document.querySelector('#buffering').style.display = 'none'
video.style.transition = '0.3s opacity'
video.style.opacity = '1'
}
function AddDialogs() {
var add_dialogs = `
<div class="plyx-player-dialogs">
<div id="buffering" class="plyx-dialog">
<h2><i class="fa-duotone fa-spinner-third fa-spin fa-2xl"></i></h2>
</div>
<div id="invalid-src" class="plyx-dialog">
<h2>Failed to Load</h2>
</div>
</div>
`
video.insertAdjacentHTML("afterend", add_dialogs)
}
function AddControls() { function AddControls() {
var add_controls = ` var add_controls = `
<div oncontextmenu="return false" class="plyx-player-controls"> <div oncontextmenu="return false" class="plyx-player-controls">
@ -191,6 +227,8 @@ function Util() {
document.addEventListener('keyup', keyboardShortcuts) document.addEventListener('keyup', keyboardShortcuts)
// Other Controls // Other Controls
/// Error Event
/// Double click (Toggle Fullscreen) /// Double click (Toggle Fullscreen)
video.addEventListener('dblclick', () => {Toggle_Fullscreen()}) video.addEventListener('dblclick', () => {Toggle_Fullscreen()})
@ -235,4 +273,4 @@ function Util() {
} }
export {AddControls, Util} export {AddControls, AddDialogs, Util}

File diff suppressed because one or more lines are too long

View file

@ -46,6 +46,32 @@ $background-color_4: rgba(255, 255, 255, 0.1);
justify-content: center; justify-content: center;
font-family: $font-family_1; font-family: $font-family_1;
color: $color_1; color: $color_1;
.plyx-player-dialogs {
#buffering {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0px 24px;
border-radius: 6px;
h2 {
font-size: 52px;
}
}
#invalid-src {
display: none;
position: absolute;
top: 50%;
left: 24px;
transform: translate(0px, -50%);
padding: 0px 24px;
border-radius: 6px;
h2 {
font-size: 52px;
}
}
}
.plyx-player { .plyx-player {
display: inline-flex; display: inline-flex;
} }
@ -116,8 +142,8 @@ $background-color_4: rgba(255, 255, 255, 0.1);
#volume-button { #volume-button {
svg { svg {
aspect-ratio: 1; aspect-ratio: 1;
height: 32px; height: 16px;
width: 32px; width: 16px;
fill: white; fill: white;
padding: 3px 0px 0px 0px; padding: 3px 0px 0px 0px;
} }
@ -251,5 +277,5 @@ $background-color_4: rgba(255, 255, 255, 0.1);
border: none; border: none;
border-radius: 10px; border-radius: 10px;
} }
} }
} }