MinPluto/poke-on-astro-experiment
Archived
1
0
Fork 0
Code Issues Pull requests Activity

Add Zorn

Browse source
This commit is contained in:
Korbs 2024-06-27 05:39:37 -04:00
parent cd22df9b6a
commit 411741d82e
No known key found for this signature in database
25 changed files with 862 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/public/zorn/assets/icons/backward15-seconds.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" stroke-width="1.5" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M3 13C3 17.9706 7.02944 22 12 22C16.9706 22 21 17.9706 21 13C21 8.02944 16.9706 4 12 4" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 9L9 16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 4L4.5 4M4.5 4L6.5 2M4.5 4L6.5 6" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 869 B

1
src/public/zorn/assets/icons/closed-captions-tag.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M1 15V9C1 5.68629 3.68629 3 7 3H17C20.3137 3 23 5.68629 23 9V15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15Z" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path><path d="M10.5 10L10.3284 9.82843C9.79799 9.29799 9.07857 9 8.32843 9V9C6.76633 9 5.5 10.2663 5.5 11.8284V12.1716C5.5 13.7337 6.76633 15 8.32843 15V15C9.07857 15 9.79799 14.702 10.3284 14.1716L10.5 14" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path><path d="M18.5 10L18.3284 9.82843C17.798 9.29799 17.0786 9 16.3284 9V9C14.7663 9 13.5 10.2663 13.5 11.8284V12.1716C13.5 13.7337 14.7663 15 16.3284 15V15C17.0786 15 17.798 14.702 18.3284 14.1716L18.5 14" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/public/zorn/assets/icons/forward-solid.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M2.95592 5.70436C2.55976 5.41246 2 5.69531 2 6.1874V17.8126C2 18.3047 2.55976 18.5875 2.95592 18.2956L10.8445 12.483C11.1699 12.2432 11.1699 11.7568 10.8445 11.517L2.95592 5.70436Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.9559 5.70436C13.5598 5.41246 13 5.69531 13 6.1874V17.8126C13 18.3047 13.5598 18.5875 13.9559 18.2956L21.8445 12.483C22.1699 12.2432 22.1699 11.7568 21.8445 11.517L13.9559 5.70436Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 773 B

1
src/public/zorn/assets/icons/forward15-seconds.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" stroke-width="1.5" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 9L9 16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 871 B

1
src/public/zorn/assets/icons/maximize.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M7 4H4V7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 4H20V7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 20H4V17" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 20H20V17" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 622 B

1
src/public/zorn/assets/icons/pause-solid.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 960 B

1
src/public/zorn/assets/icons/play-solid.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 473 B

1
src/public/zorn/assets/icons/refresh-double.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M21.1679 8C19.6247 4.46819 16.1006 2 11.9999 2C6.81459 2 2.55104 5.94668 2.04932 11" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path><path d="M17 8H21.4C21.7314 8 22 7.73137 22 7.4V3" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path><path d="M2.88146 16C4.42458 19.5318 7.94874 22 12.0494 22C17.2347 22 21.4983 18.0533 22 13" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path><path d="M7.04932 16H2.64932C2.31795 16 2.04932 16.2686 2.04932 16.6V21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/public/zorn/assets/icons/rewind-solid.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M21.0441 5.70436C21.4402 5.41246 22 5.69531 22 6.1874V17.8126C22 18.3047 21.4402 18.5875 21.0441 18.2956L13.1555 12.483C12.8301 12.2432 12.8301 11.7568 13.1555 11.517L21.0441 5.70436Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.0441 5.70436C10.4402 5.41246 11 5.69531 11 6.1874V17.8126C11 18.3047 10.4402 18.5875 10.0441 18.2956L2.15555 12.483C1.8301 12.2432 1.8301 11.7568 2.15555 11.517L10.0441 5.70436Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 774 B

