@chayns-components/gallery 5.2.4 → 5.2.6

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewer.js","names":["React","useCallback","useMemo","GalleryViewerItem","StyledGalleryViewer","StyledGalleryViewerItemWrapper","getGalleryRatio","getGalleryViewerKey","getReadOnlyItemRatio","openKnownFiles","GalleryViewMode","GalleryViewer","files","viewMode","GRID","fileItems","ratio","handleOpenFiles","file","visibleItems","slice","createElement","$ratio","$itemCount","length","$viewMode","map","index","key","fileItem","onClick","remainingItemsLength","undefined","displayName"],"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":"AACA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,mBAAmB,EAAEC,8BAA8B,QAAQ,wBAAwB;AAE5F,SACIC,eAAe,EACfC,mBAAmB,EACnBC,oBAAoB,EACpBC,cAAc,QACX,qBAAqB;AAC5B,SAASC,eAAe,QAAQ,qBAAqB;AAErD,MAAMC,aAAqC,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ,GAAGH,eAAe,CAACI;AAAK,CAAC,KAAK;EAC1F,MAAMC,SAAS,GAAGH,KAAK,IAAI,EAAE;EAE7B,MAAMI,KAAK,GAAGd,OAAO,CAAC,MAAMI,eAAe,CAACS,SAAS,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEpE,MAAME,eAAe,GAAGhB,WAAW,CAC9BiB,IAAc,IAAK;IAChBT,cAAc,CAACM,SAAS,EAAEG,IAAI,CAAC;EACnC,CAAC,EACD,CAACH,SAAS,CACd,CAAC;EAED,MAAMI,YAAY,GAAGJ,SAAS,CAACK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;EAE1C,oBACIpB,KAAA,CAAAqB,aAAA,CAACjB,mBAAmB,qBAChBJ,KAAA,CAAAqB,aAAA,CAAChB,8BAA8B;IAC3BiB,MAAM,EAAEN,KAAM;IACdO,UAAU,EAAER,SAAS,CAACS,MAAO;IAC7BC,SAAS,EAAEZ;EAAS,GAEnBM,YAAY,CAACO,GAAG,CAAC,CAACR,IAAI,EAAES,KAAK,kBAC1B3B,KAAA,CAAAqB,aAAA,CAAClB,iBAAiB;IACdyB,GAAG,EAAErB,mBAAmB,CAACW,IAAI,EAAES,KAAK,CAAE;IACtCE,QAAQ,EAAEX,IAAK;IACfY,OAAO,EAAEb,eAAgB;IACzBD,KAAK,EAAER,oBAAoB,CAAC;MAAEO,SAAS;MAAEY,KAAK;MAAEd;IAAS,CAAC,CAAE;IAC5DkB,oBAAoB,EAChBhB,SAAS,CAACS,MAAM,GAAG,CAAC,IAAIG,KAAK,KAAK,CAAC,GAAGZ,SAAS,CAACS,MAAM,GAAGQ;EAC5D,CACJ,CACJ,CAC2B,CACf,CAAC;AAE9B,CAAC;AAEDrB,aAAa,CAACsB,WAAW,GAAG,eAAe;AAE3C,eAAetB,aAAa","ignoreList":[]}
+{"version":3,"file":"GalleryViewer.js","names":["React","memo","useCallback","GalleryViewerItem","StyledGalleryViewer","StyledGalleryViewerItemWrapper","getGalleryRatio","getGalleryViewerKey","getReadOnlyItemRatio","openKnownFiles","GalleryViewMode","GALLERY_VIEWER_MAX_VISIBLE_ITEMS","EMPTY_FILE_ITEMS","GalleryViewer","files","shouldLoadImages","viewMode","GRID","fileItems","ratio","handleOpenFiles","file","visibleItems","slice","createElement","$ratio","$itemCount","length","$viewMode","map","index","key","fileItem","onClick","remainingItemsLength","undefined","displayName"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.tsx"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport React, { FC, memo, 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 memo(GalleryViewer);\n"],"mappings":"AACA,OAAOA,KAAK,IAAQC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AACpD,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,mBAAmB,EAAEC,8BAA8B,QAAQ,wBAAwB;AAE5F,SACIC,eAAe,EACfC,mBAAmB,EACnBC,oBAAoB,EACpBC,cAAc,QACX,qBAAqB;AAC5B,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,gCAAgC,QAAQ,2BAA2B;AAE5E,MAAMC,gBAA4B,GAAG,EAAE;AAEvC,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,KAAK;EACLC,gBAAgB,GAAG,IAAI;EACvBC,QAAQ,GAAGN,eAAe,CAACO;AAC/B,CAAC,KAAK;EACF,MAAMC,SAAS,GAAGJ,KAAK,IAAIF,gBAAgB;EAC3C,MAAMO,KAAK,GAAGb,eAAe,CAACY,SAAS,CAAC;EAExC,MAAME,eAAe,GAAGlB,WAAW,CAC9BmB,IAAc,IAAK;IAChBZ,cAAc,CAACS,SAAS,EAAEG,IAAI,CAAC;EACnC,CAAC,EACD,CAACH,SAAS,CACd,CAAC;EAED,MAAMI,YAAY,GAAGJ,SAAS,CAACK,KAAK,CAAC,CAAC,EAAEZ,gCAAgC,CAAC;EAEzE,oBACIX,KAAA,CAAAwB,aAAA,CAACpB,mBAAmB,qBAChBJ,KAAA,CAAAwB,aAAA,CAACnB,8BAA8B;IAC3BoB,MAAM,EAAEN,KAAM;IACdO,UAAU,EAAER,SAAS,CAACS,MAAO;IAC7BC,SAAS,EAAEZ;EAAS,GAEnBM,YAAY,CAACO,GAAG,CAAC,CAACR,IAAI,EAAES,KAAK,kBAC1B9B,KAAA,CAAAwB,aAAA,CAACrB,iBAAiB;IACd4B,GAAG,EAAExB,mBAAmB,CAACc,IAAI,EAAES,KAAK,CAAE;IACtCE,QAAQ,EAAEX,IAAK;IACfY,OAAO,EAAEb,eAAgB;IACzBD,KAAK,EAAEX,oBAAoB,CAAC;MAAEU,SAAS;MAAEY,KAAK;MAAEd;IAAS,CAAC,CAAE;IAC5DD,gBAAgB,EAAEA,gBAAiB;IACnCmB,oBAAoB,EAChBhB,SAAS,CAACS,MAAM,GAAGhB,gCAAgC,IAAImB,KAAK,KAAK,CAAC,GAC5DZ,SAAS,CAACS,MAAM,GAChBQ;EACT,CACJ,CACJ,CAC2B,CACf,CAAC;AAE9B,CAAC;AAEDtB,aAAa,CAACuB,WAAW,GAAG,eAAe;AAE3C,4BAAenC,IAAI,CAACY,aAAa,CAAC","ignoreList":[]}

