From 3502fdaf8d0853278e51dfc7bec31ce3b64481a1 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sat, 8 Dec 2018 05:19:50 +0900
Subject: [PATCH] Added video progress bar

---
 mixins/AMV.pixy          |  5 ++++-
 scripts/Actions/Video.ts | 22 +++++++++++++++++++++-
 styles/video.scarlet     | 23 ++++++++++++++++++++---
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/mixins/AMV.pixy b/mixins/AMV.pixy
index 5f0fc364..66ac6127 100644
--- a/mixins/AMV.pixy
+++ b/mixins/AMV.pixy
@@ -17,7 +17,10 @@ component AMVVideo(amv *arn.AMV)
 			//- 	RawIcon("play")
 		
 		.video-controls
-			.video-duration= fmt.Sprintf("%d:%02d", int(amv.Info.Duration.Minutes()), int(amv.Info.Duration.Seconds()) % 60)
+			.video-progress-bar
+				.video-current-progress
+			
+			.video-time= fmt.Sprintf("%d:%02d", int(amv.Info.Duration.Minutes()), int(amv.Info.Duration.Seconds()) % 60)
 
 			//- button.video-control.action(data-action="like", data-trigger="click")
 			//- 	RawIcon("heart-o")
diff --git a/scripts/Actions/Video.ts b/scripts/Actions/Video.ts
index f877be5b..db9b45e1 100644
--- a/scripts/Actions/Video.ts
+++ b/scripts/Actions/Video.ts
@@ -9,10 +9,30 @@ export function playVideo(arn: AnimeNotifier, video: HTMLVideoElement) {
 		return
 	}
 
-	video.addEventListener("loadeddata", () => {
+	video.addEventListener("canplay", () => {
 		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/styles/video.scarlet b/styles/video.scarlet
index e0db8834..b2ae95c5 100644
--- a/styles/video.scarlet
+++ b/styles/video.scarlet
@@ -23,9 +23,11 @@ const video-control-color = rgba(255, 255, 255, 0.75)
 
 .video-controls
 	position absolute
-	bottom 0.5rem
-	right 0.75rem
+	bottom 0
+	right 0
+	padding 0.5rem 0.75rem
 	opacity 0
+	width 100%
 	horizontal
 	align-items center
 	default-transition
@@ -33,8 +35,23 @@ const video-control-color = rgba(255, 255, 255, 0.75)
 	:hover
 		opacity 1 !important
 
-.video-duration
+.video-progress-bar
+	flex 1
+	height 5px
+	background rgba(255, 255, 255, 0.5)
+	border-radius ui-element-border-radius
+	overflow hidden
+
+.video-current-progress
+	background rgba(255, 255, 255, 0.75)
+	width 100%
+	height 100%
+	transform scaleX(0)
+	transform-origin 0
+
+.video-time
 	color video-control-color
+	margin-left 0.5rem
 
 .video-control
 	background transparent !important