@chayns-components/gallery 5.0.0-beta.576 → 5.0.0-beta.579

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 (79) hide show
  1. package/lib/cjs/components/Gallery.js +309 -0
  2. package/lib/cjs/components/Gallery.js.map +1 -0
  3. package/lib/cjs/components/Gallery.styles.js +92 -0
  4. package/lib/cjs/components/Gallery.styles.js.map +1 -0
  5. package/lib/cjs/components/add-file/AddFile.js +33 -0
  6. package/lib/cjs/components/add-file/AddFile.js.map +1 -0
  7. package/lib/cjs/components/add-file/AddFile.styles.js +23 -0
  8. package/lib/cjs/components/add-file/AddFile.styles.js.map +1 -0
  9. package/lib/cjs/components/gallery-item/GalleryItem.js +43 -0
  10. package/lib/cjs/components/gallery-item/GalleryItem.js.map +1 -0
  11. package/lib/cjs/components/gallery-item/GalleryItem.styles.js +51 -0
  12. package/lib/cjs/components/gallery-item/GalleryItem.styles.js.map +1 -0
  13. package/lib/cjs/components/gallery-item/media-item/MediaItem.js +52 -0
  14. package/lib/cjs/components/gallery-item/media-item/MediaItem.js.map +1 -0
  15. package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js +62 -0
  16. package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
  17. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js +45 -0
  18. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
  19. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js +43 -0
  20. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
  21. package/lib/cjs/index.js +21 -0
  22. package/lib/cjs/index.js.map +1 -0
  23. package/lib/cjs/types/gallery.js +12 -0
  24. package/lib/cjs/types/gallery.js.map +1 -0
  25. package/lib/cjs/utils/file.js +51 -0
  26. package/lib/cjs/utils/file.js.map +1 -0
  27. package/lib/esm/components/Gallery.js.map +1 -0
  28. package/lib/esm/components/Gallery.styles.js.map +1 -0
  29. package/lib/esm/components/add-file/AddFile.js.map +1 -0
  30. package/lib/esm/components/add-file/AddFile.styles.js.map +1 -0
  31. package/lib/esm/components/gallery-item/GalleryItem.js.map +1 -0
  32. package/lib/esm/components/gallery-item/GalleryItem.styles.js.map +1 -0
  33. package/lib/esm/components/gallery-item/media-item/MediaItem.js.map +1 -0
  34. package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
  35. package/lib/esm/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
  36. package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
  37. package/lib/esm/index.js.map +1 -0
  38. package/lib/esm/types/gallery.js.map +1 -0
  39. package/lib/esm/utils/file.js.map +1 -0
  40. package/lib/{components → types/components}/add-file/AddFile.styles.d.ts +1 -1
  41. package/lib/{components → types/components}/gallery-item/GalleryItem.d.ts +1 -1
  42. package/lib/{components → types/components}/gallery-item/GalleryItem.styles.d.ts +1 -1
  43. package/lib/{components → types/components}/gallery-item/media-item/MediaItem.d.ts +1 -1
  44. package/lib/{components → types/components}/gallery-item/media-item/MediaItem.styles.d.ts +3 -3
  45. package/lib/{components → types/components}/gallery-item/preview-item/PreviewItem.d.ts +1 -1
  46. package/lib/{components → types/components}/gallery-item/preview-item/PreviewItem.styles.d.ts +2 -2
  47. package/package.json +17 -7
  48. package/lib/components/Gallery.js.map +0 -1
  49. package/lib/components/Gallery.styles.js.map +0 -1
  50. package/lib/components/add-file/AddFile.js.map +0 -1
  51. package/lib/components/add-file/AddFile.styles.js.map +0 -1
  52. package/lib/components/gallery-item/GalleryItem.js.map +0 -1
  53. package/lib/components/gallery-item/GalleryItem.styles.js.map +0 -1
  54. package/lib/components/gallery-item/media-item/MediaItem.js.map +0 -1
  55. package/lib/components/gallery-item/media-item/MediaItem.styles.js.map +0 -1
  56. package/lib/components/gallery-item/preview-item/PreviewItem.js.map +0 -1
  57. package/lib/components/gallery-item/preview-item/PreviewItem.styles.js.map +0 -1
  58. package/lib/index.js.map +0 -1
  59. package/lib/types/gallery.js.map +0 -1
  60. package/lib/utils/file.js.map +0 -1
  61. /package/lib/{components → esm/components}/Gallery.js +0 -0
  62. /package/lib/{components → esm/components}/Gallery.styles.js +0 -0
  63. /package/lib/{components → esm/components}/add-file/AddFile.js +0 -0
  64. /package/lib/{components → esm/components}/add-file/AddFile.styles.js +0 -0
  65. /package/lib/{components → esm/components}/gallery-item/GalleryItem.js +0 -0
  66. /package/lib/{components → esm/components}/gallery-item/GalleryItem.styles.js +0 -0
  67. /package/lib/{components → esm/components}/gallery-item/media-item/MediaItem.js +0 -0
  68. /package/lib/{components → esm/components}/gallery-item/media-item/MediaItem.styles.js +0 -0
  69. /package/lib/{components → esm/components}/gallery-item/preview-item/PreviewItem.js +0 -0
  70. /package/lib/{components → esm/components}/gallery-item/preview-item/PreviewItem.styles.js +0 -0
  71. /package/lib/{index.js → esm/index.js} +0 -0
  72. /package/lib/{types → esm/types}/gallery.js +0 -0
  73. /package/lib/{utils → esm/utils}/file.js +0 -0
  74. /package/lib/{components → types/components}/Gallery.d.ts +0 -0
  75. /package/lib/{components → types/components}/Gallery.styles.d.ts +0 -0
  76. /package/lib/{components → types/components}/add-file/AddFile.d.ts +0 -0
  77. /package/lib/{index.d.ts → types/index.d.ts} +0 -0
  78. /package/lib/types/{gallery.d.ts → types/gallery.d.ts} +0 -0
  79. /package/lib/{utils → types/utils}/file.d.ts +0 -0
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledGalleryItemMoreItemsIndicator = exports.StyledGalleryItemDeleteButton = exports.StyledGalleryItem = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
+ const StyledGalleryItem = exports.StyledGalleryItem = _styledComponents.default.div`
10
+ display: flex;
11
+ position: relative;
12
+ height: 100%;
13
+ width: 100%;
14
+ `;
15
+ const StyledGalleryItemDeleteButton = exports.StyledGalleryItemDeleteButton = _styledComponents.default.button`
16
+ background-color: rgba(
17
+ ${({
18
+ theme
19
+ }) => theme['000-rgb']},
20
+ 0.75
21
+ );
22
+ box-shadow: 0 0 0 1px
23
+ rgba(${({
24
+ theme
25
+ }) => theme['009-rgb']}, 0.08) inset;
26
+ position: absolute;
27
+ top: 0;
28
+ right: 0;
29
+ z-index: 2;
30
+ height: 30px;
31
+ width: 30px;
32
+ display: flex;
33
+ justify-content: center;
34
+ align-items: center;
35
+ `;
36
+ const StyledGalleryItemMoreItemsIndicator = exports.StyledGalleryItemMoreItemsIndicator = _styledComponents.default.div`
37
+ position: absolute;
38
+ z-index: 2;
39
+ height: 100%;
40
+ width: 100%;
41
+ display: flex;
42
+ justify-content: center;
43
+ align-items: center;
44
+ backdrop-filter: brightness(40%);
45
+
46
+ p {
47
+ font-size: 40px;
48
+ color: white;
49
+ }
50
+ `;
51
+ //# sourceMappingURL=GalleryItem.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GalleryItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledGalleryItem","exports","styled","div","StyledGalleryItemDeleteButton","button","theme","StyledGalleryItemMoreItemsIndicator"],"sources":["../../../../src/components/gallery-item/GalleryItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGalleryItem = styled.div`\n display: flex;\n position: relative;\n height: 100%;\n width: 100%;\n`;\n\ntype StyledGalleryItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemDeleteButton = styled.button<StyledGalleryItemDeleteButtonProps>`\n background-color: rgba(\n ${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['000-rgb']},\n 0.75\n );\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['009-rgb']}, 0.08) inset;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n height: 30px;\n width: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const StyledGalleryItemMoreItemsIndicator = styled.div`\n position: absolute;\n z-index: 2;\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n backdrop-filter: brightness(40%);\n\n p {\n font-size: 40px;\n color: white;\n }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAI;AAC5C;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAGF,yBAAM,CAACG,MAA2C;AAC/F;AACA,UAAU,CAAC;EAAEC;AAA0C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAE;AAC9E;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAA0C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAE;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,mCAAmC,GAAAN,OAAA,CAAAM,mCAAA,GAAGL,yBAAM,CAACC,GAAI;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,52 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _core = require("@chayns-components/core");
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _MediaItem = require("./MediaItem.styles");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ const MediaItem = ({
12
+ fileItem,
13
+ isEditMode,
14
+ openSelectedFile,
15
+ ratio
16
+ }) => {
17
+ var _fileItem$uploadedFil;
18
+ return /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMotionMediaItem, {
19
+ animate: {
20
+ opacity: 1
21
+ },
22
+ initial: {
23
+ opacity: 0
24
+ },
25
+ exit: {
26
+ opacity: 0
27
+ },
28
+ transition: {
29
+ duration: 3.2
30
+ }
31
+ }, fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemVideoWrapper, {
32
+ onClick: () => openSelectedFile(fileItem),
33
+ $ratio: ratio
34
+ }, /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemPlayIcon, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
35
+ size: isEditMode ? 30 : 50,
36
+ icons: ['fa fa-play']
37
+ })), /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemVideo, {
38
+ poster: fileItem.uploadedFile.thumbnailUrl
39
+ }, /*#__PURE__*/_react.default.createElement("source", {
40
+ src: fileItem.uploadedFile.url,
41
+ type: "video/mp4"
42
+ }))) : /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemImageWrapper, {
43
+ onClick: () => openSelectedFile(fileItem),
44
+ $ratio: ratio
45
+ }, /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemImage, {
46
+ draggable: false,
47
+ src: (_fileItem$uploadedFil = fileItem.uploadedFile) === null || _fileItem$uploadedFil === void 0 ? void 0 : _fileItem$uploadedFil.url
48
+ })));
49
+ };
50
+ MediaItem.displayName = 'MediaItem';
51
+ var _default = exports.default = MediaItem;
52
+ //# sourceMappingURL=MediaItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MediaItem.js","names":["_core","require","_react","_interopRequireDefault","_MediaItem","obj","__esModule","default","MediaItem","fileItem","isEditMode","openSelectedFile","ratio","_fileItem$uploadedFil","createElement","StyledMotionMediaItem","animate","opacity","initial","exit","transition","duration","uploadedFile","StyledMediaItemVideoWrapper","onClick","$ratio","StyledMediaItemPlayIcon","Icon","size","icons","StyledMediaItemVideo","poster","thumbnailUrl","src","url","type","StyledMediaItemImageWrapper","StyledMediaItemImage","draggable","displayName","_default","exports"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n StyledMediaItemImage,\n StyledMediaItemImageWrapper,\n StyledMediaItemPlayIcon,\n StyledMediaItemVideo,\n StyledMediaItemVideoWrapper,\n StyledMotionMediaItem,\n} from './MediaItem.styles';\n\nexport type MediaItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is selected\n */\n openSelectedFile: (file: InternalFileItem) => void;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst MediaItem: FC<MediaItemProps> = ({ fileItem, isEditMode, openSelectedFile, ratio }) => (\n <StyledMotionMediaItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 3.2 }}\n >\n {fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? (\n <StyledMediaItemVideoWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemPlayIcon>\n <Icon size={isEditMode ? 30 : 50} icons={['fa fa-play']} />\n </StyledMediaItemPlayIcon>\n <StyledMediaItemVideo poster={fileItem.uploadedFile.thumbnailUrl}>\n <source src={fileItem.uploadedFile.url} type=\"video/mp4\" />\n </StyledMediaItemVideo>\n </StyledMediaItemVideoWrapper>\n ) : (\n <StyledMediaItemImageWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemImage draggable={false} src={fileItem.uploadedFile?.url} />\n </StyledMediaItemImageWrapper>\n )}\n </StyledMotionMediaItem>\n);\n\nMediaItem.displayName = 'MediaItem';\n\nexport default MediaItem;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAO4B,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAqB5B,MAAMG,SAA6B,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC,gBAAgB;EAAEC;AAAM,CAAC;EAAA,IAAAC,qBAAA;EAAA,oBACpFX,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAW,qBAAqB;IAClBC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MAAEF,OAAO,EAAE;IAAE,CAAE;IACrBG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BZ,QAAQ,CAACa,YAAY,IAAI,cAAc,IAAIb,QAAQ,CAACa,YAAY,gBAC7DpB,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAmB,2BAA2B;IAACC,OAAO,EAAEA,CAAA,KAAMb,gBAAgB,CAACF,QAAQ,CAAE;IAACgB,MAAM,EAAEb;EAAM,gBAClFV,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAsB,uBAAuB,qBACpBxB,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACd,KAAA,CAAA2B,IAAI;IAACC,IAAI,EAAElB,UAAU,GAAG,EAAE,GAAG,EAAG;IAACmB,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CACrC,CAAC,eAC1B3B,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAA0B,oBAAoB;IAACC,MAAM,EAAEtB,QAAQ,CAACa,YAAY,CAACU;EAAa,gBAC7D9B,MAAA,CAAAK,OAAA,CAAAO,aAAA;IAAQmB,GAAG,EAAExB,QAAQ,CAACa,YAAY,CAACY,GAAI;IAACC,IAAI,EAAC;EAAW,CAAE,CACxC,CACG,CAAC,gBAE9BjC,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAgC,2BAA2B;IAACZ,OAAO,EAAEA,CAAA,KAAMb,gBAAgB,CAACF,QAAQ,CAAE;IAACgB,MAAM,EAAEb;EAAM,gBAClFV,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAiC,oBAAoB;IAACC,SAAS,EAAE,KAAM;IAACL,GAAG,GAAApB,qBAAA,GAAEJ,QAAQ,CAACa,YAAY,cAAAT,qBAAA,uBAArBA,qBAAA,CAAuBqB;EAAI,CAAE,CACjD,CAEd,CAAC;AAAA,CAC3B;AAED1B,SAAS,CAAC+B,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAErBC,SAAS","ignoreList":[]}
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledMotionMediaItem = exports.StyledMediaItemVideoWrapper = exports.StyledMediaItemVideo = exports.StyledMediaItemPlayIcon = exports.StyledMediaItemImageWrapper = exports.StyledMediaItemImage = void 0;
7
+ var _framerMotion = require("framer-motion");
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ const StyledMotionMediaItem = exports.StyledMotionMediaItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
11
+ display: flex;
12
+ width: 100%;
13
+ height: 100%;
14
+ `;
15
+ const StyledMediaItemVideoWrapper = exports.StyledMediaItemVideoWrapper = _styledComponents.default.div`
16
+ display: flex;
17
+ width: 100%;
18
+ height: 100%;
19
+ aspect-ratio: ${({
20
+ $ratio
21
+ }) => $ratio};
22
+ `;
23
+ const StyledMediaItemImageWrapper = exports.StyledMediaItemImageWrapper = _styledComponents.default.div`
24
+ display: flex;
25
+ width: 100%;
26
+ height: 100%;
27
+ aspect-ratio: ${({
28
+ $ratio
29
+ }) => $ratio};
30
+ `;
31
+ const StyledMediaItemImage = exports.StyledMediaItemImage = _styledComponents.default.img`
32
+ background-color: ${({
33
+ theme
34
+ }) => theme['101']};
35
+ box-shadow: 0 0 0 1px rgba(${({
36
+ theme
37
+ }) => theme['009-rgb']}, 0.08)
38
+ inset;
39
+ z-index: 1;
40
+ width: 100%;
41
+ height: 100%;
42
+ object-fit: cover;
43
+ `;
44
+ const StyledMediaItemVideo = exports.StyledMediaItemVideo = _styledComponents.default.video`
45
+ background-color: ${({
46
+ theme
47
+ }) => theme['101']};
48
+ box-shadow: 0 0 0 1px rgba(${({
49
+ theme
50
+ }) => theme['009-rgb']}, 0.08)
51
+ inset;
52
+ width: 100%;
53
+ object-fit: cover;
54
+ `;
55
+ const StyledMediaItemPlayIcon = exports.StyledMediaItemPlayIcon = _styledComponents.default.div`
56
+ position: absolute;
57
+ z-index: 2;
58
+ top: 50%;
59
+ left: 50%;
60
+ transform: translate(-50%, -50%);
61
+ `;
62
+ //# sourceMappingURL=MediaItem.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MediaItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledMotionMediaItem","exports","styled","motion","div","StyledMediaItemVideoWrapper","$ratio","StyledMediaItemImageWrapper","StyledMediaItemImage","img","theme","StyledMediaItemVideo","video","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n inset;\n width: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = 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,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC5E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAJ,OAAA,CAAAI,2BAAA,GAAGH,yBAAM,CAACE,GAAwB;AAC1E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAO;AAC3C,CAAC;AAEM,MAAMC,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACE,GAAwB;AAC1E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAO;AAC3C,CAAC;AAMM,MAAME,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAGN,yBAAM,CAACO,GAA+B;AAC1E,wBAAwB,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AAC/E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAE;AAC5F;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,oBAAoB,GAAAV,OAAA,CAAAU,oBAAA,GAAGT,yBAAM,CAACU,KAAiC;AAC5E,wBAAwB,CAAC;EAAEF;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AAC/E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAE;AAC5F;AACA;AACA;AACA,CAAC;AAEM,MAAMG,uBAAuB,GAAAZ,OAAA,CAAAY,uBAAA,GAAGX,yBAAM,CAACE,GAAI;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _core = require("@chayns-components/core");
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _PreviewItem = require("./PreviewItem.styles");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ const PreviewItem = ({
12
+ fileItem,
13
+ ratio
14
+ }) => /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledMotionPreviewItem, {
15
+ animate: {
16
+ opacity: 1
17
+ },
18
+ initial: {
19
+ opacity: 0
20
+ },
21
+ exit: {
22
+ opacity: 0,
23
+ transition: {
24
+ duration: 3.2,
25
+ delay: 3.2
26
+ }
27
+ },
28
+ transition: {
29
+ duration: 3.2
30
+ },
31
+ style: {
32
+ position: 'absolute'
33
+ }
34
+ }, /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledPreviewItemImageWrapper, {
35
+ $ratio: ratio
36
+ }, /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledPreviewItemLoadingIcon, null, /*#__PURE__*/_react.default.createElement(_core.SmallWaitCursor, {
37
+ shouldHideWaitCursor: false,
38
+ shouldHideBackground: true
39
+ })), /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledPreviewItemImage, {
40
+ draggable: false,
41
+ src: fileItem.previewUrl
42
+ })));
43
+ PreviewItem.displayName = 'PreviewItem';
44
+ var _default = exports.default = PreviewItem;
45
+ //# sourceMappingURL=PreviewItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewItem.js","names":["_core","require","_react","_interopRequireDefault","_PreviewItem","obj","__esModule","default","PreviewItem","fileItem","ratio","createElement","StyledMotionPreviewItem","animate","opacity","initial","exit","transition","duration","delay","style","position","StyledPreviewItemImageWrapper","$ratio","StyledPreviewItemLoadingIcon","SmallWaitCursor","shouldHideWaitCursor","shouldHideBackground","StyledPreviewItemImage","draggable","src","previewUrl","displayName","_default","exports"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.tsx"],"sourcesContent":["import { InternalFileItem, SmallWaitCursor } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n StyledMotionPreviewItem,\n StyledPreviewItemImage,\n StyledPreviewItemImageWrapper,\n StyledPreviewItemLoadingIcon,\n} from './PreviewItem.styles';\n\nexport type PreviewItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst PreviewItem: FC<PreviewItemProps> = ({ fileItem, ratio }) => (\n <StyledMotionPreviewItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{\n opacity: 0,\n transition: { duration: 3.2, delay: 3.2 },\n }}\n transition={{ duration: 3.2 }}\n style={{ position: 'absolute' }}\n >\n <StyledPreviewItemImageWrapper $ratio={ratio}>\n <StyledPreviewItemLoadingIcon>\n <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n </StyledPreviewItemLoadingIcon>\n <StyledPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n </StyledPreviewItemImageWrapper>\n </StyledMotionPreviewItem>\n);\n\nPreviewItem.displayName = 'PreviewItem';\n\nexport default PreviewItem;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAK8B,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAa9B,MAAMG,WAAiC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAC,kBAC1DR,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACP,YAAA,CAAAQ,uBAAuB;EACpBC,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IACFF,OAAO,EAAE,CAAC;IACVG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,KAAK,EAAE;IAAI;EAC5C,CAAE;EACFF,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI,CAAE;EAC9BE,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAW;AAAE,gBAEhCnB,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACP,YAAA,CAAAkB,6BAA6B;EAACC,MAAM,EAAEb;AAAM,gBACzCR,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACP,YAAA,CAAAoB,4BAA4B,qBACzBtB,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACX,KAAA,CAAAyB,eAAe;EAACC,oBAAoB,EAAE,KAAM;EAACC,oBAAoB;AAAA,CAAE,CAC1C,CAAC,eAC/BzB,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACP,YAAA,CAAAwB,sBAAsB;EAACC,SAAS,EAAE,KAAM;EAACC,GAAG,EAAErB,QAAQ,CAACsB;AAAW,CAAE,CAC1C,CACV,CAC5B;AAEDvB,WAAW,CAACwB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEzBC,WAAW","ignoreList":[]}
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledPreviewItemLoadingIcon = exports.StyledPreviewItemImageWrapper = exports.StyledPreviewItemImage = exports.StyledMotionPreviewItem = void 0;
7
+ var _framerMotion = require("framer-motion");
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ const StyledMotionPreviewItem = exports.StyledMotionPreviewItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
11
+ display: flex;
12
+ width: 100%;
13
+ height: 100%;
14
+ `;
15
+ const StyledPreviewItemImageWrapper = exports.StyledPreviewItemImageWrapper = _styledComponents.default.div`
16
+ display: flex;
17
+ width: 100%;
18
+ height: 100%;
19
+ aspect-ratio: ${({
20
+ $ratio
21
+ }) => $ratio};
22
+ `;
23
+ const StyledPreviewItemImage = exports.StyledPreviewItemImage = _styledComponents.default.img`
24
+ background-color: ${({
25
+ theme
26
+ }) => theme['101']};
27
+ box-shadow: 0 0 0 1px
28
+ rgba(${({
29
+ theme
30
+ }) => theme['009-rgb']}, 0.08) inset;
31
+ z-index: 1;
32
+ width: 100%;
33
+ height: 100%;
34
+ object-fit: cover;
35
+ `;
36
+ const StyledPreviewItemLoadingIcon = exports.StyledPreviewItemLoadingIcon = _styledComponents.default.div`
37
+ position: absolute;
38
+ z-index: 2;
39
+ top: 50%;
40
+ left: 50%;
41
+ transform: translate(-50%, -50%);
42
+ `;
43
+ //# sourceMappingURL=PreviewItem.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledMotionPreviewItem","exports","styled","motion","div","StyledPreviewItemImageWrapper","$ratio","StyledPreviewItemImage","img","theme","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = 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,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC9E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAwB;AAC5E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAO;AAC3C,CAAC;AAIM,MAAMC,sBAAsB,GAAAN,OAAA,CAAAM,sBAAA,GAAGL,yBAAM,CAACM,GAAiC;AAC9E,wBAAwB,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AACjF;AACA,eAAe,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAE;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,4BAA4B,GAAAT,OAAA,CAAAS,4BAAA,GAAGR,yBAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Gallery", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _Gallery.default;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "GalleryViewMode", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _gallery.GalleryViewMode;
16
+ }
17
+ });
18
+ var _Gallery = _interopRequireDefault(require("./components/Gallery"));
19
+ var _gallery = require("./types/gallery");
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["_Gallery","_interopRequireDefault","require","_gallery","obj","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAkD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA","ignoreList":[]}
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.GalleryViewMode = void 0;
7
+ let GalleryViewMode = exports.GalleryViewMode = /*#__PURE__*/function (GalleryViewMode) {
8
+ GalleryViewMode[GalleryViewMode["SQUARE"] = 0] = "SQUARE";
9
+ GalleryViewMode[GalleryViewMode["GRID"] = 1] = "GRID";
10
+ return GalleryViewMode;
11
+ }({});
12
+ //# sourceMappingURL=gallery.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"gallery.js","names":["GalleryViewMode","exports"],"sources":["../../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n SQUARE,\n GRID,\n}\n"],"mappings":";;;;;;IAAYA,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.generateVideoThumbnail = exports.generatePreviewUrl = exports.filterDuplicateFile = void 0;
7
+ const filterDuplicateFile = ({
8
+ newFile,
9
+ files
10
+ }) => {
11
+ const duplicates = files.filter(({
12
+ file
13
+ }) => file && file.name === newFile.name && file.size === newFile.size);
14
+ return duplicates.length > 0;
15
+ };
16
+ exports.filterDuplicateFile = filterDuplicateFile;
17
+ const generatePreviewUrl = ({
18
+ callback,
19
+ file
20
+ }) => {
21
+ const reader = new FileReader();
22
+ reader.onload = event => {
23
+ var _event$target;
24
+ const previewUrl = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
25
+ callback(previewUrl);
26
+ };
27
+ reader.readAsDataURL(file);
28
+ };
29
+ exports.generatePreviewUrl = generatePreviewUrl;
30
+ const generateVideoThumbnail = ({
31
+ file,
32
+ callback
33
+ }) => {
34
+ const canvas = document.createElement('canvas');
35
+ const video = document.createElement('video');
36
+
37
+ // this is important
38
+ video.autoplay = true;
39
+ video.muted = true;
40
+ video.src = URL.createObjectURL(file);
41
+ video.onloadeddata = () => {
42
+ const ctx = canvas.getContext('2d');
43
+ canvas.width = video.videoWidth;
44
+ canvas.height = video.videoHeight;
45
+ ctx === null || ctx === void 0 || ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
46
+ video.pause();
47
+ callback(canvas.toDataURL('image/png'));
48
+ };
49
+ };
50
+ exports.generateVideoThumbnail = generateVideoThumbnail;
51
+ //# sourceMappingURL=file.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file.js","names":["filterDuplicateFile","newFile","files","duplicates","filter","file","name","size","length","exports","generatePreviewUrl","callback","reader","FileReader","onload","event","_event$target","previewUrl","target","result","readAsDataURL","generateVideoThumbnail","canvas","document","createElement","video","autoplay","muted","src","URL","createObjectURL","onloadeddata","ctx","getContext","width","videoWidth","height","videoHeight","drawImage","pause","toDataURL"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\ninterface FilerDuplicateFileOptions {\n files: InternalFileItem[];\n newFile: File;\n}\n\nexport const filterDuplicateFile = ({ newFile, files }: FilerDuplicateFileOptions) => {\n const duplicates = files.filter(\n ({ file }) => file && file.name === newFile.name && file.size === newFile.size,\n );\n\n return duplicates.length > 0;\n};\n\ninterface GeneratePreviewUrlOptions {\n file: File;\n callback: (previewUrl: string) => void;\n}\n\nexport const generatePreviewUrl = ({ callback, file }: GeneratePreviewUrlOptions): void => {\n const reader = new FileReader();\n\n reader.onload = (event) => {\n const previewUrl = event.target?.result as string;\n\n callback(previewUrl);\n };\n\n reader.readAsDataURL(file);\n};\n\ninterface GenerateVideoThumbnailOptions {\n file: File;\n callback: (previewUrl: string) => void;\n}\n\nexport const generateVideoThumbnail = ({ file, callback }: GenerateVideoThumbnailOptions) => {\n const canvas = document.createElement('canvas');\n const video = document.createElement('video');\n\n // this is important\n video.autoplay = true;\n video.muted = true;\n video.src = URL.createObjectURL(file);\n\n video.onloadeddata = () => {\n const ctx = canvas.getContext('2d');\n\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n\n ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n video.pause();\n\n callback(canvas.toDataURL('image/png'));\n };\n};\n"],"mappings":";;;;;;AAOO,MAAMA,mBAAmB,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAiC,CAAC,KAAK;EAClF,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,CAC3B,CAAC;IAAEC;EAAK,CAAC,KAAKA,IAAI,IAAIA,IAAI,CAACC,IAAI,KAAKL,OAAO,CAACK,IAAI,IAAID,IAAI,CAACE,IAAI,KAAKN,OAAO,CAACM,IAC9E,CAAC;EAED,OAAOJ,UAAU,CAACK,MAAM,GAAG,CAAC;AAChC,CAAC;AAACC,OAAA,CAAAT,mBAAA,GAAAA,mBAAA;AAOK,MAAMU,kBAAkB,GAAGA,CAAC;EAAEC,QAAQ;EAAEN;AAAgC,CAAC,KAAW;EACvF,MAAMO,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,KAAK,IAAK;IAAA,IAAAC,aAAA;IACvB,MAAMC,UAAU,IAAAD,aAAA,GAAGD,KAAK,CAACG,MAAM,cAAAF,aAAA,uBAAZA,aAAA,CAAcG,MAAgB;IAEjDR,QAAQ,CAACM,UAAU,CAAC;EACxB,CAAC;EAEDL,MAAM,CAACQ,aAAa,CAACf,IAAI,CAAC;AAC9B,CAAC;AAACI,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAOK,MAAMW,sBAAsB,GAAGA,CAAC;EAAEhB,IAAI;EAAEM;AAAwC,CAAC,KAAK;EACzF,MAAMW,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;EAC/C,MAAMC,KAAK,GAAGF,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;;EAE7C;EACAC,KAAK,CAACC,QAAQ,GAAG,IAAI;EACrBD,KAAK,CAACE,KAAK,GAAG,IAAI;EAClBF,KAAK,CAACG,GAAG,GAAGC,GAAG,CAACC,eAAe,CAACzB,IAAI,CAAC;EAErCoB,KAAK,CAACM,YAAY,GAAG,MAAM;IACvB,MAAMC,GAAG,GAAGV,MAAM,CAACW,UAAU,CAAC,IAAI,CAAC;IAEnCX,MAAM,CAACY,KAAK,GAAGT,KAAK,CAACU,UAAU;IAC/Bb,MAAM,CAACc,MAAM,GAAGX,KAAK,CAACY,WAAW;IAEjCL,GAAG,aAAHA,GAAG,eAAHA,GAAG,CAAEM,SAAS,CAACb,KAAK,EAAE,CAAC,EAAE,CAAC,EAAEA,KAAK,CAACU,UAAU,EAAEV,KAAK,CAACY,WAAW,CAAC;IAChEZ,KAAK,CAACc,KAAK,CAAC,CAAC;IAEb5B,QAAQ,CAACW,MAAM,CAACkB,SAAS,CAAC,WAAW,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC;AAAC/B,OAAA,CAAAY,sBAAA,GAAAA,sBAAA","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Gallery.js","names":["uploadFile","createDialog","DialogType","MediaType","openMedia","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","GalleryViewMode","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","AddFile","GalleryItem","StyledGallery","StyledGalleryEditModeWrapper","StyledGalleryItemWrapper","Gallery","_ref","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","type","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","url","undefined","prevElement","find","_ref2","newUploadedFile","state","tmp","forEach","updatedFile","push","length","filesToGeneratePreview","filter","filesToUpload","includes","callback","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","newFile","updatedItems","prevItem","newItem","item","concat","some","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","items","replace","mediaType","VIDEO","IMAGE","ratio","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","slice","index","imageRatio","remainingItemsLength","$fileMinWidth","onDragOver","onDrop","$ratio","$uploadedFileLength","$viewMode","displayName"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import {\n Image,\n uploadFile,\n Video,\n type FileItem,\n type InternalFileItem,\n} from '@chayns-components/core';\nimport { createDialog, DialogType, MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { GalleryViewMode } from '../types/gallery';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';\nimport AddFile from './add-file/AddFile';\nimport GalleryItem from './gallery-item/GalleryItem';\nimport {\n StyledGallery,\n StyledGalleryEditModeWrapper,\n StyledGalleryItemWrapper,\n} from './Gallery.styles';\n\nexport type GalleryProps = {\n /**\n * Whether drag and drop is allowed or not\n */\n allowDragAndDrop?: boolean;\n /**\n * The message that should be displayed if a File is already given.\n */\n doubleFileDialogMessage?: string;\n /**\n * Whether images and videos can be edited\n */\n isEditMode?: boolean;\n /**\n * The minimum width of a file in the edit mode\n */\n fileMinWidth?: number;\n /**\n * Images and videos which should be displayed\n */\n files?: FileItem[];\n /**\n * Function to be executed when files are added and uploaded\n */\n onAdd?: (file: FileItem) => void;\n /**\n * Function to be executed when the count of files are changed. Needed to check if all files are uploaded\n */\n onFileCountChange?: (fileCount: number) => void;\n /**\n * Function to be executed when a file is removed\n */\n onRemove?: (file: FileItem) => void;\n /**\n * The mode how the images should be displayed.\n */\n viewMode?: GalleryViewMode;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n allowDragAndDrop = false,\n doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n isEditMode = false,\n fileMinWidth = 100,\n files,\n onAdd,\n onFileCountChange,\n onRemove,\n viewMode = GalleryViewMode.GRID,\n}) => {\n const [fileItems, setFileItems] = useState<InternalFileItem[]>([]);\n\n /**\n * This function adds a previewUrl to fileItems\n */\n const handlePreviewUrlCallback = (previewUrl: string, file: InternalFileItem) => {\n setFileItems((prevState) =>\n prevState.map((prevFile) => {\n if (prevFile.id === file.id) {\n return { ...prevFile, previewUrl };\n }\n return prevFile;\n }),\n );\n };\n\n const callDuplicateFileDialog = useCallback(() => {\n createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n }, [doubleFileDialogMessage]);\n\n /**\n * This function adds uploaded files to fileItems\n */\n const handleUploadFileCallback = useCallback(\n (file: InternalFileItem, uploadedFile: Video | Image) => {\n setFileItems((prevState) => {\n const updatedState = prevState.map((prevFile) => {\n if (prevFile.uploadedFile?.url === uploadedFile.url) {\n callDuplicateFileDialog();\n\n return undefined;\n }\n\n if (prevFile.id === file.id) {\n if (typeof onAdd === 'function') {\n const prevElement = prevState.find(\n ({ uploadedFile: newUploadedFile }) =>\n newUploadedFile?.url === uploadedFile?.url,\n );\n\n if (!prevElement) {\n onAdd({\n file: uploadedFile,\n id: file.id,\n });\n }\n }\n\n return {\n ...prevFile,\n uploadedFile,\n state: 'uploaded',\n };\n }\n\n return prevFile;\n });\n\n const tmp: InternalFileItem[] = [];\n\n updatedState.forEach((updatedFile) => {\n if (updatedFile !== undefined) {\n tmp.push(updatedFile as InternalFileItem);\n }\n });\n\n return tmp ?? [];\n });\n },\n [callDuplicateFileDialog, onAdd],\n );\n\n /**\n * Returns the current count to check if all files are uploaded\n */\n useEffect(() => {\n if (typeof onFileCountChange === 'function') {\n onFileCountChange(fileItems.length);\n }\n }, [fileItems.length, onFileCountChange]);\n\n /**\n * Prepares files for previewUrl and upload\n */\n useEffect(() => {\n const filesToGeneratePreview = fileItems.filter(\n (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state),\n );\n\n const filesToUpload = fileItems.filter(\n (file) => !file.uploadedFile && file.state !== 'uploading',\n );\n\n filesToGeneratePreview.forEach((file) => {\n if (!file.file) {\n return;\n }\n\n if (file.file.type.includes('video/')) {\n generateVideoThumbnail({\n file: file.file,\n callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n });\n\n return;\n }\n\n generatePreviewUrl({\n file: file.file,\n callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n });\n });\n\n filesToUpload.forEach((file) => {\n setFileItems((prevState) =>\n prevState.map((prevFile) => {\n if (prevFile.id === file.id) {\n return { ...prevFile, state: 'uploading' };\n }\n return prevFile;\n }),\n );\n\n void uploadFile({\n fileToUpload: file,\n callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n });\n });\n }, [fileItems, handleUploadFileCallback]);\n\n /**\n * This function formats and adds files to fileItems\n */\n const handleAddFiles = useCallback(\n (filesToAdd: File[]) => {\n const newFileItems: InternalFileItem[] = [];\n\n filesToAdd.forEach((file) => {\n if (file && !filterDuplicateFile({ files: fileItems, newFile: file })) {\n newFileItems.push({\n id: uuidv4(),\n file,\n state: 'none',\n });\n }\n });\n\n setFileItems((prevState) => [...prevState, ...newFileItems]);\n },\n [fileItems],\n );\n\n /**\n * This function adds external files to fileItems\n */\n useEffect(() => {\n if (files) {\n const newFileItems: InternalFileItem[] = [];\n\n files.forEach((file) => {\n newFileItems.push({\n id: file.id ?? uuidv4(),\n uploadedFile: file.file,\n file: undefined,\n state: 'uploaded',\n previewUrl: undefined,\n });\n });\n\n setFileItems((prevState) => {\n const updatedItems = prevState.map((prevItem) => {\n const newItem = newFileItems.find(\n (item) =>\n item.uploadedFile &&\n item.uploadedFile.url ===\n (prevItem.uploadedFile && prevItem.uploadedFile.url),\n );\n return newItem || prevItem;\n });\n\n return updatedItems.concat(\n newFileItems.filter(\n (newItem) =>\n !prevState.some(\n (prevItem) =>\n prevItem.uploadedFile &&\n newItem.uploadedFile &&\n prevItem.uploadedFile.url === newItem.uploadedFile.url,\n ),\n ),\n );\n });\n }\n }, [files]);\n\n /**\n * This function deletes a selected file from the file list\n */\n const handleDeleteFile = useCallback(\n (id?: string) => {\n let fileToDelete: FileItem | undefined;\n\n const filteredFiles = fileItems.filter((file) => {\n const fileId = file.id;\n\n if (fileId === id && file.uploadedFile) {\n fileToDelete = { file: file.uploadedFile, id };\n }\n\n return fileId !== id;\n });\n\n setFileItems(filteredFiles);\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [fileItems, onRemove],\n );\n\n /**\n * This function handles the drag and drop\n */\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n if (!allowDragAndDrop) {\n return;\n }\n\n e.preventDefault();\n const draggedFiles = Array.from(e.dataTransfer.files);\n\n handleAddFiles(draggedFiles);\n },\n [allowDragAndDrop, handleAddFiles],\n );\n\n /**\n * Opens the files in a slideShow\n */\n const openFiles = useCallback(\n (file: InternalFileItem) => {\n const 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 },\n [fileItems],\n );\n\n /**\n * Returns the ratio of the single file\n */\n const ratio = useMemo(() => {\n switch (fileItems.length) {\n case 0:\n return 0;\n case 1:\n return Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1);\n case 2:\n return 2;\n case 3:\n return 3;\n default:\n return 1;\n }\n }, [fileItems]);\n\n const galleryContent = useMemo(() => {\n const combinedFilesLength = fileItems.length;\n\n if (isEditMode) {\n const items = fileItems.map((file) => (\n <GalleryItem\n key={file.id}\n fileItem={file}\n isEditMode\n onClick={openFiles}\n handleDeleteFile={handleDeleteFile}\n />\n ));\n\n items.push(<AddFile key=\"add_file\" onAdd={handleAddFiles} />);\n\n return items;\n }\n\n const shortedFiles = fileItems.slice(0, 4);\n\n return shortedFiles.map((file, index) => {\n let imageRatio = 1;\n\n if (viewMode === GalleryViewMode.GRID) {\n if (combinedFilesLength === 2 && (index === 0 || index === 1)) {\n imageRatio = 0.5;\n } else if (\n (index === 0 && combinedFilesLength > 2) ||\n (combinedFilesLength === 3 && (index === 1 || index === 2))\n ) {\n imageRatio = 1.5;\n }\n }\n\n return (\n <GalleryItem\n key={file.id}\n fileItem={file}\n isEditMode={false}\n handleDeleteFile={handleDeleteFile}\n onClick={openFiles}\n ratio={imageRatio}\n remainingItemsLength={\n combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n }\n />\n );\n });\n }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile, viewMode]);\n\n return useMemo(\n () => (\n <StyledGallery>\n {isEditMode ? (\n <StyledGalleryEditModeWrapper\n $fileMinWidth={fileMinWidth}\n onDragOver={(e) => e.preventDefault()}\n onDrop={(e) => void handleDrop(e)}\n >\n {galleryContent}\n </StyledGalleryEditModeWrapper>\n ) : (\n <StyledGalleryItemWrapper\n $ratio={ratio}\n $uploadedFileLength={fileItems.length}\n $viewMode={viewMode}\n >\n {galleryContent}\n </StyledGalleryItemWrapper>\n )}\n </StyledGallery>\n ),\n [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop],\n );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Gallery.styles.js","names":["styled","css","GalleryViewMode","StyledGallery","div","StyledGalleryItemWrapper","_ref","$viewMode","$uploadedFileLength","GRID","_ref2","$ratio","StyledGalleryEditModeWrapper","_ref3","$fileMinWidth"],"sources":["../../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { GalleryViewMode } from '../types/gallery';\n\nexport const StyledGallery = styled.div``;\n\nexport const StyledGalleryItemWrapper = styled.div<{\n $uploadedFileLength: number;\n $ratio: number;\n $viewMode: GalleryViewMode;\n}>`\n display: grid;\n gap: 5px;\n\n ${({ $viewMode, $uploadedFileLength }) => {\n if ($viewMode === GalleryViewMode.GRID) {\n return css`\n > div:first-child {\n grid-column: 1 / -1;\n }\n\n ${() => {\n switch ($uploadedFileLength) {\n case 1:\n return css`\n grid-template-columns: 1fr;\n `;\n case 2:\n return css`\n grid-template-columns: repeat(2, 1fr);\n > div:first-child {\n grid-column: span 1;\n }\n `;\n case 3:\n return css`\n grid-template-columns: repeat(2, 1fr);\n > div:first-child {\n grid-column: span 2;\n }\n `;\n default:\n return css`\n grid-template-columns: repeat(3, minmax(0, 1fr));\n > div:not(:first-child) {\n grid-column: span 1;\n }\n `;\n }\n }}\n `;\n }\n\n switch ($uploadedFileLength) {\n case 1:\n return css`\n grid-template-columns: 1fr;\n `;\n case 2:\n return css`\n grid-template-columns: repeat(2, 1fr);\n `;\n case 3:\n return css`\n grid-template-columns: repeat(3, 1fr);\n `;\n default:\n return css`\n grid-template-columns: repeat(2, 1fr);\n > div:nth-child(-n + 2) {\n grid-row: 1;\n }\n `;\n }\n }}\n\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div<{\n $fileMinWidth: number;\n}>`\n display: grid;\n grid-template-columns: ${({ $fileMinWidth }) =>\n `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};\n grid-auto-rows: 1fr;\n gap: 6px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,kBAAkB;AAElD,OAAO,MAAMC,aAAa,GAAGH,MAAM,CAACI,GAAI,EAAC;AAEzC,OAAO,MAAMC,wBAAwB,GAAGL,MAAM,CAACI,GAI5C;AACH;AACA;AACA;AACA,MAAME,IAAA,IAAwC;EAAA,IAAvC;IAAEC,SAAS;IAAEC;EAAoB,CAAC,GAAAF,IAAA;EACjC,IAAIC,SAAS,KAAKL,eAAe,CAACO,IAAI,EAAE;IACpC,OAAOR,GAAI;AACvB;AACA;AACA;AACA;AACA,kBAAkB,MAAM;MACJ,QAAQO,mBAAmB;QACvB,KAAK,CAAC;UACF,OAAOP,GAAI;AACvC;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAI;AACvC;AACA;AACA;AACA;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAI;AACvC;AACA;AACA;AACA;AACA,6BAA6B;QACL;UACI,OAAOA,GAAI;AACvC;AACA;AACA;AACA;AACA,6BAA6B;MACT;IACJ,CAAE;AAClB,aAAa;EACL;EAEA,QAAQO,mBAAmB;IACvB,KAAK,CAAC;MACF,OAAOP,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAI;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAI;AAC3B;AACA;AACA;AACA;AACA,iBAAiB;EACT;AACJ,CAAE;AACN;AACA,oBAAoBS,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AAC3C,CAAC;AAED,OAAO,MAAMC,4BAA4B,GAAGZ,MAAM,CAACI,GAEhD;AACH;AACA,6BAA6BS,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OACtC,4BAA2BC,aAAc,WAAU;AAAA,CAAC;AAC7D;AACA;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AddFile.js","names":["Icon","selectFiles","React","useCallback","StyledAddFile","StyledAddFIleIconWrapper","AddFile","_ref","onAdd","openSelectDialog","files","multiple","type","createElement","key","onClick","size","icons","displayName"],"sources":["../../../../src/components/add-file/AddFile.tsx"],"sourcesContent":["import { Icon, selectFiles } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\n\nexport type AddFileProps = {\n /**\n * Function to be executed when files are added\n */\n onAdd: (files: File[]) => void;\n};\n\nconst AddFile: FC<AddFileProps> = ({ onAdd }) => {\n const openSelectDialog = useCallback(async () => {\n const files = await selectFiles({\n multiple: true,\n type: 'image/*, video/*',\n });\n\n onAdd(files);\n }, [onAdd]);\n\n return (\n <StyledAddFile key=\"addButton\">\n <StyledAddFIleIconWrapper onClick={() => void openSelectDialog()}>\n <Icon size={40} icons={['fa fa-plus']} />\n </StyledAddFIleIconWrapper>\n </StyledAddFile>\n );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default AddFile;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,QAAQ,yBAAyB;AAC3D,OAAOC,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAC9C,SAASC,aAAa,EAAEC,wBAAwB,QAAQ,kBAAkB;AAS1E,MAAMC,OAAyB,GAAGC,IAAA,IAAe;EAAA,IAAd;IAAEC;EAAM,CAAC,GAAAD,IAAA;EACxC,MAAME,gBAAgB,GAAGN,WAAW,CAAC,YAAY;IAC7C,MAAMO,KAAK,GAAG,MAAMT,WAAW,CAAC;MAC5BU,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFJ,KAAK,CAACE,KAAK,CAAC;EAChB,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,oBACIN,KAAA,CAAAW,aAAA,CAACT,aAAa;IAACU,GAAG,EAAC;EAAW,gBAC1BZ,KAAA,CAAAW,aAAA,CAACR,wBAAwB;IAACU,OAAO,EAAEA,CAAA,KAAM,KAAKN,gBAAgB,CAAC;EAAE,gBAC7DP,KAAA,CAAAW,aAAA,CAACb,IAAI;IAACgB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDX,OAAO,CAACY,WAAW,GAAG,SAAS;AAE/B,eAAeZ,OAAO","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AddFile.styles.js","names":["styled","StyledAddFile","div","StyledAddFIleIconWrapper","button","_ref","theme","_ref2"],"sources":["../../../../src/components/add-file/AddFile.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledAddFile = styled.div`\n position: relative;\n`;\n\ntype StyledAddFIleIconWrapperProps = WithTheme<unknown>;\n\nexport const StyledAddFIleIconWrapper = styled.button<StyledAddFIleIconWrapperProps>`\n background-color: ${({ theme }: StyledAddFIleIconWrapperProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledAddFIleIconWrapperProps) => theme['009-rgb']}, 0.08) inset;\n width: 100%;\n aspect-ratio: 1 / 1;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,aAAa,GAAGD,MAAM,CAACE,GAAI;AACxC;AACA,CAAC;AAID,OAAO,MAAMC,wBAAwB,GAAGH,MAAM,CAACI,MAAsC;AACrF,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAqC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GalleryItem.js","names":["Icon","AnimatePresence","React","useMemo","StyledGalleryItem","StyledGalleryItemDeleteButton","StyledGalleryItemMoreItemsIndicator","MediaItem","PreviewItem","GalleryItem","_ref","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","createElement","id","size","icons","state","previewUrl","uploadedFile","initial","key","openSelectedFile","displayName"],"sources":["../../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, useMemo } from 'react';\nimport {\n StyledGalleryItem,\n StyledGalleryItemDeleteButton,\n StyledGalleryItemMoreItemsIndicator,\n} from './GalleryItem.styles';\nimport MediaItem from './media-item/MediaItem';\nimport PreviewItem from './preview-item/PreviewItem';\n\nexport type GalleryItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is deleted\n */\n handleDeleteFile: (id?: string) => void;\n /**\n * The ratio of the image\n */\n ratio?: number;\n /**\n * Length of the uploaded files\n */\n remainingItemsLength?: number;\n /**\n * Function to be executed if a file should be opened\n */\n onClick: (file: InternalFileItem) => void;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n fileItem,\n handleDeleteFile,\n isEditMode,\n ratio = 1,\n remainingItemsLength,\n onClick,\n}) =>\n useMemo(\n () => (\n <StyledGalleryItem>\n {isEditMode && (\n <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n <Icon size={20} icons={['ts-wrong']} />\n </StyledGalleryItemDeleteButton>\n )}\n {!fileItem.state ||\n fileItem.state === 'none' ||\n (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : (\n <AnimatePresence initial={false}>\n {fileItem.state === 'uploading' ? (\n <PreviewItem\n ratio={ratio}\n key={`uploading_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n />\n ) : (\n <MediaItem\n key={`uploaded_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n isEditMode={isEditMode}\n ratio={ratio}\n openSelectedFile={onClick}\n />\n )}\n </AnimatePresence>\n )}\n {remainingItemsLength && (\n <StyledGalleryItemMoreItemsIndicator>\n <p>{`+ ${remainingItemsLength - 3}`}</p>\n </StyledGalleryItemMoreItemsIndicator>\n )}\n </StyledGalleryItem>\n ),\n [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength],\n );\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAA+B,yBAAyB;AACrE,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SACIC,iBAAiB,EACjBC,6BAA6B,EAC7BC,mCAAmC,QAChC,sBAAsB;AAC7B,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,WAAW,MAAM,4BAA4B;AA6BpD,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IACvCC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,KAAK,GAAG,CAAC;IACTC,oBAAoB;IACpBC;EACJ,CAAC,GAAAN,IAAA;EAAA,OACGP,OAAO,CACH,mBACID,KAAA,CAAAe,aAAA,CAACb,iBAAiB,QACbS,UAAU,iBACPX,KAAA,CAAAe,aAAA,CAACZ,6BAA6B;IAACW,OAAO,EAAEA,CAAA,KAAMJ,gBAAgB,CAACD,QAAQ,CAACO,EAAE;EAAE,gBACxEhB,KAAA,CAAAe,aAAA,CAACjB,IAAI;IAACmB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACX,CAClC,EACA,CAACT,QAAQ,CAACU,KAAK,IAChBV,QAAQ,CAACU,KAAK,KAAK,MAAM,IACxB,CAACV,QAAQ,CAACW,UAAU,IAAI,CAACX,QAAQ,CAACY,YAAa,GAAG,IAAI,gBACnDrB,KAAA,CAAAe,aAAA,CAAChB,eAAe;IAACuB,OAAO,EAAE;EAAM,GAC3Bb,QAAQ,CAACU,KAAK,KAAK,WAAW,gBAC3BnB,KAAA,CAAAe,aAAA,CAACT,WAAW;IACRM,KAAK,EAAEA,KAAM;IACbW,GAAG,EAAG,aAAYd,QAAQ,CAACO,EAAE,IAAI,EAAG,EAAE;IACtCP,QAAQ,EAAEA;EAAS,CACtB,CAAC,gBAEFT,KAAA,CAAAe,aAAA,CAACV,SAAS;IACNkB,GAAG,EAAG,YAAWd,QAAQ,CAACO,EAAE,IAAI,EAAG,EAAE;IACrCP,QAAQ,EAAEA,QAAS;IACnBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbY,gBAAgB,EAAEV;EAAQ,CAC7B,CAEQ,CACpB,EACAD,oBAAoB,iBACjBb,KAAA,CAAAe,aAAA,CAACX,mCAAmC,qBAChCJ,KAAA,CAAAe,aAAA,YAAK,KAAIF,oBAAoB,GAAG,CAAE,EAAK,CACN,CAE1B,CACtB,EACD,CAACJ,QAAQ,EAAEC,gBAAgB,EAAEC,UAAU,EAAEG,OAAO,EAAEF,KAAK,EAAEC,oBAAoB,CACjF,CAAC;AAAA;AAELN,WAAW,CAACkB,WAAW,GAAG,aAAa;AAEvC,eAAelB,WAAW","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GalleryItem.styles.js","names":["styled","StyledGalleryItem","div","StyledGalleryItemDeleteButton","button","_ref","theme","_ref2","StyledGalleryItemMoreItemsIndicator"],"sources":["../../../../src/components/gallery-item/GalleryItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGalleryItem = styled.div`\n display: flex;\n position: relative;\n height: 100%;\n width: 100%;\n`;\n\ntype StyledGalleryItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemDeleteButton = styled.button<StyledGalleryItemDeleteButtonProps>`\n background-color: rgba(\n ${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['000-rgb']},\n 0.75\n );\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['009-rgb']}, 0.08) inset;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n height: 30px;\n width: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const StyledGalleryItemMoreItemsIndicator = styled.div`\n position: absolute;\n z-index: 2;\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n backdrop-filter: brightness(40%);\n\n p {\n font-size: 40px;\n color: white;\n }\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAI;AAC5C;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACI,MAA2C;AAC/F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA0C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAA0C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,mCAAmC,GAAGR,MAAM,CAACE,GAAI;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MediaItem.js","names":["Icon","React","StyledMediaItemImage","StyledMediaItemImageWrapper","StyledMediaItemPlayIcon","StyledMediaItemVideo","StyledMediaItemVideoWrapper","StyledMotionMediaItem","MediaItem","_ref","fileItem","isEditMode","openSelectedFile","ratio","createElement","animate","opacity","initial","exit","transition","duration","uploadedFile","onClick","$ratio","size","icons","poster","thumbnailUrl","src","url","type","draggable","displayName"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n StyledMediaItemImage,\n StyledMediaItemImageWrapper,\n StyledMediaItemPlayIcon,\n StyledMediaItemVideo,\n StyledMediaItemVideoWrapper,\n StyledMotionMediaItem,\n} from './MediaItem.styles';\n\nexport type MediaItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is selected\n */\n openSelectedFile: (file: InternalFileItem) => void;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst MediaItem: FC<MediaItemProps> = ({ fileItem, isEditMode, openSelectedFile, ratio }) => (\n <StyledMotionMediaItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 3.2 }}\n >\n {fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? (\n <StyledMediaItemVideoWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemPlayIcon>\n <Icon size={isEditMode ? 30 : 50} icons={['fa fa-play']} />\n </StyledMediaItemPlayIcon>\n <StyledMediaItemVideo poster={fileItem.uploadedFile.thumbnailUrl}>\n <source src={fileItem.uploadedFile.url} type=\"video/mp4\" />\n </StyledMediaItemVideo>\n </StyledMediaItemVideoWrapper>\n ) : (\n <StyledMediaItemImageWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemImage draggable={false} src={fileItem.uploadedFile?.url} />\n </StyledMediaItemImageWrapper>\n )}\n </StyledMotionMediaItem>\n);\n\nMediaItem.displayName = 'MediaItem';\n\nexport default MediaItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAA+B,yBAAyB;AACrE,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,oBAAoB,EACpBC,2BAA2B,EAC3BC,uBAAuB,EACvBC,oBAAoB,EACpBC,2BAA2B,EAC3BC,qBAAqB,QAClB,oBAAoB;AAqB3B,MAAMC,SAA6B,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC;EAAM,CAAC,GAAAJ,IAAA;EAAA,oBACpFR,KAAA,CAAAa,aAAA,CAACP,qBAAqB;IAClBQ,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MAAEF,OAAO,EAAE;IAAE,CAAE;IACrBG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BV,QAAQ,CAACW,YAAY,IAAI,cAAc,IAAIX,QAAQ,CAACW,YAAY,gBAC7DpB,KAAA,CAAAa,aAAA,CAACR,2BAA2B;IAACgB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;IAACa,MAAM,EAAEV;EAAM,gBAClFZ,KAAA,CAAAa,aAAA,CAACV,uBAAuB,qBACpBH,KAAA,CAAAa,aAAA,CAACd,IAAI;IAACwB,IAAI,EAAEb,UAAU,GAAG,EAAE,GAAG,EAAG;IAACc,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CACrC,CAAC,eAC1BxB,KAAA,CAAAa,aAAA,CAACT,oBAAoB;IAACqB,MAAM,EAAEhB,QAAQ,CAACW,YAAY,CAACM;EAAa,gBAC7D1B,KAAA,CAAAa,aAAA;IAAQc,GAAG,EAAElB,QAAQ,CAACW,YAAY,CAACQ,GAAI;IAACC,IAAI,EAAC;EAAW,CAAE,CACxC,CACG,CAAC,gBAE9B7B,KAAA,CAAAa,aAAA,CAACX,2BAA2B;IAACmB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;IAACa,MAAM,EAAEV;EAAM,gBAClFZ,KAAA,CAAAa,aAAA,CAACZ,oBAAoB;IAAC6B,SAAS,EAAE,KAAM;IAACH,GAAG,EAAElB,QAAQ,CAACW,YAAY,EAAEQ;EAAI,CAAE,CACjD,CAEd,CAAC;AAAA,CAC3B;AAEDrB,SAAS,CAACwB,WAAW,GAAG,WAAW;AAEnC,eAAexB,SAAS","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MediaItem.styles.js","names":["motion","styled","StyledMotionMediaItem","div","StyledMediaItemVideoWrapper","_ref","$ratio","StyledMediaItemImageWrapper","_ref2","StyledMediaItemImage","img","_ref3","theme","_ref4","StyledMediaItemVideo","video","_ref5","_ref6","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n inset;\n width: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsB;AAC5E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAwB;AAC1E;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AAC3C,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGN,MAAM,CAACE,GAAwB;AAC1E;AACA;AACA;AACA,oBAAoBK,KAAA;EAAA,IAAC;IAAEF;EAAO,CAAC,GAAAE,KAAA;EAAA,OAAKF,MAAM;AAAA,CAAC;AAC3C,CAAC;AAMD,OAAO,MAAMG,oBAAoB,GAAGR,MAAM,CAACS,GAA+B;AAC1E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAAiC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,oBAAoB,GAAGb,MAAM,CAACc,KAAiC;AAC5E,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCK,KAAA;EAAA,IAAC;IAAEL;EAAiC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,uBAAuB,GAAGjB,MAAM,CAACE,GAAI;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewItem.js","names":["SmallWaitCursor","React","StyledMotionPreviewItem","StyledPreviewItemImage","StyledPreviewItemImageWrapper","StyledPreviewItemLoadingIcon","PreviewItem","_ref","fileItem","ratio","createElement","animate","opacity","initial","exit","transition","duration","delay","style","position","$ratio","shouldHideWaitCursor","shouldHideBackground","draggable","src","previewUrl","displayName"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.tsx"],"sourcesContent":["import { InternalFileItem, SmallWaitCursor } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n StyledMotionPreviewItem,\n StyledPreviewItemImage,\n StyledPreviewItemImageWrapper,\n StyledPreviewItemLoadingIcon,\n} from './PreviewItem.styles';\n\nexport type PreviewItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst PreviewItem: FC<PreviewItemProps> = ({ fileItem, ratio }) => (\n <StyledMotionPreviewItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{\n opacity: 0,\n transition: { duration: 3.2, delay: 3.2 },\n }}\n transition={{ duration: 3.2 }}\n style={{ position: 'absolute' }}\n >\n <StyledPreviewItemImageWrapper $ratio={ratio}>\n <StyledPreviewItemLoadingIcon>\n <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n </StyledPreviewItemLoadingIcon>\n <StyledPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n </StyledPreviewItemImageWrapper>\n </StyledMotionPreviewItem>\n);\n\nPreviewItem.displayName = 'PreviewItem';\n\nexport default PreviewItem;\n"],"mappings":"AAAA,SAA2BA,eAAe,QAAQ,yBAAyB;AAC3E,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,4BAA4B,QACzB,sBAAsB;AAa7B,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,oBAC1DN,KAAA,CAAAS,aAAA,CAACR,uBAAuB;IACpBS,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MACFF,OAAO,EAAE,CAAC;MACVG,UAAU,EAAE;QAAEC,QAAQ,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAI;IAC5C,CAAE;IACFF,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI,CAAE;IAC9BE,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAW;EAAE,gBAEhClB,KAAA,CAAAS,aAAA,CAACN,6BAA6B;IAACgB,MAAM,EAAEX;EAAM,gBACzCR,KAAA,CAAAS,aAAA,CAACL,4BAA4B,qBACzBJ,KAAA,CAAAS,aAAA,CAACV,eAAe;IAACqB,oBAAoB,EAAE,KAAM;IAACC,oBAAoB;EAAA,CAAE,CAC1C,CAAC,eAC/BrB,KAAA,CAAAS,aAAA,CAACP,sBAAsB;IAACoB,SAAS,EAAE,KAAM;IAACC,GAAG,EAAEhB,QAAQ,CAACiB;EAAW,CAAE,CAC1C,CACV,CAAC;AAAA,CAC7B;AAEDnB,WAAW,CAACoB,WAAW,GAAG,aAAa;AAEvC,eAAepB,WAAW","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewItem.styles.js","names":["motion","styled","StyledMotionPreviewItem","div","StyledPreviewItemImageWrapper","_ref","$ratio","StyledPreviewItemImage","img","_ref2","theme","_ref3","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsB;AAC9E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAwB;AAC5E;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AAC3C,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACO,GAAiC;AAC9E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,4BAA4B,GAAGX,MAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["default","Gallery","GalleryViewMode"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":"AAAA;;AAEA,SAASA,OAAO,IAAIC,OAAO,QAAQ,sBAAsB;AACzD,SAASC,eAAe,QAAQ,iBAAiB","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"gallery.js","names":["GalleryViewMode"],"sources":["../../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n SQUARE,\n GRID,\n}\n"],"mappings":"AAAA,WAAYA,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file.js","names":["filterDuplicateFile","_ref","newFile","files","duplicates","filter","_ref2","file","name","size","length","generatePreviewUrl","_ref3","callback","reader","FileReader","onload","event","previewUrl","target","result","readAsDataURL","generateVideoThumbnail","_ref4","canvas","document","createElement","video","autoplay","muted","src","URL","createObjectURL","onloadeddata","ctx","getContext","width","videoWidth","height","videoHeight","drawImage","pause","toDataURL"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\ninterface FilerDuplicateFileOptions {\n files: InternalFileItem[];\n newFile: File;\n}\n\nexport const filterDuplicateFile = ({ newFile, files }: FilerDuplicateFileOptions) => {\n const duplicates = files.filter(\n ({ file }) => file && file.name === newFile.name && file.size === newFile.size,\n );\n\n return duplicates.length > 0;\n};\n\ninterface GeneratePreviewUrlOptions {\n file: File;\n callback: (previewUrl: string) => void;\n}\n\nexport const generatePreviewUrl = ({ callback, file }: GeneratePreviewUrlOptions): void => {\n const reader = new FileReader();\n\n reader.onload = (event) => {\n const previewUrl = event.target?.result as string;\n\n callback(previewUrl);\n };\n\n reader.readAsDataURL(file);\n};\n\ninterface GenerateVideoThumbnailOptions {\n file: File;\n callback: (previewUrl: string) => void;\n}\n\nexport const generateVideoThumbnail = ({ file, callback }: GenerateVideoThumbnailOptions) => {\n const canvas = document.createElement('canvas');\n const video = document.createElement('video');\n\n // this is important\n video.autoplay = true;\n video.muted = true;\n video.src = URL.createObjectURL(file);\n\n video.onloadeddata = () => {\n const ctx = canvas.getContext('2d');\n\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n\n ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n video.pause();\n\n callback(canvas.toDataURL('image/png'));\n };\n};\n"],"mappings":"AAOA,OAAO,MAAMA,mBAAmB,GAAGC,IAAA,IAAmD;EAAA,IAAlD;IAAEC,OAAO;IAAEC;EAAiC,CAAC,GAAAF,IAAA;EAC7E,MAAMG,UAAU,GAAGD,KAAK,CAACE,MAAM,CAC3BC,KAAA;IAAA,IAAC;MAAEC;IAAK,CAAC,GAAAD,KAAA;IAAA,OAAKC,IAAI,IAAIA,IAAI,CAACC,IAAI,KAAKN,OAAO,CAACM,IAAI,IAAID,IAAI,CAACE,IAAI,KAAKP,OAAO,CAACO,IAAI;EAAA,CAClF,CAAC;EAED,OAAOL,UAAU,CAACM,MAAM,GAAG,CAAC;AAChC,CAAC;AAOD,OAAO,MAAMC,kBAAkB,GAAGC,KAAA,IAAyD;EAAA,IAAxD;IAAEC,QAAQ;IAAEN;EAAgC,CAAC,GAAAK,KAAA;EAC5E,MAAME,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,KAAK,IAAK;IACvB,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,EAAEC,MAAgB;IAEjDP,QAAQ,CAACK,UAAU,CAAC;EACxB,CAAC;EAEDJ,MAAM,CAACO,aAAa,CAACd,IAAI,CAAC;AAC9B,CAAC;AAOD,OAAO,MAAMe,sBAAsB,GAAGC,KAAA,IAAuD;EAAA,IAAtD;IAAEhB,IAAI;IAAEM;EAAwC,CAAC,GAAAU,KAAA;EACpF,MAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;EAC/C,MAAMC,KAAK,GAAGF,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;;EAE7C;EACAC,KAAK,CAACC,QAAQ,GAAG,IAAI;EACrBD,KAAK,CAACE,KAAK,GAAG,IAAI;EAClBF,KAAK,CAACG,GAAG,GAAGC,GAAG,CAACC,eAAe,CAACzB,IAAI,CAAC;EAErCoB,KAAK,CAACM,YAAY,GAAG,MAAM;IACvB,MAAMC,GAAG,GAAGV,MAAM,CAACW,UAAU,CAAC,IAAI,CAAC;IAEnCX,MAAM,CAACY,KAAK,GAAGT,KAAK,CAACU,UAAU;IAC/Bb,MAAM,CAACc,MAAM,GAAGX,KAAK,CAACY,WAAW;IAEjCL,GAAG,EAAEM,SAAS,CAACb,KAAK,EAAE,CAAC,EAAE,CAAC,EAAEA,KAAK,CAACU,UAAU,EAAEV,KAAK,CAACY,WAAW,CAAC;IAChEZ,KAAK,CAACc,KAAK,CAAC,CAAC;IAEb5B,QAAQ,CAACW,MAAM,CAACkB,SAAS,CAAC,WAAW,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC","ignoreList":[]}
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  export declare const StyledAddFile: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
3
3
  export declare const StyledAddFIleIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
4
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
4
+ theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
5
5
  }>>;
@@ -1,4 +1,4 @@
1
- import type { InternalFileItem } from '@chayns-components/core/lib/types/file';
1
+ import { type InternalFileItem } from '@chayns-components/core';
2
2
  import { FC } from 'react';
3
3
  export type GalleryItemProps = {
4
4
  /**
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  export declare const StyledGalleryItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
3
3
  export declare const StyledGalleryItemDeleteButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
4
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
4
+ theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
5
5
  }>>;
6
6
  export declare const StyledGalleryItemMoreItemsIndicator: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;