package/lib/esm/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/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js

@@ -1,18 +1,23 @@
-import React from 'react';
+import React, { memo, useCallback } from 'react';
 import MediaContent from '../../media-content/MediaContent';
 import { StyledGalleryViewerItem, StyledGalleryViewerMoreItemsIndicator } from './GalleryViewerItem.styles';
 const GalleryViewerItem = ({
   fileItem,
+  shouldLoadImages = true,
   ratio = 1,
   remainingItemsLength,
   onClick
-}) => /*#__PURE__*/React.createElement(StyledGalleryViewerItem, null, /*#__PURE__*/React.createElement(MediaContent, {
-  file: fileItem.file,
-  onClick: () => onClick(fileItem),
-  ratio: ratio
-}), remainingItemsLength && /*#__PURE__*/React.createElement(StyledGalleryViewerMoreItemsIndicator, {
-  onClick: () => onClick(fileItem)
-}, /*#__PURE__*/React.createElement("p", null, `+ ${remainingItemsLength - 3}`)));
+}) => {
+  const handleClick = useCallback(() => onClick(fileItem), [fileItem, onClick]);
+  return /*#__PURE__*/React.createElement(StyledGalleryViewerItem, null, /*#__PURE__*/React.createElement(MediaContent, {
+    file: fileItem.file,
+    onClick: handleClick,
+    ratio: ratio,
+    shouldLoadImages: shouldLoadImages
+  }), remainingItemsLength && /*#__PURE__*/React.createElement(StyledGalleryViewerMoreItemsIndicator, {
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("p", null, `+ ${remainingItemsLength - 3}`)));
+};
 GalleryViewerItem.displayName = 'GalleryViewerItem';
-export default GalleryViewerItem;
+export default /*#__PURE__*/memo(GalleryViewerItem);
 //# sourceMappingURL=GalleryViewerItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewerItem.js","names":["React","MediaContent","StyledGalleryViewerItem","StyledGalleryViewerMoreItemsIndicator","GalleryViewerItem","fileItem","ratio","remainingItemsLength","onClick","createElement","file","displayName"],"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,OAAOA,KAAK,MAAc,OAAO;AACjC,OAAOC,YAAY,MAAM,kCAAkC;AAC3D,SACIC,uBAAuB,EACvBC,qCAAqC,QAClC,4BAA4B;AAGnC,MAAMC,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,KAAK,GAAG,CAAC;EACTC,oBAAoB;EACpBC;AACJ,CAAC,kBACGR,KAAA,CAAAS,aAAA,CAACP,uBAAuB,qBACpBF,KAAA,CAAAS,aAAA,CAACR,YAAY;EAACS,IAAI,EAAEL,QAAQ,CAACK,IAAK;EAACF,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACH,QAAQ,CAAE;EAACC,KAAK,EAAEA;AAAM,CAAE,CAAC,EACpFC,oBAAoB,iBACjBP,KAAA,CAAAS,aAAA,CAACN,qCAAqC;EAACK,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACH,QAAQ;AAAE,gBACpEL,KAAA,CAAAS,aAAA,YAAI,KAAKF,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAC5B;AAEDH,iBAAiB,CAACO,WAAW,GAAG,mBAAmB;AAEnD,eAAeP,iBAAiB","ignoreList":[]}
+{"version":3,"file":"GalleryViewerItem.js","names":["React","memo","useCallback","MediaContent","StyledGalleryViewerItem","StyledGalleryViewerMoreItemsIndicator","GalleryViewerItem","fileItem","shouldLoadImages","ratio","remainingItemsLength","onClick","handleClick","createElement","file","displayName"],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.tsx"],"sourcesContent":["import React, { FC, memo, useCallback } 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    const handleClick = useCallback(() => onClick(fileItem), [fileItem, onClick]);\n\n    return (\n        <StyledGalleryViewerItem>\n            <MediaContent\n                file={fileItem.file}\n                onClick={handleClick}\n                ratio={ratio}\n                shouldLoadImages={shouldLoadImages}\n            />\n            {remainingItemsLength && (\n                <StyledGalleryViewerMoreItemsIndicator onClick={handleClick}>\n                    <p>{`+ ${remainingItemsLength - 3}`}</p>\n                </StyledGalleryViewerMoreItemsIndicator>\n            )}\n        </StyledGalleryViewerItem>\n    );\n};\n\nGalleryViewerItem.displayName = 'GalleryViewerItem';\n\nexport default memo(GalleryViewerItem);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AACpD,OAAOC,YAAY,MAAM,kCAAkC;AAC3D,SACIC,uBAAuB,EACvBC,qCAAqC,QAClC,4BAA4B;AAGnC,MAAMC,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,gBAAgB,GAAG,IAAI;EACvBC,KAAK,GAAG,CAAC;EACTC,oBAAoB;EACpBC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAGV,WAAW,CAAC,MAAMS,OAAO,CAACJ,QAAQ,CAAC,EAAE,CAACA,QAAQ,EAAEI,OAAO,CAAC,CAAC;EAE7E,oBACIX,KAAA,CAAAa,aAAA,CAACT,uBAAuB,qBACpBJ,KAAA,CAAAa,aAAA,CAACV,YAAY;IACTW,IAAI,EAAEP,QAAQ,CAACO,IAAK;IACpBH,OAAO,EAAEC,WAAY;IACrBH,KAAK,EAAEA,KAAM;IACbD,gBAAgB,EAAEA;EAAiB,CACtC,CAAC,EACDE,oBAAoB,iBACjBV,KAAA,CAAAa,aAAA,CAACR,qCAAqC;IAACM,OAAO,EAAEC;EAAY,gBACxDZ,KAAA,CAAAa,aAAA,YAAI,KAAKH,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAAC;AAElC,CAAC;AAEDJ,iBAAiB,CAACS,WAAW,GAAG,mBAAmB;AAEnD,4BAAed,IAAI,CAACK,iBAAiB,CAAC","ignoreList":[]}

package/lib/esm/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/esm/components/media-content/MediaContent.constants.js

@@ -0,0 +1,5 @@
+export const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 180;
+export const MEDIA_CONTENT_PREVIEW_BLUR = 'blur(6px)';
+export const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS = 100;
+export const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS = 200;
+//# sourceMappingURL=MediaContent.constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.constants.js","names":["MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","MEDIA_CONTENT_PREVIEW_BLUR","MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS","MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS"],"sources":["../../../../src/components/media-content/MediaContent.constants.ts"],"sourcesContent":["export const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 180;\nexport const MEDIA_CONTENT_PREVIEW_BLUR = 'blur(6px)';\nexport const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS = 100;\nexport const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS = 200;\n"],"mappings":"AAAA,OAAO,MAAMA,oCAAoC,GAAG,GAAG;AACvD,OAAO,MAAMC,0BAA0B,GAAG,WAAW;AACrD,OAAO,MAAMC,0CAA0C,GAAG,GAAG;AAC7D,OAAO,MAAMC,6CAA6C,GAAG,GAAG","ignoreList":[]}

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

@@ -1,29 +1,91 @@
 import { Icon } from '@chayns-components/core';
-import React from 'react';
-import { StyledMediaContentImage, StyledMediaContentImageWrapper, StyledMediaContentPlayIcon, StyledMediaContentVideo, StyledMediaContentVideoWrapper } from './MediaContent.styles';
+import React, { memo, useLayoutEffect, useRef, useState } from 'react';
+import { StyledMediaContentImage, StyledMediaContentImageWrapper, StyledMediaContentPlayIcon, StyledMediaContentPreviewImage, StyledMediaContentVideo, StyledMediaContentVideoWrapper } from './MediaContent.styles';
+import { getMediaPreviewUrl, getMediaSourceUrl, isVideoFile } from './MediaContent.utils';
+import { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS } from './MediaContent.constants';
 const MediaContent = ({
   file,
+  previewUrl,
   ratio,
   onClick,
+  shouldLoadImages = true,
   playIconSize = 50
-}) => 'thumbnailUrl' in file ? /*#__PURE__*/React.createElement(StyledMediaContentVideoWrapper, {
-  onClick: onClick,
-  $ratio: ratio
-}, /*#__PURE__*/React.createElement(StyledMediaContentPlayIcon, null, /*#__PURE__*/React.createElement(Icon, {
-  size: playIconSize,
-  icons: ['fa fa-play']
-})), /*#__PURE__*/React.createElement(StyledMediaContentVideo, {
-  poster: file.thumbnailUrl
-}, /*#__PURE__*/React.createElement("source", {
-  src: file.url,
-  type: "video/mp4"
-}))) : /*#__PURE__*/React.createElement(StyledMediaContentImageWrapper, {
-  onClick: onClick,
-  $ratio: ratio
-}, /*#__PURE__*/React.createElement(StyledMediaContentImage, {
-  draggable: false,
-  src: file.url
-}));
+}) => {
+  const isVideo = isVideoFile(file);
+  const sourceKey = getMediaSourceUrl(file);
+  const previewSourceUrl = getMediaPreviewUrl(file, previewUrl);
+  const [hasLoadedFinalMedia, setHasLoadedFinalMedia] = useState(false);
+  const imageRef = useRef(null);
+  const videoRef = useRef(null);
+  const finalSourceUrl = sourceKey;
+  const displayPreviewUrl = previewSourceUrl;
+  const shouldHidePreview = shouldLoadImages && hasLoadedFinalMedia;
+  const previewLayerStyle = {
+    opacity: shouldHidePreview ? 0 : 1,
+    filter: shouldHidePreview ? 'blur(0px)' : undefined
+  };
+  const finalMediaStyle = {
+    opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,
+    transition: `opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease`
+  };
+  useLayoutEffect(() => {
+    setHasLoadedFinalMedia(false);
+  }, [sourceKey]);
+  useLayoutEffect(() => {
+    if (!shouldLoadImages) {
+      return;
+    }
+    if (!isVideo && imageRef.current?.complete && imageRef.current.naturalWidth > 0) {
+      setHasLoadedFinalMedia(true);
+    }
+    if (isVideo && 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.createElement(StyledMediaContentVideoWrapper, {
+      onClick: onClick,
+      $ratio: ratio
+    }, displayPreviewUrl && /*#__PURE__*/React.createElement(StyledMediaContentPreviewImage, {
+      draggable: false,
+      src: displayPreviewUrl,
+      alt: "",
+      "aria-hidden": "true",
+      style: previewLayerStyle
+    }), /*#__PURE__*/React.createElement(StyledMediaContentPlayIcon, null, /*#__PURE__*/React.createElement(Icon, {
+      size: playIconSize,
+      icons: ['fa fa-play']
+    })), shouldRenderFinalImage && /*#__PURE__*/React.createElement(StyledMediaContentVideo, {
+      ref: videoRef,
+      poster: displayPreviewUrl,
+      preload: "metadata",
+      onLoadedData: () => setHasLoadedFinalMedia(true),
+      style: finalMediaStyle
+    }, /*#__PURE__*/React.createElement("source", {
+      src: finalSourceUrl,
+      type: "video/mp4"
+    })));
+  }
+  return /*#__PURE__*/React.createElement(StyledMediaContentImageWrapper, {
+    onClick: onClick,
+    $ratio: ratio
+  }, shouldShowPreview && /*#__PURE__*/React.createElement(StyledMediaContentPreviewImage, {
+    draggable: false,
+    src: displayPreviewUrl,
+    alt: "",
+    "aria-hidden": "true",
+    style: previewLayerStyle
+  }), shouldRenderFinalImage && /*#__PURE__*/React.createElement(StyledMediaContentImage, {
+    ref: imageRef,
+    draggable: false,
+    src: finalSourceUrl,
+    alt: "",
+    onLoad: () => setHasLoadedFinalMedia(true),
+    style: finalMediaStyle
+  }));
+};
 MediaContent.displayName = 'MediaContent';
-export default MediaContent;
+export default /*#__PURE__*/memo(MediaContent);
 //# sourceMappingURL=MediaContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.js","names":["Icon","React","StyledMediaContentImage","StyledMediaContentImageWrapper","StyledMediaContentPlayIcon","StyledMediaContentVideo","StyledMediaContentVideoWrapper","MediaContent","file","ratio","onClick","playIconSize","createElement","$ratio","size","icons","poster","thumbnailUrl","src","url","type","draggable","displayName"],"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,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,8BAA8B,EAC9BC,0BAA0B,EAC1BC,uBAAuB,EACvBC,8BAA8B,QAC3B,uBAAuB;AAG9B,MAAMC,YAAmC,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAEC,YAAY,GAAG;AAAG,CAAC,KACpF,cAAc,IAAIH,IAAI,gBAClBP,KAAA,CAAAW,aAAA,CAACN,8BAA8B;EAACI,OAAO,EAAEA,OAAQ;EAACG,MAAM,EAAEJ;AAAM,gBAC5DR,KAAA,CAAAW,aAAA,CAACR,0BAA0B,qBACvBH,KAAA,CAAAW,aAAA,CAACZ,IAAI;EAACc,IAAI,EAAEH,YAAa;EAACI,KAAK,EAAE,CAAC,YAAY;AAAE,CAAE,CAC1B,CAAC,eAC7Bd,KAAA,CAAAW,aAAA,CAACP,uBAAuB;EAACW,MAAM,EAAER,IAAI,CAACS;AAAa,gBAC/ChB,KAAA,CAAAW,aAAA;EAAQM,GAAG,EAAEV,IAAI,CAACW,GAAI;EAACC,IAAI,EAAC;AAAW,CAAE,CACpB,CACG,CAAC,gBAEjCnB,KAAA,CAAAW,aAAA,CAACT,8BAA8B;EAACO,OAAO,EAAEA,OAAQ;EAACG,MAAM,EAAEJ;AAAM,gBAC5DR,KAAA,CAAAW,aAAA,CAACV,uBAAuB;EAACmB,SAAS,EAAE,KAAM;EAACH,GAAG,EAAEV,IAAI,CAACW;AAAI,CAAE,CAC/B,CACnC;AAELZ,YAAY,CAACe,WAAW,GAAG,cAAc;AAEzC,eAAef,YAAY","ignoreList":[]}
+{"version":3,"file":"MediaContent.js","names":["Icon","React","memo","useLayoutEffect","useRef","useState","StyledMediaContentImage","StyledMediaContentImageWrapper","StyledMediaContentPlayIcon","StyledMediaContentPreviewImage","StyledMediaContentVideo","StyledMediaContentVideoWrapper","getMediaPreviewUrl","getMediaSourceUrl","isVideoFile","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","MediaContent","file","previewUrl","ratio","onClick","shouldLoadImages","playIconSize","isVideo","sourceKey","previewSourceUrl","hasLoadedFinalMedia","setHasLoadedFinalMedia","imageRef","videoRef","finalSourceUrl","displayPreviewUrl","shouldHidePreview","previewLayerStyle","opacity","filter","undefined","finalMediaStyle","transition","current","complete","naturalWidth","readyState","shouldRenderFinalImage","Boolean","shouldShowPreview","createElement","$ratio","draggable","src","alt","style","size","icons","ref","poster","preload","onLoadedData","type","onLoad","displayName"],"sources":["../../../../src/components/media-content/MediaContent.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC, memo, useLayoutEffect, 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 { getMediaPreviewUrl, getMediaSourceUrl, isVideoFile } from './MediaContent.utils';\nimport { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS } from './MediaContent.constants';\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 finalSourceUrl = sourceKey;\n    const displayPreviewUrl = previewSourceUrl;\n    const shouldHidePreview = shouldLoadImages && hasLoadedFinalMedia;\n    const previewLayerStyle = {\n        opacity: shouldHidePreview ? 0 : 1,\n        filter: shouldHidePreview ? 'blur(0px)' : undefined,\n    };\n    const finalMediaStyle = {\n        opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,\n        transition: `opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease`,\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 onClick={onClick} $ratio={ratio}>\n                {displayPreviewUrl && (\n                    <StyledMediaContentPreviewImage\n                        draggable={false}\n                        src={displayPreviewUrl}\n                        alt=\"\"\n                        aria-hidden=\"true\"\n                        style={previewLayerStyle}\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={finalMediaStyle}\n                    >\n                        <source src={finalSourceUrl} type=\"video/mp4\" />\n                    </StyledMediaContentVideo>\n                )}\n            </StyledMediaContentVideoWrapper>\n        );\n    }\n\n    return (\n        <StyledMediaContentImageWrapper onClick={onClick} $ratio={ratio}>\n            {shouldShowPreview && (\n                <StyledMediaContentPreviewImage\n                    draggable={false}\n                    src={displayPreviewUrl}\n                    alt=\"\"\n                    aria-hidden=\"true\"\n                    style={previewLayerStyle}\n                />\n            )}\n            {shouldRenderFinalImage && (\n                <StyledMediaContentImage\n                    ref={imageRef}\n                    draggable={false}\n                    src={finalSourceUrl}\n                    alt=\"\"\n                    onLoad={() => setHasLoadedFinalMedia(true)}\n                    style={finalMediaStyle}\n                />\n            )}\n        </StyledMediaContentImageWrapper>\n    );\n};\n\nMediaContent.displayName = 'MediaContent';\n\nexport default memo(MediaContent);\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,9 @@
 import styled from 'styled-components';
+import { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS, MEDIA_CONTENT_PREVIEW_BLUR, MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS, MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS } from './MediaContent.constants';
 export const StyledMediaContentVideoWrapper = styled.div`
     display: flex;
+    position: relative;
+    overflow: hidden;
     width: 100%;
     height: 100%;
     aspect-ratio: ${({
@@ -9,13 +12,38 @@ export const StyledMediaContentVideoWrapper = styled.div`
 `;
 export const StyledMediaContentImageWrapper = styled.div`
     display: flex;
+    position: relative;
+    overflow: hidden;
     width: 100%;
     height: 100%;
     aspect-ratio: ${({
   $ratio
 }) => $ratio};
 `;
-export const StyledMediaContentImage = styled.img`
+const StyledMediaContentLayer = styled.img`
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+`;
+export const StyledMediaContentPreviewImage = styled(StyledMediaContentLayer)`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    z-index: 2;
+    filter: ${MEDIA_CONTENT_PREVIEW_BLUR};
+    transition:
+        opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease,
+        filter ${MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS}ms ease
+            ${MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS}ms;
+`;
+export const StyledMediaContentImage = styled(StyledMediaContentLayer)`
     background-color: ${({
   theme
 }) => theme['101']};
@@ -24,9 +52,7 @@ export const StyledMediaContentImage = styled.img`
   theme
 }) => theme['009-rgb']}, 0.08) inset;
     z-index: 1;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    transition: opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;
 `;
 export const StyledMediaContentVideo = styled.video`
     background-color: ${({
@@ -36,12 +62,17 @@ export const StyledMediaContentVideo = styled.video`
         rgba(${({
   theme
 }) => theme['009-rgb']}, 0.08) inset;
+    position: absolute;
+    inset: 0;
     width: 100%;
+    height: 100%;
     object-fit: cover;
+    pointer-events: none;
+    z-index: 1;
 `;
 export const StyledMediaContentPlayIcon = styled.div`
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

package/lib/esm/components/media-content/MediaContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.styles.js","names":["styled","StyledMediaContentVideoWrapper","div","$ratio","StyledMediaContentImageWrapper","StyledMediaContentImage","img","theme","StyledMediaContentVideo","video","StyledMediaContentPlayIcon"],"sources":["../../../../src/components/media-content/MediaContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledMediaContentVideoWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaContentImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaContentVideoProps = WithTheme<unknown>;\n\ntype StyledMediaContentImageProps = WithTheme<unknown>;\n\nexport const StyledMediaContentImage = styled.img<StyledMediaContentImageProps>`\n    background-color: ${({ theme }: StyledMediaContentImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaContentVideo = styled.video<StyledMediaContentVideoProps>`\n    background-color: ${({ theme }: StyledMediaContentVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentVideoProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaContentPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,8BAA8B,GAAGD,MAAM,CAACE,GAAuB;AAC5E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGJ,MAAM,CAACE,GAAuB;AAC5E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMD,OAAO,MAAME,uBAAuB,GAAGL,MAAM,CAACM,GAAiC;AAC/E,wBAAwB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGR,MAAM,CAACS,KAAmC;AACjF,wBAAwB,CAAC;EAAEF;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA,CAAC;AAED,OAAO,MAAMG,0BAA0B,GAAGV,MAAM,CAACE,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MediaContent.styles.js","names":["styled","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","MEDIA_CONTENT_PREVIEW_BLUR","MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS","MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS","StyledMediaContentVideoWrapper","div","$ratio","StyledMediaContentImageWrapper","StyledMediaContentLayer","img","StyledMediaContentPreviewImage","theme","StyledMediaContentImage","StyledMediaContentVideo","video","StyledMediaContentPlayIcon"],"sources":["../../../../src/components/media-content/MediaContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport {\n    MEDIA_CONTENT_IMAGE_FADE_DURATION_MS,\n    MEDIA_CONTENT_PREVIEW_BLUR,\n    MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS,\n    MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS,\n} from './MediaContent.constants';\n\nexport const StyledMediaContentVideoWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaContentImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaContentVideoProps = WithTheme<unknown>;\n\ntype StyledMediaContentImageProps = WithTheme<unknown>;\n\nconst StyledMediaContentLayer = styled.img<StyledMediaContentImageProps>`\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n`;\n\nexport const StyledMediaContentPreviewImage = styled(StyledMediaContentLayer)`\n    background-color: ${({ theme }: StyledMediaContentImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 2;\n    filter: ${MEDIA_CONTENT_PREVIEW_BLUR};\n    transition:\n        opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease,\n        filter ${MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS}ms ease\n            ${MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS}ms;\n`;\n\nexport const StyledMediaContentImage = styled(StyledMediaContentLayer)`\n    background-color: ${({ theme }: StyledMediaContentImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    transition: opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;\n`;\n\nexport const StyledMediaContentVideo = styled.video<StyledMediaContentVideoProps>`\n    background-color: ${({ theme }: StyledMediaContentVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentVideoProps) => theme['009-rgb']}, 0.08) inset;\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n    z-index: 1;\n`;\n\nexport const StyledMediaContentPlayIcon = styled.div`\n    position: absolute;\n    z-index: 3;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SACIC,oCAAoC,EACpCC,0BAA0B,EAC1BC,0CAA0C,EAC1CC,6CAA6C,QAC1C,0BAA0B;AAEjC,OAAO,MAAMC,8BAA8B,GAAGL,MAAM,CAACM,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGR,MAAM,CAACM,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMD,MAAME,uBAAuB,GAAGT,MAAM,CAACU,GAAiC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGX,MAAM,CAACS,uBAAuB,CAAC;AAC7E,wBAAwB,CAAC;EAAEG;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA,cAAcV,0BAA0B;AACxC;AACA,kBAAkBD,oCAAoC;AACtD,iBAAiBG,6CAA6C;AAC9D,cAAcD,0CAA0C;AACxD,CAAC;AAED,OAAO,MAAMU,uBAAuB,GAAGb,MAAM,CAACS,uBAAuB,CAAC;AACtE,wBAAwB,CAAC;EAAEG;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA,0BAA0BX,oCAAoC;AAC9D,CAAC;AAED,OAAO,MAAMa,uBAAuB,GAAGd,MAAM,CAACe,KAAmC;AACjF,wBAAwB,CAAC;EAAEH;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGhB,MAAM,CAACM,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/media-content/MediaContent.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.types.js","names":[],"sources":["../../../../src/components/media-content/MediaContent.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for the low-level uploaded media renderer shared by viewer and editor.\n */\nexport interface MediaContentProps {\n    /**\n     * Provides the uploaded media item that should be rendered.\n     * @description\n     * This low-level renderer accepts already known image or video data and does not handle upload-specific state.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1} />\n     */\n    file: FileItem['file'];\n    /**\n     * Defines the aspect ratio that should be reserved for the media.\n     * @description\n     * The surrounding tile uses this value to reserve a deterministic media height before the asset finishes loading.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1.5} />\n     */\n    ratio: number;\n    /**\n     * Is called when the media tile is selected.\n     * @description\n     * Use this callback to react to clicks on the rendered image or video tile.\n     * @example\n     * <MediaContent file={file.file} onClick={() => console.log('open')} ratio={1} />\n     */\n    onClick: () => void;\n    /**\n     * Defines the size of the video play icon.\n     * @description\n     * This prop only affects rendered videos. Image tiles ignore it.\n     * @default 50\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} playIconSize={30} ratio={1} />\n     * @optional\n     */\n    playIconSize?: number;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"MediaContent.types.js","names":[],"sources":["../../../../src/components/media-content/MediaContent.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for the low-level uploaded media renderer shared by viewer and editor.\n */\nexport interface MediaContentProps {\n    /**\n     * Provides the uploaded media item that should be rendered.\n     * @description\n     * This low-level renderer accepts already known image or video data and does not handle upload-specific state.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1} />\n     */\n    file: FileItem['file'];\n    /**\n     * Provides an optional preview source that can be displayed while the final media is still loading.\n     * @description\n     * This preview can be a base64 data URL or any low-resolution fallback image.\n     * When provided, the component shows the preview first and swaps to the final image once it has finished loading.\n     * @optional\n     */\n    previewUrl?: string;\n    /**\n     * Defines the aspect ratio that should be reserved for the media.\n     * @description\n     * The surrounding tile uses this value to reserve a deterministic media height before the asset finishes loading.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1.5} />\n     */\n    ratio: number;\n    /**\n     * Controls whether the final media source may be loaded immediately.\n     * @description\n     * When set to `false`, only the preview source is rendered until this flag becomes `true`.\n     * @default true\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Is called when the media tile is selected.\n     * @description\n     * Use this callback to react to clicks on the rendered image or video tile.\n     * @example\n     * <MediaContent file={file.file} onClick={() => console.log('open')} ratio={1} />\n     */\n    onClick: () => void;\n    /**\n     * Defines the size of the video play icon.\n     * @description\n     * This prop only affects rendered videos. Image tiles ignore it.\n     * @default 50\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} playIconSize={30} ratio={1} />\n     * @optional\n     */\n    playIconSize?: number;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/media-content/MediaContent.utils.js

@@ -0,0 +1,12 @@
+export const isVideoFile = file => 'thumbnailUrl' in file;
+export const getMediaSourceUrl = file => file.url.replace('_0.mp4', '.mp4');
+export const getMediaPreviewUrl = (file, previewUrl) => {
+  if (previewUrl) {
+    return previewUrl;
+  }
+  if (isVideoFile(file)) {
+    return file.thumbnailUrl;
+  }
+  return file.meta?.preview;
+};
+//# sourceMappingURL=MediaContent.utils.js.map

package/lib/esm/components/media-content/MediaContent.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.utils.js","names":["isVideoFile","file","getMediaSourceUrl","url","replace","getMediaPreviewUrl","previewUrl","thumbnailUrl","meta","preview"],"sources":["../../../../src/components/media-content/MediaContent.utils.ts"],"sourcesContent":["import type { FileItem, Video } from '@chayns-components/core';\n\nexport type GalleryMediaFile = FileItem['file'];\n\nexport const isVideoFile = (file: GalleryMediaFile): file is Video => 'thumbnailUrl' in file;\n\nexport const getMediaSourceUrl = (file: GalleryMediaFile): string =>\n    file.url.replace('_0.mp4', '.mp4');\n\nexport const getMediaPreviewUrl = (\n    file: GalleryMediaFile,\n    previewUrl?: string,\n): string | undefined => {\n    if (previewUrl) {\n        return previewUrl;\n    }\n\n    if (isVideoFile(file)) {\n        return file.thumbnailUrl;\n    }\n\n    return file.meta?.preview;\n};\n"],"mappings":"AAIA,OAAO,MAAMA,WAAW,GAAIC,IAAsB,IAAoB,cAAc,IAAIA,IAAI;AAE5F,OAAO,MAAMC,iBAAiB,GAAID,IAAsB,IACpDA,IAAI,CAACE,GAAG,CAACC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC;AAEtC,OAAO,MAAMC,kBAAkB,GAAGA,CAC9BJ,IAAsB,EACtBK,UAAmB,KACE;EACrB,IAAIA,UAAU,EAAE;IACZ,OAAOA,UAAU;EACrB;EAEA,IAAIN,WAAW,CAACC,IAAI,CAAC,EAAE;IACnB,OAAOA,IAAI,CAACM,YAAY;EAC5B;EAEA,OAAON,IAAI,CAACO,IAAI,EAAEC,OAAO;AAC7B,CAAC","ignoreList":[]}

package/lib/esm/utils/gallery.js

@@ -49,7 +49,7 @@ export const openFiles = (fileItems, file) => {
   try {
     startIndex = fileItems.findIndex(item => item.id === file.id);
     const items = fileItems.map(item => ({
-      url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',
+      url: item.uploadedFile?.url ?? '',
       mediaType: item.uploadedFile && 'thumbnailUrl' in item.uploadedFile ? MediaType.VIDEO : MediaType.IMAGE
     }));
 
@@ -93,7 +93,7 @@ export const openKnownFiles = (fileItems, file) => {
   try {
     startIndex = fileItems.findIndex((item, index) => getGalleryViewerKey(item, index) === activeFileKey);
     const items = fileItems.map(item => ({
-      url: item.file.url.replace('_0.mp4', '.mp4'),
+      url: item.file.url,
       mediaType: 'thumbnailUrl' in item.file ? MediaType.VIDEO : MediaType.IMAGE
     }));
 

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

@@ -1 +1 @@
-{"version":3,"file":"gallery.js","names":["MediaType","openImage","openMedia","openVideo","GalleryViewMode","DEFAULT_MEDIA_RATIO","mapFilesToInternalItems","files","map","file","index","id","getGalleryViewerKey","uploadedFile","undefined","state","previewUrl","fileItem","url","getGalleryRatio","fileItems","length","Math","max","ratio","getReadOnlyItemRatio","viewMode","itemCount","GRID","openFiles","startIndex","findIndex","item","items","replace","mediaType","VIDEO","IMAGE","_","imageFiles","forEach","push","startFile","shift","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":"AACA,SACIA,SAAS,EACTC,SAAS,EACTC,SAAS,EAGTC,SAAS,QACN,YAAY;AACnB,SAASC,eAAe,QAAQ,kBAAkB;AAElD,MAAMC,mBAAmB,GAAG,CAAC;AAE7B,OAAO,MAAMC,uBAAuB,GAAIC,KAAkB,IACtD,CAACA,KAAK,IAAI,EAAE,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,MAAM;EAChCC,EAAE,EAAEC,mBAAmB,CAACH,IAAI,EAAEC,KAAK,CAAC;EACpCG,YAAY,EAAEJ,IAAI,CAACA,IAAI;EACvBA,IAAI,EAAEK,SAAS;EACfC,KAAK,EAAE,UAAU;EACjBC,UAAU,EAAEF;AAChB,CAAC,CAAC,CAAC;AAEP,OAAO,MAAMF,mBAAmB,GAAGA,CAACK,QAAkB,EAAEP,KAAa,KACjEO,QAAQ,CAACN,EAAE,IAAIM,QAAQ,CAACR,IAAI,CAACE,EAAE,IAAIM,QAAQ,CAACR,IAAI,CAACS,GAAG,IAAI,gBAAgBR,KAAK,EAAE;AAEnF,OAAO,MAAMS,eAAe,GAAIC,SAAqB,IAAa;EAC9D,QAAQA,SAAS,CAACC,MAAM;IACpB,KAAK,CAAC;MACF,OAAOhB,mBAAmB;IAC9B,KAAK,CAAC;MACF,OAAOiB,IAAI,CAACC,GAAG,CAACH,SAAS,CAAC,CAAC,CAAC,EAAEX,IAAI,CAACe,KAAK,IAAInB,mBAAmB,EAAE,CAAC,CAAC;IACvE,KAAK,CAAC;MACF,OAAO,CAAC;IACZ,KAAK,CAAC;MACF,OAAO,CAAC;IACZ;MACI,OAAOA,mBAAmB;EAClC;AACJ,CAAC;AAED,OAAO,MAAMoB,oBAAoB,GAAGA,CAAC;EACjCL,SAAS;EACTV,KAAK;EACLgB;AAKJ,CAAC,KAAa;EACV,MAAMC,SAAS,GAAGP,SAAS,CAACC,MAAM;EAElC,IAAIK,QAAQ,KAAKtB,eAAe,CAACwB,IAAI,EAAE;IACnC,OAAOvB,mBAAmB;EAC9B;EAEA,IAAIsB,SAAS,KAAK,CAAC,EAAE;IACjB;IACA,OAAOL,IAAI,CAACC,GAAG,CAACH,SAAS,CAAC,CAAC,CAAC,EAAEX,IAAI,CAACe,KAAK,IAAInB,mBAAmB,EAAEA,mBAAmB,CAAC;EACzF;EAEA,IAAIsB,SAAS,KAAK,CAAC,KAAKjB,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,CAAC,CAAC,EAAE;IACjD,OAAO,GAAG;EACd;EAEA,IAAKA,KAAK,KAAK,CAAC,IAAIiB,SAAS,GAAG,CAAC,IAAMA,SAAS,KAAK,CAAC,KAAKjB,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,CAAC,CAAE,EAAE;IACrF,OAAO,GAAG;EACd;EAEA,OAAOL,mBAAmB;AAC9B,CAAC;AAED,OAAO,MAAMwB,SAAS,GAAGA,CAACT,SAA6B,EAAEX,IAAsB,KAAK;EAChF,IAAIqB,UAAU,GAAG,CAAC;EAElB,IAAI;IACAA,UAAU,GAAGV,SAAS,CAACW,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACrB,EAAE,KAAKF,IAAI,CAACE,EAAE,CAAC;IAE/D,MAAMsB,KAAsB,GAAGb,SAAS,CAACZ,GAAG,CAAEwB,IAAI,KAAM;MACpDd,GAAG,EAAEc,IAAI,CAACnB,YAAY,EAAEK,GAAG,CAACgB,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,EAAE;MAC3DC,SAAS,EACLH,IAAI,CAACnB,YAAY,IAAI,cAAc,IAAImB,IAAI,CAACnB,YAAY,GAClDb,SAAS,CAACoC,KAAK,GACfpC,SAAS,CAACqC;IACxB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKnC,SAAS,CAAC;MAAE+B,KAAK;MAAEH;IAAW,CAAC,CAAC;EACzC,CAAC,CAAC,OAAOQ,CAAC,EAAE;IACR,IAAI7B,IAAI,CAACI,YAAY,IAAI,cAAc,IAAIJ,IAAI,CAACI,YAAY,EAAE;MAC1D,KAAKV,SAAS,CAAC;QAAEe,GAAG,EAAET,IAAI,CAACI,YAAY,CAACK;MAAI,CAAC,CAAC;MAE9C;IACJ;IAEA,MAAMqB,UAA2B,GAAG,EAAE;IAEtCnB,SAAS,CAACoB,OAAO,CAAC,CAAC;MAAE3B;IAAa,CAAC,KAAK;MACpC,IAAIA,YAAY,IAAI,EAAE,cAAc,IAAIA,YAAY,CAAC,EAAE;QACnD0B,UAAU,CAACE,IAAI,CAAC;UAAEvB,GAAG,EAAEL,YAAY,CAACK;QAAI,CAAC,CAAC;MAC9C;IACJ,CAAC,CAAC;IAEFY,UAAU,GAAGS,UAAU,CAACR,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACd,GAAG,KAAKT,IAAI,CAACI,YAAY,EAAEK,GAAG,CAAC;IAEhF,MAAMwB,SAAS,GAAGH,UAAU,CAACI,KAAK,CAAC,CAAC;IAEpC,IAAI,CAACD,SAAS,EAAE;MACZ;IACJ;IAEA,KAAKzC,SAAS,CAAC;MAAEgC,KAAK,EAAE,CAACS,SAAS,EAAE,GAAGH,UAAU,CAAC;MAAET;IAAW,CAAC,CAAC;EACrE;AACJ,CAAC;AAED,OAAO,MAAMc,cAAc,GAAGA,CAACxB,SAAqB,EAAEX,IAAc,KAAK;EACrE,MAAMoC,aAAa,GAAGjC,mBAAmB,CAACH,IAAI,EAAEW,SAAS,CAAC0B,OAAO,CAACrC,IAAI,CAAC,CAAC;EACxE,IAAIqB,UAAU,GAAG,CAAC;EAElB,IAAI;IACAA,UAAU,GAAGV,SAAS,CAACW,SAAS,CAC5B,CAACC,IAAI,EAAEtB,KAAK,KAAKE,mBAAmB,CAACoB,IAAI,EAAEtB,KAAK,CAAC,KAAKmC,aAC1D,CAAC;IAED,MAAMZ,KAAsB,GAAGb,SAAS,CAACZ,GAAG,CAAEwB,IAAI,KAAM;MACpDd,GAAG,EAAEc,IAAI,CAACvB,IAAI,CAACS,GAAG,CAACgB,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC;MAC5CC,SAAS,EAAE,cAAc,IAAIH,IAAI,CAACvB,IAAI,GAAGT,SAAS,CAACoC,KAAK,GAAGpC,SAAS,CAACqC;IACzE,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKnC,SAAS,CAAC;MAAE+B,KAAK;MAAEH;IAAW,CAAC,CAAC;EACzC,CAAC,CAAC,OAAOQ,CAAC,EAAE;IACR,IAAI,cAAc,IAAI7B,IAAI,CAACA,IAAI,EAAE;MAC7B,KAAKN,SAAS,CAAC;QAAEe,GAAG,EAAET,IAAI,CAACA,IAAI,CAACS;MAAI,CAAC,CAAC;MAEtC;IACJ;IAEA,MAAMqB,UAA2B,GAAG,EAAE;IAEtCnB,SAAS,CAACoB,OAAO,CAAER,IAAI,IAAK;MACxB,IAAI,EAAE,cAAc,IAAIA,IAAI,CAACvB,IAAI,CAAC,EAAE;QAChC8B,UAAU,CAACE,IAAI,CAAC;UAAEvB,GAAG,EAAEc,IAAI,CAACvB,IAAI,CAACS;QAAI,CAAC,CAAC;MAC3C;IACJ,CAAC,CAAC;IAEFY,UAAU,GAAGS,UAAU,CAACR,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACd,GAAG,KAAKT,IAAI,CAACA,IAAI,CAACS,GAAG,CAAC;IAEvE,MAAMwB,SAAS,GAAGH,UAAU,CAACI,KAAK,CAAC,CAAC;IAEpC,IAAI,CAACD,SAAS,EAAE;MACZ;IACJ;IAEA,KAAKzC,SAAS,CAAC;MAAEgC,KAAK,EAAE,CAACS,SAAS,EAAE,GAAGH,UAAU,CAAC;MAAET;IAAW,CAAC,CAAC;EACrE;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"gallery.js","names":["MediaType","openImage","openMedia","openVideo","GalleryViewMode","DEFAULT_MEDIA_RATIO","mapFilesToInternalItems","files","map","file","index","id","getGalleryViewerKey","uploadedFile","undefined","state","previewUrl","fileItem","url","getGalleryRatio","fileItems","length","Math","max","ratio","getReadOnlyItemRatio","viewMode","itemCount","GRID","openFiles","startIndex","findIndex","item","items","mediaType","VIDEO","IMAGE","_","imageFiles","forEach","push","startFile","shift","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 ?? '',\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,\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/types/components/Gallery.types.d.ts

@@ -82,6 +82,18 @@ export interface GalleryProps {
      * @optional
      */
     maxFiles?: number;
+    /**
+     * Controls when the gallery is allowed to load the final media assets.
+     * @description
+     * When set to `true`, the gallery loads the actual images immediately as before.
+     * When set to `false`, the gallery keeps rendering previews first and delays the final media load until this flag becomes `true`.
+     * This setting applies to the whole gallery wrapper and is intended for external loading control such as virtualized message lists.
+     * @default true
+     * @example
+     * <Gallery files={files} shouldLoadImages={false} />
+     * @optional
+     */
+    shouldLoadImages?: boolean;
     /**
      * Is called after a file has been uploaded successfully in edit mode.
      * @description

package/lib/types/components/gallery-editor/GalleryEditor.constants.d.ts

@@ -0,0 +1,5 @@
+export declare const GALLERY_EDITOR_GRID_GAP_PX = 6;
+export declare const GALLERY_EDITOR_ITEM_FADE_DURATION_S = 0.18;
+export declare const GALLERY_EDITOR_PREVIEW_FADE_DURATION_S = 0.16;
+export declare const GALLERY_EDITOR_MEDIA_FADE_DURATION_S = 0.2;
+export declare const GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX = 3;

package/lib/types/components/gallery-editor/GalleryEditor.styles.d.ts

@@ -1,4 +1,8 @@
-export declare const StyledGalleryEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledGalleryEditorGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledGalleryEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledGalleryEditorGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$gap" | "$fileMinWidth"> & {
+    $gap: number;
     $fileMinWidth: number;
-}>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$gap" | "$fileMinWidth"> & {
+    $gap: number;
+    $fileMinWidth: number;
+}, never>>> & string;

package/lib/types/components/gallery-editor/GalleryEditor.types.d.ts

@@ -53,6 +53,17 @@ export interface GalleryEditorProps {
      * @optional
      */
     files?: FileItem[];
+    /**
+     * Controls whether the editor may load the final media assets immediately.
+     * @description
+     * When set to `true`, the editor behaves like the current implementation and loads the final media immediately.
+     * When set to `false`, uploaded media keeps rendering previews first and delays the final image load until this flag becomes `true`.
+     * @default true
+     * @example
+     * <GalleryEditor files={files} shouldLoadImages={false} />
+     * @optional
+     */
+    shouldLoadImages?: boolean;
     /**
      * Limits how many files can be managed by the editor.
      * @description

package/lib/types/components/gallery-editor/GalleryEditor.utils.d.ts

@@ -0,0 +1,5 @@
+import type { FileItem, InternalFileItem } from '@chayns-components/core';
+export declare const mapExternalFilesIntoInternalItems: (files?: FileItem[]) => InternalFileItem[];
+export declare const mergeExternalFilesWithInternalState: (internalItems: InternalFileItem[], externalItems: InternalFileItem[]) => InternalFileItem[];
+export declare const getPendingPreviewFileItems: (fileItems: InternalFileItem[]) => InternalFileItem[];
+export declare const getPendingUploadFileItems: (fileItems: InternalFileItem[]) => InternalFileItem[];

package/lib/types/components/gallery-editor/add-file/AddFile.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import type { AddFileProps } from './AddFile.types';
-declare const AddFile: FC<AddFileProps>;
-export default AddFile;
+declare const _default: React.NamedExoticComponent<AddFileProps>;
+export default _default;

package/lib/types/components/gallery-editor/add-file/AddFile.styles.d.ts

@@ -1,4 +1,6 @@
-export declare const StyledAddFile: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledAddFIleIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+export declare const StyledAddFile: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledAddFIleIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme"> & {
     theme: import("@chayns-components/core").Theme;
-}>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never>>> & string;

package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import type { GalleryEditorItemProps } from './GalleryEditorItem.types';
-declare const GalleryEditorItem: FC<GalleryEditorItemProps>;
-export default GalleryEditorItem;
+declare const _default: React.NamedExoticComponent<GalleryEditorItemProps>;
+export default _default;

package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.d.ts

@@ -1,4 +1,14 @@
-export declare const StyledGalleryEditorItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledGalleryEditorItemDeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+export declare const StyledMotionGalleryEditorItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledGalleryEditorItemDeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$zIndex"> & {
     theme: import("@chayns-components/core").Theme;
-}>> & string;
+} & {
+    $zIndex: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$zIndex"> & {
+    theme: import("@chayns-components/core").Theme;
+} & {
+    $zIndex: number;
+}, never>>> & string;