@chayns-components/gallery 5.2.5 → 5.2.7

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

@@ -42,5 +42,5 @@ const GalleryViewer = ({
   }))));
 };
 GalleryViewer.displayName = 'GalleryViewer';
-var _default = exports.default = GalleryViewer;
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(GalleryViewer);
 //# sourceMappingURL=GalleryViewer.js.map

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","_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":[]}
+{"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","memo"],"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":"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","ignoreList":[]}

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

@@ -15,14 +15,17 @@ const GalleryViewerItem = ({
   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,
-  shouldLoadImages: shouldLoadImages
-}), remainingItemsLength && /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.StyledGalleryViewerMoreItemsIndicator, {
-  onClick: () => onClick(fileItem)
-}, /*#__PURE__*/_react.default.createElement("p", null, `+ ${remainingItemsLength - 3}`)));
+}) => {
+  const handleClick = (0, _react.useCallback)(() => onClick(fileItem), [fileItem, onClick]);
+  return /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.StyledGalleryViewerItem, null, /*#__PURE__*/_react.default.createElement(_MediaContent.default, {
+    file: fileItem.file,
+    onClick: handleClick,
+    ratio: ratio,
+    shouldLoadImages: shouldLoadImages
+  }), remainingItemsLength && /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.StyledGalleryViewerMoreItemsIndicator, {
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement("p", null, `+ ${remainingItemsLength - 3}`)));
+};
 GalleryViewerItem.displayName = '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","_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":[]}
+{"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","handleClick","useCallback","createElement","StyledGalleryViewerItem","file","StyledGalleryViewerMoreItemsIndicator","displayName","_default","exports","memo"],"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,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,KAAK;EACF,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAMF,OAAO,CAACJ,QAAQ,CAAC,EAAE,CAACA,QAAQ,EAAEI,OAAO,CAAC,CAAC;EAE7E,oBACI9B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,kBAAA,CAAA6B,uBAAuB,qBACpBlC,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC9B,aAAA,CAAAK,OAAY;IACT2B,IAAI,EAAET,QAAQ,CAACS,IAAK;IACpBL,OAAO,EAAEC,WAAY;IACrBH,KAAK,EAAEA,KAAM;IACbD,gBAAgB,EAAEA;EAAiB,CACtC,CAAC,EACDE,oBAAoB,iBACjB7B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,kBAAA,CAAA+B,qCAAqC;IAACN,OAAO,EAAEC;EAAY,gBACxD/B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,YAAI,KAAKJ,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAAC;AAElC,CAAC;AAEDJ,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,gBAErC,IAAAgC,WAAI,EAACf,iBAAiB,CAAC","ignoreList":[]}

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

@@ -3,10 +3,9 @@
 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;
+exports.MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS = exports.MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS = exports.MEDIA_CONTENT_PREVIEW_BLUR = exports.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = void 0;
+const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = exports.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 180;
+const MEDIA_CONTENT_PREVIEW_BLUR = exports.MEDIA_CONTENT_PREVIEW_BLUR = 'blur(6px)';
+const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS = exports.MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS = 100;
+const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS = exports.MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS = 200;
 //# sourceMappingURL=MediaContent.constants.js.map

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

