Added play and pause button

mixins/AMV.pixy

@@ -10,7 +10,7 @@ component AMVMini(amv *arn.AMV, user *arn.User)
 
 component AMVVideo(amv *arn.AMV)
 	.video-container(id=amv.ID, data-api="/api/amv/" + amv.ID)
-		video.video.lazy.action(data-action="playVideo", data-trigger="click", data-media-id=amv.ID)
+		video.video.lazy.action(data-action="toggleFullscreen", data-trigger="dblclick", data-id=amv.ID)
 			source(data-src="https://notify.moe/videos/amvs/" + amv.File, data-type="video/webm")
 
 			//- button.media-play-button

mixins/VideoControls.pixy

@@ -1,5 +1,11 @@
 component VideoControls(containerId string, duration time.Duration)
 	.video-controls
+		button.video-control.video-control-play.action(data-action="togglePlayVideo", data-trigger="click", data-media-id=containerId, aria-label="Play")
+			RawIcon("play")
+		
+		button.video-control.video-control-pause.action(data-action="togglePlayVideo", data-trigger="click", data-media-id=containerId, aria-label="Pause")
+			RawIcon("pause")
+		
 		.video-progress-clickable
 			.video-progress-container
 				.video-progress
@@ -9,5 +15,5 @@ component VideoControls(containerId string, duration time.Duration)
 		//- 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=containerId, aria-label="Fullscreen")
+		button.video-control.video-control-fullscreen.action(data-action="toggleFullscreen", data-trigger="click", data-id=containerId, aria-label="Fullscreen")
 			RawIcon("fullscreen")

pages/episode/episode.pixy

@@ -2,11 +2,12 @@ component AnimeEpisode(anime *arn.Anime, episode *arn.AnimeEpisode, episodeIndex
 	h1
 		a(href=anime.Link())= anime.Title.ByUser(user)
 	
-	if anime.ID == "VhRKhKimR" && episode.Number == 10
+	if anime.ID == "GWyShKmiR" && episode.Number == 10
 		.widget-form.amv-page
 			.video-container(id="stream-test")
-				video.video.lazy.action(data-action="playVideo", data-trigger="click", data-media-id="stream-test")
-					source(data-src="https://arn.sfo2.cdn.digitaloceanspaces.com/videos/anime/VhRKhKimR/10.webm", data-type="video/webm")
+				video.video.lazy.action(data-action="togglePlayVideo", data-trigger="click", data-media-id="stream-test")
+					source(data-src="https://arn.sfo2.cdn.digitaloceanspaces.com/videos/anime/GWyShKmiR/10.webm", data-type="video/webm")
+					track(label="English", kind="subtitles", srclang="en", src="https://arn.sfo2.cdn.digitaloceanspaces.com/videos/anime/GWyShKmiR/10.en.vtt", default)
 				
 				VideoControls("stream-test", time.Duration(0))
 		

scripts/Actions/Video.ts

@@ -1,22 +1,25 @@
 import AnimeNotifier from "../AnimeNotifier"
 
-// Play video
-export function playVideo(arn: AnimeNotifier, video: HTMLVideoElement) {
+// Toggle play video
+export function togglePlayVideo(arn: AnimeNotifier, element: HTMLElement) {
+	let container = document.getElementById(element.dataset.mediaId)
+	let video = container.getElementsByTagName("video")[0]
+
 	video.volume = arn.audioPlayer.volume
 
 	if(video.readyState >= 2) {
-		togglePlayVideo(video)
+		togglePlayVideoElement(video)
 		return
 	}
 
 	video.addEventListener("canplay", () => {
-		togglePlayVideo(video)
+		togglePlayVideoElement(video)
 	})
 
 	video.load()
 }
 
-function togglePlayVideo(video: HTMLVideoElement) {
+function togglePlayVideoElement(video: HTMLVideoElement) {
 	if(video.paused) {
 		video.play()
 	} else {

scripts/AnimeNotifier.ts

@@ -901,6 +901,8 @@ export default class AnimeNotifier {
 
 				// Show and hide controls on mouse movement
 				let controls = video.parentElement.getElementsByClassName("video-controls")[0]
+				let playButton = video.parentElement.getElementsByClassName("video-control-play")[0] as HTMLElement
+				let pauseButton = video.parentElement.getElementsByClassName("video-control-pause")[0] as HTMLElement
 
 				let hideControls = () => {
 					controls.classList.add("fade-out")
@@ -950,6 +952,16 @@ export default class AnimeNotifier {
 					this.loading(false)
 				})
 
+				video.addEventListener("play", () => {
+					playButton.style.display = "none"
+					pauseButton.style.display = "block"
+				})
+
+				video.addEventListener("pause", () => {
+					playButton.style.display = "block"
+					pauseButton.style.display = "none"
+				})
+
 				progressClickable.addEventListener("click", (e: MouseEvent) => {
 					let rect = progressClickable.getBoundingClientRect()
 					let x = e.clientX

styles/video.scarlet

@@ -70,10 +70,19 @@ const video-progress-clickable-height-buffer = 0.4rem
 	line-height 1em
 	height auto
 	padding 0
-	margin-left 0.5rem
 
 	:hover
 		color white
 
+.video-control-fullscreen
+	margin-left 0.5rem
+
+.video-control-play,
+.video-control-pause
+	margin-right 0.5rem
+
+.video-control-pause
+	display none
+
 ::-webkit-media-controls
 	display none !important