appview-less bluesky client
fix: display record embeds with media properly
+41
-26
+41
-26
src/components/BskyPost.svelte
+41
-26
src/components/BskyPost.svelte
···
1
1
<script lang="ts">
2
2
import { type AtpClient } from '$lib/at/client';
3
-
import { AppBskyFeedPost } from '@atcute/bluesky';
3
+
import {
4
+
AppBskyEmbedExternal,
5
+
AppBskyEmbedImages,
6
+
AppBskyEmbedVideo,
7
+
AppBskyFeedPost
8
+
} from '@atcute/bluesky';
4
9
import {
5
10
parseCanonicalResourceUri,
6
11
type ActorIdentifier,
···
299
304
{#if !isOnPostComposer && record.embed}
300
305
{@const embed = record.embed}
301
306
<div class="mt-2">
307
+
{#snippet embedMedia(
308
+
embed: AppBskyEmbedImages.Main | AppBskyEmbedVideo.Main | AppBskyEmbedExternal.Main
309
+
)}
310
+
{#if embed.$type === 'app.bsky.embed.images'}
311
+
<!-- todo: improve how images are displayed, and pop out on click -->
312
+
{#each embed.images as image (image.image)}
313
+
{#if isBlob(image.image)}
314
+
<img
315
+
class="rounded-sm"
316
+
src={img('feed_thumbnail', did, image.image.ref.$link)}
317
+
alt={image.alt}
318
+
/>
319
+
{/if}
320
+
{/each}
321
+
{:else if embed.$type === 'app.bsky.embed.video'}
322
+
{#if isBlob(embed.video)}
323
+
{#await didDoc then didDoc}
324
+
{#if didDoc.ok}
325
+
<!-- svelte-ignore a11y_media_has_caption -->
326
+
<video
327
+
class="rounded-sm"
328
+
src={blob(didDoc.value.pds, did, embed.video.ref.$link)}
329
+
controls
330
+
></video>
331
+
{/if}
332
+
{/await}
333
+
{/if}
334
+
{/if}
335
+
{/snippet}
302
336
{#snippet embedPost(uri: ResourceUri)}
303
337
{#if quoteDepth < 2}
304
338
{@const parsedUri = expect(parseCanonicalResourceUri(uri))}
···
320
354
{@render embedBadge(record)}
321
355
{/if}
322
356
{/snippet}
323
-
{#if embed.$type === 'app.bsky.embed.images'}
324
-
<!-- todo: improve how images are displayed, and pop out on click -->
325
-
{#each embed.images as image (image.image)}
326
-
{#if isBlob(image.image)}
327
-
<img
328
-
class="rounded-sm"
329
-
src={img('feed_thumbnail', did, image.image.ref.$link)}
330
-
alt={image.alt}
331
-
/>
332
-
{/if}
333
-
{/each}
334
-
{:else if embed.$type === 'app.bsky.embed.video'}
335
-
{#if isBlob(embed.video)}
336
-
{#await didDoc then didDoc}
337
-
{#if didDoc.ok}
338
-
<!-- svelte-ignore a11y_media_has_caption -->
339
-
<video
340
-
class="rounded-sm"
341
-
src={blob(didDoc.value.pds, did, embed.video.ref.$link)}
342
-
controls
343
-
></video>
344
-
{/if}
345
-
{/await}
346
-
{/if}
357
+
{#if embed.$type === 'app.bsky.embed.images' || embed.$type === 'app.bsky.embed.video'}
358
+
{@render embedMedia(embed)}
347
359
{:else if embed.$type === 'app.bsky.embed.record'}
348
360
{@render embedPost(embed.record.uri)}
349
361
{:else if embed.$type === 'app.bsky.embed.recordWithMedia'}
350
-
{@render embedPost(embed.record.record.uri)}
362
+
<div class="space-y-1.5">
363
+
{@render embedPost(embed.record.record.uri)}
364
+
{@render embedMedia(embed.media)}
365
+
</div>
351
366
{/if}
352
367
<!-- todo: implement external link embeds -->
353
368
</div>