From de70254ce7c3e8b875a6bcdf71232e827cae5d5e Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sat, 8 Dec 2018 04:40:27 +0900
Subject: [PATCH] Improved video controls

---
 mixins/AMV.pixy          |  9 +++++++--
 scripts/Actions/Video.ts |  4 ++--
 scripts/AnimeNotifier.ts | 22 +++++++++++++++++++---
 styles/video.scarlet     | 24 ++++++++++++++++++++----
 4 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/mixins/AMV.pixy b/mixins/AMV.pixy
index 7c322c7a..5f0fc364 100644
--- a/mixins/AMV.pixy
+++ b/mixins/AMV.pixy
@@ -9,7 +9,7 @@ component AMVMini(amv *arn.AMV, user *arn.User)
 		AMVMiniFooter(amv, user)
 
 component AMVVideo(amv *arn.AMV)
-	.video-container(id=amv.ID)
+	.video-container(id=amv.ID, data-api="/api/amv/" + amv.ID)
 		video.video.media-play-area.lazy.action(data-action="playVideo", data-trigger="click", data-media-id=amv.ID)
 			source(data-src="https://notify.moe/videos/amvs/" + amv.File, data-type="video/webm")
 
@@ -17,7 +17,12 @@ component AMVVideo(amv *arn.AMV)
 			//- 	RawIcon("play")
 		
 		.video-controls
-			button.video-control.action(data-action="toggleFullscreen", data-trigger="click", data-id=amv.ID)
+			.video-duration= 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")
+			
+			button.video-control.action(data-action="toggleFullscreen", data-trigger="click", data-id=amv.ID, aria-label="Fullscreen")
 				RawIcon("square-o")
 
 component AMVFooter(amv *arn.AMV, user *arn.User)
diff --git a/scripts/Actions/Video.ts b/scripts/Actions/Video.ts
index 2bdf686c..f877be5b 100644
--- a/scripts/Actions/Video.ts
+++ b/scripts/Actions/Video.ts
@@ -9,11 +9,11 @@ export function playVideo(arn: AnimeNotifier, video: HTMLVideoElement) {
 		return
 	}
 
-	video.load()
-
 	video.addEventListener("loadeddata", () => {
 		togglePlayVideo(video)
 	})
+
+	video.load()
 }
 
 function togglePlayVideo(video: HTMLVideoElement) {
diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts
index 70abf92d..e4b77a83 100644
--- a/scripts/AnimeNotifier.ts
+++ b/scripts/AnimeNotifier.ts
@@ -891,13 +891,30 @@ export default class AnimeNotifier {
 	}
 
 	lazyLoadVideo(video: HTMLVideoElement) {
+		const hideControlsDelay = 1500
+
 		// Once the video becomes visible, load it
 		video["became visible"] = () => {
-			// video.pause()
-
 			// Prevent context menu
 			video.addEventListener("contextmenu", e => e.preventDefault())
 
+			// Show and hide controls on mouse movement
+			let controls = video.parentElement.getElementsByClassName("video-controls")[0]
+
+			let hideControls = () => {
+				controls.classList.add("fade-out")
+			}
+
+			let showControls = () => {
+				controls.classList.remove("fade-out")
+			}
+
+			video.addEventListener("mousemove", () => {
+				showControls()
+				clearTimeout(video["hideControlsTimeout"])
+				video["hideControlsTimeout"] = setTimeout(hideControls, hideControlsDelay)
+			})
+
 			let modified = false
 
 			for(let child of video.children) {
@@ -916,7 +933,6 @@ 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 b7dc4899..e0db8834 100644
--- a/styles/video.scarlet
+++ b/styles/video.scarlet
@@ -1,4 +1,5 @@
 const video-padding = 56.25%
+const video-control-color = rgba(255, 255, 255, 0.75)
 
 .video-container
 	position relative
@@ -22,16 +23,31 @@ const video-padding = 56.25%
 
 .video-controls
 	position absolute
-	bottom 1rem
-	right 1rem
+	bottom 0.5rem
+	right 0.75rem
 	opacity 0
+	horizontal
+	align-items center
 	default-transition
 
+	:hover
+		opacity 1 !important
+
+.video-duration
+	color video-control-color
+
 .video-control
-	background transparent
+	background transparent !important
+	color video-control-color
 	border none
-	color white
 	font-size 1.2rem
+	line-height 1em
+	height auto
+	padding 0
+	margin-left 0.5rem
+
+	:hover
+		color white
 
 ::-webkit-media-controls
 	display none !important
\ No newline at end of file