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() {
|
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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in a new issue