Update

resources/js/projects-renderer/components/blocks/PublicSlot.vue

@@ -0,0 +1,141 @@
+<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>