@chayns-components/gallery 5.2.4 → 5.2.5

package/lib/cjs/components/gallery-editor/useGalleryEditorState.js

@@ -0,0 +1,161 @@
+"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 = require("react");
+var _uuid = require("uuid");
+var _file = require("../../utils/file");
+var _gallery = require("../../utils/gallery");
+var _GalleryEditor = require("./GalleryEditor.utils");
+const useGalleryEditorState = ({
+  allowDragAndDrop,
+  doubleFileDialogMessage,
+  files,
+  maxFiles,
+  onAdd,
+  onFileCountChange,
+  onRemove
+}) => {
+  const [fileItems, setFileItems] = (0, _react.useState)(() => (0, _GalleryEditor.mapExternalFilesIntoInternalItems)(files));
+  const callDuplicateFileDialog = (0, _react.useCallback)(() => {
+    (0, _chaynsApi.createDialog)({
+      type: _chaynsApi.DialogType.ALERT,
+      text: doubleFileDialogMessage
+    });
+  }, [doubleFileDialogMessage]);
+  const handlePreviewUrlCallback = (0, _react.useCallback)((previewUrl, file) => {
+    setFileItems(prevState => prevState.map(prevFile => prevFile.id === file.id ? {
+      ...prevFile,
+      previewUrl
+    } : prevFile));
+  }, []);
+  const handleUploadFileCallback = (0, _react.useCallback)((file, uploadedFile) => {
+    setFileItems(prevState => {
+      const duplicateItem = prevState.find(prevFile => {
+        var _prevFile$uploadedFil;
+        return ((_prevFile$uploadedFil = prevFile.uploadedFile) === null || _prevFile$uploadedFil === void 0 ? void 0 : _prevFile$uploadedFil.url) === uploadedFile.url;
+      });
+      const updatedState = prevState.map(prevFile => {
+        var _prevFile$uploadedFil2;
+        if (((_prevFile$uploadedFil2 = prevFile.uploadedFile) === null || _prevFile$uploadedFil2 === void 0 ? void 0 : _prevFile$uploadedFil2.url) === uploadedFile.url) {
+          callDuplicateFileDialog();
+          return undefined;
+        }
+        if (prevFile.id === file.id) {
+          if (typeof onAdd === 'function' && !duplicateItem) {
+            onAdd({
+              file: uploadedFile,
+              id: file.id
+            });
+          }
+          return {
+            ...prevFile,
+            uploadedFile,
+            state: 'uploaded'
+          };
+        }
+        return prevFile;
+      });
+      return updatedState.filter(Boolean);
+    });
+  }, [callDuplicateFileDialog, onAdd]);
+  const filesToGeneratePreview = (0, _react.useMemo)(() => (0, _GalleryEditor.getPendingPreviewFileItems)(fileItems), [fileItems]);
+  const filesToUpload = (0, _react.useMemo)(() => (0, _GalleryEditor.getPendingUploadFileItems)(fileItems), [fileItems]);
+  const handleAddFiles = (0, _react.useCallback)(filesToAdd => {
+    setFileItems(prevState => {
+      const newFileItems = [];
+      filesToAdd.forEach(file => {
+        if (file && !(0, _file.filterDuplicateFile)({
+          files: prevState,
+          newFile: file
+        })) {
+          newFileItems.push({
+            id: (0, _uuid.v4)(),
+            file,
+            state: 'none'
+          });
+        }
+      });
+      const limitedFileItems = maxFiles ? newFileItems.slice(0, Math.max(maxFiles - prevState.length, 0)) : newFileItems;
+      return [...prevState, ...limitedFileItems];
+    });
+  }, [maxFiles]);
+  const handleDeleteFile = (0, _react.useCallback)(id => {
+    let uploadedFile;
+    setFileItems(prevState => {
+      var _prevState$find;
+      uploadedFile = (_prevState$find = prevState.find(file => file.id === id)) === null || _prevState$find === void 0 ? void 0 : _prevState$find.uploadedFile;
+      return prevState.filter(file => file.id !== id);
+    });
+    if (uploadedFile && typeof onRemove === 'function') {
+      onRemove({
+        file: uploadedFile,
+        id
+      });
+    }
+  }, [onRemove]);
+  const handleDrop = (0, _react.useCallback)(event => {
+    if (!allowDragAndDrop) {
+      return;
+    }
+    event.preventDefault();
+    handleAddFiles(Array.from(event.dataTransfer.files));
+  }, [allowDragAndDrop, handleAddFiles]);
+  const handleOpenFiles = (0, _react.useCallback)(file => {
+    (0, _gallery.openFiles)(fileItems, file);
+  }, [fileItems]);
+  const handleClear = (0, _react.useCallback)(() => {
+    setFileItems([]);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (typeof onFileCountChange === 'function') {
+      onFileCountChange(fileItems.length);
+    }
+  }, [fileItems.length, onFileCountChange]);
+  (0, _react.useEffect)(() => {
+    filesToGeneratePreview.forEach(file => {
+      if (!file.file) {
+        return;
+      }
+      if (file.file.type.includes('video/')) {
+        (0, _file.generateVideoThumbnail)({
+          file: file.file,
+          callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
+        });
+        return;
+      }
+      (0, _file.generatePreviewUrl)({
+        file: file.file,
+        callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
+      });
+    });
+    filesToUpload.forEach(file => {
+      setFileItems(prevState => prevState.map(prevFile => prevFile.id === file.id ? {
+        ...prevFile,
+        state: 'uploading'
+      } : prevFile));
+      void (0, _core.uploadFile)({
+        fileToUpload: file,
+        callback: uploadedFile => handleUploadFileCallback(file, uploadedFile)
+      });
+    });
+  }, [filesToGeneratePreview, filesToUpload, handlePreviewUrlCallback, handleUploadFileCallback]);
+  (0, _react.useEffect)(() => {
+    const externalFileItems = (0, _GalleryEditor.mapExternalFilesIntoInternalItems)(files);
+    setFileItems(prevState => (0, _GalleryEditor.mergeExternalFilesWithInternalState)(prevState, externalFileItems));
+  }, [files]);
+  return {
+    fileItems,
+    handleAddFiles,
+    handleClear,
+    handleDeleteFile,
+    handleDrop,
+    handleOpenFiles
+  };
+};
+var _default = exports.default = useGalleryEditorState;
+//# sourceMappingURL=useGalleryEditorState.js.map

