diff --git a/src/functions/AutoToggleControls.js b/src/functions/AutoToggleControls.js
new file mode 100644
index 0000000..39ad80f
--- /dev/null
+++ b/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)
+ }
+}
\ No newline at end of file
diff --git a/src/functions/Fullscreen.js b/src/functions/Fullscreen.js
index 2f51e3b..d4f7141 100644
--- a/src/functions/Fullscreen.js
+++ b/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 = ``
} else {
Button_Fullscreen.setAttribute('data-title', 'Full screen (f)')
- Button_Fullscreen.innerHTML = ``
}
}
VideoContainer.addEventListener('fullscreenchange', Update_FullscreenButton)
+ ZornVideoPlayer.addEventListener('dblclick', () => {Toggle_Fullscreen()})
}
\ No newline at end of file
diff --git a/src/functions/KeyboardShortcuts.js b/src/functions/KeyboardShortcuts.js
new file mode 100644
index 0000000..b9c184b
--- /dev/null
+++ b/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)
+}
\ No newline at end of file
diff --git a/src/functions/Seek.js b/src/functions/Seek.js
index 92e1cb9..d026d77 100644
--- a/src/functions/Seek.js
+++ b/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');
diff --git a/src/get.js b/src/get.js
index 9e51c5f..dba0d17 100644
--- a/src/get.js
+++ b/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
diff --git a/src/index.js b/src/index.js
index 300af4b..97adbb2 100644
--- a/src/index.js
+++ b/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()
diff --git a/src/themes/default.js b/src/themes/default.js
index 2477d69..8b6b739 100644
--- a/src/themes/default.js
+++ b/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 {
- 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 {
diff --git a/test/index.html b/test/index.html
index 8eaa04c..e6d54aa 100644
--- a/test/index.html
+++ b/test/index.html
@@ -6,7 +6,7 @@
-
-
+