Enabled seeking video position

mixins/AMV.pixy

@@ -17,8 +17,8 @@ component AMVVideo(amv *arn.AMV)
 			//- 	RawIcon("play")
 		
 		.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)
 

scripts/Actions/Video.ts

@@ -13,26 +13,6 @@ export function playVideo(arn: AnimeNotifier, video: HTMLVideoElement) {
 		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()
 }
 

scripts/AnimeNotifier.ts

@@ -915,6 +915,36 @@ export default class AnimeNotifier {
 				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
 
 			for(let child of video.children) {
@@ -933,6 +963,7 @@ export default class AnimeNotifier {
 
 			if(modified) {
 				Diff.mutations.queue(() => {
+					video.load()
 					video.classList.add("element-found")
 				})
 			}

styles/video.scarlet

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