package/lib/cjs/components/gallery-editor/useGalleryEditorState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGalleryEditorState.js","names":["_core","require","_chaynsApi","_react","_uuid","_file","_gallery","_GalleryEditor","useGalleryEditorState","allowDragAndDrop","doubleFileDialogMessage","files","maxFiles","onAdd","onFileCountChange","onRemove","fileItems","setFileItems","useState","mapExternalFilesIntoInternalItems","callDuplicateFileDialog","useCallback","createDialog","type","DialogType","ALERT","text","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","uploadedFile","duplicateItem","find","_prevFile$uploadedFil","url","updatedState","_prevFile$uploadedFil2","undefined","state","filter","Boolean","filesToGeneratePreview","useMemo","getPendingPreviewFileItems","filesToUpload","getPendingUploadFileItems","handleAddFiles","filesToAdd","newFileItems","forEach","filterDuplicateFile","newFile","push","uuidv4","limitedFileItems","slice","Math","max","length","handleDeleteFile","_prevState$find","handleDrop","event","preventDefault","Array","from","dataTransfer","handleOpenFiles","openFiles","handleClear","useEffect","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","externalFileItems","mergeExternalFilesWithInternalState","_default","exports","default"],"sources":["../../../../src/components/gallery-editor/useGalleryEditorState.ts"],"sourcesContent":["import {\n    Image,\n    uploadFile,\n    Video,\n    type FileItem,\n    type InternalFileItem,\n} from '@chayns-components/core';\nimport { createDialog, DialogType } from 'chayns-api';\nimport { type DragEvent, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../../utils/file';\nimport { openFiles } from '../../utils/gallery';\nimport {\n    getPendingPreviewFileItems,\n    getPendingUploadFileItems,\n    mapExternalFilesIntoInternalItems,\n    mergeExternalFilesWithInternalState,\n} from './GalleryEditor.utils';\n\ntype UseGalleryEditorStateOptions = {\n    allowDragAndDrop: boolean;\n    doubleFileDialogMessage: string;\n    files?: FileItem[];\n    maxFiles?: number;\n    onAdd?: (file: FileItem) => void;\n    onFileCountChange?: (fileCount: number) => void;\n    onRemove?: (file: FileItem) => void;\n};\n\ntype GalleryEditorStateResult = {\n    fileItems: InternalFileItem[];\n    handleAddFiles: (filesToAdd: File[]) => void;\n    handleClear: () => void;\n    handleDeleteFile: (id?: string) => void;\n    handleDrop: (event: DragEvent<HTMLDivElement>) => void;\n    handleOpenFiles: (file: InternalFileItem) => void;\n};\n\nconst useGalleryEditorState = ({\n    allowDragAndDrop,\n    doubleFileDialogMessage,\n    files,\n    maxFiles,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n}: UseGalleryEditorStateOptions): GalleryEditorStateResult => {\n    const [fileItems, setFileItems] = useState<InternalFileItem[]>(() =>\n        mapExternalFilesIntoInternalItems(files),\n    );\n\n    const callDuplicateFileDialog = useCallback(() => {\n        createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n    }, [doubleFileDialogMessage]);\n\n    const handlePreviewUrlCallback = useCallback((previewUrl: string, file: InternalFileItem) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) =>\n                prevFile.id === file.id ? { ...prevFile, previewUrl } : prevFile,\n            ),\n        );\n    }, []);\n\n    const handleUploadFileCallback = useCallback(\n        (file: InternalFileItem, uploadedFile: Video | Image) => {\n            setFileItems((prevState) => {\n                const duplicateItem = prevState.find(\n                    (prevFile) => prevFile.uploadedFile?.url === uploadedFile.url,\n                );\n\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' && !duplicateItem) {\n                            onAdd({ file: uploadedFile, id: file.id });\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n\n                    return prevFile;\n                });\n\n                return updatedState.filter(Boolean) as InternalFileItem[];\n            });\n        },\n        [callDuplicateFileDialog, onAdd],\n    );\n\n    const filesToGeneratePreview = useMemo(\n        () => getPendingPreviewFileItems(fileItems),\n        [fileItems],\n    );\n    const filesToUpload = useMemo(() => getPendingUploadFileItems(fileItems), [fileItems]);\n\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            setFileItems((prevState) => {\n                const newFileItems: InternalFileItem[] = [];\n\n                filesToAdd.forEach((file) => {\n                    if (file && !filterDuplicateFile({ files: prevState, newFile: file })) {\n                        newFileItems.push({\n                            id: uuidv4(),\n                            file,\n                            state: 'none',\n                        });\n                    }\n                });\n\n                const limitedFileItems = maxFiles\n                    ? newFileItems.slice(0, Math.max(maxFiles - prevState.length, 0))\n                    : newFileItems;\n\n                return [...prevState, ...limitedFileItems];\n            });\n        },\n        [maxFiles],\n    );\n\n    const handleDeleteFile = useCallback(\n        (id?: string) => {\n            let uploadedFile: Image | Video | undefined;\n\n            setFileItems((prevState) => {\n                uploadedFile = prevState.find((file) => file.id === id)?.uploadedFile;\n\n                return prevState.filter((file) => file.id !== id);\n            });\n\n            if (uploadedFile && typeof onRemove === 'function') {\n                onRemove({ file: uploadedFile, id });\n            }\n        },\n        [onRemove],\n    );\n\n    const handleDrop = useCallback(\n        (event: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            event.preventDefault();\n\n            handleAddFiles(Array.from(event.dataTransfer.files));\n        },\n        [allowDragAndDrop, handleAddFiles],\n    );\n\n    const handleOpenFiles = useCallback(\n        (file: InternalFileItem) => {\n            openFiles(fileItems, file);\n        },\n        [fileItems],\n    );\n\n    const handleClear = useCallback(() => {\n        setFileItems([]);\n    }, []);\n\n    useEffect(() => {\n        if (typeof onFileCountChange === 'function') {\n            onFileCountChange(fileItems.length);\n        }\n    }, [fileItems.length, onFileCountChange]);\n\n    useEffect(() => {\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                    prevFile.id === file.id ? { ...prevFile, state: 'uploading' } : prevFile,\n                ),\n            );\n\n            void uploadFile({\n                fileToUpload: file,\n                callback: (uploadedFile) => handleUploadFileCallback(file, uploadedFile),\n            });\n        });\n    }, [filesToGeneratePreview, filesToUpload, handlePreviewUrlCallback, handleUploadFileCallback]);\n\n    useEffect(() => {\n        const externalFileItems = mapExternalFilesIntoInternalItems(files);\n\n        setFileItems((prevState) =>\n            mergeExternalFilesWithInternalState(prevState, externalFileItems),\n        );\n    }, [files]);\n\n    return {\n        fileItems,\n        handleAddFiles,\n        handleClear,\n        handleDeleteFile,\n        handleDrop,\n        handleOpenFiles,\n    };\n};\n\nexport default useGalleryEditorState;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/GalleryViewer.constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GALLERY_VIEWER_MAX_VISIBLE_ITEMS = void 0;
+const GALLERY_VIEWER_MAX_VISIBLE_ITEMS = exports.GALLERY_VIEWER_MAX_VISIBLE_ITEMS = 4;
+//# sourceMappingURL=GalleryViewer.constants.js.map

