Added track display

layout/sidebar/audioplayer.pixy

@@ -1,5 +1,6 @@
 component AudioPlayer
 	#audio-player
+		a#audio-player-track-title.ajax(href="")
 		#audio-player-controls
 			button#audio-player-prev.audio-player-side-button.action(data-action="playPreviousTrack", data-trigger="click")
 				RawIcon("step-backward")

layout/sidebar/audioplayer.scarlet

@@ -5,6 +5,22 @@
 	margin 0.8rem 0
 	min-height 90px
 
+#audio-player-track-title
+	color text-color
+	font-size 0.7rem
+	opacity 0.8
+	text-align center
+	padding 0.8rem
+	animation title-flow 5s ease infinite alternate
+
+animation title-flow
+	0%
+		transform rotateX(0)
+	90%
+		transform rotateX(0)
+	100%
+		transform rotateX(90deg)
+
 #audio-player-controls
 	horizontal
 	justify-content center

scripts/Actions/Audio.ts

@@ -8,6 +8,7 @@ var playId = 0
 var audioPlayer = document.getElementById("audio-player")
 var audioPlayerPlay = document.getElementById("audio-player-play")
 var audioPlayerPause = document.getElementById("audio-player-pause")
+var trackLink = document.getElementById("audio-player-track-title") as HTMLLinkElement
 
 // Play audio
 export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
@@ -44,7 +45,7 @@ function playAudioFile(arn: AnimeNotifier, trackId: string, trackUrl: string) {
 			return
 		}
 
-		audioContext.decodeAudioData(request.response, buffer => {
+		audioContext.decodeAudioData(request.response, async buffer => {
 			if(currentPlayId !== playId) {
 				return
 			}
@@ -63,6 +64,12 @@ function playAudioFile(arn: AnimeNotifier, trackId: string, trackUrl: string) {
 				playNextTrack(arn)
 				// stopAudio(arn)
 			}
+
+			// Set track title
+			let trackInfoResponse = await fetch("/api/soundtrack/" + trackId)
+			let track = await trackInfoResponse.json()
+			trackLink.href = "/soundtrack/" + track.id
+			trackLink.innerText = track.title
 		}, console.error)
 	}
 
@@ -92,6 +99,10 @@ export function stopAudio(arn: AnimeNotifier) {
 	// Fade out sidebar player
 	audioPlayer.classList.add("fade-out")
 
+	// Remove title
+	trackLink.href = ""
+	trackLink.innerText = ""
+
 	if(gainNode) {
 		gainNode.disconnect()
 	}