elk/components/status/StatusEmbeddedMedia.vue
2023-11-07 09:57:44 +00:00

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>