<script setup lang="ts"> import type { mastodon } from 'masto' const { status } = defineProps<{ status: mastodon.v1.Status }>() const vnode = computed(() => { if (!status.card?.html) return null const node = sanitizeEmbeddedIframe(status.card?.html)?.children[0] return node ? nodeToVNode(node) : null }) const overlayToggle = ref(true) const card = ref(status.card) </script> <template> <div v-if="card"> <div v-if="overlayToggle" h-80 cursor-pointer relative > <div p-3 absolute w-full h-full z-100 rounded-lg style="background: linear-gradient(black, rgba(0,0,0,0.5), transparent, transparent, rgba(0,0,0,0.20))" > <NuxtLink flex flex-col gap-1 hover:underline text-xs text-light font-light target="_blank" :href="card?.url"> <div flex gap-0.5> <p flex-row line-clamp-1> {{ card?.providerName }}<span v-if="card?.authorName"> • {{ card?.authorName }}</span> </p> <span flex-row w-4 h-4 pointer-events-none i-ri:arrow-right-up-line /> </div> <p font-bold line-clamp-1 text-size-base> {{ card?.title }} </p> <p line-clamp-1> {{ $t('status.embedded_warning') }} </p> </NuxtLink> <div flex h-50 mt-1 justify-center flex-items-center > <button absolute bg-primary opacity-85 rounded-full hover:bg-primary-active hover:opacity-95 transition-all box-shadow-outline @click.stop.prevent="() => overlayToggle = !overlayToggle" > <span text-light flex flex-col gap-3 w-27 h-27 pointer-events-none i-ri:play-circle-line /> </button> </div> </div> <CommonBlurhash v-if="card?.image" :blurhash="card.blurhash" :src="card.image" w-full h-full object-cover rounded-lg /> </div> <div v-else> <!-- this inserts the iframe --> <component :is="vnode" v-if="vnode" rounded-lg h-80 /> </div> </div> </template> <style> iframe { width: 100%; height: 100%; } </style>