Compare commits
8 commits
2f97de3a91
...
8fd57500d9
Author | SHA1 | Date | |
---|---|---|---|
Korbs | 8fd57500d9 | ||
Korbs | e55fb197b5 | ||
Korbs | 952caa93fc | ||
Korbs | 6bdf58e4f6 | ||
Korbs | 7dcbb1affa | ||
Korbs | 2474a3d62e | ||
Korbs | 6f4cbd3d9d | ||
Korbs | 95cc10089c |
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,5 +1,6 @@
|
||||||
# Generated
|
# Generated
|
||||||
.vscode
|
.vscode
|
||||||
|
.astro
|
||||||
node_modules
|
node_modules
|
||||||
test/.astro
|
test/.astro
|
||||||
test/node_modules
|
test/node_modules
|
|
@ -63,3 +63,7 @@ GNU Affero General Public License for more details.
|
||||||
You should have received a copy of the GNU Affero General Public License
|
You should have received a copy of the GNU Affero General Public License
|
||||||
along with this program. If not, see https://www.gnu.org/licenses/.
|
along with this program. If not, see https://www.gnu.org/licenses/.
|
||||||
```
|
```
|
||||||
|
|
||||||
|
___
|
||||||
|
|
||||||
|
[![Please don't upload to GitHub](https://nogithub.codeberg.page/badge.svg)](https://nogithub.codeberg.page)
|
||||||
|
|
12
TODO.md
12
TODO.md
|
@ -1,20 +1,20 @@
|
||||||
- [x] Support HLS (HTTP Live Streaming)
|
- [x] Support HLS (HTTP Live Streaming)
|
||||||
- [x] Subtitles ([`textTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks))
|
|
||||||
- [ ] Multi-Video Tracks ([`videoTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks))
|
|
||||||
- [ ] Multi-Audio Tracks ([`audioTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks))
|
|
||||||
- [ ] Playback Rate ([`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate))
|
|
||||||
- [x] Add Picture-in-Picture button
|
- [x] Add Picture-in-Picture button
|
||||||
- [x] Volume Controller
|
- [x] Volume Controller
|
||||||
- [x] Mobile Gestures
|
- [x] Mobile Gestures
|
||||||
- [ ] Cast Support
|
|
||||||
- [x] Allow for multiple players on one page
|
- [x] Allow for multiple players on one page
|
||||||
- [ ] 360 Video Support
|
|
||||||
- [x] Remove Iconoir's Vue package, [replace with CSS](https://iconoir.com/docs/packages/css)
|
- [x] Remove Iconoir's Vue package, [replace with CSS](https://iconoir.com/docs/packages/css)
|
||||||
- [x] Milieu Settings
|
- [x] Milieu Settings
|
||||||
- [x] Mode (Default | Fullscreen)
|
- [x] Mode (Default | Fullscreen)
|
||||||
- [x] Speed
|
- [x] Speed
|
||||||
- [x] Blur
|
- [x] Blur
|
||||||
- [x] Scale
|
- [x] Scale
|
||||||
|
- [x] Subtitles ([`textTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks))
|
||||||
|
- [x] Playback Rate ([`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate))
|
||||||
|
- [ ] Multi-Video Tracks ([`videoTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks))
|
||||||
|
- [ ] Multi-Audio Tracks ([`audioTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks))
|
||||||
|
- [ ] Cast Support
|
||||||
|
- [ ] 360 Video Support
|
||||||
- [ ] Modes
|
- [ ] Modes
|
||||||
- [ ] Audio-Only
|
- [ ] Audio-Only
|
||||||
- [ ] Pop-Up
|
- [ ] Pop-Up
|
||||||
|
|
41
package.json
41
package.json
|
@ -1,36 +1,35 @@
|
||||||
{
|
{
|
||||||
"name": "@minpluto/zorn",
|
"name": "@minpluto/zorn",
|
||||||
|
"version": "0.4.8",
|
||||||
"author": "SudoVanilla",
|
"author": "SudoVanilla",
|
||||||
|
"displayName": "Zorn",
|
||||||
"description": "In-House Player built by MinPluto",
|
"description": "In-House Player built by MinPluto",
|
||||||
"repository": {
|
"homepage": "https://studio.sudovanilla.org/",
|
||||||
"url": "https://codeberg.org/MinPluto/Zorn"
|
"repository": {"url": "https://ark.sudovanilla.org/MinPluto/Zorn"},
|
||||||
},
|
"bugs": {"url": "https://ark.sudovanilla.org/MinPluto/Zorn/issues/"},
|
||||||
"homepage": "https://codeberg.org/MinPluto/Zorn",
|
"type": "module",
|
||||||
|
"exports": {".": "./index.ts"},
|
||||||
|
"files": ["index.ts","src/*"],
|
||||||
|
"publishConfig": {"access": "public"},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"astro-component",
|
"astro-component",
|
||||||
"withastro",
|
"withastro",
|
||||||
"video",
|
"video",
|
||||||
"player",
|
"player",
|
||||||
|
"hls",
|
||||||
"hls-support",
|
"hls-support",
|
||||||
"live-streaming"
|
"live-streaming",
|
||||||
|
"ambient",
|
||||||
|
"player",
|
||||||
|
"video-player",
|
||||||
|
"m3u8",
|
||||||
|
"subtitle",
|
||||||
|
"dash",
|
||||||
|
"streaming",
|
||||||
|
"playback"
|
||||||
],
|
],
|
||||||
"type": "module",
|
|
||||||
"version": "0.4.73",
|
|
||||||
"exports": {
|
|
||||||
".": "./index.ts"
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"index.ts",
|
|
||||||
"src/*"
|
|
||||||
],
|
|
||||||
"publishConfig": {
|
|
||||||
"access": "public"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"astro": "^4.14.2"
|
|
||||||
},
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"publish": "npm publish && npm publish --registry https://npm.sudovanilla.org/",
|
"publish": "bun publish && bun publish --registry https://npm.sudovanilla.org/",
|
||||||
"test": "cd test/ && bun start"
|
"test": "cd test/ && bun start"
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -4,6 +4,7 @@ const {
|
||||||
Title,
|
Title,
|
||||||
Live,
|
Live,
|
||||||
ShowBackAndForward,
|
ShowBackAndForward,
|
||||||
|
ShowPlaybackRate,
|
||||||
SeekColor = '#2185d0',
|
SeekColor = '#2185d0',
|
||||||
PlayerName,
|
PlayerName,
|
||||||
Subtitles
|
Subtitles
|
||||||
|
@ -72,6 +73,7 @@ import './Styles/Iconoir.css'
|
||||||
<!-- The requestPictureInPicture() function is not supported in Firefox -->
|
<!-- The requestPictureInPicture() function is not supported in Firefox -->
|
||||||
<button id="vc-pip" onclick={'document.querySelector("#zorn-player-' + PlayerName + ' video").requestPictureInPicture()'}><i class="iconoir-multi-window"></i></button>
|
<button id="vc-pip" onclick={'document.querySelector("#zorn-player-' + PlayerName + ' video").requestPictureInPicture()'}><i class="iconoir-multi-window"></i></button>
|
||||||
{Subtitles ? <button id="vc-subtitles"><i class="iconoir-closed-captions-tag-solid"></i></button> : null}
|
{Subtitles ? <button id="vc-subtitles"><i class="iconoir-closed-captions-tag-solid"></i></button> : null}
|
||||||
|
{ShowPlaybackRate ? <button onclick="PlayerMenu_PlaybackRate()"><i class="iconoir-timer-solid"></i></button> : null}
|
||||||
<button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button>
|
<button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -36,41 +36,20 @@ var VideoContainer = document.querySelector('#zorn-player-' + PlayerName)
|
||||||
var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
|
var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
|
||||||
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
||||||
|
|
||||||
// Big Present Button
|
|
||||||
function BigPresentButton() {
|
|
||||||
if (BigPlayButton === true) {
|
|
||||||
VideoControls.style.opacity = '0'
|
|
||||||
VideoControls.style.pointerEvents = 'none'
|
|
||||||
} else {
|
|
||||||
null
|
|
||||||
}
|
|
||||||
|
|
||||||
const Button_BigPresentButton = document.querySelector("#zorn-player-" + PlayerName + " .big-present-button")
|
|
||||||
Button_BigPresentButton.onclick = BigButtonClicked
|
|
||||||
|
|
||||||
function BigButtonClicked() {
|
|
||||||
Button_BigPresentButton.style.opacity = '0'
|
|
||||||
Button_BigPresentButton.style.pointerEvents = 'none'
|
|
||||||
VideoControls.style.opacity = '1'
|
|
||||||
VideoControls.style.pointerEvents = 'all'
|
|
||||||
Player.play()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icons
|
// Icons
|
||||||
var play_solid_default = '<?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>';
|
var play_solid_default = '<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>';
|
||||||
var pause_solid_default = '<?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>';
|
var pause_solid_default = '<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>';
|
||||||
var PlayIcon = play_solid_default;
|
var PlayIcon = play_solid_default;
|
||||||
var PauseIcon = pause_solid_default;
|
var PauseIcon = pause_solid_default;
|
||||||
|
|
||||||
var fullscreen_solid_default = '<?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="M15 9L20 4M20 4V8M20 4H16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 15L4 20M4 20V16M4 20H8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
|
var fullscreen_solid_default = '<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="M15 9L20 4M20 4V8M20 4H16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 15L4 20M4 20V16M4 20H8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
|
||||||
var exit_fullscreen_solid_default = '<?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="M4 20L9 15M9 15V19M9 15H5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L15 9M15 9V5M15 9H19" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
|
var exit_fullscreen_solid_default = '<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="M4 20L9 15M9 15V19M9 15H5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L15 9M15 9V5M15 9H19" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
|
||||||
var FullscreenIcon = fullscreen_solid_default
|
var FullscreenIcon = fullscreen_solid_default
|
||||||
var ExitFullscreenIcon = exit_fullscreen_solid_default
|
var ExitFullscreenIcon = exit_fullscreen_solid_default
|
||||||
|
|
||||||
// Fullscreen
|
// Fullscreen
|
||||||
function Fullscreen() {
|
function Fullscreen() {
|
||||||
// Get Fullscreen Button
|
// Get Button
|
||||||
const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
|
const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
|
||||||
|
|
||||||
// Create and Call Functions
|
// Create and Call Functions
|
||||||
|
@ -102,7 +81,7 @@ function Fullscreen() {
|
||||||
Update_FullscreenButton();
|
Update_FullscreenButton();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button Event Listener
|
// Event Listener
|
||||||
Button_Fullscreen.onclick = Toggle_Fullscreen;
|
Button_Fullscreen.onclick = Toggle_Fullscreen;
|
||||||
function Update_FullscreenButton() {
|
function Update_FullscreenButton() {
|
||||||
if (document.fullscreenElement) {
|
if (document.fullscreenElement) {
|
||||||
|
@ -120,7 +99,7 @@ function Fullscreen() {
|
||||||
Update_FullscreenButton()
|
Update_FullscreenButton()
|
||||||
});
|
});
|
||||||
|
|
||||||
// Keyboard Shortcuts
|
// Keyboard Shortcut
|
||||||
var FullscreenHotkey = 'f'
|
var FullscreenHotkey = 'f'
|
||||||
function FullscreenKS(event) {const { key } = event;if (key === FullscreenHotkey) {Toggle_Fullscreen()}}
|
function FullscreenKS(event) {const { key } = event;if (key === FullscreenHotkey) {Toggle_Fullscreen()}}
|
||||||
document.addEventListener("keyup", FullscreenKS);
|
document.addEventListener("keyup", FullscreenKS);
|
||||||
|
@ -128,7 +107,11 @@ function Fullscreen() {
|
||||||
|
|
||||||
// Play/Pause
|
// Play/Pause
|
||||||
function PlayPause() {
|
function PlayPause() {
|
||||||
|
// Get Buttons
|
||||||
const Button_PlayPause = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-playpause");
|
const Button_PlayPause = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-playpause");
|
||||||
|
var Button_BigPresentButton = document.querySelector("#zorn-player-" + PlayerName + " .big-present-button")
|
||||||
|
|
||||||
|
// Event Listern
|
||||||
Button_PlayPause.addEventListener("click", Toggle_PlayPause);
|
Button_PlayPause.addEventListener("click", Toggle_PlayPause);
|
||||||
Player.addEventListener("click", Toggle_PlayPause);
|
Player.addEventListener("click", Toggle_PlayPause);
|
||||||
Player.addEventListener("play", Update_PlayPauseButton);
|
Player.addEventListener("play", Update_PlayPauseButton);
|
||||||
|
@ -140,6 +123,8 @@ function PlayPause() {
|
||||||
Player.pause();
|
Player.pause();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Update Button
|
||||||
function Update_PlayPauseButton() {
|
function Update_PlayPauseButton() {
|
||||||
if (Player.paused) {
|
if (Player.paused) {
|
||||||
Button_PlayPause.setAttribute("data-title", "Play (K)");
|
Button_PlayPause.setAttribute("data-title", "Play (K)");
|
||||||
|
@ -149,23 +134,71 @@ function PlayPause() {
|
||||||
Button_PlayPause.innerHTML = `${PauseIcon}`;
|
Button_PlayPause.innerHTML = `${PauseIcon}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Keyboard Shortcut
|
||||||
|
var FullscreenHotkey = 'k'
|
||||||
|
function PlayPauseKS(event) {const { key } = event;if (key === FullscreenHotkey) {
|
||||||
|
Toggle_PlayPause();
|
||||||
|
Update_PlayPauseButton();
|
||||||
|
// If Big Present Button is still presented
|
||||||
|
if (BigPlayButton === true) {
|
||||||
|
VideoControls.style.opacity = '1'
|
||||||
|
VideoControls.style.pointerEvents = 'all'
|
||||||
|
Button_BigPresentButton.style.display = 'none'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
document.addEventListener("keyup", PlayPauseKS);
|
||||||
|
|
||||||
|
////////////////////////
|
||||||
|
// Big Present Button //
|
||||||
|
////////////////////////
|
||||||
|
// Check if the option is enabled
|
||||||
|
if (BigPlayButton === true) {
|
||||||
|
VideoControls.style.opacity = '0'
|
||||||
|
VideoControls.style.pointerEvents = 'none'
|
||||||
|
|
||||||
|
// Event Listern
|
||||||
|
Button_BigPresentButton.onclick = BigButtonClicked
|
||||||
|
}
|
||||||
|
|
||||||
|
function BigButtonClicked() {
|
||||||
|
Button_BigPresentButton.style.opacity = '0'
|
||||||
|
Button_BigPresentButton.style.pointerEvents = 'none'
|
||||||
|
VideoControls.style.opacity = '1'
|
||||||
|
VideoControls.style.pointerEvents = 'all'
|
||||||
|
Player.play()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Skip Around
|
// Skip Around
|
||||||
function SkipAround() {
|
function SkipAround() {
|
||||||
const Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards");
|
// Get Buttins
|
||||||
const Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards");
|
if (ShowBackAndForward === true) {
|
||||||
|
var Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards")
|
||||||
|
var Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards")
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event Listener
|
||||||
|
if (ShowBackAndForward === true) {
|
||||||
Button_SkipBack.addEventListener("click", Toggle_SkipBack);
|
Button_SkipBack.addEventListener("click", Toggle_SkipBack);
|
||||||
Button_SkipForth.addEventListener("click", Toggle_SkipForth);
|
Button_SkipForth.addEventListener("click", Toggle_SkipForth);
|
||||||
function Toggle_SkipBack() {
|
|
||||||
Skip(-10);
|
|
||||||
}
|
|
||||||
function Toggle_SkipForth() {
|
|
||||||
Skip(10);
|
|
||||||
}
|
|
||||||
function Skip(value) {
|
|
||||||
Player.currentTime += value;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function Toggle_SkipBack() {Skip(-10)}
|
||||||
|
function Toggle_SkipForth() {Skip(10)}
|
||||||
|
function Skip(value) {Player.currentTime += value}
|
||||||
|
|
||||||
|
// Keyboard Shortcuts
|
||||||
|
var SkipBackHotkey = 'j'
|
||||||
|
function SkipBackKS(event) {const { key } = event
|
||||||
|
if (key === SkipBackHotkey) {Toggle_SkipBack()}}
|
||||||
|
document.addEventListener("keyup", SkipBackKS)
|
||||||
|
|
||||||
|
var SkipForwardHotkey = 'l'
|
||||||
|
function SkipForwardKS(event) {const { key } = event
|
||||||
|
if (key === SkipForwardHotkey) {Toggle_SkipForth()}}
|
||||||
|
document.addEventListener("keyup", SkipForwardKS)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Gestures (Click / Double-click)
|
// Gestures (Click / Double-click)
|
||||||
|
@ -264,60 +297,15 @@ function AutoToggleControls() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Keyboard Shortcuts
|
// Keyboard Shortcuts (Toggle Mute)
|
||||||
function KeyboardShortcuts(events) {
|
function KeyboardShortcuts() {
|
||||||
if (Player.hasAttribute("keyboard-shortcut-fullscreen")) {
|
|
||||||
var Fullscreen_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-fullscreen");
|
|
||||||
} else {
|
|
||||||
var Fullscreen_KeyboardShortcut = "f";
|
|
||||||
}
|
|
||||||
if (Player.hasAttribute("keyboard-shortcut-mute")) {
|
|
||||||
var Mute_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-mute");
|
|
||||||
} else {
|
|
||||||
var Mute_KeyboardShortcut = "m";
|
|
||||||
}
|
|
||||||
if (Player.hasAttribute("keyboard-shortcut-playpause")) {
|
|
||||||
var PlayPause_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-playpause");
|
|
||||||
} else {
|
|
||||||
var PlayPause_KeyboardShortcut = "k";
|
|
||||||
}
|
|
||||||
if (Player.hasAttribute("keyboard-shortcut-skipback")) {
|
|
||||||
var SkipBack_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-skipback");
|
|
||||||
} else {
|
|
||||||
var SkipBack_KeyboardShortcut = "j";
|
|
||||||
}
|
|
||||||
if (Player.hasAttribute("keyboard-shortcut-skipforth")) {
|
|
||||||
var SkipForth_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-skipforth");
|
|
||||||
} else {
|
|
||||||
var SkipForth_KeyboardShortcut = "l";
|
|
||||||
}
|
|
||||||
function keyboardShortcuts(event) {
|
function keyboardShortcuts(event) {
|
||||||
const { key } = event;
|
const { key } = event;
|
||||||
if (key === PlayPause_KeyboardShortcut) {
|
var Mute_KeyboardShortcut = "m";
|
||||||
if (Player.paused || Player.ended) {
|
if (key === Mute_KeyboardShortcut) {
|
||||||
Player.play();
|
|
||||||
} else {
|
|
||||||
Player.pause();
|
|
||||||
}
|
|
||||||
if (Player.paused) {
|
|
||||||
Show_Controls();
|
|
||||||
} else {
|
|
||||||
setTimeout(() => {
|
|
||||||
Hide_Controls();
|
|
||||||
}, 1200);
|
|
||||||
}
|
|
||||||
} else if (key === Mute_KeyboardShortcut) {
|
|
||||||
Player.muted = !Player.muted;
|
Player.muted = !Player.muted;
|
||||||
if (Player.muted) {
|
if (Player.muted) {volume.setAttribute("data-volume", volume.value);volume.value = 0;}
|
||||||
volume.setAttribute("data-volume", volume.value);
|
else {volume.value = volume.dataset.volume;}
|
||||||
volume.value = 0;
|
|
||||||
} else {
|
|
||||||
volume.value = volume.dataset.volume;
|
|
||||||
}
|
|
||||||
} else if (key === SkipBack_KeyboardShortcut) {
|
|
||||||
Player.currentTime += -10;
|
|
||||||
} else if (key === SkipForth_KeyboardShortcut) {
|
|
||||||
Player.currentTime += 10;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.addEventListener("keyup", keyboardShortcuts);
|
document.addEventListener("keyup", keyboardShortcuts);
|
||||||
|
@ -333,9 +321,8 @@ function PlayAgain() {
|
||||||
document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'inherit'
|
document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'inherit'
|
||||||
}
|
}
|
||||||
document.querySelector('#vc-playagain').onclick = PlayItAgain
|
document.querySelector('#vc-playagain').onclick = PlayItAgain
|
||||||
}
|
|
||||||
|
|
||||||
function PlayItAgain() {
|
function PlayItAgain() {
|
||||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '1'
|
document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '1'
|
||||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'all'
|
document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'all'
|
||||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '1'
|
document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '1'
|
||||||
|
@ -345,15 +332,15 @@ function PlayItAgain() {
|
||||||
Player.pause();
|
Player.pause();
|
||||||
Player.currentTime = '0';
|
Player.currentTime = '0';
|
||||||
Player.play();
|
Player.play();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Init All Functions
|
// Init Functions
|
||||||
AutoToggleControls()
|
AutoToggleControls()
|
||||||
if (BigPlayButton === true) {BigPresentButton()} else {null}
|
|
||||||
Fullscreen()
|
Fullscreen()
|
||||||
Gestures()
|
Gestures()
|
||||||
KeyboardShortcuts()
|
KeyboardShortcuts()
|
||||||
PlayPause()
|
PlayPause()
|
||||||
if (ShowBackAndForward === true) {SkipAround()} else {null}
|
SkipAround()
|
||||||
PlayAgain()
|
PlayAgain()
|
||||||
</script>
|
</script>
|
|
@ -31,7 +31,7 @@ const {
|
||||||
* for the JavaScript code in this page.
|
* for the JavaScript code in this page.
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
// https://gist.github.com/michancio/59b9f3dc54b3ff4f6a84
|
// https://gist.sudovanilla.org/Korbs/sync-video-and-audio
|
||||||
// Find elements
|
// Find elements
|
||||||
var SyncVideo = document.querySelector("#zorn-player-" + PlayerName + " .main-video")
|
var SyncVideo = document.querySelector("#zorn-player-" + PlayerName + " .main-video")
|
||||||
var SyncAudio = document.querySelector("#zorn-player-" + PlayerName + " .main-audio")
|
var SyncAudio = document.querySelector("#zorn-player-" + PlayerName + " .main-audio")
|
||||||
|
|
|
@ -53,6 +53,7 @@ const {
|
||||||
* for the JavaScript code in this page.
|
* for the JavaScript code in this page.
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
//https://gist.sudovanilla.org/Korbs/ambient-video-effect
|
||||||
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
||||||
var FirstCanvas = document.getElementById("zorn-canvas-1")
|
var FirstCanvas = document.getElementById("zorn-canvas-1")
|
||||||
var SecondCanvas = document.getElementById("zorn-canvas-2")
|
var SecondCanvas = document.getElementById("zorn-canvas-2")
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -337,6 +337,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#playback-rate {
|
||||||
|
flex-direction: row;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
button#has-switch svg {
|
button#has-switch svg {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
}
|
}
|
|
@ -16,6 +16,7 @@ import {Zorn} from '@minpluto/zorn'
|
||||||
SettingsMenu
|
SettingsMenu
|
||||||
Whitelabel
|
Whitelabel
|
||||||
BigPlayButton
|
BigPlayButton
|
||||||
|
ShowPlaybackRate
|
||||||
Subtitles
|
Subtitles
|
||||||
>
|
>
|
||||||
<slot slot="menu">
|
<slot slot="menu">
|
||||||
|
|
|
@ -4,6 +4,13 @@
|
||||||
"index.ts"
|
"index.ts"
|
||||||
],
|
],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"jsx": "react"
|
"lib": ["ESNext"],
|
||||||
|
"target": "ESNext",
|
||||||
|
"module": "ESNext",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"allowJs": true,
|
||||||
|
"strict": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue