80 lines
3 KiB
Plaintext
80 lines
3 KiB
Plaintext
---
|
|
// Properties
|
|
const {
|
|
Title,
|
|
Live,
|
|
ShowBackAndForward,
|
|
ShowPlaybackRate,
|
|
SeekColor = '#2185d0',
|
|
PlayerName,
|
|
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">
|
|
<p>{Title}</p>
|
|
</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">00:00</span>
|
|
<span id="duration">00:00</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/>
|
|
<!-- 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 onclick="PlayerMenu_PlaybackRate()"><i class="iconoir-timer-solid"></i></button> : null}
|
|
<button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button>
|
|
</div>
|
|
</div>
|
|
</div> |