your personal website on atproto - mirror
blento.app
Implement Rocksky cards, add links to tracks and album art
+20
-17
+2
-2
src/lib/cards/media/RockskyPlaysCard/AlbumArt.svelte
+2
-2
src/lib/cards/media/RockskyPlaysCard/AlbumArt.svelte
···
1
1
<script lang="ts">
2
-
let { releaseMbId, alt }: { releaseMbId?: string; alt: string } = $props();
2
+
let { albumArtUrl, alt }: { albumArtUrl?: string; alt: string } = $props();
3
3
4
4
let isLoading = $state(true);
5
5
let hasError = $state(false);
···
25
25
</div>
26
26
{:else}
27
27
<img
28
-
src="https://coverartarchive.org/release/{releaseMbId}/front-250"
28
+
src="{albumArtUrl}"
29
29
{alt}
30
30
class="h-10 w-10 rounded-lg object-cover {isLoading && 'hidden'}"
31
31
onload={() => {
+18
-15
src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte
+18
-15
src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte
···
3
3
import { onMount } from 'svelte';
4
4
import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
5
5
import { CardDefinitionsByType } from '../..';
6
-
// import AlbumArt from './AlbumArt.svelte';
6
+
import AlbumArt from './AlbumArt.svelte';
7
7
import { RelativeTime } from '@foxui/time';
8
8
9
9
interface Artist {
10
-
artistName: string;
10
+
artist: string;
11
11
}
12
12
13
13
interface PlayValue {
14
-
releaseMbId?: string;
15
-
trackName: string;
16
-
playedTime?: string;
14
+
mbid?: string;
15
+
title: string;
16
+
createdAt?: string;
17
17
artists?: Artist[];
18
-
originUrl?: string;
18
+
albumArtUrl?: string;
19
+
spotifyLink?: string;
19
20
}
20
21
21
22
interface Play {
···
52
53
{#snippet musicItem(play: Play)}
53
54
<div class="flex w-full items-center gap-3">
54
55
<div class="size-10 shrink-0">
55
-
<AlbumArt releaseMbId={play.value.releaseMbId} alt="" />
56
+
<AlbumArt albumArtUrl={play.value.albumArtUrl} alt="" />
56
57
</div>
57
58
<div class="min-w-0 flex-1">
58
59
<div class="inline-flex w-full max-w-full justify-between gap-2">
59
60
<div
60
61
class="text-accent-500 accent:text-accent-950 min-w-0 flex-1 shrink truncate font-semibold"
61
62
>
62
-
{play.value.trackName}
63
+
{play.value.title}
63
64
</div>
64
65
65
-
{#if play.value.playedTime}
66
+
{#if play.value.createdAt}
66
67
<div class="shrink-0 text-xs">
67
68
<RelativeTime
68
69
date={new Date(
69
-
isNumeric(play.value.playedTime)
70
-
? parseInt(play.value.playedTime) * 1000
71
-
: play.value.playedTime
70
+
isNumeric(play.value.createdAt)
71
+
? parseInt(play.value.createdAt) * 1000
72
+
: play.value.createdAt
72
73
)}
73
74
locale="en-US"
74
75
/> ago
···
78
79
{/if}
79
80
</div>
80
81
<div class="my-1 min-w-0 gap-2 truncate text-xs whitespace-nowrap">
81
-
{(play?.value?.artists ?? []).map((a) => a.artistName).join(', ')}
82
+
{(play?.value?.artists ?? []).map((a) => a.name).join(', ')}
82
83
</div>
83
84
</div>
84
85
</div>
···
87
88
<div class="z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4">
88
89
{#if feed && feed.length > 0}
89
90
{#each feed as play (play.uri)}
90
-
{#if play.value.originUrl}
91
-
<a href={play.value.originUrl} target="_blank" rel="noopener noreferrer" class="w-full">
91
+
{#if play.uri}
92
+
<a href="https://rocksky.app/{did}/scrobble/{play.uri.split('/').at(-1)}" target="_blank" rel="noopener noreferrer" class="w-full">
93
+
<!-- {#if play.value.spotifyLink}
94
+
<a href={play.value.spotifyLink} target="_blank" rel="noopener noreferrer" class="w-full"> -->
92
95
{@render musicItem(play)}
93
96
</a>
94
97
{:else}