Improved audio player

pages/soundtracks/soundtracks.scarlet

@@ -22,7 +22,7 @@
 	width 100%
 	height 200px
 	filter brightness(100%)
-	transition filter 250ms ease
+	transition filter transition-speed ease
 
 .soundtrack-play-button
 	position absolute
@@ -36,6 +36,7 @@
 	color rgba(0, 0, 0, 0.15)
 	background rgba(255, 255, 255, 0.9)
 	pointer-events none
+	box-shadow outline-shadow-medium
 
 	.icon-play
 		transform translateX(27%)
@@ -102,13 +103,16 @@ animation change-color
 			opacity 1
 
 		.soundtrack-image
-			filter brightness(0)
+			filter brightness(0) !important
 
 	:hover
 		.soundtrack-play-button
 			color button-hover-color
 			background button-hover-background
 
+		.soundtrack-image
+			filter brightness(50%)
+
 .soundtrack-footer
 	text-align center
 	margin-bottom 1rem

scripts/Actions/Audio.ts

@@ -2,7 +2,7 @@ import { AnimeNotifier } from "../AnimeNotifier"
 
 var audioContext: AudioContext
 var audioNode: AudioBufferSourceNode
-var playID = 0
+var playId = 0
 var audioPlayer = document.getElementById("audio-player")
 var audioPlayerPlay = document.getElementById("audio-player-play")
 var audioPlayerPause = document.getElementById("audio-player-pause")
@@ -13,7 +13,8 @@ export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
 		audioContext = new AudioContext()
 	}
 
-	playID++
+	playId++
+	let currentPlayId = playId
 
 	// Stop current track
 	stopAudio(arn)
@@ -27,18 +28,26 @@ export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
 	request.responseType = "arraybuffer"
 
 	request.onload = () => {
+		if(currentPlayId !== playId) {
+			return
+		}
+
 		audioContext.decodeAudioData(request.response, buffer => {
+			if(currentPlayId !== playId) {
+				return
+			}
+
 			audioNode = audioContext.createBufferSource()
 			audioNode.buffer = buffer
 			audioNode.connect(audioContext.destination)
 			audioNode.start(0)
 
-			let currentPlayCount = playID
-
 			audioNode.onended = (event: MediaStreamErrorEvent) => {
-				if(currentPlayCount === playID) {
-					stopAudio(arn)
+				if(currentPlayId !== playId) {
+					return
 				}
+
+				stopAudio(arn)
 			}
 		}, console.error)
 	}
@@ -53,14 +62,6 @@ export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
 
 // Stop audio
 export function stopAudio(arn: AnimeNotifier) {
-	if(!audioNode) {
-		return
-	}
-
-	audioNode.stop()
-	audioNode.disconnect()
-	audioNode = null
-
 	arn.currentSoundTrackId = undefined
 
 	// Remove CSS class "playing"
@@ -72,6 +73,14 @@ export function stopAudio(arn: AnimeNotifier) {
 
 	// Fade out sidebar player
 	audioPlayer.classList.add("fade-out")
+
+	if(!audioNode) {
+		return
+	}
+
+	audioNode.stop()
+	audioNode.disconnect()
+	audioNode = null
 }
 
 // Toggle audio
@@ -85,6 +94,11 @@ export function toggleAudio(arn: AnimeNotifier, element: HTMLElement) {
 	}
 }
 
+// Set volume
+export function setVolume(arn: AnimeNotifier, element: HTMLElement) {
+
+}
+
 // Pause audio
 export function pauseAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
 	if(!audioNode) {