fix(source): gallery png support (#237)

* 3.0.97

* 3.0.98

* 3.0.99

* png support for gallery

* Use actual file types; throw error when using unsupported file type

---------

Co-authored-by: Maximilian Harz <maxharz@gmail.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.97",
+  "version": "3.0.99",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.97",
+      "version": "3.0.99",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.97",
+  "version": "3.0.99",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage": "https://utopia-os.org/",

src/Components/Profile/Subcomponents/GalleryForm.spec.tsx

@@ -67,6 +67,7 @@ describe('GalleryForm', () => {
           id: '1',
           width: 800,
           height: 600,
+          type: 'image/jpeg',
         },
       },
       {
@@ -74,6 +75,7 @@ describe('GalleryForm', () => {
           id: '2',
           width: 1024,
           height: 768,
+          type: 'image/jpeg',
         },
       },
     ]

src/Components/Profile/Subcomponents/GalleryForm.tsx

@@ -42,6 +42,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
         height,
         asset: await appState.assetsApi.upload(compressedFile, file.name),
         name: file.name,
+        type: file.type,
       }
     })
 
@@ -56,6 +57,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
               id: upload.asset.id,
               width: upload.width,
               height: upload.height,
+              type: upload.type,
             },
           },
         ],
@@ -68,6 +70,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
     onDrop: upload,
     accept: {
       'image/jpeg': [],
+      'image/png': [],
     },
   })
 

src/Components/Profile/Subcomponents/GalleryView.tsx

@@ -6,15 +6,28 @@ import { useAppState } from '#components/AppShell/hooks/useAppState'
 
 import type { Item } from '#types/Item'
 
+const extensionMap = new Map([
+  ['image/jpeg', '.jpg'],
+  ['image/png', '.png'],
+])
+
+const getExtension = (type: string) => {
+  const extension = extensionMap.get(type)
+
+  if (extension) return extension
+
+  throw new Error(`Unsupported file type: ${type}`)
+}
+
 export const GalleryView = ({ item }: { item: Item }) => {
   const [index, setIndex] = useState(-1)
   const appState = useAppState()
   const images =
-    item.gallery?.map((i, j) => ({
+    item.gallery?.map(({ directus_files_id: { id, type, width, height } }, index) => ({
-      src: appState.assetsApi.url + `${i.directus_files_id.id}.jpg`,
+      src: `${appState.assetsApi.url}${id}${getExtension(type)}`,
-      width: i.directus_files_id.width,
+      width,
-      height: i.directus_files_id.height,
+      height,
-      index: j,
+      index,
     })) ?? []
 
   if (images.length > 0)

src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap

@@ -69,7 +69,7 @@ exports[`GalleryForm > with previous images > renders 1`] = `
       tabindex="0"
     >
       <input
-        accept="image/jpeg"
+        accept="image/jpeg,image/png"
         data-testid="gallery-upload-input"
         multiple=""
         style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
@@ -149,7 +149,7 @@ exports[`GalleryForm > with uploading images > renders 1`] = `
       tabindex="0"
     >
       <input
-        accept="image/jpeg"
+        accept="image/jpeg,image/png"
         data-testid="gallery-upload-input"
         multiple=""
         style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
@@ -193,7 +193,7 @@ exports[`GalleryForm > without previous images > renders 1`] = `
       tabindex="0"
     >
       <input
-        accept="image/jpeg"
+        accept="image/jpeg,image/png"
         data-testid="gallery-upload-input"
         multiple=""
         style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"

src/types/Item.d.ts

@@ -12,6 +12,7 @@ interface GalleryItem {
     id: string
     width: number
     height: number
+    type: string
   }
 }