@chayns-components/gallery 5.0.0-beta.104 → 5.0.0-beta.107

package/lib/api/image/post.d.ts

@@ -0,0 +1,14 @@
+import type { Image } from '../../types/files';
+/**
+ * Uploads an image to the tsimg cloud service.
+ */
+interface Post {
+    accessToken: string;
+    file: File | string;
+    referenceId?: string;
+    personId: string;
+    siteId?: string;
+    url?: string;
+}
+export declare const imageUpload: ({ accessToken, file, referenceId, personId, siteId, url, }: Post) => Promise<Image>;
+export {};

package/lib/api/image/post.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.imageUpload = void 0;
+/**
+ * Uploads an image to the tsimg cloud service.
+ */
+
+const imageUpload = async _ref => {
+  let {
+    accessToken,
+    file,
+    referenceId,
+    personId,
+    siteId,
+    url = 'https://api.tsimg.cloud/image'
+  } = _ref;
+  const headers = new Headers({
+    Accept: 'application/json'
+  });
+  if (referenceId) headers.set('X-Reference-Id', referenceId);
+  if (personId) headers.set('X-Person-Id', personId);
+  if (siteId) headers.set('X-Site-Id', siteId);
+  headers.set('Authorization', `bearer ${accessToken}`);
+  let body;
+  if (typeof file === 'string') {
+    headers.set('Content-Type', 'application/json');
+    body = JSON.stringify({
+      url: file
+    });
+  } else {
+    headers.set('Content-Type', 'image/*');
+    body = await getFileArrayBuffer(file);
+  }
+  const response = await fetch(url, {
+    method: 'POST',
+    body,
+    headers
+  });
+  if (response.ok) {
+    return await response.json();
+  }
+  throw Error(`Uploading the image failed with status code ${response.status}.`);
+};
+exports.imageUpload = imageUpload;
+const getFileArrayBuffer = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = e => {
+    var _e$target;
+    if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.result) {
+      resolve(e.target.result);
+    } else {
+      reject(Error('Could not get array buffer.'));
+    }
+  };
+  reader.onerror = reject;
+  reader.readAsArrayBuffer(file);
+});
+//# sourceMappingURL=post.js.map

