Merge pull request #230 from LooneyH/Rocksky

Rocksky

src/lib/cards/index.ts

···
 import { GifCardDefinition } from './media/GIFCard';
 import { PopfeedReviewsCardDefinition } from './media/PopfeedReviews';
 import { TealFMPlaysCardDefinition } from './media/TealFMPlaysCard';
+import { RockskyPlaysCardDefinition } from './media/RockskyPlaysCard';
 import { PhotoGalleryCardDefinition } from './media/PhotoGalleryCard';
 import { StandardSiteDocumentListCardDefinition } from './content/StandardSiteDocumentListCard';
 import { StatusphereCardDefinition } from './media/StatusphereCard';
···
 	GifCardDefinition,
 	PopfeedReviewsCardDefinition,
 	TealFMPlaysCardDefinition,
+	RockskyPlaysCardDefinition,
 	PhotoGalleryCardDefinition,
 	StandardSiteDocumentListCardDefinition,
 	StatusphereCardDefinition,

src/lib/cards/media/RockskyPlaysCard/AlbumArt.svelte

···
+<script lang="ts">
+	let { albumArtUrl, alt }: { albumArtUrl?: string; alt: string } = $props();
+
+	let isLoading = $state(true);
+	let hasError = $state(false);
+</script>
+
+{#if isLoading}
+	<div class="bg-base-200 dark:bg-base-800 h-10 w-10 animate-pulse rounded-lg"></div>
+{/if}
+
+{#if hasError}
+	<div
+		class="bg-base-300 dark:bg-base-800 accent:bg-accent-700/50 flex h-10 w-10 items-center justify-center rounded-lg"
+	>
+		<svg
+			class="text-base-400 dark:text-base-600 accent:text-accent-900 h-5 w-5"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+		>
+			<path
+				d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"
+			/>
+		</svg>
+	</div>
+{:else}
+	<img
+		src="{albumArtUrl}"
+		{alt}
+		class="h-10 w-10 rounded-lg object-cover {isLoading && 'hidden'}"
+		onload={() => {
+			isLoading = false;
+		}}
+		onerror={() => {
+			isLoading = false;
+			hasError = true;
+		}}
+	/>
+{/if}

src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { onMount } from 'svelte';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import { CardDefinitionsByType } from '../..';
+	import AlbumArt from './AlbumArt.svelte';
+	import { RelativeTime } from '@foxui/time';
+
+	interface Artist {
+		artist: string;
+	}
+
+	interface PlayValue {
+		mbid?: string;
+		title: string;
+		createdAt?: string;
+		artists?: Artist[];
+		albumArtUrl?: string;
+		spotifyLink?: string;
+	}
+
+	interface Play {
+		uri: string;
+		value: PlayValue;
+	}
+
+	let { item }: { item: Item } = $props();
+
+	const data = getAdditionalUserData();
+	// svelte-ignore state_referenced_locally
+	let feed = $state(data[item.cardType] as Play[] | undefined);
+
+	let did = getDidContext();
+	let handle = getHandleContext();
+
+	onMount(async () => {
+		if (feed) return;
+
+		feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
+			did,
+			handle
+		})) as Play[] | undefined;
+
+		data[item.cardType] = feed;
+	});
+
+	function isNumeric(str: string) {
+		if (typeof str != 'string') return false;
+		return !isNaN(Number(str)) && !isNaN(parseFloat(str));
+	}
+</script>
+
+{#snippet musicItem(play: Play)}
+	<div class="flex w-full items-center gap-3">
+		<div class="size-10 shrink-0">
+			<AlbumArt albumArtUrl={play.value.albumArtUrl} alt="" />
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="inline-flex w-full max-w-full justify-between gap-2">
+				<div
+					class="text-accent-500 accent:text-accent-950 min-w-0 flex-1 shrink truncate font-semibold"
+				>
+					{play.value.title}
+				</div>
+
+				{#if play.value.createdAt}
+					<div class="shrink-0 text-xs">
+						<RelativeTime
+							date={new Date(
+								isNumeric(play.value.createdAt)
+									? parseInt(play.value.createdAt) * 1000
+									: play.value.createdAt
+							)}
+							locale="en-US"
+						/> ago
+					</div>
+				{:else}
+					<div></div>
+				{/if}
+			</div>
+			<div class="my-1 min-w-0 gap-2 truncate text-xs whitespace-nowrap">
+				{(play?.value?.artists ?? []).map((a) => a.name).join(', ')}
+			</div>
+		</div>
+	</div>
+{/snippet}
+
+<div class="z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4">
+	{#if feed && feed.length > 0}
+		{#each feed as play (play.uri)}
+			{#if play.uri}
+				<a href="https://rocksky.app/{did}/scrobble/{play.uri.split('/').at(-1)}" target="_blank" rel="noopener noreferrer" class="w-full">
+		<!-- {#if play.value.spotifyLink}
+				<a href={play.value.spotifyLink} target="_blank" rel="noopener noreferrer" class="w-full"> -->
+					{@render musicItem(play)}
+				</a>
+			{:else}
+				{@render musicItem(play)}
+			{/if}
+		{/each}
+	{:else if feed}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			No recent plays found.
+		</div>
+	{:else}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			Loading plays...
+		</div>
+	{/if}
+</div>

src/lib/cards/media/RockskyPlaysCard/index.ts

···
+import type { CardDefinition } from '../../types';
+import { listRecords } from '$lib/atproto';
+import RockskyPlaysCard from './RockskyPlaysCard.svelte';
+
+export const RockskyPlaysCardDefinition = {
+	type: 'recentRockskyPlays',
+	contentComponent: RockskyPlaysCard,
+	createNew: (card) => {
+		card.w = 4;
+		card.mobileW = 8;
+		card.h = 3;
+		card.mobileH = 6;
+	},
+	loadData: async (items, { did }) => {
+		const data = await listRecords({
+			did,
+			collection: 'app.rocksky.scrobble',
+			limit: 99
+		});
+
+		return data;
+	},
+	minW: 4,
+	canHaveLabel: true,
+
+	keywords: ['music', 'scrobble', 'listening', 'songs'],
+	name: 'Rocksky Plays',
+
+	groups: ['Media'],
+	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="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>`
+} as CardDefinition & { type: 'recentRockskyPlays' };