114 lines
No EOL
4.5 KiB
Text
114 lines
No EOL
4.5 KiB
Text
---
|
|
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> |