Use new player on anime pages

pages/anime/anime.scarlet

@@ -59,8 +59,6 @@
 
 .anime-info-table
 	margin 0
-	// width 100%
-	// max-width 600px
 
 .anime-info-value
 	text-align right
@@ -69,15 +67,18 @@
 	vertical
 	margin-top 1rem
 
-.anime-soundtrack
-	vertical
-	// flex-basis 100%
-	flex-grow 1
-	margin-bottom 0.5rem
-	min-width 200px
+	.soundtrack
+		flex-basis auto
+		// 	vertical
+		// 	flex-grow 1
+		// 	margin-bottom 0.5rem
+		// 	min-width 200px
 
-	.video-container
-		box-shadow shadow-light
+	.soundtrack-anime-image
+		display none
+
+// 	.video-container
+// 		box-shadow shadow-light
 
 > 500px
 	.anime-soundtracks
@@ -85,16 +86,17 @@
 		justify-content flex-start
 		margin-top 0
 
-	.anime-soundtrack
-		max-width 200px
-		margin calc(content-padding / 2)
+		.soundtrack
+			max-width 200px
 
-// .anime-soundtracks
-// 	horizontal-wrap
+		.soundtrack-content
+			min-height 112px
+			height 112px
 
-// .anime-soundtrack
-// 	flex-basis 400px
-// 	padding-bottom video-padding
+		.soundtrack-play-button
+			width 48px
+			height 48px
+			font-size 1rem
 
 .anime-section
 	margin-top 1rem

pages/anime/tracks.pixy

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

pages/soundtracks/soundtracks.scarlet

@@ -13,6 +13,7 @@
 	border-radius 3px
 	overflow hidden
 	box-shadow shadow-light
+	min-height 200px
 
 	iframe
 		width 100%

scripts/Actions/Audio.ts

@@ -123,7 +123,7 @@ export function stopAudio(arn: AnimeNotifier) {
 	}
 
 	// Fade out sidebar player
-	audioPlayer.classList.add("fade-out")
+	// audioPlayer.classList.add("fade-out")
 
 	// Remove title
 	trackLink.href = ""