Enabled seeking video position

This commit is contained in:
Eduard Urbach 2018-12-08 06:01:06 +09:00
parent 3502fdaf8d
commit 24069ba1c9
4 changed files with 37 additions and 26 deletions

View File

@ -17,8 +17,8 @@ component AMVVideo(amv *arn.AMV)
//- RawIcon("play") //- RawIcon("play")
.video-controls .video-controls
.video-progress-bar .video-progress-container
.video-current-progress .video-progress
.video-time= fmt.Sprintf("%d:%02d", int(amv.Info.Duration.Minutes()), int(amv.Info.Duration.Seconds()) % 60) .video-time= fmt.Sprintf("%d:%02d", int(amv.Info.Duration.Minutes()), int(amv.Info.Duration.Seconds()) % 60)

View File

@ -13,26 +13,6 @@ export function playVideo(arn: AnimeNotifier, video: HTMLVideoElement) {
togglePlayVideo(video) togglePlayVideo(video)
}) })
let progressElement = video.parentElement.getElementsByClassName("video-current-progress")[0] as HTMLElement
let timeElement = video.parentElement.getElementsByClassName("video-time")[0]
video.addEventListener("timeupdate", () => {
let time = video.currentTime
let minutes = Math.trunc(time / 60)
let seconds = Math.trunc(time) % 60
let paddedSeconds = ("00" + seconds).slice(-2)
timeElement.textContent = `${minutes}:${paddedSeconds}`
progressElement.style.transform = `scaleX(${time / video.duration})`
})
video.addEventListener("waiting", () => {
arn.statusMessage.showInfo("Buffering...", -1)
})
video.addEventListener("playing", () => {
arn.statusMessage.close()
})
video.load() video.load()
} }

View File

@ -915,6 +915,36 @@ export default class AnimeNotifier {
video["hideControlsTimeout"] = setTimeout(hideControls, hideControlsDelay) video["hideControlsTimeout"] = setTimeout(hideControls, hideControlsDelay)
}) })
let progressElement = video.parentElement.getElementsByClassName("video-progress")[0] as HTMLElement
let progressContainer = video.parentElement.getElementsByClassName("video-progress-container")[0]
let timeElement = video.parentElement.getElementsByClassName("video-time")[0]
video.addEventListener("timeupdate", () => {
let time = video.currentTime
let minutes = Math.trunc(time / 60)
let seconds = Math.trunc(time) % 60
let paddedSeconds = ("00" + seconds).slice(-2)
timeElement.textContent = `${minutes}:${paddedSeconds}`
progressElement.style.transform = `scaleX(${time / video.duration})`
})
video.addEventListener("waiting", () => {
this.loading(true)
})
video.addEventListener("playing", () => {
this.loading(false)
})
progressContainer.addEventListener("click", (e: MouseEvent) => {
let rect = progressContainer.getBoundingClientRect()
let x = e.clientX
let progress = (x - rect.left) / rect.width
video.currentTime = progress * video.duration
video.dispatchEvent(new Event("timeupdate"))
e.stopPropagation()
})
let modified = false let modified = false
for(let child of video.children) { for(let child of video.children) {
@ -933,6 +963,7 @@ export default class AnimeNotifier {
if(modified) { if(modified) {
Diff.mutations.queue(() => { Diff.mutations.queue(() => {
video.load()
video.classList.add("element-found") video.classList.add("element-found")
}) })
} }

View File

@ -35,15 +35,15 @@ const video-control-color = rgba(255, 255, 255, 0.75)
:hover :hover
opacity 1 !important opacity 1 !important
.video-progress-bar .video-progress-container
flex 1 flex 1
height 5px height 5px
background rgba(255, 255, 255, 0.5) background rgba(255, 255, 255, 0.3)
border-radius ui-element-border-radius border-radius ui-element-border-radius
overflow hidden overflow hidden
.video-current-progress .video-progress
background rgba(255, 255, 255, 0.75) background rgba(255, 255, 255, 0.85)
width 100% width 100%
height 100% height 100%
transform scaleX(0) transform scaleX(0)