Zorn/src/Controls/Seek.astro

---
const {
  PlayerName
} = Astro.props
---

<script define:vars={{PlayerName}}>
/**
 * @licstart  The following is the entire license notice for the 
 *  JavaScript code in this page.
 *
 * Copyright (C) 2024 SudoVanilla
 *
 *
 * The JavaScript code in this page is free software: you can
 * redistribute it and/or modify it under the terms of the GNU
 * General Public License (GNU GPL) as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option)
 * any later version.  The code is distributed WITHOUT ANY WARRANTY
 * without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you
 * may distribute non-source (e.g., minimized or compacted) forms of
 * that code without the copy of the GNU GPL normally required by
 * section 4, provided you include this license notice and a URL
 * through which recipients can access the Corresponding Source.
 *
 * @licend  The above is the entire license notice
 * for the JavaScript code in this page.
 *
 */
function Seek() {
    var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
    const timeElapsed = document.querySelector('#zorn-player-' + PlayerName + ' #current')
    const duration = document.querySelector('#zorn-player-' + PlayerName + ' #duration')
    function formatTime(timeInSeconds) {
        const result = new Date(timeInSeconds * 1e3)
            .toISOString()
            .substr(11, 8)
        return {
            minutes: result.substr(3, 2),
            seconds: result.substr(6, 2),
        }
    }
    function initializeVideo() {
        const videoDuration = Math.round(Player.duration)
        const time = formatTime(videoDuration)
        duration.innerText = `${time.minutes}:${time.seconds}`
        duration.setAttribute(
            "datetime",
            `${time.minutes}m ${time.seconds}s`,
        )
    }
    Player.addEventListener("loadedmetadata", initializeVideo)
    function updateTimeElapsed() {
        const time = formatTime(Math.round(Player.currentTime))
        timeElapsed.innerText = `${time.minutes}:${time.seconds}`
        timeElapsed.setAttribute(
            "datetime",
            `${time.minutes}m ${time.seconds}s`,
        )
    }
    Player.addEventListener("timeupdate", updateTimeElapsed)
    const progressBar = document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar')
    const seek = document.querySelector('#zorn-player-' + PlayerName + ' #seek')
    function initializeVideo() {
        const videoDuration = Math.round(Player.duration)
        seek.setAttribute("max", videoDuration)
        progressBar.setAttribute("max", videoDuration)
        const time = formatTime(videoDuration)
        duration.innerText = `${time.minutes}:${time.seconds}`
        duration.setAttribute(
            "datetime",
            `${time.minutes}m ${time.seconds}s`,
        )
    }
    function updateProgress() {
        seek.value = Math.floor(Player.currentTime)
        document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
    }
    Player.addEventListener("timeupdate", updateProgress)
    const seekTooltip = document.querySelector('#zorn-player-' + PlayerName + ' #seek-tooltip')
    function updateSeekTooltip(event) {
        const skipTo = Math.round(
            (event.offsetX / event.target.clientWidth) *
                parseInt(event.target.getAttribute("max"), 10),
        )
        seek.setAttribute("data-seek", skipTo)
        const t = formatTime(skipTo)
        seekTooltip.textContent = `${t.minutes}:${t.seconds}`
        const rect = Player.getBoundingClientRect()
        seekTooltip.style.left = `${event.pageX - rect.left}px`
        seekTooltip.style.opacity = '1'
        document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
        seek.addEventListener('mouseleave', () => {
            seekTooltip.style.opacity = '0'
        })
    }
    seek.addEventListener("mousemove", updateSeekTooltip)
    function skipAhead(event) {
        const skipTo = event.target.dataset.seek
            ? event.target.dataset.seek
            : event.target.value
        Player.currentTime = skipTo
        progressBar.value = skipTo
        seek.value = skipTo
    }
    seek.addEventListener("input", skipAhead)

    initializeVideo()
}
Seek()
</script>