90 lines
2.7 KiB
Vue
90 lines
2.7 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useIntersectionActivation } from '../../composables/useIntersectionActivation';
|
|
import { getBunnyEmbedUrl, getFrameIoEmbedUrl, getYouTubeEmbedUrl } from '../../schema/projectSchema';
|
|
|
|
const props = defineProps({
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const { isActive, target } = useIntersectionActivation();
|
|
const youtubeUrl = computed(() => getYouTubeEmbedUrl(props.block?.media));
|
|
const frameIoUrl = computed(() => getFrameIoEmbedUrl(props.block?.media?.url));
|
|
const bunnyUrl = computed(() => getBunnyEmbedUrl(props.block?.media));
|
|
</script>
|
|
|
|
<template>
|
|
<section ref="target" class="block-video">
|
|
<iframe
|
|
v-if="block.media?.type === 'youtube' && isActive && youtubeUrl"
|
|
:src="youtubeUrl"
|
|
title="Project video block"
|
|
loading="lazy"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen
|
|
/>
|
|
|
|
<iframe
|
|
v-else-if="block.media?.type === 'frameio' && isActive && frameIoUrl"
|
|
:src="frameIoUrl"
|
|
title="Project video block"
|
|
loading="lazy"
|
|
allow="autoplay; fullscreen; picture-in-picture"
|
|
allowfullscreen
|
|
/>
|
|
|
|
<iframe
|
|
v-else-if="block.media?.type === 'bunny' && isActive && bunnyUrl"
|
|
:src="bunnyUrl"
|
|
title="Project video block"
|
|
loading="lazy"
|
|
style="border:0;position:absolute;top:0;height:100%;width:100%;"
|
|
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
|
|
allowfullscreen
|
|
/>
|
|
|
|
<video
|
|
v-else-if="block.media?.type === 'video' && isActive && block.media?.url"
|
|
:autoplay="block.media?.autoplay === true"
|
|
:muted="block.media?.muted === true"
|
|
:loop="block.media?.loop === true"
|
|
controls
|
|
playsinline
|
|
preload="metadata"
|
|
>
|
|
<source :src="block.media.url">
|
|
</video>
|
|
|
|
<div v-else class="block-video__placeholder">Add a video block URL to render this row.</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.block-video {
|
|
aspect-ratio: 16 / 9;
|
|
background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.15));
|
|
border-radius: 1.65rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
iframe,
|
|
video {
|
|
border: 0;
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.block-video__placeholder {
|
|
align-items: center;
|
|
color: var(--project-muted, #6b7280);
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
</style> |