Add events and dialogs
This commit is contained in:
parent
48972392cf
commit
f4d0d829b5
3 changed files with 69 additions and 5 deletions
|
@ -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
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue