Merge pull request #125 from flo-bit/apple-music-playlist

Apple music playlist

src/lib/cards/AppleMusicCard/AppleMusicCard.svelte

···
+<script lang="ts">
+	import type { ContentComponentProps } from '../types';
+
+	let { item, isEditing }: ContentComponentProps = $props();
+</script>
+
+{#if item.cardData?.appleMusicType && item.cardData?.appleMusicId && item.cardData?.appleMusicStorefront}
+	<div class="absolute inset-0 p-2">
+		<iframe
+			class={['h-full w-full rounded-2xl', isEditing && 'pointer-events-none']}
+			src="https://embed.music.apple.com/{item.cardData.appleMusicStorefront}/{item.cardData
+				.appleMusicType}/{item.cardData.appleMusicId}"
+			sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
+			loading="lazy"
+			title="Apple Music {item.cardData.appleMusicType}"
+		></iframe>
+	</div>
+{:else}
+	<div class="flex h-full items-center justify-center p-4 text-center opacity-50">
+		Missing Apple Music data
+	</div>
+{/if}

src/lib/cards/AppleMusicCard/CreateAppleMusicCardModal.svelte

···
+<script lang="ts">
+	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let errorMessage = $state('');
+
+	function checkUrl() {
+		errorMessage = '';
+
+		const pattern = /music\.apple\.com\/([a-z]{2})\/(album|playlist)\/[^/]+\/([a-zA-Z0-9.]+)/;
+		const match = item.cardData.href?.match(pattern);
+
+		if (!match) {
+			errorMessage = 'Please enter a valid Apple Music album or playlist URL';
+			return false;
+		}
+
+		item.cardData.appleMusicStorefront = match[1];
+		item.cardData.appleMusicType = match[2];
+		item.cardData.appleMusicId = match[3];
+
+		return true;
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<Subheading>Enter an Apple Music album or playlist URL</Subheading>
+	<Input
+		bind:value={item.cardData.href}
+		placeholder="https://music.apple.com/us/album/..."
+		onkeydown={(e) => {
+			if (e.key === 'Enter' && checkUrl()) oncreate();
+		}}
+	/>
+
+	{#if errorMessage}
+		<Alert type="error" title="Invalid URL"><span>{errorMessage}</span></Alert>
+	{/if}
+
+	<div class="mt-4 flex justify-end gap-2">
+		<Button onclick={oncancel} variant="ghost">Cancel</Button>
+		<Button
+			onclick={() => {
+				if (checkUrl()) oncreate();
+			}}
+		>
+			Create
+		</Button>
+	</div>
+</Modal>

src/lib/cards/AppleMusicCard/index.ts

···
+import type { CardDefinition } from '../types';
+import CreateAppleMusicCardModal from './CreateAppleMusicCardModal.svelte';
+import AppleMusicCard from './AppleMusicCard.svelte';
+
+const cardType = 'apple-music-embed';
+
+export const AppleMusicCardDefinition = {
+	type: cardType,
+	contentComponent: AppleMusicCard,
+	creationModalComponent: CreateAppleMusicCardModal,
+	createNew: (item) => {
+		item.cardType = cardType;
+		item.cardData = {};
+		item.w = 4;
+		item.mobileW = 8;
+		item.h = 5;
+		item.mobileH = 10;
+	},
+
+	onUrlHandler: (url, item) => {
+		const match = matchAppleMusicUrl(url);
+		if (!match) return null;
+
+		item.cardData.appleMusicType = match.type;
+		item.cardData.appleMusicId = match.id;
+		item.cardData.appleMusicStorefront = match.storefront;
+		item.cardData.href = url;
+
+		item.w = 4;
+		item.mobileW = 8;
+		item.h = 5;
+		item.mobileH = 10;
+
+		return item;
+	},
+
+	urlHandlerPriority: 2,
+
+	name: 'Apple Music Embed',
+	canResize: true,
+	minW: 4,
+	minH: 5,
+
+	keywords: ['music', 'apple', 'playlist', 'album'],
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.802.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03a12.5 12.5 0 001.57-.1c.822-.106 1.596-.35 2.295-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.042-1.8-.6-1.965-1.483-.18-.965.46-1.97 1.553-2.142.238-.037.48-.065.72-.082.39-.03.78-.056 1.168-.1.207-.02.357-.127.404-.334a1.14 1.14 0 00.025-.26V9.97a.48.48 0 00-.357-.47c-.107-.033-.218-.06-.33-.073-.565-.065-1.13-.118-1.696-.18l-3.535-.38c-.043-.004-.088-.005-.13 0a.334.334 0 00-.32.334c-.003.06 0 .12 0 .18v7.63c0 .4-.046.793-.216 1.16-.293.635-.792 1.03-1.466 1.205-.32.082-.647.136-.978.152-.93.043-1.764-.585-1.95-1.443-.2-.924.39-1.893 1.397-2.1.36-.073.724-.118 1.088-.158.274-.03.55-.06.82-.105.164-.027.3-.1.367-.27a.77.77 0 00.048-.268V7.762c0-.282.07-.53.275-.735a1.09 1.09 0 01.49-.282c.333-.093.674-.143 1.012-.18l3.384-.38c.56-.063 1.12-.123 1.68-.187.321-.037.642-.063.96-.04.37.03.658.2.86.518.088.138.135.292.148.453.016.224.02.448.02.672v2.533z"/></svg>`
+} as CardDefinition & { type: typeof cardType };
+
+// Match Apple Music album and playlist URLs
+// Examples:
+// https://music.apple.com/us/album/midnights/1649434004
+// https://music.apple.com/us/playlist/todays-hits/pl.f4d106fed2bd41149aaacabb233eb5eb
+function matchAppleMusicUrl(
+	url: string | undefined
+): { type: 'album' | 'playlist'; id: string; storefront: string } | null {
+	if (!url) return null;
+
+	const pattern = /music\.apple\.com\/([a-z]{2})\/(album|playlist)\/[^/]+\/([a-zA-Z0-9.]+)/;
+	const match = url.match(pattern);
+
+	if (match) {
+		return {
+			storefront: match[1],
+			type: match[2] as 'album' | 'playlist',
+			id: match[3]
+		};
+	}
+
+	return null;
+}

src/lib/cards/SpecialCards/UpdatedBlentos/UpdatedBlentosCard.svelte

···
 </script>
 
 <div class="flex h-full flex-col">
-	<div class="px-4 py-2 text-2xl font-bold">Recently updated blentos</div>
 	<div class="flex max-w-full grow items-center gap-4 overflow-x-scroll overflow-y-hidden px-4">
 		{#each profiles as profile (profile.did)}
 			<a

src/lib/cards/SpecialCards/UpdatedBlentos/index.ts

···
 			return [];
 		}
 	}
+	// name: 'Updated Blentos',
+	// groups: ['Social'],
+	// icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM12 6c-1.602 0-3.155.474-4.434 1.357L18 16.791A8.959 8.959 0 0 0 21 12h-4.5Z" /></svg>`
 } as CardDefinition & { type: 'updatedBlentos' };

