---
// 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>