1
src/public/zorn/assets/icons/sound-high.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M1 13.8571V10.1429C1 9.03829 1.89543 8.14286 3 8.14286H5.9C6.09569 8.14286 6.28708 8.08544 6.45046 7.97772L12.4495 4.02228C13.1144 3.5839 14 4.06075 14 4.85714V19.1429C14 19.9392 13.1144 20.4161 12.4495 19.9777L6.45046 16.0223C6.28708 15.9146 6.09569 15.8571 5.9 15.8571H3C1.89543 15.8571 1 14.9617 1 13.8571Z" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path><path d="M17.5 7.5C17.5 7.5 19 9 19 11.5C19 14 17.5 15.5 17.5 15.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path><path d="M20.5 4.5C20.5 4.5 23 7 23 11.5C23 16 20.5 18.5 20.5 18.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/public/zorn/assets/icons/sound-min.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M3.5 13.8571V10.1429C3.5 9.03829 4.39543 8.14286 5.5 8.14286H8.4C8.59569 8.14286 8.78708 8.08544 8.95046 7.97772L14.9495 4.02228C15.6144 3.5839 16.5 4.06075 16.5 4.85714V19.1429C16.5 19.9392 15.6144 20.4161 14.9495 19.9777L8.95046 16.0223C8.78708 15.9146 8.59569 15.8571 8.4 15.8571H5.5C4.39543 15.8571 3.5 14.9617 3.5 13.8571Z" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path><path d="M20.5 15L20.5 9" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 883 B

1
src/public/zorn/assets/icons/sound-off.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M18 14L20.0005 12M22 10L20.0005 12M20.0005 12L18 10M20.0005 12L22 14" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path><path d="M2 13.8571V10.1429C2 9.03829 2.89543 8.14286 4 8.14286H6.9C7.09569 8.14286 7.28708 8.08544 7.45046 7.97772L13.4495 4.02228C14.1144 3.5839 15 4.06075 15 4.85714V19.1429C15 19.9392 14.1144 20.4161 13.4495 19.9777L7.45046 16.0223C7.28708 15.9146 7.09569 15.8571 6.9 15.8571H4C2.89543 15.8571 2 14.9617 2 13.8571Z" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #ffffff;"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 942 B

9
src/public/zorn/dialogs/Buffering.js Normal file
View file

@ -0,0 +1,9 @@
import {
RefreshIcon,
} from '../get'
export var BufferDialog = `
<div id="buffering" class="zorn-dialog">
${RefreshIcon}
</div>
`

24
src/public/zorn/events.js Normal file
View file

@ -0,0 +1,24 @@
import { ZornVideoPlayer } from "./get"
export function Events() {
ZornVideoPlayer.addEventListener('error', function(event) {
document.querySelector('#invalid-src').style.display = 'inherit'
document.querySelector('.zorn-player-controls').style.display = 'none'
videoContainer.style.backgroundColor = '#101010'
setTimeout(() => {
ZornVideoPlayer.style.opacity = '0.10'
document.querySelector('#buffering').style.display = 'none'
}, 0o250);
}, true)
ZornVideoPlayer.onwaiting = (event) => {
document.querySelector('#buffering').style.display = 'inherit'
ZornVideoPlayer.style.transition = '5s opacity'
ZornVideoPlayer.style.opacity = '0.25'
}
ZornVideoPlayer.oncanplaythrough = (event) => {
document.querySelector('#buffering').style.display = 'none'
ZornVideoPlayer.style.transition = '0.3s opacity'
ZornVideoPlayer.style.opacity = '1'
}
}

46
src/public/zorn/functions/AutoToggleControls.js Normal file
View file

@ -0,0 +1,46 @@
import { VideoContainer, VideoControls, ZornVideoPlayer } from '../get'
export function AutoToggleControls() {
function Hide_Controls() {
var ZornTitleArea = document.querySelector(".zorn-title")
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(".zorn-title")
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)
}
}

24
src/public/zorn/functions/Fullscreen.js Normal file
View file