package/lib/cjs/components/gallery-viewer/GalleryViewer.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewer.constants.js","names":["GALLERY_VIEWER_MAX_VISIBLE_ITEMS","exports"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.constants.ts"],"sourcesContent":["export const GALLERY_VIEWER_MAX_VISIBLE_ITEMS = 4;\n"],"mappings":";;;;;;AAAO,MAAMA,gCAAgC,GAAAC,OAAA,CAAAD,gCAAA,GAAG,CAAC","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/GalleryViewer.js

@@ -9,18 +9,21 @@ var _GalleryViewerItem = _interopRequireDefault(require("./gallery-viewer-item/G
 var _GalleryViewer = require("./GalleryViewer.styles");
 var _gallery = require("../../utils/gallery");
 var _gallery2 = require("../../types/gallery");
+var _GalleryViewer2 = require("./GalleryViewer.constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const EMPTY_FILE_ITEMS = [];
 const GalleryViewer = ({
   files,
+  shouldLoadImages = true,
   viewMode = _gallery2.GalleryViewMode.GRID
 }) => {
-  const fileItems = files ?? [];
-  const ratio = (0, _react.useMemo)(() => (0, _gallery.getGalleryRatio)(fileItems), [fileItems]);
+  const fileItems = files ?? EMPTY_FILE_ITEMS;
+  const ratio = (0, _gallery.getGalleryRatio)(fileItems);
   const handleOpenFiles = (0, _react.useCallback)(file => {
     (0, _gallery.openKnownFiles)(fileItems, file);
   }, [fileItems]);
-  const visibleItems = fileItems.slice(0, 4);
+  const visibleItems = fileItems.slice(0, _GalleryViewer2.GALLERY_VIEWER_MAX_VISIBLE_ITEMS);
   return /*#__PURE__*/_react.default.createElement(_GalleryViewer.StyledGalleryViewer, null, /*#__PURE__*/_react.default.createElement(_GalleryViewer.StyledGalleryViewerItemWrapper, {
     $ratio: ratio,
     $itemCount: fileItems.length,
@@ -34,7 +37,8 @@ const GalleryViewer = ({
       index,
       viewMode
     }),
-    remainingItemsLength: fileItems.length > 4 && index === 3 ? fileItems.length : undefined
+    shouldLoadImages: shouldLoadImages,
+    remainingItemsLength: fileItems.length > _GalleryViewer2.GALLERY_VIEWER_MAX_VISIBLE_ITEMS && index === 3 ? fileItems.length : undefined
   }))));
 };
 GalleryViewer.displayName = 'GalleryViewer';

package/lib/cjs/components/gallery-viewer/GalleryViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewer.js","names":["_react","_interopRequireWildcard","require","_GalleryViewerItem","_interopRequireDefault","_GalleryViewer","_gallery","_gallery2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryViewer","files","viewMode","GalleryViewMode","GRID","fileItems","ratio","useMemo","getGalleryRatio","handleOpenFiles","useCallback","file","openKnownFiles","visibleItems","slice","createElement","StyledGalleryViewer","StyledGalleryViewerItemWrapper","$ratio","$itemCount","length","$viewMode","map","index","key","getGalleryViewerKey","fileItem","onClick","getReadOnlyItemRatio","remainingItemsLength","undefined","displayName","_default","exports"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.tsx"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport React, { FC, useCallback, useMemo } from 'react';\nimport GalleryViewerItem from './gallery-viewer-item/GalleryViewerItem';\nimport { StyledGalleryViewer, StyledGalleryViewerItemWrapper } from './GalleryViewer.styles';\nimport type { GalleryViewerProps } from './GalleryViewer.types';\nimport {\n    getGalleryRatio,\n    getGalleryViewerKey,\n    getReadOnlyItemRatio,\n    openKnownFiles,\n} from '../../utils/gallery';\nimport { GalleryViewMode } from '../../types/gallery';\n\nconst GalleryViewer: FC<GalleryViewerProps> = ({ files, viewMode = GalleryViewMode.GRID }) => {\n    const fileItems = files ?? [];\n\n    const ratio = useMemo(() => getGalleryRatio(fileItems), [fileItems]);\n\n    const handleOpenFiles = useCallback(\n        (file: FileItem) => {\n            openKnownFiles(fileItems, file);\n        },\n        [fileItems],\n    );\n\n    const visibleItems = fileItems.slice(0, 4);\n\n    return (\n        <StyledGalleryViewer>\n            <StyledGalleryViewerItemWrapper\n                $ratio={ratio}\n                $itemCount={fileItems.length}\n                $viewMode={viewMode}\n            >\n                {visibleItems.map((file, index) => (\n                    <GalleryViewerItem\n                        key={getGalleryViewerKey(file, index)}\n                        fileItem={file}\n                        onClick={handleOpenFiles}\n                        ratio={getReadOnlyItemRatio({ fileItems, index, viewMode })}\n                        remainingItemsLength={\n                            fileItems.length > 4 && index === 3 ? fileItems.length : undefined\n                        }\n                    />\n                ))}\n            </StyledGalleryViewerItemWrapper>\n        </StyledGalleryViewer>\n    );\n};\n\nGalleryViewer.displayName = 'GalleryViewer';\n\nexport default GalleryViewer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GalleryViewer.js","names":["_react","_interopRequireWildcard","require","_GalleryViewerItem","_interopRequireDefault","_GalleryViewer","_gallery","_gallery2","_GalleryViewer2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EMPTY_FILE_ITEMS","GalleryViewer","files","shouldLoadImages","viewMode","GalleryViewMode","GRID","fileItems","ratio","getGalleryRatio","handleOpenFiles","useCallback","file","openKnownFiles","visibleItems","slice","GALLERY_VIEWER_MAX_VISIBLE_ITEMS","createElement","StyledGalleryViewer","StyledGalleryViewerItemWrapper","$ratio","$itemCount","length","$viewMode","map","index","key","getGalleryViewerKey","fileItem","onClick","getReadOnlyItemRatio","remainingItemsLength","undefined","displayName","_default","exports"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.tsx"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\nimport GalleryViewerItem from './gallery-viewer-item/GalleryViewerItem';\nimport { StyledGalleryViewer, StyledGalleryViewerItemWrapper } from './GalleryViewer.styles';\nimport type { GalleryViewerProps } from './GalleryViewer.types';\nimport {\n    getGalleryRatio,\n    getGalleryViewerKey,\n    getReadOnlyItemRatio,\n    openKnownFiles,\n} from '../../utils/gallery';\nimport { GalleryViewMode } from '../../types/gallery';\nimport { GALLERY_VIEWER_MAX_VISIBLE_ITEMS } from './GalleryViewer.constants';\n\nconst EMPTY_FILE_ITEMS: FileItem[] = [];\n\nconst GalleryViewer: FC<GalleryViewerProps> = ({\n    files,\n    shouldLoadImages = true,\n    viewMode = GalleryViewMode.GRID,\n}) => {\n    const fileItems = files ?? EMPTY_FILE_ITEMS;\n    const ratio = getGalleryRatio(fileItems);\n\n    const handleOpenFiles = useCallback(\n        (file: FileItem) => {\n            openKnownFiles(fileItems, file);\n        },\n        [fileItems],\n    );\n\n    const visibleItems = fileItems.slice(0, GALLERY_VIEWER_MAX_VISIBLE_ITEMS);\n\n    return (\n        <StyledGalleryViewer>\n            <StyledGalleryViewerItemWrapper\n                $ratio={ratio}\n                $itemCount={fileItems.length}\n                $viewMode={viewMode}\n            >\n                {visibleItems.map((file, index) => (\n                    <GalleryViewerItem\n                        key={getGalleryViewerKey(file, index)}\n                        fileItem={file}\n                        onClick={handleOpenFiles}\n                        ratio={getReadOnlyItemRatio({ fileItems, index, viewMode })}\n                        shouldLoadImages={shouldLoadImages}\n                        remainingItemsLength={\n                            fileItems.length > GALLERY_VIEWER_MAX_VISIBLE_ITEMS && index === 3\n                                ? fileItems.length\n                                : undefined\n                        }\n                    />\n                ))}\n            </StyledGalleryViewerItemWrapper>\n        </StyledGalleryViewer>\n    );\n};\n\nGalleryViewer.displayName = 'GalleryViewer';\n\nexport default GalleryViewer;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/GalleryViewer.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewer.types.js","names":[],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../../types/gallery';\n\n/**\n * Props for the prop-driven read-only gallery viewer.\n */\nexport interface GalleryViewerProps {\n    /**\n     * Provides the already known media items that should be rendered without local upload state.\n     * @description\n     * The viewer renders these files directly from props and does not mirror them into local component state.\n     * @example\n     * <GalleryViewer files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Defines how the media tiles are arranged in read-only mode.\n     * @description\n     * Use this prop to switch between the supported viewer layouts for known media.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <GalleryViewer files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"GalleryViewer.types.js","names":[],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../../types/gallery';\n\n/**\n * Props for the prop-driven read-only gallery viewer.\n */\nexport interface GalleryViewerProps {\n    /**\n     * Provides the already known media items that should be rendered without local upload state.\n     * @description\n     * The viewer renders these files directly from props and does not mirror them into local component state.\n     * @example\n     * <GalleryViewer files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Controls whether the viewer may load the final media assets immediately.\n     * @description\n     * When set to `true`, the viewer renders and loads the actual images right away.\n     * When set to `false`, the viewer keeps showing previews first and defers the final image load until this flag becomes `true`.\n     * @default true\n     * @example\n     * <GalleryViewer files={files} shouldLoadImages={false} />\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Defines how the media tiles are arranged in read-only mode.\n     * @description\n     * Use this prop to switch between the supported viewer layouts for known media.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <GalleryViewer files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js

@@ -4,22 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _MediaContent = _interopRequireDefault(require("../../media-content/MediaContent"));
 var _GalleryViewerItem = require("./GalleryViewerItem.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const GalleryViewerItem = ({
   fileItem,
+  shouldLoadImages = true,
   ratio = 1,
   remainingItemsLength,
   onClick
 }) => /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.StyledGalleryViewerItem, null, /*#__PURE__*/_react.default.createElement(_MediaContent.default, {
   file: fileItem.file,
   onClick: () => onClick(fileItem),
-  ratio: ratio
+  ratio: ratio,
+  shouldLoadImages: shouldLoadImages
 }), remainingItemsLength && /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.StyledGalleryViewerMoreItemsIndicator, {
   onClick: () => onClick(fileItem)
 }, /*#__PURE__*/_react.default.createElement("p", null, `+ ${remainingItemsLength - 3}`)));
 GalleryViewerItem.displayName = 'GalleryViewerItem';
