@chayns-components/gallery 5.0.0-beta.142 → 5.0.0-beta.152

package/lib/api/video/post.d.ts

@@ -1,5 +1,5 @@
 export interface PostVideoResult {
-    id: number;
+    id: string;
     originalVideoQuality: string;
     thumbnailUrl: string;
     url: string;
@@ -12,5 +12,5 @@ interface PostVideoOptions {
 /**
  * Uploads a video to the streaming service
  */
-export declare const postVideo: ({ accessToken, file, }: PostVideoOptions) => Promise<PostVideoResult>;
+export declare const postVideo: ({ accessToken, file, }: PostVideoOptions) => Promise<PostVideoResult | undefined>;
 export {};

package/lib/api/video/post.js

@@ -22,7 +22,8 @@ const postVideo = async _ref => {
     method: 'POST'
   });
   if (response.ok) {
-    return await response.json();
+    const data = await response.json();
+    return data[0];
   }
   throw Error(`Failed to POST video (status code: ${response.status}).`);
 };

package/lib/api/video/post.js.map

@@ -1 +1 @@
-{"version":3,"file":"post.js","names":["postVideo","_ref","accessToken","file","formData","FormData","append","response","fetch","body","headers","Authorization","method","ok","json","Error","status","exports"],"sources":["../../../src/api/video/post.ts"],"sourcesContent":["export interface PostVideoResult {\n    id: number;\n    originalVideoQuality: string;\n    thumbnailUrl: string;\n    url: string;\n    urlMP4: string;\n}\n\ninterface PostVideoOptions {\n    accessToken: string;\n    file: File | Blob;\n}\n\n/**\n * Uploads a video to the streaming service\n */\nexport const postVideo = async ({\n    accessToken,\n    file,\n}: PostVideoOptions): Promise<PostVideoResult> => {\n    const formData = new FormData();\n\n    formData.append('files', file);\n    const response = await fetch(\n        'https://streamingservice.chayns.space/video?disableIntercom=true',\n        {\n            body: formData,\n            headers: {\n                Authorization: `Bearer ${accessToken}`,\n            },\n            method: 'POST',\n        }\n    );\n\n    if (response.ok) {\n        return (await response.json()) as PostVideoResult;\n    }\n\n    throw Error(`Failed to POST video (status code: ${response.status}).`);\n};\n"],"mappings":";;;;;;AAaA;AACA;AACA;AACO,MAAMA,SAAS,GAAG,MAAAC,IAAA,IAGyB;EAAA,IAHlB;IAC5BC,WAAW;IACXC;EACc,CAAC,GAAAF,IAAA;EACf,MAAMG,QAAQ,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE/BD,QAAQ,CAACE,MAAM,CAAC,OAAO,EAAEH,IAAI,CAAC;EAC9B,MAAMI,QAAQ,GAAG,MAAMC,KAAK,CACxB,kEAAkE,EAClE;IACIC,IAAI,EAAEL,QAAQ;IACdM,OAAO,EAAE;MACLC,aAAa,EAAG,UAAST,WAAY;IACzC,CAAC;IACDU,MAAM,EAAE;EACZ,CACJ,CAAC;EAED,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,OAAQ,MAAMN,QAAQ,CAACO,IAAI,CAAC,CAAC;EACjC;EAEA,MAAMC,KAAK,CAAE,sCAAqCR,QAAQ,CAACS,MAAO,IAAG,CAAC;AAC1E,CAAC;AAACC,OAAA,CAAAjB,SAAA,GAAAA,SAAA"}
+{"version":3,"file":"post.js","names":["postVideo","_ref","accessToken","file","formData","FormData","append","response","fetch","body","headers","Authorization","method","ok","data","json","Error","status","exports"],"sources":["../../../src/api/video/post.ts"],"sourcesContent":["export interface PostVideoResult {\n    id: string;\n    originalVideoQuality: string;\n    thumbnailUrl: string;\n    url: string;\n    urlMP4: string;\n}\n\ninterface PostVideoOptions {\n    accessToken: string;\n    file: File | Blob;\n}\n\n/**\n * Uploads a video to the streaming service\n */\nexport const postVideo = async ({\n    accessToken,\n    file,\n}: PostVideoOptions): Promise<PostVideoResult | undefined> => {\n    const formData = new FormData();\n\n    formData.append('files', file);\n\n    const response = await fetch(\n        'https://streamingservice.chayns.space/video?disableIntercom=true',\n        {\n            body: formData,\n            headers: {\n                Authorization: `Bearer ${accessToken}`,\n            },\n            method: 'POST',\n        }\n    );\n\n    if (response.ok) {\n        const data = (await response.json()) as PostVideoResult[];\n\n        return data[0];\n    }\n\n    throw Error(`Failed to POST video (status code: ${response.status}).`);\n};\n"],"mappings":";;;;;;AAaA;AACA;AACA;AACO,MAAMA,SAAS,GAAG,MAAAC,IAAA,IAGqC;EAAA,IAH9B;IAC5BC,WAAW;IACXC;EACc,CAAC,GAAAF,IAAA;EACf,MAAMG,QAAQ,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE/BD,QAAQ,CAACE,MAAM,CAAC,OAAO,EAAEH,IAAI,CAAC;EAE9B,MAAMI,QAAQ,GAAG,MAAMC,KAAK,CACxB,kEAAkE,EAClE;IACIC,IAAI,EAAEL,QAAQ;IACdM,OAAO,EAAE;MACLC,aAAa,EAAG,UAAST,WAAY;IACzC,CAAC;IACDU,MAAM,EAAE;EACZ,CACJ,CAAC;EAED,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,MAAMC,IAAI,GAAI,MAAMP,QAAQ,CAACQ,IAAI,CAAC,CAAuB;IAEzD,OAAOD,IAAI,CAAC,CAAC,CAAC;EAClB;EAEA,MAAME,KAAK,CAAE,sCAAqCT,QAAQ,CAACU,MAAO,IAAG,CAAC;AAC1E,CAAC;AAACC,OAAA,CAAAlB,SAAA,GAAAA,SAAA"}

