@chayns-components/gallery 5.2.4-alpha.0 → 5.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/AGENTS.md +132 -13
  2. package/lib/cjs/components/Gallery.js +4 -1
  3. package/lib/cjs/components/Gallery.js.map +1 -1
  4. package/lib/cjs/components/Gallery.types.js.map +1 -1
  5. package/lib/cjs/components/gallery-editor/GalleryEditor.constants.js +12 -0
  6. package/lib/cjs/components/gallery-editor/GalleryEditor.constants.js.map +1 -0
  7. package/lib/cjs/components/gallery-editor/GalleryEditor.js +40 -178
  8. package/lib/cjs/components/gallery-editor/GalleryEditor.js.map +1 -1
  9. package/lib/cjs/components/gallery-editor/GalleryEditor.styles.js +3 -1
  10. package/lib/cjs/components/gallery-editor/GalleryEditor.styles.js.map +1 -1
  11. package/lib/cjs/components/gallery-editor/GalleryEditor.types.js.map +1 -1
  12. package/lib/cjs/components/gallery-editor/GalleryEditor.utils.js +27 -0
  13. package/lib/cjs/components/gallery-editor/GalleryEditor.utils.js.map +1 -0
  14. package/lib/cjs/components/gallery-editor/add-file/AddFile.js +1 -1
  15. package/lib/cjs/components/gallery-editor/add-file/AddFile.js.map +1 -1
  16. package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js +48 -19
  17. package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js.map +1 -1
  18. package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js +10 -3
  19. package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js.map +1 -1
  20. package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.js.map +1 -1
  21. package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js +10 -4
  22. package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js.map +1 -1
  23. package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.js.map +1 -1
  24. package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js +7 -10
  25. package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js.map +1 -1
  26. package/lib/cjs/components/gallery-editor/useGalleryEditorState.js +161 -0
  27. package/lib/cjs/components/gallery-editor/useGalleryEditorState.js.map +1 -0
  28. package/lib/cjs/components/gallery-viewer/GalleryViewer.constants.js +8 -0
  29. package/lib/cjs/components/gallery-viewer/GalleryViewer.constants.js.map +1 -0
  30. package/lib/cjs/components/gallery-viewer/GalleryViewer.js +8 -4
  31. package/lib/cjs/components/gallery-viewer/GalleryViewer.js.map +1 -1
  32. package/lib/cjs/components/gallery-viewer/GalleryViewer.types.js.map +1 -1
  33. package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js +6 -3
  34. package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js.map +1 -1
  35. package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js.map +1 -1
  36. package/lib/cjs/components/media-content/MediaContent.constants.js +12 -0
  37. package/lib/cjs/components/media-content/MediaContent.constants.js.map +1 -0
  38. package/lib/cjs/components/media-content/MediaContent.js +95 -20
  39. package/lib/cjs/components/media-content/MediaContent.js.map +1 -1
  40. package/lib/cjs/components/media-content/MediaContent.styles.js +35 -5
  41. package/lib/cjs/components/media-content/MediaContent.styles.js.map +1 -1
  42. package/lib/cjs/components/media-content/MediaContent.types.js.map +1 -1
  43. package/lib/cjs/components/media-content/MediaContent.utils.js +84 -0
  44. package/lib/cjs/components/media-content/MediaContent.utils.js.map +1 -0
  45. package/lib/cjs/components/media-content/useMediaContentSize.js +68 -0
  46. package/lib/cjs/components/media-content/useMediaContentSize.js.map +1 -0
  47. package/lib/cjs/utils/gallery.js +2 -2
  48. package/lib/cjs/utils/gallery.js.map +1 -1
  49. package/lib/esm/components/Gallery.js +4 -1
  50. package/lib/esm/components/Gallery.js.map +1 -1
  51. package/lib/esm/components/Gallery.types.js.map +1 -1
  52. package/lib/esm/components/gallery-editor/GalleryEditor.constants.js +6 -0
  53. package/lib/esm/components/gallery-editor/GalleryEditor.constants.js.map +1 -0
  54. package/lib/esm/components/gallery-editor/GalleryEditor.js +37 -174
  55. package/lib/esm/components/gallery-editor/GalleryEditor.js.map +1 -1
  56. package/lib/esm/components/gallery-editor/GalleryEditor.styles.js +3 -1
  57. package/lib/esm/components/gallery-editor/GalleryEditor.styles.js.map +1 -1
  58. package/lib/esm/components/gallery-editor/GalleryEditor.types.js.map +1 -1
  59. package/lib/esm/components/gallery-editor/GalleryEditor.utils.js +17 -0
  60. package/lib/esm/components/gallery-editor/GalleryEditor.utils.js.map +1 -0
  61. package/lib/esm/components/gallery-editor/add-file/AddFile.js +2 -2
  62. package/lib/esm/components/gallery-editor/add-file/AddFile.js.map +1 -1
  63. package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js +47 -19
  64. package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js.map +1 -1
  65. package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js +9 -2
  66. package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js.map +1 -1
  67. package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.js.map +1 -1
  68. package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js +9 -4
  69. package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js.map +1 -1
  70. package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.js.map +1 -1
  71. package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js +6 -9
  72. package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js.map +1 -1
  73. package/lib/esm/components/gallery-editor/useGalleryEditorState.js +150 -0
  74. package/lib/esm/components/gallery-editor/useGalleryEditorState.js.map +1 -0
  75. package/lib/esm/components/gallery-viewer/GalleryViewer.constants.js +2 -0
  76. package/lib/esm/components/gallery-viewer/GalleryViewer.constants.js.map +1 -0
  77. package/lib/esm/components/gallery-viewer/GalleryViewer.js +9 -5
  78. package/lib/esm/components/gallery-viewer/GalleryViewer.js.map +1 -1
  79. package/lib/esm/components/gallery-viewer/GalleryViewer.types.js.map +1 -1
  80. package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js +5 -3
  81. package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js.map +1 -1
  82. package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js.map +1 -1
  83. package/lib/esm/components/media-content/MediaContent.constants.js +6 -0
  84. package/lib/esm/components/media-content/MediaContent.constants.js.map +1 -0
  85. package/lib/esm/components/media-content/MediaContent.js +94 -21
  86. package/lib/esm/components/media-content/MediaContent.js.map +1 -1
  87. package/lib/esm/components/media-content/MediaContent.styles.js +34 -4
  88. package/lib/esm/components/media-content/MediaContent.styles.js.map +1 -1
  89. package/lib/esm/components/media-content/MediaContent.types.js.map +1 -1
  90. package/lib/esm/components/media-content/MediaContent.utils.js +71 -0
  91. package/lib/esm/components/media-content/MediaContent.utils.js.map +1 -0
  92. package/lib/esm/components/media-content/useMediaContentSize.js +62 -0
  93. package/lib/esm/components/media-content/useMediaContentSize.js.map +1 -0
  94. package/lib/esm/utils/gallery.js +2 -2
  95. package/lib/esm/utils/gallery.js.map +1 -1
  96. package/lib/types/components/Gallery.types.d.ts +12 -0
  97. package/lib/types/components/gallery-editor/GalleryEditor.constants.d.ts +5 -0
  98. package/lib/types/components/gallery-editor/GalleryEditor.styles.d.ts +7 -3
  99. package/lib/types/components/gallery-editor/GalleryEditor.types.d.ts +11 -0
  100. package/lib/types/components/gallery-editor/GalleryEditor.utils.d.ts +5 -0
  101. package/lib/types/components/gallery-editor/add-file/AddFile.d.ts +3 -3
  102. package/lib/types/components/gallery-editor/add-file/AddFile.styles.d.ts +5 -3
  103. package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.d.ts +3 -3
  104. package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.d.ts +13 -3
  105. package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.d.ts +8 -0
  106. package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.d.ts +3 -3
  107. package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.d.ts +3 -1
  108. package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.d.ts +15 -0
  109. package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.d.ts +3 -3
  110. package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.d.ts +12 -6
  111. package/lib/types/components/gallery-editor/useGalleryEditorState.d.ts +21 -0
  112. package/lib/types/components/gallery-viewer/GalleryViewer.constants.d.ts +1 -0
  113. package/lib/types/components/gallery-viewer/GalleryViewer.styles.d.ts +7 -3
  114. package/lib/types/components/gallery-viewer/GalleryViewer.types.d.ts +11 -0
  115. package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.d.ts +3 -3
  116. package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.d.ts +2 -2
  117. package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.d.ts +8 -0
  118. package/lib/types/components/media-content/MediaContent.constants.d.ts +5 -0
  119. package/lib/types/components/media-content/MediaContent.d.ts +3 -3
  120. package/lib/types/components/media-content/MediaContent.styles.d.ts +50 -9
  121. package/lib/types/components/media-content/MediaContent.types.d.ts +16 -0
  122. package/lib/types/components/media-content/MediaContent.utils.d.ts +12 -0
  123. package/lib/types/components/media-content/useMediaContentSize.d.ts +3 -0
  124. package/package.json +4 -4
