Korbs/zorn-js
Archived
1
Fork 0
Code Issues Pull requests Activity

Add events and dialogs

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/functions/buttons.js
View file

@ -1,6 +1,42 @@
const video = document.querySelector('.plyx-player')
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() {
var add_controls = `
<div oncontextmenu="return false" class="plyx-player-controls">
@ -191,6 +227,8 @@ function Util() {
document.addEventListener('keyup', keyboardShortcuts)
// Other Controls
/// Error Event
/// Double click (Toggle Fullscreen)
video.addEventListener('dblclick', () => {Toggle_Fullscreen()})
@ -235,4 +273,4 @@ function Util() {
}
export {AddControls, Util}
export {AddControls, AddDialogs, Util}

2
src/styles/app.css
View file

File diff suppressed because one or more lines are too long

30
src/styles/app.scss
View file

@ -46,6 +46,32 @@ $background-color_4: rgba(255, 255, 255, 0.1);
justify-content: center;
font-family: $font-family_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 {
display: inline-flex;
}
@ -116,8 +142,8 @@ $background-color_4: rgba(255, 255, 255, 0.1);
#volume-button {
svg {
aspect-ratio: 1;
height: 32px;
width: 32px;
height: 16px;
width: 16px;
fill: white;
padding: 3px 0px 0px 0px;
}