Add shortcuts and autohide controls

src/functions/AutoToggleControls.js

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

src/functions/Fullscreen.js

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

src/functions/KeyboardShortcuts.js

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

src/functions/Seek.js

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

src/get.js

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

src/index.js

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

src/themes/default.js

@@ -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 {
+.volume-controls {
-    background: rgba(44, 44, 44, 0.6);
+    display: flex;
-    border-radius: 6px;
+    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 {

test/index.html

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