your personal website on atproto - mirror
blento.app
Merge pull request #256 from jellydeck/bug-bsky-img
fix: bsky image modal crashing in #each block due to same id
+11
-5
+11
-5
src/lib/cards/media/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte
+11
-5
src/lib/cards/media/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte
···
10
10
11
11
let did = getDidContext();
12
12
13
-
let mediaList: { fullsize: string; isVideo?: boolean; playlist?: string; thumbnail?: string }[] =
14
-
$state([]);
13
+
let mediaList: {
14
+
id: string;
15
+
fullsize: string;
16
+
isVideo?: boolean;
17
+
playlist?: string;
18
+
thumbnail?: string;
19
+
}[] = $state([]);
15
20
16
21
let isLoading = $state(true);
17
22
···
24
29
post.post.embed?.$type === 'app.bsky.embed.images#view' ? post.post.embed : undefined;
25
30
26
31
for (let image of images?.images ?? []) {
27
-
collected.push(image);
32
+
collected.push({ ...image, id: crypto.randomUUID() });
28
33
}
29
34
30
35
if (
···
35
40
collected.push({
36
41
...post.post.embed,
37
42
isVideo: true,
38
-
fullsize: ''
43
+
fullsize: '',
44
+
id: crypto.randomUUID()
39
45
});
40
46
}
41
47
}
···
60
66
<div
61
67
class="bg-base-200 dark:bg-base-950/30 grid h-[50dvh] grid-cols-2 gap-4 overflow-y-scroll rounded-2xl p-4 lg:grid-cols-3"
62
68
>
63
-
{#each mediaList as media (media.fullsize || media.thumbnail || media.playlist)}
69
+
{#each mediaList as media (media.id)}
64
70
<button
65
71
onclick={() => {
66
72
if (media.isVideo) {