From b1d64007a635ff97117a8fe73f1b564f69332f39 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sat, 8 Dec 2018 09:12:50 +0900
Subject: [PATCH] Use a height buffer for video seek clicks

---
 mixins/AMV.pixy          |  5 +++--
 scripts/AnimeNotifier.ts |  6 +++---
 styles/video.scarlet     | 11 ++++++++---
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/mixins/AMV.pixy b/mixins/AMV.pixy
index bc544306..a4a5b1e0 100644
--- a/mixins/AMV.pixy
+++ b/mixins/AMV.pixy
@@ -17,8 +17,9 @@ component AMVVideo(amv *arn.AMV)
 			//- 	RawIcon("play")
 		
 		.video-controls
-			.video-progress-container
-				.video-progress
+			.video-progress-clickable
+				.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/AnimeNotifier.ts b/scripts/AnimeNotifier.ts
index 2eeb0898..f29a3ef4 100644
--- a/scripts/AnimeNotifier.ts
+++ b/scripts/AnimeNotifier.ts
@@ -917,7 +917,7 @@ export default class AnimeNotifier {
 				})
 
 				let progressElement = video.parentElement.getElementsByClassName("video-progress")[0] as HTMLElement
-				let progressContainer = video.parentElement.getElementsByClassName("video-progress-container")[0]
+				let progressClickable = video.parentElement.getElementsByClassName("video-progress-clickable")[0]
 				let timeElement = video.parentElement.getElementsByClassName("video-time")[0]
 
 				video.addEventListener("canplay", () => {
@@ -948,8 +948,8 @@ export default class AnimeNotifier {
 					this.loading(false)
 				})
 
-				progressContainer.addEventListener("click", (e: MouseEvent) => {
-					let rect = progressContainer.getBoundingClientRect()
+				progressClickable.addEventListener("click", (e: MouseEvent) => {
+					let rect = progressClickable.getBoundingClientRect()
 					let x = e.clientX
 					let progress = (x - rect.left) / rect.width
 					video.currentTime = progress * video.duration
diff --git a/styles/video.scarlet b/styles/video.scarlet
index 6bc16a43..12c09538 100644
--- a/styles/video.scarlet
+++ b/styles/video.scarlet
@@ -1,5 +1,7 @@
 const video-padding = 56.25%
 const video-control-color = rgba(255, 255, 255, 0.75)
+const video-progress-height = 0.35rem
+const video-progress-clickable-height-buffer = 0.4rem
 
 .video-container
 	position relative
@@ -35,9 +37,12 @@ const video-control-color = rgba(255, 255, 255, 0.75)
 	:hover
 		opacity 1 !important
 
-.video-progress-container
+.video-progress-clickable
 	flex 1
-	height 5px
+	padding video-progress-clickable-height-buffer 0
+
+.video-progress-container
+	height video-progress-height
 	background rgba(255, 255, 255, 0.3)
 	border-radius ui-element-border-radius
 	transform translateZ(0)
@@ -46,7 +51,7 @@ const video-control-color = rgba(255, 255, 255, 0.75)
 .video-progress
 	background white
 	width 100%
-	height 100%
+	height video-progress-height
 	transform scaleX(0)
 	transform-origin 0
 	will-change transform