package/lib/api/image/post.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post.js","names":["imageUpload","_ref","accessToken","file","referenceId","personId","siteId","url","headers","Headers","Accept","set","body","JSON","stringify","getFileArrayBuffer","response","fetch","method","ok","json","Error","status","exports","Promise","resolve","reject","reader","FileReader","onload","e","_e$target","target","result","onerror","readAsArrayBuffer"],"sources":["../../../src/api/image/post.ts"],"sourcesContent":["import type { Image } from '../../types/files';\n\n/**\n * Uploads an image to the tsimg cloud service.\n */\ninterface Post {\n    accessToken: string;\n    file: File | string;\n    referenceId?: string;\n    personId: string;\n    siteId?: string;\n    url?: string;\n}\n\nexport const imageUpload = async ({\n    accessToken,\n    file,\n    referenceId,\n    personId,\n    siteId,\n    url = 'https://api.tsimg.cloud/image',\n}: Post): Promise<Image> => {\n    const headers = new Headers({ Accept: 'application/json' });\n\n    if (referenceId) headers.set('X-Reference-Id', referenceId);\n    if (personId) headers.set('X-Person-Id', personId);\n    if (siteId) headers.set('X-Site-Id', siteId);\n\n    headers.set('Authorization', `bearer ${accessToken}`);\n\n    let body: string | ArrayBuffer;\n\n    if (typeof file === 'string') {\n        headers.set('Content-Type', 'application/json');\n        body = JSON.stringify({ url: file });\n    } else {\n        headers.set('Content-Type', 'image/*');\n        body = await getFileArrayBuffer(file);\n    }\n\n    const response = await fetch(url, { method: 'POST', body, headers });\n\n    if (response.ok) {\n        return (await response.json()) as Promise<Image>;\n    }\n\n    throw Error(`Uploading the image failed with status code ${response.status}.`);\n};\n\nconst getFileArrayBuffer = (file: File): Promise<string | ArrayBuffer> =>\n    new Promise((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = (e) => {\n            if (e.target?.result) {\n                resolve(e.target.result);\n            } else {\n                reject(Error('Could not get array buffer.'));\n            }\n        };\n        reader.onerror = reject;\n        reader.readAsArrayBuffer(file);\n    });\n"],"mappings":";;;;;;AAEA;AACA;AACA;;AAUO,MAAMA,WAAW,GAAG,MAAAC,IAAA,IAOC;EAAA,IAPM;IAC9BC,WAAW;IACXC,IAAI;IACJC,WAAW;IACXC,QAAQ;IACRC,MAAM;IACNC,GAAG,GAAG;EACJ,CAAC,GAAAN,IAAA;EACH,MAAMO,OAAO,GAAG,IAAIC,OAAO,CAAC;IAAEC,MAAM,EAAE;EAAmB,CAAC,CAAC;EAE3D,IAAIN,WAAW,EAAEI,OAAO,CAACG,GAAG,CAAC,gBAAgB,EAAEP,WAAW,CAAC;EAC3D,IAAIC,QAAQ,EAAEG,OAAO,CAACG,GAAG,CAAC,aAAa,EAAEN,QAAQ,CAAC;EAClD,IAAIC,MAAM,EAAEE,OAAO,CAACG,GAAG,CAAC,WAAW,EAAEL,MAAM,CAAC;EAE5CE,OAAO,CAACG,GAAG,CAAC,eAAe,EAAG,UAAST,WAAY,EAAC,CAAC;EAErD,IAAIU,IAA0B;EAE9B,IAAI,OAAOT,IAAI,KAAK,QAAQ,EAAE;IAC1BK,OAAO,CAACG,GAAG,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC/CC,IAAI,GAAGC,IAAI,CAACC,SAAS,CAAC;MAAEP,GAAG,EAAEJ;IAAK,CAAC,CAAC;EACxC,CAAC,MAAM;IACHK,OAAO,CAACG,GAAG,CAAC,cAAc,EAAE,SAAS,CAAC;IACtCC,IAAI,GAAG,MAAMG,kBAAkB,CAACZ,IAAI,CAAC;EACzC;EAEA,MAAMa,QAAQ,GAAG,MAAMC,KAAK,CAACV,GAAG,EAAE;IAAEW,MAAM,EAAE,MAAM;IAAEN,IAAI;IAAEJ;EAAQ,CAAC,CAAC;EAEpE,IAAIQ,QAAQ,CAACG,EAAE,EAAE;IACb,OAAQ,MAAMH,QAAQ,CAACI,IAAI,EAAE;EACjC;EAEA,MAAMC,KAAK,CAAE,+CAA8CL,QAAQ,CAACM,MAAO,GAAE,CAAC;AAClF,CAAC;AAACC,OAAA,CAAAvB,WAAA,GAAAA,WAAA;AAEF,MAAMe,kBAAkB,GAAIZ,IAAU,IAClC,IAAIqB,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;EAC7B,MAAMC,MAAM,GAAG,IAAIC,UAAU,EAAE;EAC/BD,MAAM,CAACE,MAAM,GAAIC,CAAC,IAAK;IAAA,IAAAC,SAAA;IACnB,KAAAA,SAAA,GAAID,CAAC,CAACE,MAAM,cAAAD,SAAA,eAARA,SAAA,CAAUE,MAAM,EAAE;MAClBR,OAAO,CAACK,CAAC,CAACE,MAAM,CAACC,MAAM,CAAC;IAC5B,CAAC,MAAM;MACHP,MAAM,CAACL,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAChD;EACJ,CAAC;EACDM,MAAM,CAACO,OAAO,GAAGR,MAAM;EACvBC,MAAM,CAACQ,iBAAiB,CAAChC,IAAI,CAAC;AAClC,CAAC,CAAC"}

package/lib/api/video/post.d.ts

@@ -0,0 +1,13 @@
+export interface PostVideoResult {
+    id: number;
+    originalVideoQuality: string;
+    thumbnailUrl: string;
+    url: string;
+    urlMP4: string;
+}
+interface PostVideoOptions {
+    accessToken: string;
+    file: File | Blob;
+}
+export declare const postVideo: ({ accessToken, file, }: PostVideoOptions) => Promise<PostVideoResult>;
+export {};

package/lib/api/video/post.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.postVideo = void 0;
+const postVideo = async _ref => {
+  let {
+    accessToken,
+    file
+  } = _ref;
+  const formData = new FormData();
+  formData.append('files', file);
+  const requestInit = {
+    headers: {
+      Authorization: `Bearer ${accessToken}`
+    },
+    method: 'POST',
+    body: formData
+  };
+  const url = `https://streamingservice.chayns.space/video?disableIntercom=true`;
+  const response = await fetch(url, requestInit);
+
+  // console.log(await response.json());
+
+  if (response.status === 202) {
+    return await response.json();
+  }
+  throw Error(`Uploading the Video failed with status code ${response.status}.`);
+};
+exports.postVideo = postVideo;
+//# sourceMappingURL=post.js.map

