38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<template>
|
|
<div class="w-16 h-16 bg-gray-700 rounded-lg overflow-hidden border border-gray-600 flex-shrink-0 flex items-center justify-center">
|
|
<img
|
|
v-if="src"
|
|
:src="src"
|
|
alt="Person"
|
|
class="w-full h-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
<span v-else-if="loading" class="text-gray-500 text-xs">...</span>
|
|
<svg v-else class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { getPersonThumbnail } from '@/api/client'
|
|
|
|
const props = defineProps<{
|
|
personId: string
|
|
videoUuid?: string
|
|
}>()
|
|
|
|
const src = ref('')
|
|
const loading = ref(false)
|
|
|
|
onMounted(async () => {
|
|
loading.value = true
|
|
try {
|
|
src.value = await getPersonThumbnail(props.personId)
|
|
} catch (e) {
|
|
console.error('Failed to load thumbnail', e)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|