change: split file into viewer and download

components/ContentBuilder.vue

@@ -10,6 +10,7 @@
         <DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
         <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
         <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
+        <DynamicZoneFileViewer v-else-if="item.__component == 'dynamic-zone.file-viewer'" :data="item" />
         <DynamicZoneFileDownload v-else-if="item.__component == 'dynamic-zone.file-download'" :data="item" />
         <DynamicZoneEmbedding v-else-if="item.__component == 'dynamic-zone.embedding'" :data="item" />
         <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />

components/dynamicZone/FileDownload.vue

@@ -1,21 +1,12 @@
 <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-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' }"
-    />
+  <div class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
     <a
-      v-if="data?.enable_download"
       :href="baseUrl + data?.file.url"
       :download="data?.file.name"
       target="_blank"
       class="w-fit text-primary underline"
     >
-      Datei herunterladen
+      Datei {{ data?.file.name }} herunterladen
     </a>
   </div>
 </template>
@@ -27,15 +18,7 @@ import type DynamicZoneFileDownload from "../../types/component/dynamic-zone/fil
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
 
-const props = defineProps({
+defineProps({
   data: Object as PropType<DynamicZoneFileDownload>,
 });
-
-const showComponent = computed(() => {
-  if (props.data?.file.mime == "application/pdf" || props.data?.file.mime.includes("image")) {
-    return true;
-  } else {
-    return props.data?.enable_download;
-  }
-});
 </script>

components/dynamicZone/FileViewer.vue

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

types/component/baseComponent.ts

@@ -9,6 +9,7 @@ import type DynamicZoneFileDownload from "./dynamic-zone/fileDownload";
 import type DynamicZoneEmbedding from "./dynamic-zone/embedding";
 import type DynamicZoneSection from "./dynamic-zone/section";
 import type DynamicZoneSpacer from "./dynamic-zone/spacer";
+import type DynamicZoneFileViewer from "./dynamic-zone/fileViewer";
 
 export default interface BaseComponent {
   __component: ComponentNames;
@@ -25,6 +26,7 @@ export type ComponentNames =
   | "dynamic-zone.full-image"
   | "dynamic-zone.dual-column-text"
   | "dynamic-zone.column-image-text"
+  | "dynamic-zone.file-viewer"
   | "dynamic-zone.file-download"
   | "dynamic-zone.embedding";
 
@@ -38,5 +40,6 @@ export type ComponentTypes =
   | DynamicZoneFullImage
   | DynamicZoneDualColumnText
   | DynamicZoneColumnImageText
+  | DynamicZoneFileViewer
   | DynamicZoneFileDownload
   | DynamicZoneEmbedding;

types/component/dynamic-zone/fileDownload.ts

@@ -3,6 +3,5 @@ import type BaseFile from "../baseFile";
 
 export default interface DynamicZoneFileDownload extends BaseComponent {
   __component: "dynamic-zone.file-download";
-  enable_download: boolean;
   file: BaseFile;
 }

types/component/dynamic-zone/fileViewer.ts

@@ -0,0 +1,7 @@
+import type BaseComponent from "../baseComponent";
+import type BaseFile from "../baseFile";
+
+export default interface DynamicZoneFileViewer extends BaseComponent {
+  __component: "dynamic-zone.file-viewer";
+  file: BaseFile;
+}