feat: spotify link for each playlist

Signed-off-by: Matt Gleich <git@mattglei.ch>

Author: gleich

src/lib/icons/spotify-icon.svelte

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"
+		fill="currentColor"
+	/></svg
+>

src/lib/lcp/applemusic.server.ts

@@ -21,4 +21,5 @@ export interface AppleMusicPlaylist {
 	tracks: AppleMusicSong[];
 	last_modified: Date;
 	url: string;
+	spotify_url: string;
 }

src/lib/view-button.svelte

@@ -6,13 +6,15 @@
 		of,
 		more,
 		icon: Icon,
-		iconPaddingBottom = '3px'
+		iconPaddingBottom = '3px',
+		iconColor = 'inherit'
 	}: {
 		on?: string;
 		more?: boolean;
 		of?: string;
 		icon?: Component;
 		iconPaddingBottom?: string;
+		iconColor?: string;
 	} = $props();
 </script>
 
@@ -28,7 +30,11 @@
 	{/if}
 
 	{#if Icon}
-		<div class="icon" style:--icon-padding-bottom={iconPaddingBottom}>
+		<div
+			class="icon"
+			style:--icon-padding-bottom={iconPaddingBottom}
+			style:--icon-color={iconColor}
+		>
 			<Icon />
 		</div>
 	{/if}
@@ -50,6 +56,7 @@
 		margin-left: 7px;
 		margin-right: 6px;
 		margin-bottom: var(--icon-padding-bottom);
+		color: var(--icon-color);
 	}
 
 	@media (max-width: 500px) {

src/routes/music/playlist/[playlistID]/+page.svelte

@@ -6,6 +6,7 @@
 	import ViewButton from '$lib/view-button.svelte';
 	import { DynamicHead, Error } from '@gleich/ui';
 	import type { PlaylistData } from './+page.server';
+	import SpotifyIcon from '$lib/icons/spotify-icon.svelte';
 
 	const { data }: { data: PlaylistData } = $props();
 </script>
@@ -36,9 +37,19 @@
 				</p>
 			</div>
 		</div>
-		<a class="view-on-apple-music" href={data.playlist.url} target="_blank">
-			<ViewButton on="Apple Music" icon={AppleMusicIcon} iconPaddingBottom="1.5px" />
-		</a>
+		<div class="view-on-buttons">
+			<a class="view-on-button" href={data.playlist.spotify_url} target="_blank">
+				<ViewButton on="Spotify" icon={SpotifyIcon} iconPaddingBottom="1px" iconColor="#24db68" />
+			</a>
+			<a class="view-on-button" href={data.playlist.url} target="_blank">
+				<ViewButton
+					on="Apple Music"
+					icon={AppleMusicIcon}
+					iconPaddingBottom="0.5px"
+					iconColor="#fb455d"
+				/>
+			</a>
+		</div>
 	</div>
 	<div class="songs">
 		{#each data.playlist.tracks as song (song)}
@@ -83,8 +94,15 @@
 		width: 192px;
 	}
 
-	.view-on-apple-music {
-		margin-top: 20px;
+	.view-on-buttons {
+		display: flex;
+		gap: 10px;
+		margin-top: 30px;
+		margin-bottom: 10px;
+	}
+
+	.view-on-button {
+		flex: 1;
 		text-decoration: inherit;
 	}
 
@@ -102,5 +120,10 @@
 		.stats {
 			align-items: flex-start;
 		}
+
+		.view-on-buttons {
+			flex-direction: column;
+			gap: 10px;
+		}
 	}
 </style>