Remove context menu code temporary and minor changes

This commit is contained in:
Korbs 2023-11-06 02:09:57 -05:00
parent 45a9034c19
commit d6feb69c4a
No known key found for this signature in database

View file

@ -3,7 +3,7 @@ const videoContainer = document.querySelector('.video-container')
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">
<div class="row-2"> <div class="row-2">
<div class="video-progress"> <div class="video-progress">
<progress id="progress-bar" value="0" min="0"></progress> <progress id="progress-bar" value="0" min="0"></progress>
@ -16,9 +16,9 @@ function AddControls() {
<button id="play-pause"><i class="fa-solid fa-play"></i></button> <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-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> <button id="skip-forth"><i class="fa-solid fa-arrow-rotate-right"></i></button>
<input class="volume" id="volume" value="1" type="range" max="1" min="0" step="0.01">
<div class="volume-controls"> <div class="volume-controls">
<button data-title="Mute (m)" class="volume-button" id="volume-button"><i class="fa-solid fa-volume-high"></i></button> <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> </div>
<div class="row-1-end"> <div class="row-1-end">
@ -32,7 +32,7 @@ function AddControls() {
</div> </div>
</div> </div>
` `
video.insertAdjacentHTML("afterend", add_controls); video.insertAdjacentHTML("afterend", add_controls)
video.setAttribute("oncontextmenu", "return false") video.setAttribute("oncontextmenu", "return false")
} }
@ -66,7 +66,7 @@ function Util() {
} }
// Fullscreen // Fullscreen
const Button_Fullscreen = document.getElementById('fullscreen'); const Button_Fullscreen = document.getElementById('fullscreen')
function Toggle_Fullscreen() { function Toggle_Fullscreen() {
if (document.fullscreenElement) {document.exitFullscreen()} if (document.fullscreenElement) {document.exitFullscreen()}
else if (document.webkitFullscreenElement) {document.webkitExitFullscreen()} else if (document.webkitFullscreenElement) {document.webkitExitFullscreen()}
@ -74,7 +74,7 @@ function Util() {
else {videoContainer.requestFullscreen()} else {videoContainer.requestFullscreen()}
} }
Button_Fullscreen.onclick = Toggle_Fullscreen; 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)')
@ -85,7 +85,7 @@ function Util() {
} }
} }
videoContainer.addEventListener('fullscreenchange', Update_FullscreenButton); videoContainer.addEventListener('fullscreenchange', Update_FullscreenButton)
// Skip Back or Forth // Skip Back or Forth
const Button_SkipBack = document.querySelector('.plyx-player-controls #skip-back') const Button_SkipBack = document.querySelector('.plyx-player-controls #skip-back')
@ -98,7 +98,7 @@ function Util() {
function Toggle_SkipForth() {Skip(10)} function Toggle_SkipForth() {Skip(10)}
function Skip(value) { function Skip(value) {
video.currentTime += value; video.currentTime += value
} }
// Volume (Also the slider) // Volume (Also the slider)
@ -129,11 +129,11 @@ function Util() {
video.addEventListener('volumechange', Update_Volume_Icon) video.addEventListener('volumechange', Update_Volume_Icon)
function Toggle_Mute() { function Toggle_Mute() {
video.muted = !video.muted; video.muted = !video.muted
if (video.muted) { if (video.muted) {
volume.setAttribute('data-volume', volume.value) volume.setAttribute('data-volume', volume.value)
volume.value = 0; volume.value = 0
} else { } else {
volume.value = volume.dataset.volume volume.value = volume.dataset.volume
} }
@ -142,33 +142,37 @@ function Util() {
// Keyboard Shortcuts // Keyboard Shortcuts
function keyboardShortcuts(event) { function keyboardShortcuts(event) {
const { key } = event; const { key } = event
switch(key) { switch(key) {
case 'k': case 'k':
Toggle_PlayPause(); Toggle_PlayPause()
if (video.paused) { if (video.paused) {
Show_Controls(); Show_Controls()
} else { } else {
setTimeout(() => { setTimeout(() => {
Hide_Controls(); Hide_Controls()
}, 2000); }, 1200)
} }
break; break
case 'm': case 'm':
Toggle_Mute(); Toggle_Mute()
break; break
case 'f': case 'f':
Toggle_Fullscreen(); Toggle_Fullscreen()
break; break
case 'j': case 'j':
Toggle_SkipBack(); Toggle_SkipBack()
break; break
case 'l': case 'l':
Toggle_SkipForth(); Toggle_SkipForth()
break; break
} }
} }
document.addEventListener('keyup', keyboardShortcuts); document.addEventListener('keyup', keyboardShortcuts)
// Other Controls
/// Double click (Toggle Fullscreen)
video.addEventListener('dblclick', () => {Toggle_Fullscreen()})
// Auto Hide Controls // Auto Hide Controls
function Hide_Controls() { function Hide_Controls() {
@ -190,23 +194,23 @@ function Util() {
var mouseTimer = null, cursorVisible = true var mouseTimer = null, cursorVisible = true
function disappearCursor() { function Hide_Cursor() {
mouseTimer = null mouseTimer = null
document.body.style.cursor = "none" videoContainer.style.cursor = "none"
cursorVisible = false cursorVisible = false
Hide_Controls() Hide_Controls()
} }
document.onmousemove = function() { document.onmousemove = function() {
if (mouseTimer) { if (mouseTimer) {
window.clearTimeout(mouseTimer); window.clearTimeout(mouseTimer)
Show_Controls(); Show_Controls()
} }
if (!cursorVisible) { if (!cursorVisible) {
document.body.style.cursor = "default" videoContainer.style.cursor = "default"
cursorVisible = true cursorVisible = true
} }
mouseTimer = window.setTimeout(disappearCursor, 1500) mouseTimer = window.setTimeout(Hide_Cursor, 3200)
} }
} }