43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
|
||
|
|
<iframe v-if="data?.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
|
||
|
|
<NuxtPicture
|
||
|
|
v-else-if="data?.file.mime.includes('image')"
|
||
|
|
loading="lazy"
|
||
|
|
class="w-full object-cover object-center mx-auto"
|
||
|
|
:src="baseUrl + data?.file.url"
|
||
|
|
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
|
||
|
|
/>
|
||
|
|
<video
|
||
|
|
v-else-if="data?.file.mime.includes('video')"
|
||
|
|
class="w-full max-w-full h-auto object-contain"
|
||
|
|
controls
|
||
|
|
controlsList="nodownload"
|
||
|
|
>
|
||
|
|
<source :src="baseUrl + data?.file.url" type="video/mp4" />
|
||
|
|
</video>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { PropType } from "vue";
|
||
|
|
import type DynamicZoneFileViewer from "../../types/component/dynamic-zone/fileViewer";
|
||
|
|
|
||
|
|
const runtimeConfig = useRuntimeConfig();
|
||
|
|
const baseUrl = runtimeConfig.public.strapi.url;
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
data: Object as PropType<DynamicZoneFileViewer>,
|
||
|
|
});
|
||
|
|
|
||
|
|
const showComponent = computed(() => {
|
||
|
|
if (
|
||
|
|
props.data?.file.mime == "application/pdf" ||
|
||
|
|
props.data?.file.mime.includes("image") ||
|
||
|
|
props.data?.file.mime.includes("video")
|
||
|
|
) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|