From 881be77c4875db90fffe767683ca32323543c362 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sun, 11 Mar 2018 21:59:48 +0100
Subject: [PATCH] Added track display

---
 layout/sidebar/audioplayer.pixy    |  1 +
 layout/sidebar/audioplayer.scarlet | 16 ++++++++++++++++
 scripts/Actions/Audio.ts           | 13 ++++++++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/layout/sidebar/audioplayer.pixy b/layout/sidebar/audioplayer.pixy
index 6ed12167..c80e4916 100644
--- a/layout/sidebar/audioplayer.pixy
+++ b/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")
diff --git a/layout/sidebar/audioplayer.scarlet b/layout/sidebar/audioplayer.scarlet
index 9ecc0426..13053854 100644
--- a/layout/sidebar/audioplayer.scarlet
+++ b/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
diff --git a/scripts/Actions/Audio.ts b/scripts/Actions/Audio.ts
index 1d8c627e..fdd69b7f 100644
--- a/scripts/Actions/Audio.ts
+++ b/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()
 	}