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