@chayns-components/gallery 5.0.53 → 5.0.56

package/lib/cjs/utils/gallery.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.openKnownFiles = exports.openFiles = exports.mapFilesToInternalItems = exports.getReadOnlyItemRatio = exports.getGalleryViewerKey = exports.getGalleryRatio = void 0;
+var _chaynsApi = require("chayns-api");
+var _gallery = require("../types/gallery");
+const DEFAULT_MEDIA_RATIO = 1;
+const mapFilesToInternalItems = files => (files ?? []).map((file, index) => ({
+  id: getGalleryViewerKey(file, index),
+  uploadedFile: file.file,
+  file: undefined,
+  state: 'uploaded',
+  previewUrl: undefined
+}));
+exports.mapFilesToInternalItems = mapFilesToInternalItems;
+const getGalleryViewerKey = (fileItem, index) => fileItem.id ?? fileItem.file.id ?? fileItem.file.url ?? `gallery-item-${index}`;
+exports.getGalleryViewerKey = getGalleryViewerKey;
+const getGalleryRatio = fileItems => {
+  var _fileItems$;
+  switch (fileItems.length) {
+    case 0:
+      return DEFAULT_MEDIA_RATIO;
+    case 1:
+      return Math.max(((_fileItems$ = fileItems[0]) === null || _fileItems$ === void 0 ? void 0 : _fileItems$.file.ratio) ?? DEFAULT_MEDIA_RATIO, 1);
+    case 2:
+      return 2;
+    case 3:
+      return 3;
+    default:
+      return DEFAULT_MEDIA_RATIO;
+  }
+};
+exports.getGalleryRatio = getGalleryRatio;
+const getReadOnlyItemRatio = ({
+  fileItems,
+  index,
+  viewMode
+}) => {
+  const itemCount = fileItems.length;
+  if (viewMode !== _gallery.GalleryViewMode.GRID) {
+    return DEFAULT_MEDIA_RATIO;
+  }
+  if (itemCount === 1) {
+    var _fileItems$2;
+    // A square fallback keeps virtualization stable when upstream data does not provide a ratio.
+    return Math.max(((_fileItems$2 = fileItems[0]) === null || _fileItems$2 === void 0 ? void 0 : _fileItems$2.file.ratio) ?? DEFAULT_MEDIA_RATIO, DEFAULT_MEDIA_RATIO);
+  }
+  if (itemCount === 2 && (index === 0 || index === 1)) {
+    return 0.5;
+  }
+  if (index === 0 && itemCount > 2 || itemCount === 3 && (index === 1 || index === 2)) {
+    return 1.5;
+  }
+  return DEFAULT_MEDIA_RATIO;
+};
+exports.getReadOnlyItemRatio = getReadOnlyItemRatio;
+const openFiles = (fileItems, file) => {
+  let startIndex = 0;
+  try {
+    startIndex = fileItems.findIndex(item => item.id === file.id);
+    const items = fileItems.map(item => {
+      var _item$uploadedFile;
+      return {
+        url: ((_item$uploadedFile = item.uploadedFile) === null || _item$uploadedFile === void 0 ? void 0 : _item$uploadedFile.url.replace('_0.mp4', '.mp4')) ?? '',
+        mediaType: item.uploadedFile && 'thumbnailUrl' in item.uploadedFile ? _chaynsApi.MediaType.VIDEO : _chaynsApi.MediaType.IMAGE
+      };
+    });
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    void (0, _chaynsApi.openMedia)({
+      items,
+      startIndex
+    });
+  } catch (_) {
+    if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {
+      void (0, _chaynsApi.openVideo)({
+        url: file.uploadedFile.url
+      });
+      return;
+    }
+    const imageFiles = [];
+    fileItems.forEach(({
+      uploadedFile
+    }) => {
+      if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {
+        imageFiles.push({
+          url: uploadedFile.url
+        });
+      }
+    });
+    startIndex = imageFiles.findIndex(item => {
+      var _file$uploadedFile;
+      return item.url === ((_file$uploadedFile = file.uploadedFile) === null || _file$uploadedFile === void 0 ? void 0 : _file$uploadedFile.url);
+    });
+    const startFile = imageFiles.shift();
+    if (!startFile) {
+      return;
+    }
+    void (0, _chaynsApi.openImage)({
+      items: [startFile, ...imageFiles],
+      startIndex
+    });
+  }
+};
+exports.openFiles = openFiles;
+const openKnownFiles = (fileItems, file) => {
+  const activeFileKey = getGalleryViewerKey(file, fileItems.indexOf(file));
+  let startIndex = 0;
+  try {
+    startIndex = fileItems.findIndex((item, index) => getGalleryViewerKey(item, index) === activeFileKey);
+    const items = fileItems.map(item => ({
+      url: item.file.url.replace('_0.mp4', '.mp4'),
+      mediaType: 'thumbnailUrl' in item.file ? _chaynsApi.MediaType.VIDEO : _chaynsApi.MediaType.IMAGE
+    }));
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    void (0, _chaynsApi.openMedia)({
+      items,
+      startIndex
+    });
+  } catch (_) {
+    if ('thumbnailUrl' in file.file) {
+      void (0, _chaynsApi.openVideo)({
+        url: file.file.url
+      });
+      return;
+    }
+    const imageFiles = [];
+    fileItems.forEach(item => {
+      if (!('thumbnailUrl' in item.file)) {
+        imageFiles.push({
+          url: item.file.url
+        });
+      }
+    });
+    startIndex = imageFiles.findIndex(item => item.url === file.file.url);
+    const startFile = imageFiles.shift();
+    if (!startFile) {
+      return;
+    }
+    void (0, _chaynsApi.openImage)({
+      items: [startFile, ...imageFiles],
+      startIndex
+    });
+  }
+};
+exports.openKnownFiles = openKnownFiles;
+//# sourceMappingURL=gallery.js.map

