Compare commits

...

6 commits

Author SHA1 Message Date
Korbs fefe41e7bb Update Demo 2024-12-03 15:56:07 -05:00
Korbs fe73d0380c Add buffering indicator 2024-12-03 15:56:01 -05:00
Korbs 145b462fdf Add buffering and polish Playback Rate menu 2024-12-03 15:55:50 -05:00
Korbs 90acdad74a Update Playback Rate menu script 2024-12-03 15:55:37 -05:00
Korbs 0f27fc7815 Add more toggle options 2024-12-03 15:55:20 -05:00
Korbs c0d30caad3 Bump 2024-12-03 15:55:12 -05:00
9 changed files with 92 additions and 34 deletions

View file

@ -1,6 +1,6 @@
{
"name": "@minpluto/zorn",
"version": "0.4.8",
"version": "0.4.81",
"author": "SudoVanilla",
"displayName": "Zorn",
"description": "In-House Player built by MinPluto",

View file

@ -1,12 +1,21 @@
---
// Properties
const {
// Meta
Title,
PlayerName,
SeekColor = '#2185d0',
// Type
Live,
// Toggles
ShowBackAndForward,
ShowPlaybackRate,
SeekColor = '#2185d0',
PlayerName,
ShowPiP = true,
ShowFullscreen = true,
// OThers
Subtitles
} = Astro.props
@ -19,7 +28,8 @@ import './Styles/Iconoir.css'
<div class="video-controls">
<div class="vc-top">
<p>{Title}</p>
<div>{Title ? <p id="vc-title">{Title}</p> : null}</div>
<div><p id="vc-buffering"><i class="iconoir-refresh-circle-solid"></i> Buffering...</p> </div>
</div>
<div id="vc-gestures">
<span id="vc-gesture-left"></span>
@ -63,18 +73,12 @@ import './Styles/Iconoir.css'
}
</div>
<div class="vc-end">
{Live ?
<HLS/>
<span id="live-text" style="pointer-events: none;border-radius: 3rem;padding: 6px 12px;background: #933c3c;letter-spacing: 4px;">Live</span>
:
null
}
{Live ? <HLS/><span id="live-text" style="pointer-events: none;border-radius: 3rem;padding: 6px 12px;background: #933c3c;letter-spacing: 4px;">Live</span>:null}
<slot/>
<!-- 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>
{ShowPiP ? <button id="vc-pip" onclick={'document.querySelector("#zorn-player-' + PlayerName + ' video").requestPictureInPicture()'}><i class="iconoir-multi-window"></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>
{ShowPlaybackRate ? <button id="vc-playbackrate"><i class="iconoir-timer-solid"></i></button> : null}
{ShowFullscreen ? <button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button> : null}
</div>
</div>
</div>

View file

@ -2,11 +2,12 @@
const {
PlayerName,
BigPlayButton,
ShowBackAndForward
ShowBackAndForward,
ShowFullscreen
} = Astro.props
---
<script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward}}>
<script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward, ShowFullscreen}}>
/**
* @licstart The following is the entire license notice for the
* JavaScript code in this page.
@ -47,10 +48,23 @@ var exit_fullscreen_solid_default = '<svg width="24px" height="24px" stroke-widt
var FullscreenIcon = fullscreen_solid_default
var ExitFullscreenIcon = exit_fullscreen_solid_default
// Buffering
function Buffering() {
var BufferingIndicator = document.querySelector('#zorn-player-' + PlayerName + ' #vc-buffering')
Player.onwaiting = (event) => {
BufferingIndicator.style.opacity = '1'
}
Player.onplaying = (event) => {
BufferingIndicator.style.opacity = '0'
}
}
// Fullscreen
function Fullscreen() {
// Get Button
const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
if (ShowFullscreen === true) {
var Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
}
// Create and Call Functions
function Toggle_Fullscreen() {
@ -70,19 +84,19 @@ function Fullscreen() {
EnterFullscreen();
VideoContainer.requestFullscreen()
}
Update_FullscreenButton()
if (ShowFullscreen === true) {Update_FullscreenButton()}
}
function EnterFullscreen() {
VideoContainer.classList.add('zorn-fullscreen');
Update_FullscreenButton();
if (ShowFullscreen === true) {Update_FullscreenButton()}
}
function ExitFullscreen() {
VideoContainer.classList.remove('zorn-fullscreen');
Update_FullscreenButton();
if (ShowFullscreen === true) {Update_FullscreenButton()}
}
// Event Listener
Button_Fullscreen.onclick = Toggle_Fullscreen;
if (ShowFullscreen === true) {Button_Fullscreen.onclick = Toggle_Fullscreen;}
function Update_FullscreenButton() {
if (document.fullscreenElement) {
Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)");
@ -96,7 +110,7 @@ function Fullscreen() {
// Gesture
Player.addEventListener("dblclick", () => {
Toggle_Fullscreen()
Update_FullscreenButton()
if (ShowFullscreen === true) {Update_FullscreenButton()}
});
// Keyboard Shortcut
@ -337,6 +351,7 @@ function PlayAgain() {
// Init Functions
AutoToggleControls()
Buffering()
Fullscreen()
Gestures()
KeyboardShortcuts()

File diff suppressed because one or more lines are too long

View file

@ -7,6 +7,16 @@
}
}
// Animations
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// Zorn Player
.video-container {
position: relative;
@ -62,10 +72,12 @@
}
}
.vc-top {
pointer-events: none;
opacity: 0;
transition: 0.3s opacity;
p {
display: flex;
justify-content: space-between;
#vc-title, #vc-buffering {
pointer-events: none;
opacity: 0;
transition: 0.3s opacity;
color: white;
backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
-webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
@ -75,6 +87,17 @@
margin: 0px;
font-size: 24px;
}
#vc-buffering {
font-size: 14px !important;
align-items: center;
display: flex;
gap: 12px;
border-radius: 3rem !important;
padding: 4px 12px 4px 4px !important;
i::before {
animation: 1s spin infinite linear;
}
}
}
#vc-gestures {
height: 100%;
@ -300,7 +323,7 @@
background: rgb(255 255 255 / 25%);
}
button {
padding: 6px 12px !important;
padding: 10px 12px !important;
margin: 0px !important;
aspect-ratio: inherit !important;
background: transparent !important;
@ -340,6 +363,12 @@
#playback-rate {
flex-direction: row;
min-width: 100px;
border-radius: 3rem;
padding: 2px;
button {
border-radius: 3rem !important;
padding: 10px 13px !important;
}
}
button#has-switch svg {

View file

@ -18,6 +18,7 @@ import {Zorn} from '@minpluto/zorn'
BigPlayButton
ShowPlaybackRate
Subtitles
SeekColor="#f28438"
>
<slot slot="menu">
<button>Stats for Geeks</button>

View file

@ -12,11 +12,10 @@ import {Zorn} from '@minpluto/zorn'
Title="Islandia"
Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"
CustomControlsWithMenu
SettingsMenu
Milieu
Whitelabel
BigPlayButton
ShowFullscreen={false}
>
<slot slot="menu">
<div id="settings" class="vc-menu">

View file

@ -15,6 +15,7 @@ import Info from '@components/Info.astro'
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
PlayerName="EAYNGG"
SeekColor="#f28438"
/>
<Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
@ -28,12 +29,10 @@ import Info from '@components/Info.astro'
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
CustomControls
VideoAttributes="muted"
AudioAttributes=""
PlayerName="TMOTW"
/>
<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
<p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>

View file

@ -15,6 +15,7 @@ import {Zorn} from '@minpluto/zorn'
Invidious="invidious.nerdvpn.de"
Audio
BigPlayButton
SeekColor="#FF0000"
>
</Zorn>
<slot slot="info">