-var _default = exports.default = GalleryViewerItem;
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(GalleryViewerItem);
 //# sourceMappingURL=GalleryViewerItem.js.map

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewerItem.js","names":["_react","_interopRequireDefault","require","_MediaContent","_GalleryViewerItem","e","__esModule","default","GalleryViewerItem","fileItem","ratio","remainingItemsLength","onClick","createElement","StyledGalleryViewerItem","file","StyledGalleryViewerMoreItemsIndicator","displayName","_default","exports"],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport MediaContent from '../../media-content/MediaContent';\nimport {\n    StyledGalleryViewerItem,\n    StyledGalleryViewerMoreItemsIndicator,\n} from './GalleryViewerItem.styles';\nimport type { GalleryViewerItemProps } from './GalleryViewerItem.types';\n\nconst GalleryViewerItem: FC<GalleryViewerItemProps> = ({\n    fileItem,\n    ratio = 1,\n    remainingItemsLength,\n    onClick,\n}) => (\n    <StyledGalleryViewerItem>\n        <MediaContent file={fileItem.file} onClick={() => onClick(fileItem)} ratio={ratio} />\n        {remainingItemsLength && (\n            <StyledGalleryViewerMoreItemsIndicator onClick={() => onClick(fileItem)}>\n                <p>{`+ ${remainingItemsLength - 3}`}</p>\n            </StyledGalleryViewerMoreItemsIndicator>\n        )}\n    </StyledGalleryViewerItem>\n);\n\nGalleryViewerItem.displayName = 'GalleryViewerItem';\n\nexport default GalleryViewerItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,kBAAA,GAAAF,OAAA;AAGoC,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGpC,MAAMG,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,KAAK,GAAG,CAAC;EACTC,oBAAoB;EACpBC;AACJ,CAAC,kBACGZ,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACT,kBAAA,CAAAU,uBAAuB,qBACpBd,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACV,aAAA,CAAAI,OAAY;EAACQ,IAAI,EAAEN,QAAQ,CAACM,IAAK;EAACH,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACH,QAAQ,CAAE;EAACC,KAAK,EAAEA;AAAM,CAAE,CAAC,EACpFC,oBAAoB,iBACjBX,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACT,kBAAA,CAAAY,qCAAqC;EAACJ,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACH,QAAQ;AAAE,gBACpET,MAAA,CAAAO,OAAA,CAAAM,aAAA,YAAI,KAAKF,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAC5B;AAEDH,iBAAiB,CAACS,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GAErCC,iBAAiB","ignoreList":[]}
+{"version":3,"file":"GalleryViewerItem.js","names":["_react","_interopRequireWildcard","require","_MediaContent","_interopRequireDefault","_GalleryViewerItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryViewerItem","fileItem","shouldLoadImages","ratio","remainingItemsLength","onClick","createElement","StyledGalleryViewerItem","file","StyledGalleryViewerMoreItemsIndicator","displayName","_default","exports","memo"],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport MediaContent from '../../media-content/MediaContent';\nimport {\n    StyledGalleryViewerItem,\n    StyledGalleryViewerMoreItemsIndicator,\n} from './GalleryViewerItem.styles';\nimport type { GalleryViewerItemProps } from './GalleryViewerItem.types';\n\nconst GalleryViewerItem: FC<GalleryViewerItemProps> = ({\n    fileItem,\n    shouldLoadImages = true,\n    ratio = 1,\n    remainingItemsLength,\n    onClick,\n}) => (\n    <StyledGalleryViewerItem>\n        <MediaContent\n            file={fileItem.file}\n            onClick={() => onClick(fileItem)}\n            ratio={ratio}\n            shouldLoadImages={shouldLoadImages}\n        />\n        {remainingItemsLength && (\n            <StyledGalleryViewerMoreItemsIndicator onClick={() => onClick(fileItem)}>\n                <p>{`+ ${remainingItemsLength - 3}`}</p>\n            </StyledGalleryViewerMoreItemsIndicator>\n        )}\n    </StyledGalleryViewerItem>\n);\n\nGalleryViewerItem.displayName = 'GalleryViewerItem';\n\nexport default memo(GalleryViewerItem);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAGoC,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAK,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAGpC,MAAMgB,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,gBAAgB,GAAG,IAAI;EACvBC,KAAK,GAAG,CAAC;EACTC,oBAAoB;EACpBC;AACJ,CAAC,kBACG9B,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC1B,kBAAA,CAAA2B,uBAAuB,qBACpBhC,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC5B,aAAA,CAAAK,OAAY;EACTyB,IAAI,EAAEP,QAAQ,CAACO,IAAK;EACpBH,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACJ,QAAQ,CAAE;EACjCE,KAAK,EAAEA,KAAM;EACbD,gBAAgB,EAAEA;AAAiB,CACtC,CAAC,EACDE,oBAAoB,iBACjB7B,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC1B,kBAAA,CAAA6B,qCAAqC;EAACJ,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACJ,QAAQ;AAAE,gBACpE1B,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,YAAI,KAAKF,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAC5B;AAEDJ,iBAAiB,CAACU,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7B,OAAA,gBAErC,IAAA8B,WAAI,EAACb,iBAAiB,CAAC","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewerItem.types.js","names":[],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for a dedicated read-only gallery tile.\n */\nexport interface GalleryViewerItemProps {\n    /**\n     * Provides the uploaded media that should be rendered.\n     * @description\n     * The viewer item renders only already known media and never deals with upload-specific transient state.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    fileItem: FileItem;\n    /**\n     * Defines the aspect ratio that should be reserved for the tile.\n     * @description\n     * Use this prop to reserve a deterministic tile height for stable read-only rendering.\n     * @default 1\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} ratio={1.5} />\n     * @optional\n     */\n    ratio?: number;\n    /**\n     * Provides the total item count when the last visible tile should show a remaining-items overlay.\n     * @description\n     * When this prop is set on the last visible viewer tile, the tile displays the `+n` overlay for hidden items.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} remainingItemsLength={5} />\n     * @optional\n     */\n    remainingItemsLength?: number;\n    /**\n     * Is called when the tile is selected.\n     * @description\n     * The viewer uses this callback to open the selected file inside the slideshow flow.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    onClick: (file: FileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"GalleryViewerItem.types.js","names":[],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for a dedicated read-only gallery tile.\n */\nexport interface GalleryViewerItemProps {\n    /**\n     * Provides the uploaded media that should be rendered.\n     * @description\n     * The viewer item renders only already known media and never deals with upload-specific transient state.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    fileItem: FileItem;\n    /**\n     * Controls whether the item may load the final media source immediately.\n     * @description\n     * The item forwards this flag to the shared media renderer so preview-first rendering can be controlled by the parent gallery.\n     * @default true\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Defines the aspect ratio that should be reserved for the tile.\n     * @description\n     * Use this prop to reserve a deterministic tile height for stable read-only rendering.\n     * @default 1\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} ratio={1.5} />\n     * @optional\n     */\n    ratio?: number;\n    /**\n     * Provides the total item count when the last visible tile should show a remaining-items overlay.\n     * @description\n     * When this prop is set on the last visible viewer tile, the tile displays the `+n` overlay for hidden items.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} remainingItemsLength={5} />\n     * @optional\n     */\n    remainingItemsLength?: number;\n    /**\n     * Is called when the tile is selected.\n     * @description\n     * The viewer uses this callback to open the selected file inside the slideshow flow.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    onClick: (file: FileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/media-content/MediaContent.constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MEDIA_CONTENT_PREVIEW_SCALE = exports.MEDIA_CONTENT_PREVIEW_BLUR = exports.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = exports.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS = exports.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS = void 0;
+const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = exports.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 200;
+const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS = exports.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS = 100;
+const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS = exports.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS = 200;
+const MEDIA_CONTENT_PREVIEW_BLUR = exports.MEDIA_CONTENT_PREVIEW_BLUR = 'blur(16px)';
+const MEDIA_CONTENT_PREVIEW_SCALE = exports.MEDIA_CONTENT_PREVIEW_SCALE = 1.05;
+//# sourceMappingURL=MediaContent.constants.js.map

package/lib/cjs/components/media-content/MediaContent.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.constants.js","names":["MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","exports","MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS","MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS","MEDIA_CONTENT_PREVIEW_BLUR","MEDIA_CONTENT_PREVIEW_SCALE"],"sources":["../../../../src/components/media-content/MediaContent.constants.ts"],"sourcesContent":["export const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 200;\nexport const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS = 100;\nexport const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS = 200;\nexport const MEDIA_CONTENT_PREVIEW_BLUR = 'blur(16px)';\nexport const MEDIA_CONTENT_PREVIEW_SCALE = 1.05;\n"],"mappings":";;;;;;AAAO,MAAMA,oCAAoC,GAAAC,OAAA,CAAAD,oCAAA,GAAG,GAAG;AAChD,MAAME,wCAAwC,GAAAD,OAAA,CAAAC,wCAAA,GAAG,GAAG;AACpD,MAAMC,2CAA2C,GAAAF,OAAA,CAAAE,2CAAA,GAAG,GAAG;AACvD,MAAMC,0BAA0B,GAAAH,OAAA,CAAAG,0BAAA,GAAG,YAAY;AAC/C,MAAMC,2BAA2B,GAAAJ,OAAA,CAAAI,2BAAA,GAAG,IAAI","ignoreList":[]}

package/lib/cjs/components/media-content/MediaContent.js

@@ -5,32 +5,107 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _core = require("@chayns-components/core");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _MediaContent = require("./MediaContent.styles");
+var _MediaContent2 = require("./MediaContent.utils");
+var _MediaContent3 = require("./MediaContent.constants");
+var _useMediaContentSize = _interopRequireDefault(require("./useMediaContentSize"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const MediaContent = ({
   file,
+  previewUrl,
   ratio,
   onClick,
+  shouldLoadImages = true,
   playIconSize = 50
-}) => 'thumbnailUrl' in file ? /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentVideoWrapper, {
-  onClick: onClick,
-  $ratio: ratio
-}, /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentPlayIcon, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
-  size: playIconSize,
-  icons: ['fa fa-play']
-})), /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentVideo, {
-  poster: file.thumbnailUrl
-}, /*#__PURE__*/_react.default.createElement("source", {
-  src: file.url,
-  type: "video/mp4"
-}))) : /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentImageWrapper, {
-  onClick: onClick,
-  $ratio: ratio
-}, /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentImage, {
-  draggable: false,
-  src: file.url
-}));
+}) => {
+  const isVideo = (0, _MediaContent2.isVideoFile)(file);
+  const sourceKey = (0, _MediaContent2.getMediaSourceUrl)(file);
+  const previewSourceUrl = (0, _MediaContent2.getMediaPreviewUrl)(file, previewUrl);
+  const [hasLoadedFinalMedia, setHasLoadedFinalMedia] = (0, _react.useState)(false);
+  const imageRef = (0, _react.useRef)(null);
+  const videoRef = (0, _react.useRef)(null);
+  const [containerElement, setContainerElement] = (0, _react.useState)(null);
+  const renderSize = (0, _useMediaContentSize.default)(containerElement);
+  const devicePixelRatio = typeof window !== 'undefined' && Number.isFinite(window.devicePixelRatio) && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+  const finalSourceUrl = (0, _react.useMemo)(() => isVideo ? sourceKey : (0, _MediaContent2.getResponsiveImageServiceUrl)(sourceKey, renderSize, devicePixelRatio), [devicePixelRatio, isVideo, renderSize, sourceKey]);
+  const displayPreviewUrl = (0, _react.useMemo)(() => previewSourceUrl ? (0, _MediaContent2.getResponsiveImageServiceUrl)(previewSourceUrl, renderSize, devicePixelRatio) : undefined, [devicePixelRatio, previewSourceUrl, renderSize]);
+  (0, _react.useLayoutEffect)(() => {
+    setHasLoadedFinalMedia(false);
+  }, [sourceKey]);
+  (0, _react.useLayoutEffect)(() => {
+    var _imageRef$current, _videoRef$current;
+    if (!shouldLoadImages) {
+      return;
+    }
+    if (!isVideo && (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 && _imageRef$current.complete && imageRef.current.naturalWidth > 0) {
+      setHasLoadedFinalMedia(true);
+    }
+    if (isVideo && (_videoRef$current = videoRef.current) !== null && _videoRef$current !== void 0 && _videoRef$current.readyState && videoRef.current.readyState >= 2) {
+      setHasLoadedFinalMedia(true);
+    }
+  }, [finalSourceUrl, isVideo, shouldLoadImages]);
+  const shouldRenderFinalImage = shouldLoadImages && Boolean(finalSourceUrl);
+  const shouldShowPreview = Boolean(displayPreviewUrl);
+  if (isVideo) {
+    return /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentVideoWrapper, {
+      ref: setContainerElement,
+      onClick: onClick,
+      $ratio: ratio
+    }, displayPreviewUrl && /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentPreviewImage, {
+      draggable: false,
+      src: displayPreviewUrl,
+      alt: "",
+      "aria-hidden": "true",
+      style: {
+        opacity: shouldLoadImages && hasLoadedFinalMedia ? 0 : 1
+      }
+    }), /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentPlayIcon, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+      size: playIconSize,
+      icons: ['fa fa-play']
+    })), shouldRenderFinalImage && /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentVideo, {
+      ref: videoRef,
+      poster: displayPreviewUrl,
+      preload: "metadata",
+      onLoadedData: () => setHasLoadedFinalMedia(true),
+      style: {
+        filter: displayPreviewUrl && !hasLoadedFinalMedia ? _MediaContent3.MEDIA_CONTENT_PREVIEW_BLUR : 'none',
+        transform: displayPreviewUrl && !hasLoadedFinalMedia ? `scale(${_MediaContent3.MEDIA_CONTENT_PREVIEW_SCALE})` : 'none',
+        opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,
+        transition: `opacity ${_MediaContent3.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease, filter ${_MediaContent3.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS}ms ease ${_MediaContent3.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS}ms, transform ${_MediaContent3.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS}ms ease ${_MediaContent3.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS}ms`
+      }
+    }, /*#__PURE__*/_react.default.createElement("source", {
+      src: finalSourceUrl,
+      type: "video/mp4"
+    })));
+  }
+  return /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentImageWrapper, {
+    ref: setContainerElement,
+    onClick: onClick,
+    $ratio: ratio
+  }, shouldShowPreview && /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentPreviewImage, {
+    draggable: false,
+    src: displayPreviewUrl,
+    alt: "",
+    "aria-hidden": "true",
+    style: {
+      opacity: shouldLoadImages && hasLoadedFinalMedia ? 0 : 1
+    }
+  }), shouldRenderFinalImage && /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentImage, {
+    ref: imageRef,
+    draggable: false,
+    src: finalSourceUrl,
+    alt: "",
+    onLoad: () => setHasLoadedFinalMedia(true),
+    style: {
+      filter: displayPreviewUrl && !hasLoadedFinalMedia ? _MediaContent3.MEDIA_CONTENT_PREVIEW_BLUR : 'none',
+      transform: displayPreviewUrl && !hasLoadedFinalMedia ? `scale(${_MediaContent3.MEDIA_CONTENT_PREVIEW_SCALE})` : 'none',
+      opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,
+      transition: `opacity ${_MediaContent3.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease, filter ${_MediaContent3.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS}ms ease ${_MediaContent3.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS}ms, transform ${_MediaContent3.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS}ms ease ${_MediaContent3.MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS}ms`
+    }
+  }));
+};
 MediaContent.displayName = 'MediaContent';
