89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
resourcesData: PageDataResourceGroup
|
|
size?: 'contain' | 'cover'
|
|
gradient?: string
|
|
dimmed?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'cover',
|
|
gradient: '',
|
|
dimmed: false,
|
|
})
|
|
|
|
const { getCurrentSrc } = useResponsiveSrc()
|
|
|
|
const videoRef = ref<HTMLVideoElement | null>(null)
|
|
|
|
const resourcesSrc = computed(() => {
|
|
return getCurrentSrc(props.resourcesData)
|
|
})
|
|
const posterSrc = computed(() => {
|
|
return getCurrentSrc(props.resourcesData, { resourcesType: 'IMG' })
|
|
})
|
|
const imageClasses = computed(() => [
|
|
`w-full h-full bg-center bg-no-repeat`,
|
|
props.size === 'contain' ? 'bg-contain' : 'bg-cover',
|
|
])
|
|
const gradientClasses = computed(() => [
|
|
'absolute bottom-[-2px] left-[-2px] right-[-2px]',
|
|
props.gradient,
|
|
])
|
|
|
|
// 비디오를 처음부터 재생하는 메서드
|
|
const restartVideo = () => {
|
|
if (!videoRef.value) return
|
|
|
|
videoRef.value.currentTime = 0
|
|
videoRef.value.play().catch(err => {
|
|
console.warn('Video play failed:', err)
|
|
})
|
|
}
|
|
|
|
// src 변경 시 비디오 다시 로드
|
|
watch(resourcesSrc, () => {
|
|
if (!videoRef.value) return
|
|
|
|
videoRef.value.currentTime = 0
|
|
videoRef.value.load()
|
|
})
|
|
|
|
defineExpose({
|
|
restartVideo,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="resourcesSrc"
|
|
class="overflow-hidden absolute inset-0 w-full h-full"
|
|
>
|
|
<!-- 이미지 타입 -->
|
|
<div
|
|
v-if="isTypeImage(resourcesData?.resource_type)"
|
|
:class="imageClasses"
|
|
:style="{ backgroundImage: `url(${resourcesSrc})` }"
|
|
/>
|
|
|
|
<!-- 비디오 타입 -->
|
|
<video
|
|
v-else-if="isTypeVideo(resourcesData?.resource_type)"
|
|
ref="videoRef"
|
|
class="w-full h-full object-cover"
|
|
:poster="posterSrc"
|
|
autoplay
|
|
muted
|
|
loop
|
|
playsinline
|
|
>
|
|
<source :src="resourcesSrc" type="video/mp4" />
|
|
</video>
|
|
|
|
<i v-if="dimmed" class="absolute inset-0 bg-black/50" />
|
|
<i v-if="gradient" :class="gradientClasses" />
|
|
</div>
|
|
</template>
|