238 lines
No EOL
8.4 KiB
JavaScript
238 lines
No EOL
8.4 KiB
JavaScript
const video = document.querySelector('.plyx-player')
|
|
const videoContainer = document.querySelector('.video-container')
|
|
|
|
function AddControls() {
|
|
var add_controls = `
|
|
<div oncontextmenu="return false" class="plyx-player-controls">
|
|
<div class="row-2">
|
|
<div class="video-progress">
|
|
<progress id="progress-bar" value="0" min="0"></progress>
|
|
<input class="seek" id="seek" value="0" min="0" type="range" step="1">
|
|
<div class="seek-tooltip" id="seek-tooltip">00:00</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-1">
|
|
<div class="row-1-start">
|
|
<button id="play-pause"><i class="fa-solid fa-play"></i></button>
|
|
<button id="skip-back"><i class="fa-solid fa-arrow-rotate-left"></i></button>
|
|
<button id="skip-forth"><i class="fa-solid fa-arrow-rotate-right"></i></button>
|
|
<div class="volume-controls">
|
|
<button data-title="Mute (m)" class="volume-button" id="volume-button"><i class="fa-solid fa-volume-high"></i></button>
|
|
<input class="volume" id="volume" value="1" type="range" max="1" min="0" step="0.01">
|
|
</div>
|
|
</div>
|
|
<div class="row-1-end">
|
|
<div class="time">
|
|
<time id="time-elapsed">00:00</time>
|
|
<span> / </span>
|
|
<time id="duration">00:00</time>
|
|
</div>
|
|
<button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
video.insertAdjacentHTML("afterend", add_controls)
|
|
video.setAttribute("oncontextmenu", "return false")
|
|
}
|
|
|
|
function Util() {
|
|
const videoControls = document.querySelector('.plyx-player-controls')
|
|
// Play/Plause
|
|
const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause')
|
|
|
|
Button_PlayPause.addEventListener('click', Toggle_PlayPause)
|
|
video.addEventListener('click', Toggle_PlayPause)
|
|
video.addEventListener('play', Update_PlayPauseButton)
|
|
video.addEventListener('pause', Update_PlayPauseButton)
|
|
|
|
function Toggle_PlayPause() {
|
|
if (video.paused || video.ended) {
|
|
video.play()
|
|
}
|
|
else {
|
|
video.pause()
|
|
}
|
|
}
|
|
|
|
function Update_PlayPauseButton() {
|
|
if (video.paused) {
|
|
Button_PlayPause.setAttribute('data-title', 'Play (k)')
|
|
Button_PlayPause.innerHTML = `<i class="fa-solid fa-play"></i>`
|
|
} else {
|
|
Button_PlayPause.setAttribute('data-title', 'Pause (k)')
|
|
Button_PlayPause.innerHTML = `<i class="fa-solid fa-pause"></i>`
|
|
}
|
|
}
|
|
|
|
// Fullscreen
|
|
const Button_Fullscreen = document.getElementById('fullscreen')
|
|
function Toggle_Fullscreen() {
|
|
if (document.fullscreenElement) {document.exitFullscreen()}
|
|
else if (document.webkitFullscreenElement) {document.webkitExitFullscreen()}
|
|
else if (videoContainer.webkitRequestFullscreen) {videoContainer.webkitRequestFullscreen()}
|
|
else {videoContainer.requestFullscreen()}
|
|
}
|
|
|
|
Button_Fullscreen.onclick = Toggle_Fullscreen
|
|
function Update_FullscreenButton() {
|
|
if (document.fullscreenElement) {
|
|
Button_Fullscreen.setAttribute('data-title', 'Exit full screen (f)')
|
|
Button_Fullscreen.innerHTML = `<i class="fa-solid fa-compress"></i>`
|
|
} else {
|
|
Button_Fullscreen.setAttribute('data-title', 'Full screen (f)')
|
|
Button_Fullscreen.innerHTML = `<i class="fa-solid fa-expand"></i>`
|
|
}
|
|
}
|
|
|
|
videoContainer.addEventListener('fullscreenchange', Update_FullscreenButton)
|
|
|
|
// Skip Back or Forth
|
|
const Button_SkipBack = document.querySelector('.plyx-player-controls #skip-back')
|
|
const Button_SkipForth = document.querySelector('.plyx-player-controls #skip-forth')
|
|
|
|
Button_SkipBack.addEventListener('click', Toggle_SkipBack)
|
|
Button_SkipForth.addEventListener('click', Toggle_SkipForth)
|
|
|
|
function Toggle_SkipBack() {Skip(-10)}
|
|
function Toggle_SkipForth() {Skip(10)}
|
|
|
|
function Skip(value) {
|
|
video.currentTime += value
|
|
}
|
|
|
|
// Volume (Also the slider)
|
|
const Button_Volume = document.getElementById('volume-button')
|
|
const volume = document.getElementById('volume')
|
|
function Update_Volme() {
|
|
if (video.muted) {
|
|
video.muted = false
|
|
}
|
|
video.volume = volume.value
|
|
}
|
|
|
|
volume.addEventListener('input', Update_Volme)
|
|
|
|
function Update_Volume_Icon() {
|
|
Button_Volume.setAttribute('data-title', 'Mute (m)')
|
|
|
|
if (video.muted || video.volume === 0) {
|
|
Button_Volume.innerHTML = `<i class="fa-solid fa-volume-slash"></i>`
|
|
Button_Volume.setAttribute('data-title', 'Unmute (m)')
|
|
} else if (video.volume > 0 && video.volume <= 0.5) {
|
|
Button_Volume.innerHTML = `<i class="fa-solid fa-volume-low"></i>`
|
|
} else {
|
|
Button_Volume.innerHTML = `<i class="fa-solid fa-volume-high"></i>`
|
|
}
|
|
}
|
|
|
|
video.addEventListener('volumechange', Update_Volume_Icon)
|
|
|
|
function Toggle_Mute() {
|
|
video.muted = !video.muted
|
|
|
|
if (video.muted) {
|
|
volume.setAttribute('data-volume', volume.value)
|
|
volume.value = 0
|
|
} else {
|
|
volume.value = volume.dataset.volume
|
|
}
|
|
}
|
|
Button_Volume.addEventListener('click', Toggle_Mute)
|
|
|
|
// Keyboard Shortcuts
|
|
/// Grab custom ones, if any
|
|
if (video.getAttribute('keyboard-shortcut-fullscreen'))
|
|
{var Fullscreen_KeyboardShortcut = video.getAttribute('keyboard-shortcut-fullscreen')
|
|
} else {var Fullscreen_KeyboardShortcut = 'f'}
|
|
|
|
if (video.getAttribute('keyboard-shortcut-mute'))
|
|
{var Mute_KeyboardShortcut = video.getAttribute('keyboard-shortcut-mute')
|
|
} else {var Mute_KeyboardShortcut = 'm'}
|
|
|
|
if (video.getAttribute('keyboard-shortcut-playpause'))
|
|
{var PlayPause_KeyboardShortcut = video.getAttribute('keyboard-shortcut-playpause')
|
|
} else {var PlayPause_KeyboardShortcut = 'k'}
|
|
|
|
if (video.getAttribute('keyboard-shortcut-skipback'))
|
|
{var SkipBack_KeyboardShortcut = video.getAttribute('keyboard-shortcut-skipback')
|
|
} else {var SkipBack_KeyboardShortcut = 'j'}
|
|
|
|
if (video.getAttribute('keyboard-shortcut-skipforth'))
|
|
{var SkipForth_KeyboardShortcut = video.getAttribute('keyboard-shortcut-skipforth')
|
|
} else {var SkipForth_KeyboardShortcut = 'l'}
|
|
|
|
/// Defaults
|
|
function keyboardShortcuts(event) {
|
|
const { key } = event
|
|
if (key === PlayPause_KeyboardShortcut) {
|
|
Toggle_PlayPause()
|
|
if (video.paused) {
|
|
Show_Controls()
|
|
} else {
|
|
setTimeout(() => {
|
|
Hide_Controls()
|
|
}, 1200)
|
|
}
|
|
}
|
|
else if (key === Mute_KeyboardShortcut) {
|
|
Toggle_Mute()
|
|
}
|
|
else if (key === Fullscreen_KeyboardShortcut) {
|
|
Toggle_Fullscreen()
|
|
}
|
|
else if (key === SkipBack_KeyboardShortcut) {
|
|
Toggle_SkipBack()
|
|
}
|
|
else if (key === SkipForth_KeyboardShortcut) {
|
|
Toggle_SkipForth()
|
|
}
|
|
}
|
|
document.addEventListener('keyup', keyboardShortcuts)
|
|
|
|
// Other Controls
|
|
/// Double click (Toggle Fullscreen)
|
|
video.addEventListener('dblclick', () => {Toggle_Fullscreen()})
|
|
|
|
// Auto Hide Controls
|
|
function Hide_Controls() {
|
|
if (video.paused) {
|
|
return
|
|
}
|
|
|
|
videoControls.classList.add('hide')
|
|
}
|
|
|
|
// Show_Controls displays the video controls
|
|
function Show_Controls() {
|
|
videoControls.classList.remove('hide')
|
|
}
|
|
video.addEventListener('mouseenter', Show_Controls)
|
|
video.addEventListener('mouseleave', Hide_Controls)
|
|
videoControls.addEventListener('mouseenter', Show_Controls)
|
|
videoControls.addEventListener('mouseleave', Hide_Controls)
|
|
|
|
var mouseTimer = null, cursorVisible = true
|
|
|
|
function Hide_Cursor() {
|
|
mouseTimer = null
|
|
videoContainer.style.cursor = "none"
|
|
cursorVisible = false
|
|
Hide_Controls()
|
|
}
|
|
|
|
document.onmousemove = function() {
|
|
if (mouseTimer) {
|
|
window.clearTimeout(mouseTimer)
|
|
Show_Controls()
|
|
}
|
|
if (!cursorVisible) {
|
|
videoContainer.style.cursor = "default"
|
|
cursorVisible = true
|
|
}
|
|
mouseTimer = window.setTimeout(Hide_Cursor, 3200)
|
|
}
|
|
}
|
|
|
|
|
|
export {AddControls, Util} |