Added video progress bar

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

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

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