A Miiverse-themed Bluesky client
1.6 kB
60 lines
1<script setup lang="ts">
2 import type { AppBskyEmbedRecord, AppBskyFeedDefs } from '@atproto/api';
3
4 const props = defineProps<{
5 record: AppBskyEmbedRecord.ViewRecord
6 }>()
7
8 const embedToDisplay = computed(() => {
9 const embeds = props.record.embeds
10 if (!embeds || embeds.length === 0) return undefined
11
12 const embed = embeds[0]
13
14 switch (embed.$type) {
15 case 'app.bsky.embed.images#view':
16 case 'app.bsky.embed.external#view':
17 case 'app.bsky.embed.video#view':
18 return embed
19
20 case 'app.bsky.embed.recordWithMedia#view':
21 // Only return media if there's any
22 if (
23 'media' in embed &&
24 embed.media?.$type === 'app.bsky.embed.images#view'
25 ) {
26 return embed.media
27 }
28 return undefined
29
30 case 'app.bsky.embed.record#view':
31 // Don't show this type of embed
32 return undefined
33
34 default:
35 return undefined
36 }
37 })
38
39 const postView: AppBskyFeedDefs.PostView = {
40 $type: 'app.bsky.feed.defs#postView',
41 uri: props.record.uri,
42 cid: props.record.cid,
43 author: props.record.author,
44 record: props.record.value,
45 embed: embedToDisplay.value,
46 replyCount: props.record.replyCount,
47 repostCount: props.record.repostCount,
48 likeCount: props.record.likeCount,
49 quoteCount: props.record.quoteCount,
50 indexedAt: props.record.indexedAt,
51 labels: props.record.labels,
52 }
53</script>
54
55<template>
56 <NuxtLink :to="`/users/${postView.author.handle}/posts/${postView.uri.split('/').pop()}`" class="post">
57 <PostItem :post="postView" type="embed" />
58 </NuxtLink>
59</template>
60