142 lines
3.7 KiB
Vue
142 lines
3.7 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useIntersectionActivation } from '../../composables/useIntersectionActivation';
|
|
import { getBunnyEmbedUrl, getFrameIoEmbedUrl, getYouTubeEmbedUrl } from '../../schema/projectSchema';
|
|
|
|
const props = defineProps({
|
|
slotData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
activeLang: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
const { isActive, target } = useIntersectionActivation();
|
|
|
|
const youtubeUrl = computed(() => getYouTubeEmbedUrl(props.slotData?.media));
|
|
const frameIoUrl = computed(() => getFrameIoEmbedUrl(props.slotData?.media?.url));
|
|
const bunnyUrl = computed(() => getBunnyEmbedUrl(props.slotData?.media));
|
|
|
|
const displayContent = computed(() => {
|
|
const c = props.slotData?.content;
|
|
if (typeof c === 'string') return c;
|
|
if (c && typeof c === 'object') {
|
|
return c[props.activeLang] || c[Object.keys(c)[0]] || '';
|
|
}
|
|
return '';
|
|
});
|
|
|
|
const resolveAlt = (alt, fallback) => {
|
|
if (!alt) return fallback;
|
|
if (typeof alt === 'string') return alt || fallback;
|
|
return alt[props.activeLang] || alt[Object.keys(alt)[0]] || fallback;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<!-- TEXT -->
|
|
<div v-if="slotData.type === 'text'" class="project-text-block" v-html="displayContent"></div>
|
|
|
|
<!-- IMAGE -->
|
|
<img
|
|
v-else-if="slotData.type === 'image' && slotData.image?.url"
|
|
:src="slotData.image.url"
|
|
:alt="resolveAlt(slotData.image?.alt, '')"
|
|
loading="lazy"
|
|
>
|
|
|
|
<!-- VIDEO -->
|
|
<div v-else-if="slotData.type === 'video'" ref="target" class="project-video-wrap">
|
|
<iframe
|
|
v-if="slotData.media?.type === 'youtube' && isActive && youtubeUrl"
|
|
:src="youtubeUrl"
|
|
title="Project video"
|
|
loading="lazy"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen
|
|
/>
|
|
<iframe
|
|
v-else-if="slotData.media?.type === 'frameio' && isActive && frameIoUrl"
|
|
:src="frameIoUrl"
|
|
title="Project video"
|
|
loading="lazy"
|
|
allow="autoplay; fullscreen; picture-in-picture"
|
|
allowfullscreen
|
|
/>
|
|
<div v-else-if="slotData.media?.type === 'bunny' && bunnyUrl" class="project-video-wrap__bunny">
|
|
<iframe
|
|
v-if="isActive"
|
|
:src="bunnyUrl"
|
|
loading="lazy"
|
|
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
|
|
allowfullscreen
|
|
/>
|
|
</div>
|
|
<video
|
|
v-else-if="slotData.media?.type === 'video' && isActive && slotData.media?.url"
|
|
class="project-video"
|
|
:autoplay="slotData.media?.autoplay === true"
|
|
:muted="slotData.media?.muted === true"
|
|
:loop="slotData.media?.loop === true"
|
|
playsinline
|
|
>
|
|
<source :src="slotData.media.url" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
img {
|
|
display: block;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.project-text-block {
|
|
color: #f5f5f5;
|
|
line-height: 1.6;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.project-video-wrap {
|
|
aspect-ratio: 16 / 9;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.project-video-wrap iframe,
|
|
.project-video-wrap video {
|
|
border: 0;
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.project-video-wrap__bunny {
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.project-video-wrap__bunny iframe {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
video.project-video {
|
|
display: block;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
</style>
|