Started using custom video controls

scripts/Actions/Audio.ts

@@ -2,7 +2,7 @@ import AnimeNotifier from "../AnimeNotifier"
 
 // Play audio
 export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
-	arn.audioPlayer.play(element.dataset.soundtrackId, element.dataset.audioSrc)
+	arn.audioPlayer.play(element.dataset.mediaId, element.dataset.audioSrc)
 }
 
 // Pause audio
@@ -45,7 +45,7 @@ export function playPauseAudio(arn: AnimeNotifier) {
 export function toggleAudio(arn: AnimeNotifier, element: HTMLElement) {
 	// If we're clicking on the same track again, stop playing.
 	// Otherwise, start the track we clicked on.
-	if(arn.currentSoundTrackId && element.dataset.soundtrackId === arn.currentSoundTrackId) {
+	if(arn.currentMediaId && element.dataset.mediaId === arn.currentMediaId) {
 		stopAudio(arn)
 	} else {
 		playAudio(arn, element)

scripts/Actions/User.ts

@@ -1,5 +1,5 @@
 import AnimeNotifier from "../AnimeNotifier"
-import Diff from "scripts/Diff";
+import Diff from "scripts/Diff"
 
 // Follow user
 export async function followUser(arn: AnimeNotifier, element: HTMLElement) {

scripts/Actions/Video.ts

@@ -0,0 +1,37 @@
+import AnimeNotifier from "../AnimeNotifier"
+
+// Play video
+export function playVideo(arn: AnimeNotifier, video: HTMLVideoElement) {
+	video.volume = arn.audioPlayer.volume
+
+	if(video.readyState >= 2) {
+		togglePlayVideo(video)
+		return
+	}
+
+	video.load()
+
+	video.addEventListener("loadeddata", () => {
+		togglePlayVideo(video)
+	})
+}
+
+function togglePlayVideo(video: HTMLVideoElement) {
+	if(video.paused) {
+		video.play()
+	} else {
+		video.pause()
+	}
+}
+
+// Toggle fullscreen
+export function toggleFullscreen(arn: AnimeNotifier, button: HTMLElement) {
+	let elementId = button.dataset.id
+	let element = document.getElementById(elementId)
+
+	if(document.fullscreen) {
+		document.exitFullscreen()
+	} else {
+		element.requestFullscreen()
+	}
+}

scripts/Actions/index.ts

@@ -19,4 +19,5 @@ export * from "./Shop"
 export * from "./SideBar"
 export * from "./StatusMessage"
 export * from "./Theme"
-export * from "./Upload"
+export * from "./Upload"
+export * from "./Video"

scripts/AnimeNotifier.ts

@@ -34,7 +34,7 @@ export default class AnimeNotifier {
 	isLoading: boolean
 	diffCompletedForCurrentPath: boolean
 	lastReloadContentPath: string
-	currentSoundTrackId: string
+	currentMediaId: string
 	serverEvents: ServerEvents
 
 	constructor(app: Application) {
@@ -160,7 +160,7 @@ export default class AnimeNotifier {
 			Promise.resolve().then(() => this.displayLocalDates()),
 			Promise.resolve().then(() => this.setSelectBoxValue()),
 			Promise.resolve().then(() => this.textAreaFocus()),
-			Promise.resolve().then(() => this.markPlayingSoundTrack()),
+			Promise.resolve().then(() => this.markPlayingMedia()),
 			Promise.resolve().then(() => this.assignActions()),
 			Promise.resolve().then(() => this.updatePushUI()),
 			Promise.resolve().then(() => this.dragAndDrop()),
@@ -639,9 +639,9 @@ export default class AnimeNotifier {
 		}
 	}
 
-	markPlayingSoundTrack() {
-		for(let element of findAll("soundtrack-play-area")) {
-			if(element.dataset.soundtrackId === this.currentSoundTrackId) {
+	markPlayingMedia() {
+		for(let element of findAll("media-play-area")) {
+			if(element.dataset.mediaId === this.currentMediaId) {
 				element.classList.add("playing")
 			}
 		}
@@ -893,7 +893,7 @@ export default class AnimeNotifier {
 	lazyLoadVideo(video: HTMLVideoElement) {
 		// Once the video becomes visible, load it
 		video["became visible"] = () => {
-			video.pause()
+			// video.pause()
 
 			// Prevent context menu
 			video.addEventListener("contextmenu", e => e.preventDefault())
@@ -907,11 +907,16 @@ export default class AnimeNotifier {
 					element.src = element.dataset.src
 					modified = true
 				}
+
+				if(element.type !== element.dataset.type) {
+					element.type = element.dataset.type
+					modified = true
+				}
 			}
 
 			if(modified) {
 				Diff.mutations.queue(() => {
-					video.load()
+					// video.load()
 					video.classList.add("element-found")
 				})
 			}

scripts/AudioPlayer.ts

@@ -63,8 +63,8 @@ export default class AudioPlayer {
 		// Stop current track
 		this.stop()
 
-		this.arn.currentSoundTrackId = trackId
-		this.arn.markPlayingSoundTrack()
+		this.arn.currentMediaId = trackId
+		this.arn.markPlayingMedia()
 		this.arn.loading(true)
 
 		// Mark as loading
@@ -187,7 +187,7 @@ export default class AudioPlayer {
 
 	// Stop
 	stop() {
-		this.arn.currentSoundTrackId = undefined
+		this.arn.currentMediaId = undefined
 
 		// Remove CSS class "playing"
 		let playingElements = document.getElementsByClassName("playing")
@@ -242,6 +242,8 @@ export default class AudioPlayer {
 
 	// Set volume
 	setVolume(volume: number) {
+		this.volume = volume
+
 		if(!this.gainNode) {
 			return
 		}