@layers-app/shared 0.4.7 → 0.4.8

package/dist/components/AttachmentsPreview/AttachmentsPreview.js

@@ -1,21 +1,88 @@
-import { jsxs as o, Fragment as P, jsx as a } from "react/jsx-runtime";
-import { useState as M } from "react";
-import { Download01Icon as g } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as u } from "@hugeicons/react";
-import { Stack as y, Box as m, Image as z, LoadingOverlay as v, ActionIcon as l, Grid as I, CloseIcon as N, Flex as b, Text as C } from "@mantine/core";
-import { useDisclosure as O } from "@mantine/hooks";
-import { formatBytes as S } from "../../helpers/formatBytes.js";
-import { getFileIcons as G } from "../../helpers/getFileIcons.js";
-import { getFileType as L } from "../../helpers/getFileType.js";
-import { AttachmentsGalleryModal as $ } from "../AttachmentsGalleryModal/AttachmentsGalleryModal.js";
-import r from "./AttachmentsPreview.module.css.js";
-const k = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m3 16 5-5 4 4'/%3E%3Cpath d='m14 14 2-2 5 5'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E", Y = ({
-  files: s,
-  onRemove: c,
+import { jsxs as n, Fragment as $, jsx as a } from "react/jsx-runtime";
+import { useState as k } from "react";
+import { Download01Icon as v } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as x } from "@hugeicons/react";
+import { Stack as C, Box as m, Image as M, LoadingOverlay as z, ActionIcon as h, Grid as T, CloseIcon as B, Text as f, Flex as A } from "@mantine/core";
+import { useDisclosure as G } from "@mantine/hooks";
+import { formatBytes as W } from "../../helpers/formatBytes.js";
+import { getFileIcons as X } from "../../helpers/getFileIcons.js";
+import { getFileType as Y } from "../../helpers/getFileType.js";
+import { AttachmentsGalleryModal as q } from "../AttachmentsGalleryModal/AttachmentsGalleryModal.js";
+import o from "./AttachmentsPreview.module.css.js";
+import { Audio as i } from "../../node_modules/@gfazioli/mantine-audio/dist/esm/Audio.js";
+import { Video as H } from "../../node_modules/@gfazioli/mantine-video/dist/esm/Video.js";
+const D = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m3 16 5-5 4 4'/%3E%3Cpath d='m14 14 2-2 5 5'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E", K = {
+  "audio/mpeg": "mp3",
+  "audio/mp4": "m4a",
+  "audio/m4a": "m4a",
+  "audio/x-m4a": "m4a",
+  "audio/wav": "wav",
+  "audio/x-wav": "wav",
+  "audio/ogg": "ogg",
+  "audio/opus": "opus",
+  "audio/aac": "aac",
+  "audio/flac": "flac",
+  "audio/x-flac": "flac",
+  "video/mp4": "mp4",
+  "video/webm": "webm",
+  "video/ogg": "ogv",
+  "video/quicktime": "mov",
+  "video/x-matroska": "mkv",
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/bmp": "bmp",
+  "image/svg+xml": "svg",
+  "application/pdf": "pdf",
+  "application/zip": "zip",
+  "application/json": "json",
+  "text/plain": "txt",
+  "text/csv": "csv"
+}, U = /* @__PURE__ */ new Set([
+  "audio/mpeg",
+  "audio/mp4",
+  "audio/m4a",
+  "audio/x-m4a",
+  "audio/aac",
+  "audio/wav",
+  "audio/x-wav",
+  "audio/ogg",
+  "audio/opus",
+  "audio/webm",
+  "audio/flac",
+  "audio/x-flac"
+]), J = /* @__PURE__ */ new Set([
+  "video/mp4",
+  "video/webm",
+  "video/ogg",
+  "video/quicktime"
+]), Q = 360, P = 480;
+function Z(r, s) {
+  const t = r && s ? r / s : 1.7777777777777777;
+  let d = Q, u = Math.round(d / t);
+  return u > P && (u = P, d = Math.round(u * t)), { width: d, height: u };
+}
+function g(r, s) {
+  const t = r?.trim() || "file";
+  if (/\.[a-z0-9]{2,4}$/i.test(t)) return t;
+  const d = s ? K[s] : void 0;
+  return d ? `${t}.${d}` : t;
+}
+const R = (r) => r ? r.split(";")[0].trim().toLowerCase() : "", ue = ({
+  files: r,
+  onRemove: s,
   mode: t,
-  parentIsExisting: p
+  parentIsExisting: d,
+  audioVariant: u
 }) => {
-  const [E, { open: x, close: T }] = O(!1), [B, D] = M(0), n = s.filter((e) => e.isImage), h = s.filter((e) => !e.isImage), F = n.map((e) => ({
+  const [F, { open: I, close: S }] = G(!1), [O, _] = k(0), [E, L] = k(() => /* @__PURE__ */ new Set()), y = (e) => {
+    e && L((l) => {
+      if (l.has(e)) return l;
+      const p = new Set(l);
+      return p.add(e), p;
+    });
+  }, c = r.filter((e) => e.isImage), b = r.filter((e) => !e.isImage), j = c.map((e) => ({
     id: e.id,
     Url: e.url,
     contentType: e.type || "image/png",
@@ -32,53 +99,53 @@ const k = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8
     version: 1,
     deleted: !1,
     deletedAt: /* @__PURE__ */ new Date()
-  })), d = n.every((e) => !e.isTemp), f = (e) => {
-    d && (D(e), x());
+  })), w = c.every((e) => !e.isTemp), N = (e) => {
+    w && (_(e), I());
   };
-  return s.length === 0 ? null : /* @__PURE__ */ o(P, { children: [
-    /* @__PURE__ */ o(y, { gap: "10px", w: "100%", tabIndex: 0, children: [
-      t === "view" && n.length >= 2 && /* @__PURE__ */ a(
+  return r.length === 0 ? null : /* @__PURE__ */ n($, { children: [
+    /* @__PURE__ */ n(C, { gap: "10px", w: "100%", tabIndex: 0, children: [
+      t === "view" && c.length >= 2 && /* @__PURE__ */ a(
         "div",
         {
-          className: r.mediaGrid,
-          "data-odd": n.length % 2 === 1,
-          children: n.map((e, i) => /* @__PURE__ */ o(
+          className: o.mediaGrid,
+          "data-odd": c.length % 2 === 1,
+          children: c.map((e, l) => /* @__PURE__ */ n(
             m,
             {
               pos: "relative",
-              className: `${r.imagePreviewWrapper} ${r.mediaTile}`,
+              className: `${o.imagePreviewWrapper} ${o.mediaTile}`,
               children: [
                 /* @__PURE__ */ a(
-                  z,
+                  M,
                   {
                     src: e.src,
-                    fallbackSrc: k,
+                    fallbackSrc: D,
                     fit: "cover",
-                    className: `${r.tileImg} ${r.mediaFadeIn}`,
-                    style: { cursor: d ? "zoom-in" : "default" },
-                    onClick: () => f(i)
+                    className: `${o.tileImg} ${o.mediaFadeIn}`,
+                    style: { cursor: w ? "zoom-in" : "default" },
+                    onClick: () => N(l)
                   }
                 ),
                 /* @__PURE__ */ a(
-                  v,
+                  z,
                   {
-                    visible: e.isTemp && p,
+                    visible: e.isTemp && d,
                     loaderProps: { size: 20 }
                   }
                 ),
                 !e.isTemp && /* @__PURE__ */ a(
-                  l,
+                  h,
                   {
                     component: "a",
                     size: "22px",
                     href: e.url,
-                    download: e.name,
+                    download: g(e.name, e.type),
                     rel: "noopener noreferrer",
                     variant: "subtle",
                     color: "white",
                     bg: "var(--mantine-color-dark-filled, #2E2E2E)",
-                    className: r.downloadButton,
-                    children: /* @__PURE__ */ a(u, { size: 16, icon: g })
+                    className: o.downloadButton,
+                    children: /* @__PURE__ */ a(x, { size: 16, icon: v })
                   }
                 )
               ]
@@ -87,102 +154,179 @@ const k = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8
           ))
         }
       ),
-      !(t === "view" && n.length >= 2) && n.length > 0 && /* @__PURE__ */ a(I, { gap: "xs", children: n.map((e, i) => {
-        const w = s.indexOf(e);
-        return /* @__PURE__ */ a(I.Col, { span: "content", children: /* @__PURE__ */ o(
+      !(t === "view" && c.length >= 2) && c.length > 0 && /* @__PURE__ */ a(T, { gap: "xs", children: c.map((e, l) => {
+        const p = r.indexOf(e);
+        return /* @__PURE__ */ a(T.Col, { span: "content", children: /* @__PURE__ */ n(
           m,
           {
             pos: "relative",
-            className: r.imagePreviewWrapper,
+            className: o.imagePreviewWrapper,
             style: {
               width: "var(--attachment-image-w, 56px)",
               height: "var(--attachment-image-h, 56px)"
             },
             children: [
               /* @__PURE__ */ a(
-                z,
+                M,
                 {
                   src: e.src,
-                  fallbackSrc: k,
-                  className: r.mediaFadeIn,
+                  fallbackSrc: D,
+                  className: o.mediaFadeIn,
                   w: "100%",
                   h: "100%",
                   fit: "cover",
                   radius: "sm",
                   style: {
-                    cursor: d ? "zoom-in" : "default"
+                    cursor: w ? "zoom-in" : "default"
                   },
-                  onClick: () => f(i)
+                  onClick: () => N(l)
                 }
               ),
               /* @__PURE__ */ a(
-                v,
+                z,
                 {
-                  visible: e.isTemp && t === "view" && p,
+                  visible: e.isTemp && t === "view" && d,
                   loaderProps: { size: 20 }
                 }
               ),
               t === "view" && !e.isTemp && /* @__PURE__ */ a(
-                l,
+                h,
                 {
                   component: "a",
                   size: "20px",
                   href: e.url,
-                  download: e.name,
+                  download: g(e.name, e.type),
                   rel: "noopener noreferrer",
                   variant: "subtle",
                   color: "white",
                   top: 2,
                   right: 2,
                   bg: "var(--mantine-color-dark-filled, #2E2E2E)",
-                  className: r.downloadButton,
-                  children: /* @__PURE__ */ a(u, { size: 16, icon: g })
+                  className: o.downloadButton,
+                  children: /* @__PURE__ */ a(x, { size: 16, icon: v })
                 }
               ),
-              t === "draft" && c && /* @__PURE__ */ a(
-                l,
+              t === "draft" && s && /* @__PURE__ */ a(
+                h,
                 {
                   size: "20px",
                   radius: "xl",
                   variant: "filled",
-                  onMouseDown: (A) => A.preventDefault(),
+                  onMouseDown: (V) => V.preventDefault(),
                   pos: "absolute",
                   color: "dark",
-                  onClick: () => c(w),
-                  className: r.deleteButton,
-                  children: /* @__PURE__ */ a(N, { size: "12px" })
+                  onClick: () => s(p),
+                  className: o.deleteButton,
+                  children: /* @__PURE__ */ a(B, { size: "12px" })
                 }
               )
             ]
           }
         ) }, e.id);
       }) }),
-      h.length > 0 && /* @__PURE__ */ a(
+      b.length > 0 && /* @__PURE__ */ a(
         m,
         {
           w: "100%",
-          className: r.filePreviewList,
-          "data-many": t === "draft" && h.length >= 4,
-          children: h.map((e) => {
-            const i = s.indexOf(e);
-            return /* @__PURE__ */ o(m, { className: r.filePreviewWrapper, children: [
+          className: o.filePreviewList,
+          "data-many": t === "draft" && b.length >= 4,
+          children: b.map((e) => {
+            const l = r.indexOf(e);
+            return t === "view" && U.has(R(e.type)) && !E.has(e.id) ? u === "voice" || /^voice-message\b/i.test(e.name ?? "") ? /* @__PURE__ */ a(m, { children: /* @__PURE__ */ n(
+              i,
+              {
+                src: e.url,
+                variant: "floating",
+                onError: () => y(e.id),
+                children: [
+                  /* @__PURE__ */ a(i.Waveform, { height: 30 }),
+                  /* @__PURE__ */ n(i.Controls, { children: [
+                    /* @__PURE__ */ a(i.PlayButton, {}),
+                    /* @__PURE__ */ a(i.TimeDisplay, {}),
+                    /* @__PURE__ */ a(i.MuteButton, {})
+                  ] })
+                ]
+              }
+            ) }, e.id) : /* @__PURE__ */ a(m, { children: /* @__PURE__ */ n(
+              i,
+              {
+                src: e.url,
+                variant: "floating",
+                onError: () => y(e.id),
+                children: [
+                  /* @__PURE__ */ a(
+                    f,
+                    {
+                      size: "xs",
+                      fw: 500,
+                      truncate: !0,
+                      c: "dimmed",
+                      title: e.name,
+                      children: e.name
+                    }
+                  ),
+                  /* @__PURE__ */ a(i.Timeline, {}),
+                  /* @__PURE__ */ n(i.Controls, { children: [
+                    /* @__PURE__ */ a(i.PlayButton, {}),
+                    /* @__PURE__ */ a(i.TimeDisplay, {}),
+                    /* @__PURE__ */ a(i.MuteButton, {}),
+                    /* @__PURE__ */ a(i.VolumeSlider, {})
+                  ] })
+                ]
+              }
+            ) }, e.id) : t === "view" && e.type && J.has(e.type) && !E.has(e.id) ? /* @__PURE__ */ a(m, { children: /* @__PURE__ */ n(
+              m,
+              {
+                pos: "relative",
+                display: "inline-block",
+                style: Z(e.width, e.height),
+                children: [
+                  /* @__PURE__ */ a(
+                    H,
+                    {
+                      src: e.url,
+                      variant: "overlay",
+                      radius: "md",
+                      onError: () => y(e.id),
+                      className: o.videoPlayer
+                    }
+                  ),
+                  !e.isTemp && /* @__PURE__ */ a(
+                    h,
+                    {
+                      component: "a",
+                      href: e.url,
+                      download: g(e.name, e.type),
+                      rel: "noopener noreferrer",
+                      variant: "filled",
+                      color: "dark",
+                      size: "sm",
+                      pos: "absolute",
+                      top: 6,
+                      right: 6,
+                      children: /* @__PURE__ */ a(x, { size: 16, icon: v })
+                    }
+                  )
+                ]
+              }
+            ) }, e.id) : /* @__PURE__ */ n(m, { className: o.filePreviewWrapper, children: [
               /* @__PURE__ */ a(
-                v,
+                z,
                 {
-                  visible: e.isTemp && t === "view" && p,
+                  visible: e.isTemp && t === "view" && d,
                   loaderProps: { size: 20 }
                 }
               ),
-              /* @__PURE__ */ o(
-                b,
+              /* @__PURE__ */ n(
+                A,
                 {
                   align: "center",
                   justify: "space-between",
                   wrap: "nowrap",
                   gap: 2,
                   children: [
-                    /* @__PURE__ */ o(
-                      b,
+                    /* @__PURE__ */ n(
+                      A,
                       {
                         align: "center",
                         gap: "xs",
@@ -190,60 +334,60 @@ const k = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8
                         flex: 1,
                         miw: 0,
                         children: [
-                          G(
-                            L(e.type, !1, e.name),
+                          X(
+                            Y(e.type, !1, e.name),
                             !1,
                             36
                           ),
-                          /* @__PURE__ */ o(y, { gap: 0, flex: 1, miw: 0, children: [
+                          /* @__PURE__ */ n(C, { gap: 0, flex: 1, miw: 0, children: [
                             /* @__PURE__ */ a(
-                              C,
+                              f,
                               {
                                 size: "sm",
                                 truncate: !0,
                                 title: e.name,
-                                className: r.fileDownloadName,
+                                className: o.fileDownloadName,
                                 component: "a",
                                 href: e.url,
-                                download: e.name,
+                                download: g(e.name, e.type),
                                 rel: "noopener noreferrer",
                                 w: "fit-content",
                                 children: e.name
                               }
                             ),
-                            /* @__PURE__ */ a(C, { size: "xs", className: r.fileSize, children: S(e.size, 1) })
+                            /* @__PURE__ */ a(f, { size: "xs", className: o.fileSize, children: W(e.size, 1) })
                           ] })
                         ]
                       }
                     ),
                     t === "view" && !e.isTemp && /* @__PURE__ */ a(
-                      l,
+                      h,
                       {
                         component: "a",
                         href: e.url,
-                        download: e.name,
+                        download: g(e.name, e.type),
                         rel: "noopener noreferrer",
                         variant: "subtle",
                         color: "gray",
                         size: "sm",
-                        className: r.downloadButton,
-                        children: /* @__PURE__ */ a(u, { size: 16, icon: g })
+                        className: o.downloadButton,
+                        children: /* @__PURE__ */ a(x, { size: 16, icon: v })
                       }
                     )
                   ]
                 }
               ),
-              t === "draft" && c && /* @__PURE__ */ a(
-                l,
+              t === "draft" && s && /* @__PURE__ */ a(
+                h,
                 {
                   size: "xs",
                   radius: "xl",
-                  onMouseDown: (w) => w.preventDefault(),
+                  onMouseDown: (p) => p.preventDefault(),
                   variant: "filled",
                   color: "dark",
-                  onClick: () => c(i),
-                  className: r.deleteButton,
-                  children: /* @__PURE__ */ a(N, { size: "12px" })
+                  onClick: () => s(l),
+                  className: o.deleteButton,
+                  children: /* @__PURE__ */ a(B, { size: "12px" })
                 }
               )
             ] }, e.id);
@@ -251,17 +395,17 @@ const k = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8
         }
       )
     ] }),
-    d && /* @__PURE__ */ a(
-      $,
+    w && /* @__PURE__ */ a(
+      q,
       {
-        opened: E,
-        onOpenChange: (e) => e ? x() : T(),
-        attachments: F,
-        initialIndex: B
+        opened: F,
+        onOpenChange: (e) => e ? I() : S(),
+        attachments: j,
+        initialIndex: O
       }
     )
   ] });
 };
 export {
-  Y as AttachmentsPreview
+  ue as AttachmentsPreview
 };

package/dist/components/AttachmentsPreview/AttachmentsPreview.module.css.js

@@ -1,27 +1,29 @@
-const e = "_mediaGrid_1n4ll_6", l = "_mediaTile_1n4ll_14", i = "_tileImg_1n4ll_29", n = "_mediaFadeIn_1n4ll_36", t = "_downloadButton_1n4ll_58", _ = "_imagePreviewWrapper_1n4ll_56", a = "_deleteButton_1n4ll_69", o = "_filePreviewList_1n4ll_95", d = "_fileDownloadName_1n4ll_108", r = "_filePreviewWrapper_1n4ll_114", m = "_fileSize_1n4ll_170", s = {
+const e = "_mediaGrid_1q5jy_11", i = "_mediaTile_1q5jy_27", t = "_tileImg_1q5jy_61", _ = "_mediaFadeIn_1q5jy_75", a = "_downloadButton_1q5jy_119", o = "_imagePreviewWrapper_1q5jy_115", l = "_deleteButton_1q5jy_145", d = "_filePreviewList_1q5jy_197", n = "_fileDownloadName_1q5jy_223", r = "_filePreviewWrapper_1q5jy_235", s = "_fileSize_1q5jy_303", m = "_videoPlayer_1q5jy_311", y = {
   mediaGrid: e,
-  mediaTile: l,
-  tileImg: i,
-  mediaFadeIn: n,
-  downloadButton: t,
-  imagePreviewWrapper: _,
-  deleteButton: a,
-  filePreviewList: o,
-  fileDownloadName: d,
+  mediaTile: i,
+  tileImg: t,
+  mediaFadeIn: _,
+  downloadButton: a,
+  imagePreviewWrapper: o,
+  deleteButton: l,
+  filePreviewList: d,
+  fileDownloadName: n,
   filePreviewWrapper: r,
-  fileSize: m
+  fileSize: s,
+  videoPlayer: m
 };
 export {
-  s as default,
-  a as deleteButton,
-  t as downloadButton,
-  d as fileDownloadName,
-  o as filePreviewList,
+  y as default,
+  l as deleteButton,
+  a as downloadButton,
+  n as fileDownloadName,
+  d as filePreviewList,
   r as filePreviewWrapper,
-  m as fileSize,
-  _ as imagePreviewWrapper,
-  n as mediaFadeIn,
+  s as fileSize,
+  o as imagePreviewWrapper,
+  _ as mediaFadeIn,
   e as mediaGrid,
-  l as mediaTile,
-  i as tileImg
+  i as mediaTile,
+  t as tileImg,
+  m as videoPlayer
 };

package/dist/components/BouncingLogo/BouncingLogo.module.css.js

@@ -1,11 +1,11 @@
-const o = "_wrapper_16jue_1", s = "_logo_16jue_8", a = "_shadow_16jue_23", e = {
+const o = "_wrapper_1p3dk_1", s = "_logo_1p3dk_15", p = "_shadow_1p3dk_45", a = {
   wrapper: o,
   logo: s,
-  shadow: a
+  shadow: p
 };
 export {
-  e as default,
+  a as default,
   s as logo,
-  a as shadow,
+  p as shadow,
   o as wrapper
 };

package/dist/components/Chat/CallMessage/CallMessage.module.css.js

@@ -1,15 +1,15 @@
-const t = "_root_328w5_1", o = "_icon_328w5_7", _ = "_body_328w5_16", c = "_title_328w5_21", e = "_meta_328w5_27", n = {
+const t = "_root_1rrzr_1", o = "_icon_1rrzr_13", r = "_body_1rrzr_31", _ = "_title_1rrzr_41", c = "_meta_1rrzr_53", e = {
   root: t,
   icon: o,
-  body: _,
-  title: c,
-  meta: e
+  body: r,
+  title: _,
+  meta: c
 };
 export {
-  _ as body,
-  n as default,
+  r as body,
+  e as default,
   o as icon,
-  e as meta,
+  c as meta,
   t as root,
-  c as title
+  _ as title
 };

package/dist/components/Chat/ChatBubble/ChatBubble.module.css.js

@@ -1,4 +1,4 @@
-const o = "_root_1oixr_1", b = "_bubble_1oixr_14", t = {
+const o = "_root_1iueq_1", b = "_bubble_1iueq_27", t = {
   root: o,
   bubble: b
 };

package/dist/components/Chat/ChatHeader/ChatHeader.module.css.js

@@ -1,4 +1,4 @@
-const t = "_root_yfjvk_1", o = "_info_yfjvk_12", e = "_title_yfjvk_22", n = "_subtitle_yfjvk_31", s = "_selectionBar_yfjvk_44", _ = "_selectionCount_yfjvk_49", i = {
+const t = "_root_13wo5_1", o = "_info_13wo5_23", e = "_title_13wo5_43", n = "_subtitle_13wo5_61", s = "_selectionBar_13wo5_87", _ = "_selectionCount_13wo5_97", i = {
   root: t,
   info: o,
   title: e,