Heavily improved audio player

scripts/Actions/Audio.ts

@@ -8,23 +8,22 @@ var audioPlayerPlay = document.getElementById("audio-player-play")
 var audioPlayerPause = document.getElementById("audio-player-pause")
 
 // Play audio file
-export function playAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
+export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
 	if(!audioContext) {
 		audioContext = new AudioContext()
 	}
 
 	playID++
 
-	// Stop existing audioNode
-	if(audioNode) {
-		audioNode.stop()
-		audioNode.disconnect()
-		audioNode = null
-	}
+	// Stop current track
+	stopAudio(arn)
+
+	arn.currentSoundTrackId = element.dataset.soundtrackId
+	element.classList.add("playing")
 
 	// Request
 	let request = new XMLHttpRequest()
-	request.open("GET", button.dataset.audioSrc, true)
+	request.open("GET", element.dataset.audioSrc, true)
 	request.responseType = "arraybuffer"
 
 	request.onload = () => {
@@ -38,8 +37,7 @@ export function playAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
 
 			audioNode.onended = (event: MediaStreamErrorEvent) => {
 				if(currentPlayCount === playID) {
-					audioPlayer.classList.add("fade-out")
-					audioNode.disconnect()
+					stopAudio(arn)
 				}
 			}
 		}, console.error)
@@ -53,6 +51,38 @@ export function playAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
 	audioPlayerPause.classList.remove("fade-out")
 }
 
+// Stop audio
+export function stopAudio(arn: AnimeNotifier) {
+	if(!audioNode) {
+		return
+	}
+
+	audioNode.stop()
+	audioNode.disconnect()
+	audioNode = null
+
+	arn.currentSoundTrackId = undefined
+
+	// Remove CSS class "playing"
+	let playingElements = document.getElementsByClassName("playing")
+
+	for(let playing of playingElements) {
+		playing.classList.remove("playing")
+	}
+
+	// Fade out sidebar player
+	audioPlayer.classList.add("fade-out")
+}
+
+// Toggle audio
+export function toggleAudio(arn: AnimeNotifier, element: HTMLElement) {
+	if(!arn.currentSoundTrackId) {
+		playAudio(arn, element)
+	} else {
+		stopAudio(arn)
+	}
+}
+
 // Pause audio
 export function pauseAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
 	if(!audioNode) {

scripts/AnimeNotifier.ts

@@ -32,6 +32,7 @@ export class AnimeNotifier {
 	mainPageLoaded: boolean
 	isLoading: boolean
 	lastReloadContentPath: string
+	currentSoundTrackId: string
 
 	elementFound: MutationQueue
 	elementNotFound: MutationQueue
@@ -158,6 +159,7 @@ export class AnimeNotifier {
 			Promise.resolve().then(() => this.lazyLoad()),
 			Promise.resolve().then(() => this.displayLocalDates()),
 			Promise.resolve().then(() => this.setSelectBoxValue()),
+			Promise.resolve().then(() => this.markPlayingSoundTrack()),
 			Promise.resolve().then(() => this.assignActions()),
 			Promise.resolve().then(() => this.updatePushUI()),
 			Promise.resolve().then(() => this.dragAndDrop()),
@@ -357,6 +359,14 @@ export class AnimeNotifier {
 		}
 	}
 
+	markPlayingSoundTrack() {
+		for(let element of findAll("soundtrack-play-area")) {
+			if(element.dataset.soundtrackId === this.currentSoundTrackId) {
+				element.classList.add("playing")
+			}
+		}
+	}
+
 	setSelectBoxValue() {
 		for(let element of document.getElementsByTagName("select")) {
 			element.value = element.getAttribute("value")