Added play and pause button

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