@ -0,0 +1,24 @@
import { VideoContainer, ZornVideoPlayer } from '../get'
export function Fullscreen() {
const Button_Fullscreen = document.getElementById('fullscreen')
function Toggle_Fullscreen() {
if (document.fullscreenElement) {document.exitFullscreen()}
else if (document.webkitFullscreenElement) {document.webkitExitFullscreen()}
else if (VideoContainer.webkitRequestFullscreen) {VideoContainer.webkitRequestFullscreen()}
else {VideoContainer.requestFullscreen()}
}
Button_Fullscreen.onclick = Toggle_Fullscreen
function Update_FullscreenButton() {
if (document.fullscreenElement) {
Button_Fullscreen.setAttribute('data-title', 'Exit full screen (f)')
} else {
Button_Fullscreen.setAttribute('data-title', 'Full screen (f)')
}
}
VideoContainer.addEventListener('fullscreenchange', Update_FullscreenButton)
ZornVideoPlayer.addEventListener('dblclick', () => {Toggle_Fullscreen()})
}

82
src/public/zorn/functions/KeyboardShortcuts.js Normal file
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)
}

34
src/public/zorn/functions/PlayPause.js Normal file
View file

@ -0,0 +1,34 @@
import {
ZornVideoPlayer,
PlayIcon,
PauseIcon
} from '../get'
export function PlayPause() {
const Button_PlayPause = document.querySelector('.zorn-player-controls #play-pause')
Button_PlayPause.addEventListener('click', Toggle_PlayPause)
ZornVideoPlayer.addEventListener('click', Toggle_PlayPause)
ZornVideoPlayer.addEventListener('play', Update_PlayPauseButton)
ZornVideoPlayer.addEventListener('pause', Update_PlayPauseButton)
function Toggle_PlayPause() {
if (ZornVideoPlayer.paused || ZornVideoPlayer.ended) {
ZornVideoPlayer.play()
}
else {
ZornVideoPlayer.pause()
}
}
function Update_PlayPauseButton() {
if (ZornVideoPlayer.paused) {
Button_PlayPause.setAttribute('data-title', 'Play (K)')
Button_PlayPause.innerHTML = `${PlayIcon}`
} else {
Button_PlayPause.setAttribute('data-title', 'Pause (K)')
Button_PlayPause.innerHTML = `${PauseIcon}`
}
}
}

73
src/public/zorn/functions/Seek.js Normal file
View file

@ -0,0 +1,73 @@
import { ZornVideoPlayer } from '../get'
export function Seek() {
// Duration and Length of Video
const timeElapsed = document.getElementById('time-elapsed');
const duration = document.getElementById('duration');
function formatTime(timeInSeconds) {
const result = new Date(timeInSeconds * 1000).toISOString().substr(11, 8);
return {
minutes: result.substr(3, 2),
seconds: result.substr(6, 2),
};
};
function initializeVideo() {
const videoDuration = Math.round(ZornVideoPlayer.duration);
const time = formatTime(videoDuration);
duration.innerText = `${time.minutes}:${time.seconds}`;
duration.setAttribute('datetime', `${time.minutes}m ${time.seconds}s`);
}
ZornVideoPlayer.addEventListener('loadedmetadata', initializeVideo);
function updateTimeElapsed() {
const time = formatTime(Math.round(ZornVideoPlayer.currentTime));
timeElapsed.innerText = `${time.minutes}:${time.seconds}`;
timeElapsed.setAttribute('datetime', `${time.minutes}m ${time.seconds}s`);
}
ZornVideoPlayer.addEventListener('timeupdate', updateTimeElapsed);
// Progress Bar
const progressBar = document.getElementById('progress-bar');
const seek = document.getElementById('seek');
function initializeVideo() {
const videoDuration = Math.round(ZornVideoPlayer.duration);
seek.setAttribute('max', videoDuration);
progressBar.setAttribute('max', videoDuration);
const time = formatTime(videoDuration);
duration.innerText = `${time.minutes}:${time.seconds}`;
duration.setAttribute('datetime', `${time.minutes}m ${time.seconds}s`)
}
function updateProgress() {
seek.value = Math.floor(ZornVideoPlayer.currentTime);
progressBar.value = Math.floor(ZornVideoPlayer.currentTime);
}
ZornVideoPlayer.addEventListener('timeupdate', updateProgress);
const seekTooltip = document.getElementById('seek-tooltip');
function updateSeekTooltip(event) {
const skipTo = Math.round((event.offsetX / event.target.clientWidth) * parseInt(event.target.getAttribute('max'), 10));
seek.setAttribute('data-seek', skipTo)
const t = formatTime(skipTo);
seekTooltip.textContent = `${t.minutes}:${t.seconds}`;
const rect = ZornVideoPlayer.getBoundingClientRect();
seekTooltip.style.left = `${event.pageX - rect.left}px`;
}
seek.addEventListener('mousemove', updateSeekTooltip);
function skipAhead(event) {
const skipTo = event.target.dataset.seek ? event.target.dataset.seek : event.target.value;
ZornVideoPlayer.currentTime = skipTo;
progressBar.value = skipTo;
seek.value = skipTo;
}
seek.addEventListener('input', skipAhead);
initializeVideo()
}

