76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
resourcesData: PageDataResourceGroup
|
|
gradient?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
gradient: '',
|
|
})
|
|
|
|
const breakpoints = useResponsiveBreakpointsReliable()
|
|
|
|
const resPath = computed(() => {
|
|
return props.resourcesData?.res_path
|
|
})
|
|
const bgStyles = computed(() => {
|
|
return getResponsiveSrc(resPath.value, {
|
|
resourcesType: 'bg',
|
|
})
|
|
})
|
|
const videoSrc = computed(() => {
|
|
return getResponsiveSrc(resPath.value, {
|
|
resourcesType: 'video',
|
|
})
|
|
})
|
|
const posterSrc = computed(() => {
|
|
return getResponsiveSrc(resPath.value)
|
|
})
|
|
const currentVideoSrc = computed(() => {
|
|
if (!videoSrc.value) return ''
|
|
return breakpoints.value.isMobile
|
|
? videoSrc.value.mobileSrc
|
|
: videoSrc.value.pcSrc
|
|
})
|
|
const currentPosterSrc = computed(() => {
|
|
if (!posterSrc.value) return ''
|
|
return breakpoints.value.isMobile
|
|
? posterSrc.value.mobileSrc
|
|
: posterSrc.value.pcSrc
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="absolute inset-0 w-full h-full">
|
|
<!-- 이미지 타입-->
|
|
<div
|
|
v-if="isTypeImage(resourcesData?.resource_type)"
|
|
class="w-full h-full bg-cover bg-center bg-no-repeat"
|
|
:class="getResponsiveClass()"
|
|
:style="bgStyles"
|
|
/>
|
|
|
|
<!-- 비디오 타입 -->
|
|
<video
|
|
v-else-if="isTypeVideo(resourcesData?.resource_type) && currentVideoSrc"
|
|
class="w-full h-full object-cover"
|
|
:poster="currentPosterSrc"
|
|
autoplay
|
|
muted
|
|
loop
|
|
playsinline
|
|
>
|
|
<source :src="currentVideoSrc" type="video/mp4" />
|
|
<source :src="currentVideoSrc" type="video/webm" />
|
|
</video>
|
|
|
|
<!-- 그라디언트 오버레이 (gradient가 true일 때만) -->
|
|
<div
|
|
v-if="props.gradient"
|
|
:class="`absolute bottom-0 left-0 right-0 ${props.gradient}`"
|
|
/>
|
|
</div>
|
|
</template>
|