package/lib/components/Gallery.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import type { ExternalFile, UploadedFile } from '../types/file';
+import type { FileItem } from '../types/file';
 export type GalleryProps = {
     /**
      * AccessToken of the user
@@ -16,15 +16,15 @@ export type GalleryProps = {
     /**
      *  Images and videos which should be displayed
      */
-    files?: ExternalFile[];
+    files?: FileItem[];
     /**
      *  Function to be executed when files are added
      */
-    onAdd?: (files: UploadedFile[]) => void;
+    onAdd?: (files: FileItem[]) => void;
     /**
      *  Function to be executed when a file is removed
      */
-    onRemove?: (file: UploadedFile) => void;
+    onRemove?: (file: FileItem) => void;
     /**
      * PersonId of the user
      */

package/lib/components/Gallery.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
 var _file = require("../utils/file");
 var _upload = require("../utils/upload");
 var _AddFile = _interopRequireDefault(require("./add-file/AddFile"));
@@ -23,139 +24,212 @@ const Gallery = _ref => {
     onRemove,
     personId
   } = _ref;
-  const [uploadedFiles, setUploadedFiles] = (0, _react.useState)([]);
-  const [externalFiles, setExternalFiles] = (0, _react.useState)([]);
-  const combinedFiles = (0, _react.useMemo)(() => [...externalFiles, ...uploadedFiles], [externalFiles, uploadedFiles]);
+  const [fileItems, setFileItems] = (0, _react.useState)([]);
 
   /**
-   * Merge external files with uploaded files
+   * This function adds a previewUrl to fileItems
    */
-  (0, _react.useEffect)(() => {
-    if (!files || !Array.isArray(files)) {
-      return;
-    }
-    const newExternalFiles = files.map(file => {
-      if ('thumbnailUrl' in file) {
+  const handlePreviewUrlCallback = (previewUrl, file) => {
+    setFileItems(prevState => prevState.map(prevFile => {
+      if (prevFile.id === file.id) {
+        return {
+          ...prevFile,
+          previewUrl
+        };
+      }
+      return prevFile;
+    }));
+  };
+
+  /**
+   * This function adds uploaded files to fileItems
+   */
+  const handleUploadFileCallback = (file, UploadedFile) => {
+    setFileItems(prevState => prevState.map(prevFile => {
+      if (prevFile.id === file.id) {
         return {
-          id: file.id,
-          url: file.url,
-          thumbnailUrl: file.url
+          ...prevFile,
+          uploadedFile: UploadedFile,
+          id: UploadedFile.id,
+          state: 'uploaded'
         };
       }
-      return {
-        id: file.id,
-        url: file.url
-      };
+      return prevFile;
+    }));
+  };
+
+  /**
+   * This function returns the fileItems if some files are updated
+   */
+  (0, _react.useEffect)(() => {
+    if (onAdd) {
+      onAdd(fileItems);
+    }
+  }, [fileItems, onAdd]);
+
+  /**
+   * Prepares files for previewUrl and upload
+   */
+  (0, _react.useEffect)(() => {
+    const filesToGeneratePreview = fileItems.filter(file => file.file && !file.previewUrl && (file.state === 'none' || !file.state));
+    const filesToUpload = fileItems.filter(file => !file.uploadedFile && file.state !== 'uploading');
+    filesToGeneratePreview.forEach(file => {
+      if (!file.file) {
+        return;
+      }
+      (0, _file.generatePreviewUrl)({
+        file: file.file,
+        callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
+      });
+    });
+    filesToUpload.forEach(file => {
+      setFileItems(prevState => prevState.map(prevFile => {
+        if (prevFile.id === file.id) {
+          return {
+            ...prevFile,
+            state: 'uploading'
+          };
+        }
+        return prevFile;
+      }));
+      void (0, _upload.uploadFile)({
+        fileToUpload: file,
+        personId,
+        accessToken,
+        callback: UploadedFile => handleUploadFileCallback(file, UploadedFile)
+      });
+    });
+  }, [accessToken, fileItems, personId]);
+
+  /**
+   * This function formats and adds files to fileItems
+   */
+  const handleAddFiles = (0, _react.useCallback)(filesToAdd => {
+    const newFileItems = [];
+    filesToAdd.forEach(file => {
+      if (file && !(0, _file.filterDuplicateFile)({
+        files: fileItems,
+        newFile: file
+      })) {
+        newFileItems.push({
+          id: (0, _uuid.v4)(),
+          file,
+          state: 'none'
+        });
+      }
     });
-    setExternalFiles(newExternalFiles);
+    setFileItems(prevState => [...prevState, ...newFileItems]);
+  }, [fileItems]);
+
+  /**
+   * This function adds external files to fileItems
+   */
+  (0, _react.useEffect)(() => {
+    if (files) {
+      const newFileItems = [];
+      files.forEach(file => {
+        newFileItems.push({
+          id: (0, _uuid.v4)(),
+          uploadedFile: file.uploadedFile,
+          file: file.file,
+          state: file.uploadedFile ? 'uploaded' : 'none'
+        });
+      });
+      setFileItems(prevState => [...prevState, ...newFileItems]);
+    }
   }, [files]);
 
   /**
    * This function deletes a selected file from the file list
    */
-  const handleDeleteFile = (0, _react.useCallback)(url => {
+  const handleDeleteFile = (0, _react.useCallback)(id => {
     let fileToDelete;
-    const externalFileToDelete = externalFiles.find(file => file.url === url);
-    if (externalFileToDelete && typeof onRemove === 'function') {
-      onRemove(externalFileToDelete);
-      return;
-    }
-    const filteredFiles = uploadedFiles.filter(file => {
-      const fileUrl = file.url;
-      if (fileUrl === url) {
+    const filteredFiles = fileItems.filter(file => {
+      const fileId = file.id;
+      if (fileId === id) {
         fileToDelete = file;
       }
-      return fileUrl !== url;
+      return fileId !== id;
     });
-    setUploadedFiles(filteredFiles);
+    setFileItems(filteredFiles);
     if (!fileToDelete || !onRemove) {
       return;
     }
     onRemove(fileToDelete);
-  }, [externalFiles, onRemove, uploadedFiles]);
+  }, [fileItems, onRemove]);
 
   /**
    * This function handles the drag and drop
    */
-  const handleDrop = (0, _react.useCallback)(async e => {
+  const handleDrop = (0, _react.useCallback)(e => {
     if (!allowDragAndDrop) {
       return;
     }
     e.preventDefault();
     const draggedFiles = Array.from(e.dataTransfer.files);
-    const updatedFiles = await (0, _upload.uploadFiles)({
-      accessToken,
-      filesToUpload: draggedFiles,
-      personId
-    });
-    const {
-      newUniqueFiles
-    } = (0, _file.filterDuplicateFiles)({
-      oldFiles: uploadedFiles,
-      newFiles: updatedFiles
-    });
-    setUploadedFiles(prevState => [...prevState, ...newUniqueFiles]);
-    if (!onAdd) {
-      return;
-    }
-    onAdd(newUniqueFiles);
-  }, [accessToken, allowDragAndDrop, onAdd, personId, uploadedFiles]);
+    handleAddFiles(draggedFiles);
+  }, [allowDragAndDrop, handleAddFiles]);
 
   /**
    * Returns the ratio of the single file
    */
   const ratio = (0, _react.useMemo)(() => {
-    var _combinedFiles$0$rati, _combinedFiles$;
-    return (
-      // If the length is 1, the ratio or at least 1 is returned
-      combinedFiles.length === 1 ? Math.max((_combinedFiles$0$rati = (_combinedFiles$ = combinedFiles[0]) === null || _combinedFiles$ === void 0 ? void 0 : _combinedFiles$.ratio) !== null && _combinedFiles$0$rati !== void 0 ? _combinedFiles$0$rati : 1, 1) : 1
-    );
-  }, [combinedFiles]);
+    var _fileItems$0$uploaded, _fileItems$, _fileItems$$uploadedF;
+    switch (fileItems.length) {
+      case 0:
+        return 0;
+      case 1:
+        return Math.max((_fileItems$0$uploaded = (_fileItems$ = fileItems[0]) === null || _fileItems$ === void 0 ? void 0 : (_fileItems$$uploadedF = _fileItems$.uploadedFile) === null || _fileItems$$uploadedF === void 0 ? void 0 : _fileItems$$uploadedF.ratio) !== null && _fileItems$0$uploaded !== void 0 ? _fileItems$0$uploaded : 1, 1);
+      case 2:
+        return 2;
+      case 3:
+        return 3;
+      default:
+        return 1;
+    }
+    // // If the length is 1, the ratio or at least 1 is returned
+    // fileItems.length === 1 ? Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1) : 1,
+  }, [fileItems]);
 
   /**
    * Returns the number of columns
    */
   const columns = (0, _react.useMemo)(() => {
-    const combinedFilesLength = combinedFiles.length;
+    const combinedFilesLength = fileItems.length;
     if (combinedFilesLength <= 1) {
       return '';
     }
     return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;
-  }, [combinedFiles]);
+  }, [fileItems.length]);
   const galleryContent = (0, _react.useMemo)(() => {
-    const combinedFilesLength = combinedFiles.length;
+    const combinedFilesLength = fileItems.length;
     if (isEditMode) {
-      const items = combinedFiles.map(file => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
-        uploadedFile: file,
+      const items = fileItems.map(file => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
+        fileItem: file,
         isEditMode: true,
-        ratio: ratio,
         handleDeleteFile: handleDeleteFile
       }));
       items.push( /*#__PURE__*/_react.default.createElement(_AddFile.default, {
-        setUploadedFiles: setUploadedFiles,
-        uploadedFiles: uploadedFiles,
-        onAdd: onAdd,
-        personId: personId,
-        accessToken: accessToken
+        onAdd: handleAddFiles
       }));
       return items;
     }
-    const shortedFiles = combinedFiles.slice(0, 4);
+    const shortedFiles = fileItems.slice(0, 4);
     return shortedFiles.map((file, index) => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
-      uploadedFile: file,
+      fileItem: file,
       isEditMode: false,
-      ratio: ratio,
       handleDeleteFile: handleDeleteFile,
       remainingItemsLength: combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined
     }));
-  }, [combinedFiles, isEditMode, uploadedFiles, onAdd, personId, accessToken, ratio, handleDeleteFile]);
+  }, [fileItems, isEditMode, handleAddFiles, handleDeleteFile]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Gallery.StyledGallery, null, isEditMode ? /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryEditModeWrapper, {
     onDragOver: e => e.preventDefault(),
     onDrop: e => void handleDrop(e)
   }, galleryContent) : /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemWrapper, {
+    ratio: ratio,
     columns: columns,
-    uploadedFileLength: combinedFiles.length
-  }, galleryContent)), [isEditMode, galleryContent, columns, combinedFiles.length, handleDrop]);
+    uploadedFileLength: fileItems.length
+  }, galleryContent)), [isEditMode, galleryContent, ratio, columns, fileItems.length, handleDrop]);
 };
 Gallery.displayName = 'Gallery';
 var _default = Gallery;