@@ -1 +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":[]}
+{"version":3,"file":"MediaContent.constants.js","names":["MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","exports","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":";;;;;;AAAO,MAAMA,oCAAoC,GAAAC,OAAA,CAAAD,oCAAA,GAAG,GAAG;AAChD,MAAME,0BAA0B,GAAAD,OAAA,CAAAC,0BAAA,GAAG,WAAW;AAC9C,MAAMC,0CAA0C,GAAAF,OAAA,CAAAE,0CAAA,GAAG,GAAG;AACtD,MAAMC,6CAA6C,GAAAH,OAAA,CAAAG,6CAAA,GAAG,GAAG","ignoreList":[]}

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

@@ -24,19 +24,44 @@ const MediaContent = ({
   const sourceKey = (0, _MediaContent2.getMediaSourceUrl)(file);
   const previewSourceUrl = (0, _MediaContent2.getMediaPreviewUrl)(file, previewUrl);
   const [hasLoadedFinalMedia, setHasLoadedFinalMedia] = (0, _react.useState)(false);
+  const [resolvedFinalSourceUrl, setResolvedFinalSourceUrl] = (0, _react.useState)();
+  const [containerElement, setContainerElement] = (0, _react.useState)(null);
   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)(() => {
+  const finalSourceUrl = isVideo ? sourceKey : resolvedFinalSourceUrl;
+  const shouldHidePreview = shouldLoadImages && hasLoadedFinalMedia;
+  const previewLayerStyle = {
+    opacity: shouldHidePreview ? 0 : 1,
+    filter: shouldHidePreview ? 'blur(0px)' : undefined
+  };
+  const finalMediaStyle = {
+    opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,
+    transition: `opacity ${_MediaContent3.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease`
+  };
+  (0, _react.useEffect)(() => {
     setHasLoadedFinalMedia(false);
   }, [sourceKey]);
-  (0, _react.useLayoutEffect)(() => {
-    var _imageRef$current, _videoRef$current;
+  (0, _react.useEffect)(() => {
     if (!shouldLoadImages) {
+      setResolvedFinalSourceUrl(undefined);
+      return;
+    }
+    if (isVideo) {
+      setResolvedFinalSourceUrl(sourceKey);
+      return;
+    }
+    if (!renderSize) {
+      setResolvedFinalSourceUrl(undefined);
+      return;
+    }
+    setResolvedFinalSourceUrl((0, _MediaContent2.getResponsiveImageServiceUrl)(sourceKey, renderSize, devicePixelRatio));
+  }, [devicePixelRatio, isVideo, renderSize, shouldLoadImages, sourceKey]);
+  (0, _react.useEffect)(() => {
+    var _imageRef$current, _videoRef$current;
+    if (!shouldLoadImages || !finalSourceUrl) {
       return;
     }
     if (!isVideo && (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 && _imageRef$current.complete && imageRef.current.naturalWidth > 0) {
@@ -58,9 +83,7 @@ const MediaContent = ({
       src: displayPreviewUrl,
       alt: "",
       "aria-hidden": "true",
-      style: {
-        opacity: shouldLoadImages && hasLoadedFinalMedia ? 0 : 1
-      }
+      style: previewLayerStyle
     }), /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentPlayIcon, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
       size: playIconSize,
       icons: ['fa fa-play']
@@ -69,12 +92,7 @@ const MediaContent = ({
       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`
-      }
+      style: finalMediaStyle
     }, /*#__PURE__*/_react.default.createElement("source", {
       src: finalSourceUrl,
       type: "video/mp4"
@@ -89,21 +107,14 @@ const MediaContent = ({
     src: displayPreviewUrl,
     alt: "",
     "aria-hidden": "true",
-    style: {
-      opacity: shouldLoadImages && hasLoadedFinalMedia ? 0 : 1
-    }
+    style: previewLayerStyle
   }), 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`
-    }
+    style: finalMediaStyle
   }));
 };
 MediaContent.displayName = 'MediaContent';

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

@@ -1 +1 @@
-{"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":[]}
+{"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","resolvedFinalSourceUrl","setResolvedFinalSourceUrl","containerElement","setContainerElement","imageRef","useRef","videoRef","renderSize","useMediaContentSize","devicePixelRatio","window","Number","isFinite","displayPreviewUrl","useMemo","getResponsiveImageServiceUrl","undefined","finalSourceUrl","shouldHidePreview","previewLayerStyle","opacity","filter","finalMediaStyle","transition","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","useEffect","_imageRef$current","_videoRef$current","current","complete","naturalWidth","readyState","shouldRenderFinalImage","Boolean","shouldShowPreview","createElement","StyledMediaContentVideoWrapper","ref","$ratio","StyledMediaContentPreviewImage","draggable","src","alt","style","StyledMediaContentPlayIcon","Icon","size","icons","StyledMediaContentVideo","poster","preload","onLoadedData","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, useEffect, 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 { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS } 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 [resolvedFinalSourceUrl, setResolvedFinalSourceUrl] = useState<string>();\n    const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);\n    const imageRef = useRef<HTMLImageElement>(null);\n    const videoRef = useRef<HTMLVideoElement>(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    const displayPreviewUrl = useMemo(\n        () =>\n            previewSourceUrl\n                ? getResponsiveImageServiceUrl(previewSourceUrl, renderSize, devicePixelRatio)\n                : undefined,\n        [devicePixelRatio, previewSourceUrl, renderSize],\n    );\n    const finalSourceUrl = isVideo ? sourceKey : resolvedFinalSourceUrl;\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    useEffect(() => {\n        setHasLoadedFinalMedia(false);\n    }, [sourceKey]);\n\n    useEffect(() => {\n        if (!shouldLoadImages) {\n            setResolvedFinalSourceUrl(undefined);\n            return;\n        }\n\n        if (isVideo) {\n            setResolvedFinalSourceUrl(sourceKey);\n            return;\n        }\n\n        if (!renderSize) {\n            setResolvedFinalSourceUrl(undefined);\n            return;\n        }\n\n        setResolvedFinalSourceUrl(\n            getResponsiveImageServiceUrl(sourceKey, renderSize, devicePixelRatio),\n        );\n    }, [devicePixelRatio, isVideo, renderSize, shouldLoadImages, sourceKey]);\n\n    useEffect(() => {\n        if (!shouldLoadImages || !finalSourceUrl) {\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={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 ref={setContainerElement} 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/cjs/components/media-content/MediaContent.styles.js

@@ -43,12 +43,12 @@ const StyledMediaContentPreviewImage = exports.StyledMediaContentPreviewImage =
         rgba(${({
   theme
 }) => theme['009-rgb']}, 0.08) inset;
-    z-index: 1;
+    z-index: 2;
     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;
+        filter ${_MediaContent.MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS}ms ease
+            ${_MediaContent.MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS}ms;
 `;
 const StyledMediaContentImage = exports.StyledMediaContentImage = (0, _styledComponents.default)(StyledMediaContentLayer)`
     background-color: ${({
@@ -58,7 +58,7 @@ const StyledMediaContentImage = exports.StyledMediaContentImage = (0, _styledCom
         rgba(${({
   theme
 }) => theme['009-rgb']}, 0.08) inset;
-    z-index: 2;
+    z-index: 1;
     transition: opacity ${_MediaContent.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;
 `;
 const StyledMediaContentVideo = exports.StyledMediaContentVideo = _styledComponents.default.video`
@@ -75,10 +75,11 @@ const StyledMediaContentVideo = exports.StyledMediaContentVideo = _styledCompone
     height: 100%;
     object-fit: cover;
     pointer-events: none;
+    z-index: 1;
 `;
 const StyledMediaContentPlayIcon = exports.StyledMediaContentPlayIcon = _styledComponents.default.div`
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

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

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_MediaContent","e","__esModule","default","StyledMediaContentVideoWrapper","exports","styled","div","$ratio","StyledMediaContentImageWrapper","StyledMediaContentLayer","img","StyledMediaContentPreviewImage","theme","MEDIA_CONTENT_PREVIEW_BLUR","MEDIA_CONTENT_PREVIEW_SCALE","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","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_SCALE,\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: 1;\n    filter: ${MEDIA_CONTENT_PREVIEW_BLUR};\n    transform: scale(${MEDIA_CONTENT_PREVIEW_SCALE});\n    transition:\n        opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease,\n        filter ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;\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: 2;\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`;\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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAIkC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3B,MAAMG,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,8BAA8B,GAAAJ,OAAA,CAAAI,8BAAA,GAAGH,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMD,MAAME,uBAAuB,GAAGJ,yBAAM,CAACK,GAAiC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,8BAA8B,GAAAP,OAAA,CAAAO,8BAAA,GAAG,IAAAN,yBAAM,EAACI,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,cAAcC,wCAA0B;AACxC,uBAAuBC,yCAA2B;AAClD;AACA,kBAAkBC,kDAAoC;AACtD,iBAAiBA,kDAAoC;AACrD,CAAC;AAEM,MAAMC,uBAAuB,GAAAZ,OAAA,CAAAY,uBAAA,GAAG,IAAAX,yBAAM,EAACI,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,0BAA0BG,kDAAoC;AAC9D,CAAC;AAEM,MAAME,uBAAuB,GAAAb,OAAA,CAAAa,uBAAA,GAAGZ,yBAAM,CAACa,KAAmC;AACjF,wBAAwB,CAAC;EAAEN;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,CAAC;AAEM,MAAMO,0BAA0B,GAAAf,OAAA,CAAAe,0BAAA,GAAGd,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MediaContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_MediaContent","e","__esModule","default","StyledMediaContentVideoWrapper","exports","styled","div","$ratio","StyledMediaContentImageWrapper","StyledMediaContentLayer","img","StyledMediaContentPreviewImage","theme","MEDIA_CONTENT_PREVIEW_BLUR","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS","MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAKkC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3B,MAAMG,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,8BAA8B,GAAAJ,OAAA,CAAAI,8BAAA,GAAGH,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMD,MAAME,uBAAuB,GAAGJ,yBAAM,CAACK,GAAiC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,8BAA8B,GAAAP,OAAA,CAAAO,8BAAA,GAAG,IAAAN,yBAAM,EAACI,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,cAAcC,wCAA0B;AACxC;AACA,kBAAkBC,kDAAoC;AACtD,iBAAiBC,2DAA6C;AAC9D,cAAcC,wDAA0C;AACxD,CAAC;AAEM,MAAMC,uBAAuB,GAAAb,OAAA,CAAAa,uBAAA,GAAG,IAAAZ,yBAAM,EAACI,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,0BAA0BE,kDAAoC;AAC9D,CAAC;AAEM,MAAMI,uBAAuB,GAAAd,OAAA,CAAAc,uBAAA,GAAGb,yBAAM,CAACc,KAAmC;AACjF,wBAAwB,CAAC;EAAEP;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;AAEM,MAAMQ,0BAA0B,GAAAhB,OAAA,CAAAgB,0BAAA,GAAGf,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -21,14 +21,22 @@ const getMediaPreviewUrl = (file, previewUrl) => {
   }
   return (_file$meta = file.meta) === null || _file$meta === void 0 ? void 0 : _file$meta.preview;
 };
+
+/**
+ * Checks whether the given URL belongs to the chayns image service.
+ */
 exports.getMediaPreviewUrl = getMediaPreviewUrl;
 const isImageServiceUrl = url => {
   try {
     return IMAGE_SERVICE_ORIGINS.has(new URL(url).origin);
-  } catch (_) {
+  } catch {
     return false;
   }
 };
+
+/**
+ * Detects whether the given image-service URL already contains resize parameters.
+ */
 exports.isImageServiceUrl = isImageServiceUrl;
 const hasImageServiceTransformParameters = url => {
   if (!isImageServiceUrl(url)) {
@@ -47,17 +55,21 @@ const hasImageServiceTransformParameters = url => {
       return false;
     }
     return parameterSegment.split('-').every(parameter => IMAGE_SERVICE_PARAM_PATTERN.test(parameter));
-  } catch (_) {
+  } catch {
     return false;
   }
 };
 exports.hasImageServiceTransformParameters = hasImageServiceTransformParameters;
-const buildImageServiceParameterSegment = (size, devicePixelRatio) => {
+const getImageServiceParameterSegment = (size, devicePixelRatio) => {
   const scaleFactor = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
   const width = Math.max(1, Math.ceil(size.width * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN));
   const height = Math.max(1, Math.ceil(size.height * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN));
   return `w${width}-h${height}`;
 };
+
+/**
+ * Expands a chayns image-service URL to a display-appropriate size when no transform is present.
+ */
 const getResponsiveImageServiceUrl = (url, size, devicePixelRatio = 1) => {
   if (!size || hasImageServiceTransformParameters(url) || !isImageServiceUrl(url)) {
     return url;
@@ -72,11 +84,10 @@ const getResponsiveImageServiceUrl = (url, size, devicePixelRatio = 1) => {
     const extensionIndex = fileName.lastIndexOf('.');
     const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';
     const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;
-    const parameterSegment = buildImageServiceParameterSegment(size, devicePixelRatio);
-    pathSegments.push(`${fileBaseName}_${parameterSegment}${extension}`);
+    pathSegments.push(`${fileBaseName}_${getImageServiceParameterSegment(size, devicePixelRatio)}${extension}`);
     urlObject.pathname = pathSegments.join('/');
     return urlObject.toString();
-  } catch (_) {
+  } catch {
     return url;
   }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.utils.js","names":["IMAGE_SERVICE_ORIGINS","Set","IMAGE_SERVICE_PARAM_PATTERN","IMAGE_SERVICE_RESIZE_OVERSCAN","isVideoFile","file","exports","getMediaSourceUrl","url","replace","getMediaPreviewUrl","previewUrl","_file$meta","thumbnailUrl","meta","preview","isImageServiceUrl","has","URL","origin","_","hasImageServiceTransformParameters","urlObject","fileName","pathname","split","pop","extensionIndex","lastIndexOf","nameWithoutExtension","slice","parameterSegment","every","parameter","test","buildImageServiceParameterSegment","size","devicePixelRatio","scaleFactor","Number","isFinite","width","Math","max","ceil","height","getResponsiveImageServiceUrl","pathSegments","extension","fileBaseName","push","join","toString"],"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 type MediaContentSize = {\n    height: number;\n    width: number;\n};\n\nconst IMAGE_SERVICE_ORIGINS = new Set(['https://tsimg.cloud', 'https://tsimg.space']);\nconst IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale|crop|shortedgescale)|[whsbd]\\d+)$/i;\nconst IMAGE_SERVICE_RESIZE_OVERSCAN = 1.25;\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\nexport const isImageServiceUrl = (url: string): boolean => {\n    try {\n        return IMAGE_SERVICE_ORIGINS.has(new URL(url).origin);\n    } catch (_) {\n        return false;\n    }\n};\n\nexport const hasImageServiceTransformParameters = (url: string): boolean => {\n    if (!isImageServiceUrl(url)) {\n        return false;\n    }\n\n    try {\n        const urlObject = new URL(url);\n        const fileName = urlObject.pathname.split('/').pop();\n\n        if (!fileName) {\n            return false;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const nameWithoutExtension =\n            extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n        const parameterSegment = nameWithoutExtension.split('_').pop();\n\n        if (!parameterSegment || parameterSegment === nameWithoutExtension) {\n            return false;\n        }\n\n        return parameterSegment\n            .split('-')\n            .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter));\n    } catch (_) {\n        return false;\n    }\n};\n\nconst buildImageServiceParameterSegment = (size: MediaContentSize, devicePixelRatio: number) => {\n    const scaleFactor =\n        Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;\n    const width = Math.max(1, Math.ceil(size.width * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN));\n    const height = Math.max(\n        1,\n        Math.ceil(size.height * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN),\n    );\n\n    return `w${width}-h${height}`;\n};\n\nexport const getResponsiveImageServiceUrl = (\n    url: string,\n    size?: MediaContentSize,\n    devicePixelRatio = 1,\n): string => {\n    if (!size || hasImageServiceTransformParameters(url) || !isImageServiceUrl(url)) {\n        return url;\n    }\n\n    try {\n        const urlObject = new URL(url);\n        const pathSegments = urlObject.pathname.split('/');\n        const fileName = pathSegments.pop();\n\n        if (!fileName) {\n            return url;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n        const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n        const parameterSegment = buildImageServiceParameterSegment(size, devicePixelRatio);\n\n        pathSegments.push(`${fileBaseName}_${parameterSegment}${extension}`);\n        urlObject.pathname = pathSegments.join('/');\n\n        return urlObject.toString();\n    } catch (_) {\n        return url;\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MediaContent.utils.js","names":["IMAGE_SERVICE_ORIGINS","Set","IMAGE_SERVICE_PARAM_PATTERN","IMAGE_SERVICE_RESIZE_OVERSCAN","isVideoFile","file","exports","getMediaSourceUrl","url","replace","getMediaPreviewUrl","previewUrl","_file$meta","thumbnailUrl","meta","preview","isImageServiceUrl","has","URL","origin","hasImageServiceTransformParameters","urlObject","fileName","pathname","split","pop","extensionIndex","lastIndexOf","nameWithoutExtension","slice","parameterSegment","every","parameter","test","getImageServiceParameterSegment","size","devicePixelRatio","scaleFactor","Number","isFinite","width","Math","max","ceil","height","getResponsiveImageServiceUrl","pathSegments","extension","fileBaseName","push","join","toString"],"sources":["../../../../src/components/media-content/MediaContent.utils.ts"],"sourcesContent":["import type { FileItem, Video } from '@chayns-components/core';\n\nexport type GalleryMediaFile = FileItem['file'];\nexport type MediaContentSize = {\n    height: number;\n    width: number;\n};\n\nconst IMAGE_SERVICE_ORIGINS = new Set(['https://tsimg.cloud', 'https://tsimg.space']);\nconst IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale|crop|shortedgescale)|[whsbd]\\d+)$/i;\nconst IMAGE_SERVICE_RESIZE_OVERSCAN = 1.25;\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\n/**\n * Checks whether the given URL belongs to the chayns image service.\n */\nexport const isImageServiceUrl = (url: string): boolean => {\n    try {\n        return IMAGE_SERVICE_ORIGINS.has(new URL(url).origin);\n    } catch {\n        return false;\n    }\n};\n\n/**\n * Detects whether the given image-service URL already contains resize parameters.\n */\nexport const hasImageServiceTransformParameters = (url: string): boolean => {\n    if (!isImageServiceUrl(url)) {\n        return false;\n    }\n\n    try {\n        const urlObject = new URL(url);\n        const fileName = urlObject.pathname.split('/').pop();\n\n        if (!fileName) {\n            return false;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const nameWithoutExtension =\n            extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n        const parameterSegment = nameWithoutExtension.split('_').pop();\n\n        if (!parameterSegment || parameterSegment === nameWithoutExtension) {\n            return false;\n        }\n\n        return parameterSegment\n            .split('-')\n            .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter));\n    } catch {\n        return false;\n    }\n};\n\nconst getImageServiceParameterSegment = (size: MediaContentSize, devicePixelRatio: number) => {\n    const scaleFactor =\n        Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;\n    const width = Math.max(1, Math.ceil(size.width * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN));\n    const height = Math.max(\n        1,\n        Math.ceil(size.height * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN),\n    );\n\n    return `w${width}-h${height}`;\n};\n\n/**\n * Expands a chayns image-service URL to a display-appropriate size when no transform is present.\n */\nexport const getResponsiveImageServiceUrl = (\n    url: string,\n    size?: MediaContentSize,\n    devicePixelRatio = 1,\n): string => {\n    if (!size || hasImageServiceTransformParameters(url) || !isImageServiceUrl(url)) {\n        return url;\n    }\n\n    try {\n        const urlObject = new URL(url);\n        const pathSegments = urlObject.pathname.split('/');\n        const fileName = pathSegments.pop();\n\n        if (!fileName) {\n            return url;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n        const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n\n        pathSegments.push(\n            `${fileBaseName}_${getImageServiceParameterSegment(size, devicePixelRatio)}${extension}`,\n        );\n        urlObject.pathname = pathSegments.join('/');\n\n        return urlObject.toString();\n    } catch {\n        return url;\n    }\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -22,6 +22,10 @@ const getSizeFromElement = element => {
     height
   };
 };
+
+/**
+ * Measures the media tile size so responsive image-service URLs can be generated without layout shifts.
+ */
 const useMediaContentSize = element => {
   const [size, setSize] = (0, _react.useState)();
   (0, _react.useEffect)(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"useMediaContentSize.js","names":["_react","require","MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS","getSizeFromElement","element","undefined","width","height","getBoundingClientRect","useMediaContentSize","size","setSize","useState","useEffect","timeoutId","updateSize","nextSize","clearTimeout","setTimeout","ResizeObserver","resizeObserver","observe","disconnect","_default","exports","default"],"sources":["../../../../src/components/media-content/useMediaContentSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { MediaContentSize } from './MediaContent.utils';\n\nconst MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS = 100;\n\nconst getSizeFromElement = (element: HTMLElement | null): MediaContentSize | undefined => {\n    if (!element) {\n        return undefined;\n    }\n\n    const { width, height } = element.getBoundingClientRect();\n\n    if (width <= 0 || height <= 0) {\n        return undefined;\n    }\n\n    return {\n        width,\n        height,\n    };\n};\n\nconst useMediaContentSize = (element: HTMLElement | null) => {\n    const [size, setSize] = useState<MediaContentSize>();\n\n    useEffect(() => {\n        if (!element) {\n            setSize(undefined);\n            return undefined;\n        }\n\n        let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n        const updateSize = () => {\n            const nextSize = getSizeFromElement(element);\n\n            if (!nextSize) {\n                setSize(undefined);\n                return;\n            }\n\n            if (timeoutId) {\n                clearTimeout(timeoutId);\n            }\n\n            timeoutId = setTimeout(() => {\n                setSize(nextSize);\n            }, MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS);\n        };\n\n        updateSize();\n\n        if (typeof ResizeObserver === 'undefined') {\n            return () => {\n                if (timeoutId) {\n                    clearTimeout(timeoutId);\n                }\n            };\n        }\n\n        const resizeObserver = new ResizeObserver(() => {\n            updateSize();\n        });\n\n        resizeObserver.observe(element);\n\n        return () => {\n            resizeObserver.disconnect();\n\n            if (timeoutId) {\n                clearTimeout(timeoutId);\n            }\n        };\n    }, [element]);\n\n    return size;\n};\n\nexport default useMediaContentSize;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGA,MAAMC,qCAAqC,GAAG,GAAG;AAEjD,MAAMC,kBAAkB,GAAIC,OAA2B,IAAmC;EACtF,IAAI,CAACA,OAAO,EAAE;IACV,OAAOC,SAAS;EACpB;EAEA,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGH,OAAO,CAACI,qBAAqB,CAAC,CAAC;EAEzD,IAAIF,KAAK,IAAI,CAAC,IAAIC,MAAM,IAAI,CAAC,EAAE;IAC3B,OAAOF,SAAS;EACpB;EAEA,OAAO;IACHC,KAAK;IACLC;EACJ,CAAC;AACL,CAAC;AAED,MAAME,mBAAmB,GAAIL,OAA2B,IAAK;EACzD,MAAM,CAACM,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAmB,CAAC;EAEpD,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACT,OAAO,EAAE;MACVO,OAAO,CAACN,SAAS,CAAC;MAClB,OAAOA,SAAS;IACpB;IAEA,IAAIS,SAAoD;IAExD,MAAMC,UAAU,GAAGA,CAAA,KAAM;MACrB,MAAMC,QAAQ,GAAGb,kBAAkB,CAACC,OAAO,CAAC;MAE5C,IAAI,CAACY,QAAQ,EAAE;QACXL,OAAO,CAACN,SAAS,CAAC;QAClB;MACJ;MAEA,IAAIS,SAAS,EAAE;QACXG,YAAY,CAACH,SAAS,CAAC;MAC3B;MAEAA,SAAS,GAAGI,UAAU,CAAC,MAAM;QACzBP,OAAO,CAACK,QAAQ,CAAC;MACrB,CAAC,EAAEd,qCAAqC,CAAC;IAC7C,CAAC;IAEDa,UAAU,CAAC,CAAC;IAEZ,IAAI,OAAOI,cAAc,KAAK,WAAW,EAAE;MACvC,OAAO,MAAM;QACT,IAAIL,SAAS,EAAE;UACXG,YAAY,CAACH,SAAS,CAAC;QAC3B;MACJ,CAAC;IACL;IAEA,MAAMM,cAAc,GAAG,IAAID,cAAc,CAAC,MAAM;MAC5CJ,UAAU,CAAC,CAAC;IAChB,CAAC,CAAC;IAEFK,cAAc,CAACC,OAAO,CAACjB,OAAO,CAAC;IAE/B,OAAO,MAAM;MACTgB,cAAc,CAACE,UAAU,CAAC,CAAC;MAE3B,IAAIR,SAAS,EAAE;QACXG,YAAY,CAACH,SAAS,CAAC;MAC3B;IACJ,CAAC;EACL,CAAC,EAAE,CAACV,OAAO,CAAC,CAAC;EAEb,OAAOM,IAAI;AACf,CAAC;AAAC,IAAAa,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEahB,mBAAmB","ignoreList":[]}
+{"version":3,"file":"useMediaContentSize.js","names":["_react","require","MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS","getSizeFromElement","element","undefined","width","height","getBoundingClientRect","useMediaContentSize","size","setSize","useState","useEffect","timeoutId","updateSize","nextSize","clearTimeout","setTimeout","ResizeObserver","resizeObserver","observe","disconnect","_default","exports","default"],"sources":["../../../../src/components/media-content/useMediaContentSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { MediaContentSize } from './MediaContent.utils';\n\nconst MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS = 100;\n\nconst getSizeFromElement = (element: HTMLElement | null): MediaContentSize | undefined => {\n    if (!element) {\n        return undefined;\n    }\n\n    const { width, height } = element.getBoundingClientRect();\n\n    if (width <= 0 || height <= 0) {\n        return undefined;\n    }\n\n    return {\n        width,\n        height,\n    };\n};\n\n/**\n * Measures the media tile size so responsive image-service URLs can be generated without layout shifts.\n */\nconst useMediaContentSize = (element: HTMLElement | null) => {\n    const [size, setSize] = useState<MediaContentSize>();\n\n    useEffect(() => {\n        if (!element) {\n            setSize(undefined);\n            return undefined;\n        }\n\n        let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n        const updateSize = () => {\n            const nextSize = getSizeFromElement(element);\n\n            if (!nextSize) {\n                setSize(undefined);\n                return;\n            }\n\n            if (timeoutId) {\n                clearTimeout(timeoutId);\n            }\n\n            timeoutId = setTimeout(() => {\n                setSize(nextSize);\n            }, MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS);\n        };\n\n        updateSize();\n\n        if (typeof ResizeObserver === 'undefined') {\n            return () => {\n                if (timeoutId) {\n                    clearTimeout(timeoutId);\n                }\n            };\n        }\n\n        const resizeObserver = new ResizeObserver(() => {\n            updateSize();\n        });\n\n        resizeObserver.observe(element);\n\n        return () => {\n            resizeObserver.disconnect();\n\n            if (timeoutId) {\n                clearTimeout(timeoutId);\n            }\n        };\n    }, [element]);\n\n    return size;\n};\n\nexport default useMediaContentSize;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGA,MAAMC,qCAAqC,GAAG,GAAG;AAEjD,MAAMC,kBAAkB,GAAIC,OAA2B,IAAmC;EACtF,IAAI,CAACA,OAAO,EAAE;IACV,OAAOC,SAAS;EACpB;EAEA,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGH,OAAO,CAACI,qBAAqB,CAAC,CAAC;EAEzD,IAAIF,KAAK,IAAI,CAAC,IAAIC,MAAM,IAAI,CAAC,EAAE;IAC3B,OAAOF,SAAS;EACpB;EAEA,OAAO;IACHC,KAAK;IACLC;EACJ,CAAC;AACL,CAAC;;AAED;AACA;AACA;AACA,MAAME,mBAAmB,GAAIL,OAA2B,IAAK;EACzD,MAAM,CAACM,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAmB,CAAC;EAEpD,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACT,OAAO,EAAE;MACVO,OAAO,CAACN,SAAS,CAAC;MAClB,OAAOA,SAAS;IACpB;IAEA,IAAIS,SAAoD;IAExD,MAAMC,UAAU,GAAGA,CAAA,KAAM;MACrB,MAAMC,QAAQ,GAAGb,kBAAkB,CAACC,OAAO,CAAC;MAE5C,IAAI,CAACY,QAAQ,EAAE;QACXL,OAAO,CAACN,SAAS,CAAC;QAClB;MACJ;MAEA,IAAIS,SAAS,EAAE;QACXG,YAAY,CAACH,SAAS,CAAC;MAC3B;MAEAA,SAAS,GAAGI,UAAU,CAAC,MAAM;QACzBP,OAAO,CAACK,QAAQ,CAAC;MACrB,CAAC,EAAEd,qCAAqC,CAAC;IAC7C,CAAC;IAEDa,UAAU,CAAC,CAAC;IAEZ,IAAI,OAAOI,cAAc,KAAK,WAAW,EAAE;MACvC,OAAO,MAAM;QACT,IAAIL,SAAS,EAAE;UACXG,YAAY,CAACH,SAAS,CAAC;QAC3B;MACJ,CAAC;IACL;IAEA,MAAMM,cAAc,GAAG,IAAID,cAAc,CAAC,MAAM;MAC5CJ,UAAU,CAAC,CAAC;IAChB,CAAC,CAAC;IAEFK,cAAc,CAACC,OAAO,CAACjB,OAAO,CAAC;IAE/B,OAAO,MAAM;MACTgB,cAAc,CAACE,UAAU,CAAC,CAAC;MAE3B,IAAIR,SAAS,EAAE;QACXG,YAAY,CAACH,SAAS,CAAC;MAC3B;IACJ,CAAC;EACL,CAAC,EAAE,CAACV,OAAO,CAAC,CAAC;EAEb,OAAOM,IAAI;AACf,CAAC;AAAC,IAAAa,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEahB,mBAAmB","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 import GalleryViewerItem from './gallery-viewer-item/GalleryViewerItem';
 import { StyledGalleryViewer, StyledGalleryViewerItemWrapper } from './GalleryViewer.styles';
 import { getGalleryRatio, getGalleryViewerKey, getReadOnlyItemRatio, openKnownFiles } from '../../utils/gallery';
@@ -34,5 +34,5 @@ const GalleryViewer = ({
   }))));
 };
 GalleryViewer.displayName = 'GalleryViewer';
-export default GalleryViewer;
+export default /*#__PURE__*/memo(GalleryViewer);
 //# sourceMappingURL=GalleryViewer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewer.js","names":["React","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, 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":"AACA,OAAOA,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAC9C,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,oBACIV,KAAA,CAAAuB,aAAA,CAACpB,mBAAmB,qBAChBH,KAAA,CAAAuB,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,kBAC1B7B,KAAA,CAAAuB,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,eAAevB,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/gallery-viewer-item/GalleryViewerItem.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import MediaContent from '../../media-content/MediaContent';
 import { StyledGalleryViewerItem, StyledGalleryViewerMoreItemsIndicator } from './GalleryViewerItem.styles';
 const GalleryViewerItem = ({
@@ -7,14 +7,17 @@ const GalleryViewerItem = ({
   ratio = 1,
   remainingItemsLength,
   onClick
-}) => /*#__PURE__*/React.createElement(StyledGalleryViewerItem, null, /*#__PURE__*/React.createElement(MediaContent, {
-  file: fileItem.file,
-  onClick: () => onClick(fileItem),
-  ratio: ratio,
-  shouldLoadImages: shouldLoadImages
-}), 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 /*#__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","memo","MediaContent","StyledGalleryViewerItem","StyledGalleryViewerMoreItemsIndicator","GalleryViewerItem","fileItem","shouldLoadImages","ratio","remainingItemsLength","onClick","createElement","file","displayName"],"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,OAAOA,KAAK,IAAQC,IAAI,QAAQ,OAAO;AACvC,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,kBACGV,KAAA,CAAAW,aAAA,CAACR,uBAAuB,qBACpBH,KAAA,CAAAW,aAAA,CAACT,YAAY;EACTU,IAAI,EAAEN,QAAQ,CAACM,IAAK;EACpBF,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACJ,QAAQ,CAAE;EACjCE,KAAK,EAAEA,KAAM;EACbD,gBAAgB,EAAEA;AAAiB,CACtC,CAAC,EACDE,oBAAoB,iBACjBT,KAAA,CAAAW,aAAA,CAACP,qCAAqC;EAACM,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACJ,QAAQ;AAAE,gBACpEN,KAAA,CAAAW,aAAA,YAAI,KAAKF,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAC5B;AAEDJ,iBAAiB,CAACQ,WAAW,GAAG,mBAAmB;AAEnD,4BAAeZ,IAAI,CAACI,iBAAiB,CAAC","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/media-content/MediaContent.constants.js

@@ -1,6 +1,5 @@
-export const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 200;
-export const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS = 100;
-export const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS = 200;
-export const MEDIA_CONTENT_PREVIEW_BLUR = 'blur(16px)';
-export const MEDIA_CONTENT_PREVIEW_SCALE = 1.05;
+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

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.constants.js","names":["MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","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":"AAAA,OAAO,MAAMA,oCAAoC,GAAG,GAAG;AACvD,OAAO,MAAMC,wCAAwC,GAAG,GAAG;AAC3D,OAAO,MAAMC,2CAA2C,GAAG,GAAG;AAC9D,OAAO,MAAMC,0BAA0B,GAAG,YAAY;AACtD,OAAO,MAAMC,2BAA2B,GAAG,IAAI","ignoreList":[]}
+{"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,8 +1,8 @@
 import { Icon } from '@chayns-components/core';
-import React, { memo, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { StyledMediaContentImage, StyledMediaContentImageWrapper, StyledMediaContentPlayIcon, StyledMediaContentPreviewImage, StyledMediaContentVideo, StyledMediaContentVideoWrapper } from './MediaContent.styles';
 import { getMediaPreviewUrl, getMediaSourceUrl, getResponsiveImageServiceUrl, isVideoFile } from './MediaContent.utils';
-import { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS, MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS, MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS, MEDIA_CONTENT_PREVIEW_BLUR, MEDIA_CONTENT_PREVIEW_SCALE } from './MediaContent.constants';
+import { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS } from './MediaContent.constants';
 import useMediaContentSize from './useMediaContentSize';
 const MediaContent = ({
   file,
@@ -16,18 +16,43 @@ const MediaContent = ({
   const sourceKey = getMediaSourceUrl(file);
   const previewSourceUrl = getMediaPreviewUrl(file, previewUrl);
   const [hasLoadedFinalMedia, setHasLoadedFinalMedia] = useState(false);
+  const [resolvedFinalSourceUrl, setResolvedFinalSourceUrl] = useState();
+  const [containerElement, setContainerElement] = useState(null);
   const imageRef = useRef(null);
   const videoRef = useRef(null);
-  const [containerElement, setContainerElement] = useState(null);
   const renderSize = useMediaContentSize(containerElement);
   const devicePixelRatio = typeof window !== 'undefined' && Number.isFinite(window.devicePixelRatio) && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
-  const finalSourceUrl = useMemo(() => isVideo ? sourceKey : getResponsiveImageServiceUrl(sourceKey, renderSize, devicePixelRatio), [devicePixelRatio, isVideo, renderSize, sourceKey]);
   const displayPreviewUrl = useMemo(() => previewSourceUrl ? getResponsiveImageServiceUrl(previewSourceUrl, renderSize, devicePixelRatio) : undefined, [devicePixelRatio, previewSourceUrl, renderSize]);
-  useLayoutEffect(() => {
+  const finalSourceUrl = isVideo ? sourceKey : resolvedFinalSourceUrl;
+  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`
+  };
+  useEffect(() => {
     setHasLoadedFinalMedia(false);
   }, [sourceKey]);
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!shouldLoadImages) {
+      setResolvedFinalSourceUrl(undefined);
+      return;
+    }
+    if (isVideo) {
+      setResolvedFinalSourceUrl(sourceKey);
+      return;
+    }
+    if (!renderSize) {
+      setResolvedFinalSourceUrl(undefined);
+      return;
+    }
+    setResolvedFinalSourceUrl(getResponsiveImageServiceUrl(sourceKey, renderSize, devicePixelRatio));
+  }, [devicePixelRatio, isVideo, renderSize, shouldLoadImages, sourceKey]);
+  useEffect(() => {
+    if (!shouldLoadImages || !finalSourceUrl) {
       return;
     }
     if (!isVideo && imageRef.current?.complete && imageRef.current.naturalWidth > 0) {
@@ -49,9 +74,7 @@ const MediaContent = ({
       src: displayPreviewUrl,
       alt: "",
       "aria-hidden": "true",
-      style: {
-        opacity: shouldLoadImages && hasLoadedFinalMedia ? 0 : 1
-      }
+      style: previewLayerStyle
     }), /*#__PURE__*/React.createElement(StyledMediaContentPlayIcon, null, /*#__PURE__*/React.createElement(Icon, {
       size: playIconSize,
       icons: ['fa fa-play']
@@ -60,12 +83,7 @@ const MediaContent = ({
       poster: displayPreviewUrl,
       preload: "metadata",
       onLoadedData: () => setHasLoadedFinalMedia(true),
-      style: {
-        filter: displayPreviewUrl && !hasLoadedFinalMedia ? MEDIA_CONTENT_PREVIEW_BLUR : 'none',
-        transform: displayPreviewUrl && !hasLoadedFinalMedia ? `scale(${MEDIA_CONTENT_PREVIEW_SCALE})` : 'none',
-        opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,
-        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`
-      }
+      style: finalMediaStyle
     }, /*#__PURE__*/React.createElement("source", {
       src: finalSourceUrl,
       type: "video/mp4"
@@ -80,21 +98,14 @@ const MediaContent = ({
     src: displayPreviewUrl,
     alt: "",
     "aria-hidden": "true",
-    style: {
-      opacity: shouldLoadImages && hasLoadedFinalMedia ? 0 : 1
-    }
+    style: previewLayerStyle
   }), shouldRenderFinalImage && /*#__PURE__*/React.createElement(StyledMediaContentImage, {
     ref: imageRef,
     draggable: false,
     src: finalSourceUrl,
     alt: "",
     onLoad: () => setHasLoadedFinalMedia(true),
-    style: {
-      filter: displayPreviewUrl && !hasLoadedFinalMedia ? MEDIA_CONTENT_PREVIEW_BLUR : 'none',
-      transform: displayPreviewUrl && !hasLoadedFinalMedia ? `scale(${MEDIA_CONTENT_PREVIEW_SCALE})` : 'none',
-      opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,
-      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`
-    }
+    style: finalMediaStyle
   }));
 };
 MediaContent.displayName = 'MediaContent';

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

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.js","names":["Icon","React","memo","useLayoutEffect","useMemo","useRef","useState","StyledMediaContentImage","StyledMediaContentImageWrapper","StyledMediaContentPlayIcon","StyledMediaContentPreviewImage","StyledMediaContentVideo","StyledMediaContentVideoWrapper","getMediaPreviewUrl","getMediaSourceUrl","getResponsiveImageServiceUrl","isVideoFile","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS","MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS","MEDIA_CONTENT_PREVIEW_BLUR","MEDIA_CONTENT_PREVIEW_SCALE","useMediaContentSize","MediaContent","file","previewUrl","ratio","onClick","shouldLoadImages","playIconSize","isVideo","sourceKey","previewSourceUrl","hasLoadedFinalMedia","setHasLoadedFinalMedia","imageRef","videoRef","containerElement","setContainerElement","renderSize","devicePixelRatio","window","Number","isFinite","finalSourceUrl","displayPreviewUrl","undefined","current","complete","naturalWidth","readyState","shouldRenderFinalImage","Boolean","shouldShowPreview","createElement","ref","$ratio","draggable","src","alt","style","opacity","size","icons","poster","preload","onLoadedData","filter","transform","transition","type","onLoad","displayName"],"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":[]}
+{"version":3,"file":"MediaContent.js","names":["Icon","React","memo","useEffect","useMemo","useRef","useState","StyledMediaContentImage","StyledMediaContentImageWrapper","StyledMediaContentPlayIcon","StyledMediaContentPreviewImage","StyledMediaContentVideo","StyledMediaContentVideoWrapper","getMediaPreviewUrl","getMediaSourceUrl","getResponsiveImageServiceUrl","isVideoFile","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","useMediaContentSize","MediaContent","file","previewUrl","ratio","onClick","shouldLoadImages","playIconSize","isVideo","sourceKey","previewSourceUrl","hasLoadedFinalMedia","setHasLoadedFinalMedia","resolvedFinalSourceUrl","setResolvedFinalSourceUrl","containerElement","setContainerElement","imageRef","videoRef","renderSize","devicePixelRatio","window","Number","isFinite","displayPreviewUrl","undefined","finalSourceUrl","shouldHidePreview","previewLayerStyle","opacity","filter","finalMediaStyle","transition","current","complete","naturalWidth","readyState","shouldRenderFinalImage","Boolean","shouldShowPreview","createElement","ref","$ratio","draggable","src","alt","style","size","icons","poster","preload","onLoadedData","type","onLoad","displayName"],"sources":["../../../../src/components/media-content/MediaContent.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC, memo, useEffect, 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 { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS } 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 [resolvedFinalSourceUrl, setResolvedFinalSourceUrl] = useState<string>();\n    const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);\n    const imageRef = useRef<HTMLImageElement>(null);\n    const videoRef = useRef<HTMLVideoElement>(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    const displayPreviewUrl = useMemo(\n        () =>\n            previewSourceUrl\n                ? getResponsiveImageServiceUrl(previewSourceUrl, renderSize, devicePixelRatio)\n                : undefined,\n        [devicePixelRatio, previewSourceUrl, renderSize],\n    );\n    const finalSourceUrl = isVideo ? sourceKey : resolvedFinalSourceUrl;\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    useEffect(() => {\n        setHasLoadedFinalMedia(false);\n    }, [sourceKey]);\n\n    useEffect(() => {\n        if (!shouldLoadImages) {\n            setResolvedFinalSourceUrl(undefined);\n            return;\n        }\n\n        if (isVideo) {\n            setResolvedFinalSourceUrl(sourceKey);\n            return;\n        }\n\n        if (!renderSize) {\n            setResolvedFinalSourceUrl(undefined);\n            return;\n        }\n\n        setResolvedFinalSourceUrl(\n            getResponsiveImageServiceUrl(sourceKey, renderSize, devicePixelRatio),\n        );\n    }, [devicePixelRatio, isVideo, renderSize, shouldLoadImages, sourceKey]);\n\n    useEffect(() => {\n        if (!shouldLoadImages || !finalSourceUrl) {\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={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 ref={setContainerElement} 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,5 +1,5 @@
 import styled from 'styled-components';
-import { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS, MEDIA_CONTENT_PREVIEW_BLUR, MEDIA_CONTENT_PREVIEW_SCALE } from './MediaContent.constants';
+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;
@@ -36,12 +36,12 @@ export const StyledMediaContentPreviewImage = styled(StyledMediaContentLayer)`
         rgba(${({
   theme
 }) => theme['009-rgb']}, 0.08) inset;
-    z-index: 1;
+    z-index: 2;
     filter: ${MEDIA_CONTENT_PREVIEW_BLUR};
-    transform: scale(${MEDIA_CONTENT_PREVIEW_SCALE});
     transition:
         opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease,
-        filter ${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: ${({
@@ -51,7 +51,7 @@ export const StyledMediaContentImage = styled(StyledMediaContentLayer)`
         rgba(${({
   theme
 }) => theme['009-rgb']}, 0.08) inset;
-    z-index: 2;
+    z-index: 1;
     transition: opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;
 `;
 export const StyledMediaContentVideo = styled.video`
@@ -68,10 +68,11 @@ export const StyledMediaContentVideo = styled.video`
     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","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","MEDIA_CONTENT_PREVIEW_BLUR","MEDIA_CONTENT_PREVIEW_SCALE","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_SCALE,\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: 1;\n    filter: ${MEDIA_CONTENT_PREVIEW_BLUR};\n    transform: scale(${MEDIA_CONTENT_PREVIEW_SCALE});\n    transition:\n        opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease,\n        filter ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;\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: 2;\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`;\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;AACtC,SACIC,oCAAoC,EACpCC,0BAA0B,EAC1BC,2BAA2B,QACxB,0BAA0B;AAEjC,OAAO,MAAMC,8BAA8B,GAAGJ,MAAM,CAACK,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGP,MAAM,CAACK,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMD,MAAME,uBAAuB,GAAGR,MAAM,CAACS,GAAiC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGV,MAAM,CAACQ,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,cAAcT,0BAA0B;AACxC,uBAAuBC,2BAA2B;AAClD;AACA,kBAAkBF,oCAAoC;AACtD,iBAAiBA,oCAAoC;AACrD,CAAC;AAED,OAAO,MAAMW,uBAAuB,GAAGZ,MAAM,CAACQ,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,0BAA0BV,oCAAoC;AAC9D,CAAC;AAED,OAAO,MAAMY,uBAAuB,GAAGb,MAAM,CAACc,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,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGf,MAAM,CAACK,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.utils.js

@@ -12,13 +12,21 @@ export const getMediaPreviewUrl = (file, previewUrl) => {
   }
   return file.meta?.preview;
 };
+
+/**
+ * Checks whether the given URL belongs to the chayns image service.
+ */
 export const isImageServiceUrl = url => {
   try {
     return IMAGE_SERVICE_ORIGINS.has(new URL(url).origin);
-  } catch (_) {
+  } catch {
     return false;
   }
 };
+
+/**
+ * Detects whether the given image-service URL already contains resize parameters.
+ */
 export const hasImageServiceTransformParameters = url => {
   if (!isImageServiceUrl(url)) {
     return false;
@@ -36,16 +44,20 @@ export const hasImageServiceTransformParameters = url => {
       return false;
     }
     return parameterSegment.split('-').every(parameter => IMAGE_SERVICE_PARAM_PATTERN.test(parameter));
-  } catch (_) {
+  } catch {
     return false;
   }
 };
-const buildImageServiceParameterSegment = (size, devicePixelRatio) => {
+const getImageServiceParameterSegment = (size, devicePixelRatio) => {
   const scaleFactor = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
   const width = Math.max(1, Math.ceil(size.width * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN));
   const height = Math.max(1, Math.ceil(size.height * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN));
   return `w${width}-h${height}`;
 };
+
+/**
+ * Expands a chayns image-service URL to a display-appropriate size when no transform is present.
+ */
 export const getResponsiveImageServiceUrl = (url, size, devicePixelRatio = 1) => {
   if (!size || hasImageServiceTransformParameters(url) || !isImageServiceUrl(url)) {
     return url;
@@ -60,11 +72,10 @@ export const getResponsiveImageServiceUrl = (url, size, devicePixelRatio = 1) =>
     const extensionIndex = fileName.lastIndexOf('.');
     const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';
     const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;
-    const parameterSegment = buildImageServiceParameterSegment(size, devicePixelRatio);
-    pathSegments.push(`${fileBaseName}_${parameterSegment}${extension}`);
+    pathSegments.push(`${fileBaseName}_${getImageServiceParameterSegment(size, devicePixelRatio)}${extension}`);
     urlObject.pathname = pathSegments.join('/');
     return urlObject.toString();
-  } catch (_) {
+  } catch {
     return url;
   }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.utils.js","names":["IMAGE_SERVICE_ORIGINS","Set","IMAGE_SERVICE_PARAM_PATTERN","IMAGE_SERVICE_RESIZE_OVERSCAN","isVideoFile","file","getMediaSourceUrl","url","replace","getMediaPreviewUrl","previewUrl","thumbnailUrl","meta","preview","isImageServiceUrl","has","URL","origin","_","hasImageServiceTransformParameters","urlObject","fileName","pathname","split","pop","extensionIndex","lastIndexOf","nameWithoutExtension","slice","parameterSegment","every","parameter","test","buildImageServiceParameterSegment","size","devicePixelRatio","scaleFactor","Number","isFinite","width","Math","max","ceil","height","getResponsiveImageServiceUrl","pathSegments","extension","fileBaseName","push","join","toString"],"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 type MediaContentSize = {\n    height: number;\n    width: number;\n};\n\nconst IMAGE_SERVICE_ORIGINS = new Set(['https://tsimg.cloud', 'https://tsimg.space']);\nconst IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale|crop|shortedgescale)|[whsbd]\\d+)$/i;\nconst IMAGE_SERVICE_RESIZE_OVERSCAN = 1.25;\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\nexport const isImageServiceUrl = (url: string): boolean => {\n    try {\n        return IMAGE_SERVICE_ORIGINS.has(new URL(url).origin);\n    } catch (_) {\n        return false;\n    }\n};\n\nexport const hasImageServiceTransformParameters = (url: string): boolean => {\n    if (!isImageServiceUrl(url)) {\n        return false;\n    }\n\n    try {\n        const urlObject = new URL(url);\n        const fileName = urlObject.pathname.split('/').pop();\n\n        if (!fileName) {\n            return false;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const nameWithoutExtension =\n            extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n        const parameterSegment = nameWithoutExtension.split('_').pop();\n\n        if (!parameterSegment || parameterSegment === nameWithoutExtension) {\n            return false;\n        }\n\n        return parameterSegment\n            .split('-')\n            .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter));\n    } catch (_) {\n        return false;\n    }\n};\n\nconst buildImageServiceParameterSegment = (size: MediaContentSize, devicePixelRatio: number) => {\n    const scaleFactor =\n        Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;\n    const width = Math.max(1, Math.ceil(size.width * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN));\n    const height = Math.max(\n        1,\n        Math.ceil(size.height * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN),\n    );\n\n    return `w${width}-h${height}`;\n};\n\nexport const getResponsiveImageServiceUrl = (\n    url: string,\n    size?: MediaContentSize,\n    devicePixelRatio = 1,\n): string => {\n    if (!size || hasImageServiceTransformParameters(url) || !isImageServiceUrl(url)) {\n        return url;\n    }\n\n    try {\n        const urlObject = new URL(url);\n        const pathSegments = urlObject.pathname.split('/');\n        const fileName = pathSegments.pop();\n\n        if (!fileName) {\n            return url;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n        const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n        const parameterSegment = buildImageServiceParameterSegment(size, devicePixelRatio);\n\n        pathSegments.push(`${fileBaseName}_${parameterSegment}${extension}`);\n        urlObject.pathname = pathSegments.join('/');\n\n        return urlObject.toString();\n    } catch (_) {\n        return url;\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MediaContent.utils.js","names":["IMAGE_SERVICE_ORIGINS","Set","IMAGE_SERVICE_PARAM_PATTERN","IMAGE_SERVICE_RESIZE_OVERSCAN","isVideoFile","file","getMediaSourceUrl","url","replace","getMediaPreviewUrl","previewUrl","thumbnailUrl","meta","preview","isImageServiceUrl","has","URL","origin","hasImageServiceTransformParameters","urlObject","fileName","pathname","split","pop","extensionIndex","lastIndexOf","nameWithoutExtension","slice","parameterSegment","every","parameter","test","getImageServiceParameterSegment","size","devicePixelRatio","scaleFactor","Number","isFinite","width","Math","max","ceil","height","getResponsiveImageServiceUrl","pathSegments","extension","fileBaseName","push","join","toString"],"sources":["../../../../src/components/media-content/MediaContent.utils.ts"],"sourcesContent":["import type { FileItem, Video } from '@chayns-components/core';\n\nexport type GalleryMediaFile = FileItem['file'];\nexport type MediaContentSize = {\n    height: number;\n    width: number;\n};\n\nconst IMAGE_SERVICE_ORIGINS = new Set(['https://tsimg.cloud', 'https://tsimg.space']);\nconst IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale|crop|shortedgescale)|[whsbd]\\d+)$/i;\nconst IMAGE_SERVICE_RESIZE_OVERSCAN = 1.25;\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\n/**\n * Checks whether the given URL belongs to the chayns image service.\n */\nexport const isImageServiceUrl = (url: string): boolean => {\n    try {\n        return IMAGE_SERVICE_ORIGINS.has(new URL(url).origin);\n    } catch {\n        return false;\n    }\n};\n\n/**\n * Detects whether the given image-service URL already contains resize parameters.\n */\nexport const hasImageServiceTransformParameters = (url: string): boolean => {\n    if (!isImageServiceUrl(url)) {\n        return false;\n    }\n\n    try {\n        const urlObject = new URL(url);\n        const fileName = urlObject.pathname.split('/').pop();\n\n        if (!fileName) {\n            return false;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const nameWithoutExtension =\n            extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n        const parameterSegment = nameWithoutExtension.split('_').pop();\n\n        if (!parameterSegment || parameterSegment === nameWithoutExtension) {\n            return false;\n        }\n\n        return parameterSegment\n            .split('-')\n            .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter));\n    } catch {\n        return false;\n    }\n};\n\nconst getImageServiceParameterSegment = (size: MediaContentSize, devicePixelRatio: number) => {\n    const scaleFactor =\n        Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;\n    const width = Math.max(1, Math.ceil(size.width * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN));\n    const height = Math.max(\n        1,\n        Math.ceil(size.height * scaleFactor * IMAGE_SERVICE_RESIZE_OVERSCAN),\n    );\n\n    return `w${width}-h${height}`;\n};\n\n/**\n * Expands a chayns image-service URL to a display-appropriate size when no transform is present.\n */\nexport const getResponsiveImageServiceUrl = (\n    url: string,\n    size?: MediaContentSize,\n    devicePixelRatio = 1,\n): string => {\n    if (!size || hasImageServiceTransformParameters(url) || !isImageServiceUrl(url)) {\n        return url;\n    }\n\n    try {\n        const urlObject = new URL(url);\n        const pathSegments = urlObject.pathname.split('/');\n        const fileName = pathSegments.pop();\n\n        if (!fileName) {\n            return url;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n        const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n\n        pathSegments.push(\n            `${fileBaseName}_${getImageServiceParameterSegment(size, devicePixelRatio)}${extension}`,\n        );\n        urlObject.pathname = pathSegments.join('/');\n\n        return urlObject.toString();\n    } catch {\n        return url;\n    }\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -16,6 +16,10 @@ const getSizeFromElement = element => {
     height
   };
 };
+
+/**
+ * Measures the media tile size so responsive image-service URLs can be generated without layout shifts.
+ */
 const useMediaContentSize = element => {
   const [size, setSize] = useState();
   useEffect(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"useMediaContentSize.js","names":["useEffect","useState","MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS","getSizeFromElement","element","undefined","width","height","getBoundingClientRect","useMediaContentSize","size","setSize","timeoutId","updateSize","nextSize","clearTimeout","setTimeout","ResizeObserver","resizeObserver","observe","disconnect"],"sources":["../../../../src/components/media-content/useMediaContentSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { MediaContentSize } from './MediaContent.utils';\n\nconst MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS = 100;\n\nconst getSizeFromElement = (element: HTMLElement | null): MediaContentSize | undefined => {\n    if (!element) {\n        return undefined;\n    }\n\n    const { width, height } = element.getBoundingClientRect();\n\n    if (width <= 0 || height <= 0) {\n        return undefined;\n    }\n\n    return {\n        width,\n        height,\n    };\n};\n\nconst useMediaContentSize = (element: HTMLElement | null) => {\n    const [size, setSize] = useState<MediaContentSize>();\n\n    useEffect(() => {\n        if (!element) {\n            setSize(undefined);\n            return undefined;\n        }\n\n        let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n        const updateSize = () => {\n            const nextSize = getSizeFromElement(element);\n\n            if (!nextSize) {\n                setSize(undefined);\n                return;\n            }\n\n            if (timeoutId) {\n                clearTimeout(timeoutId);\n            }\n\n            timeoutId = setTimeout(() => {\n                setSize(nextSize);\n            }, MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS);\n        };\n\n        updateSize();\n\n        if (typeof ResizeObserver === 'undefined') {\n            return () => {\n                if (timeoutId) {\n                    clearTimeout(timeoutId);\n                }\n            };\n        }\n\n        const resizeObserver = new ResizeObserver(() => {\n            updateSize();\n        });\n\n        resizeObserver.observe(element);\n\n        return () => {\n            resizeObserver.disconnect();\n\n            if (timeoutId) {\n                clearTimeout(timeoutId);\n            }\n        };\n    }, [element]);\n\n    return size;\n};\n\nexport default useMediaContentSize;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAG3C,MAAMC,qCAAqC,GAAG,GAAG;AAEjD,MAAMC,kBAAkB,GAAIC,OAA2B,IAAmC;EACtF,IAAI,CAACA,OAAO,EAAE;IACV,OAAOC,SAAS;EACpB;EAEA,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGH,OAAO,CAACI,qBAAqB,CAAC,CAAC;EAEzD,IAAIF,KAAK,IAAI,CAAC,IAAIC,MAAM,IAAI,CAAC,EAAE;IAC3B,OAAOF,SAAS;EACpB;EAEA,OAAO;IACHC,KAAK;IACLC;EACJ,CAAC;AACL,CAAC;AAED,MAAME,mBAAmB,GAAIL,OAA2B,IAAK;EACzD,MAAM,CAACM,IAAI,EAAEC,OAAO,CAAC,GAAGV,QAAQ,CAAmB,CAAC;EAEpDD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACI,OAAO,EAAE;MACVO,OAAO,CAACN,SAAS,CAAC;MAClB,OAAOA,SAAS;IACpB;IAEA,IAAIO,SAAoD;IAExD,MAAMC,UAAU,GAAGA,CAAA,KAAM;MACrB,MAAMC,QAAQ,GAAGX,kBAAkB,CAACC,OAAO,CAAC;MAE5C,IAAI,CAACU,QAAQ,EAAE;QACXH,OAAO,CAACN,SAAS,CAAC;QAClB;MACJ;MAEA,IAAIO,SAAS,EAAE;QACXG,YAAY,CAACH,SAAS,CAAC;MAC3B;MAEAA,SAAS,GAAGI,UAAU,CAAC,MAAM;QACzBL,OAAO,CAACG,QAAQ,CAAC;MACrB,CAAC,EAAEZ,qCAAqC,CAAC;IAC7C,CAAC;IAEDW,UAAU,CAAC,CAAC;IAEZ,IAAI,OAAOI,cAAc,KAAK,WAAW,EAAE;MACvC,OAAO,MAAM;QACT,IAAIL,SAAS,EAAE;UACXG,YAAY,CAACH,SAAS,CAAC;QAC3B;MACJ,CAAC;IACL;IAEA,MAAMM,cAAc,GAAG,IAAID,cAAc,CAAC,MAAM;MAC5CJ,UAAU,CAAC,CAAC;IAChB,CAAC,CAAC;IAEFK,cAAc,CAACC,OAAO,CAACf,OAAO,CAAC;IAE/B,OAAO,MAAM;MACTc,cAAc,CAACE,UAAU,CAAC,CAAC;MAE3B,IAAIR,SAAS,EAAE;QACXG,YAAY,CAACH,SAAS,CAAC;MAC3B;IACJ,CAAC;EACL,CAAC,EAAE,CAACR,OAAO,CAAC,CAAC;EAEb,OAAOM,IAAI;AACf,CAAC;AAED,eAAeD,mBAAmB","ignoreList":[]}
+{"version":3,"file":"useMediaContentSize.js","names":["useEffect","useState","MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS","getSizeFromElement","element","undefined","width","height","getBoundingClientRect","useMediaContentSize","size","setSize","timeoutId","updateSize","nextSize","clearTimeout","setTimeout","ResizeObserver","resizeObserver","observe","disconnect"],"sources":["../../../../src/components/media-content/useMediaContentSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { MediaContentSize } from './MediaContent.utils';\n\nconst MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS = 100;\n\nconst getSizeFromElement = (element: HTMLElement | null): MediaContentSize | undefined => {\n    if (!element) {\n        return undefined;\n    }\n\n    const { width, height } = element.getBoundingClientRect();\n\n    if (width <= 0 || height <= 0) {\n        return undefined;\n    }\n\n    return {\n        width,\n        height,\n    };\n};\n\n/**\n * Measures the media tile size so responsive image-service URLs can be generated without layout shifts.\n */\nconst useMediaContentSize = (element: HTMLElement | null) => {\n    const [size, setSize] = useState<MediaContentSize>();\n\n    useEffect(() => {\n        if (!element) {\n            setSize(undefined);\n            return undefined;\n        }\n\n        let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n        const updateSize = () => {\n            const nextSize = getSizeFromElement(element);\n\n            if (!nextSize) {\n                setSize(undefined);\n                return;\n            }\n\n            if (timeoutId) {\n                clearTimeout(timeoutId);\n            }\n\n            timeoutId = setTimeout(() => {\n                setSize(nextSize);\n            }, MEDIA_CONTENT_SIZE_RESIZE_DEBOUNCE_MS);\n        };\n\n        updateSize();\n\n        if (typeof ResizeObserver === 'undefined') {\n            return () => {\n                if (timeoutId) {\n                    clearTimeout(timeoutId);\n                }\n            };\n        }\n\n        const resizeObserver = new ResizeObserver(() => {\n            updateSize();\n        });\n\n        resizeObserver.observe(element);\n\n        return () => {\n            resizeObserver.disconnect();\n\n            if (timeoutId) {\n                clearTimeout(timeoutId);\n            }\n        };\n    }, [element]);\n\n    return size;\n};\n\nexport default useMediaContentSize;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAG3C,MAAMC,qCAAqC,GAAG,GAAG;AAEjD,MAAMC,kBAAkB,GAAIC,OAA2B,IAAmC;EACtF,IAAI,CAACA,OAAO,EAAE;IACV,OAAOC,SAAS;EACpB;EAEA,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGH,OAAO,CAACI,qBAAqB,CAAC,CAAC;EAEzD,IAAIF,KAAK,IAAI,CAAC,IAAIC,MAAM,IAAI,CAAC,EAAE;IAC3B,OAAOF,SAAS;EACpB;EAEA,OAAO;IACHC,KAAK;IACLC;EACJ,CAAC;AACL,CAAC;;AAED;AACA;AACA;AACA,MAAME,mBAAmB,GAAIL,OAA2B,IAAK;EACzD,MAAM,CAACM,IAAI,EAAEC,OAAO,CAAC,GAAGV,QAAQ,CAAmB,CAAC;EAEpDD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACI,OAAO,EAAE;MACVO,OAAO,CAACN,SAAS,CAAC;MAClB,OAAOA,SAAS;IACpB;IAEA,IAAIO,SAAoD;IAExD,MAAMC,UAAU,GAAGA,CAAA,KAAM;MACrB,MAAMC,QAAQ,GAAGX,kBAAkB,CAACC,OAAO,CAAC;MAE5C,IAAI,CAACU,QAAQ,EAAE;QACXH,OAAO,CAACN,SAAS,CAAC;QAClB;MACJ;MAEA,IAAIO,SAAS,EAAE;QACXG,YAAY,CAACH,SAAS,CAAC;MAC3B;MAEAA,SAAS,GAAGI,UAAU,CAAC,MAAM;QACzBL,OAAO,CAACG,QAAQ,CAAC;MACrB,CAAC,EAAEZ,qCAAqC,CAAC;IAC7C,CAAC;IAEDW,UAAU,CAAC,CAAC;IAEZ,IAAI,OAAOI,cAAc,KAAK,WAAW,EAAE;MACvC,OAAO,MAAM;QACT,IAAIL,SAAS,EAAE;UACXG,YAAY,CAACH,SAAS,CAAC;QAC3B;MACJ,CAAC;IACL;IAEA,MAAMM,cAAc,GAAG,IAAID,cAAc,CAAC,MAAM;MAC5CJ,UAAU,CAAC,CAAC;IAChB,CAAC,CAAC;IAEFK,cAAc,CAACC,OAAO,CAACf,OAAO,CAAC;IAE/B,OAAO,MAAM;MACTc,cAAc,CAACE,UAAU,CAAC,CAAC;MAE3B,IAAIR,SAAS,EAAE;QACXG,YAAY,CAACH,SAAS,CAAC;MAC3B;IACJ,CAAC;EACL,CAAC,EAAE,CAACR,OAAO,CAAC,CAAC;EAEb,OAAOM,IAAI;AACf,CAAC;AAED,eAAeD,mBAAmB","ignoreList":[]}

package/lib/types/components/gallery-viewer/GalleryViewer.d.ts

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

package/lib/types/components/media-content/MediaContent.constants.d.ts

@@ -1,5 +1,4 @@
-export declare const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 200;
-export declare const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS = 100;
-export declare const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS = 200;
-export declare const MEDIA_CONTENT_PREVIEW_BLUR = "blur(16px)";
-export declare const MEDIA_CONTENT_PREVIEW_SCALE = 1.05;
+export declare const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 180;
+export declare const MEDIA_CONTENT_PREVIEW_BLUR = "blur(6px)";
+export declare const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS = 100;
+export declare const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS = 200;

package/lib/types/components/media-content/MediaContent.utils.d.ts

@@ -7,6 +7,15 @@ export type MediaContentSize = {
 export declare const isVideoFile: (file: GalleryMediaFile) => file is Video;
 export declare const getMediaSourceUrl: (file: GalleryMediaFile) => string;
 export declare const getMediaPreviewUrl: (file: GalleryMediaFile, previewUrl?: string) => string | undefined;
+/**
+ * Checks whether the given URL belongs to the chayns image service.
+ */
 export declare const isImageServiceUrl: (url: string) => boolean;
+/**
+ * Detects whether the given image-service URL already contains resize parameters.
+ */
 export declare const hasImageServiceTransformParameters: (url: string) => boolean;
+/**
+ * Expands a chayns image-service URL to a display-appropriate size when no transform is present.
+ */
 export declare const getResponsiveImageServiceUrl: (url: string, size?: MediaContentSize, devicePixelRatio?: number) => string;

package/lib/types/components/media-content/useMediaContentSize.d.ts

@@ -1,3 +1,6 @@
 import type { MediaContentSize } from './MediaContent.utils';
+/**
+ * Measures the media tile size so responsive image-service URLs can be generated without layout shifts.
+ */
 declare const useMediaContentSize: (element: HTMLElement | null) => MediaContentSize | undefined;
 export default useMediaContentSize;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.2.5",
+    "version": "5.2.7",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "0b2c4471ad3dfb85b9881578c30b09bb9e9d782e"
+    "gitHead": "f185a0d1ed5c989b9f45e5b27c7ba37480e9b579"
 }