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

Add more toggle options

Browse source
This commit is contained in:
Korbs 2024-12-03 15:55:20 -05:00
parent c0d30caad3
commit 0f27fc7815
1 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/Controls.astro
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>