From 90be415d9ae8d3759a64f5f295455af640d5b9bf Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sun, 11 Mar 2018 20:22:33 +0100 Subject: [PATCH] Improved soundtrack components --- layout/sidebar/audioplayer.pixy | 2 +- mixins/SoundTrack.pixy | 36 ++++++++++++++++----------------- pages/index.go | 2 ++ pages/soundtrack/random.go | 29 ++++++++++++++++++++++++++ scripts/Actions/Audio.ts | 31 ++++++++++++++++++++++------ 5 files changed, 75 insertions(+), 25 deletions(-) create mode 100644 pages/soundtrack/random.go diff --git a/layout/sidebar/audioplayer.pixy b/layout/sidebar/audioplayer.pixy index 790141bb..3e72c29c 100644 --- a/layout/sidebar/audioplayer.pixy +++ b/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") diff --git a/mixins/SoundTrack.pixy b/mixins/SoundTrack.pixy index 4e0c7dbe..9c3dbf59 100644 --- a/mixins/SoundTrack.pixy +++ b/mixins/SoundTrack.pixy @@ -1,30 +1,30 @@ 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" - .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) - button.soundtrack-play-button - RawIcon("play") - - .soundtrack-visualizer - .visualizer-box.visualizer-box-1 - .visualizer-box.visualizer-box-2 - .visualizer-box.visualizer-box-3 - else - ExternalMedia(media) + 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/" + track.MediaByService("Youtube")[0].ServiceID + "/maxresdefault.jpg", alt=track.Title) + button.soundtrack-play-button + RawIcon("play") + + .soundtrack-visualizer + .visualizer-box.visualizer-box-1 + .visualizer-box.visualizer-box-2 + .visualizer-box.visualizer-box-3 + else + ExternalMedia(track.Media[0]) component SoundTrackFooter(track *arn.SoundTrack) .soundtrack-footer diff --git a/pages/index.go b/pages/index.go index 25042c9b..46d2b3f2 100644 --- a/pages/index.go +++ b/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) diff --git a/pages/soundtrack/random.go b/pages/soundtrack/random.go new file mode 100644 index 00000000..79a82410 --- /dev/null +++ b/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) +} diff --git a/scripts/Actions/Audio.ts b/scripts/Actions/Audio.ts index b64c3ae5..3ee6537c 100644 --- a/scripts/Actions/Audio.ts +++ b/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 - element.classList.add("playing") + arn.currentSoundTrackId = trackId + 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 }