Improved video controls

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)

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) {

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")
 				})
 			}

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
+	bottom 0.5rem
-	right 1rem
+	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