@chayns-components/gallery 5.0.0-beta.441 → 5.0.0-beta.443

package/lib/components/Gallery.js

@@ -1,23 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _core = require("@chayns-components/core");
-var _chaynsApi = require("chayns-api");
-var _react = _interopRequireWildcard(require("react"));
-var _uuid = require("uuid");
-var _gallery = require("../types/gallery");
-var _file = require("../utils/file");
-var _AddFile = _interopRequireDefault(require("./add-file/AddFile"));
-var _GalleryItem = _interopRequireDefault(require("./gallery-item/GalleryItem"));
-var _Gallery = require("./Gallery.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import { uploadFile } from '@chayns-components/core';
 // TODO: Check why absolute import is needed
-
+import { MediaType, openMedia } from 'chayns-api';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { GalleryViewMode } from '../types/gallery';
+import { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';
+import AddFile from './add-file/AddFile';
+import GalleryItem from './gallery-item/GalleryItem';
+import { StyledGallery, StyledGalleryEditModeWrapper, StyledGalleryItemWrapper } from './Gallery.styles';
 const Gallery = _ref => {
   let {
     accessToken,
@@ -29,9 +19,9 @@ const Gallery = _ref => {
     onFileCountChange,
     onRemove,
     personId,
-    viewMode = _gallery.GalleryViewMode.GRID
+    viewMode = GalleryViewMode.GRID
   } = _ref;
-  const [fileItems, setFileItems] = (0, _react.useState)([]);
+  const [fileItems, setFileItems] = useState([]);
 
   /**
    * This function adds a previewUrl to fileItems
@@ -51,7 +41,7 @@ const Gallery = _ref => {
   /**
    * This function adds uploaded files to fileItems
    */
-  const handleUploadFileCallback = (0, _react.useCallback)((file, UploadedFile) => {
+  const handleUploadFileCallback = useCallback((file, UploadedFile) => {
     setFileItems(prevState => prevState.map(prevFile => {
       if (prevFile.id === file.id) {
         if (typeof onAdd === 'function') {
@@ -74,7 +64,7 @@ const Gallery = _ref => {
   /**
    * Returns the current count to check if all files are uploaded
    */
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (typeof onFileCountChange === 'function') {
       onFileCountChange(fileItems.length);
     }
@@ -83,7 +73,7 @@ const Gallery = _ref => {
   /**
    * Prepares files for previewUrl and upload
    */
-  (0, _react.useEffect)(() => {
+  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 => {
@@ -91,13 +81,13 @@ const Gallery = _ref => {
         return;
       }
       if (file.file.type.includes('video/')) {
-        (0, _file.generateVideoThumbnail)({
+        generateVideoThumbnail({
           file: file.file,
           callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
         });
         return;
       }
-      (0, _file.generatePreviewUrl)({
+      generatePreviewUrl({
         file: file.file,
         callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
       });
@@ -112,7 +102,7 @@ const Gallery = _ref => {
         }
         return prevFile;
       }));
-      void (0, _core.uploadFile)({
+      void uploadFile({
         fileToUpload: file,
         personId,
         accessToken,
@@ -124,15 +114,15 @@ const Gallery = _ref => {
   /**
    * This function formats and adds files to fileItems
    */
-  const handleAddFiles = (0, _react.useCallback)(filesToAdd => {
+  const handleAddFiles = useCallback(filesToAdd => {
     const newFileItems = [];
     filesToAdd.forEach(file => {
-      if (file && !(0, _file.filterDuplicateFile)({
+      if (file && !filterDuplicateFile({
         files: fileItems,
         newFile: file
       })) {
         newFileItems.push({
-          id: (0, _uuid.v4)(),
+          id: uuidv4(),
           file,
           state: 'none'
         });
@@ -144,12 +134,12 @@ const Gallery = _ref => {
   /**
    * This function adds external files to fileItems
    */
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (files) {
       const newFileItems = [];
       files.forEach(file => {
         newFileItems.push({
-          id: (0, _uuid.v4)(),
+          id: uuidv4(),
           uploadedFile: file.uploadedFile,
           file: file.file,
           state: file.uploadedFile ? 'uploaded' : 'none',
@@ -163,7 +153,7 @@ const Gallery = _ref => {
   /**
    * This function deletes a selected file from the file list
    */
-  const handleDeleteFile = (0, _react.useCallback)(id => {
+  const handleDeleteFile = useCallback(id => {
     let fileToDelete;
     const filteredFiles = fileItems.filter(file => {
       const fileId = file.id;
@@ -182,7 +172,7 @@ const Gallery = _ref => {
   /**
    * This function handles the drag and drop
    */
-  const handleDrop = (0, _react.useCallback)(e => {
+  const handleDrop = useCallback(e => {
     if (!allowDragAndDrop) {
       return;
     }
@@ -194,16 +184,16 @@ const Gallery = _ref => {
   /**
    * Opens the files in a slideShow
    */
-  const openFiles = (0, _react.useCallback)(file => {
+  const openFiles = useCallback(file => {
     const startIndex = fileItems.findIndex(item => item.id === file.id);
     const items = fileItems.map(item => ({
       url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',
-      mediaType: item.uploadedFile && 'thumbnailUrl' in item.uploadedFile ? _chaynsApi.MediaType.VIDEO : _chaynsApi.MediaType.IMAGE
+      mediaType: item.uploadedFile && 'thumbnailUrl' in item.uploadedFile ? MediaType.VIDEO : MediaType.IMAGE
     }));
 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    void (0, _chaynsApi.openMedia)({
+    void openMedia({
       items,
       startIndex
     });
@@ -212,7 +202,7 @@ const Gallery = _ref => {
   /**
    * Returns the ratio of the single file
    */
-  const ratio = (0, _react.useMemo)(() => {
+  const ratio = useMemo(() => {
     switch (fileItems.length) {
       case 0:
         return 0;
@@ -226,17 +216,17 @@ const Gallery = _ref => {
         return 1;
     }
   }, [fileItems]);
-  const galleryContent = (0, _react.useMemo)(() => {
+  const galleryContent = useMemo(() => {
     const combinedFilesLength = fileItems.length;
     if (isEditMode) {
-      const items = fileItems.map(file => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
+      const items = fileItems.map(file => /*#__PURE__*/React.createElement(GalleryItem, {
         key: file.id,
         fileItem: file,
         isEditMode: true,
         onClick: openFiles,
         handleDeleteFile: handleDeleteFile
       }));
-      items.push( /*#__PURE__*/_react.default.createElement(_AddFile.default, {
+      items.push( /*#__PURE__*/React.createElement(AddFile, {
         key: "add_file",
         onAdd: handleAddFiles
       }));
@@ -245,14 +235,14 @@ const Gallery = _ref => {
     const shortedFiles = fileItems.slice(0, 4);
     return shortedFiles.map((file, index) => {
       let imageRatio = 1;
-      if (viewMode === _gallery.GalleryViewMode.GRID) {
+      if (viewMode === GalleryViewMode.GRID) {
         if (combinedFilesLength === 2 && (index === 0 || index === 1)) {
           imageRatio = 0.5;
         } else if (index === 0 && combinedFilesLength > 2 || combinedFilesLength === 3 && (index === 1 || index === 2)) {
           imageRatio = 1.5;
         }
       }
-      return /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
+      return /*#__PURE__*/React.createElement(GalleryItem, {
         key: file.id,
         fileItem: file,
         isEditMode: false,
@@ -263,16 +253,16 @@ const Gallery = _ref => {
       });
     });
   }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile, viewMode]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Gallery.StyledGallery, null, isEditMode ? /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryEditModeWrapper, {
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledGallery, null, isEditMode ? /*#__PURE__*/React.createElement(StyledGalleryEditModeWrapper, {
     fileMinWidth: fileMinWidth,
     onDragOver: e => e.preventDefault(),
     onDrop: e => void handleDrop(e)
-  }, galleryContent) : /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemWrapper, {
+  }, galleryContent) : /*#__PURE__*/React.createElement(StyledGalleryItemWrapper, {
     ratio: ratio,
     uploadedFileLength: fileItems.length,
     viewMode: viewMode
   }, galleryContent)), [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop]);
 };
 Gallery.displayName = 'Gallery';
-var _default = exports.default = Gallery;
+export default Gallery;
 //# sourceMappingURL=Gallery.js.map

package/lib/components/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_uuid","_gallery","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Gallery","_ref","accessToken","allowDragAndDrop","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","personId","viewMode","GalleryViewMode","GRID","fileItems","setFileItems","useState","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","useCallback","UploadedFile","uploadedFile","state","useEffect","length","filesToGeneratePreview","filter","filesToUpload","forEach","type","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","handleAddFiles","filesToAdd","newFileItems","filterDuplicateFile","newFile","push","uuidv4","url","undefined","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","item","items","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","ratio","useMemo","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","slice","index","imageRatio","remainingItemsLength","StyledGallery","StyledGalleryEditModeWrapper","onDragOver","onDrop","StyledGalleryItemWrapper","uploadedFileLength","displayName","_default","exports"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import { uploadFile } from '@chayns-components/core';\nimport type { FileItem, Image, Video } from '@chayns-components/core/lib/types/file'; // TODO: Check why absolute import is needed\nimport { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { GalleryViewMode } from '../types/gallery';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';\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     * The minimum width of a file in the edit mode\n     */\n    fileMinWidth?: number;\n    /**\n     *  Images and videos which should be displayed\n     */\n    files?: FileItem[];\n    /**\n     *  Function to be executed when files are added and uploaded\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Function to be executed when the count of files are changed. Needed to check if all files are uploaded\n     */\n    onFileCountChange?: (fileCount: number) => 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     * The mode how the images should be displayed.\n     */\n    viewMode?: GalleryViewMode;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    accessToken,\n    allowDragAndDrop = false,\n    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    personId,\n    viewMode = GalleryViewMode.GRID,\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 = useCallback(\n        (file: FileItem, UploadedFile: Video | Image) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            onAdd({\n                                ...prevFile,\n                                uploadedFile: UploadedFile,\n                                state: 'uploaded',\n                            });\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile: UploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n                    return prevFile;\n                }),\n            );\n        },\n        [onAdd],\n    );\n\n    /**\n     * Returns the current count to check if all files are uploaded\n     */\n    useEffect(() => {\n        if (typeof onFileCountChange === 'function') {\n            onFileCountChange(fileItems.length);\n        }\n    }, [fileItems.length, onFileCountChange]);\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            if (file.file.type.includes('video/')) {\n                generateVideoThumbnail({\n                    file: file.file,\n                    callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n                });\n\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, handleUploadFileCallback, 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                    previewUrl: file.uploadedFile ? file.uploadedFile.url : undefined,\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 || typeof onRemove !== 'function') {\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     * Opens the files in a slideShow\n     */\n    const openFiles = useCallback(\n        (file: FileItem) => {\n            const startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n            const items: OpenMediaItem[] = fileItems.map((item) => ({\n                url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n                mediaType:\n                    item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n                        ? MediaType.VIDEO\n                        : MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex });\n        },\n        [fileItems],\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    }, [fileItems]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (isEditMode) {\n            const items = fileItems.map((file) => (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode\n                    onClick={openFiles}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            items.push(<AddFile key=\"add_file\" onAdd={handleAddFiles} />);\n\n            return items;\n        }\n\n        const shortedFiles = fileItems.slice(0, 4);\n\n        return shortedFiles.map((file, index) => {\n            let imageRatio = 1;\n\n            if (viewMode === GalleryViewMode.GRID) {\n                if (combinedFilesLength === 2 && (index === 0 || index === 1)) {\n                    imageRatio = 0.5;\n                } else if (\n                    (index === 0 && combinedFilesLength > 2) ||\n                    (combinedFilesLength === 3 && (index === 1 || index === 2))\n                ) {\n                    imageRatio = 1.5;\n                }\n            }\n\n            return (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode={false}\n                    handleDeleteFile={handleDeleteFile}\n                    onClick={openFiles}\n                    ratio={imageRatio}\n                    remainingItemsLength={\n                        combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                    }\n                />\n            );\n        });\n    }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile, viewMode]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        fileMinWidth={fileMinWidth}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        ratio={ratio}\n                        uploadedFileLength={fileItems.length}\n                        viewMode={viewMode}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop],\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAC,sBAAA,CAAAR,OAAA;AACA,IAAAS,YAAA,GAAAD,sBAAA,CAAAR,OAAA;AACA,IAAAU,QAAA,GAAAV,OAAA;AAI0B,SAAAQ,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAZ4D;;AAyDtF,MAAMY,OAAyB,GAAGC,IAAA,IAW5B;EAAA,IAX6B;IAC/BC,WAAW;IACXC,gBAAgB,GAAG,KAAK;IACxBC,UAAU,GAAG,KAAK;IAClBC,YAAY,GAAG,GAAG;IAClBC,KAAK;IACLC,KAAK;IACLC,iBAAiB;IACjBC,QAAQ;IACRC,QAAQ;IACRC,QAAQ,GAAGC,wBAAe,CAACC;EAC/B,CAAC,GAAAZ,IAAA;EACG,MAAM,CAACa,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAa,EAAE,CAAC;;EAE1D;AACJ;AACA;EACI,MAAMC,wBAAwB,GAAGA,CAACC,UAAkB,EAAEC,IAAc,KAAK;IACrEJ,YAAY,CAAEK,SAAS,IACnBA,SAAS,CAACC,GAAG,CAAEC,QAAQ,IAAK;MACxB,IAAIA,QAAQ,CAACC,EAAE,KAAKJ,IAAI,CAACI,EAAE,EAAE;QACzB,OAAO;UAAE,GAAGD,QAAQ;UAAEJ;QAAW,CAAC;MACtC;MACA,OAAOI,QAAQ;IACnB,CAAC,CACL,CAAC;EACL,CAAC;;EAED;AACJ;AACA;EACI,MAAME,wBAAwB,GAAG,IAAAC,kBAAW,EACxC,CAACN,IAAc,EAAEO,YAA2B,KAAK;IAC7CX,YAAY,CAAEK,SAAS,IACnBA,SAAS,CAACC,GAAG,CAAEC,QAAQ,IAAK;MACxB,IAAIA,QAAQ,CAACC,EAAE,KAAKJ,IAAI,CAACI,EAAE,EAAE;QACzB,IAAI,OAAOhB,KAAK,KAAK,UAAU,EAAE;UAC7BA,KAAK,CAAC;YACF,GAAGe,QAAQ;YACXK,YAAY,EAAED,YAAY;YAC1BE,KAAK,EAAE;UACX,CAAC,CAAC;QACN;QAEA,OAAO;UACH,GAAGN,QAAQ;UACXK,YAAY,EAAED,YAAY;UAC1BE,KAAK,EAAE;QACX,CAAC;MACL;MACA,OAAON,QAAQ;IACnB,CAAC,CACL,CAAC;EACL,CAAC,EACD,CAACf,KAAK,CACV,CAAC;;EAED;AACJ;AACA;EACI,IAAAsB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOrB,iBAAiB,KAAK,UAAU,EAAE;MACzCA,iBAAiB,CAACM,SAAS,CAACgB,MAAM,CAAC;IACvC;EACJ,CAAC,EAAE,CAAChB,SAAS,CAACgB,MAAM,EAAEtB,iBAAiB,CAAC,CAAC;;EAEzC;AACJ;AACA;EACI,IAAAqB,gBAAS,EAAC,MAAM;IACZ,MAAME,sBAAsB,GAAGjB,SAAS,CAACkB,MAAM,CAC1Cb,IAAI,IAAKA,IAAI,CAACA,IAAI,IAAI,CAACA,IAAI,CAACD,UAAU,KAAKC,IAAI,CAACS,KAAK,KAAK,MAAM,IAAI,CAACT,IAAI,CAACS,KAAK,CACpF,CAAC;IAED,MAAMK,aAAa,GAAGnB,SAAS,CAACkB,MAAM,CACjCb,IAAI,IAAK,CAACA,IAAI,CAACQ,YAAY,IAAIR,IAAI,CAACS,KAAK,KAAK,WACnD,CAAC;IAEDG,sBAAsB,CAACG,OAAO,CAAEf,IAAI,IAAK;MACrC,IAAI,CAACA,IAAI,CAACA,IAAI,EAAE;QACZ;MACJ;MAEA,IAAIA,IAAI,CAACA,IAAI,CAACgB,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QACnC,IAAAC,4BAAsB,EAAC;UACnBlB,IAAI,EAAEA,IAAI,CAACA,IAAI;UACfmB,QAAQ,EAAGpB,UAAU,IAAKD,wBAAwB,CAACC,UAAU,EAAEC,IAAI;QACvE,CAAC,CAAC;QAEF;MACJ;MAEA,IAAAoB,wBAAkB,EAAC;QACfpB,IAAI,EAAEA,IAAI,CAACA,IAAI;QACfmB,QAAQ,EAAGpB,UAAU,IAAKD,wBAAwB,CAACC,UAAU,EAAEC,IAAI;MACvE,CAAC,CAAC;IACN,CAAC,CAAC;IAEFc,aAAa,CAACC,OAAO,CAAEf,IAAI,IAAK;MAC5BJ,YAAY,CAAEK,SAAS,IACnBA,SAAS,CAACC,GAAG,CAAEC,QAAQ,IAAK;QACxB,IAAIA,QAAQ,CAACC,EAAE,KAAKJ,IAAI,CAACI,EAAE,EAAE;UACzB,OAAO;YAAE,GAAGD,QAAQ;YAAEM,KAAK,EAAE;UAAY,CAAC;QAC9C;QACA,OAAON,QAAQ;MACnB,CAAC,CACL,CAAC;MAED,KAAK,IAAAkB,gBAAU,EAAC;QACZC,YAAY,EAAEtB,IAAI;QAClBT,QAAQ;QACRR,WAAW;QACXoC,QAAQ,EAAGZ,YAAY,IAAKF,wBAAwB,CAACL,IAAI,EAAEO,YAAY;MAC3E,CAAC,CAAC;IACN,CAAC,CAAC;EACN,CAAC,EAAE,CAACxB,WAAW,EAAEY,SAAS,EAAEU,wBAAwB,EAAEd,QAAQ,CAAC,CAAC;;EAEhE;AACJ;AACA;EACI,MAAMgC,cAAc,GAAG,IAAAjB,kBAAW,EAC7BkB,UAAkB,IAAK;IACpB,MAAMC,YAAwB,GAAG,EAAE;IAEnCD,UAAU,CAACT,OAAO,CAAEf,IAAI,IAAK;MACzB,IAAIA,IAAI,IAAI,CAAC,IAAA0B,yBAAmB,EAAC;QAAEvC,KAAK,EAAEQ,SAAS;QAAEgC,OAAO,EAAE3B;MAAK,CAAC,CAAC,EAAE;QACnEyB,YAAY,CAACG,IAAI,CAAC;UACdxB,EAAE,EAAE,IAAAyB,QAAM,EAAC,CAAC;UACZ7B,IAAI;UACJS,KAAK,EAAE;QACX,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEFb,YAAY,CAAEK,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGwB,YAAY,CAAC,CAAC;EAChE,CAAC,EACD,CAAC9B,SAAS,CACd,CAAC;;EAED;AACJ;AACA;EACI,IAAAe,gBAAS,EAAC,MAAM;IACZ,IAAIvB,KAAK,EAAE;MACP,MAAMsC,YAAwB,GAAG,EAAE;MAEnCtC,KAAK,CAAC4B,OAAO,CAAEf,IAAI,IAAK;QACpByB,YAAY,CAACG,IAAI,CAAC;UACdxB,EAAE,EAAE,IAAAyB,QAAM,EAAC,CAAC;UACZrB,YAAY,EAAER,IAAI,CAACQ,YAAY;UAC/BR,IAAI,EAAEA,IAAI,CAACA,IAAI;UACfS,KAAK,EAAET,IAAI,CAACQ,YAAY,GAAG,UAAU,GAAG,MAAM;UAC9CT,UAAU,EAAEC,IAAI,CAACQ,YAAY,GAAGR,IAAI,CAACQ,YAAY,CAACsB,GAAG,GAAGC;QAC5D,CAAC,CAAC;MACN,CAAC,CAAC;MAEFnC,YAAY,CAAEK,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGwB,YAAY,CAAC,CAAC;IAChE;EACJ,CAAC,EAAE,CAACtC,KAAK,CAAC,CAAC;;EAEX;AACJ;AACA;EACI,MAAM6C,gBAAgB,GAAG,IAAA1B,kBAAW,EAC/BF,EAAW,IAAK;IACb,IAAI6B,YAAkC;IAEtC,MAAMC,aAAa,GAAGvC,SAAS,CAACkB,MAAM,CAAEb,IAAI,IAAK;MAC7C,MAAMmC,MAAM,GAAGnC,IAAI,CAACI,EAAE;MAEtB,IAAI+B,MAAM,KAAK/B,EAAE,EAAE;QACf6B,YAAY,GAAGjC,IAAI;MACvB;MAEA,OAAOmC,MAAM,KAAK/B,EAAE;IACxB,CAAC,CAAC;IAEFR,YAAY,CAACsC,aAAa,CAAC;IAE3B,IAAI,CAACD,YAAY,IAAI,OAAO3C,QAAQ,KAAK,UAAU,EAAE;MACjD;IACJ;IAEAA,QAAQ,CAAC2C,YAAY,CAAC;EAC1B,CAAC,EACD,CAACtC,SAAS,EAAEL,QAAQ,CACxB,CAAC;;EAED;AACJ;AACA;EACI,MAAM8C,UAAU,GAAG,IAAA9B,kBAAW,EACzB3C,CAA4B,IAAK;IAC9B,IAAI,CAACqB,gBAAgB,EAAE;MACnB;IACJ;IAEArB,CAAC,CAAC0E,cAAc,CAAC,CAAC;IAClB,MAAMC,YAAY,GAAGC,KAAK,CAACC,IAAI,CAAC7E,CAAC,CAAC8E,YAAY,CAACtD,KAAK,CAAC;IAErDoC,cAAc,CAACe,YAAY,CAAC;EAChC,CAAC,EACD,CAACtD,gBAAgB,EAAEuC,cAAc,CACrC,CAAC;;EAED;AACJ;AACA;EACI,MAAMmB,SAAS,GAAG,IAAApC,kBAAW,EACxBN,IAAc,IAAK;IAChB,MAAM2C,UAAU,GAAGhD,SAAS,CAACiD,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACzC,EAAE,KAAKJ,IAAI,CAACI,EAAE,CAAC;IAErE,MAAM0C,KAAsB,GAAGnD,SAAS,CAACO,GAAG,CAAE2C,IAAI,KAAM;MACpDf,GAAG,EAAEe,IAAI,CAACrC,YAAY,EAAEsB,GAAG,CAACiB,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,EAAE;MAC3DC,SAAS,EACLH,IAAI,CAACrC,YAAY,IAAI,cAAc,IAAIqC,IAAI,CAACrC,YAAY,GAClDyC,oBAAS,CAACC,KAAK,GACfD,oBAAS,CAACE;IACxB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAK,IAAAC,oBAAS,EAAC;MAAEN,KAAK;MAAEH;IAAW,CAAC,CAAC;EACzC,CAAC,EACD,CAAChD,SAAS,CACd,CAAC;;EAED;AACJ;AACA;EACI,MAAM0D,KAAK,GAAG,IAAAC,cAAO,EAAC,MAAM;IACxB,QAAQ3D,SAAS,CAACgB,MAAM;MACpB,KAAK,CAAC;QACF,OAAO,CAAC;MACZ,KAAK,CAAC;QACF,OAAO4C,IAAI,CAACC,GAAG,CAAC7D,SAAS,CAAC,CAAC,CAAC,EAAEa,YAAY,EAAE6C,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;MAC9D,KAAK,CAAC;QACF,OAAO,CAAC;MACZ,KAAK,CAAC;QACF,OAAO,CAAC;MACZ;QACI,OAAO,CAAC;IAChB;EACJ,CAAC,EAAE,CAAC1D,SAAS,CAAC,CAAC;EAEf,MAAM8D,cAAc,GAAG,IAAAH,cAAO,EAAC,MAAM;IACjC,MAAMI,mBAAmB,GAAG/D,SAAS,CAACgB,MAAM;IAE5C,IAAI1B,UAAU,EAAE;MACZ,MAAM6D,KAAK,GAAGnD,SAAS,CAACO,GAAG,CAAEF,IAAI,iBAC7BlD,MAAA,CAAAW,OAAA,CAAAkG,aAAA,CAACtG,YAAA,CAAAI,OAAW;QACRmG,GAAG,EAAE5D,IAAI,CAACI,EAAG;QACbyD,QAAQ,EAAE7D,IAAK;QACff,UAAU;QACV6E,OAAO,EAAEpB,SAAU;QACnBV,gBAAgB,EAAEA;MAAiB,CACtC,CACJ,CAAC;MAEFc,KAAK,CAAClB,IAAI,eAAC9E,MAAA,CAAAW,OAAA,CAAAkG,aAAA,CAACxG,QAAA,CAAAM,OAAO;QAACmG,GAAG,EAAC,UAAU;QAACxE,KAAK,EAAEmC;MAAe,CAAE,CAAC,CAAC;MAE7D,OAAOuB,KAAK;IAChB;IAEA,MAAMiB,YAAY,GAAGpE,SAAS,CAACqE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1C,OAAOD,YAAY,CAAC7D,GAAG,CAAC,CAACF,IAAI,EAAEiE,KAAK,KAAK;MACrC,IAAIC,UAAU,GAAG,CAAC;MAElB,IAAI1E,QAAQ,KAAKC,wBAAe,CAACC,IAAI,EAAE;QACnC,IAAIgE,mBAAmB,KAAK,CAAC,KAAKO,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,CAAC,CAAC,EAAE;UAC3DC,UAAU,GAAG,GAAG;QACpB,CAAC,MAAM,IACFD,KAAK,KAAK,CAAC,IAAIP,mBAAmB,GAAG,CAAC,IACtCA,mBAAmB,KAAK,CAAC,KAAKO,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,CAAC,CAAE,EAC7D;UACEC,UAAU,GAAG,GAAG;QACpB;MACJ;MAEA,oBACIpH,MAAA,CAAAW,OAAA,CAAAkG,aAAA,CAACtG,YAAA,CAAAI,OAAW;QACRmG,GAAG,EAAE5D,IAAI,CAACI,EAAG;QACbyD,QAAQ,EAAE7D,IAAK;QACff,UAAU,EAAE,KAAM;QAClB+C,gBAAgB,EAAEA,gBAAiB;QACnC8B,OAAO,EAAEpB,SAAU;QACnBW,KAAK,EAAEa,UAAW;QAClBC,oBAAoB,EAChBT,mBAAmB,GAAG,CAAC,IAAIO,KAAK,KAAK,CAAC,GAAGP,mBAAmB,GAAG3B;MAClE,CACJ,CAAC;IAEV,CAAC,CAAC;EACN,CAAC,EAAE,CAACpC,SAAS,EAAEV,UAAU,EAAEsC,cAAc,EAAEmB,SAAS,EAAEV,gBAAgB,EAAExC,QAAQ,CAAC,CAAC;EAElF,OAAO,IAAA8D,cAAO,EACV,mBACIxG,MAAA,CAAAW,OAAA,CAAAkG,aAAA,CAACrG,QAAA,CAAA8G,aAAa,QACTnF,UAAU,gBACPnC,MAAA,CAAAW,OAAA,CAAAkG,aAAA,CAACrG,QAAA,CAAA+G,4BAA4B;IACzBnF,YAAY,EAAEA,YAAa;IAC3BoF,UAAU,EAAG3G,CAAC,IAAKA,CAAC,CAAC0E,cAAc,CAAC,CAAE;IACtCkC,MAAM,EAAG5G,CAAC,IAAK,KAAKyE,UAAU,CAACzE,CAAC;EAAE,GAEjC8F,cACyB,CAAC,gBAE/B3G,MAAA,CAAAW,OAAA,CAAAkG,aAAA,CAACrG,QAAA,CAAAkH,wBAAwB;IACrBnB,KAAK,EAAEA,KAAM;IACboB,kBAAkB,EAAE9E,SAAS,CAACgB,MAAO;IACrCnB,QAAQ,EAAEA;EAAS,GAElBiE,cACqB,CAEnB,CAClB,EACD,CAACxE,UAAU,EAAEC,YAAY,EAAEuE,cAAc,EAAEJ,KAAK,EAAE1D,SAAS,CAACgB,MAAM,EAAEnB,QAAQ,EAAE4C,UAAU,CAC5F,CAAC;AACL,CAAC;AAEDvD,OAAO,CAAC6F,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnH,OAAA,GAEjBoB,OAAO"}
+{"version":3,"file":"Gallery.js","names":["uploadFile","MediaType","openMedia","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","GalleryViewMode","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","AddFile","GalleryItem","StyledGallery","StyledGalleryEditModeWrapper","StyledGalleryItemWrapper","Gallery","_ref","accessToken","allowDragAndDrop","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","personId","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","UploadedFile","uploadedFile","state","length","filesToGeneratePreview","filter","filesToUpload","forEach","type","includes","callback","fileToUpload","handleAddFiles","filesToAdd","newFileItems","newFile","push","url","undefined","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","item","items","replace","mediaType","VIDEO","IMAGE","ratio","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","slice","index","imageRatio","remainingItemsLength","onDragOver","onDrop","uploadedFileLength","displayName"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import { uploadFile } from '@chayns-components/core';\nimport type { FileItem, Image, Video } from '@chayns-components/core/lib/types/file'; // TODO: Check why absolute import is needed\nimport { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { GalleryViewMode } from '../types/gallery';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';\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     * The minimum width of a file in the edit mode\n     */\n    fileMinWidth?: number;\n    /**\n     *  Images and videos which should be displayed\n     */\n    files?: FileItem[];\n    /**\n     *  Function to be executed when files are added and uploaded\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Function to be executed when the count of files are changed. Needed to check if all files are uploaded\n     */\n    onFileCountChange?: (fileCount: number) => 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     * The mode how the images should be displayed.\n     */\n    viewMode?: GalleryViewMode;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    accessToken,\n    allowDragAndDrop = false,\n    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    personId,\n    viewMode = GalleryViewMode.GRID,\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 = useCallback(\n        (file: FileItem, UploadedFile: Video | Image) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            onAdd({\n                                ...prevFile,\n                                uploadedFile: UploadedFile,\n                                state: 'uploaded',\n                            });\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile: UploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n                    return prevFile;\n                }),\n            );\n        },\n        [onAdd],\n    );\n\n    /**\n     * Returns the current count to check if all files are uploaded\n     */\n    useEffect(() => {\n        if (typeof onFileCountChange === 'function') {\n            onFileCountChange(fileItems.length);\n        }\n    }, [fileItems.length, onFileCountChange]);\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            if (file.file.type.includes('video/')) {\n                generateVideoThumbnail({\n                    file: file.file,\n                    callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n                });\n\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, handleUploadFileCallback, 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                    previewUrl: file.uploadedFile ? file.uploadedFile.url : undefined,\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 || typeof onRemove !== 'function') {\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     * Opens the files in a slideShow\n     */\n    const openFiles = useCallback(\n        (file: FileItem) => {\n            const startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n            const items: OpenMediaItem[] = fileItems.map((item) => ({\n                url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n                mediaType:\n                    item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n                        ? MediaType.VIDEO\n                        : MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex });\n        },\n        [fileItems],\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    }, [fileItems]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (isEditMode) {\n            const items = fileItems.map((file) => (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode\n                    onClick={openFiles}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            items.push(<AddFile key=\"add_file\" onAdd={handleAddFiles} />);\n\n            return items;\n        }\n\n        const shortedFiles = fileItems.slice(0, 4);\n\n        return shortedFiles.map((file, index) => {\n            let imageRatio = 1;\n\n            if (viewMode === GalleryViewMode.GRID) {\n                if (combinedFilesLength === 2 && (index === 0 || index === 1)) {\n                    imageRatio = 0.5;\n                } else if (\n                    (index === 0 && combinedFilesLength > 2) ||\n                    (combinedFilesLength === 3 && (index === 1 || index === 2))\n                ) {\n                    imageRatio = 1.5;\n                }\n            }\n\n            return (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode={false}\n                    handleDeleteFile={handleDeleteFile}\n                    onClick={openFiles}\n                    ratio={imageRatio}\n                    remainingItemsLength={\n                        combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                    }\n                />\n            );\n        });\n    }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile, viewMode]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        fileMinWidth={fileMinWidth}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        ratio={ratio}\n                        uploadedFileLength={fileItems.length}\n                        viewMode={viewMode}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop],\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}

package/lib/components/Gallery.styles.js

@@ -1,15 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledGalleryItemWrapper = exports.StyledGalleryEditModeWrapper = exports.StyledGallery = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _gallery = require("../types/gallery");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledGallery = exports.StyledGallery = _styledComponents.default.div``;
-const StyledGalleryItemWrapper = exports.StyledGalleryItemWrapper = _styledComponents.default.div`
+import styled, { css } from 'styled-components';
+import { GalleryViewMode } from '../types/gallery';
+export const StyledGallery = styled.div``;
+export const StyledGalleryItemWrapper = styled.div`
     display: grid;
     gap: 5px;
 
@@ -18,8 +10,8 @@ const StyledGalleryItemWrapper = exports.StyledGalleryItemWrapper = _styledCompo
     viewMode,
     uploadedFileLength
   } = _ref;
-  if (viewMode === _gallery.GalleryViewMode.GRID) {
-    return (0, _styledComponents.css)`
+  if (viewMode === GalleryViewMode.GRID) {
+    return css`
                 > div:first-child {
                     grid-column: 1 / -1;
                 }
@@ -27,25 +19,25 @@ const StyledGalleryItemWrapper = exports.StyledGalleryItemWrapper = _styledCompo
                 ${() => {
       switch (uploadedFileLength) {
         case 1:
-          return (0, _styledComponents.css)`
+          return css`
                                 grid-template-columns: 1fr;
                             `;
         case 2:
-          return (0, _styledComponents.css)`
+          return css`
                                 grid-template-columns: repeat(2, 1fr);
                                 > div:first-child {
                                     grid-column: span 1;
                                 }
                             `;
         case 3:
-          return (0, _styledComponents.css)`
+          return css`
                                 grid-template-columns: repeat(2, 1fr);
                                 > div:first-child {
                                     grid-column: span 2;
                                 }
                             `;
         default:
-          return (0, _styledComponents.css)`
+          return css`
                                 grid-template-columns: repeat(3, minmax(0, 1fr));
                                 > div:not(:first-child) {
                                     grid-column: span 1;
@@ -57,19 +49,19 @@ const StyledGalleryItemWrapper = exports.StyledGalleryItemWrapper = _styledCompo
   }
   switch (uploadedFileLength) {
     case 1:
-      return (0, _styledComponents.css)`
+      return css`
                     grid-template-columns: 1fr;
                 `;
     case 2:
-      return (0, _styledComponents.css)`
+      return css`
                     grid-template-columns: repeat(2, 1fr);
                 `;
     case 3:
-      return (0, _styledComponents.css)`
+      return css`
                     grid-template-columns: repeat(3, 1fr);
                 `;
     default:
-      return (0, _styledComponents.css)`
+      return css`
                     grid-template-columns: repeat(2, 1fr);
                     > div:nth-child(-n + 2) {
                         grid-row: 1;
@@ -85,7 +77,7 @@ const StyledGalleryItemWrapper = exports.StyledGalleryItemWrapper = _styledCompo
   return ratio;
 }};
 `;
-const StyledGalleryEditModeWrapper = exports.StyledGalleryEditModeWrapper = _styledComponents.default.div`
+export const StyledGalleryEditModeWrapper = styled.div`
     display: grid;
     grid-template-columns: ${_ref3 => {
   let {

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_gallery","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledGallery","exports","styled","div","StyledGalleryItemWrapper","_ref","viewMode","uploadedFileLength","GalleryViewMode","GRID","css","_ref2","ratio","StyledGalleryEditModeWrapper","_ref3","fileMinWidth"],"sources":["../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { GalleryViewMode } from '../types/gallery';\n\nexport const StyledGallery = styled.div``;\n\nexport const StyledGalleryItemWrapper = styled.div<{\n    uploadedFileLength: number;\n    ratio: number;\n    viewMode: GalleryViewMode;\n}>`\n    display: grid;\n    gap: 5px;\n\n    ${({ viewMode, uploadedFileLength }) => {\n        if (viewMode === GalleryViewMode.GRID) {\n            return css`\n                > div:first-child {\n                    grid-column: 1 / -1;\n                }\n\n                ${() => {\n                    switch (uploadedFileLength) {\n                        case 1:\n                            return css`\n                                grid-template-columns: 1fr;\n                            `;\n                        case 2:\n                            return css`\n                                grid-template-columns: repeat(2, 1fr);\n                                > div:first-child {\n                                    grid-column: span 1;\n                                }\n                            `;\n                        case 3:\n                            return css`\n                                grid-template-columns: repeat(2, 1fr);\n                                > div:first-child {\n                                    grid-column: span 2;\n                                }\n                            `;\n                        default:\n                            return css`\n                                grid-template-columns: repeat(3, minmax(0, 1fr));\n                                > div:not(:first-child) {\n                                    grid-column: span 1;\n                                }\n                            `;\n                    }\n                }}\n            `;\n        }\n\n        switch (uploadedFileLength) {\n            case 1:\n                return css`\n                    grid-template-columns: 1fr;\n                `;\n            case 2:\n                return css`\n                    grid-template-columns: repeat(2, 1fr);\n                `;\n            case 3:\n                return css`\n                    grid-template-columns: repeat(3, 1fr);\n                `;\n            default:\n                return css`\n                    grid-template-columns: repeat(2, 1fr);\n                    > div:nth-child(-n + 2) {\n                        grid-row: 1;\n                    }\n                `;\n        }\n    }}\n\n    aspect-ratio: ${({ ratio }) => ratio};\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div<{\n    fileMinWidth: number;\n}>`\n    display: grid;\n    grid-template-columns: ${({ fileMinWidth }) =>\n        `repeat(auto-fill, minmax(${fileMinWidth}px, 1fr))`};\n    grid-auto-rows: 1fr;\n    gap: 6px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAmD,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAE5C,MAAMY,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAI,EAAC;AAElC,MAAMC,wBAAwB,GAAAH,OAAA,CAAAG,wBAAA,GAAGF,yBAAM,CAACC,GAI5C;AACH;AACA;AACA;AACA,MAAME,IAAA,IAAsC;EAAA,IAArC;IAAEC,QAAQ;IAAEC;EAAmB,CAAC,GAAAF,IAAA;EAC/B,IAAIC,QAAQ,KAAKE,wBAAe,CAACC,IAAI,EAAE;IACnC,OAAO,IAAAC,qBAAG,CAAC;AACvB;AACA;AACA;AACA;AACA,kBAAkB,MAAM;MACJ,QAAQH,kBAAkB;QACtB,KAAK,CAAC;UACF,OAAO,IAAAG,qBAAG,CAAC;AACvC;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAO,IAAAA,qBAAG,CAAC;AACvC;AACA;AACA;AACA;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAO,IAAAA,qBAAG,CAAC;AACvC;AACA;AACA;AACA;AACA,6BAA6B;QACL;UACI,OAAO,IAAAA,qBAAG,CAAC;AACvC;AACA;AACA;AACA;AACA,6BAA6B;MACT;IACJ,CAAE;AAClB,aAAa;EACL;EAEA,QAAQH,kBAAkB;IACtB,KAAK,CAAC;MACF,OAAO,IAAAG,qBAAG,CAAC;AAC3B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAO,IAAAA,qBAAG,CAAC;AAC3B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAO,IAAAA,qBAAG,CAAC;AAC3B;AACA,iBAAiB;IACL;MACI,OAAO,IAAAA,qBAAG,CAAC;AAC3B;AACA;AACA;AACA;AACA,iBAAiB;EACT;AACJ,CAAE;AACN;AACA,oBAAoBC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACzC,CAAC;AAEM,MAAMC,4BAA4B,GAAAZ,OAAA,CAAAY,4BAAA,GAAGX,yBAAM,CAACC,GAEhD;AACH;AACA,6BAA6BW,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACrC,4BAA2BC,YAAa,WAAU;AAAA,CAAC;AAC5D;AACA;AACA,CAAC"}
+{"version":3,"file":"Gallery.styles.js","names":["styled","css","GalleryViewMode","StyledGallery","div","StyledGalleryItemWrapper","_ref","viewMode","uploadedFileLength","GRID","_ref2","ratio","StyledGalleryEditModeWrapper","_ref3","fileMinWidth"],"sources":["../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { GalleryViewMode } from '../types/gallery';\n\nexport const StyledGallery = styled.div``;\n\nexport const StyledGalleryItemWrapper = styled.div<{\n    uploadedFileLength: number;\n    ratio: number;\n    viewMode: GalleryViewMode;\n}>`\n    display: grid;\n    gap: 5px;\n\n    ${({ viewMode, uploadedFileLength }) => {\n        if (viewMode === GalleryViewMode.GRID) {\n            return css`\n                > div:first-child {\n                    grid-column: 1 / -1;\n                }\n\n                ${() => {\n                    switch (uploadedFileLength) {\n                        case 1:\n                            return css`\n                                grid-template-columns: 1fr;\n                            `;\n                        case 2:\n                            return css`\n                                grid-template-columns: repeat(2, 1fr);\n                                > div:first-child {\n                                    grid-column: span 1;\n                                }\n                            `;\n                        case 3:\n                            return css`\n                                grid-template-columns: repeat(2, 1fr);\n                                > div:first-child {\n                                    grid-column: span 2;\n                                }\n                            `;\n                        default:\n                            return css`\n                                grid-template-columns: repeat(3, minmax(0, 1fr));\n                                > div:not(:first-child) {\n                                    grid-column: span 1;\n                                }\n                            `;\n                    }\n                }}\n            `;\n        }\n\n        switch (uploadedFileLength) {\n            case 1:\n                return css`\n                    grid-template-columns: 1fr;\n                `;\n            case 2:\n                return css`\n                    grid-template-columns: repeat(2, 1fr);\n                `;\n            case 3:\n                return css`\n                    grid-template-columns: repeat(3, 1fr);\n                `;\n            default:\n                return css`\n                    grid-template-columns: repeat(2, 1fr);\n                    > div:nth-child(-n + 2) {\n                        grid-row: 1;\n                    }\n                `;\n        }\n    }}\n\n    aspect-ratio: ${({ ratio }) => ratio};\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div<{\n    fileMinWidth: number;\n}>`\n    display: grid;\n    grid-template-columns: ${({ fileMinWidth }) =>\n        `repeat(auto-fill, minmax(${fileMinWidth}px, 1fr))`};\n    grid-auto-rows: 1fr;\n    gap: 6px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,kBAAkB;AAElD,OAAO,MAAMC,aAAa,GAAGH,MAAM,CAACI,GAAI,EAAC;AAEzC,OAAO,MAAMC,wBAAwB,GAAGL,MAAM,CAACI,GAI5C;AACH;AACA;AACA;AACA,MAAME,IAAA,IAAsC;EAAA,IAArC;IAAEC,QAAQ;IAAEC;EAAmB,CAAC,GAAAF,IAAA;EAC/B,IAAIC,QAAQ,KAAKL,eAAe,CAACO,IAAI,EAAE;IACnC,OAAOR,GAAI;AACvB;AACA;AACA;AACA;AACA,kBAAkB,MAAM;MACJ,QAAQO,kBAAkB;QACtB,KAAK,CAAC;UACF,OAAOP,GAAI;AACvC;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAI;AACvC;AACA;AACA;AACA;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAI;AACvC;AACA;AACA;AACA;AACA,6BAA6B;QACL;UACI,OAAOA,GAAI;AACvC;AACA;AACA;AACA;AACA,6BAA6B;MACT;IACJ,CAAE;AAClB,aAAa;EACL;EAEA,QAAQO,kBAAkB;IACtB,KAAK,CAAC;MACF,OAAOP,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAI;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAI;AAC3B;AACA;AACA;AACA;AACA,iBAAiB;EACT;AACJ,CAAE;AACN;AACA,oBAAoBS,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACzC,CAAC;AAED,OAAO,MAAMC,4BAA4B,GAAGZ,MAAM,CAACI,GAEhD;AACH;AACA,6BAA6BS,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACrC,4BAA2BC,YAAa,WAAU;AAAA,CAAC;AAC5D;AACA;AACA,CAAC"}

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

@@ -1,34 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _core = require("@chayns-components/core");
-var _react = _interopRequireWildcard(require("react"));
-var _AddFile = require("./AddFile.styles");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import { Icon, selectFiles } from '@chayns-components/core';
+import React, { useCallback } from 'react';
+import { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';
 const AddFile = _ref => {
   let {
     onAdd
   } = _ref;
-  const openSelectDialog = (0, _react.useCallback)(async () => {
-    const files = await (0, _core.selectFiles)({
+  const openSelectDialog = useCallback(async () => {
+    const files = await selectFiles({
       multiple: true,
       type: 'image/*, video/*'
     });
     onAdd(files);
   }, [onAdd]);
-  return /*#__PURE__*/_react.default.createElement(_AddFile.StyledAddFile, {
+  return /*#__PURE__*/React.createElement(StyledAddFile, {
     key: "addButton"
-  }, /*#__PURE__*/_react.default.createElement(_AddFile.StyledAddFIleIconWrapper, {
+  }, /*#__PURE__*/React.createElement(StyledAddFIleIconWrapper, {
     onClick: () => void openSelectDialog()
-  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     size: 40,
     icons: ['fa fa-plus']
   })));
 };
 AddFile.displayName = 'AddFile';
-var _default = exports.default = AddFile;
+export default AddFile;
 //# sourceMappingURL=AddFile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddFile.js","names":["_core","require","_react","_interopRequireWildcard","_AddFile","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AddFile","_ref","onAdd","openSelectDialog","useCallback","files","selectFiles","multiple","type","createElement","StyledAddFile","key","StyledAddFIleIconWrapper","onClick","Icon","size","icons","displayName","_default","exports"],"sources":["../../../src/components/add-file/AddFile.tsx"],"sourcesContent":["import { Icon, selectFiles } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\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,QAAA,GAAAH,OAAA;AAA2E,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAS3E,MAAMY,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,oBACI1B,MAAA,CAAAS,OAAA,CAAAwB,aAAA,CAAC/B,QAAA,CAAAgC,aAAa;IAACC,GAAG,EAAC;EAAW,gBAC1BnC,MAAA,CAAAS,OAAA,CAAAwB,aAAA,CAAC/B,QAAA,CAAAkC,wBAAwB;IAACC,OAAO,EAAEA,CAAA,KAAM,KAAKV,gBAAgB,CAAC;EAAE,gBAC7D3B,MAAA,CAAAS,OAAA,CAAAwB,aAAA,CAACnC,KAAA,CAAAwC,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDhB,OAAO,CAACiB,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAEjBe,OAAO"}
+{"version":3,"file":"AddFile.js","names":["Icon","selectFiles","React","useCallback","StyledAddFile","StyledAddFIleIconWrapper","AddFile","_ref","onAdd","openSelectDialog","files","multiple","type","createElement","key","onClick","size","icons","displayName"],"sources":["../../../src/components/add-file/AddFile.tsx"],"sourcesContent":["import { Icon, selectFiles } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\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,SAASA,IAAI,EAAEC,WAAW,QAAQ,yBAAyB;AAC3D,OAAOC,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAC9C,SAASC,aAAa,EAAEC,wBAAwB,QAAQ,kBAAkB;AAS1E,MAAMC,OAAyB,GAAGC,IAAA,IAAe;EAAA,IAAd;IAAEC;EAAM,CAAC,GAAAD,IAAA;EACxC,MAAME,gBAAgB,GAAGN,WAAW,CAAC,YAAY;IAC7C,MAAMO,KAAK,GAAG,MAAMT,WAAW,CAAC;MAC5BU,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFJ,KAAK,CAACE,KAAK,CAAC;EAChB,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,oBACIN,KAAA,CAAAW,aAAA,CAACT,aAAa;IAACU,GAAG,EAAC;EAAW,gBAC1BZ,KAAA,CAAAW,aAAA,CAACR,wBAAwB;IAACU,OAAO,EAAEA,CAAA,KAAM,KAAKN,gBAAgB,CAAC;EAAE,gBAC7DP,KAAA,CAAAW,aAAA,CAACb,IAAI;IAACgB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDX,OAAO,CAACY,WAAW,GAAG,SAAS;AAE/B,eAAeZ,OAAO"}

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

@@ -1,15 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledAddFile = exports.StyledAddFIleIconWrapper = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledAddFile = exports.StyledAddFile = _styledComponents.default.div`
+import styled from 'styled-components';
+export const StyledAddFile = styled.div`
     position: relative;
 `;
-const StyledAddFIleIconWrapper = exports.StyledAddFIleIconWrapper = _styledComponents.default.button`
+export const StyledAddFIleIconWrapper = styled.button`
     background-color: ${_ref => {
   let {
     theme

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

@@ -1 +1 @@
-{"version":3,"file":"AddFile.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledAddFile","exports","styled","div","StyledAddFIleIconWrapper","button","_ref","theme","_ref2"],"sources":["../../../src/components/add-file/AddFile.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledAddFile = styled.div`\n    position: relative;\n`;\n\ntype StyledAddFIleIconWrapperProps = WithTheme<unknown>;\n\nexport const StyledAddFIleIconWrapper = styled.button<StyledAddFIleIconWrapperProps>`\n    background-color: ${({ theme }: StyledAddFIleIconWrapperProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledAddFIleIconWrapperProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAI;AACxC;AACA,CAAC;AAIM,MAAMC,wBAAwB,GAAAH,OAAA,CAAAG,wBAAA,GAAGF,yBAAM,CAACG,MAAsC;AACrF,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAqC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA,CAAC"}
+{"version":3,"file":"AddFile.styles.js","names":["styled","StyledAddFile","div","StyledAddFIleIconWrapper","button","_ref","theme","_ref2"],"sources":["../../../src/components/add-file/AddFile.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledAddFile = styled.div`\n    position: relative;\n`;\n\ntype StyledAddFIleIconWrapperProps = WithTheme<unknown>;\n\nexport const StyledAddFIleIconWrapper = styled.button<StyledAddFIleIconWrapperProps>`\n    background-color: ${({ theme }: StyledAddFIleIconWrapperProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledAddFIleIconWrapperProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,aAAa,GAAGD,MAAM,CAACE,GAAI;AACxC;AACA,CAAC;AAID,OAAO,MAAMC,wBAAwB,GAAGH,MAAM,CAACI,MAAsC;AACrF,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAqC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA,CAAC"}

package/lib/components/gallery-item/GalleryItem.js

@@ -1,18 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _core = require("@chayns-components/core");
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
-var _GalleryItem = require("./GalleryItem.styles");
-var _MediaItem = _interopRequireDefault(require("./media-item/MediaItem"));
-var _PreviewItem = _interopRequireDefault(require("./preview-item/PreviewItem"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import { Icon } from '@chayns-components/core';
+import { AnimatePresence } from 'framer-motion';
+import React, { useMemo } from 'react';
+import { StyledGalleryItem, StyledGalleryItemDeleteButton, StyledGalleryItemMoreItemsIndicator } from './GalleryItem.styles';
+import MediaItem from './media-item/MediaItem';
+import PreviewItem from './preview-item/PreviewItem';
 const GalleryItem = _ref => {
   let {
     fileItem,
@@ -22,25 +13,25 @@ const GalleryItem = _ref => {
     remainingItemsLength,
     onClick
   } = _ref;
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItem, null, isEditMode && /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemDeleteButton, {
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledGalleryItem, null, isEditMode && /*#__PURE__*/React.createElement(StyledGalleryItemDeleteButton, {
     onClick: () => handleDeleteFile(fileItem.id)
-  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     size: 20,
     icons: ['ts-wrong']
-  })), !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  })), !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
-  }, fileItem.state === 'uploading' ? /*#__PURE__*/_react.default.createElement(_PreviewItem.default, {
+  }, fileItem.state === 'uploading' ? /*#__PURE__*/React.createElement(PreviewItem, {
     ratio: ratio,
     key: `uploading_${fileItem.id ?? ''}`,
     fileItem: fileItem
-  }) : /*#__PURE__*/_react.default.createElement(_MediaItem.default, {
+  }) : /*#__PURE__*/React.createElement(MediaItem, {
     key: `uploaded_${fileItem.id ?? ''}`,
     fileItem: fileItem,
     isEditMode: isEditMode,
     ratio: ratio,
     openSelectedFile: onClick
-  })), remainingItemsLength && /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemMoreItemsIndicator, null, /*#__PURE__*/_react.default.createElement("p", null, `+ ${remainingItemsLength - 3}`))), [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength]);
+  })), remainingItemsLength && /*#__PURE__*/React.createElement(StyledGalleryItemMoreItemsIndicator, null, /*#__PURE__*/React.createElement("p", null, `+ ${remainingItemsLength - 3}`))), [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength]);
 };
 GalleryItem.displayName = 'GalleryItem';
-var _default = exports.default = GalleryItem;
+export default GalleryItem;
 //# sourceMappingURL=GalleryItem.js.map

package/lib/components/gallery-item/GalleryItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryItem.js","names":["_core","require","_framerMotion","_react","_interopRequireWildcard","_GalleryItem","_MediaItem","_interopRequireDefault","_PreviewItem","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","GalleryItem","_ref","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","useMemo","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","id","Icon","size","icons","state","previewUrl","uploadedFile","AnimatePresence","initial","key","openSelectedFile","StyledGalleryItemMoreItemsIndicator","displayName","_default","exports"],"sources":["../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport type { FileItem } from '@chayns-components/core/lib/types/file';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, useMemo } from 'react';\nimport {\n    StyledGalleryItem,\n    StyledGalleryItemDeleteButton,\n    StyledGalleryItemMoreItemsIndicator,\n} from './GalleryItem.styles';\nimport MediaItem from './media-item/MediaItem';\nimport PreviewItem from './preview-item/PreviewItem';\n\nexport type GalleryItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: FileItem;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode: boolean;\n    /**\n     *  Function to be executed when a file is deleted\n     */\n    handleDeleteFile: (id?: string) => void;\n    /**\n     * The ratio of the image\n     */\n    ratio?: number;\n    /**\n     *  Length of the uploaded files\n     */\n    remainingItemsLength?: number;\n    /**\n     * Function to be executed if a file should be opened\n     */\n    onClick: (file: FileItem) => void;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n    fileItem,\n    handleDeleteFile,\n    isEditMode,\n    ratio = 1,\n    remainingItemsLength,\n    onClick,\n}) =>\n    useMemo(\n        () => (\n            <StyledGalleryItem>\n                {isEditMode && (\n                    <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n                        <Icon size={20} icons={['ts-wrong']} />\n                    </StyledGalleryItemDeleteButton>\n                )}\n                {!fileItem.state ||\n                fileItem.state === 'none' ||\n                (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : (\n                    <AnimatePresence initial={false}>\n                        {fileItem.state === 'uploading' ? (\n                            <PreviewItem\n                                ratio={ratio}\n                                key={`uploading_${fileItem.id ?? ''}`}\n                                fileItem={fileItem}\n                            />\n                        ) : (\n                            <MediaItem\n                                key={`uploaded_${fileItem.id ?? ''}`}\n                                fileItem={fileItem}\n                                isEditMode={isEditMode}\n                                ratio={ratio}\n                                openSelectedFile={onClick}\n                            />\n                        )}\n                    </AnimatePresence>\n                )}\n                {remainingItemsLength && (\n                    <StyledGalleryItemMoreItemsIndicator>\n                        <p>{`+ ${remainingItemsLength - 3}`}</p>\n                    </StyledGalleryItemMoreItemsIndicator>\n                )}\n            </StyledGalleryItem>\n        ),\n        [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength],\n    );\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"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"}
+{"version":3,"file":"GalleryItem.js","names":["Icon","AnimatePresence","React","useMemo","StyledGalleryItem","StyledGalleryItemDeleteButton","StyledGalleryItemMoreItemsIndicator","MediaItem","PreviewItem","GalleryItem","_ref","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","createElement","id","size","icons","state","previewUrl","uploadedFile","initial","key","openSelectedFile","displayName"],"sources":["../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport type { FileItem } from '@chayns-components/core/lib/types/file';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, useMemo } from 'react';\nimport {\n    StyledGalleryItem,\n    StyledGalleryItemDeleteButton,\n    StyledGalleryItemMoreItemsIndicator,\n} from './GalleryItem.styles';\nimport MediaItem from './media-item/MediaItem';\nimport PreviewItem from './preview-item/PreviewItem';\n\nexport type GalleryItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: FileItem;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode: boolean;\n    /**\n     *  Function to be executed when a file is deleted\n     */\n    handleDeleteFile: (id?: string) => void;\n    /**\n     * The ratio of the image\n     */\n    ratio?: number;\n    /**\n     *  Length of the uploaded files\n     */\n    remainingItemsLength?: number;\n    /**\n     * Function to be executed if a file should be opened\n     */\n    onClick: (file: FileItem) => void;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n    fileItem,\n    handleDeleteFile,\n    isEditMode,\n    ratio = 1,\n    remainingItemsLength,\n    onClick,\n}) =>\n    useMemo(\n        () => (\n            <StyledGalleryItem>\n                {isEditMode && (\n                    <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n                        <Icon size={20} icons={['ts-wrong']} />\n                    </StyledGalleryItemDeleteButton>\n                )}\n                {!fileItem.state ||\n                fileItem.state === 'none' ||\n                (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : (\n                    <AnimatePresence initial={false}>\n                        {fileItem.state === 'uploading' ? (\n                            <PreviewItem\n                                ratio={ratio}\n                                key={`uploading_${fileItem.id ?? ''}`}\n                                fileItem={fileItem}\n                            />\n                        ) : (\n                            <MediaItem\n                                key={`uploaded_${fileItem.id ?? ''}`}\n                                fileItem={fileItem}\n                                isEditMode={isEditMode}\n                                ratio={ratio}\n                                openSelectedFile={onClick}\n                            />\n                        )}\n                    </AnimatePresence>\n                )}\n                {remainingItemsLength && (\n                    <StyledGalleryItemMoreItemsIndicator>\n                        <p>{`+ ${remainingItemsLength - 3}`}</p>\n                    </StyledGalleryItemMoreItemsIndicator>\n                )}\n            </StyledGalleryItem>\n        ),\n        [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength],\n    );\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAE9C,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SACIC,iBAAiB,EACjBC,6BAA6B,EAC7BC,mCAAmC,QAChC,sBAAsB;AAC7B,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,WAAW,MAAM,4BAA4B;AA6BpD,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IACvCC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,KAAK,GAAG,CAAC;IACTC,oBAAoB;IACpBC;EACJ,CAAC,GAAAN,IAAA;EAAA,OACGP,OAAO,CACH,mBACID,KAAA,CAAAe,aAAA,CAACb,iBAAiB,QACbS,UAAU,iBACPX,KAAA,CAAAe,aAAA,CAACZ,6BAA6B;IAACW,OAAO,EAAEA,CAAA,KAAMJ,gBAAgB,CAACD,QAAQ,CAACO,EAAE;EAAE,gBACxEhB,KAAA,CAAAe,aAAA,CAACjB,IAAI;IAACmB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACX,CAClC,EACA,CAACT,QAAQ,CAACU,KAAK,IAChBV,QAAQ,CAACU,KAAK,KAAK,MAAM,IACxB,CAACV,QAAQ,CAACW,UAAU,IAAI,CAACX,QAAQ,CAACY,YAAa,GAAG,IAAI,gBACnDrB,KAAA,CAAAe,aAAA,CAAChB,eAAe;IAACuB,OAAO,EAAE;EAAM,GAC3Bb,QAAQ,CAACU,KAAK,KAAK,WAAW,gBAC3BnB,KAAA,CAAAe,aAAA,CAACT,WAAW;IACRM,KAAK,EAAEA,KAAM;IACbW,GAAG,EAAG,aAAYd,QAAQ,CAACO,EAAE,IAAI,EAAG,EAAE;IACtCP,QAAQ,EAAEA;EAAS,CACtB,CAAC,gBAEFT,KAAA,CAAAe,aAAA,CAACV,SAAS;IACNkB,GAAG,EAAG,YAAWd,QAAQ,CAACO,EAAE,IAAI,EAAG,EAAE;IACrCP,QAAQ,EAAEA,QAAS;IACnBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbY,gBAAgB,EAAEV;EAAQ,CAC7B,CAEQ,CACpB,EACAD,oBAAoB,iBACjBb,KAAA,CAAAe,aAAA,CAACX,mCAAmC,qBAChCJ,KAAA,CAAAe,aAAA,YAAK,KAAIF,oBAAoB,GAAG,CAAE,EAAK,CACN,CAE1B,CACtB,EACD,CAACJ,QAAQ,EAAEC,gBAAgB,EAAEC,UAAU,EAAEG,OAAO,EAAEF,KAAK,EAAEC,oBAAoB,CACjF,CAAC;AAAA;AAELN,WAAW,CAACkB,WAAW,GAAG,aAAa;AAEvC,eAAelB,WAAW"}

package/lib/components/gallery-item/GalleryItem.styles.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledGalleryItemMoreItemsIndicator = exports.StyledGalleryItemDeleteButton = exports.StyledGalleryItem = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledGalleryItem = exports.StyledGalleryItem = _styledComponents.default.div`
+import styled from 'styled-components';
+export const StyledGalleryItem = styled.div`
     display: flex;
     position: relative;
     height: 100%;
     width: 100%;
 `;
-const StyledGalleryItemDeleteButton = exports.StyledGalleryItemDeleteButton = _styledComponents.default.button`
+export const StyledGalleryItemDeleteButton = styled.button`
     background-color: rgba(
         ${_ref => {
   let {
@@ -39,7 +32,7 @@ const StyledGalleryItemDeleteButton = exports.StyledGalleryItemDeleteButton = _s
     justify-content: center;
     align-items: center;
 `;
-const StyledGalleryItemMoreItemsIndicator = exports.StyledGalleryItemMoreItemsIndicator = _styledComponents.default.div`
+export const StyledGalleryItemMoreItemsIndicator = styled.div`
     position: absolute;
     z-index: 2;
     height: 100%;

package/lib/components/gallery-item/GalleryItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledGalleryItem","exports","styled","div","StyledGalleryItemDeleteButton","button","_ref","theme","_ref2","StyledGalleryItemMoreItemsIndicator"],"sources":["../../../src/components/gallery-item/GalleryItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGalleryItem = styled.div`\n    display: flex;\n    position: relative;\n    height: 100%;\n    width: 100%;\n`;\n\ntype StyledGalleryItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemDeleteButton = styled.button<StyledGalleryItemDeleteButtonProps>`\n    background-color: rgba(\n        ${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['000-rgb']},\n        0.75\n    );\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['009-rgb']}, 0.08) inset;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    height: 30px;\n    width: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const StyledGalleryItemMoreItemsIndicator = styled.div`\n    position: absolute;\n    z-index: 2;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    backdrop-filter: brightness(40%);\n\n    p {\n        font-size: 40px;\n        color: white;\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAI;AAC5C;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAGF,yBAAM,CAACG,MAA2C;AAC/F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA0C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAA0C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,mCAAmC,GAAAR,OAAA,CAAAQ,mCAAA,GAAGP,yBAAM,CAACC,GAAI;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"GalleryItem.styles.js","names":["styled","StyledGalleryItem","div","StyledGalleryItemDeleteButton","button","_ref","theme","_ref2","StyledGalleryItemMoreItemsIndicator"],"sources":["../../../src/components/gallery-item/GalleryItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGalleryItem = styled.div`\n    display: flex;\n    position: relative;\n    height: 100%;\n    width: 100%;\n`;\n\ntype StyledGalleryItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemDeleteButton = styled.button<StyledGalleryItemDeleteButtonProps>`\n    background-color: rgba(\n        ${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['000-rgb']},\n        0.75\n    );\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['009-rgb']}, 0.08) inset;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    height: 30px;\n    width: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const StyledGalleryItemMoreItemsIndicator = styled.div`\n    position: absolute;\n    z-index: 2;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    backdrop-filter: brightness(40%);\n\n    p {\n        font-size: 40px;\n        color: white;\n    }\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAI;AAC5C;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACI,MAA2C;AAC/F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA0C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAA0C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,mCAAmC,GAAGR,MAAM,CAACE,GAAI;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/gallery-item/media-item/MediaItem.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _core = require("@chayns-components/core");
-var _react = _interopRequireDefault(require("react"));
-var _MediaItem = require("./MediaItem.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { Icon } from '@chayns-components/core';
+import React from 'react';
+import { StyledMediaItemImage, StyledMediaItemImageWrapper, StyledMediaItemPlayIcon, StyledMediaItemVideo, StyledMediaItemVideoWrapper, StyledMotionMediaItem } from './MediaItem.styles';
 const MediaItem = _ref => {
   let {
     fileItem,
@@ -15,7 +8,7 @@ const MediaItem = _ref => {
     openSelectedFile,
     ratio
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMotionMediaItem, {
+  return /*#__PURE__*/React.createElement(StyledMotionMediaItem, {
     animate: {
       opacity: 1
     },
@@ -28,25 +21,25 @@ const MediaItem = _ref => {
     transition: {
       duration: 3.2
     }
-  }, fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemVideoWrapper, {
+  }, fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? /*#__PURE__*/React.createElement(StyledMediaItemVideoWrapper, {
     onClick: () => openSelectedFile(fileItem),
     ratio: ratio
-  }, /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemPlayIcon, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+  }, /*#__PURE__*/React.createElement(StyledMediaItemPlayIcon, null, /*#__PURE__*/React.createElement(Icon, {
     size: isEditMode ? 30 : 50,
     icons: ['fa fa-play']
-  })), /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemVideo, {
+  })), /*#__PURE__*/React.createElement(StyledMediaItemVideo, {
     poster: fileItem.uploadedFile.thumbnailUrl
-  }, /*#__PURE__*/_react.default.createElement("source", {
+  }, /*#__PURE__*/React.createElement("source", {
     src: fileItem.uploadedFile.url,
     type: "video/mp4"
-  }))) : /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemImageWrapper, {
+  }))) : /*#__PURE__*/React.createElement(StyledMediaItemImageWrapper, {
     onClick: () => openSelectedFile(fileItem),
     ratio: ratio
-  }, /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemImage, {
+  }, /*#__PURE__*/React.createElement(StyledMediaItemImage, {
     draggable: false,
     src: fileItem.uploadedFile?.url
   })));
 };
 MediaItem.displayName = 'MediaItem';
-var _default = exports.default = MediaItem;
+export default MediaItem;
 //# sourceMappingURL=MediaItem.js.map

package/lib/components/gallery-item/media-item/MediaItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaItem.js","names":["_core","require","_react","_interopRequireDefault","_MediaItem","obj","__esModule","default","MediaItem","_ref","fileItem","isEditMode","openSelectedFile","ratio","createElement","StyledMotionMediaItem","animate","opacity","initial","exit","transition","duration","uploadedFile","StyledMediaItemVideoWrapper","onClick","StyledMediaItemPlayIcon","Icon","size","icons","StyledMediaItemVideo","poster","thumbnailUrl","src","url","type","StyledMediaItemImageWrapper","StyledMediaItemImage","draggable","displayName","_default","exports"],"sources":["../../../../src/components/gallery-item/media-item/MediaItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport type { FileItem } from '@chayns-components/core/lib/types/file';\nimport React, { FC } from 'react';\nimport {\n    StyledMediaItemImage,\n    StyledMediaItemImageWrapper,\n    StyledMediaItemPlayIcon,\n    StyledMediaItemVideo,\n    StyledMediaItemVideoWrapper,\n    StyledMotionMediaItem,\n} from './MediaItem.styles';\n\nexport type MediaItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: FileItem;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode: boolean;\n    /**\n     *  Function to be executed when a file is selected\n     */\n    openSelectedFile: (file: FileItem) => void;\n    /**\n     * The ratio of the image\n     */\n    ratio: number;\n};\n\nconst MediaItem: FC<MediaItemProps> = ({ fileItem, isEditMode, openSelectedFile, ratio }) => (\n    <StyledMotionMediaItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: 3.2 }}\n    >\n        {fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? (\n            <StyledMediaItemVideoWrapper onClick={() => openSelectedFile(fileItem)} ratio={ratio}>\n                <StyledMediaItemPlayIcon>\n                    <Icon size={isEditMode ? 30 : 50} icons={['fa fa-play']} />\n                </StyledMediaItemPlayIcon>\n                <StyledMediaItemVideo poster={fileItem.uploadedFile.thumbnailUrl}>\n                    <source src={fileItem.uploadedFile.url} type=\"video/mp4\" />\n                </StyledMediaItemVideo>\n            </StyledMediaItemVideoWrapper>\n        ) : (\n            <StyledMediaItemImageWrapper onClick={() => openSelectedFile(fileItem)} ratio={ratio}>\n                <StyledMediaItemImage draggable={false} src={fileItem.uploadedFile?.url} />\n            </StyledMediaItemImageWrapper>\n        )}\n    </StyledMotionMediaItem>\n);\n\nMediaItem.displayName = 'MediaItem';\n\nexport default MediaItem;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAO4B,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAqB5B,MAAMG,SAA6B,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC;EAAM,CAAC,GAAAJ,IAAA;EAAA,oBACpFP,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAW,qBAAqB;IAClBC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MAAEF,OAAO,EAAE;IAAE,CAAE;IACrBG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BX,QAAQ,CAACY,YAAY,IAAI,cAAc,IAAIZ,QAAQ,CAACY,YAAY,gBAC7DpB,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAmB,2BAA2B;IAACC,OAAO,EAAEA,CAAA,KAAMZ,gBAAgB,CAACF,QAAQ,CAAE;IAACG,KAAK,EAAEA;EAAM,gBACjFX,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAqB,uBAAuB,qBACpBvB,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACd,KAAA,CAAA0B,IAAI;IAACC,IAAI,EAAEhB,UAAU,GAAG,EAAE,GAAG,EAAG;IAACiB,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CACrC,CAAC,eAC1B1B,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAyB,oBAAoB;IAACC,MAAM,EAAEpB,QAAQ,CAACY,YAAY,CAACS;EAAa,gBAC7D7B,MAAA,CAAAK,OAAA,CAAAO,aAAA;IAAQkB,GAAG,EAAEtB,QAAQ,CAACY,YAAY,CAACW,GAAI;IAACC,IAAI,EAAC;EAAW,CAAE,CACxC,CACG,CAAC,gBAE9BhC,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAA+B,2BAA2B;IAACX,OAAO,EAAEA,CAAA,KAAMZ,gBAAgB,CAACF,QAAQ,CAAE;IAACG,KAAK,EAAEA;EAAM,gBACjFX,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAgC,oBAAoB;IAACC,SAAS,EAAE,KAAM;IAACL,GAAG,EAAEtB,QAAQ,CAACY,YAAY,EAAEW;EAAI,CAAE,CACjD,CAEd,CAAC;AAAA,CAC3B;AAEDzB,SAAS,CAAC8B,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjC,OAAA,GAErBC,SAAS"}
+{"version":3,"file":"MediaItem.js","names":["Icon","React","StyledMediaItemImage","StyledMediaItemImageWrapper","StyledMediaItemPlayIcon","StyledMediaItemVideo","StyledMediaItemVideoWrapper","StyledMotionMediaItem","MediaItem","_ref","fileItem","isEditMode","openSelectedFile","ratio","createElement","animate","opacity","initial","exit","transition","duration","uploadedFile","onClick","size","icons","poster","thumbnailUrl","src","url","type","draggable","displayName"],"sources":["../../../../src/components/gallery-item/media-item/MediaItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport type { FileItem } from '@chayns-components/core/lib/types/file';\nimport React, { FC } from 'react';\nimport {\n    StyledMediaItemImage,\n    StyledMediaItemImageWrapper,\n    StyledMediaItemPlayIcon,\n    StyledMediaItemVideo,\n    StyledMediaItemVideoWrapper,\n    StyledMotionMediaItem,\n} from './MediaItem.styles';\n\nexport type MediaItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: FileItem;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode: boolean;\n    /**\n     *  Function to be executed when a file is selected\n     */\n    openSelectedFile: (file: FileItem) => void;\n    /**\n     * The ratio of the image\n     */\n    ratio: number;\n};\n\nconst MediaItem: FC<MediaItemProps> = ({ fileItem, isEditMode, openSelectedFile, ratio }) => (\n    <StyledMotionMediaItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: 3.2 }}\n    >\n        {fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? (\n            <StyledMediaItemVideoWrapper onClick={() => openSelectedFile(fileItem)} ratio={ratio}>\n                <StyledMediaItemPlayIcon>\n                    <Icon size={isEditMode ? 30 : 50} icons={['fa fa-play']} />\n                </StyledMediaItemPlayIcon>\n                <StyledMediaItemVideo poster={fileItem.uploadedFile.thumbnailUrl}>\n                    <source src={fileItem.uploadedFile.url} type=\"video/mp4\" />\n                </StyledMediaItemVideo>\n            </StyledMediaItemVideoWrapper>\n        ) : (\n            <StyledMediaItemImageWrapper onClick={() => openSelectedFile(fileItem)} ratio={ratio}>\n                <StyledMediaItemImage draggable={false} src={fileItem.uploadedFile?.url} />\n            </StyledMediaItemImageWrapper>\n        )}\n    </StyledMotionMediaItem>\n);\n\nMediaItem.displayName = 'MediaItem';\n\nexport default MediaItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAE9C,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,oBAAoB,EACpBC,2BAA2B,EAC3BC,uBAAuB,EACvBC,oBAAoB,EACpBC,2BAA2B,EAC3BC,qBAAqB,QAClB,oBAAoB;AAqB3B,MAAMC,SAA6B,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC;EAAM,CAAC,GAAAJ,IAAA;EAAA,oBACpFR,KAAA,CAAAa,aAAA,CAACP,qBAAqB;IAClBQ,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MAAEF,OAAO,EAAE;IAAE,CAAE;IACrBG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BV,QAAQ,CAACW,YAAY,IAAI,cAAc,IAAIX,QAAQ,CAACW,YAAY,gBAC7DpB,KAAA,CAAAa,aAAA,CAACR,2BAA2B;IAACgB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;IAACG,KAAK,EAAEA;EAAM,gBACjFZ,KAAA,CAAAa,aAAA,CAACV,uBAAuB,qBACpBH,KAAA,CAAAa,aAAA,CAACd,IAAI;IAACuB,IAAI,EAAEZ,UAAU,GAAG,EAAE,GAAG,EAAG;IAACa,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CACrC,CAAC,eAC1BvB,KAAA,CAAAa,aAAA,CAACT,oBAAoB;IAACoB,MAAM,EAAEf,QAAQ,CAACW,YAAY,CAACK;EAAa,gBAC7DzB,KAAA,CAAAa,aAAA;IAAQa,GAAG,EAAEjB,QAAQ,CAACW,YAAY,CAACO,GAAI;IAACC,IAAI,EAAC;EAAW,CAAE,CACxC,CACG,CAAC,gBAE9B5B,KAAA,CAAAa,aAAA,CAACX,2BAA2B;IAACmB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;IAACG,KAAK,EAAEA;EAAM,gBACjFZ,KAAA,CAAAa,aAAA,CAACZ,oBAAoB;IAAC4B,SAAS,EAAE,KAAM;IAACH,GAAG,EAAEjB,QAAQ,CAACW,YAAY,EAAEO;EAAI,CAAE,CACjD,CAEd,CAAC;AAAA,CAC3B;AAEDpB,SAAS,CAACuB,WAAW,GAAG,WAAW;AAEnC,eAAevB,SAAS"}

package/lib/components/gallery-item/media-item/MediaItem.styles.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledMotionMediaItem = exports.StyledMediaItemVideoWrapper = exports.StyledMediaItemVideo = exports.StyledMediaItemPlayIcon = exports.StyledMediaItemImageWrapper = exports.StyledMediaItemImage = void 0;
-var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledMotionMediaItem = exports.StyledMotionMediaItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledMotionMediaItem = styled(motion.div)`
     display: flex;
     width: 100%;
     height: 100%;
 `;
-const StyledMediaItemVideoWrapper = exports.StyledMediaItemVideoWrapper = _styledComponents.default.div`
+export const StyledMediaItemVideoWrapper = styled.div`
     display: flex;
     width: 100%;
     height: 100%;
@@ -23,7 +16,7 @@ const StyledMediaItemVideoWrapper = exports.StyledMediaItemVideoWrapper = _style
   return ratio;
 }};
 `;
-const StyledMediaItemImageWrapper = exports.StyledMediaItemImageWrapper = _styledComponents.default.div`
+export const StyledMediaItemImageWrapper = styled.div`
     display: flex;
     width: 100%;
     height: 100%;
@@ -34,7 +27,7 @@ const StyledMediaItemImageWrapper = exports.StyledMediaItemImageWrapper = _style
   return ratio;
 }};
 `;
-const StyledMediaItemImage = exports.StyledMediaItemImage = _styledComponents.default.img`
+export const StyledMediaItemImage = styled.img`
     background-color: ${_ref3 => {
   let {
     theme
@@ -53,7 +46,7 @@ const StyledMediaItemImage = exports.StyledMediaItemImage = _styledComponents.de
     height: 100%;
     object-fit: cover;
 `;
-const StyledMediaItemVideo = exports.StyledMediaItemVideo = _styledComponents.default.video`
+export const StyledMediaItemVideo = styled.video`
     background-color: ${_ref5 => {
   let {
     theme
@@ -70,7 +63,7 @@ const StyledMediaItemVideo = exports.StyledMediaItemVideo = _styledComponents.de
     width: 100%;
     object-fit: cover;
 `;
-const StyledMediaItemPlayIcon = exports.StyledMediaItemPlayIcon = _styledComponents.default.div`
+export const StyledMediaItemPlayIcon = styled.div`
     position: absolute;
     z-index: 2;
     top: 50%;

package/lib/components/gallery-item/media-item/MediaItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledMotionMediaItem","exports","styled","motion","div","StyledMediaItemVideoWrapper","_ref","ratio","StyledMediaItemImageWrapper","_ref2","StyledMediaItemImage","img","_ref3","theme","_ref4","StyledMediaItemVideo","video","_ref5","_ref6","StyledMediaItemPlayIcon"],"sources":["../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ ratio }) => ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ ratio }) => ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n    background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n        inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n    background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n        inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC5E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAJ,OAAA,CAAAI,2BAAA,GAAGH,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACzC,CAAC;AAEM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBK,KAAA;EAAA,IAAC;IAAEF;EAAM,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK;AAAA,CAAC;AACzC,CAAC;AAMM,MAAMG,oBAAoB,GAAAT,OAAA,CAAAS,oBAAA,GAAGR,yBAAM,CAACS,GAA+B;AAC1E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAAiC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,oBAAoB,GAAAd,OAAA,CAAAc,oBAAA,GAAGb,yBAAM,CAACc,KAAiC;AAC5E,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCK,KAAA;EAAA,IAAC;IAAEL;EAAiC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA,CAAC;AAEM,MAAMM,uBAAuB,GAAAlB,OAAA,CAAAkB,uBAAA,GAAGjB,yBAAM,CAACE,GAAI;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"MediaItem.styles.js","names":["motion","styled","StyledMotionMediaItem","div","StyledMediaItemVideoWrapper","_ref","ratio","StyledMediaItemImageWrapper","_ref2","StyledMediaItemImage","img","_ref3","theme","_ref4","StyledMediaItemVideo","video","_ref5","_ref6","StyledMediaItemPlayIcon"],"sources":["../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ ratio }) => ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ ratio }) => ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n    background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n        inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n    background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n        inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsB;AAC5E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACzC,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGN,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBK,KAAA;EAAA,IAAC;IAAEF;EAAM,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK;AAAA,CAAC;AACzC,CAAC;AAMD,OAAO,MAAMG,oBAAoB,GAAGR,MAAM,CAACS,GAA+B;AAC1E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAAiC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,oBAAoB,GAAGb,MAAM,CAACc,KAAiC;AAC5E,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCK,KAAA;EAAA,IAAC;IAAEL;EAAiC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,uBAAuB,GAAGjB,MAAM,CAACE,GAAI;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/gallery-item/preview-item/PreviewItem.js

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _core = require("@chayns-components/core");
-var _react = _interopRequireDefault(require("react"));
-var _PreviewItem = require("./PreviewItem.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { SmallWaitCursor } from '@chayns-components/core';
+import React from 'react';
+import { StyledMotionPreviewItem, StyledPreviewItemImage, StyledPreviewItemImageWrapper, StyledPreviewItemLoadingIcon } from './PreviewItem.styles';
 const PreviewItem = _ref => {
   let {
     fileItem,
     ratio
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledMotionPreviewItem, {
+  return /*#__PURE__*/React.createElement(StyledMotionPreviewItem, {
     animate: {
       opacity: 1
     },
@@ -33,16 +26,16 @@ const PreviewItem = _ref => {
     style: {
       position: 'absolute'
     }
-  }, /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledPreviewItemImageWrapper, {
+  }, /*#__PURE__*/React.createElement(StyledPreviewItemImageWrapper, {
     ratio: ratio
-  }, /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledPreviewItemLoadingIcon, null, /*#__PURE__*/_react.default.createElement(_core.SmallWaitCursor, {
+  }, /*#__PURE__*/React.createElement(StyledPreviewItemLoadingIcon, null, /*#__PURE__*/React.createElement(SmallWaitCursor, {
     shouldHideWaitCursor: false,
     shouldHideBackground: true
-  })), /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledPreviewItemImage, {
+  })), /*#__PURE__*/React.createElement(StyledPreviewItemImage, {
     draggable: false,
     src: fileItem.previewUrl
   })));
 };
 PreviewItem.displayName = 'PreviewItem';
-var _default = exports.default = PreviewItem;
+export default PreviewItem;
 //# sourceMappingURL=PreviewItem.js.map

package/lib/components/gallery-item/preview-item/PreviewItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewItem.js","names":["_core","require","_react","_interopRequireDefault","_PreviewItem","obj","__esModule","default","PreviewItem","_ref","fileItem","ratio","createElement","StyledMotionPreviewItem","animate","opacity","initial","exit","transition","duration","delay","style","position","StyledPreviewItemImageWrapper","StyledPreviewItemLoadingIcon","SmallWaitCursor","shouldHideWaitCursor","shouldHideBackground","StyledPreviewItemImage","draggable","src","previewUrl","displayName","_default","exports"],"sources":["../../../../src/components/gallery-item/preview-item/PreviewItem.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport type { FileItem } from '@chayns-components/core/lib/types/file';\nimport React, { FC } from 'react';\nimport {\n    StyledMotionPreviewItem,\n    StyledPreviewItemImage,\n    StyledPreviewItemImageWrapper,\n    StyledPreviewItemLoadingIcon,\n} from './PreviewItem.styles';\n\nexport type PreviewItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: FileItem;\n    /**\n     * The ratio of the image\n     */\n    ratio: number;\n};\n\nconst PreviewItem: FC<PreviewItemProps> = ({ fileItem, ratio }) => (\n    <StyledMotionPreviewItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{\n            opacity: 0,\n            transition: { duration: 3.2, delay: 3.2 },\n        }}\n        transition={{ duration: 3.2 }}\n        style={{ position: 'absolute' }}\n    >\n        <StyledPreviewItemImageWrapper ratio={ratio}>\n            <StyledPreviewItemLoadingIcon>\n                <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n            </StyledPreviewItemLoadingIcon>\n            <StyledPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n        </StyledPreviewItemImageWrapper>\n    </StyledMotionPreviewItem>\n);\n\nPreviewItem.displayName = 'PreviewItem';\n\nexport default PreviewItem;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAK8B,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAa9B,MAAMG,WAAiC,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,oBAC1DP,MAAA,CAAAK,OAAA,CAAAK,aAAA,CAACR,YAAA,CAAAS,uBAAuB;IACpBC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MACFF,OAAO,EAAE,CAAC;MACVG,UAAU,EAAE;QAAEC,QAAQ,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAI;IAC5C,CAAE;IACFF,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI,CAAE;IAC9BE,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAW;EAAE,gBAEhCpB,MAAA,CAAAK,OAAA,CAAAK,aAAA,CAACR,YAAA,CAAAmB,6BAA6B;IAACZ,KAAK,EAAEA;EAAM,gBACxCT,MAAA,CAAAK,OAAA,CAAAK,aAAA,CAACR,YAAA,CAAAoB,4BAA4B,qBACzBtB,MAAA,CAAAK,OAAA,CAAAK,aAAA,CAACZ,KAAA,CAAAyB,eAAe;IAACC,oBAAoB,EAAE,KAAM;IAACC,oBAAoB;EAAA,CAAE,CAC1C,CAAC,eAC/BzB,MAAA,CAAAK,OAAA,CAAAK,aAAA,CAACR,YAAA,CAAAwB,sBAAsB;IAACC,SAAS,EAAE,KAAM;IAACC,GAAG,EAAEpB,QAAQ,CAACqB;EAAW,CAAE,CAC1C,CACV,CAAC;AAAA,CAC7B;AAEDvB,WAAW,CAACwB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEzBC,WAAW"}
+{"version":3,"file":"PreviewItem.js","names":["SmallWaitCursor","React","StyledMotionPreviewItem","StyledPreviewItemImage","StyledPreviewItemImageWrapper","StyledPreviewItemLoadingIcon","PreviewItem","_ref","fileItem","ratio","createElement","animate","opacity","initial","exit","transition","duration","delay","style","position","shouldHideWaitCursor","shouldHideBackground","draggable","src","previewUrl","displayName"],"sources":["../../../../src/components/gallery-item/preview-item/PreviewItem.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport type { FileItem } from '@chayns-components/core/lib/types/file';\nimport React, { FC } from 'react';\nimport {\n    StyledMotionPreviewItem,\n    StyledPreviewItemImage,\n    StyledPreviewItemImageWrapper,\n    StyledPreviewItemLoadingIcon,\n} from './PreviewItem.styles';\n\nexport type PreviewItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: FileItem;\n    /**\n     * The ratio of the image\n     */\n    ratio: number;\n};\n\nconst PreviewItem: FC<PreviewItemProps> = ({ fileItem, ratio }) => (\n    <StyledMotionPreviewItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{\n            opacity: 0,\n            transition: { duration: 3.2, delay: 3.2 },\n        }}\n        transition={{ duration: 3.2 }}\n        style={{ position: 'absolute' }}\n    >\n        <StyledPreviewItemImageWrapper ratio={ratio}>\n            <StyledPreviewItemLoadingIcon>\n                <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n            </StyledPreviewItemLoadingIcon>\n            <StyledPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n        </StyledPreviewItemImageWrapper>\n    </StyledMotionPreviewItem>\n);\n\nPreviewItem.displayName = 'PreviewItem';\n\nexport default PreviewItem;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AAEzD,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,4BAA4B,QACzB,sBAAsB;AAa7B,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,oBAC1DN,KAAA,CAAAS,aAAA,CAACR,uBAAuB;IACpBS,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MACFF,OAAO,EAAE,CAAC;MACVG,UAAU,EAAE;QAAEC,QAAQ,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAI;IAC5C,CAAE;IACFF,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI,CAAE;IAC9BE,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAW;EAAE,gBAEhClB,KAAA,CAAAS,aAAA,CAACN,6BAA6B;IAACK,KAAK,EAAEA;EAAM,gBACxCR,KAAA,CAAAS,aAAA,CAACL,4BAA4B,qBACzBJ,KAAA,CAAAS,aAAA,CAACV,eAAe;IAACoB,oBAAoB,EAAE,KAAM;IAACC,oBAAoB;EAAA,CAAE,CAC1C,CAAC,eAC/BpB,KAAA,CAAAS,aAAA,CAACP,sBAAsB;IAACmB,SAAS,EAAE,KAAM;IAACC,GAAG,EAAEf,QAAQ,CAACgB;EAAW,CAAE,CAC1C,CACV,CAAC;AAAA,CAC7B;AAEDlB,WAAW,CAACmB,WAAW,GAAG,aAAa;AAEvC,eAAenB,WAAW"}

package/lib/components/gallery-item/preview-item/PreviewItem.styles.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledPreviewItemLoadingIcon = exports.StyledPreviewItemImageWrapper = exports.StyledPreviewItemImage = exports.StyledMotionPreviewItem = void 0;
-var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledMotionPreviewItem = exports.StyledMotionPreviewItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledMotionPreviewItem = styled(motion.div)`
     display: flex;
     width: 100%;
     height: 100%;
 `;
-const StyledPreviewItemImageWrapper = exports.StyledPreviewItemImageWrapper = _styledComponents.default.div`
+export const StyledPreviewItemImageWrapper = styled.div`
     display: flex;
     width: 100%;
     height: 100%;
@@ -23,7 +16,7 @@ const StyledPreviewItemImageWrapper = exports.StyledPreviewItemImageWrapper = _s
   return ratio;
 }};
 `;
-const StyledPreviewItemImage = exports.StyledPreviewItemImage = _styledComponents.default.img`
+export const StyledPreviewItemImage = styled.img`
     background-color: ${_ref2 => {
   let {
     theme
@@ -42,7 +35,7 @@ const StyledPreviewItemImage = exports.StyledPreviewItemImage = _styledComponent
     height: 100%;
     object-fit: cover;
 `;
-const StyledPreviewItemLoadingIcon = exports.StyledPreviewItemLoadingIcon = _styledComponents.default.div`
+export const StyledPreviewItemLoadingIcon = styled.div`
     position: absolute;
     z-index: 2;
     top: 50%;

package/lib/components/gallery-item/preview-item/PreviewItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledMotionPreviewItem","exports","styled","motion","div","StyledPreviewItemImageWrapper","_ref","ratio","StyledPreviewItemImage","img","_ref2","theme","_ref3","StyledPreviewItemLoadingIcon"],"sources":["../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ ratio }) => ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n    background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC9E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACzC,CAAC;AAIM,MAAMC,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACO,GAAiC;AAC9E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,4BAA4B,GAAAZ,OAAA,CAAAY,4BAAA,GAAGX,yBAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"PreviewItem.styles.js","names":["motion","styled","StyledMotionPreviewItem","div","StyledPreviewItemImageWrapper","_ref","ratio","StyledPreviewItemImage","img","_ref2","theme","_ref3","StyledPreviewItemLoadingIcon"],"sources":["../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ ratio }) => ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n    background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsB;AAC9E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACzC,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACO,GAAiC;AAC9E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,4BAA4B,GAAGX,MAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,CAAC"}

package/lib/index.js

@@ -1,21 +1,5 @@
-"use strict";
+// noinspection JSUnusedGlobalSymbols
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Gallery", {
-  enumerable: true,
-  get: function () {
-    return _Gallery.default;
-  }
-});
-Object.defineProperty(exports, "GalleryViewMode", {
-  enumerable: true,
-  get: function () {
-    return _gallery.GalleryViewMode;
-  }
-});
-var _Gallery = _interopRequireDefault(require("./components/Gallery"));
-var _gallery = require("./types/gallery");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default as Gallery } from './components/Gallery';
+export { GalleryViewMode } from './types/gallery';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Gallery","_interopRequireDefault","require","_gallery","obj","__esModule","default"],"sources":["../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAkD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}
+{"version":3,"file":"index.js","names":["default","Gallery","GalleryViewMode"],"sources":["../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":"AAAA;;AAEA,SAASA,OAAO,IAAIC,OAAO,QAAQ,sBAAsB;AACzD,SAASC,eAAe,QAAQ,iBAAiB"}

package/lib/types/gallery.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GalleryViewMode = void 0;
-let GalleryViewMode = exports.GalleryViewMode = /*#__PURE__*/function (GalleryViewMode) {
+export let GalleryViewMode = /*#__PURE__*/function (GalleryViewMode) {
   GalleryViewMode[GalleryViewMode["SQUARE"] = 0] = "SQUARE";
   GalleryViewMode[GalleryViewMode["GRID"] = 1] = "GRID";
   return GalleryViewMode;

package/lib/types/gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"gallery.js","names":["GalleryViewMode","exports"],"sources":["../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n    SQUARE,\n    GRID,\n}\n"],"mappings":";;;;;;IAAYA,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA"}
+{"version":3,"file":"gallery.js","names":["GalleryViewMode"],"sources":["../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n    SQUARE,\n    GRID,\n}\n"],"mappings":"AAAA,WAAYA,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA"}

package/lib/utils/file.js

@@ -1,12 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generateVideoThumbnail = exports.generatePreviewUrl = exports.filterDuplicateFile = void 0;
 // TODO: Check why absolute import is needed
 
-const filterDuplicateFile = _ref => {
+export const filterDuplicateFile = _ref => {
   let {
     newFile,
     files
@@ -19,8 +13,7 @@ const filterDuplicateFile = _ref => {
   });
   return duplicates.length > 0;
 };
-exports.filterDuplicateFile = filterDuplicateFile;
-const generatePreviewUrl = _ref3 => {
+export const generatePreviewUrl = _ref3 => {
   let {
     callback,
     file
@@ -32,8 +25,7 @@ const generatePreviewUrl = _ref3 => {
   };
   reader.readAsDataURL(file);
 };
-exports.generatePreviewUrl = generatePreviewUrl;
-const generateVideoThumbnail = _ref4 => {
+export const generateVideoThumbnail = _ref4 => {
   let {
     file,
     callback
@@ -54,5 +46,4 @@ const generateVideoThumbnail = _ref4 => {
     callback(canvas.toDataURL('image/png'));
   };
 };
-exports.generateVideoThumbnail = generateVideoThumbnail;
 //# sourceMappingURL=file.js.map

package/lib/utils/file.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.js","names":["filterDuplicateFile","_ref","newFile","files","duplicates","filter","_ref2","file","name","size","length","exports","generatePreviewUrl","_ref3","callback","reader","FileReader","onload","event","previewUrl","target","result","readAsDataURL","generateVideoThumbnail","_ref4","canvas","document","createElement","video","autoplay","muted","src","URL","createObjectURL","onloadeddata","ctx","getContext","width","videoWidth","height","videoHeight","drawImage","pause","toDataURL"],"sources":["../../src/utils/file.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core/lib/types/file'; // TODO: Check why absolute import is needed\n\ninterface FilerDuplicateFileOptions {\n    files: FileItem[];\n    newFile: File;\n}\n\nexport const filterDuplicateFile = ({ newFile, files }: FilerDuplicateFileOptions) => {\n    const duplicates = files.filter(\n        ({ file }) => file && file.name === newFile.name && file.size === newFile.size\n    );\n\n    return duplicates.length > 0;\n};\n\ninterface GeneratePreviewUrlOptions {\n    file: File;\n    callback: (previewUrl: string) => void;\n}\n\nexport const generatePreviewUrl = ({ callback, file }: GeneratePreviewUrlOptions): void => {\n    const reader = new FileReader();\n\n    reader.onload = (event) => {\n        const previewUrl = event.target?.result as string;\n\n        callback(previewUrl);\n    };\n\n    reader.readAsDataURL(file);\n};\n\ninterface GenerateVideoThumbnailOptions {\n    file: File;\n    callback: (previewUrl: string) => void;\n}\n\nexport const generateVideoThumbnail = ({ file, callback }: GenerateVideoThumbnailOptions) => {\n    const canvas = document.createElement('canvas');\n    const video = document.createElement('video');\n\n    // this is important\n    video.autoplay = true;\n    video.muted = true;\n    video.src = URL.createObjectURL(file);\n\n    video.onloadeddata = () => {\n        const ctx = canvas.getContext('2d');\n\n        canvas.width = video.videoWidth;\n        canvas.height = video.videoHeight;\n\n        ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n        video.pause();\n\n        callback(canvas.toDataURL('image/png'));\n    };\n};\n"],"mappings":";;;;;;AAAwE;;AAOjE,MAAMA,mBAAmB,GAAGC,IAAA,IAAmD;EAAA,IAAlD;IAAEC,OAAO;IAAEC;EAAiC,CAAC,GAAAF,IAAA;EAC7E,MAAMG,UAAU,GAAGD,KAAK,CAACE,MAAM,CAC3BC,KAAA;IAAA,IAAC;MAAEC;IAAK,CAAC,GAAAD,KAAA;IAAA,OAAKC,IAAI,IAAIA,IAAI,CAACC,IAAI,KAAKN,OAAO,CAACM,IAAI,IAAID,IAAI,CAACE,IAAI,KAAKP,OAAO,CAACO,IAAI;EAAA,CAClF,CAAC;EAED,OAAOL,UAAU,CAACM,MAAM,GAAG,CAAC;AAChC,CAAC;AAACC,OAAA,CAAAX,mBAAA,GAAAA,mBAAA;AAOK,MAAMY,kBAAkB,GAAGC,KAAA,IAAyD;EAAA,IAAxD;IAAEC,QAAQ;IAAEP;EAAgC,CAAC,GAAAM,KAAA;EAC5E,MAAME,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,KAAK,IAAK;IACvB,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,EAAEC,MAAgB;IAEjDP,QAAQ,CAACK,UAAU,CAAC;EACxB,CAAC;EAEDJ,MAAM,CAACO,aAAa,CAACf,IAAI,CAAC;AAC9B,CAAC;AAACI,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAOK,MAAMW,sBAAsB,GAAGC,KAAA,IAAuD;EAAA,IAAtD;IAAEjB,IAAI;IAAEO;EAAwC,CAAC,GAAAU,KAAA;EACpF,MAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;EAC/C,MAAMC,KAAK,GAAGF,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;;EAE7C;EACAC,KAAK,CAACC,QAAQ,GAAG,IAAI;EACrBD,KAAK,CAACE,KAAK,GAAG,IAAI;EAClBF,KAAK,CAACG,GAAG,GAAGC,GAAG,CAACC,eAAe,CAAC1B,IAAI,CAAC;EAErCqB,KAAK,CAACM,YAAY,GAAG,MAAM;IACvB,MAAMC,GAAG,GAAGV,MAAM,CAACW,UAAU,CAAC,IAAI,CAAC;IAEnCX,MAAM,CAACY,KAAK,GAAGT,KAAK,CAACU,UAAU;IAC/Bb,MAAM,CAACc,MAAM,GAAGX,KAAK,CAACY,WAAW;IAEjCL,GAAG,EAAEM,SAAS,CAACb,KAAK,EAAE,CAAC,EAAE,CAAC,EAAEA,KAAK,CAACU,UAAU,EAAEV,KAAK,CAACY,WAAW,CAAC;IAChEZ,KAAK,CAACc,KAAK,CAAC,CAAC;IAEb5B,QAAQ,CAACW,MAAM,CAACkB,SAAS,CAAC,WAAW,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC;AAAChC,OAAA,CAAAY,sBAAA,GAAAA,sBAAA"}
+{"version":3,"file":"file.js","names":["filterDuplicateFile","_ref","newFile","files","duplicates","filter","_ref2","file","name","size","length","generatePreviewUrl","_ref3","callback","reader","FileReader","onload","event","previewUrl","target","result","readAsDataURL","generateVideoThumbnail","_ref4","canvas","document","createElement","video","autoplay","muted","src","URL","createObjectURL","onloadeddata","ctx","getContext","width","videoWidth","height","videoHeight","drawImage","pause","toDataURL"],"sources":["../../src/utils/file.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core/lib/types/file'; // TODO: Check why absolute import is needed\n\ninterface FilerDuplicateFileOptions {\n    files: FileItem[];\n    newFile: File;\n}\n\nexport const filterDuplicateFile = ({ newFile, files }: FilerDuplicateFileOptions) => {\n    const duplicates = files.filter(\n        ({ file }) => file && file.name === newFile.name && file.size === newFile.size\n    );\n\n    return duplicates.length > 0;\n};\n\ninterface GeneratePreviewUrlOptions {\n    file: File;\n    callback: (previewUrl: string) => void;\n}\n\nexport const generatePreviewUrl = ({ callback, file }: GeneratePreviewUrlOptions): void => {\n    const reader = new FileReader();\n\n    reader.onload = (event) => {\n        const previewUrl = event.target?.result as string;\n\n        callback(previewUrl);\n    };\n\n    reader.readAsDataURL(file);\n};\n\ninterface GenerateVideoThumbnailOptions {\n    file: File;\n    callback: (previewUrl: string) => void;\n}\n\nexport const generateVideoThumbnail = ({ file, callback }: GenerateVideoThumbnailOptions) => {\n    const canvas = document.createElement('canvas');\n    const video = document.createElement('video');\n\n    // this is important\n    video.autoplay = true;\n    video.muted = true;\n    video.src = URL.createObjectURL(file);\n\n    video.onloadeddata = () => {\n        const ctx = canvas.getContext('2d');\n\n        canvas.width = video.videoWidth;\n        canvas.height = video.videoHeight;\n\n        ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n        video.pause();\n\n        callback(canvas.toDataURL('image/png'));\n    };\n};\n"],"mappings":"AAAwE;;AAOxE,OAAO,MAAMA,mBAAmB,GAAGC,IAAA,IAAmD;EAAA,IAAlD;IAAEC,OAAO;IAAEC;EAAiC,CAAC,GAAAF,IAAA;EAC7E,MAAMG,UAAU,GAAGD,KAAK,CAACE,MAAM,CAC3BC,KAAA;IAAA,IAAC;MAAEC;IAAK,CAAC,GAAAD,KAAA;IAAA,OAAKC,IAAI,IAAIA,IAAI,CAACC,IAAI,KAAKN,OAAO,CAACM,IAAI,IAAID,IAAI,CAACE,IAAI,KAAKP,OAAO,CAACO,IAAI;EAAA,CAClF,CAAC;EAED,OAAOL,UAAU,CAACM,MAAM,GAAG,CAAC;AAChC,CAAC;AAOD,OAAO,MAAMC,kBAAkB,GAAGC,KAAA,IAAyD;EAAA,IAAxD;IAAEC,QAAQ;IAAEN;EAAgC,CAAC,GAAAK,KAAA;EAC5E,MAAME,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,KAAK,IAAK;IACvB,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,EAAEC,MAAgB;IAEjDP,QAAQ,CAACK,UAAU,CAAC;EACxB,CAAC;EAEDJ,MAAM,CAACO,aAAa,CAACd,IAAI,CAAC;AAC9B,CAAC;AAOD,OAAO,MAAMe,sBAAsB,GAAGC,KAAA,IAAuD;EAAA,IAAtD;IAAEhB,IAAI;IAAEM;EAAwC,CAAC,GAAAU,KAAA;EACpF,MAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;EAC/C,MAAMC,KAAK,GAAGF,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;;EAE7C;EACAC,KAAK,CAACC,QAAQ,GAAG,IAAI;EACrBD,KAAK,CAACE,KAAK,GAAG,IAAI;EAClBF,KAAK,CAACG,GAAG,GAAGC,GAAG,CAACC,eAAe,CAACzB,IAAI,CAAC;EAErCoB,KAAK,CAACM,YAAY,GAAG,MAAM;IACvB,MAAMC,GAAG,GAAGV,MAAM,CAACW,UAAU,CAAC,IAAI,CAAC;IAEnCX,MAAM,CAACY,KAAK,GAAGT,KAAK,CAACU,UAAU;IAC/Bb,MAAM,CAACc,MAAM,GAAGX,KAAK,CAACY,WAAW;IAEjCL,GAAG,EAAEM,SAAS,CAACb,KAAK,EAAE,CAAC,EAAE,CAAC,EAAEA,KAAK,CAACU,UAAU,EAAEV,KAAK,CAACY,WAAW,CAAC;IAChEZ,KAAK,CAACc,KAAK,CAAC,CAAC;IAEb5B,QAAQ,CAACW,MAAM,CAACkB,SAAS,CAAC,WAAW,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.0.0-beta.441",
+    "version": "5.0.0-beta.443",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -33,24 +33,24 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.23.4",
-        "@babel/core": "^7.23.7",
-        "@babel/preset-env": "^7.23.8",
+        "@babel/cli": "^7.23.9",
+        "@babel/core": "^7.23.9",
+        "@babel/preset-env": "^7.23.9",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
-        "@types/react": "^18.2.48",
-        "@types/react-dom": "^18.2.18",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
         "@types/styled-components": "^5.1.34",
-        "@types/uuid": "^9.0.7",
+        "@types/uuid": "^9.0.8",
         "babel-loader": "^9.1.3",
-        "lerna": "^8.0.2",
+        "lerna": "^8.1.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "styled-components": "^6.1.8",
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.441"
+        "@chayns-components/core": "^5.0.0-beta.443"
     },
     "peerDependencies": {
         "chayns-api": ">=1.0.50",
@@ -62,5 +62,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d9b7d5cebd42707113634c1d54151306f6236d8f"
+    "gitHead": "3f3e8b424de86b8597fd4670766a496a767ee1ba"
 }