16
src/public/zorn/functions/SkipAround.js Normal file
View file

@ -0,0 +1,16 @@
import { ZornVideoPlayer } from '../get'
export function SkipAround() {
const Button_SkipBack = document.querySelector('.zorn-player-controls #skip-back')
const Button_SkipForth = document.querySelector('.zorn-player-controls #skip-forth')
Button_SkipBack.addEventListener('click', Toggle_SkipBack)
Button_SkipForth.addEventListener('click', Toggle_SkipForth)
function Toggle_SkipBack() {Skip(-10)}
function Toggle_SkipForth() {Skip(10)}
function Skip(value) {
ZornVideoPlayer.currentTime += value
}
}

51
src/public/zorn/functions/Subtitles.js Normal file
View file

@ -0,0 +1,51 @@
import { VideoContainer, ZornVideoPlayer } from '../get'
export function Subtitles() {
var subtitles = document.querySelector('.zorn-player-controls #subtitles')
var subtitleMenuButtons = []
var createMenuItem = function(id, lang, label) {
var listItem = document.createElement('li')
var button = listItem.appendChild(document.createElement('button'))
button.setAttribute('id', id)
button.className = 'subtitles-button'
if (lang.length > 0) button.setAttribute('lang', lang)
button.value = label
button.setAttribute('data-state', 'inactive')
button.appendChild(document.createTextNode(label))
button.addEventListener('click', function(e) {
subtitleMenuButtons.map(function(v, i, a) {
subtitleMenuButtons[i].setAttribute('data-state', 'inactive')
})
var lang = this.getAttribute('lang')
for (var i = 0; i < ZornVideoPlayer.textTracks.length; i++) {
if (ZornVideoPlayer.textTracks[i].language == lang) {
ZornVideoPlayer.textTracks[i].mode = 'showing'
this.setAttribute('data-state', 'active')
}
else {
ZornVideoPlayer.textTracks[i].mode = 'hidden'
}
}
subtitlesMenu.style.display = 'none'
})
subtitleMenuButtons.push(button)
return listItem
}
var subtitlesMenu
if (ZornVideoPlayer.textTracks) {
var df = document.createDocumentFragment()
var subtitlesMenu = df.appendChild(document.createElement('ul'))
subtitlesMenu.className = 'subtitles-menu'
subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'))
for (var i = 0; i < ZornVideoPlayer.textTracks.length; i++) {
subtitlesMenu.appendChild(createMenuItem('subtitles-' + ZornVideoPlayer.textTracks[i].language, ZornVideoPlayer.textTracks[i].language, ZornVideoPlayer.textTracks[i].label))
}
VideoContainer.appendChild(subtitlesMenu)
}
subtitles.addEventListener('click', function(e) {
if (subtitlesMenu) {
subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block')
}
})
}

46
src/public/zorn/functions/Volume.js Normal file
View file

