106 lines
2.5 KiB
Vue
106 lines
2.5 KiB
Vue
<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>
|