Add Zorn
This commit is contained in:
parent
cd22df9b6a
commit
411741d82e
1
src/public/zorn/assets/icons/backward15-seconds.svg
Normal file
1
src/public/zorn/assets/icons/backward15-seconds.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 869 B |
1
src/public/zorn/assets/icons/closed-captions-tag.svg
Normal file
1
src/public/zorn/assets/icons/closed-captions-tag.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/public/zorn/assets/icons/forward-solid.svg
Normal file
1
src/public/zorn/assets/icons/forward-solid.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 773 B |
1
src/public/zorn/assets/icons/forward15-seconds.svg
Normal file
1
src/public/zorn/assets/icons/forward15-seconds.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 871 B |
1
src/public/zorn/assets/icons/maximize.svg
Normal file
1
src/public/zorn/assets/icons/maximize.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 622 B |
1
src/public/zorn/assets/icons/pause-solid.svg
Normal file
1
src/public/zorn/assets/icons/pause-solid.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 960 B |
1
src/public/zorn/assets/icons/play-solid.svg
Normal file
1
src/public/zorn/assets/icons/play-solid.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 473 B |
1
src/public/zorn/assets/icons/refresh-double.svg
Normal file
1
src/public/zorn/assets/icons/refresh-double.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/public/zorn/assets/icons/rewind-solid.svg
Normal file
1
src/public/zorn/assets/icons/rewind-solid.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 774 B |
1
src/public/zorn/assets/icons/sound-high.svg
Normal file
1
src/public/zorn/assets/icons/sound-high.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
1
src/public/zorn/assets/icons/sound-min.svg
Normal file
1
src/public/zorn/assets/icons/sound-min.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 883 B |
1
src/public/zorn/assets/icons/sound-off.svg
Normal file
1
src/public/zorn/assets/icons/sound-off.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 942 B |
9
src/public/zorn/dialogs/Buffering.js
Normal file
9
src/public/zorn/dialogs/Buffering.js
Normal 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
24
src/public/zorn/events.js
Normal 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
46
src/public/zorn/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(".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
24
src/public/zorn/functions/Fullscreen.js
Normal 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
82
src/public/zorn/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)
|
||||||
|
}
|
||||||
34
src/public/zorn/functions/PlayPause.js
Normal file
34
src/public/zorn/functions/PlayPause.js
Normal 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
73
src/public/zorn/functions/Seek.js
Normal 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
16
src/public/zorn/functions/SkipAround.js
Normal 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
51
src/public/zorn/functions/Subtitles.js
Normal 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
46
src/public/zorn/functions/Volume.js
Normal 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
29
src/public/zorn/get.js
Normal 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
35
src/public/zorn/index.js
Normal 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
381
src/public/zorn/themes/default.js
Normal 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>
|
||||||
|
`
|
||||||
Reference in a new issue