Improved AMV UI

pages/amv/amv.pixy

@@ -1,10 +1,30 @@
 component AMVPage(amv *arn.AMV, user *arn.User)
 	AMVTabs(amv, user)
 	
-	if amv.Title.String() == ""
-		h1 untitled
-	else
-		h1= amv.Title.ByUser(user)
+	.amv-page
+		if amv.Title.String() == ""
+			h1.mountable untitled
+		else
+			h1.mountable= amv.Title.ByUser(user)
+		
+		if amv.File != ""
+			AMV(amv, user)
+		
+		if amv.MainAnimeID != "" || len(amv.ExtraAnimeIDs) > 0
+			h3.mountable Anime
+
+			if amv.MainAnimeID != ""
+				.amv-main-anime.mountable
+					AnimeGrid([]*arn.Anime{amv.MainAnime()}, user)
+			
+			if len(amv.ExtraAnimeIDs) > 0
+				.amv-extra-anime.mountable
+					AnimeGridSmall(amv.ExtraAnime(), user)
+
+component AnimeGridSmall(animes []*arn.Anime, user *arn.User)
+	each anime in animes
+		a.mountable(href=anime.Link(), title=anime.Title.ByUser(user))
+			img.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
 
 component AMVTabs(amv *arn.AMV, user *arn.User)
 	.tabs

pages/amv/amv.scarlet

@@ -0,0 +1,39 @@
+.amvs
+	vertical
+	margin-top 1rem
+
+.amv
+	width 100%
+	margin calc(content-padding / 2)
+
+	.video-container
+		box-shadow shadow-medium
+
+.amv-footer
+	media-footer
+
+.amv-page
+	vertical
+	align-items center
+
+.amv-main-anime
+	margin-bottom 1rem
+
+.amv-extra-anime
+	horizontal-wrap
+
+	a
+		display block
+		margin 0.4rem
+
+	img
+		border-radius ui-element-border-radius
+
+> 500px
+	.amvs
+		horizontal-wrap
+		justify-content flex-start
+		margin-top 0
+
+	.amv
+		max-width 380px