package/lib/cjs/utils/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","names":["_chaynsApi","require","_gallery","DEFAULT_MEDIA_RATIO","mapFilesToInternalItems","files","map","file","index","id","getGalleryViewerKey","uploadedFile","undefined","state","previewUrl","exports","fileItem","url","getGalleryRatio","fileItems","_fileItems$","length","Math","max","ratio","getReadOnlyItemRatio","viewMode","itemCount","GalleryViewMode","GRID","_fileItems$2","openFiles","startIndex","findIndex","item","items","_item$uploadedFile","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","_","openVideo","imageFiles","forEach","push","_file$uploadedFile","startFile","shift","openImage","openKnownFiles","activeFileKey","indexOf"],"sources":["../../../src/utils/gallery.ts"],"sourcesContent":["import type { FileItem, InternalFileItem } from '@chayns-components/core';\nimport {\n    MediaType,\n    openImage,\n    openMedia,\n    type OpenImageItem,\n    type OpenMediaItem,\n    openVideo,\n} from 'chayns-api';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst DEFAULT_MEDIA_RATIO = 1;\n\nexport const mapFilesToInternalItems = (files?: FileItem[]): InternalFileItem[] =>\n    (files ?? []).map((file, index) => ({\n        id: getGalleryViewerKey(file, index),\n        uploadedFile: file.file,\n        file: undefined,\n        state: 'uploaded',\n        previewUrl: undefined,\n    }));\n\nexport const getGalleryViewerKey = (fileItem: FileItem, index: number): string =>\n    fileItem.id ?? fileItem.file.id ?? fileItem.file.url ?? `gallery-item-${index}`;\n\nexport const getGalleryRatio = (fileItems: FileItem[]): number => {\n    switch (fileItems.length) {\n        case 0:\n            return DEFAULT_MEDIA_RATIO;\n        case 1:\n            return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, 1);\n        case 2:\n            return 2;\n        case 3:\n            return 3;\n        default:\n            return DEFAULT_MEDIA_RATIO;\n    }\n};\n\nexport const getReadOnlyItemRatio = ({\n    fileItems,\n    index,\n    viewMode,\n}: {\n    fileItems: FileItem[];\n    index: number;\n    viewMode: GalleryViewMode;\n}): number => {\n    const itemCount = fileItems.length;\n\n    if (viewMode !== GalleryViewMode.GRID) {\n        return DEFAULT_MEDIA_RATIO;\n    }\n\n    if (itemCount === 1) {\n        // A square fallback keeps virtualization stable when upstream data does not provide a ratio.\n        return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, DEFAULT_MEDIA_RATIO);\n    }\n\n    if (itemCount === 2 && (index === 0 || index === 1)) {\n        return 0.5;\n    }\n\n    if ((index === 0 && itemCount > 2) || (itemCount === 3 && (index === 1 || index === 2))) {\n        return 1.5;\n    }\n\n    return DEFAULT_MEDIA_RATIO;\n};\n\nexport const openFiles = (fileItems: InternalFileItem[], file: InternalFileItem) => {\n    let startIndex = 0;\n\n    try {\n        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    } catch (_) {\n        if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {\n            void openVideo({ url: file.uploadedFile.url });\n\n            return;\n        }\n\n        const imageFiles: OpenImageItem[] = [];\n\n        fileItems.forEach(({ uploadedFile }) => {\n            if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {\n                imageFiles.push({ url: uploadedFile.url });\n            }\n        });\n\n        startIndex = imageFiles.findIndex((item) => item.url === file.uploadedFile?.url);\n\n        const startFile = imageFiles.shift();\n\n        if (!startFile) {\n            return;\n        }\n\n        void openImage({ items: [startFile, ...imageFiles], startIndex });\n    }\n};\n\nexport const openKnownFiles = (fileItems: FileItem[], file: FileItem) => {\n    const activeFileKey = getGalleryViewerKey(file, fileItems.indexOf(file));\n    let startIndex = 0;\n\n    try {\n        startIndex = fileItems.findIndex(\n            (item, index) => getGalleryViewerKey(item, index) === activeFileKey,\n        );\n\n        const items: OpenMediaItem[] = fileItems.map((item) => ({\n            url: item.file.url.replace('_0.mp4', '.mp4'),\n            mediaType: 'thumbnailUrl' in item.file ? MediaType.VIDEO : MediaType.IMAGE,\n        }));\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        void openMedia({ items, startIndex });\n    } catch (_) {\n        if ('thumbnailUrl' in file.file) {\n            void openVideo({ url: file.file.url });\n\n            return;\n        }\n\n        const imageFiles: OpenImageItem[] = [];\n\n        fileItems.forEach((item) => {\n            if (!('thumbnailUrl' in item.file)) {\n                imageFiles.push({ url: item.file.url });\n            }\n        });\n\n        startIndex = imageFiles.findIndex((item) => item.url === file.file.url);\n\n        const startFile = imageFiles.shift();\n\n        if (!startFile) {\n            return;\n        }\n\n        void openImage({ items: [startFile, ...imageFiles], startIndex });\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/Gallery.js

@@ -1,12 +1,7 @@
-import { uploadFile } from '@chayns-components/core';
-import { createDialog, DialogType, MediaType, openImage, openMedia, openVideo } from 'chayns-api';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import React from 'react';
+import GalleryEditor from './gallery-editor/GalleryEditor';
+import GalleryViewer from './gallery-viewer/GalleryViewer';
 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 = ({
   allowDragAndDrop = false,
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
@@ -18,317 +13,19 @@ const Gallery = ({
   onFileCountChange,
   onRemove,
   viewMode = GalleryViewMode.GRID
-}) => {
-  const [fileItems, setFileItems] = useState([]);
-
-  /**
-   * This function adds a previewUrl to fileItems
-   */
-  const handlePreviewUrlCallback = (previewUrl, file) => {
-    setFileItems(prevState => prevState.map(prevFile => {
-      if (prevFile.id === file.id) {
-        return {
-          ...prevFile,
-          previewUrl
-        };
-      }
-      return prevFile;
-    }));
-  };
-  const callDuplicateFileDialog = useCallback(() => {
-    createDialog({
-      type: DialogType.ALERT,
-      text: doubleFileDialogMessage
-    });
-  }, [doubleFileDialogMessage]);
-
-  /**
-   * This function adds uploaded files to fileItems
-   */
-  const handleUploadFileCallback = useCallback((file, uploadedFile) => {
-    setFileItems(prevState => {
-      const updatedState = prevState.map(prevFile => {
-        if (prevFile.uploadedFile?.url === uploadedFile.url) {
-          callDuplicateFileDialog();
-          return undefined;
-        }
-        if (prevFile.id === file.id) {
-          if (typeof onAdd === 'function') {
-            const prevElement = prevState.find(({
-              uploadedFile: newUploadedFile
-            }) => newUploadedFile?.url === uploadedFile?.url);
-            if (!prevElement) {
-              onAdd({
-                file: uploadedFile,
-                id: file.id
-              });
-            }
-          }
-          return {
-            ...prevFile,
-            uploadedFile,
-            state: 'uploaded'
-          };
-        }
-        return prevFile;
-      });
-      const tmp = [];
-      updatedState.forEach(updatedFile => {
-        if (updatedFile !== undefined) {
-          tmp.push(updatedFile);
-        }
-      });
-      return tmp ?? [];
-    });
-  }, [callDuplicateFileDialog, onAdd]);
-
-  /**
-   * Returns the current count to check if all files are uploaded
-   */
-  useEffect(() => {
-    if (typeof onFileCountChange === 'function') {
-      onFileCountChange(fileItems.length);
-    }
-  }, [fileItems.length, onFileCountChange]);
-
-  /**
-   * Prepares files for previewUrl and upload
-   */
-  useEffect(() => {
-    const filesToGeneratePreview = fileItems.filter(file => file.file && !file.previewUrl && (file.state === 'none' || !file.state));
-    const filesToUpload = fileItems.filter(file => !file.uploadedFile && file.state !== 'uploading');
-    filesToGeneratePreview.forEach(file => {
-      if (!file.file) {
-        return;
-      }
-      if (file.file.type.includes('video/')) {
-        generateVideoThumbnail({
-          file: file.file,
-          callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
-        });
-        return;
-      }
-      generatePreviewUrl({
-        file: file.file,
-        callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
-      });
-    });
-    filesToUpload.forEach(file => {
-      setFileItems(prevState => prevState.map(prevFile => {
-        if (prevFile.id === file.id) {
-          return {
-            ...prevFile,
-            state: 'uploading'
-          };
-        }
-        return prevFile;
-      }));
-      void uploadFile({
-        fileToUpload: file,
-        callback: UploadedFile => handleUploadFileCallback(file, UploadedFile)
-      });
-    });
-  }, [fileItems, handleUploadFileCallback]);
-
-  /**
-   * This function formats and adds files to fileItems
-   */
-  const handleAddFiles = useCallback(filesToAdd => {
-    const newFileItems = [];
-    filesToAdd.forEach(file => {
-      if (file && !filterDuplicateFile({
-        files: fileItems,
-        newFile: file
-      })) {
-        newFileItems.push({
-          id: uuidv4(),
-          file,
-          state: 'none'
-        });
-      }
-    });
-    let tmp = newFileItems;
-    if (maxFiles) {
-      tmp = newFileItems.slice(0, maxFiles - (fileItems.length + filesToAdd.length - 1));
-    }
-    setFileItems(prevState => [...prevState, ...tmp]);
-  }, [fileItems, maxFiles]);
-
-  /**
-   * This function adds external files to fileItems
-   */
-  useEffect(() => {
-    if (files) {
-      const newFileItems = [];
-      files.forEach(file => {
-        newFileItems.push({
-          id: file.id ?? uuidv4(),
-          uploadedFile: file.file,
-          file: undefined,
-          state: 'uploaded',
-          previewUrl: undefined
-        });
-      });
-      setFileItems(prevState => {
-        const updatedItems = prevState.map(prevItem => {
-          const newItem = newFileItems.find(item => item.uploadedFile && item.uploadedFile.url === (prevItem.uploadedFile && prevItem.uploadedFile.url));
-          return newItem || prevItem;
-        });
-        return updatedItems.concat(newFileItems.filter(newItem => !prevState.some(prevItem => prevItem.uploadedFile && newItem.uploadedFile && prevItem.uploadedFile.url === newItem.uploadedFile.url)));
-      });
-    }
-  }, [files]);
-
-  /**
-   * This function deletes a selected file from the file list
-   */
-  const handleDeleteFile = useCallback(id => {
-    let fileToDelete;
-    const filteredFiles = fileItems.filter(file => {
-      const fileId = file.id;
-      if (fileId === id && file.uploadedFile) {
-        fileToDelete = {
-          file: file.uploadedFile,
-          id
-        };
-      }
-      return fileId !== id;
-    });
-    setFileItems(filteredFiles);
-    if (!fileToDelete || typeof onRemove !== 'function') {
-      return;
-    }
-    onRemove(fileToDelete);
-  }, [fileItems, onRemove]);
-
-  /**
-   * This function handles the drag and drop
-   */
-  const handleDrop = useCallback(e => {
-    if (!allowDragAndDrop) {
-      return;
-    }
-    e.preventDefault();
-    const draggedFiles = Array.from(e.dataTransfer.files);
-    handleAddFiles(draggedFiles);
-  }, [allowDragAndDrop, handleAddFiles]);
-
-  /**
-   * Opens the files in a slideShow
-   */
-  const openFiles = useCallback(file => {
-    let startIndex = 0;
-    try {
-      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 ? MediaType.VIDEO : MediaType.IMAGE
-      }));
-
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      void openMedia({
-        items,
-        startIndex
-      });
-    } catch (_) {
-      if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {
-        void openVideo({
-          url: file.uploadedFile.url
-        });
-      } else {
-        const imageFiles = [];
-        fileItems.forEach(({
-          uploadedFile
-        }) => {
-          if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {
-            imageFiles.push({
-              url: uploadedFile.url
-            });
-          }
-        });
-        startIndex = imageFiles.findIndex(item => item.url === file.uploadedFile?.url);
-        const startFile = imageFiles.shift();
-        if (!startFile) {
-          return;
-        }
-        void openImage({
-          items: [startFile, ...imageFiles],
-          startIndex
-        });
-      }
-    }
-  }, [fileItems]);
-
-  /**
-   * Returns the ratio of the single file
-   */
-  const ratio = useMemo(() => {
-    switch (fileItems.length) {
-      case 0:
-        return 0;
-      case 1:
-        return Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1);
-      case 2:
-        return 2;
-      case 3:
-        return 3;
-      default:
-        return 1;
-    }
-  }, [fileItems]);
-  const galleryContent = useMemo(() => {
-    const combinedFilesLength = fileItems.length;
-    if (isEditMode) {
-      const items = fileItems.map(file => /*#__PURE__*/React.createElement(GalleryItem, {
-        key: file.id,
-        fileItem: file,
-        isEditMode: true,
-        onClick: openFiles,
-        handleDeleteFile: handleDeleteFile
-      }));
-      if (maxFiles && maxFiles <= combinedFilesLength) {
-        return items;
-      }
-      items.push(/*#__PURE__*/React.createElement(AddFile, {
-        key: "add_file",
-        onAdd: handleAddFiles
-      }));
-      return items;
-    }
-    const shortedFiles = fileItems.slice(0, 4);
-    return shortedFiles.map((file, index) => {
-      let imageRatio = 1;
-      if (viewMode === GalleryViewMode.GRID) {
-        if (combinedFilesLength === 1) {
-          imageRatio = fileItems[0]?.uploadedFile?.ratio ?? 1;
-        } else 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.createElement(GalleryItem, {
-        key: file.id,
-        fileItem: file,
-        isEditMode: false,
-        handleDeleteFile: handleDeleteFile,
-        onClick: openFiles,
-        ratio: imageRatio,
-        remainingItemsLength: combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined
-      });
-    });
-  }, [fileItems, isEditMode, maxFiles, handleAddFiles, openFiles, handleDeleteFile, viewMode]);
-  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.createElement(StyledGalleryItemWrapper, {
-    $ratio: ratio,
-    $uploadedFileLength: fileItems.length,
-    $viewMode: viewMode
-  }, galleryContent)), [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop]);
-};
+}) => isEditMode ? /*#__PURE__*/React.createElement(GalleryEditor, {
+  allowDragAndDrop: allowDragAndDrop,
+  doubleFileDialogMessage: doubleFileDialogMessage,
+  fileMinWidth: fileMinWidth,
+  files: files,
+  maxFiles: maxFiles,
+  onAdd: onAdd,
+  onFileCountChange: onFileCountChange,
+  onRemove: onRemove
+}) : /*#__PURE__*/React.createElement(GalleryViewer, {
+  files: files,
+  viewMode: viewMode
+});
 Gallery.displayName = 'Gallery';
 export default Gallery;
 //# sourceMappingURL=Gallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["uploadFile","createDialog","DialogType","MediaType","openImage","openMedia","openVideo","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","GalleryViewMode","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","AddFile","GalleryItem","StyledGallery","StyledGalleryEditModeWrapper","StyledGalleryItemWrapper","Gallery","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","type","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","url","undefined","prevElement","find","newUploadedFile","state","tmp","forEach","updatedFile","push","length","filesToGeneratePreview","filter","filesToUpload","includes","callback","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","newFile","slice","updatedItems","prevItem","newItem","item","concat","some","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","items","replace","mediaType","VIDEO","IMAGE","_","imageFiles","startFile","shift","ratio","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","index","imageRatio","remainingItemsLength","$fileMinWidth","onDragOver","onDrop","$ratio","$uploadedFileLength","$viewMode","displayName"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import {\n    Image,\n    uploadFile,\n    Video,\n    type FileItem,\n    type InternalFileItem,\n} from '@chayns-components/core';\nimport {\n    createDialog,\n    DialogType,\n    MediaType,\n    openImage,\n    OpenImageItem,\n    openMedia,\n    OpenMediaItem,\n    openVideo,\n} 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     * Whether drag and drop is allowed or not\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * The message that should be displayed if a File is already given.\n     */\n    doubleFileDialogMessage?: string;\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     *  Whether images and videos can be edited\n     */\n    isEditMode?: boolean;\n    /**\n     * The maximum amount of images and videos that can be uploaded.\n     */\n    maxFiles?: number;\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     * The mode how the images should be displayed.\n     */\n    viewMode?: GalleryViewMode;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    allowDragAndDrop = false,\n    doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    maxFiles,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    viewMode = GalleryViewMode.GRID,\n}) => {\n    const [fileItems, setFileItems] = useState<InternalFileItem[]>([]);\n\n    /**\n     * This function adds a previewUrl to fileItems\n     */\n    const handlePreviewUrlCallback = (previewUrl: string, file: InternalFileItem) => {\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    const callDuplicateFileDialog = useCallback(() => {\n        createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n    }, [doubleFileDialogMessage]);\n\n    /**\n     * This function adds uploaded files to fileItems\n     */\n    const handleUploadFileCallback = useCallback(\n        (file: InternalFileItem, uploadedFile: Video | Image) => {\n            setFileItems((prevState) => {\n                const updatedState = prevState.map((prevFile) => {\n                    if (prevFile.uploadedFile?.url === uploadedFile.url) {\n                        callDuplicateFileDialog();\n\n                        return undefined;\n                    }\n\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            const prevElement = prevState.find(\n                                ({ uploadedFile: newUploadedFile }) =>\n                                    newUploadedFile?.url === uploadedFile?.url,\n                            );\n\n                            if (!prevElement) {\n                                onAdd({\n                                    file: uploadedFile,\n                                    id: file.id,\n                                });\n                            }\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n\n                    return prevFile;\n                });\n\n                const tmp: InternalFileItem[] = [];\n\n                updatedState.forEach((updatedFile) => {\n                    if (updatedFile !== undefined) {\n                        tmp.push(updatedFile as InternalFileItem);\n                    }\n                });\n\n                return tmp ?? [];\n            });\n        },\n        [callDuplicateFileDialog, 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                callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n            });\n        });\n    }, [fileItems, handleUploadFileCallback]);\n\n    /**\n     * This function formats and adds files to fileItems\n     */\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            const newFileItems: InternalFileItem[] = [];\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            let tmp = newFileItems;\n\n            if (maxFiles) {\n                tmp = newFileItems.slice(0, maxFiles - (fileItems.length + filesToAdd.length - 1));\n            }\n\n            setFileItems((prevState) => [...prevState, ...tmp]);\n        },\n        [fileItems, maxFiles],\n    );\n\n    /**\n     * This function adds external files to fileItems\n     */\n    useEffect(() => {\n        if (files) {\n            const newFileItems: InternalFileItem[] = [];\n\n            files.forEach((file) => {\n                newFileItems.push({\n                    id: file.id ?? uuidv4(),\n                    uploadedFile: file.file,\n                    file: undefined,\n                    state: 'uploaded',\n                    previewUrl: undefined,\n                });\n            });\n\n            setFileItems((prevState) => {\n                const updatedItems = prevState.map((prevItem) => {\n                    const newItem = newFileItems.find(\n                        (item) =>\n                            item.uploadedFile &&\n                            item.uploadedFile.url ===\n                                (prevItem.uploadedFile && prevItem.uploadedFile.url),\n                    );\n                    return newItem || prevItem;\n                });\n\n                return updatedItems.concat(\n                    newFileItems.filter(\n                        (newItem) =>\n                            !prevState.some(\n                                (prevItem) =>\n                                    prevItem.uploadedFile &&\n                                    newItem.uploadedFile &&\n                                    prevItem.uploadedFile.url === newItem.uploadedFile.url,\n                            ),\n                    ),\n                );\n            });\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 && file.uploadedFile) {\n                    fileToDelete = { file: file.uploadedFile, id };\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: InternalFileItem) => {\n            let startIndex = 0;\n\n            try {\n                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            } catch (_) {\n                if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {\n                    void openVideo({ url: file.uploadedFile.url });\n                } else {\n                    const imageFiles: OpenImageItem[] = [];\n\n                    fileItems.forEach(({ uploadedFile }) => {\n                        if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {\n                            imageFiles.push({ url: uploadedFile.url });\n                        }\n                    });\n\n                    startIndex = imageFiles.findIndex(\n                        (item) => item.url === file.uploadedFile?.url,\n                    );\n\n                    const startFile = imageFiles.shift();\n\n                    if (!startFile) {\n                        return;\n                    }\n\n                    void openImage({ items: [startFile, ...imageFiles], startIndex });\n                }\n            }\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            if (maxFiles && maxFiles <= combinedFilesLength) {\n                return items;\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 === 1) {\n                    imageRatio = fileItems[0]?.uploadedFile?.ratio ?? 1;\n                } else 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, maxFiles, 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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","ignoreList":[]}
