Zorn/src/Controls.astro

84 lines
3.1 KiB
Plaintext

---
// Properties
const {
// Meta
Title,
PlayerName,
SeekColor = '#2185d0',
// Type
Live,
// Toggles
ShowBackAndForward,
ShowPlaybackRate,
ShowPiP = true,
ShowFullscreen = true,
// OThers
Subtitles
} = Astro.props
// Functions
import HLS from './Features/HLS.astro'
// Icons and Styles
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>
</div>
<div id="vc-gestures">
<span id="vc-gesture-left"></span>
<span id="vc-gesture-middle"></span>
<span id="vc-gesture-right"></span>
</div>
<div class="vc-bottom">
<button style="display: none" id="vc-playagain"><i class="iconoir-refresh"></i></button>
<div class="vc-start">
<button id="vc-playpause"><i class="iconoir-play-solid"></i></button>
{Live ?
null
:
ShowBackAndForward ?
<button id="vc-backwards"><i class="iconoir-rewind-solid"></i></button>
<button id="vc-forwards"><i class="iconoir-forward-solid"></i></button>
:
null
}
<div class="vc-volume-controller">
<button><i class="iconoir-sound-high-solid"></i></button>
<div class="vc-volume-controller-input">
<span style={`background: lightblue`} class="vc-volume-bar"></span>
<input type="range" min="0" max="1.0" step="0.01"/>
</div>
</div>
</div>
<div class="vc-center">
{Live ?
null
:
<div class="vc-seek">
<span style={`background: ${SeekColor}`} class="vc-progress-bar"></span>
<input class="seek" id="seek" value="0" min="0" aria-valuenow="1" type="range" step="1"/>
</div>
<p class="timestamp">
<span class="seek-tooltip" id="seek-tooltip">00:00</span>
<span id="current">--:--</span>
<span id="duration">--:--</span>
</p>
}
</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}
<slot/>
{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 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>