Started working on custom track player

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

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
 

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

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 = () => {