package/lib/api/video/post.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post.js","names":["postVideo","_ref","accessToken","file","formData","FormData","append","requestInit","headers","Authorization","method","body","url","response","fetch","status","json","Error","exports"],"sources":["../../../src/api/video/post.ts"],"sourcesContent":["export interface PostVideoResult {\n    id: number;\n    originalVideoQuality: string;\n    thumbnailUrl: string;\n    url: string;\n    urlMP4: string;\n}\n\ninterface PostVideoOptions {\n    accessToken: string;\n    file: File | Blob;\n}\n\nexport const postVideo = async ({\n    accessToken,\n    file,\n}: PostVideoOptions): Promise<PostVideoResult> => {\n    const formData = new FormData();\n\n    formData.append('files', file);\n\n    const requestInit: RequestInit = {\n        headers: {\n            Authorization: `Bearer ${accessToken}`,\n        },\n        method: 'POST',\n        body: formData,\n    };\n\n    const url = `https://streamingservice.chayns.space/video?disableIntercom=true`;\n\n    const response = await fetch(url, requestInit);\n\n    // console.log(await response.json());\n\n    if (response.status === 202) {\n        return (await response.json()) as PostVideoResult;\n    }\n\n    throw Error(`Uploading the Video failed with status code ${response.status}.`);\n};\n"],"mappings":";;;;;;AAaO,MAAMA,SAAS,GAAG,MAAAC,IAAA,IAGyB;EAAA,IAHlB;IAC5BC,WAAW;IACXC;EACc,CAAC,GAAAF,IAAA;EACf,MAAMG,QAAQ,GAAG,IAAIC,QAAQ,EAAE;EAE/BD,QAAQ,CAACE,MAAM,CAAC,OAAO,EAAEH,IAAI,CAAC;EAE9B,MAAMI,WAAwB,GAAG;IAC7BC,OAAO,EAAE;MACLC,aAAa,EAAG,UAASP,WAAY;IACzC,CAAC;IACDQ,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEP;EACV,CAAC;EAED,MAAMQ,GAAG,GAAI,kEAAiE;EAE9E,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAACF,GAAG,EAAEL,WAAW,CAAC;;EAE9C;;EAEA,IAAIM,QAAQ,CAACE,MAAM,KAAK,GAAG,EAAE;IACzB,OAAQ,MAAMF,QAAQ,CAACG,IAAI,EAAE;EACjC;EAEA,MAAMC,KAAK,CAAE,+CAA8CJ,QAAQ,CAACE,MAAO,GAAE,CAAC;AAClF,CAAC;AAACG,OAAA,CAAAlB,SAAA,GAAAA,SAAA"}

package/lib/components/gallery/Gallery.d.ts

@@ -1,4 +1,18 @@
 import { FC } from 'react';
-export type GalleryProps = unknown;
+import type { UploadedFile } from '../../types/files';
+export type GalleryProps = {
+    /**
+     * AccessToken of the user
+     */
+    accessToken: string;
+    /**
+     *  Function to be executed when files are added or removed
+     */
+    onChange: (files: UploadedFile[]) => void;
+    /**
+     * PersonId of the user
+     */
+    personId: string;
+};
 declare const Gallery: FC<GalleryProps>;
 export default Gallery;

package/lib/components/gallery/Gallery.js

@@ -4,10 +4,180 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _post = require("../../api/image/post");
+var _post2 = require("../../api/video/post");
+var _file = require("../../utils/file");
 var _Gallery = require("./Gallery.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Gallery = () => /*#__PURE__*/_react.default.createElement(_Gallery.StyledGallery, null, "Gallery");
+var _core = require("@chayns-components/core");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Types
+
+const Gallery = _ref => {
+  let {
+    accessToken,
+    onChange,
+    personId
+  } = _ref;
+  const [uploadedFiles, setUploadedFiles] = (0, _react.useState)();
+
+  /**
+   * Upload files
+   */
+  const uploadFiles = (0, _react.useCallback)(async filesToUpload => {
+    if (!filesToUpload) {
+      return;
+    }
+    const videos = filesToUpload.filter(_ref2 => {
+      let {
+        type
+      } = _ref2;
+      return type.includes('video/');
+    });
+    const images = filesToUpload.filter(_ref3 => {
+      let {
+        type
+      } = _ref3;
+      return type.includes('image/');
+    });
+    let newUploadedFiles = [];
+
+    // Upload videos
+    const videoResult = videos.map(video => (0, _post2.postVideo)({
+      accessToken,
+      file: video
+    }));
+    newUploadedFiles = newUploadedFiles.concat(await Promise.all(videoResult));
+    newUploadedFiles = newUploadedFiles.flat();
+
+    // Upload images
+    const imageResult = images.map(image => (0, _post.imageUpload)({
+      accessToken,
+      file: image,
+      personId
+    }));
+    newUploadedFiles = newUploadedFiles.concat(await Promise.all(imageResult));
+    if (!uploadedFiles) {
+      setUploadedFiles(newUploadedFiles);
+      onChange(newUploadedFiles);
+      return;
+    }
+    setUploadedFiles((0, _file.filterDuplicateFiles)(uploadedFiles, newUploadedFiles));
+    onChange((0, _file.filterDuplicateFiles)(uploadedFiles, newUploadedFiles));
+  }, [accessToken, onChange, personId, uploadedFiles]);
+
+  /**
+   * This function adds new data to the existing data list
+   */
+  const handleAdd = (0, _react.useCallback)(filesAdd => {
+    if (!filesAdd) {
+      return;
+    }
+    void uploadFiles(filesAdd);
+  }, [uploadFiles]);
+
+  /**
+   * Open a dialog to select files
+   */
+  const openSelectDialog = (0, _react.useCallback)(() => {
+    void (0, _file.selectFiles)({
+      multiple: true,
+      type: 'image/*, video/*'
+    }).then(selectedFiles => {
+      if (selectedFiles && selectedFiles.length > 0) {
+        const fileArray = (0, _file.convertFileListToArray)(selectedFiles);
+
+        // Filters files to use only under 64MB
+        const filteredFileArray = fileArray.filter(_ref4 => {
+          let {
+            size,
+            type
+          } = _ref4;
+          const sizeInMB = size / 1024 / 1024;
+          if (type.includes('video/') && sizeInMB > 500) {
+            return false;
+          }
+          return !(type.includes('image/') && sizeInMB > 64);
+        });
+        if (fileArray.length !== filteredFileArray.length) {
+          // ToDo show dialog that some files are to big
+        }
+        if (filteredFileArray.length === 0) {
+          // ToDo show dialog that all files are to big
+
+          return;
+        }
+        handleAdd(filteredFileArray);
+      }
+    });
+  }, [handleAdd]);
+
+  /**
+   * This function deletes a selected file from the data list
+   */
+  const handleDelete = (0, _react.useCallback)(key => {
+    const filteredFiles = uploadedFiles === null || uploadedFiles === void 0 ? void 0 : uploadedFiles.filter(file => {
+      if ('thumbnailUrl' in file) {
+        return file.id !== key;
+      }
+      return file.key !== key;
+    });
+    setUploadedFiles(filteredFiles !== null && filteredFiles !== void 0 ? filteredFiles : []);
+    onChange(filteredFiles !== null && filteredFiles !== void 0 ? filteredFiles : []);
+  }, [onChange, uploadedFiles]);
+
+  /**
+   * This function shows a selected file
+   */
+  const showFile = (0, _react.useCallback)(file => {
+    if ('thumbnailUrl' in file) {
+      // @ts-expect-error: Type is correct here
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+      void chayns.openVideo(file.url);
+      return;
+    }
+
+    // @ts-expect-error: Type is correct here
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    void chayns.openImage([`${file.base}/${file.key}`], 0);
+  }, []);
+  const galleryItems = (0, _react.useMemo)(() => {
+    const items = [];
+    if (uploadedFiles) {
+      uploadedFiles.forEach(file => {
+        items.push( /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItem, {
+          key: 'thumbnailUrl' in file ? file.id : file.key
+        }, /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemDeleteButton, {
+          onClick: () => handleDelete('thumbnailUrl' in file ? file.id : file.key)
+        }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+          size: 20,
+          icons: ['ts-wrong']
+        })), 'thumbnailUrl' in file ? /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemVideo, {
+          onClick: () => showFile(file),
+          poster: file.thumbnailUrl
+        }, /*#__PURE__*/_react.default.createElement("source", {
+          src: file.url,
+          type: "video/mp4"
+        })) : /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemImage, {
+          onClick: () => showFile(file),
+          draggable: false,
+          src: `${file.base}/${file.key}`
+        })));
+      });
+    }
+    items.push( /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItem, {
+      key: "addButton"
+    }, /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemAdd, {
+      onClick: openSelectDialog
+    }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+      size: 40,
+      icons: ['fa fa-plus']
+    }))));
+    return items;
+  }, [handleDelete, openSelectDialog, showFile, uploadedFiles]);
+  return /*#__PURE__*/_react.default.createElement(_Gallery.StyledGallery, null, galleryItems);
+};
 Gallery.displayName = 'Gallery';
 var _default = Gallery;
 exports.default = _default;

