From 8c9196f4c25d7450dde497c538db0e4ca6b8134d Mon Sep 17 00:00:00 2001
From: Alex Ackermann <abackermann91@gmail.com>
Date: Sun, 25 May 2025 02:21:20 +0200
Subject: [PATCH] feat: extract first frame from gif, so space image cropping
 works flawless

---
 .../src/components/Spaces/SpaceImageModal.vue | 52 ++++++++++++++-----
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/packages/web-pkg/src/components/Spaces/SpaceImageModal.vue b/packages/web-pkg/src/components/Spaces/SpaceImageModal.vue
index 71a6db4b78..e378a72cfa 100644
--- a/packages/web-pkg/src/components/Spaces/SpaceImageModal.vue
+++ b/packages/web-pkg/src/components/Spaces/SpaceImageModal.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, unref, ref, nextTick, useTemplateRef } from 'vue'
+import { nextTick, onMounted, ref, unref, useTemplateRef } from 'vue'
 import {
   Modal,
   useClientService,
@@ -112,23 +112,47 @@ const uploadSpaceImage = async (content: ArrayBuffer) => {
   }
 }
 
+const extractFirstFrameFromGif = (file: File): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.width
+      canvas.height = image.height
+      canvas.getContext('2d').drawImage(image, 0, 0)
+      canvas.toBlob((blob) => (blob ? resolve(blob) : reject()), 'image/png')
+      URL.revokeObjectURL(image.src)
+    }
+    image.onerror = reject
+    image.src = URL.createObjectURL(file)
+  })
+}
+
 onMounted(async () => {
-  imageUrl.value = URL.createObjectURL(file)
+  try {
+    const fileSource = file.type == 'image/gif' ? await extractFirstFrameFromGif(file) : file
+    imageUrl.value = URL.createObjectURL(fileSource)
 
-  if (unref(cropper)) {
-    unref(cropper)?.destroy()
-  }
+    if (unref(cropper)) {
+      unref(cropper)?.destroy()
+    }
 
-  await nextTick()
+    await nextTick()
 
-  cropper.value = new Cropper(unref(imageRef), {
-    aspectRatio: 16 / 9,
-    viewMode: 1,
-    dragMode: 'move',
-    autoCropArea: 0.8,
-    responsive: true,
-    background: false
-  })
+    cropper.value = new Cropper(unref(imageRef), {
+      aspectRatio: 16 / 9,
+      viewMode: 1,
+      dragMode: 'move',
+      autoCropArea: 0.8,
+      responsive: true,
+      background: false
+    })
+  } catch (error) {
+    showErrorMessage({
+      title: $gettext('Failed to load space image'),
+      errors: [error]
+    })
+  }
 })
 </script>