@@ -0,0 +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":[]}
@@ -49,7 +49,7 @@ export const openFiles = (fileItems, file) => {
49
49
  try {
50
50
  startIndex = fileItems.findIndex(item => item.id === file.id);
51
51
  const items = fileItems.map(item => ({
52
- url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',
52
+ url: item.uploadedFile?.url ?? '',
53
53
  mediaType: item.uploadedFile && 'thumbnailUrl' in item.uploadedFile ? MediaType.VIDEO : MediaType.IMAGE
54
54
  }));
55
55
 
@@ -93,7 +93,7 @@ export const openKnownFiles = (fileItems, file) => {
93
93
  try {
94
94
  startIndex = fileItems.findIndex((item, index) => getGalleryViewerKey(item, index) === activeFileKey);
95
95
  const items = fileItems.map(item => ({
96
- url: item.file.url.replace('_0.mp4', '.mp4'),
96
+ url: item.file.url,
97
97
  mediaType: 'thumbnailUrl' in item.file ? MediaType.VIDEO : MediaType.IMAGE
98
98
  }));
99
99
 
@@ -1 +1 @@
1
- {"version":3,"file":"gallery.js","names":["MediaType","openImage","openMedia","openVideo","GalleryViewMode","DEFAULT_MEDIA_RATIO","mapFilesToInternalItems","files","map","file","index","id","getGalleryViewerKey","uploadedFile","undefined","state","previewUrl","fileItem","url","getGalleryRatio","fileItems","length","Math","max","ratio","getReadOnlyItemRatio","viewMode","itemCount","GRID","openFiles","startIndex","findIndex","item","items","replace","mediaType","VIDEO","IMAGE","_","imageFiles","forEach","push","startFile","shift","openKnownFiles","activeFileKey","indexOf"],"sources":["../../../src/utils/gallery.ts"],"sourcesContent":["import type { FileItem, InternalFileItem } from '@chayns-components/core';\nimport {\n MediaType,\n openImage,\n openMedia,\n type OpenImageItem,\n type OpenMediaItem,\n openVideo,\n} from 'chayns-api';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst DEFAULT_MEDIA_RATIO = 1;\n\nexport const mapFilesToInternalItems = (files?: FileItem[]): InternalFileItem[] =>\n (files ?? []).map((file, index) => ({\n id: getGalleryViewerKey(file, index),\n uploadedFile: file.file,\n file: undefined,\n state: 'uploaded',\n previewUrl: undefined,\n }));\n\nexport const getGalleryViewerKey = (fileItem: FileItem, index: number): string =>\n fileItem.id ?? fileItem.file.id ?? fileItem.file.url ?? `gallery-item-${index}`;\n\nexport const getGalleryRatio = (fileItems: FileItem[]): number => {\n switch (fileItems.length) {\n case 0:\n return DEFAULT_MEDIA_RATIO;\n case 1:\n return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, 1);\n case 2:\n return 2;\n case 3:\n return 3;\n default:\n return DEFAULT_MEDIA_RATIO;\n }\n};\n\nexport const getReadOnlyItemRatio = ({\n fileItems,\n index,\n viewMode,\n}: {\n fileItems: FileItem[];\n index: number;\n viewMode: GalleryViewMode;\n}): number => {\n const itemCount = fileItems.length;\n\n if (viewMode !== GalleryViewMode.GRID) {\n return DEFAULT_MEDIA_RATIO;\n }\n\n if (itemCount === 1) {\n // A square fallback keeps virtualization stable when upstream data does not provide a ratio.\n return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, DEFAULT_MEDIA_RATIO);\n }\n\n if (itemCount === 2 && (index === 0 || index === 1)) {\n return 0.5;\n }\n\n if ((index === 0 && itemCount > 2) || (itemCount === 3 && (index === 1 || index === 2))) {\n return 1.5;\n }\n\n return DEFAULT_MEDIA_RATIO;\n};\n\nexport const openFiles = (fileItems: InternalFileItem[], file: InternalFileItem) => {\n let startIndex = 0;\n\n try {\n startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n const items: OpenMediaItem[] = fileItems.map((item) => ({\n url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n mediaType:\n item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n ? MediaType.VIDEO\n : MediaType.IMAGE,\n }));\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n void openMedia({ items, startIndex });\n } catch (_) {\n if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {\n void openVideo({ url: file.uploadedFile.url });\n\n return;\n }\n\n const imageFiles: OpenImageItem[] = [];\n\n fileItems.forEach(({ uploadedFile }) => {\n if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {\n imageFiles.push({ url: uploadedFile.url });\n }\n });\n\n startIndex = imageFiles.findIndex((item) => item.url === file.uploadedFile?.url);\n\n const startFile = imageFiles.shift();\n\n if (!startFile) {\n return;\n }\n\n void openImage({ items: [startFile, ...imageFiles], startIndex });\n }\n};\n\nexport const openKnownFiles = (fileItems: FileItem[], file: FileItem) => {\n const activeFileKey = getGalleryViewerKey(file, fileItems.indexOf(file));\n let startIndex = 0;\n\n try {\n startIndex = fileItems.findIndex(\n (item, index) => getGalleryViewerKey(item, index) === activeFileKey,\n );\n\n const items: OpenMediaItem[] = fileItems.map((item) => ({\n url: item.file.url.replace('_0.mp4', '.mp4'),\n mediaType: 'thumbnailUrl' in item.file ? MediaType.VIDEO : MediaType.IMAGE,\n }));\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n void openMedia({ items, startIndex });\n } catch (_) {\n if ('thumbnailUrl' in file.file) {\n void openVideo({ url: file.file.url });\n\n return;\n }\n\n const imageFiles: OpenImageItem[] = [];\n\n fileItems.forEach((item) => {\n if (!('thumbnailUrl' in item.file)) {\n imageFiles.push({ url: item.file.url });\n }\n });\n\n startIndex = imageFiles.findIndex((item) => item.url === file.file.url);\n\n const startFile = imageFiles.shift();\n\n if (!startFile) {\n return;\n }\n\n void openImage({ items: [startFile, ...imageFiles], startIndex });\n }\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"gallery.js","names":["MediaType","openImage","openMedia","openVideo","GalleryViewMode","DEFAULT_MEDIA_RATIO","mapFilesToInternalItems","files","map","file","index","id","getGalleryViewerKey","uploadedFile","undefined","state","previewUrl","fileItem","url","getGalleryRatio","fileItems","length","Math","max","ratio","getReadOnlyItemRatio","viewMode","itemCount","GRID","openFiles","startIndex","findIndex","item","items","mediaType","VIDEO","IMAGE","_","imageFiles","forEach","push","startFile","shift","openKnownFiles","activeFileKey","indexOf"],"sources":["../../../src/utils/gallery.ts"],"sourcesContent":["import type { FileItem, InternalFileItem } from '@chayns-components/core';\nimport {\n MediaType,\n openImage,\n openMedia,\n type OpenImageItem,\n type OpenMediaItem,\n openVideo,\n} from 'chayns-api';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst DEFAULT_MEDIA_RATIO = 1;\n\nexport const mapFilesToInternalItems = (files?: FileItem[]): InternalFileItem[] =>\n (files ?? []).map((file, index) => ({\n id: getGalleryViewerKey(file, index),\n uploadedFile: file.file,\n file: undefined,\n state: 'uploaded',\n previewUrl: undefined,\n }));\n\nexport const getGalleryViewerKey = (fileItem: FileItem, index: number): string =>\n fileItem.id ?? fileItem.file.id ?? fileItem.file.url ?? `gallery-item-${index}`;\n\nexport const getGalleryRatio = (fileItems: FileItem[]): number => {\n switch (fileItems.length) {\n case 0:\n return DEFAULT_MEDIA_RATIO;\n case 1:\n return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, 1);\n case 2:\n return 2;\n case 3:\n return 3;\n default:\n return DEFAULT_MEDIA_RATIO;\n }\n};\n\nexport const getReadOnlyItemRatio = ({\n fileItems,\n index,\n viewMode,\n}: {\n fileItems: FileItem[];\n index: number;\n viewMode: GalleryViewMode;\n}): number => {\n const itemCount = fileItems.length;\n\n if (viewMode !== GalleryViewMode.GRID) {\n return DEFAULT_MEDIA_RATIO;\n }\n\n if (itemCount === 1) {\n // A square fallback keeps virtualization stable when upstream data does not provide a ratio.\n return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, DEFAULT_MEDIA_RATIO);\n }\n\n if (itemCount === 2 && (index === 0 || index === 1)) {\n return 0.5;\n }\n\n if ((index === 0 && itemCount > 2) || (itemCount === 3 && (index === 1 || index === 2))) {\n return 1.5;\n }\n\n return DEFAULT_MEDIA_RATIO;\n};\n\nexport const openFiles = (fileItems: InternalFileItem[], file: InternalFileItem) => {\n let startIndex = 0;\n\n try {\n startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n const items: OpenMediaItem[] = fileItems.map((item) => ({\n url: item.uploadedFile?.url ?? '',\n mediaType:\n item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n ? MediaType.VIDEO\n : MediaType.IMAGE,\n }));\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n void openMedia({ items, startIndex });\n } catch (_) {\n if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {\n void openVideo({ url: file.uploadedFile.url });\n\n return;\n }\n\n const imageFiles: OpenImageItem[] = [];\n\n fileItems.forEach(({ uploadedFile }) => {\n if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {\n imageFiles.push({ url: uploadedFile.url });\n }\n });\n\n startIndex = imageFiles.findIndex((item) => item.url === file.uploadedFile?.url);\n\n const startFile = imageFiles.shift();\n\n if (!startFile) {\n return;\n }\n\n void openImage({ items: [startFile, ...imageFiles], startIndex });\n }\n};\n\nexport const openKnownFiles = (fileItems: FileItem[], file: FileItem) => {\n const activeFileKey = getGalleryViewerKey(file, fileItems.indexOf(file));\n let startIndex = 0;\n\n try {\n startIndex = fileItems.findIndex(\n (item, index) => getGalleryViewerKey(item, index) === activeFileKey,\n );\n\n const items: OpenMediaItem[] = fileItems.map((item) => ({\n url: item.file.url,\n mediaType: 'thumbnailUrl' in item.file ? MediaType.VIDEO : MediaType.IMAGE,\n }));\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n void openMedia({ items, startIndex });\n } catch (_) {\n if ('thumbnailUrl' in file.file) {\n void openVideo({ url: file.file.url });\n\n return;\n }\n\n const imageFiles: OpenImageItem[] = [];\n\n fileItems.forEach((item) => {\n if (!('thumbnailUrl' in item.file)) {\n imageFiles.push({ url: item.file.url });\n }\n });\n\n startIndex = imageFiles.findIndex((item) => item.url === file.file.url);\n\n const startFile = imageFiles.shift();\n\n if (!startFile) {\n return;\n }\n\n void openImage({ items: [startFile, ...imageFiles], startIndex });\n }\n};\n"],"mappings":"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","ignoreList":[]}
@@ -82,6 +82,18 @@ export interface GalleryProps {
82
82
  * @optional
83
83
  */
84
84
  maxFiles?: number;
85
+ /**
86
+ * Controls when the gallery is allowed to load the final media assets.
87
+ * @description
88
+ * When set to `true`, the gallery loads the actual images immediately as before.
89
+ * When set to `false`, the gallery keeps rendering previews first and delays the final media load until this flag becomes `true`.
90
+ * This setting applies to the whole gallery wrapper and is intended for external loading control such as virtualized message lists.
91
+ * @default true
92
+ * @example
93
+ * <Gallery files={files} shouldLoadImages={false} />
94
+ * @optional
95
+ */
96
+ shouldLoadImages?: boolean;
85
97
  /**
86
98
  * Is called after a file has been uploaded successfully in edit mode.
87
99
  * @description
@@ -0,0 +1,5 @@
1
+ export declare const GALLERY_EDITOR_GRID_GAP_PX = 6;
2
+ export declare const GALLERY_EDITOR_ITEM_FADE_DURATION_S = 0.18;
3
+ export declare const GALLERY_EDITOR_PREVIEW_FADE_DURATION_S = 0.16;
4
+ export declare const GALLERY_EDITOR_MEDIA_FADE_DURATION_S = 0.2;
5
+ export declare const GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX = 3;
@@ -1,4 +1,8 @@
1
- export declare const StyledGalleryEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
2
- export declare const StyledGalleryEditorGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
1
+ export declare const StyledGalleryEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
2
+ export declare const StyledGalleryEditorGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$gap" | "$fileMinWidth"> & {
3
+ $gap: number;
3
4
  $fileMinWidth: number;
4
- }>> & string;
5
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$gap" | "$fileMinWidth"> & {
6
+ $gap: number;
7
+ $fileMinWidth: number;
8
+ }, never>>> & string;
@@ -53,6 +53,17 @@ export interface GalleryEditorProps {
53
53
  * @optional
54
54
  */
55
55
  files?: FileItem[];
56
+ /**
57
+ * Controls whether the editor may load the final media assets immediately.
58
+ * @description
59
+ * When set to `true`, the editor behaves like the current implementation and loads the final media immediately.
60
+ * When set to `false`, uploaded media keeps rendering previews first and delays the final image load until this flag becomes `true`.
61
+ * @default true
62
+ * @example
63
+ * <GalleryEditor files={files} shouldLoadImages={false} />
64
+ * @optional
65
+ */
66
+ shouldLoadImages?: boolean;
56
67
  /**
57
68
  * Limits how many files can be managed by the editor.
58
69
  * @description
@@ -0,0 +1,5 @@
1
+ import type { FileItem, InternalFileItem } from '@chayns-components/core';
2
+ export declare const mapExternalFilesIntoInternalItems: (files?: FileItem[]) => InternalFileItem[];
3
+ export declare const mergeExternalFilesWithInternalState: (internalItems: InternalFileItem[], externalItems: InternalFileItem[]) => InternalFileItem[];
4
+ export declare const getPendingPreviewFileItems: (fileItems: InternalFileItem[]) => InternalFileItem[];
5
+ export declare const getPendingUploadFileItems: (fileItems: InternalFileItem[]) => InternalFileItem[];
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React from 'react';
2
2
  import type { AddFileProps } from './AddFile.types';
3
- declare const AddFile: FC<AddFileProps>;
4
- export default AddFile;
3
+ declare const _default: React.NamedExoticComponent<AddFileProps>;
4
+ export default _default;
@@ -1,4 +1,6 @@
1
- export declare const StyledAddFile: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
2
- export declare const StyledAddFIleIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
1
+ export declare const StyledAddFile: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
2
+ export declare const StyledAddFIleIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme"> & {
3
3
  theme: import("@chayns-components/core").Theme;
4
- }>> & string;
4
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme"> & {
5
+ theme: import("@chayns-components/core").Theme;
6
+ }, never>>> & string;
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React from 'react';
2
2
  import type { GalleryEditorItemProps } from './GalleryEditorItem.types';
3
- declare const GalleryEditorItem: FC<GalleryEditorItemProps>;
4
- export default GalleryEditorItem;
3
+ declare const _default: React.NamedExoticComponent<GalleryEditorItemProps>;
4
+ export default _default;
@@ -1,4 +1,14 @@
1
- export declare const StyledGalleryEditorItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
2
- export declare const StyledGalleryEditorItemDeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
1
+ export declare const StyledMotionGalleryEditorItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
2
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
3
+ }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
4
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
5
+ }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
6
+ export declare const StyledGalleryEditorItemDeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$zIndex"> & {
3
7
  theme: import("@chayns-components/core").Theme;
4
- }>> & string;
8
+ } & {
9
+ $zIndex: number;
10
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$zIndex"> & {
11
+ theme: import("@chayns-components/core").Theme;
12
+ } & {
13
+ $zIndex: number;
14
+ }, never>>> & string;
@@ -11,6 +11,14 @@ export interface GalleryEditorItemProps {
11
11
  * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />
12
12
  */
13
13
  fileItem: InternalFileItem;
14
+ /**
15
+ * Controls whether the item may load the final media source immediately.
16
+ * @description
17
+ * The item forwards this flag to the shared media renderer so uploaded media can stay on the preview until loading is allowed.
18
+ * @default true
19
+ * @optional
20
+ */
21
+ shouldLoadImages?: boolean;
14
22
  /**
15
23
  * Is called when the delete button is clicked in edit mode.
16
24
  * @description
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React from 'react';
2
2
  import type { GalleryEditorMediaItemProps } from './GalleryEditorMediaItem.types';
3
- declare const GalleryEditorMediaItem: FC<GalleryEditorMediaItemProps>;
4
- export default GalleryEditorMediaItem;
3
+ declare const _default: React.NamedExoticComponent<GalleryEditorMediaItemProps>;
4
+ export default _default;
@@ -1,3 +1,5 @@
1
1
  export declare const StyledMotionGalleryEditorMediaItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
2
2
  ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
3
- }, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
3
+ }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
4
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
5
+ }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
@@ -11,6 +11,14 @@ export interface GalleryEditorMediaItemProps {
11
11
  * <GalleryEditorMediaItem fileItem={fileItem} onClick={handleOpen} ratio={1} />
12
12
  */
13
13
  fileItem: InternalFileItem;
14
+ /**
15
+ * Controls whether the media renderer may load the final uploaded source immediately.
16
+ * @description
17
+ * When disabled, the shared media renderer keeps showing the preview until the parent gallery allows the final load.
18
+ * @default true
19
+ * @optional
20
+ */
21
+ shouldLoadImages?: boolean;
14
22
  /**
15
23
  * Is called when the media tile is selected.
16
24
  * @description
@@ -27,4 +35,11 @@ export interface GalleryEditorMediaItemProps {
27
35
  * <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1.5} />
28
36
  */
29
37
  ratio: number;
38
+ /**
39
+ * Provides an optional preview source that can be shown before the final uploaded media loads.
40
+ * @description
41
+ * This is typically the local base64 preview generated while the file is still being uploaded.
42
+ * @optional
43
+ */
44
+ previewUrl?: string;
30
45
  }
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React from 'react';
2
2
  import type { GalleryEditorPreviewItemProps } from './GalleryEditorPreviewItem.types';
3
- declare const GalleryEditorPreviewItem: FC<GalleryEditorPreviewItemProps>;
4
- export default GalleryEditorPreviewItem;
3
+ declare const _default: React.NamedExoticComponent<GalleryEditorPreviewItemProps>;
4
+ export default _default;
@@ -1,10 +1,16 @@
1
1
  export declare const StyledMotionGalleryEditorPreviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
2
2
  ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
3
- }, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
4
- export declare const StyledGalleryEditorPreviewItemImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
3
+ }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
4
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
5
+ }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
6
+ export declare const StyledGalleryEditorPreviewItemImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
7
+ $ratio: number;
8
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
5
9
  $ratio: number;
6
- }>> & string;
7
- export declare const StyledGalleryEditorPreviewItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
10
+ }, never>>> & string;
11
+ export declare const StyledGalleryEditorPreviewItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
12
+ theme: import("@chayns-components/core").Theme;
13
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
8
14
  theme: import("@chayns-components/core").Theme;
9
- }>> & string;
10
- export declare const StyledGalleryEditorPreviewItemLoadingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
15
+ }, never>>> & string;
16
+ export declare const StyledGalleryEditorPreviewItemLoadingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
@@ -0,0 +1,21 @@
1
+ import { type FileItem, type InternalFileItem } from '@chayns-components/core';
2
+ import { type DragEvent } from 'react';
3
+ type UseGalleryEditorStateOptions = {
4
+ allowDragAndDrop: boolean;
5
+ doubleFileDialogMessage: string;
6
+ files?: FileItem[];
7
+ maxFiles?: number;
8
+ onAdd?: (file: FileItem) => void;
9
+ onFileCountChange?: (fileCount: number) => void;
10
+ onRemove?: (file: FileItem) => void;
11
+ };
12
+ type GalleryEditorStateResult = {
13
+ fileItems: InternalFileItem[];
14
+ handleAddFiles: (filesToAdd: File[]) => void;
15
+ handleClear: () => void;
16
+ handleDeleteFile: (id?: string) => void;
17
+ handleDrop: (event: DragEvent<HTMLDivElement>) => void;
18
+ handleOpenFiles: (file: InternalFileItem) => void;
19
+ };
20
+ declare const useGalleryEditorState: ({ allowDragAndDrop, doubleFileDialogMessage, files, maxFiles, onAdd, onFileCountChange, onRemove, }: UseGalleryEditorStateOptions) => GalleryEditorStateResult;
21
+ export default useGalleryEditorState;
@@ -0,0 +1 @@
1
+ export declare const GALLERY_VIEWER_MAX_VISIBLE_ITEMS = 4;
@@ -1,7 +1,11 @@
1
1
  import { GalleryViewMode } from '../../types/gallery';
