@chayns-components/gallery 5.0.0-beta.98 → 5.0.0-beta.982

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 (76) hide show
  1. package/README.md +4 -15
  2. package/lib/cjs/components/Gallery.js +317 -0
  3. package/lib/cjs/components/Gallery.js.map +1 -0
  4. package/lib/cjs/components/Gallery.styles.js +92 -0
  5. package/lib/cjs/components/Gallery.styles.js.map +1 -0
  6. package/lib/cjs/components/add-file/AddFile.js +33 -0
  7. package/lib/cjs/components/add-file/AddFile.js.map +1 -0
  8. package/lib/cjs/components/add-file/AddFile.styles.js +23 -0
  9. package/lib/cjs/components/add-file/AddFile.styles.js.map +1 -0
  10. package/lib/cjs/components/gallery-item/GalleryItem.js +43 -0
  11. package/lib/cjs/components/gallery-item/GalleryItem.js.map +1 -0
  12. package/lib/cjs/components/gallery-item/GalleryItem.styles.js +51 -0
  13. package/lib/cjs/components/gallery-item/GalleryItem.styles.js.map +1 -0
  14. package/lib/cjs/components/gallery-item/media-item/MediaItem.js +52 -0
  15. package/lib/cjs/components/gallery-item/media-item/MediaItem.js.map +1 -0
  16. package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js +62 -0
  17. package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
  18. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js +45 -0
  19. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
  20. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js +43 -0
  21. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
  22. package/lib/cjs/index.js +21 -0
  23. package/lib/cjs/index.js.map +1 -0
  24. package/lib/cjs/types/gallery.js +12 -0
  25. package/lib/cjs/types/gallery.js.map +1 -0
  26. package/lib/cjs/utils/file.js +51 -0
  27. package/lib/cjs/utils/file.js.map +1 -0
  28. package/lib/esm/components/Gallery.js +307 -0
  29. package/lib/esm/components/Gallery.js.map +1 -0
  30. package/lib/esm/components/Gallery.styles.js +91 -0
  31. package/lib/esm/components/Gallery.styles.js.map +1 -0
  32. package/lib/esm/components/add-file/AddFile.js +26 -0
  33. package/lib/esm/components/add-file/AddFile.js.map +1 -0
  34. package/lib/esm/components/add-file/AddFile.styles.js +22 -0
  35. package/lib/esm/components/add-file/AddFile.styles.js.map +1 -0
  36. package/lib/esm/components/gallery-item/GalleryItem.js +37 -0
  37. package/lib/esm/components/gallery-item/GalleryItem.js.map +1 -0
  38. package/lib/esm/components/gallery-item/GalleryItem.styles.js +50 -0
  39. package/lib/esm/components/gallery-item/GalleryItem.styles.js.map +1 -0
  40. package/lib/esm/components/gallery-item/media-item/MediaItem.js +45 -0
  41. package/lib/esm/components/gallery-item/media-item/MediaItem.js.map +1 -0
  42. package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js +73 -0
  43. package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
  44. package/lib/esm/components/gallery-item/preview-item/PreviewItem.js +41 -0
  45. package/lib/esm/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
  46. package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js +45 -0
  47. package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
  48. package/lib/esm/index.js +5 -0
  49. package/lib/esm/index.js.map +1 -0
  50. package/lib/esm/types/gallery.js +6 -0
  51. package/lib/esm/types/gallery.js.map +1 -0
  52. package/lib/esm/utils/file.js +47 -0
  53. package/lib/esm/utils/file.js.map +1 -0
  54. package/lib/types/components/Gallery.d.ts +47 -0
  55. package/lib/types/components/Gallery.styles.d.ts +10 -0
  56. package/lib/types/components/add-file/AddFile.d.ts +9 -0
  57. package/lib/types/components/add-file/AddFile.styles.d.ts +4 -0
  58. package/lib/types/components/gallery-item/GalleryItem.d.ts +30 -0
  59. package/lib/types/components/gallery-item/GalleryItem.styles.d.ts +5 -0
  60. package/lib/types/components/gallery-item/media-item/MediaItem.d.ts +22 -0
  61. package/lib/types/components/gallery-item/media-item/MediaItem.styles.d.ts +279 -0
  62. package/lib/types/components/gallery-item/preview-item/PreviewItem.d.ts +14 -0
  63. package/lib/types/components/gallery-item/preview-item/PreviewItem.styles.d.ts +273 -0
  64. package/lib/types/index.d.ts +2 -0
  65. package/lib/types/types/gallery.d.ts +4 -0
  66. package/lib/types/utils/file.d.ts +17 -0
  67. package/package.json +47 -28
  68. package/lib/components/gallery/Gallery.d.ts +0 -4
  69. package/lib/components/gallery/Gallery.js +0 -14
  70. package/lib/components/gallery/Gallery.js.map +0 -1
  71. package/lib/components/gallery/Gallery.styles.d.ts +0 -1
  72. package/lib/components/gallery/Gallery.styles.js +0 -11
  73. package/lib/components/gallery/Gallery.styles.js.map +0 -1
  74. package/lib/index.d.ts +0 -1
  75. package/lib/index.js +0 -14
  76. package/lib/index.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GalleryItem.js","names":["_core","require","_framerMotion","_react","_interopRequireWildcard","_GalleryItem","_MediaItem","_interopRequireDefault","_PreviewItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GalleryItem","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","useMemo","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","id","Icon","size","icons","state","previewUrl","uploadedFile","AnimatePresence","initial","key","openSelectedFile","StyledGalleryItemMoreItemsIndicator","displayName","_default","exports"],"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":"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","ignoreList":[]}
@@ -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(e) { return e && e.__esModule ? e : { default: e }; }
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","e","__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,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC3C;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAGF,yBAAM,CAACG,MAA0C;AAC9F;AACA,UAAU,CAAC;EAAEC;AAA0C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC7E;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAA0C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,mCAAmC,GAAAN,OAAA,CAAAM,mCAAA,GAAGL,yBAAM,CAACC,GAAG;AAC7D;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(e) { return e && e.__esModule ? e : { default: e }; }
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","e","__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,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;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(e) { return e && e.__esModule ? e : { default: e }; }
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","e","__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,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAqB;AAC3E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAJ,OAAA,CAAAI,2BAAA,GAAGH,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMM,MAAME,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAGN,yBAAM,CAACO,GAA8B;AACzE,wBAAwB,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,oBAAoB,GAAAV,OAAA,CAAAU,oBAAA,GAAGT,yBAAM,CAACU,KAAgC;AAC3E,wBAAwB,CAAC;EAAEF;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA,CAAC;AAEM,MAAMG,uBAAuB,GAAAZ,OAAA,CAAAY,uBAAA,GAAGX,yBAAM,CAACE,GAAG;AACjD;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(e) { return e && e.__esModule ? e : { default: e }; }
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","e","__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,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;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(e) { return e && e.__esModule ? e : { default: e }; }
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","e","__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,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAqB;AAC7E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAIM,MAAMC,sBAAsB,GAAAN,OAAA,CAAAM,sBAAA,GAAGL,yBAAM,CAACM,GAAgC;AAC7E,wBAAwB,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAChF;AACA,eAAe,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3E;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,4BAA4B,GAAAT,OAAA,CAAAS,4BAAA,GAAGR,yBAAM,CAACE,GAAG;AACtD;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(e) { return e && e.__esModule ? e : { default: e }; }
21
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["_Gallery","_interopRequireDefault","require","_gallery","e","__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,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","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":[]}