@ -0,0 +1,46 @@
import {
ZornVideoPlayer,
VolumeOffIcon,
VolumeMinIcon,
VolumeHighIcon
} from '../get'
export function Volume() {
const Button_Volume = document.getElementById('volume-button')
const volume = document.getElementById('volume')
function Update_Volme() {
if (ZornVideoPlayer.muted) {
ZornVideoPlayer.muted = false
}
ZornVideoPlayer.volume = volume.value
}
volume.addEventListener('input', Update_Volme)
function Update_Volume_Icon() {
Button_Volume.setAttribute('data-title', 'Mute (M)')
if (ZornVideoPlayer.muted || ZornVideoPlayer.volume === 0) {
Button_Volume.innerHTML = `${VolumeOffIcon}`
Button_Volume.setAttribute('data-title', 'Unmute (M)')
} else if (ZornVideoPlayer.volume > 0 && ZornVideoPlayer.volume <= 0.5) {
Button_Volume.innerHTML = `${VolumeMinIcon}`
} else {
Button_Volume.innerHTML = `${VolumeHighIcon}`
}
}
ZornVideoPlayer.addEventListener('volumechange', Update_Volume_Icon)
function Toggle_Mute() {
ZornVideoPlayer.muted = !ZornVideoPlayer.muted
if (ZornVideoPlayer.muted) {
volume.setAttribute('data-volume', volume.value)
volume.value = 0
} else {
volume.value = volume.dataset.volume
}
}
Button_Volume.addEventListener('click', Toggle_Mute)
}

29
src/public/zorn/get.js Normal file
View file

@ -0,0 +1,29 @@
// 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
import PlaySVG from './assets/icons/play-solid.svg'
import PauseSVG from './assets/icons/pause-solid.svg'
import FullcreenSVG from './assets/icons/maximize.svg'
import CaptionsSVG from './assets/icons/closed-captions-tag.svg'
import Backward15SVG from './assets/icons/backward15-seconds.svg'
import Forward15SVG from './assets/icons/forward15-seconds.svg'
import VolumeHighSVG from './assets/icons/sound-high.svg'
import VolumeMinSVG from './assets/icons/sound-min.svg'
import VolumeOffSVG from './assets/icons/sound-off.svg'
import RefreshSVG from './assets/icons/refresh-double.svg'
/// Set Icons
export var PlayIcon = PlaySVG
export var PauseIcon = PauseSVG
export var FullcreenIcon = FullcreenSVG
export var CaptionsIcon = CaptionsSVG
export var Backward15Icon = Backward15SVG
export var Forward15Icon = Forward15SVG
export var VolumeHighIcon = VolumeHighSVG
export var VolumeMinIcon = VolumeMinSVG
export var VolumeOffIcon = VolumeOffSVG
export var RefreshIcon = RefreshSVG

35
src/public/zorn/index.js Normal file
View file

@ -0,0 +1,35 @@
import { ZornVideoPlayer } from "./get"
import { Controls, Title } from "./themes/default"
// Import Functions
import { Events } from './events'
import { PlayPause } from "./functions/PlayPause"
import { SkipAround } from "./functions/SkipAround"
import { Fullscreen } from "./functions/Fullscreen"
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)
ZornVideoPlayer.insertAdjacentHTML("afterend", BufferDialog)
if (ZornVideoPlayer.getAttribute('layout') === 'default') {
Title()
}
// Init Functions
Events()
KeyboardShortcuts()
PlayPause()
AutoToggleControls() // Broken
SkipAround()
Fullscreen()
Subtitles()
Volume()
Seek()
BufferDialog()

381
src/public/zorn/themes/default.js Normal file
View file

