Compare commits
6 commits
8fd57500d9
...
fefe41e7bb
Author | SHA1 | Date | |
---|---|---|---|
Korbs | fefe41e7bb | ||
Korbs | fe73d0380c | ||
Korbs | 145b462fdf | ||
Korbs | 90acdad74a | ||
Korbs | 0f27fc7815 | ||
Korbs | c0d30caad3 |
|
@ -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",
|
||||
|
|
|
@ -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>
|
|
@ -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
|
@ -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 {
|
||||
|
|
|
@ -18,6 +18,7 @@ import {Zorn} from '@minpluto/zorn'
|
|||
BigPlayButton
|
||||
ShowPlaybackRate
|
||||
Subtitles
|
||||
SeekColor="#f28438"
|
||||
>
|
||||
<slot slot="menu">
|
||||
<button>Stats for Geeks</button>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -15,6 +15,7 @@ import {Zorn} from '@minpluto/zorn'
|
|||
Invidious="invidious.nerdvpn.de"
|
||||
Audio
|
||||
BigPlayButton
|
||||
SeekColor="#FF0000"
|
||||
>
|
||||
</Zorn>
|
||||
<slot slot="info">
|
||||
|
|
Loading…
Reference in a new issue