diff --git a/mixins/SoundTrack.pixy b/mixins/SoundTrack.pixy index 68100fff..cfe44600 100644 --- a/mixins/SoundTrack.pixy +++ b/mixins/SoundTrack.pixy @@ -12,7 +12,10 @@ component SoundTrackContent(track *arn.SoundTrack, media *arn.ExternalMedia) a.sound-track-anime-link.ajax(href="/anime/" + track.MainAnime().ID) img.sound-track-anime-image.lazy(data-src=track.MainAnime().Image("medium"), data-webp="true", alt=track.MainAnime().Title.Canonical, title=track.MainAnime().Title.Canonical) - ExternalMedia(media) + if track.File != "" && media.Service == "Youtube" + img.soundtrack-image.action.lazy(data-action="playAudio", data-trigger="click", data-audio-src="https://notify.moe/audio/" + track.File, data-src="https://img.youtube.com/vi/" + media.ServiceID + "/maxresdefault.jpg", alt=track.Title) + else + ExternalMedia(media) component SoundTrackFooter(track *arn.SoundTrack) .sound-track-footer diff --git a/pages/soundtrack/soundtrack.pixy b/pages/soundtrack/soundtrack.pixy index 62c5f5c0..f1017f6f 100644 --- a/pages/soundtrack/soundtrack.pixy +++ b/pages/soundtrack/soundtrack.pixy @@ -16,7 +16,7 @@ component Track(track *arn.SoundTrack, user *arn.User) if user != nil && media.Service == "Youtube" && track.File != "" .buttons - button.action(data-action="playAudio", data-trigger="click", data-src="/audio/" + track.File) + button.action(data-action="playAudio", data-trigger="click", data-audio-src="/audio/" + track.File) Icon("play") span Play in background diff --git a/pages/soundtracks/soundtracks.scarlet b/pages/soundtracks/soundtracks.scarlet index 22f114db..a98d01cd 100644 --- a/pages/soundtracks/soundtracks.scarlet +++ b/pages/soundtracks/soundtracks.scarlet @@ -17,6 +17,11 @@ iframe width 100% +.soundtrack-image + object-fit cover + width 100% + height 200px + .sound-track-footer text-align center margin-bottom 1rem diff --git a/scripts/Actions/Audio.ts b/scripts/Actions/Audio.ts index d0973dc6..23f0536b 100644 --- a/scripts/Actions/Audio.ts +++ b/scripts/Actions/Audio.ts @@ -24,7 +24,7 @@ export function playAudio(arn: AnimeNotifier, button: HTMLButtonElement) { // Request let request = new XMLHttpRequest() - request.open("GET", button.dataset.src, true) + request.open("GET", button.dataset.audioSrc, true) request.responseType = "arraybuffer" request.onload = () => {