Redesign

pages/anime/anime.go

@@ -75,6 +75,10 @@ func Get(ctx *aero.Context) string {
 		return !track.IsDraft && len(track.Media) > 0 && arn.Contains(track.Tags, "anime:"+anime.ID)
 	})
 
+	sort.Slice(tracks, func(i, j int) bool {
+		return tracks[i].Title < tracks[j].Title
+	})
+
 	if err != nil {
 		return ctx.Error(http.StatusNotFound, "Error fetching soundtracks", err)
 	}

pages/anime/anime.scarlet

@@ -11,7 +11,7 @@
 	margin-top 1rem
 	flex-basis 300px
 
-> 1500px
+> 1400px
 	.anime
 		horizontal
 
@@ -44,6 +44,32 @@
 .anime-info-value
 	text-align right
 
+.anime-soundtracks
+	vertical
+	margin-top 1rem
+
+.anime-soundtrack
+	vertical
+	width 100%
+	margin-bottom 0.5rem
+
+> 500px
+	.anime-soundtracks
+		horizontal-wrap
+		justify-content flex-start
+		margin-top 0
+
+	.anime-soundtrack
+		max-width 200px
+		margin calc(content-padding / 2)
+
+// .anime-soundtracks
+// 	horizontal-wrap
+
+// .anime-soundtrack
+// 	flex-basis 400px
+// 	padding-bottom video-padding
+
 .anime-section
 	margin-top 1rem
 

pages/anime/characters.pixy

@@ -1,7 +1,7 @@
 component AnimeCharacters(anime *arn.Anime)
 	//- AnimeTabs(anime)
 
-	if len(anime.Characters().Items) > 0
+	if anime.Characters() != nil && len(anime.Characters().Items) > 0
 		.anime-section
 			h3.anime-section-name Characters
 			.characters

pages/anime/tracks.pixy

@@ -6,4 +6,7 @@ component AnimeTracks(anime *arn.Anime, tracks []*arn.SoundTrack)
 			h3.anime-section-name Tracks
 			.anime-soundtracks
 				each track in tracks
-					ExternalMedia(track.Media[0])
+					.anime-soundtrack.mountable(data-mountable-type="track")
+						.video-container
+							iframe.video.lazy(data-src=track.Media[0].EmbedLink(), allowfullscreen="allowfullscreen")
+						a.sound-track-footer.ajax(href=track.Link())= track.Title