MinPluto/Zorn
MinPluto/Zorn
1
0
Fork 0
Code Issues Activity

Compare commits

base: MinPluto:fefe41e7bbf541053a6712e33d16801f8f0d32bd
Branches Tags
MinPluto:main
..
compare: MinPluto:8fd57500d96c78ecbe36ae0c30a663639c4e6483
Branches Tags
MinPluto:main

No commits in common. "fefe41e7bbf541053a6712e33d16801f8f0d32bd" and "8fd57500d96c78ecbe36ae0c30a663639c4e6483" have entirely different histories.
fefe41e7bb ... 8fd57500d9

9 changed files with 34 additions and 92 deletions
Show stats Expand all files Collapse all files

2
package.json
View file

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

30
src/Controls.astro
View file

@ -1,21 +1,12 @@
---
// Properties
const {
// Meta
Title,
PlayerName,
SeekColor = '#2185d0',
// Type
Live,
// Toggles
ShowBackAndForward,
ShowPlaybackRate,
ShowPiP = true,
ShowFullscreen = true,
// OThers
SeekColor = '#2185d0',
PlayerName,
Subtitles
} = Astro.props
@ -28,8 +19,7 @@ import './Styles/Iconoir.css'
<div class="video-controls">
<div class="vc-top">
<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>
<p>{Title}</p>
</div>
<div id="vc-gestures">
<span id="vc-gesture-left"></span>
@ -73,12 +63,18 @@ 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/>
{ShowPiP ? <button id="vc-pip" onclick={'document.querySelector("#zorn-player-' + PlayerName + ' video").requestPictureInPicture()'}><i class="iconoir-multi-window"></i></button> : null}
<!-- 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>
{Subtitles ? <button id="vc-subtitles"><i class="iconoir-closed-captions-tag-solid"></i></button> : null}
{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}
{ShowPlaybackRate ? <button onclick="PlayerMenu_PlaybackRate()"><i class="iconoir-timer-solid"></i></button> : null}
<button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button>
</div>
</div>
</div>

31
src/Controls/Controller.astro
View file

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

16
src/Player.astro
View file

File diff suppressed because one or more lines are too long

39
src/Styles/Index.scss
View file

@ -7,16 +7,6 @@
}
}
// Animations
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// Zorn Player
.video-container {
position: relative;
@ -72,12 +62,10 @@
}
}
.vc-top {
display: flex;
justify-content: space-between;
#vc-title, #vc-buffering {
pointer-events: none;
opacity: 0;
transition: 0.3s opacity;
pointer-events: none;
opacity: 0;
transition: 0.3s opacity;
p {
color: white;
backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
-webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
@ -87,17 +75,6 @@
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%;
@ -323,7 +300,7 @@
background: rgb(255 255 255 / 25%);
}
button {
padding: 10px 12px !important;
padding: 6px 12px !important;
margin: 0px !important;
aspect-ratio: inherit !important;
background: transparent !important;
@ -363,12 +340,6 @@
#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 {

1
test/src/pages/index.astro
View file

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

3
test/src/pages/milieu.astro
View file

@ -12,10 +12,11 @@ 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">

3
test/src/pages/multi.astro
View file

@ -15,7 +15,6 @@ 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">
@ -29,10 +28,12 @@ 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>

1
test/src/pages/youtube.astro
View file

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