From f93b82aa83b5811ac834e085c7f1e6b1f8f804e8 Mon Sep 17 00:00:00 2001
From: sjoerdbeentjes <11621275+sjoerdbeentjes@users.noreply.github.com>
Date: Wed, 17 Apr 2024 11:03:46 +0200
Subject: [PATCH] Add support for GIFs in responsive video component

---
 .../responsive-video/responsive-video.vue     | 43 ++++++++++++++++---
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/components/responsive-video/responsive-video.vue b/src/components/responsive-video/responsive-video.vue
index 185e8952d..b40f8137c 100644
--- a/src/components/responsive-video/responsive-video.vue
+++ b/src/components/responsive-video/responsive-video.vue
@@ -1,5 +1,6 @@
 <template>
   <vue-dato-video
+    v-if="props.video"
     class="responsive-video"
     v-bind="props"
     :play-icon-alt="$t('play_video')"
@@ -20,16 +21,36 @@
       <app-icon name="play" />
     </template>
   </vue-dato-video>
+  <video
+    v-else-if="props.gif"
+    class="responsive-video"
+    autoplay
+    controls
+    :style="{
+      aspectRatio: `${props.gif.width} / ${props.gif.height}`,
+    }"
+  >
+    <source
+      :src="`${props.gif.url}?fm=mp4`"
+      type="video/mp4"
+    >
+  </video>
 </template>
 
 <script setup lang="ts">
 import "@voorhoede/vue-dato-video/style";
-import { VueDatoVideo } from "@voorhoede/vue-dato-video";
+import { VueDatoVideo, } from "@voorhoede/vue-dato-video";
 
 defineOptions({
   inheritAttrs: false,
 });
 
+interface BaseProps {
+  autoplay: boolean;
+  loop: boolean;
+  mute: boolean;
+}
+
 interface Video {
   provider: "youtube" | "vimeo";
   providerUid: string;
@@ -40,13 +61,25 @@ interface Video {
   thumbnailUrl: string;
 }
 
-interface Props {
+interface Gif {
+  url: string;
+  height: number;
+  width: number;
+  title: string;
+}
+
+interface PropsWithGif extends BaseProps {
+  gif: Gif;
+  video: undefined;
+}
+
+interface PropsWithVideo extends BaseProps {
+  gif: undefined;
   video: Video;
-  autoplay: boolean;
-  loop: boolean;
-  mute: boolean;
 }
 
+type Props = PropsWithGif | PropsWithVideo;
+
 const props = defineProps<Props>()
 </script>