Remove context menu code temporary and minor changes
This commit is contained in:
parent
45a9034c19
commit
d6feb69c4a
1 changed files with 35 additions and 31 deletions
|
|
@ -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>
|
||||
<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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in a new issue