+{"version":3,"file":"Gallery.js","names":["React","GalleryEditor","GalleryViewer","GalleryViewMode","Gallery","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GRID","createElement","displayName"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport GalleryEditor from './gallery-editor/GalleryEditor';\nimport GalleryViewer from './gallery-viewer/GalleryViewer';\nimport type { GalleryProps } from './Gallery.types';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst Gallery: FC<GalleryProps> = ({\n    allowDragAndDrop = false,\n    doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    maxFiles,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    viewMode = GalleryViewMode.GRID,\n}) =>\n    isEditMode ? (\n        <GalleryEditor\n            allowDragAndDrop={allowDragAndDrop}\n            doubleFileDialogMessage={doubleFileDialogMessage}\n            fileMinWidth={fileMinWidth}\n            files={files}\n            maxFiles={maxFiles}\n            onAdd={onAdd}\n            onFileCountChange={onFileCountChange}\n            onRemove={onRemove}\n        />\n    ) : (\n        <GalleryViewer files={files} viewMode={viewMode} />\n    );\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,SAASC,eAAe,QAAQ,kBAAkB;AAElD,MAAMC,OAAyB,GAAGA,CAAC;EAC/BC,gBAAgB,GAAG,KAAK;EACxBC,uBAAuB,GAAG,mCAAmC;EAC7DC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ,GAAGX,eAAe,CAACY;AAC/B,CAAC,KACGR,UAAU,gBACNP,KAAA,CAAAgB,aAAA,CAACf,aAAa;EACVI,gBAAgB,EAAEA,gBAAiB;EACnCC,uBAAuB,EAAEA,uBAAwB;EACjDE,YAAY,EAAEA,YAAa;EAC3BC,KAAK,EAAEA,KAAM;EACbC,QAAQ,EAAEA,QAAS;EACnBC,KAAK,EAAEA,KAAM;EACbC,iBAAiB,EAAEA,iBAAkB;EACrCC,QAAQ,EAAEA;AAAS,CACtB,CAAC,gBAEFb,KAAA,CAAAgB,aAAA,CAACd,aAAa;EAACO,KAAK,EAAEA,KAAM;EAACK,QAAQ,EAAEA;AAAS,CAAE,CACrD;AAELV,OAAO,CAACa,WAAW,GAAG,SAAS;AAE/B,eAAeb,OAAO","ignoreList":[]}

package/lib/esm/components/Gallery.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Gallery.types.js.map

package/lib/esm/components/Gallery.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gallery.types.js","names":[],"sources":["../../../src/components/Gallery.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../types/gallery';\n\n/**\n * Props for the public Gallery wrapper component.\n */\nexport interface GalleryProps {\n    /**\n     * Enables drag and drop while the component is used in edit mode.\n     * @description\n     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.\n     * @default false\n     * @example\n     * <Gallery allowDragAndDrop isEditMode files={files} />\n     * @optional\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * Defines the dialog message that is shown when a duplicate upload is detected.\n     * @description\n     * The message is used by the editor when a locally added file resolves to an already known uploaded file.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <Gallery doubleFileDialogMessage=\"This file already exists.\" isEditMode files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in edit mode.\n     * @description\n     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.\n     * @default 100\n     * @example\n     * <Gallery fileMinWidth={140} isEditMode files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Provides already known media items that should be rendered by the gallery.\n     * @description\n     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline\n     * for already uploaded media while local uploads are managed internally.\n     * @example\n     * <Gallery files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Enables the editable upload mode instead of the read-only viewer mode.\n     * @description\n     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.\n     * @default false\n     * @example\n     * <Gallery isEditMode files={files} />\n     * @optional\n     */\n    isEditMode?: boolean;\n    /**\n     * Limits how many files can be managed in edit mode.\n     * @description\n     * Once the limit is reached, the editor hides the add-tile and does not accept more files.\n     * This prop has no effect in read-only mode.\n     * @example\n     * <Gallery isEditMode maxFiles={6} files={files} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully in edit mode.\n     * @description\n     * The callback receives the uploaded file representation that should be merged into the consuming state.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes in edit mode.\n     * @description\n     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.\n     * It is useful when surrounding UI needs to know whether uploads are still in progress.\n     * @example\n     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed in edit mode.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it as well.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * Defines how known media items are arranged in read-only mode.\n     * @description\n     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}