From 24069ba1c93f966e4c2c1b19f3ad4e615cfd9a02 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sat, 8 Dec 2018 06:01:06 +0900
Subject: [PATCH] Enabled seeking video position

---
 mixins/AMV.pixy          |  4 ++--
 scripts/Actions/Video.ts | 20 --------------------
 scripts/AnimeNotifier.ts | 31 +++++++++++++++++++++++++++++++
 styles/video.scarlet     |  8 ++++----
 4 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/mixins/AMV.pixy b/mixins/AMV.pixy
index 66ac6127..9ff8eddb 100644
--- a/mixins/AMV.pixy
+++ b/mixins/AMV.pixy
@@ -17,8 +17,8 @@ component AMVVideo(amv *arn.AMV)
 			//- 	RawIcon("play")
 		
 		.video-controls
-			.video-progress-bar
-				.video-current-progress
+			.video-progress-container
+				.video-progress
 			
 			.video-time= fmt.Sprintf("%d:%02d", int(amv.Info.Duration.Minutes()), int(amv.Info.Duration.Seconds()) % 60)
 
diff --git a/scripts/Actions/Video.ts b/scripts/Actions/Video.ts
index db9b45e1..f013cc0c 100644
--- a/scripts/Actions/Video.ts
+++ b/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()
 }
 
diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts
index e4b77a83..1359dcd3 100644
--- a/scripts/AnimeNotifier.ts
+++ b/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")
 				})
 			}
diff --git a/styles/video.scarlet b/styles/video.scarlet
index b2ae95c5..b0fe311d 100644
--- a/styles/video.scarlet
+++ b/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
-	background rgba(255, 255, 255, 0.75)
+.video-progress
+	background rgba(255, 255, 255, 0.85)
 	width 100%
 	height 100%
 	transform scaleX(0)