diff --git a/src/Controls/Seek.astro b/src/Controls/Seek.astro index d7bf546..02e33dc 100644 --- a/src/Controls/Seek.astro +++ b/src/Controls/Seek.astro @@ -10,7 +10,7 @@ * 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; + * 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. * @@ -26,83 +26,83 @@ */ function Seek() { var Player = document.querySelector('video') - const timeElapsed = document.getElementById("current"); - const duration = document.getElementById("duration"); + const timeElapsed = document.getElementById("current") + const duration = document.getElementById("duration") function formatTime(timeInSeconds) { const result = new Date(timeInSeconds * 1e3) .toISOString() - .substr(11, 8); + .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}`; + 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); + Player.addEventListener("loadedmetadata", initializeVideo) function updateTimeElapsed() { - const time = formatTime(Math.round(Player.currentTime)); - timeElapsed.innerText = `${time.minutes}:${time.seconds}`; + 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(".vc-progress-bar"); - const seek = document.getElementById("seek"); + Player.addEventListener("timeupdate", updateTimeElapsed) + const progressBar = document.querySelector(".vc-progress-bar") + const seek = document.getElementById("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}`; + 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); + seek.value = Math.floor(Player.currentTime) document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%' } - Player.addEventListener("timeupdate", updateProgress); - const seekTooltip = document.getElementById("seek-tooltip"); + Player.addEventListener("timeupdate", updateProgress) + const seekTooltip = document.getElementById("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`; + ) + 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('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%' seek.addEventListener('mouseleave', () => { seekTooltip.style.opacity = '0' }) } - seek.addEventListener("mousemove", updateSeekTooltip); + 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; + : event.target.value + Player.currentTime = skipTo + progressBar.value = skipTo + seek.value = skipTo } - seek.addEventListener("input", skipAhead); + seek.addEventListener("input", skipAhead) - initializeVideo(); + initializeVideo() } -Seek(); +Seek() \ No newline at end of file