src/lib/cards/index.ts

···
 import { ClockCardDefinition } from './ClockCard';
 import { CountdownCardDefinition } from './CountdownCard';
 import { SpotifyCardDefinition } from './SpotifyCard';
+import { AppleMusicCardDefinition } from './AppleMusicCard';
 import { ButtonCardDefinition } from './ButtonCard';
 import { GuestbookCardDefinition } from './GuestbookCard';
 import { FriendsCardDefinition } from './FriendsCard';
···
 	ClockCardDefinition,
 	CountdownCardDefinition,
 	SpotifyCardDefinition,
+	AppleMusicCardDefinition,
 	// Model3DCardDefinition
 	FriendsCardDefinition
 ] as const;

src/lib/website/Context.svelte

···
 	// svelte-ignore state_referenced_locally
 	setAdditionalUserData(data.additionalData);
 
-	setCanEdit(() => dev || (user.isLoggedIn && user.profile?.did === data.did && isEditing === true));
+	setCanEdit(
+		() => dev || (user.isLoggedIn && user.profile?.did === data.did && isEditing === true)
+	);
 
 	// svelte-ignore state_referenced_locally
 	setDidContext(data.did as Did);

src/lib/website/EditableWebsite.svelte

···
 			document.body.style.removeProperty('padding-right');
 			document.body.style.removeProperty('margin-right');
 			// Remove any orphaned dialog overlay/content elements left by the portal
-			for (const el of document.querySelectorAll(
-				'[data-dialog-overlay], [data-dialog-content]'
-			)) {
+			for (const el of document.querySelectorAll('[data-dialog-overlay], [data-dialog-content]')) {
 				el.remove();
 			}
 		};