2
- export declare const StyledGalleryViewer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
3
- export declare const StyledGalleryViewerItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
2
+ export declare const StyledGalleryViewer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
3
+ export declare const StyledGalleryViewerItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio" | "$itemCount" | "$viewMode"> & {
4
4
  $itemCount: number;
5
5
  $ratio: number;
6
6
  $viewMode: GalleryViewMode;
7
- }>> & string;
7
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio" | "$itemCount" | "$viewMode"> & {
8
+ $itemCount: number;
9
+ $ratio: number;
10
+ $viewMode: GalleryViewMode;
11
+ }, never>>> & string;
@@ -13,6 +13,17 @@ export interface GalleryViewerProps {
13
13
  * @optional
14
14
  */
15
15
  files?: FileItem[];
16
+ /**
17
+ * Controls whether the viewer may load the final media assets immediately.
18
+ * @description
19
+ * When set to `true`, the viewer renders and loads the actual images right away.
20
+ * When set to `false`, the viewer keeps showing previews first and defers the final image load until this flag becomes `true`.
21
+ * @default true
22
+ * @example
23
+ * <GalleryViewer files={files} shouldLoadImages={false} />
24
+ * @optional
25
+ */
26
+ shouldLoadImages?: boolean;
16
27
  /**
17
28
  * Defines how the media tiles are arranged in read-only mode.
18
29
  * @description
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React from 'react';
2
2
  import type { GalleryViewerItemProps } from './GalleryViewerItem.types';
3
- declare const GalleryViewerItem: FC<GalleryViewerItemProps>;
4
- export default GalleryViewerItem;
3
+ declare const _default: React.NamedExoticComponent<GalleryViewerItemProps>;
4
+ export default _default;
@@ -1,2 +1,2 @@
1
- export declare const StyledGalleryViewerItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
2
- export declare const StyledGalleryViewerMoreItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
1
+ export declare const StyledGalleryViewerItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
2
+ export declare const StyledGalleryViewerMoreItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
@@ -11,6 +11,14 @@ export interface GalleryViewerItemProps {
11
11
  * <GalleryViewerItem fileItem={file} onClick={handleOpen} />
12
12
  */
13
13
  fileItem: FileItem;
14
+ /**
15
+ * Controls whether the item may load the final media source immediately.
16
+ * @description
17
+ * The item forwards this flag to the shared media renderer so preview-first rendering can be controlled by the parent gallery.
18
+ * @default true
19
+ * @optional
20
+ */
21
+ shouldLoadImages?: boolean;
14
22
  /**
15
23
  * Defines the aspect ratio that should be reserved for the tile.
16
24
  * @description
@@ -0,0 +1,5 @@
1
+ export declare const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 200;
2
+ export declare const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DELAY_MS = 100;
3
+ export declare const MEDIA_CONTENT_IMAGE_BLUR_REMOVE_DURATION_MS = 200;
4
+ export declare const MEDIA_CONTENT_PREVIEW_BLUR = "blur(16px)";
5
+ export declare const MEDIA_CONTENT_PREVIEW_SCALE = 1.05;
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React from 'react';
2
2
  import type { MediaContentProps } from './MediaContent.types';
3
- declare const MediaContent: FC<MediaContentProps>;
4
- export default MediaContent;
3
+ declare const _default: React.NamedExoticComponent<MediaContentProps>;
4
+ export default _default;
@@ -1,13 +1,54 @@
1
- export declare const StyledMediaContentVideoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
1
+ export declare const StyledMediaContentVideoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
2
2
  $ratio: number;
3
- }>> & string;
4
- export declare const StyledMediaContentImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
3
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
5
4
  $ratio: number;
6
- }>> & string;
7
- export declare const StyledMediaContentImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
5
+ }, never>>> & string;
6
+ export declare const StyledMediaContentImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
7
+ $ratio: number;
8
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
9
+ $ratio: number;
10
+ }, never>>> & string;
11
+ export declare const StyledMediaContentPreviewImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
12
+ theme: import("@chayns-components/core").Theme;
13
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
14
+ theme: import("@chayns-components/core").Theme;
15
+ }, never>> & {
16
+ as?: import("styled-components").WebTarget | undefined;
17
+ forwardedAs?: import("styled-components").WebTarget | undefined;
18
+ }, "ref"> & {
19
+ ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
20
+ }, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
21
+ theme: import("@chayns-components/core").Theme;
22
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
23
+ theme: import("@chayns-components/core").Theme;
24
+ }, never>> & {
25
+ as?: import("styled-components").WebTarget | undefined;
26
+ forwardedAs?: import("styled-components").WebTarget | undefined;
27
+ }, "ref"> & {
28
+ ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
29
+ }, never>>> & string;
30
+ export declare const StyledMediaContentImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
31
+ theme: import("@chayns-components/core").Theme;
32
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
33
+ theme: import("@chayns-components/core").Theme;
34
+ }, never>> & {
35
+ as?: import("styled-components").WebTarget | undefined;
36
+ forwardedAs?: import("styled-components").WebTarget | undefined;
37
+ }, "ref"> & {
38
+ ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
39
+ }, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
40
+ theme: import("@chayns-components/core").Theme;
41
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
42
+ theme: import("@chayns-components/core").Theme;
43
+ }, never>> & {
44
+ as?: import("styled-components").WebTarget | undefined;
45
+ forwardedAs?: import("styled-components").WebTarget | undefined;
46
+ }, "ref"> & {
47
+ ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
48
+ }, never>>> & string;
49
+ export declare const StyledMediaContentVideo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "theme"> & {
8
50
  theme: import("@chayns-components/core").Theme;
9
- }>> & string;
10
- export declare const StyledMediaContentVideo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, {
51
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "theme"> & {
11
52
  theme: import("@chayns-components/core").Theme;
12
- }>> & string;
13
- export declare const StyledMediaContentPlayIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
53
+ }, never>>> & string;
54
+ export declare const StyledMediaContentPlayIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
@@ -11,6 +11,14 @@ export interface MediaContentProps {
11
11
  * <MediaContent file={file.file} onClick={handleOpen} ratio={1} />
12
12
  */
13
13
  file: FileItem['file'];
14
+ /**
15
+ * Provides an optional preview source that can be displayed while the final media is still loading.
16
+ * @description
17
+ * This preview can be a base64 data URL or any low-resolution fallback image.
18
+ * When provided, the component shows the preview first and swaps to the final image once it has finished loading.
19
+ * @optional
20
+ */
21
+ previewUrl?: string;
14
22
  /**
15
23
  * Defines the aspect ratio that should be reserved for the media.
16
24
  * @description
@@ -19,6 +27,14 @@ export interface MediaContentProps {
19
27
  * <MediaContent file={file.file} onClick={handleOpen} ratio={1.5} />
20
28
  */
21
29
  ratio: number;
30
+ /**
31
+ * Controls whether the final media source may be loaded immediately.
32
+ * @description
33
+ * When set to `false`, only the preview source is rendered until this flag becomes `true`.
34
+ * @default true
35
+ * @optional
36
+ */
37
+ shouldLoadImages?: boolean;
22
38
  /**
23
39
  * Is called when the media tile is selected.
24
40
  * @description
@@ -0,0 +1,12 @@
1
+ import type { FileItem, Video } from '@chayns-components/core';
2
+ export type GalleryMediaFile = FileItem['file'];
3
+ export type MediaContentSize = {
4
+ height: number;
5
+ width: number;
6
+ };
7
+ export declare const isVideoFile: (file: GalleryMediaFile) => file is Video;
8
+ export declare const getMediaSourceUrl: (file: GalleryMediaFile) => string;
9
+ export declare const getMediaPreviewUrl: (file: GalleryMediaFile, previewUrl?: string) => string | undefined;
10
+ export declare const isImageServiceUrl: (url: string) => boolean;
11
+ export declare const hasImageServiceTransformParameters: (url: string) => boolean;
12
+ export declare const getResponsiveImageServiceUrl: (url: string, size?: MediaContentSize, devicePixelRatio?: number) => string;
@@ -0,0 +1,3 @@
1
+ import type { MediaContentSize } from './MediaContent.utils';
2
+ declare const useMediaContentSize: (element: HTMLElement | null) => MediaContentSize | undefined;
3
+ export default useMediaContentSize;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/gallery",
3
- "version": "5.2.4-alpha.0",
3
+ "version": "5.2.5",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -54,7 +54,7 @@
54
54
  "devDependencies": {
55
55
  "@babel/cli": "^7.28.6",
56
56
  "@babel/core": "^7.29.0",
57
- "@babel/preset-env": "^7.29.0",
57
+ "@babel/preset-env": "^7.29.5",
58
58
  "@babel/preset-react": "^7.28.5",
59
59
  "@babel/preset-typescript": "^7.28.5",
60
60
  "@types/react": "^18.3.28",
@@ -70,7 +70,7 @@
70
70
  "typescript": "^5.9.3"
71
71
  },
72
72
  "dependencies": {
73
- "@chayns-components/core": "^5.2.4-alpha.0",
73
+ "@chayns-components/core": "^5.2.5",
74
74
  "react-compiler-runtime": "^1.0.0",
75
75
  "uuid": "^10.0.0"
76
76
  },
@@ -84,5 +84,5 @@
84
84
  "publishConfig": {
85
85
  "access": "public"
86
86
  },
87
- "gitHead": "8143498fb4c078171a18850873441b3e20dc48bf"
87
+ "gitHead": "0b2c4471ad3dfb85b9881578c30b09bb9e9d782e"
88
88
  }