Group up existing components into elements

elements/SoundTrack/SoundTrack.pixy

@@ -0,0 +1,39 @@
+component SoundTrack(track *arn.SoundTrack, user *arn.User)
+	.soundtrack.mountable(id=track.ID)
+		SoundTrackContent(track, user)
+		SoundTrackFooter(track, user)
+
+component SoundTrackContent(track *arn.SoundTrack, user *arn.User)
+	.soundtrack-content
+		if track.MainAnime() != nil
+			a.soundtrack-anime-link(href="/anime/" + track.MainAnime().ID, title=track.MainAnime().Title.ByUser(user))
+				img.soundtrack-anime-image.lazy(data-src=track.MainAnime().ImageLink("medium"), data-webp="true", data-color=track.MainAnime().AverageColor(), alt=track.MainAnime().Title.Canonical)
+
+		SoundTrackMedia(track)
+
+component SoundTrackMedia(track *arn.SoundTrack)
+	if track.File != "" && track.HasMediaByService("Youtube")
+		.soundtrack-media
+			.media-play-area.action(data-action="toggleAudio", data-trigger="click", data-audio-src="https://notify.moe/audio/" + track.File, data-media-id=track.ID)
+				img.media-image.lazy(data-src="https://img.youtube.com/vi/" + track.MediaByService("Youtube")[0].ServiceID + "/0.jpg", alt=track.Title)
+				
+				button.media-play-button(aria-label="Play soundtrack")
+					RawIcon("play")
+				
+				.media-visualizer
+					.visualizer-box.visualizer-box-1
+					.visualizer-box.visualizer-box-2
+					.visualizer-box.visualizer-box-3
+	else if len(track.Media) > 0
+		ExternalMedia(track.Media[0])
+
+component SoundTrackFooter(track *arn.SoundTrack, user *arn.User)
+	footer.soundtrack-footer
+		if track.Title.ByUser(user) == ""
+			a(href=track.Link() + "/edit") untitled
+		else
+			a(href=track.Link())= track.Title.ByUser(user)
+		span  posted 
+		span.utc-date.no-tip(data-date=track.Created)
+		span  by 
+		a(href=track.Creator().Link())= track.Creator().Nick + " "