Improved soundtrack components

layout/sidebar/audioplayer.pixy

@@ -1,5 +1,5 @@
 component AudioPlayer
-	#audio-player.fade-out
+	#audio-player
 		.audio-player-play-pause-container
 			button#audio-player-play.action(data-action="resumeAudio", data-trigger="click")
 				RawIcon("play")

mixins/SoundTrack.pixy

@@ -1,21 +1,21 @@
 component SoundTrack(track *arn.SoundTrack)
-	SoundTrackMedia(track, track.Media[0])
-
-component SoundTrackMedia(track *arn.SoundTrack, media *arn.ExternalMedia)
 	.soundtrack.mountable(id=track.ID)
-		SoundTrackContent(track, media)
+		SoundTrackContent(track)
 		SoundTrackFooter(track)
 
-component SoundTrackContent(track *arn.SoundTrack, media *arn.ExternalMedia)
+component SoundTrackContent(track *arn.SoundTrack)
 	.soundtrack-content
 		if track.MainAnime() != nil
 			a.soundtrack-anime-link.ajax(href="/anime/" + track.MainAnime().ID)
 				img.soundtrack-anime-image.lazy(data-src=track.MainAnime().Image("medium"), data-webp="true", alt=track.MainAnime().Title.Canonical, title=track.MainAnime().Title.Canonical)
 
-		if track.File != "" && media.Service == "Youtube"
+		SoundTrackMedia(track)
+
+component SoundTrackMedia(track *arn.SoundTrack)
+	if track.File != ""
 		.soundtrack-media
 			.soundtrack-play-area.action(data-action="toggleAudio", data-trigger="click", data-audio-src="https://notify.moe/audio/" + track.File, data-soundtrack-id=track.ID)
-					img.soundtrack-image.lazy(data-src="https://img.youtube.com/vi/" + media.ServiceID + "/maxresdefault.jpg", alt=track.Title)
+				img.soundtrack-image.lazy(data-src="https://img.youtube.com/vi/" + track.MediaByService("Youtube")[0].ServiceID + "/maxresdefault.jpg", alt=track.Title)
 				button.soundtrack-play-button
 					RawIcon("play")
 				
@@ -24,7 +24,7 @@ component SoundTrackContent(track *arn.SoundTrack, media *arn.ExternalMedia)
 					.visualizer-box.visualizer-box-2
 					.visualizer-box.visualizer-box-3
 	else
-			ExternalMedia(media)
+		ExternalMedia(track.Media[0])
 
 component SoundTrackFooter(track *arn.SoundTrack)
 	.soundtrack-footer

pages/index.go

@@ -246,6 +246,8 @@ func Configure(app *aero.Application) {
 	app.Get("/api/test/notification", notifications.Test)
 	app.Get("/api/count/notifications/unseen", notifications.CountUnseen)
 	app.Get("/api/mark/notifications/seen", notifications.MarkNotificationsAsSeen)
+	app.Get("/api/random/soundtrack", soundtrack.Random)
+	app.Get("/api/next/soundtrack", soundtrack.Next)
 
 	// Legal stuff
 	l.Page("/terms", terms.Get)

pages/soundtrack/random.go

@@ -0,0 +1,29 @@
+package soundtrack
+
+import (
+	"math/rand"
+
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/arn"
+)
+
+// Random returns a random soundtrack.
+func Random(ctx *aero.Context) string {
+	tracks := arn.AllSoundTracks()
+	index := rand.Intn(len(tracks))
+	track := tracks[index]
+
+	return ctx.JSON(track)
+}
+
+// Next returns the next soundtrack for the audio player.
+func Next(ctx *aero.Context) string {
+	tracks := arn.FilterSoundTracks(func(track *arn.SoundTrack) bool {
+		return track.File != ""
+	})
+
+	index := rand.Intn(len(tracks))
+	track := tracks[index]
+
+	return ctx.JSON(track)
+}

scripts/Actions/Audio.ts

@@ -9,8 +9,13 @@ var audioPlayer = document.getElementById("audio-player")
 var audioPlayerPlay = document.getElementById("audio-player-play")
 var audioPlayerPause = document.getElementById("audio-player-pause")
 
-// Play audio file
+// Play audio
 export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
+	playAudioFile(arn, element.dataset.soundtrackId, element.dataset.audioSrc)
+}
+
+// Play audio file
+function playAudioFile(arn: AnimeNotifier, trackId: string, trackUrl: string) {
 	if(!audioContext) {
 		audioContext = new AudioContext()
 		gainNode = audioContext.createGain()
@@ -23,12 +28,12 @@ export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
 	// Stop current track
 	stopAudio(arn)
 
-	arn.currentSoundTrackId = element.dataset.soundtrackId
+	arn.currentSoundTrackId = trackId
-	element.classList.add("playing")
+	arn.markPlayingSoundTrack()
 
 	// Request
 	let request = new XMLHttpRequest()
-	request.open("GET", element.dataset.audioSrc, true)
+	request.open("GET", trackUrl, true)
 	request.responseType = "arraybuffer"
 
 	request.onload = () => {
@@ -52,7 +57,8 @@ export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
 					return
 				}
 
-				stopAudio(arn)
+				playNextTrack(arn)
+				// stopAudio(arn)
 			}
 		}, console.error)
 	}
@@ -101,6 +107,17 @@ export function toggleAudio(arn: AnimeNotifier, element: HTMLElement) {
 	}
 }
 
+// Play next track
+export async function playNextTrack(arn: AnimeNotifier) {
+	// Get random track
+	let response = await fetch("/api/next/soundtrack")
+	let track = await response.json()
+
+	playAudioFile(arn, track.id, "https://notify.moe/audio/" + track.file)
+
+	return track
+}
+
 // Set volume
 export function setVolume(arn: AnimeNotifier, element: HTMLInputElement) {
 	volume = parseFloat(element.value) / 100.0
@@ -123,8 +140,10 @@ export function pauseAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
 }
 
 // Resume audio
-export function resumeAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
+export async function resumeAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
 	if(!audioNode) {
+		let track = await playNextTrack(arn)
+		arn.statusMessage.showInfo("Now playing: " + track.title)
 		return
 	}