Add shortcuts and autohide controls
This commit is contained in:
parent
f5be2970ab
commit
28de864295
9 changed files with 159 additions and 26 deletions
46
src/functions/AutoToggleControls.js
Normal file
46
src/functions/AutoToggleControls.js
Normal file
|
@ -0,0 +1,46 @@
|
|||
import { VideoContainer, VideoControls, ZornVideoPlayer } from '../get'
|
||||
|
||||
|
||||
export function AutoToggleControls() {
|
||||
function Hide_Controls() {
|
||||
var ZornTitleArea = document.querySelector(".video-container > h2")
|
||||
if (ZornVideoPlayer.paused) {
|
||||
return
|
||||
} else {
|
||||
document.querySelector('.zorn-player-controls').classList.add('hide')
|
||||
ZornTitleArea.classList.add('hide')
|
||||
}
|
||||
}
|
||||
|
||||
// Show_Controls displays the video controls
|
||||
function Show_Controls() {
|
||||
var ZornTitleArea = document.querySelector(".video-container > h2")
|
||||
document.querySelector('.zorn-player-controls').classList.remove('hide')
|
||||
ZornTitleArea.classList.remove('hide')
|
||||
}
|
||||
ZornVideoPlayer.addEventListener('mouseenter', Show_Controls)
|
||||
ZornVideoPlayer.addEventListener('mouseleave', Hide_Controls)
|
||||
document.querySelector('.zorn-player-controls').addEventListener('mouseenter', Show_Controls)
|
||||
document.querySelector('.zorn-player-controls').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)
|
||||
}
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
import { VideoContainer } from '../get'
|
||||
import { VideoContainer, ZornVideoPlayer } from '../get'
|
||||
|
||||
|
||||
export function Fullscreen() {
|
||||
|
@ -14,12 +14,11 @@ export function 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)
|
||||
ZornVideoPlayer.addEventListener('dblclick', () => {Toggle_Fullscreen()})
|
||||
}
|
82
src/functions/KeyboardShortcuts.js
Normal file
82
src/functions/KeyboardShortcuts.js
Normal file
|
@ -0,0 +1,82 @@
|
|||
import { ZornVideoPlayer, VideoContainer } from "../get"
|
||||
|
||||
export function KeyboardShortcuts(events) {
|
||||
/// Grab custom ones, if any
|
||||
if (ZornVideoPlayer.hasAttribute('keyboard-shortcut-fullscreen')) {
|
||||
var Fullscreen_KeyboardShortcut = ZornVideoPlayer.getAttribute('keyboard-shortcut-fullscreen')
|
||||
}
|
||||
else {
|
||||
var Fullscreen_KeyboardShortcut = 'f'
|
||||
}
|
||||
|
||||
if (ZornVideoPlayer.hasAttribute('keyboard-shortcut-mute')) {
|
||||
var Mute_KeyboardShortcut = ZornVideoPlayer.getAttribute('keyboard-shortcut-mute')
|
||||
}
|
||||
else {
|
||||
var Mute_KeyboardShortcut = 'm'
|
||||
}
|
||||
|
||||
if (ZornVideoPlayer.hasAttribute('keyboard-shortcut-playpause')) {
|
||||
var PlayPause_KeyboardShortcut = ZornVideoPlayer.getAttribute('keyboard-shortcut-playpause')
|
||||
}
|
||||
else {
|
||||
var PlayPause_KeyboardShortcut = 'k'
|
||||
}
|
||||
|
||||
if (ZornVideoPlayer.hasAttribute('keyboard-shortcut-skipback')) {
|
||||
var SkipBack_KeyboardShortcut = ZornVideoPlayer.getAttribute('keyboard-shortcut-skipback')
|
||||
}
|
||||
else {
|
||||
var SkipBack_KeyboardShortcut = 'j'
|
||||
}
|
||||
|
||||
if (ZornVideoPlayer.hasAttribute('keyboard-shortcut-skipforth')) {
|
||||
var SkipForth_KeyboardShortcut = ZornVideoPlayer.getAttribute('keyboard-shortcut-skipforth')
|
||||
}
|
||||
else {
|
||||
var SkipForth_KeyboardShortcut = 'l'
|
||||
}
|
||||
|
||||
/// Defaults
|
||||
function keyboardShortcuts(event) {
|
||||
const { key } = event
|
||||
if (key === PlayPause_KeyboardShortcut) {
|
||||
if (ZornVideoPlayer.paused || ZornVideoPlayer.ended) {
|
||||
ZornVideoPlayer.play()
|
||||
}
|
||||
else {
|
||||
ZornVideoPlayer.pause()
|
||||
}
|
||||
if (ZornVideoPlayer.paused) {
|
||||
Show_Controls()
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
Hide_Controls()
|
||||
}, 1200)
|
||||
}
|
||||
}
|
||||
else if (key === Mute_KeyboardShortcut) {
|
||||
ZornVideoPlayer.muted = !ZornVideoPlayer.muted
|
||||
|
||||
if (ZornVideoPlayer.muted) {
|
||||
volume.setAttribute('data-volume', volume.value)
|
||||
volume.value = 0
|
||||
} else {
|
||||
volume.value = volume.dataset.volume
|
||||
}
|
||||
}
|
||||
else if (key === Fullscreen_KeyboardShortcut) {
|
||||
if (document.fullscreenElement) {document.exitFullscreen()}
|
||||
else if (document.webkitFullscreenElement) {document.webkitExitFullscreen()}
|
||||
else if (VideoContainer.webkitRequestFullscreen) {VideoContainer.webkitRequestFullscreen()}
|
||||
else {VideoContainer.requestFullscreen()}
|
||||
}
|
||||
else if (key === SkipBack_KeyboardShortcut) {
|
||||
ZornVideoPlayer.currentTime += (-10)
|
||||
}
|
||||
else if (key === SkipForth_KeyboardShortcut) {
|
||||
ZornVideoPlayer.currentTime += (10)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', keyboardShortcuts)
|
||||
}
|
|
@ -1,6 +1,5 @@
|
|||
import { ZornVideoPlayer } from '../get'
|
||||
|
||||
|
||||
export function Seek() {
|
||||
// Duration and Length of Video
|
||||
const timeElapsed = document.getElementById('time-elapsed');
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// Set Variables for required video container and video player
|
||||
export var ZornVideoPlayer = document.querySelector('.zorn-player')
|
||||
export var VideoContainer = document.querySelector('.video-container')
|
||||
export var VideoControls = document.querySelector('.zorn-player-controls')
|
||||
|
||||
// Icons - Iconoir.com
|
||||
/// Get Icons
|
||||
|
|
|
@ -10,6 +10,8 @@ import { Subtitles } from "./functions/Subtitles"
|
|||
import { Volume } from "./functions/Volume"
|
||||
import { Seek } from "./functions/Seek"
|
||||
import { BufferDialog } from "./dialogs/Buffering"
|
||||
import { AutoToggleControls } from "./functions/AutoToggleControls"
|
||||
import { KeyboardShortcuts } from "./functions/KeyboardShortcuts"
|
||||
|
||||
// Apply Controls
|
||||
ZornVideoPlayer.insertAdjacentHTML("afterend", Controls)
|
||||
|
@ -17,7 +19,9 @@ ZornVideoPlayer.insertAdjacentHTML("afterend", BufferDialog)
|
|||
|
||||
// Init Functions
|
||||
Events()
|
||||
KeyboardShortcuts()
|
||||
PlayPause()
|
||||
AutoToggleControls() // Broken
|
||||
SkipAround()
|
||||
Fullscreen()
|
||||
Subtitles()
|
||||
|
|
|
@ -136,11 +136,12 @@ export var Controls = `
|
|||
display: none;
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
bottom: 50px;
|
||||
bottom: 70px;
|
||||
background: #000 9;
|
||||
list-style: none;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
}
|
||||
.video-container .subtitles-menu button {
|
||||
background-color: transparent;
|
||||
|
@ -196,9 +197,9 @@ export var Controls = `
|
|||
border: none;
|
||||
margin: 0px 6px;
|
||||
}
|
||||
.video-container .zorn-player-controls button:hover {
|
||||
background: rgba(44, 44, 44, 0.6);
|
||||
border-radius: 6px;
|
||||
.volume-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.video-container .zorn-player-controls .volume-controls:hover > #volume {
|
||||
opacity: 1;
|
||||
|
@ -209,7 +210,7 @@ export var Controls = `
|
|||
.video-container .zorn-player-controls #volume {
|
||||
opacity: 0;
|
||||
transition: 0.3s opacity, 0.3s width;
|
||||
margin: 0px -6px;
|
||||
margin: 0px 12px 0px -6px;
|
||||
width: 0px;
|
||||
}
|
||||
.video-container .zorn-player-controls #volume-button svg {
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="video-container">
|
||||
<video class="zorn-player" layout="default" title="Ennie and Yoyki: Ungirly Games">
|
||||
<video class="zorn-player" layout="default" video-title="Ennie and Yoyki: Ungirly Games">
|
||||
<!-- Quality changer support has not been worked on yet -->
|
||||
<source label="720p" src="./media/Ennie-and-Yoyki-Ungirly-Games.mp4" type="video/mp4">
|
||||
<!-- Subtitles -->
|
||||
|
@ -15,5 +15,5 @@
|
|||
</video>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./js/zorn.js"></script>
|
||||
<script src="./js/zorn.js" type="module"></script>
|
||||
</html>
|
File diff suppressed because one or more lines are too long
Reference in a new issue