package/lib/components/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_file","_upload","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Gallery","_ref","accessToken","allowDragAndDrop","isEditMode","files","onAdd","onRemove","personId","uploadedFiles","setUploadedFiles","useState","externalFiles","setExternalFiles","combinedFiles","useMemo","useEffect","Array","isArray","newExternalFiles","map","file","id","url","thumbnailUrl","handleDeleteFile","useCallback","fileToDelete","externalFileToDelete","find","filteredFiles","filter","fileUrl","handleDrop","e","preventDefault","draggedFiles","from","dataTransfer","updatedFiles","uploadFiles","filesToUpload","newUniqueFiles","filterDuplicateFiles","oldFiles","newFiles","prevState","ratio","_combinedFiles$0$rati","_combinedFiles$","length","Math","max","columns","combinedFilesLength","galleryContent","items","createElement","uploadedFile","push","shortedFiles","slice","index","remainingItemsLength","undefined","StyledGallery","StyledGalleryEditModeWrapper","onDragOver","onDrop","StyledGalleryItemWrapper","uploadedFileLength","displayName","_default","exports"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { ExternalFile, UploadedFile } from '../types/file';\nimport { filterDuplicateFiles } from '../utils/file';\nimport { uploadFiles } from '../utils/upload';\nimport AddFile from './add-file/AddFile';\nimport GalleryItem from './gallery-item/GalleryItem';\nimport {\n    StyledGallery,\n    StyledGalleryEditModeWrapper,\n    StyledGalleryItemWrapper,\n} from './Gallery.styles';\n\nexport type GalleryProps = {\n    /**\n     * AccessToken of the user\n     */\n    accessToken: string;\n    /**\n     * Whether drag and drop is allowed or not\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode?: boolean;\n    /**\n     *  Images and videos which should be displayed\n     */\n    files?: ExternalFile[];\n    /**\n     *  Function to be executed when files are added\n     */\n    onAdd?: (files: UploadedFile[]) => void;\n    /**\n     *  Function to be executed when a file is removed\n     */\n    onRemove?: (file: UploadedFile) => void;\n    /**\n     * PersonId of the user\n     */\n    personId: string;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    accessToken,\n    allowDragAndDrop = false,\n    isEditMode = false,\n    files,\n    onAdd,\n    onRemove,\n    personId,\n}) => {\n    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);\n    const [externalFiles, setExternalFiles] = useState<UploadedFile[]>([]);\n\n    const combinedFiles = useMemo(\n        () => [...externalFiles, ...uploadedFiles],\n        [externalFiles, uploadedFiles]\n    );\n\n    /**\n     * Merge external files with uploaded files\n     */\n    useEffect(() => {\n        if (!files || !Array.isArray(files)) {\n            return;\n        }\n\n        const newExternalFiles: UploadedFile[] = files.map((file) => {\n            if ('thumbnailUrl' in file) {\n                return {\n                    id: file.id,\n                    url: file.url,\n                    thumbnailUrl: file.url,\n                };\n            }\n\n            return {\n                id: file.id,\n                url: file.url,\n            };\n        });\n\n        setExternalFiles(newExternalFiles);\n    }, [files]);\n\n    /**\n     * This function deletes a selected file from the file list\n     */\n    const handleDeleteFile = useCallback(\n        (url: string) => {\n            let fileToDelete: UploadedFile | undefined;\n\n            const externalFileToDelete = externalFiles.find((file) => file.url === url);\n\n            if (externalFileToDelete && typeof onRemove === 'function') {\n                onRemove(externalFileToDelete);\n\n                return;\n            }\n\n            const filteredFiles = uploadedFiles.filter((file) => {\n                const fileUrl = file.url;\n\n                if (fileUrl === url) {\n                    fileToDelete = file;\n                }\n\n                return fileUrl !== url;\n            });\n\n            setUploadedFiles(filteredFiles);\n\n            if (!fileToDelete || !onRemove) {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [externalFiles, onRemove, uploadedFiles]\n    );\n\n    /**\n     * This function handles the drag and drop\n     */\n    const handleDrop = useCallback(\n        async (e: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            const updatedFiles = await uploadFiles({\n                accessToken,\n                filesToUpload: draggedFiles,\n                personId,\n            });\n\n            const { newUniqueFiles } = filterDuplicateFiles({\n                oldFiles: uploadedFiles,\n                newFiles: updatedFiles,\n            });\n\n            setUploadedFiles((prevState) => [...prevState, ...newUniqueFiles]);\n\n            if (!onAdd) {\n                return;\n            }\n\n            onAdd(newUniqueFiles);\n        },\n        [accessToken, allowDragAndDrop, onAdd, personId, uploadedFiles]\n    );\n\n    /**\n     * Returns the ratio of the single file\n     */\n    const ratio = useMemo(\n        () =>\n            // If the length is 1, the ratio or at least 1 is returned\n            combinedFiles.length === 1 ? Math.max(combinedFiles[0]?.ratio ?? 1, 1) : 1,\n        [combinedFiles]\n    );\n\n    /**\n     * Returns the number of columns\n     */\n    const columns = useMemo(() => {\n        const combinedFilesLength = combinedFiles.length;\n\n        if (combinedFilesLength <= 1) {\n            return '';\n        }\n\n        return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;\n    }, [combinedFiles]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = combinedFiles.length;\n\n        if (isEditMode) {\n            const items = combinedFiles.map((file) => (\n                <GalleryItem\n                    uploadedFile={file}\n                    isEditMode\n                    ratio={ratio}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            items.push(\n                <AddFile\n                    setUploadedFiles={setUploadedFiles}\n                    uploadedFiles={uploadedFiles}\n                    onAdd={onAdd}\n                    personId={personId}\n                    accessToken={accessToken}\n                />\n            );\n\n            return items;\n        }\n\n        const shortedFiles = combinedFiles.slice(0, 4);\n\n        return shortedFiles.map((file, index) => (\n            <GalleryItem\n                uploadedFile={file}\n                isEditMode={false}\n                ratio={ratio}\n                handleDeleteFile={handleDeleteFile}\n                remainingItemsLength={\n                    combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                }\n            />\n        ));\n    }, [\n        combinedFiles,\n        isEditMode,\n        uploadedFiles,\n        onAdd,\n        personId,\n        accessToken,\n        ratio,\n        handleDeleteFile,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        columns={columns}\n                        uploadedFileLength={combinedFiles.length}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, galleryContent, columns, combinedFiles.length, handleDrop]\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAI0B,SAAAI,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAZ,wBAAAQ,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAiC1B,MAAMW,OAAyB,GAAGC,IAAA,IAQ5B;EAAA,IAR6B;IAC/BC,WAAW;IACXC,gBAAgB,GAAG,KAAK;IACxBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,KAAK;IACLC,QAAQ;IACRC;EACJ,CAAC,GAAAP,IAAA;EACG,MAAM,CAACQ,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAiB,EAAE,CAAC;EACtE,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAF,eAAQ,EAAiB,EAAE,CAAC;EAEtE,MAAMG,aAAa,GAAG,IAAAC,cAAO,EACzB,MAAM,CAAC,GAAGH,aAAa,EAAE,GAAGH,aAAa,CAAC,EAC1C,CAACG,aAAa,EAAEH,aAAa,CACjC,CAAC;;EAED;AACJ;AACA;EACI,IAAAO,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACX,KAAK,IAAI,CAACY,KAAK,CAACC,OAAO,CAACb,KAAK,CAAC,EAAE;MACjC;IACJ;IAEA,MAAMc,gBAAgC,GAAGd,KAAK,CAACe,GAAG,CAAEC,IAAI,IAAK;MACzD,IAAI,cAAc,IAAIA,IAAI,EAAE;QACxB,OAAO;UACHC,EAAE,EAAED,IAAI,CAACC,EAAE;UACXC,GAAG,EAAEF,IAAI,CAACE,GAAG;UACbC,YAAY,EAAEH,IAAI,CAACE;QACvB,CAAC;MACL;MAEA,OAAO;QACHD,EAAE,EAAED,IAAI,CAACC,EAAE;QACXC,GAAG,EAAEF,IAAI,CAACE;MACd,CAAC;IACL,CAAC,CAAC;IAEFV,gBAAgB,CAACM,gBAAgB,CAAC;EACtC,CAAC,EAAE,CAACd,KAAK,CAAC,CAAC;;EAEX;AACJ;AACA;EACI,MAAMoB,gBAAgB,GAAG,IAAAC,kBAAW,EAC/BH,GAAW,IAAK;IACb,IAAII,YAAsC;IAE1C,MAAMC,oBAAoB,GAAGhB,aAAa,CAACiB,IAAI,CAAER,IAAI,IAAKA,IAAI,CAACE,GAAG,KAAKA,GAAG,CAAC;IAE3E,IAAIK,oBAAoB,IAAI,OAAOrB,QAAQ,KAAK,UAAU,EAAE;MACxDA,QAAQ,CAACqB,oBAAoB,CAAC;MAE9B;IACJ;IAEA,MAAME,aAAa,GAAGrB,aAAa,CAACsB,MAAM,CAAEV,IAAI,IAAK;MACjD,MAAMW,OAAO,GAAGX,IAAI,CAACE,GAAG;MAExB,IAAIS,OAAO,KAAKT,GAAG,EAAE;QACjBI,YAAY,GAAGN,IAAI;MACvB;MAEA,OAAOW,OAAO,KAAKT,GAAG;IAC1B,CAAC,CAAC;IAEFb,gBAAgB,CAACoB,aAAa,CAAC;IAE/B,IAAI,CAACH,YAAY,IAAI,CAACpB,QAAQ,EAAE;MAC5B;IACJ;IAEAA,QAAQ,CAACoB,YAAY,CAAC;EAC1B,CAAC,EACD,CAACf,aAAa,EAAEL,QAAQ,EAAEE,aAAa,CAC3C,CAAC;;EAED;AACJ;AACA;EACI,MAAMwB,UAAU,GAAG,IAAAP,kBAAW,EAC1B,MAAOQ,CAA4B,IAAK;IACpC,IAAI,CAAC/B,gBAAgB,EAAE;MACnB;IACJ;IAEA+B,CAAC,CAACC,cAAc,CAAC,CAAC;IAClB,MAAMC,YAAY,GAAGnB,KAAK,CAACoB,IAAI,CAACH,CAAC,CAACI,YAAY,CAACjC,KAAK,CAAC;IAErD,MAAMkC,YAAY,GAAG,MAAM,IAAAC,mBAAW,EAAC;MACnCtC,WAAW;MACXuC,aAAa,EAAEL,YAAY;MAC3B5B;IACJ,CAAC,CAAC;IAEF,MAAM;MAAEkC;IAAe,CAAC,GAAG,IAAAC,0BAAoB,EAAC;MAC5CC,QAAQ,EAAEnC,aAAa;MACvBoC,QAAQ,EAAEN;IACd,CAAC,CAAC;IAEF7B,gBAAgB,CAAEoC,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGJ,cAAc,CAAC,CAAC;IAElE,IAAI,CAACpC,KAAK,EAAE;MACR;IACJ;IAEAA,KAAK,CAACoC,cAAc,CAAC;EACzB,CAAC,EACD,CAACxC,WAAW,EAAEC,gBAAgB,EAAEG,KAAK,EAAEE,QAAQ,EAAEC,aAAa,CAClE,CAAC;;EAED;AACJ;AACA;EACI,MAAMsC,KAAK,GAAG,IAAAhC,cAAO,EACjB;IAAA,IAAAiC,qBAAA,EAAAC,eAAA;IAAA;MACI;MACAnC,aAAa,CAACoC,MAAM,KAAK,CAAC,GAAGC,IAAI,CAACC,GAAG,EAAAJ,qBAAA,IAAAC,eAAA,GAACnC,aAAa,CAAC,CAAC,CAAC,cAAAmC,eAAA,uBAAhBA,eAAA,CAAkBF,KAAK,cAAAC,qBAAA,cAAAA,qBAAA,GAAI,CAAC,EAAE,CAAC,CAAC,GAAG;IAAC;EAAA,GAC9E,CAAClC,aAAa,CAClB,CAAC;;EAED;AACJ;AACA;EACI,MAAMuC,OAAO,GAAG,IAAAtC,cAAO,EAAC,MAAM;IAC1B,MAAMuC,mBAAmB,GAAGxC,aAAa,CAACoC,MAAM;IAEhD,IAAII,mBAAmB,IAAI,CAAC,EAAE;MAC1B,OAAO,EAAE;IACb;IAEA,OAAQ,UAASA,mBAAmB,KAAK,CAAC,GAAG,CAAC,GAAG,CAAE,QAAO;EAC9D,CAAC,EAAE,CAACxC,aAAa,CAAC,CAAC;EAEnB,MAAMyC,cAAc,GAAG,IAAAxC,cAAO,EAAC,MAAM;IACjC,MAAMuC,mBAAmB,GAAGxC,aAAa,CAACoC,MAAM;IAEhD,IAAI9C,UAAU,EAAE;MACZ,MAAMoD,KAAK,GAAG1C,aAAa,CAACM,GAAG,CAAEC,IAAI,iBACjCpD,MAAA,CAAAW,OAAA,CAAA6E,aAAA,CAACjF,YAAA,CAAAI,OAAW;QACR8E,YAAY,EAAErC,IAAK;QACnBjB,UAAU;QACV2C,KAAK,EAAEA,KAAM;QACbtB,gBAAgB,EAAEA;MAAiB,CACtC,CACJ,CAAC;MAEF+B,KAAK,CAACG,IAAI,eACN1F,MAAA,CAAAW,OAAA,CAAA6E,aAAA,CAACnF,QAAA,CAAAM,OAAO;QACJ8B,gBAAgB,EAAEA,gBAAiB;QACnCD,aAAa,EAAEA,aAAc;QAC7BH,KAAK,EAAEA,KAAM;QACbE,QAAQ,EAAEA,QAAS;QACnBN,WAAW,EAAEA;MAAY,CAC5B,CACL,CAAC;MAED,OAAOsD,KAAK;IAChB;IAEA,MAAMI,YAAY,GAAG9C,aAAa,CAAC+C,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IAE9C,OAAOD,YAAY,CAACxC,GAAG,CAAC,CAACC,IAAI,EAAEyC,KAAK,kBAChC7F,MAAA,CAAAW,OAAA,CAAA6E,aAAA,CAACjF,YAAA,CAAAI,OAAW;MACR8E,YAAY,EAAErC,IAAK;MACnBjB,UAAU,EAAE,KAAM;MAClB2C,KAAK,EAAEA,KAAM;MACbtB,gBAAgB,EAAEA,gBAAiB;MACnCsC,oBAAoB,EAChBT,mBAAmB,GAAG,CAAC,IAAIQ,KAAK,KAAK,CAAC,GAAGR,mBAAmB,GAAGU;IAClE,CACJ,CACJ,CAAC;EACN,CAAC,EAAE,CACClD,aAAa,EACbV,UAAU,EACVK,aAAa,EACbH,KAAK,EACLE,QAAQ,EACRN,WAAW,EACX6C,KAAK,EACLtB,gBAAgB,CACnB,CAAC;EAEF,OAAO,IAAAV,cAAO,EACV,mBACI9C,MAAA,CAAAW,OAAA,CAAA6E,aAAA,CAAChF,QAAA,CAAAwF,aAAa,QACT7D,UAAU,gBACPnC,MAAA,CAAAW,OAAA,CAAA6E,aAAA,CAAChF,QAAA,CAAAyF,4BAA4B;IACzBC,UAAU,EAAGjC,CAAC,IAAKA,CAAC,CAACC,cAAc,CAAC,CAAE;IACtCiC,MAAM,EAAGlC,CAAC,IAAK,KAAKD,UAAU,CAACC,CAAC;EAAE,GAEjCqB,cACyB,CAAC,gBAE/BtF,MAAA,CAAAW,OAAA,CAAA6E,aAAA,CAAChF,QAAA,CAAA4F,wBAAwB;IACrBhB,OAAO,EAAEA,OAAQ;IACjBiB,kBAAkB,EAAExD,aAAa,CAACoC;EAAO,GAExCK,cACqB,CAEnB,CAClB,EACD,CAACnD,UAAU,EAAEmD,cAAc,EAAEF,OAAO,EAAEvC,aAAa,CAACoC,MAAM,EAAEjB,UAAU,CAC1E,CAAC;AACL,CAAC;AAEDjC,OAAO,CAACuE,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAEjBxE,OAAO;AAAAyE,OAAA,CAAA7F,OAAA,GAAA4F,QAAA"}
+{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_uuid","_file","_upload","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Gallery","_ref","accessToken","allowDragAndDrop","isEditMode","files","onAdd","onRemove","personId","fileItems","setFileItems","useState","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","UploadedFile","uploadedFile","state","useEffect","filesToGeneratePreview","filter","filesToUpload","forEach","generatePreviewUrl","callback","uploadFile","fileToUpload","handleAddFiles","useCallback","filesToAdd","newFileItems","filterDuplicateFile","newFile","push","uuidv4","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","ratio","useMemo","_fileItems$0$uploaded","_fileItems$","_fileItems$$uploadedF","length","Math","max","columns","combinedFilesLength","galleryContent","items","createElement","fileItem","shortedFiles","slice","index","remainingItemsLength","undefined","StyledGallery","StyledGalleryEditModeWrapper","onDragOver","onDrop","StyledGalleryItemWrapper","uploadedFileLength","displayName","_default","exports"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { FileItem, Image, Video } from '../types/file';\nimport { filterDuplicateFile, generatePreviewUrl } from '../utils/file';\nimport { uploadFile } from '../utils/upload';\nimport AddFile from './add-file/AddFile';\nimport GalleryItem from './gallery-item/GalleryItem';\nimport {\n    StyledGallery,\n    StyledGalleryEditModeWrapper,\n    StyledGalleryItemWrapper,\n} from './Gallery.styles';\n\nexport type GalleryProps = {\n    /**\n     * AccessToken of the user\n     */\n    accessToken: string;\n    /**\n     * Whether drag and drop is allowed or not\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode?: boolean;\n    /**\n     *  Images and videos which should be displayed\n     */\n    files?: FileItem[];\n    /**\n     *  Function to be executed when files are added\n     */\n    onAdd?: (files: FileItem[]) => void;\n    /**\n     *  Function to be executed when a file is removed\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * PersonId of the user\n     */\n    personId: string;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    accessToken,\n    allowDragAndDrop = false,\n    isEditMode = false,\n    files,\n    onAdd,\n    onRemove,\n    personId,\n}) => {\n    const [fileItems, setFileItems] = useState<FileItem[]>([]);\n\n    /**\n     * This function adds a previewUrl to fileItems\n     */\n    const handlePreviewUrlCallback = (previewUrl: string, file: FileItem) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) => {\n                if (prevFile.id === file.id) {\n                    return { ...prevFile, previewUrl };\n                }\n                return prevFile;\n            })\n        );\n    };\n\n    /**\n     * This function adds uploaded files to fileItems\n     */\n    const handleUploadFileCallback = (file: FileItem, UploadedFile: Video | Image) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) => {\n                if (prevFile.id === file.id) {\n                    return {\n                        ...prevFile,\n                        uploadedFile: UploadedFile,\n                        id: UploadedFile.id,\n                        state: 'uploaded',\n                    };\n                }\n                return prevFile;\n            })\n        );\n    };\n\n    /**\n     * This function returns the fileItems if some files are updated\n     */\n    useEffect(() => {\n        if (onAdd) {\n            onAdd(fileItems);\n        }\n    }, [fileItems, onAdd]);\n\n    /**\n     * Prepares files for previewUrl and upload\n     */\n    useEffect(() => {\n        const filesToGeneratePreview = fileItems.filter(\n            (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state)\n        );\n\n        const filesToUpload = fileItems.filter(\n            (file) => !file.uploadedFile && file.state !== 'uploading'\n        );\n\n        filesToGeneratePreview.forEach((file) => {\n            if (!file.file) {\n                return;\n            }\n\n            generatePreviewUrl({\n                file: file.file,\n                callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n            });\n        });\n\n        filesToUpload.forEach((file) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        return { ...prevFile, state: 'uploading' };\n                    }\n                    return prevFile;\n                })\n            );\n\n            void uploadFile({\n                fileToUpload: file,\n                personId,\n                accessToken,\n                callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n            });\n        });\n    }, [accessToken, fileItems, personId]);\n\n    /**\n     * This function formats and adds files to fileItems\n     */\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            const newFileItems: FileItem[] = [];\n\n            filesToAdd.forEach((file) => {\n                if (file && !filterDuplicateFile({ files: fileItems, newFile: file })) {\n                    newFileItems.push({\n                        id: uuidv4(),\n                        file,\n                        state: 'none',\n                    });\n                }\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\n        },\n        [fileItems]\n    );\n\n    /**\n     * This function adds external files to fileItems\n     */\n    useEffect(() => {\n        if (files) {\n            const newFileItems: FileItem[] = [];\n\n            files.forEach((file) => {\n                newFileItems.push({\n                    id: uuidv4(),\n                    uploadedFile: file.uploadedFile,\n                    file: file.file,\n                    state: file.uploadedFile ? 'uploaded' : 'none',\n                });\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\n        }\n    }, [files]);\n\n    /**\n     * This function deletes a selected file from the file list\n     */\n    const handleDeleteFile = useCallback(\n        (id?: string) => {\n            let fileToDelete: FileItem | undefined;\n\n            const filteredFiles = fileItems.filter((file) => {\n                const fileId = file.id;\n\n                if (fileId === id) {\n                    fileToDelete = file;\n                }\n\n                return fileId !== id;\n            });\n\n            setFileItems(filteredFiles);\n\n            if (!fileToDelete || !onRemove) {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [fileItems, onRemove]\n    );\n\n    /**\n     * This function handles the drag and drop\n     */\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [allowDragAndDrop, handleAddFiles]\n    );\n\n    /**\n     * Returns the ratio of the single file\n     */\n    const ratio = useMemo(() => {\n        switch (fileItems.length) {\n            case 0:\n                return 0;\n            case 1:\n                return Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1);\n            case 2:\n                return 2;\n            case 3:\n                return 3;\n            default:\n                return 1;\n        }\n        // // If the length is 1, the ratio or at least 1 is returned\n        // fileItems.length === 1 ? Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1) : 1,\n    }, [fileItems]);\n\n    /**\n     * Returns the number of columns\n     */\n    const columns = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (combinedFilesLength <= 1) {\n            return '';\n        }\n\n        return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;\n    }, [fileItems.length]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (isEditMode) {\n            const items = fileItems.map((file) => (\n                <GalleryItem fileItem={file} isEditMode handleDeleteFile={handleDeleteFile} />\n            ));\n\n            items.push(<AddFile onAdd={handleAddFiles} />);\n\n            return items;\n        }\n\n        const shortedFiles = fileItems.slice(0, 4);\n\n        return shortedFiles.map((file, index) => (\n            <GalleryItem\n                fileItem={file}\n                isEditMode={false}\n                handleDeleteFile={handleDeleteFile}\n                remainingItemsLength={\n                    combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                }\n            />\n        ));\n    }, [fileItems, isEditMode, handleAddFiles, handleDeleteFile]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        ratio={ratio}\n                        columns={columns}\n                        uploadedFileLength={fileItems.length}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, galleryContent, ratio, columns, fileItems.length, handleDrop]\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}

package/lib/components/Gallery.styles.d.ts

@@ -2,5 +2,6 @@ export declare const StyledGallery: import("styled-components").StyledComponent<
 export declare const StyledGalleryItemWrapper: import("styled-components").StyledComponent<"div", any, {
     columns: string;
     uploadedFileLength: number;
+    ratio: number;
 }, never>;
 export declare const StyledGalleryEditModeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Gallery.styles.js

@@ -13,13 +13,15 @@ const StyledGalleryItemWrapper = _styledComponents.default.div`
     ${_ref => {
   let {
     columns,
-    uploadedFileLength
+    uploadedFileLength,
+    ratio
   } = _ref;
   return uploadedFileLength > 1 && (0, _styledComponents.css)`
             display: grid;
             grid-template-columns: ${columns};
             row-gap: 5px;
             column-gap: 5px;
+            aspect-ratio: ${ratio};
         `;
 }}
 `;

package/lib/components/Gallery.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledGallery","styled","div","exports","StyledGalleryItemWrapper","_ref","columns","uploadedFileLength","css","StyledGalleryEditModeWrapper"],"sources":["../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const StyledGallery = styled.div``;\n\nexport const StyledGalleryItemWrapper = styled.div<{ columns: string; uploadedFileLength: number }>`\n    ${({ columns, uploadedFileLength }) =>\n        uploadedFileLength > 1 &&\n        css`\n            display: grid;\n            grid-template-columns: ${columns};\n            row-gap: 5px;\n            column-gap: 5px;\n        `}\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    row-gap: 10px;\n    column-gap: 10px;\n    padding: 15px;\n\n    & > * {\n        flex-basis: calc(25% - 7.5px);\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEzC,MAAMW,aAAa,GAAGC,yBAAM,CAACC,GAAI,EAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA;AAEnC,MAAMI,wBAAwB,GAAGH,yBAAM,CAACC,GAAqD;AACpG,MAAMG,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAmB,CAAC,GAAAF,IAAA;EAAA,OAC9BE,kBAAkB,GAAG,CAAC,IACtB,IAAAC,qBAAG,CAAC;AACZ;AACA,qCAAqCF,OAAQ;AAC7C;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACH,OAAA,CAAAC,wBAAA,GAAAA,wBAAA;AAEK,MAAMK,4BAA4B,GAAGR,yBAAM,CAACC,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAM,4BAAA,GAAAA,4BAAA"}
+{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledGallery","styled","div","exports","StyledGalleryItemWrapper","_ref","columns","uploadedFileLength","ratio","css","StyledGalleryEditModeWrapper"],"sources":["../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const StyledGallery = styled.div``;\n\nexport const StyledGalleryItemWrapper = styled.div<{\n    columns: string;\n    uploadedFileLength: number;\n    ratio: number;\n}>`\n    ${({ columns, uploadedFileLength, ratio }) =>\n        uploadedFileLength > 1 &&\n        css`\n            display: grid;\n            grid-template-columns: ${columns};\n            row-gap: 5px;\n            column-gap: 5px;\n            aspect-ratio: ${ratio};\n        `}\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    row-gap: 10px;\n    column-gap: 10px;\n    padding: 15px;\n\n    & > * {\n        flex-basis: calc(25% - 7.5px);\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEzC,MAAMW,aAAa,GAAGC,yBAAM,CAACC,GAAI,EAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA;AAEnC,MAAMI,wBAAwB,GAAGH,yBAAM,CAACC,GAI5C;AACH,MAAMG,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC,kBAAkB;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAAA,OACrCE,kBAAkB,GAAG,CAAC,IACtB,IAAAE,qBAAG,CAAC;AACZ;AACA,qCAAqCH,OAAQ;AAC7C;AACA;AACA,4BAA4BE,KAAM;AAClC,SAAS;AAAA,CAAC;AACV,CAAC;AAACL,OAAA,CAAAC,wBAAA,GAAAA,wBAAA;AAEK,MAAMM,4BAA4B,GAAGT,yBAAM,CAACC,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAO,4BAAA,GAAAA,4BAAA"}

package/lib/components/add-file/AddFile.d.ts

@@ -1,26 +1,9 @@
-import { Dispatch, FC, SetStateAction } from 'react';
-import type { UploadedFile } from '../../types/file';
+import { FC } from 'react';
 export type AddFileProps = {
-    /**
-     *  Function to add files to the uploaded files
-     */
-    setUploadedFiles: Dispatch<SetStateAction<UploadedFile[]>>;
-    /**
-     *  Images and videos which should be displayed
-     */
-    uploadedFiles: UploadedFile[];
     /**
      *  Function to be executed when files are added
      */
-    onAdd?: (files: UploadedFile[]) => void;
-    /**
-     * PersonId of the user
-     */
-    personId: string;
-    /**
-     * AccessToken of the user
-     */
-    accessToken: string;
+    onAdd: (files: File[]) => void;
 };
 declare const AddFile: FC<AddFileProps>;
 export default AddFile;

package/lib/components/add-file/AddFile.js

@@ -7,67 +7,20 @@ exports.default = void 0;
 var _core = require("@chayns-components/core");
 var _react = _interopRequireWildcard(require("react"));
 var _file = require("../../utils/file");
-var _upload = require("../../utils/upload");
 var _AddFile = require("./AddFile.styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const AddFile = _ref => {
   let {
-    setUploadedFiles,
-    uploadedFiles,
-    onAdd,
-    accessToken,
-    personId
+    onAdd
   } = _ref;
-  /**
-   * Open a dialog to select files
-   */
   const openSelectDialog = (0, _react.useCallback)(async () => {
-    const selectedFiles = await (0, _file.selectFiles)({
+    const files = await (0, _file.selectFiles)({
       multiple: true,
       type: 'image/*, video/*'
     });
-    if (!selectedFiles || selectedFiles.length <= 0) {
-      return;
-    }
-    const fileArray = (0, _file.convertFileListToArray)(selectedFiles);
-
-    // Filters files to use only under 64MB
-    const filteredFileArray = fileArray.filter(_ref2 => {
-      let {
-        size,
-        type
-      } = _ref2;
-      const sizeInMB = size / 1024 / 1024;
-      if (type.includes('video/') && sizeInMB > 500) {
-        return false;
-      }
-      return !(type.includes('image/') && sizeInMB > 64);
-    });
-    if (fileArray.length !== filteredFileArray.length) {
-      // ToDo show dialog that some files are to big
-    }
-    if (filteredFileArray.length === 0) {
-      // ToDo show dialog that all files are to big
-
-      return;
-    }
-    const updatedFiles = await (0, _upload.uploadFiles)({
-      filesToUpload: filteredFileArray,
-      personId,
-      accessToken
-    });
-    const {
-      newUniqueFiles
-    } = (0, _file.filterDuplicateFiles)({
-      oldFiles: uploadedFiles,
-      newFiles: updatedFiles
-    });
-    if (onAdd) {
-      onAdd(newUniqueFiles);
-    }
-    setUploadedFiles(prevState => [...prevState, ...newUniqueFiles]);
-  }, [accessToken, onAdd, personId, setUploadedFiles, uploadedFiles]);
+    onAdd(files);
+  }, [onAdd]);
   return /*#__PURE__*/_react.default.createElement(_AddFile.StyledAddFile, {
     key: "addButton"
   }, /*#__PURE__*/_react.default.createElement(_AddFile.StyledAddFIleIconWrapper, {

package/lib/components/add-file/AddFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddFile.js","names":["_core","require","_react","_interopRequireWildcard","_file","_upload","_AddFile","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AddFile","_ref","setUploadedFiles","uploadedFiles","onAdd","accessToken","personId","openSelectDialog","useCallback","selectedFiles","selectFiles","multiple","type","length","fileArray","convertFileListToArray","filteredFileArray","filter","_ref2","size","sizeInMB","includes","updatedFiles","uploadFiles","filesToUpload","newUniqueFiles","filterDuplicateFiles","oldFiles","newFiles","prevState","createElement","StyledAddFile","StyledAddFIleIconWrapper","onClick","Icon","icons","displayName","_default","exports"],"sources":["../../../src/components/add-file/AddFile.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { Dispatch, FC, SetStateAction, useCallback } from 'react';\nimport type { UploadedFile } from '../../types/file';\nimport { convertFileListToArray, filterDuplicateFiles, selectFiles } from '../../utils/file';\nimport { uploadFiles } from '../../utils/upload';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\n\nexport type AddFileProps = {\n    /**\n     *  Function to add files to the uploaded files\n     */\n    setUploadedFiles: Dispatch<SetStateAction<UploadedFile[]>>;\n    /**\n     *  Images and videos which should be displayed\n     */\n    uploadedFiles: UploadedFile[];\n    /**\n     *  Function to be executed when files are added\n     */\n    onAdd?: (files: UploadedFile[]) => void;\n    /**\n     * PersonId of the user\n     */\n    personId: string;\n    /**\n     * AccessToken of the user\n     */\n    accessToken: string;\n};\n\nconst AddFile: FC<AddFileProps> = ({\n    setUploadedFiles,\n    uploadedFiles,\n    onAdd,\n    accessToken,\n    personId,\n}) => {\n    /**\n     * Open a dialog to select files\n     */\n    const openSelectDialog = useCallback(async () => {\n        const selectedFiles = await selectFiles({\n            multiple: true,\n            type: 'image/*, video/*',\n        });\n\n        if (!selectedFiles || selectedFiles.length <= 0) {\n            return;\n        }\n\n        const fileArray = convertFileListToArray(selectedFiles);\n\n        // Filters files to use only under 64MB\n        const filteredFileArray = fileArray.filter(({ size, type }) => {\n            const sizeInMB = size / 1024 / 1024;\n\n            if (type.includes('video/') && sizeInMB > 500) {\n                return false;\n            }\n\n            return !(type.includes('image/') && sizeInMB > 64);\n        });\n\n        if (fileArray.length !== filteredFileArray.length) {\n            // ToDo show dialog that some files are to big\n        }\n\n        if (filteredFileArray.length === 0) {\n            // ToDo show dialog that all files are to big\n\n            return;\n        }\n\n        const updatedFiles = await uploadFiles({\n            filesToUpload: filteredFileArray,\n            personId,\n            accessToken,\n        });\n\n        const { newUniqueFiles } = filterDuplicateFiles({\n            oldFiles: uploadedFiles,\n            newFiles: updatedFiles,\n        });\n\n        if (onAdd) {\n            onAdd(newUniqueFiles);\n        }\n\n        setUploadedFiles((prevState) => [...prevState, ...newUniqueFiles]);\n    }, [accessToken, onAdd, personId, setUploadedFiles, uploadedFiles]);\n\n    return (\n        <StyledAddFile key=\"addButton\">\n            <StyledAddFIleIconWrapper onClick={() => void openSelectDialog()}>\n                <Icon size={40} icons={['fa fa-plus']} />\n            </StyledAddFIleIconWrapper>\n        </StyledAddFile>\n    );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default AddFile;\n"],"mappings":"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"}
+{"version":3,"file":"AddFile.js","names":["_core","require","_react","_interopRequireWildcard","_file","_AddFile","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AddFile","_ref","onAdd","openSelectDialog","useCallback","files","selectFiles","multiple","type","createElement","StyledAddFile","StyledAddFIleIconWrapper","onClick","Icon","size","icons","displayName","_default","exports"],"sources":["../../../src/components/add-file/AddFile.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\nimport { selectFiles } from '../../utils/file';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\n\nexport type AddFileProps = {\n    /**\n     *  Function to be executed when files are added\n     */\n    onAdd: (files: File[]) => void;\n};\n\nconst AddFile: FC<AddFileProps> = ({ onAdd }) => {\n    const openSelectDialog = useCallback(async () => {\n        const files = await selectFiles({\n            multiple: true,\n            type: 'image/*, video/*',\n        });\n\n        onAdd(files);\n    }, [onAdd]);\n\n    return (\n        <StyledAddFile key=\"addButton\">\n            <StyledAddFIleIconWrapper onClick={() => void openSelectDialog()}>\n                <Icon size={40} icons={['fa fa-plus']} />\n            </StyledAddFIleIconWrapper>\n        </StyledAddFile>\n    );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default AddFile;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAA2E,SAAAK,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAJ,wBAAAQ,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAS3E,MAAMW,OAAyB,GAAGC,IAAA,IAAe;EAAA,IAAd;IAAEC;EAAM,CAAC,GAAAD,IAAA;EACxC,MAAME,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,YAAY;IAC7C,MAAMC,KAAK,GAAG,MAAM,IAAAC,iBAAW,EAAC;MAC5BC,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFN,KAAK,CAACG,KAAK,CAAC;EAChB,CAAC,EAAE,CAACH,KAAK,CAAC,CAAC;EAEX,oBACI5B,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,QAAA,CAAAiC,aAAa;IAAChB,GAAG,EAAC;EAAW,gBAC1BpB,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,QAAA,CAAAkC,wBAAwB;IAACC,OAAO,EAAEA,CAAA,KAAM,KAAKT,gBAAgB,CAAC;EAAE,gBAC7D7B,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAACrC,KAAA,CAAAyC,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDf,OAAO,CAACgB,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAEjBjB,OAAO;AAAAkB,OAAA,CAAAjC,OAAA,GAAAgC,QAAA"}

package/lib/components/gallery-item/GalleryItem.d.ts

@@ -1,22 +1,18 @@
 import { FC } from 'react';
-import type { UploadedFile } from '../../types/file';
+import type { FileItem } from '../../types/file';
 export type GalleryItemProps = {
     /**
      *  Images and videos which should be displayed
      */
-    uploadedFile: UploadedFile;
+    fileItem: FileItem;
     /**
      *  Whether images and videos can be edited
      */
     isEditMode: boolean;
-    /**
-     *  Ratio of the images and videos
-     */
-    ratio: number;
     /**
      *  Function to be executed wehen a file is deleted
      */
-    handleDeleteFile: (url: string) => void;
+    handleDeleteFile: (id?: string) => void;
     /**
      *  Length of the uploaded files
      */