-var _default = exports.default = MediaContent;
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(MediaContent);
 //# sourceMappingURL=MediaContent.js.map

package/lib/cjs/components/media-content/MediaContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.js","names":["_core","require","_react","_interopRequireDefault","_MediaContent","e","__esModule","default","MediaContent","file","ratio","onClick","playIconSize","createElement","StyledMediaContentVideoWrapper","$ratio","StyledMediaContentPlayIcon","Icon","size","icons","StyledMediaContentVideo","poster","thumbnailUrl","src","url","type","StyledMediaContentImageWrapper","StyledMediaContentImage","draggable","displayName","_default","exports"],"sources":["../../../../src/components/media-content/MediaContent.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n    StyledMediaContentImage,\n    StyledMediaContentImageWrapper,\n    StyledMediaContentPlayIcon,\n    StyledMediaContentVideo,\n    StyledMediaContentVideoWrapper,\n} from './MediaContent.styles';\nimport type { MediaContentProps } from './MediaContent.types';\n\nconst MediaContent: FC<MediaContentProps> = ({ file, ratio, onClick, playIconSize = 50 }) =>\n    'thumbnailUrl' in file ? (\n        <StyledMediaContentVideoWrapper onClick={onClick} $ratio={ratio}>\n            <StyledMediaContentPlayIcon>\n                <Icon size={playIconSize} icons={['fa fa-play']} />\n            </StyledMediaContentPlayIcon>\n            <StyledMediaContentVideo poster={file.thumbnailUrl}>\n                <source src={file.url} type=\"video/mp4\" />\n            </StyledMediaContentVideo>\n        </StyledMediaContentVideoWrapper>\n    ) : (\n        <StyledMediaContentImageWrapper onClick={onClick} $ratio={ratio}>\n            <StyledMediaContentImage draggable={false} src={file.url} />\n        </StyledMediaContentImageWrapper>\n    );\n\nMediaContent.displayName = 'MediaContent';\n\nexport default MediaContent;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAM+B,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAG/B,MAAMG,YAAmC,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAEC,YAAY,GAAG;AAAG,CAAC,KACpF,cAAc,IAAIH,IAAI,gBAClBP,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAU,8BAA8B;EAACH,OAAO,EAAEA,OAAQ;EAACI,MAAM,EAAEL;AAAM,gBAC5DR,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAY,0BAA0B,qBACvBd,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACb,KAAA,CAAAiB,IAAI;EAACC,IAAI,EAAEN,YAAa;EAACO,KAAK,EAAE,CAAC,YAAY;AAAE,CAAE,CAC1B,CAAC,eAC7BjB,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAgB,uBAAuB;EAACC,MAAM,EAAEZ,IAAI,CAACa;AAAa,gBAC/CpB,MAAA,CAAAK,OAAA,CAAAM,aAAA;EAAQU,GAAG,EAAEd,IAAI,CAACe,GAAI;EAACC,IAAI,EAAC;AAAW,CAAE,CACpB,CACG,CAAC,gBAEjCvB,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAsB,8BAA8B;EAACf,OAAO,EAAEA,OAAQ;EAACI,MAAM,EAAEL;AAAM,gBAC5DR,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAuB,uBAAuB;EAACC,SAAS,EAAE,KAAM;EAACL,GAAG,EAAEd,IAAI,CAACe;AAAI,CAAE,CAC/B,CACnC;AAELhB,YAAY,CAACqB,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxB,OAAA,GAE3BC,YAAY","ignoreList":[]}
+{"version":3,"file":"MediaContent.js","names":["_core","require","_react","_interopRequireWildcard","_MediaContent","_MediaContent2","_MediaContent3","_useMediaContentSize","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MediaContent","file","previewUrl","ratio","onClick","shouldLoadImages","playIconSize","isVideo","isVideoFile","sourceKey","getMediaSourceUrl","previewSourceUrl","getMediaPreviewUrl","hasLoadedFinalMedia","setHasLoadedFinalMedia","useState","imageRef","useRef","videoRef","containerElement","setContainerElement","renderSize","useMediaContentSize","devicePixelRatio","window","Number","isFinite","finalSourceUrl","useMemo","getResponsiveImageServiceUrl","displayPreviewUrl","undefined","useLayoutEffect","_imageRef$current","_videoRef$current","current","complete","naturalWidth","readyState","shouldRenderFinalImage","Boolean","shouldShowPreview","createElement","StyledMediaContentVideoWrapper","ref","$ratio","StyledMediaContentPreviewImage","draggable","src","alt","style","opacity","StyledMediaContentPlayIcon","Icon","size","icons","StyledMediaContentVideo","poster","preload","onLoadedData","filter","MEDIA_CONTENT_PREVIEW_BLUR","transform","MEDIA_CONTENT_PREVIEW_SCALE","transition","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS","MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS","type","StyledMediaContentImageWrapper","StyledMediaContentImage","onLoad","displayName","_default","exports","memo"],"sources":["../../../../src/components/media-content/MediaContent.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC, memo, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport {\n    StyledMediaContentImage,\n    StyledMediaContentImageWrapper,\n    StyledMediaContentPlayIcon,\n    StyledMediaContentPreviewImage,\n    StyledMediaContentVideo,\n    StyledMediaContentVideoWrapper,\n} from './MediaContent.styles';\nimport type { MediaContentProps } from './MediaContent.types';\nimport {\n    getMediaPreviewUrl,\n    getMediaSourceUrl,\n    getResponsiveImageServiceUrl,\n    isVideoFile,\n} from './MediaContent.utils';\nimport {\n    MEDIA_CONTENT_IMAGE_FADE_DURATION_MS,\n    MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS,\n    MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS,\n    MEDIA_CONTENT_PREVIEW_BLUR,\n    MEDIA_CONTENT_PREVIEW_SCALE,\n} from './MediaContent.constants';\nimport useMediaContentSize from './useMediaContentSize';\n\nconst MediaContent: FC<MediaContentProps> = ({\n    file,\n    previewUrl,\n    ratio,\n    onClick,\n    shouldLoadImages = true,\n    playIconSize = 50,\n}) => {\n    const isVideo = isVideoFile(file);\n    const sourceKey = getMediaSourceUrl(file);\n    const previewSourceUrl = getMediaPreviewUrl(file, previewUrl);\n    const [hasLoadedFinalMedia, setHasLoadedFinalMedia] = useState(false);\n    const imageRef = useRef<HTMLImageElement>(null);\n    const videoRef = useRef<HTMLVideoElement>(null);\n    const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);\n    const renderSize = useMediaContentSize(containerElement);\n    const devicePixelRatio =\n        typeof window !== 'undefined' &&\n        Number.isFinite(window.devicePixelRatio) &&\n        window.devicePixelRatio > 0\n            ? window.devicePixelRatio\n            : 1;\n\n    const finalSourceUrl = useMemo(\n        () =>\n            isVideo\n                ? sourceKey\n                : getResponsiveImageServiceUrl(sourceKey, renderSize, devicePixelRatio),\n        [devicePixelRatio, isVideo, renderSize, sourceKey],\n    );\n    const displayPreviewUrl = useMemo(\n        () =>\n            previewSourceUrl\n                ? getResponsiveImageServiceUrl(previewSourceUrl, renderSize, devicePixelRatio)\n                : undefined,\n        [devicePixelRatio, previewSourceUrl, renderSize],\n    );\n\n    useLayoutEffect(() => {\n        setHasLoadedFinalMedia(false);\n    }, [sourceKey]);\n\n    useLayoutEffect(() => {\n        if (!shouldLoadImages) {\n            return;\n        }\n\n        if (!isVideo && imageRef.current?.complete && imageRef.current.naturalWidth > 0) {\n            setHasLoadedFinalMedia(true);\n        }\n\n        if (isVideo && videoRef.current?.readyState && videoRef.current.readyState >= 2) {\n            setHasLoadedFinalMedia(true);\n        }\n    }, [finalSourceUrl, isVideo, shouldLoadImages]);\n\n    const shouldRenderFinalImage = shouldLoadImages && Boolean(finalSourceUrl);\n    const shouldShowPreview = Boolean(displayPreviewUrl);\n\n    if (isVideo) {\n        return (\n            <StyledMediaContentVideoWrapper\n                ref={setContainerElement}\n                onClick={onClick}\n                $ratio={ratio}\n            >\n                {displayPreviewUrl && (\n                    <StyledMediaContentPreviewImage\n                        draggable={false}\n                        src={displayPreviewUrl}\n                        alt=\"\"\n                        aria-hidden=\"true\"\n                        style={{\n                            opacity: shouldLoadImages && hasLoadedFinalMedia ? 0 : 1,\n                        }}\n                    />\n                )}\n                <StyledMediaContentPlayIcon>\n                    <Icon size={playIconSize} icons={['fa fa-play']} />\n                </StyledMediaContentPlayIcon>\n                {shouldRenderFinalImage && (\n                    <StyledMediaContentVideo\n                        ref={videoRef}\n                        poster={displayPreviewUrl}\n                        preload=\"metadata\"\n                        onLoadedData={() => setHasLoadedFinalMedia(true)}\n                        style={{\n                            filter:\n                                displayPreviewUrl && !hasLoadedFinalMedia\n                                    ? MEDIA_CONTENT_PREVIEW_BLUR\n                                    : 'none',\n                            transform:\n                                displayPreviewUrl && !hasLoadedFinalMedia\n                                    ? `scale(${MEDIA_CONTENT_PREVIEW_SCALE})`\n                                    : 'none',\n                            opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,\n                            transition: `opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease, filter ${MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS}ms ease ${MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS}ms, transform ${MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS}ms ease ${MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS}ms`,\n                        }}\n                    >\n                        <source src={finalSourceUrl} type=\"video/mp4\" />\n                    </StyledMediaContentVideo>\n                )}\n            </StyledMediaContentVideoWrapper>\n        );\n    }\n\n    return (\n        <StyledMediaContentImageWrapper ref={setContainerElement} onClick={onClick} $ratio={ratio}>\n            {shouldShowPreview && (\n                <StyledMediaContentPreviewImage\n                    draggable={false}\n                    src={displayPreviewUrl}\n                    alt=\"\"\n                    aria-hidden=\"true\"\n                    style={{\n                        opacity: shouldLoadImages && hasLoadedFinalMedia ? 0 : 1,\n                    }}\n                />\n            )}\n            {shouldRenderFinalImage && (\n                <StyledMediaContentImage\n                    ref={imageRef}\n                    draggable={false}\n                    src={finalSourceUrl}\n                    alt=\"\"\n                    onLoad={() => setHasLoadedFinalMedia(true)}\n                    style={{\n                        filter:\n                            displayPreviewUrl && !hasLoadedFinalMedia\n                                ? MEDIA_CONTENT_PREVIEW_BLUR\n                                : 'none',\n                        transform:\n                            displayPreviewUrl && !hasLoadedFinalMedia\n                                ? `scale(${MEDIA_CONTENT_PREVIEW_SCALE})`\n                                : 'none',\n                        opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,\n                        transition: `opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease, filter ${MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS}ms ease ${MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS}ms, transform ${MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS}ms ease ${MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS}ms`,\n                    }}\n                />\n            )}\n        </StyledMediaContentImageWrapper>\n    );\n};\n\nMediaContent.displayName = 'MediaContent';\n\nexport default memo(MediaContent);\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/media-content/MediaContent.styles.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMediaContentVideoWrapper = exports.StyledMediaContentVideo = exports.StyledMediaContentPlayIcon = exports.StyledMediaContentImageWrapper = exports.StyledMediaContentImage = void 0;
+exports.StyledMediaContentVideoWrapper = exports.StyledMediaContentVideo = exports.StyledMediaContentPreviewImage = exports.StyledMediaContentPlayIcon = exports.StyledMediaContentImageWrapper = exports.StyledMediaContentImage = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _MediaContent = require("./MediaContent.constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledMediaContentVideoWrapper = exports.StyledMediaContentVideoWrapper = _styledComponents.default.div`
     display: flex;
+    position: relative;
+    overflow: hidden;
     width: 100%;
     height: 100%;
     aspect-ratio: ${({
@@ -16,13 +19,23 @@ const StyledMediaContentVideoWrapper = exports.StyledMediaContentVideoWrapper =
 `;
 const StyledMediaContentImageWrapper = exports.StyledMediaContentImageWrapper = _styledComponents.default.div`
     display: flex;
+    position: relative;
+    overflow: hidden;
     width: 100%;
     height: 100%;
     aspect-ratio: ${({
   $ratio
 }) => $ratio};
 `;
-const StyledMediaContentImage = exports.StyledMediaContentImage = _styledComponents.default.img`
+const StyledMediaContentLayer = _styledComponents.default.img`
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+`;
+const StyledMediaContentPreviewImage = exports.StyledMediaContentPreviewImage = (0, _styledComponents.default)(StyledMediaContentLayer)`
     background-color: ${({
   theme
 }) => theme['101']};
@@ -31,9 +44,22 @@ const StyledMediaContentImage = exports.StyledMediaContentImage = _styledCompone
   theme
 }) => theme['009-rgb']}, 0.08) inset;
     z-index: 1;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    filter: ${_MediaContent.MEDIA_CONTENT_PREVIEW_BLUR};
+    transform: scale(${_MediaContent.MEDIA_CONTENT_PREVIEW_SCALE});
+    transition:
+        opacity ${_MediaContent.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease,
+        filter ${_MediaContent.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;
+`;
+const StyledMediaContentImage = exports.StyledMediaContentImage = (0, _styledComponents.default)(StyledMediaContentLayer)`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    z-index: 2;
+    transition: opacity ${_MediaContent.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;
 `;
 const StyledMediaContentVideo = exports.StyledMediaContentVideo = _styledComponents.default.video`
     background-color: ${({
@@ -43,8 +69,12 @@ const StyledMediaContentVideo = exports.StyledMediaContentVideo = _styledCompone
         rgba(${({
   theme
 }) => theme['009-rgb']}, 0.08) inset;
+    position: absolute;
+    inset: 0;
     width: 100%;
+    height: 100%;
     object-fit: cover;
+    pointer-events: none;
 `;
 const StyledMediaContentPlayIcon = exports.StyledMediaContentPlayIcon = _styledComponents.default.div`
     position: absolute;