Add shortcuts and autohide controls

This commit is contained in:
Korbs 2024-02-26 20:59:47 -05:00
parent f5be2970ab
commit 28de864295
No known key found for this signature in database
9 changed files with 159 additions and 26 deletions

View 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)
}
}

View file

@ -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()})
}

View 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)
}

View file

@ -1,6 +1,5 @@
import { ZornVideoPlayer } from '../get'
export function Seek() {
// Duration and Length of Video
const timeElapsed = document.getElementById('time-elapsed');

View file

@ -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

View file

@ -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()

View file

@ -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 {

View file

@ -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