package/lib/components/gallery/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["_react","_interopRequireDefault","require","_Gallery","obj","__esModule","default","Gallery","createElement","StyledGallery","displayName","_default","exports"],"sources":["../../../src/components/gallery/Gallery.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyledGallery } from './Gallery.styles';\n\nexport type GalleryProps = unknown;\n\nconst Gallery: FC<GalleryProps> = () => <StyledGallery>Gallery</StyledGallery>;\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAiD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAIjD,MAAMG,OAAyB,GAAGA,CAAA,kBAAMP,MAAA,CAAAM,OAAA,CAAAE,aAAA,CAACL,QAAA,CAAAM,aAAa,QAAC,SAAO,CAAgB;AAE9EF,OAAO,CAACG,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAEjBJ,OAAO;AAAAK,OAAA,CAAAN,OAAA,GAAAK,QAAA"}
+{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_post","_post2","_file","_Gallery","_core","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Gallery","_ref","accessToken","onChange","personId","uploadedFiles","setUploadedFiles","useState","uploadFiles","useCallback","filesToUpload","videos","filter","_ref2","type","includes","images","_ref3","newUploadedFiles","videoResult","map","video","postVideo","file","concat","Promise","all","flat","imageResult","image","imageUpload","filterDuplicateFiles","handleAdd","filesAdd","openSelectDialog","selectFiles","multiple","then","selectedFiles","length","fileArray","convertFileListToArray","filteredFileArray","_ref4","size","sizeInMB","handleDelete","filteredFiles","id","showFile","chayns","openVideo","url","openImage","base","galleryItems","useMemo","items","forEach","push","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","onClick","Icon","icons","StyledGalleryItemVideo","poster","thumbnailUrl","src","StyledGalleryItemImage","draggable","StyledGalleryItemAdd","StyledGallery","displayName","_default","exports"],"sources":["../../../src/components/gallery/Gallery.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { imageUpload } from '../../api/image/post';\nimport { postVideo } from '../../api/video/post';\nimport { convertFileListToArray, filterDuplicateFiles, selectFiles } from '../../utils/file';\nimport {\n    StyledGallery,\n    StyledGalleryItem,\n    StyledGalleryItemAdd,\n    StyledGalleryItemDeleteButton,\n    StyledGalleryItemImage,\n    StyledGalleryItemVideo,\n} from './Gallery.styles';\n\n// Types\nimport { Icon } from '@chayns-components/core';\nimport type { Image, UploadedFile, Video } from '../../types/files';\n\nexport type GalleryProps = {\n    /**\n     * AccessToken of the user\n     */\n    accessToken: string;\n    /**\n     *  Function to be executed when files are added or removed\n     */\n    onChange: (files: UploadedFile[]) => void;\n    /**\n     * PersonId of the user\n     */\n    personId: string;\n};\n\nconst Gallery: FC<GalleryProps> = ({ accessToken, onChange, personId }) => {\n    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>();\n\n    /**\n     * Upload files\n     */\n    const uploadFiles = useCallback(\n        async (filesToUpload: File[]) => {\n            if (!filesToUpload) {\n                return;\n            }\n\n            const videos = filesToUpload.filter(({ type }) => type.includes('video/'));\n            const images = filesToUpload.filter(({ type }) => type.includes('image/'));\n            let newUploadedFiles: UploadedFile[] = [];\n\n            // Upload videos\n            const videoResult: Promise<Video>[] = videos.map((video) =>\n                postVideo({ accessToken, file: video })\n            );\n\n            newUploadedFiles = newUploadedFiles.concat(await Promise.all(videoResult));\n            newUploadedFiles = newUploadedFiles.flat();\n\n            // Upload images\n            const imageResult: Promise<Image>[] = images.map((image) =>\n                imageUpload({\n                    accessToken,\n                    file: image,\n                    personId,\n                })\n            );\n\n            newUploadedFiles = newUploadedFiles.concat(await Promise.all(imageResult));\n\n            if (!uploadedFiles) {\n                setUploadedFiles(newUploadedFiles);\n\n                onChange(newUploadedFiles);\n\n                return;\n            }\n\n            setUploadedFiles(filterDuplicateFiles(uploadedFiles, newUploadedFiles));\n\n            onChange(filterDuplicateFiles(uploadedFiles, newUploadedFiles));\n        },\n        [accessToken, onChange, personId, uploadedFiles]\n    );\n\n    /**\n     * This function adds new data to the existing data list\n     */\n    const handleAdd = useCallback(\n        (filesAdd: File[]) => {\n            if (!filesAdd) {\n                return;\n            }\n\n            void uploadFiles(filesAdd);\n        },\n        [uploadFiles]\n    );\n\n    /**\n     * Open a dialog to select files\n     */\n    const openSelectDialog = useCallback(() => {\n        void selectFiles({\n            multiple: true,\n            type: 'image/*, video/*',\n        }).then((selectedFiles) => {\n            if (selectedFiles && selectedFiles.length > 0) {\n                const fileArray = convertFileListToArray(selectedFiles);\n\n                // Filters files to use only under 64MB\n                const filteredFileArray = fileArray.filter(({ size, type }) => {\n                    const sizeInMB = size / 1024 / 1024;\n\n                    if (type.includes('video/') && sizeInMB > 500) {\n                        return false;\n                    }\n\n                    return !(type.includes('image/') && sizeInMB > 64);\n                });\n\n                if (fileArray.length !== filteredFileArray.length) {\n                    // ToDo show dialog that some files are to big\n                }\n\n                if (filteredFileArray.length === 0) {\n                    // ToDo show dialog that all files are to big\n\n                    return;\n                }\n\n                handleAdd(filteredFileArray);\n            }\n        });\n    }, [handleAdd]);\n\n    /**\n     * This function deletes a selected file from the data list\n     */\n    const handleDelete = useCallback(\n        (key: number | string) => {\n            const filteredFiles = uploadedFiles?.filter((file) => {\n                if ('thumbnailUrl' in file) {\n                    return file.id !== key;\n                }\n                return file.key !== key;\n            });\n\n            setUploadedFiles(filteredFiles ?? []);\n\n            onChange(filteredFiles ?? []);\n        },\n        [onChange, uploadedFiles]\n    );\n\n    /**\n     * This function shows a selected file\n     */\n    const showFile = useCallback((file: UploadedFile) => {\n        if ('thumbnailUrl' in file) {\n            // @ts-expect-error: Type is correct here\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n            void chayns.openVideo(file.url);\n\n            return;\n        }\n\n        // @ts-expect-error: Type is correct here\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n        void chayns.openImage([`${file.base}/${file.key}`], 0);\n    }, []);\n\n    const galleryItems = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (uploadedFiles) {\n            uploadedFiles.forEach((file) => {\n                items.push(\n                    <StyledGalleryItem key={'thumbnailUrl' in file ? file.id : file.key}>\n                        <StyledGalleryItemDeleteButton\n                            onClick={() =>\n                                handleDelete('thumbnailUrl' in file ? file.id : file.key)\n                            }\n                        >\n                            <Icon size={20} icons={['ts-wrong']} />\n                        </StyledGalleryItemDeleteButton>\n                        {'thumbnailUrl' in file ? (\n                            <StyledGalleryItemVideo\n                                onClick={() => showFile(file)}\n                                poster={file.thumbnailUrl}\n                            >\n                                <source src={file.url} type=\"video/mp4\" />\n                            </StyledGalleryItemVideo>\n                        ) : (\n                            <StyledGalleryItemImage\n                                onClick={() => showFile(file)}\n                                draggable={false}\n                                src={`${file.base}/${file.key}`}\n                            />\n                        )}\n                    </StyledGalleryItem>\n                );\n            });\n        }\n\n        items.push(\n            <StyledGalleryItem key=\"addButton\">\n                <StyledGalleryItemAdd onClick={openSelectDialog}>\n                    <Icon size={40} icons={['fa fa-plus']} />\n                </StyledGalleryItemAdd>\n            </StyledGalleryItem>\n        );\n\n        return items;\n    }, [handleDelete, openSelectDialog, showFile, uploadedFiles]);\n\n    return <StyledGallery>{galleryItems}</StyledGallery>;\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}

package/lib/components/gallery/Gallery.styles.d.ts

@@ -1 +1,14 @@
 export declare const StyledGallery: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledGalleryItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledGalleryItemDeleteButton: import("styled-components").StyledComponent<"button", any, {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledGalleryItemAdd: import("styled-components").StyledComponent<"button", any, {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledGalleryItemImage: import("styled-components").StyledComponent<"img", any, {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledGalleryItemVideo: import("styled-components").StyledComponent<"video", any, {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

package/lib/components/gallery/Gallery.styles.js

@@ -3,9 +3,105 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledGallery = void 0;
+exports.StyledGalleryItemVideo = exports.StyledGalleryItemImage = exports.StyledGalleryItemDeleteButton = exports.StyledGalleryItemAdd = exports.StyledGalleryItem = exports.StyledGallery = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledGallery = _styledComponents.default.div``;
+const StyledGallery = _styledComponents.default.div`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 15px;
+
+    & > * {
+        flex-basis: calc(25% - 7.5px); /* 25% Breite, abzüglich des Lückenabstands */
+    }
+`;
 exports.StyledGallery = StyledGallery;
+const StyledGalleryItem = _styledComponents.default.div`
+    position: relative;
+`;
+exports.StyledGalleryItem = StyledGalleryItem;
+const StyledGalleryItemDeleteButton = _styledComponents.default.button`
+    background-color: rgba(
+        ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['000-rgb'];
+}},
+        0.75
+    );
+    box-shadow: 0 0 0 1px
+        rgba(${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    height: 30px;
+    width: 30px;
+`;
+exports.StyledGalleryItemDeleteButton = StyledGalleryItemDeleteButton;
+const StyledGalleryItemAdd = _styledComponents.default.button`
+    background-color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['101'];
+}};
+    box-shadow: 0 0 0 1px
+        rgba(${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+`;
+exports.StyledGalleryItemAdd = StyledGalleryItemAdd;
+const StyledGalleryItemImage = _styledComponents.default.img`
+    background-color: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme['101'];
+}};
+    box-shadow: 0 0 0 1px
+        rgba(${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    z-index: 1;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+`;
+exports.StyledGalleryItemImage = StyledGalleryItemImage;
+const StyledGalleryItemVideo = _styledComponents.default.video`
+    background-color: ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme['101'];
+}};
+    box-shadow: 0 0 0 1px
+        rgba(${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+`;
+exports.StyledGalleryItemVideo = StyledGalleryItemVideo;
 //# sourceMappingURL=Gallery.styles.js.map

package/lib/components/gallery/Gallery.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledGallery","styled","div","exports"],"sources":["../../../src/components/gallery/Gallery.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledGallery = styled.div``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,aAAa,GAAGC,yBAAM,CAACC,GAAI,EAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA"}
+{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledGallery","styled","div","exports","StyledGalleryItem","StyledGalleryItemDeleteButton","button","_ref","theme","_ref2","StyledGalleryItemAdd","_ref3","_ref4","StyledGalleryItemImage","img","_ref5","_ref6","StyledGalleryItemVideo","video","_ref7","_ref8"],"sources":["../../../src/components/gallery/Gallery.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGallery = styled.div`\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 10px;\n    padding: 15px;\n\n    & > * {\n        flex-basis: calc(25% - 7.5px); /* 25% Breite, abzüglich des Lückenabstands */\n    }\n`;\n\nexport const StyledGalleryItem = styled.div`\n    position: relative;\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 }: StyledGalleryItemImageProps) => 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`;\n\ntype StyledGalleryItemAddProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemAdd = styled.button<StyledGalleryItemAddProps>`\n    background-color: ${({ theme }: StyledGalleryItemAddProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n`;\n\ntype StyledGalleryItemImageProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemImage = styled.img<StyledGalleryItemImageProps>`\n    background-color: ${({ theme }: StyledGalleryItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n    object-fit: cover;\n`;\n\ntype StyledGalleryItemVideoProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemVideo = styled.video<StyledGalleryItemVideoProps>`\n    background-color: ${({ theme }: StyledGalleryItemVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n    object-fit: cover;\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,aAAa,GAAGC,yBAAM,CAACC,GAAI;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA;AAEK,MAAMI,iBAAiB,GAAGH,yBAAM,CAACC,GAAI;AAC5C;AACA,CAAC;AAACC,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAIK,MAAMC,6BAA6B,GAAGJ,yBAAM,CAACK,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;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAE,6BAAA,GAAAA,6BAAA;AAIK,MAAMK,oBAAoB,GAAGT,yBAAM,CAACK,MAAkC;AAC7E,wBAAwBK,KAAA;EAAA,IAAC;IAAEH;EAAiC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E;AACA,eAAeI,KAAA;EAAA,IAAC;IAAEJ;EAAmC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA,CAAC;AAACL,OAAA,CAAAO,oBAAA,GAAAA,oBAAA;AAIK,MAAMG,sBAAsB,GAAGZ,yBAAM,CAACa,GAAiC;AAC9E,wBAAwBC,KAAA;EAAA,IAAC;IAAEP;EAAmC,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeQ,KAAA;EAAA,IAAC;IAAER;EAAmC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAU,sBAAA,GAAAA,sBAAA;AAIK,MAAMI,sBAAsB,GAAGhB,yBAAM,CAACiB,KAAmC;AAChF,wBAAwBC,KAAA;EAAA,IAAC;IAAEX;EAAmC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeY,KAAA;EAAA,IAAC;IAAEZ;EAAmC,CAAC,GAAAY,KAAA;EAAA,OAAKZ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAc,sBAAA,GAAAA,sBAAA"}

package/lib/types/files.d.ts

@@ -0,0 +1,17 @@
+export interface Video {
+    id: number;
+    originalVideoQuality: string;
+    thumbnailUrl: string;
+    url: string;
+}
+export interface Image {
+    key: string;
+    base: string;
+    meta: Meta;
+}
+export interface Meta {
+    preview: string;
+    width: string;
+    height: string;
+}
+export type UploadedFile = Video | Image;

package/lib/types/files.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=files.js.map

package/lib/types/files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.js","names":[],"sources":["../../src/types/files.ts"],"sourcesContent":["export interface Video {\n    id: number;\n    originalVideoQuality: string;\n    thumbnailUrl: string;\n    url: string;\n}\n\nexport interface Image {\n    key: string;\n    base: string;\n    meta: Meta;\n}\n\nexport interface Meta {\n    preview: string;\n    width: string;\n    height: string;\n}\n\nexport type UploadedFile = Video | Image;\n"],"mappings":""}

package/lib/utils/file.d.ts

@@ -0,0 +1,9 @@
+import type { UploadedFile } from '../types/files';
+interface SelectFilesOptions {
+    type: string;
+    multiple: boolean;
+}
+export declare const selectFiles: ({ type, multiple }: SelectFilesOptions) => Promise<null | FileList>;
+export declare const convertFileListToArray: (fileList: FileList) => File[];
+export declare const filterDuplicateFiles: (oldFiles: UploadedFile[], newFiles: UploadedFile[]) => UploadedFile[];
+export {};

package/lib/utils/file.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectFiles = exports.filterDuplicateFiles = exports.convertFileListToArray = void 0;
+const selectFiles = _ref => {
+  let {
+    type,
+    multiple
+  } = _ref;
+  return new Promise(resolve => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    if (type !== '*/*' && type) {
+      input.accept = type;
+    }
+    if (multiple) {
+      input.multiple = true;
+    }
+    input.style.visibility = 'none';
+    input.style.width = '0';
+    input.style.height = '0';
+    input.style.display = 'none';
+    document.body.appendChild(input);
+    input.addEventListener('change', event => {
+      document.body.removeChild(input);
+      const target = event.target;
+      const {
+        files
+      } = target;
+      resolve(files);
+    });
+    input.click();
+  });
+};
+exports.selectFiles = selectFiles;
+const convertFileListToArray = fileList => {
+  const filesArray = [];
+  for (let i = 0; i < fileList.length; i++) {
+    const file = fileList.item(i);
+    if (file) {
+      filesArray.push(file);
+    }
+  }
+  return filesArray;
+};
+exports.convertFileListToArray = convertFileListToArray;
+const filterDuplicateFiles = (oldFiles, newFiles) => {
+  const seenKeys = new Set();
+  const filteredFiles = [];
+  oldFiles.forEach(file => {
+    let key;
+    if ('id' in file) {
+      key = file.id.toString();
+    } else {
+      key = file.key;
+    }
+    seenKeys.add(key);
+    filteredFiles.push(file);
+  });
+  newFiles.forEach(file => {
+    let key;
+    if ('id' in file) {
+      key = file.id.toString();
+    } else {
+      key = file.key;
+    }
+    if (!seenKeys.has(key)) {
+      seenKeys.add(key);
+      filteredFiles.push(file);
+    }
+  });
+  return filteredFiles;
+};
+exports.filterDuplicateFiles = filterDuplicateFiles;
+//# sourceMappingURL=file.js.map

package/lib/utils/file.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.js","names":["selectFiles","_ref","type","multiple","Promise","resolve","input","document","createElement","accept","style","visibility","width","height","display","body","appendChild","addEventListener","event","removeChild","target","files","click","exports","convertFileListToArray","fileList","filesArray","i","length","file","item","push","filterDuplicateFiles","oldFiles","newFiles","seenKeys","Set","filteredFiles","forEach","key","id","toString","add","has"],"sources":["../../src/utils/file.ts"],"sourcesContent":["import type { UploadedFile } from '../types/files';\n\ninterface SelectFilesOptions {\n    type: string;\n    multiple: boolean;\n}\n\nexport const selectFiles = ({ type, multiple }: SelectFilesOptions): Promise<null | FileList> =>\n    new Promise((resolve) => {\n        const input = document.createElement('input');\n        input.type = 'file';\n\n        if (type !== '*/*' && type) {\n            input.accept = type;\n        }\n\n        if (multiple) {\n            input.multiple = true;\n        }\n\n        input.style.visibility = 'none';\n        input.style.width = '0';\n        input.style.height = '0';\n        input.style.display = 'none';\n\n        document.body.appendChild(input);\n\n        input.addEventListener('change', (event) => {\n            document.body.removeChild(input);\n\n            const target = event.target as HTMLInputElement;\n            const { files } = target;\n\n            resolve(files);\n        });\n\n        input.click();\n    });\n\nexport const convertFileListToArray = (fileList: FileList): File[] => {\n    const filesArray = [];\n    for (let i = 0; i < fileList.length; i++) {\n        const file = fileList.item(i);\n\n        if (file) {\n            filesArray.push(file);\n        }\n    }\n\n    return filesArray;\n};\n\nexport const filterDuplicateFiles = (\n    oldFiles: UploadedFile[],\n    newFiles: UploadedFile[]\n): UploadedFile[] => {\n    const seenKeys = new Set<string>();\n    const filteredFiles: UploadedFile[] = [];\n\n    oldFiles.forEach((file) => {\n        let key: string;\n        if ('id' in file) {\n            key = file.id.toString();\n        } else {\n            key = file.key;\n        }\n\n        seenKeys.add(key);\n        filteredFiles.push(file);\n    });\n\n    newFiles.forEach((file) => {\n        let key: string;\n        if ('id' in file) {\n            key = file.id.toString();\n        } else {\n            key = file.key;\n        }\n\n        if (!seenKeys.has(key)) {\n            seenKeys.add(key);\n            filteredFiles.push(file);\n        }\n    });\n\n    return filteredFiles;\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.0.0-beta.104",
+    "version": "5.0.0-beta.107",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -49,7 +49,7 @@
         "typescript": "^4.9.5"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.104",
+        "@chayns-components/core": "^5.0.0-beta.105",
         "@chayns/colors": "^2.0.0",
         "clsx": "^1.2.1",
         "framer-motion": "^6.5.1",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "14f15be7baf4fd754b013d36f1b88b2f9a8c4f77"
+    "gitHead": "7198903cf93e5e131f71f6d8cfe0f77ab133e504"
 }

package/lib/index.d.ts

@@ -1 +0,0 @@
-export { default as Gallery } from './components/gallery/Gallery';

package/lib/index.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Gallery", {
-  enumerable: true,
-  get: function () {
-    return _Gallery.default;
-  }
-});
-var _Gallery = _interopRequireDefault(require("./components/gallery/Gallery"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["_Gallery","_interopRequireDefault","require","obj","__esModule","default"],"sources":["../src/index.ts"],"sourcesContent":["export { default as Gallery } from './components/gallery/Gallery';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAkE,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}