@ -0,0 +1,381 @@
import {
PlayIcon,
FullcreenIcon,
CaptionsIcon,
Backward15Icon,
Forward15Icon,
VolumeHighIcon,
ZornVideoPlayer
} from '../get'
// This theme includes an optional title
export function Title() {
let VideoTitle = ZornVideoPlayer.getAttribute('video-title')
document.querySelector(".zorn-title").innerHTML = VideoTitle
if (ZornVideoPlayer.hasAttribute('video-title')) {
document.querySelector('.zorn-title').style.display = 'inherit'
} else {
document.querySelector('.zorn-title').style.display = 'none'
}
}
export var Controls = `
<h2 class="zorn-title hide"></h2>
<div oncontextmenu="return false" class="zorn-player-controls">
<div class="row-2">
<div class="video-progress">
<progress id="progress-bar" value="0" min="0"></progress>
<input class="seek" id="seek" value="0" min="0" type="range" step="1">
<div class="seek-tooltip" id="seek-tooltip">00:00</div>
</div>
</div>
<div class="row-1">
<div class="row-1-start">
<div class="volume-controls">
<button data-title="Mute (m)" class="volume-button" id="volume-button">${VolumeHighIcon}</button>
<input class="volume" id="volume" value="1" type="range" max="1" min="0" step="0.01"/>
</div>
<div class="time">
<time id="time-elapsed">00:00</time>
<span> / </span>
<time id="duration">00:00</time>
</div>
</div>
<div class="row-1-center">
<button id="skip-back">${Backward15Icon}</button>
<button id="play-pause">${PlayIcon}</button>
<button id="skip-forth">${Forward15Icon}</button>
</div>
<div class="row-1-end">
<button id="subtitles">${CaptionsIcon}</button>
<button id="fullscreen">${FullcreenIcon}</button>
</div>
</div>
</div>
<style>
:root {
--zorn-progress-bar-bg: rgba(255, 0, 0, 0.5);
--zorn-progress-bar: rgba(100, 100, 100, 0.5);
--zorn-thumb: red;
--zorn-rounded-corners: 4px;
}
.video-container video {
border-radius: 10px;
}
.zorn-context-menu {
background: linear-gradient(45deg, #0a141c 0%, rgba(10, 20, 28, 1) 100%);
border-radius: 6px;
border: 1px rgba(255, 255, 255, 0.08) solid;
}
.zorn-context-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.zorn-context-menu ul li {
padding: 8px 32px 8px 16px;
margin: 4px;
border-radius: 4px;
font-family: arial;
}
.zorn-context-menu ul li:hover {
background: rgba(255, 255, 255, 0.1);
cursor: pointer;
}
.zorn-context-menu ul li i {
font-size: 14px;
margin-right: 12px;
width: 12px;
}
.video-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.video-container .zorn-player-dialogs #buffering {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0px 24px;
border-radius: 6px;
}
.video-container .zorn-player-dialogs #buffering h2 {
font-size: 52px;
}
.video-container .zorn-player-dialogs #invalid-src {
display: none;
position: absolute;
top: 50%;
left: 24px;
transform: translate(0px, -50%);
padding: 0px 24px;
border-radius: 6px;
}
.video-container .zorn-player-dialogs #invalid-src h2 {
font-size: 52px;
}
.video-container .zorn-player {
display: inline-flex;
}
.video-container .zorn-title {
position: absolute;
top: 0px;
background: rgb(0 0 0 / 50%);
width: auto;
margin: 12px;
padding: 12px 24px;
border-radius: 10px;
font-size: 18px;
}
.video-container .hide {
opacity: 0;
pointer-events: none;
}
.video-container .zorn-player-title {
position: absolute;
top: 0px;
width: 100%;
background-image: linear-gradient(to top, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
}
.video-container .subtitles-menu {
display: none;
position: absolute;
right: 60px;
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;
color: white;
border: none;
border-radius: 4px;
width: 100%;
text-align: left;
padding: 6px 12px;
cursor: pointer;
}
.video-container .subtitles-menu button:hover {
background: #fff 29;
}
.video-container .subtitles-menu .hide {
opacity: 0;
pointer-events: none;
}
.video-container .zorn-player-controls {
display: inline-flex;
right: 0;
left: 0;
padding: 10px;
position: absolute;
bottom: -1px;
transition: all 0.2s ease;
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
flex-direction: inherit;
border-radius: 0px 0px 10px 10px;
}
.video-container .zorn-player-controls .row-1 {
display: flex;
justify-content: space-between;
width: 100%;
}
.video-container .zorn-player-controls .row-1-start {
display: flex;
align-items: center;
}
.video-container .zorn-player-controls .row-1-center {
display: flex;
justify-content: center;
}
.video-container .zorn-player-controls .row-1-end {
display: flex;
align-items: center;
}
.video-container .zorn-player-controls button {
aspect-ratio: 1;
height: 32px;
width: 32px;
color: white;
background-color: transparent;
border: none;
margin: 0px 6px;
}
.volume-controls {
display: flex;
align-items: center;
}
.video-container .zorn-player-controls .volume-controls:hover > #volume {
opacity: 1;
transition: 0.3s opacity, 0.3s width;
margin: 0px;
width: 72px;
}
.video-container .zorn-player-controls #volume {
opacity: 0;
transition: 0.3s opacity, 0.3s width;
margin: 0px 12px 0px -6px;
width: 0px;
}
.video-container .zorn-player-controls #volume-button svg {
aspect-ratio: 1;
height: 16px;
width: 16px;
fill: white;
padding: 3px 0px 0px 0px;
}
.video-container .zorn-player-controls .video-progress {
position: relative;
height: 6.4px;
margin: 24px 0px;
width: 100%;
}
.video-container .zorn-player-controls progress {
border-radius: 1rem;
width: 100%;
height: 8.4px;
position: absolute;
top: 0;
}
.video-container .zorn-player-controls progress::-webkit-progress-bar {
border-radius: 1rem;
background: var(--zorn-progress-bar);
}
.video-container .zorn-player-controls progress::-webkit-progress-value {
background: var(--zorn-progress-bar);
border-radius: 1rem;
}
.video-container .zorn-player-controls progress::-moz-progress-bar {
border-radius: 1rem;
background: var(--zorn-progress-bar-bg);
}
.video-container .zorn-player-controls .seek {
position: absolute;
top: 0;
width: 100%;
cursor: pointer;
margin: 0;
}
.video-container .zorn-player-controls .seek:hover + .seek-tooltip {
display: block;
}
.video-container .zorn-player-controls .seek-tooltip {
display: none;
position: relative;
top: -32px;
margin-left: -30px;
font-size: 12px;
content: attr(data-title);
font-weight: bold;
color: #fff;
background-color: rgba(0, 0, 0, .5);
border-radius: 4px;
padding: 6px;
width: fit-content;
}
.video-container .zorn-player-controls input[type=range] {
height: 8.4px;
background: transparent;
cursor: pointer;
opacity: 0;
}
.video-container .zorn-player-controls input[type=range]:focus {
outline: none;
}
.video-container .zorn-player-controls input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}
.video-container .zorn-player-controls input[type=range]:focus::-moz-range-track {
outline: none;
}
.video-container .zorn-player-controls input[type=range]::-webkit-slider-runnable-track {
width: 100%;
cursor: pointer;
border-radius: 1.3px;
-webkit-appearance: none;
transition: all 0.4s ease;
}
.video-container .zorn-player-controls input[type=range]::-webkit-slider-thumb {
height: 12px;
width: 12px;
border-radius: 10px;
background: var(--zorn-thumb);
cursor: pointer;
-webkit-appearance: none;
margin-left: -1px;
}
.video-container .zorn-player-controls input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
border-radius: 0;
}
.video-container .zorn-player-controls input[type=range].volume {
height: 5px;
background-color: #fff;
}
.video-container .zorn-player-controls input[type=range].volume::-webkit-slider-runnable-track {
background-color: transparent;
}
.video-container .zorn-player-controls input[type=range].volume::-webkit-slider-thumb {
margin-left: 0;
height: 14px;
width: 14px;
background: #fff;
}
.video-container .zorn-player-controls input[type=range].volume::-moz-range-thumb {
border: 1px solid #fff;
background: #fff;
}
.video-container .zorn-player-controls input[type="range"]::-moz-range-thumb {
height: 12px;
width: 12px;
border-radius: 10px;
border: none;
background: var(--zorn-thumb);
cursor: pointer;
}
.video-container .zorn-player-controls .hide {
opacity: 0;
pointer-events: none;
}
.video-container .zorn-player-controls #progress-bar {
background: var(--zorn-progress-bar);
border: none;
border-radius: 10px;
}
div#buffering {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
animation: 1s spin linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
</style>
`