@layers-app/shared 0.1.5 → 0.2.1

package/dist/components/AttachmentsGalleryModal/components/ModalHeader.js

@@ -0,0 +1,123 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { memo as I, useRef as b } from "react";
+import { useTranslation as A } from "react-i18next";
+import { Box as C, Tooltip as l, ActionIcon as o, Text as m, Flex as p } from "@mantine/core";
+import { IconDownload as h, IconMinus as R, IconPlus as k, IconX as F } from "@tabler/icons-react";
+import { useAttachmentsGalleryContext as T } from "../AttachmentsGalleryContext.js";
+import { zoomStep as u } from "../helpers.js";
+import { useDownloadFile as j } from "../hooks/useDownloadFile.js";
+import { useZoomReset as D } from "../hooks/useZoomReset.js";
+const V = I(
+  ({ onClose: f, attachments: y }) => {
+    D();
+    const { t: e } = A("ui"), i = b(null), { zoomPercentage: x, transformRefs: n, selectedIndex: a } = T(), c = y?.[a], w = () => {
+      u({
+        animationRef: i,
+        dir: "in",
+        activeRef: n.current[a]
+      });
+    }, v = () => {
+      u({
+        animationRef: i,
+        dir: "out",
+        activeRef: n.current[a]
+      });
+    }, { isVideo: z, isFetching: s, onDownload: d, isMobile: g } = j(c);
+    return /* @__PURE__ */ t(
+      C,
+      {
+        style: {
+          borderRadius: 8,
+          display: "grid",
+          gridTemplateColumns: "1fr auto 1fr",
+          alignItems: "center",
+          flex: "none",
+          gap: 12
+        },
+        px: 8,
+        py: 8,
+        bg: "var(--mantine-color-dark-6)",
+        children: [
+          g ? /* @__PURE__ */ r(l, { withArrow: !0, label: e("gallery.download"), children: /* @__PURE__ */ r(
+            o,
+            {
+              c: "var(--app-gallary-text)",
+              color: "gray",
+              size: "lg",
+              variant: "light",
+              loading: s,
+              onClick: d,
+              children: /* @__PURE__ */ r(h, { size: 20 })
+            }
+          ) }) : /* @__PURE__ */ r(m, { ml: 6, fw: 500, fz: 14, c: "var(--app-gallary-text)", truncate: !0, children: c?.originalFileName || "" }),
+          z ? /* @__PURE__ */ r("div", {}) : /* @__PURE__ */ t(p, { gap: "xs", children: [
+            /* @__PURE__ */ r(l, { withArrow: !0, label: e("gallery.zoomOut"), children: /* @__PURE__ */ r(
+              o,
+              {
+                c: "var(--app-gallary-text)",
+                color: "gray",
+                size: "lg",
+                variant: "light",
+                onClick: v,
+                children: /* @__PURE__ */ r(R, { size: 20 })
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              m,
+              {
+                fw: 500,
+                fz: 14,
+                c: "var(--app-gallary-text)",
+                miw: 50,
+                ta: "center",
+                children: [
+                  x,
+                  "%"
+                ]
+              }
+            ),
+            /* @__PURE__ */ r(l, { withArrow: !0, label: e("gallery.zoomIn"), children: /* @__PURE__ */ r(
+              o,
+              {
+                c: "var(--app-gallary-text)",
+                color: "gray",
+                size: "lg",
+                variant: "light",
+                onClick: w,
+                children: /* @__PURE__ */ r(k, { size: 20 })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ t(p, { justify: "end", gap: "xs", children: [
+            !g && /* @__PURE__ */ r(l, { withArrow: !0, label: e("gallery.download"), children: /* @__PURE__ */ r(
+              o,
+              {
+                c: "var(--app-gallary-text)",
+                size: "lg",
+                color: "gray",
+                variant: "light",
+                loading: s,
+                onClick: d,
+                children: /* @__PURE__ */ r(h, { size: 20 })
+              }
+            ) }),
+            /* @__PURE__ */ r(l, { withArrow: !0, label: e("gallery.close"), children: /* @__PURE__ */ r(
+              o,
+              {
+                c: "var(--app-gallary-text)",
+                size: "lg",
+                color: "gray",
+                variant: "light",
+                onClick: f,
+                children: /* @__PURE__ */ r(F, { size: 20 })
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  V as ModalHeader
+};

package/dist/components/AttachmentsGalleryModal/components/ShakePlayer/ShakaPlayer.d.ts

@@ -2,6 +2,10 @@ type BaseProps = {
     autoPlay?: boolean;
     isActive?: boolean;
     attachmentId: string;
+    loader?: React.ReactNode;
+    stylesContainer?: React.CSSProperties;
+    classNameContainer?: string;
 };
-export declare const ShakaVideoPlayer: ({ attachmentId, autoPlay, isActive, }: BaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ShakaVideoPlayer: ({ attachmentId, autoPlay, isActive, loader, stylesContainer, classNameContainer, }: BaseProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=ShakaPlayer.d.ts.map

package/dist/components/AttachmentsGalleryModal/components/ShakePlayer/ShakaPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShakaPlayer.d.ts","sourceRoot":"","sources":["../../../../../src/components/AttachmentsGalleryModal/components/ShakePlayer/ShakaPlayer.tsx"],"names":[],"mappings":"AAWA,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,oFAO9B,SAAS,8GAgCX,CAAC"}

package/dist/components/AttachmentsGalleryModal/components/ShakePlayer/ShakaPlayer.js

@@ -0,0 +1,44 @@
+import { jsx as r } from "react/jsx-runtime";
+import a from "clsx";
+import n from "shaka-player-react";
+import { BaseLoader as y } from "../../../Loaders/BaseLoader.js";
+import { ErrorSection as d } from "../ErrorSection.js";
+import { useShakePlayer as h } from "./useShakePlayer.js";
+import t from "./ShakaPlayer.module.css.js";
+const N = ({
+  attachmentId: m,
+  autoPlay: e,
+  isActive: s,
+  loader: i,
+  stylesContainer: l,
+  classNameContainer: p
+}) => {
+  const { isError: f, containerRef: c, vodUrl: o } = h({
+    autoPlay: e,
+    isActive: s,
+    attachmentId: m
+  });
+  return f ? /* @__PURE__ */ r(d, {}) : o ? /* @__PURE__ */ r(
+    "div",
+    {
+      ref: c,
+      style: l,
+      className: a(
+        t["vod-player"],
+        "shaka-vod-player-wrapper",
+        p
+      ),
+      children: /* @__PURE__ */ r(
+        n,
+        {
+          autoPlay: e ?? !0,
+          className: a(t["vod-player__player"]),
+          src: o
+        }
+      )
+    }
+  ) : i ?? /* @__PURE__ */ r(y, {});
+};
+export {
+  N as ShakaVideoPlayer
+};

package/dist/components/AttachmentsGalleryModal/components/ShakePlayer/ShakaPlayer.module.css.js

@@ -0,0 +1,7 @@
+const e = {
+  "vod-player": "_vod-player_be6om_1",
+  "vod-player__player": "_vod-player__player_be6om_13"
+};
+export {
+  e as default
+};

package/dist/components/AttachmentsGalleryModal/components/ShakePlayer/useShakePlayer.d.ts

@@ -3,7 +3,8 @@ export declare const useShakePlayer: ({ attachmentId, isActive, autoPlay, }: {
     isActive?: boolean;
     autoPlay?: boolean;
 }) => {
-    containerRef: import('react').RefObject<HTMLDivElement>;
+    containerRef: import("react").RefObject<HTMLDivElement>;
     isError: boolean;
     vodUrl: string | null;
 };
+//# sourceMappingURL=useShakePlayer.d.ts.map

package/dist/components/AttachmentsGalleryModal/components/ShakePlayer/useShakePlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShakePlayer.d.ts","sourceRoot":"","sources":["../../../../../src/components/AttachmentsGalleryModal/components/ShakePlayer/useShakePlayer.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,GAAI,uCAI5B;IACD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;;;;CA+GA,CAAC"}

package/dist/components/AttachmentsGalleryModal/components/ShakePlayer/useShakePlayer.js

@@ -0,0 +1,54 @@
+import { useState as g, useRef as c, useEffect as E } from "react";
+const y = ({
+  attachmentId: o,
+  isActive: i,
+  autoPlay: a
+}) => {
+  const [l, f] = g(null), [h, d] = g(!1), s = c(null), u = c(!0), t = c(null), r = c(null), b = async () => {
+    if (!o)
+      return;
+    r.current && r.current.abort();
+    const e = new AbortController();
+    r.current = e;
+    try {
+      const n = await fetch(`/v1/attachments/${o}/vod`, {
+        method: "GET",
+        credentials: "include",
+        headers: {
+          Accept: "*/*"
+        },
+        signal: e.signal
+      });
+      if (!n.ok) throw new Error("Failed to get VOD URL");
+      const w = await n.json();
+      if (!u.current || e.signal.aborted) return;
+      if (w.ready) {
+        const m = new URL(w.url, window.location.origin).toString();
+        f(m);
+      } else
+        t.current = setTimeout(() => {
+          b();
+        }, 3e3);
+    } catch (n) {
+      if (n instanceof Error && n.name === "AbortError" || !u.current || e.signal.aborted) return;
+      d(!0);
+    }
+  };
+  return E(() => {
+    if (u.current = !0, f(null), d(!1), t.current && (clearTimeout(t.current), t.current = null), r.current && (r.current.abort(), r.current = null), !!o)
+      return b(), () => {
+        u.current = !1, t.current && (clearTimeout(t.current), t.current = null), r.current && (r.current.abort(), r.current = null);
+      };
+  }, [o]), E(() => {
+    if (!l || !s.current) return;
+    const e = s.current.querySelector(
+      "video"
+    );
+    e && (i ? a !== !1 && e.play().catch((n) => {
+      console.error("Ошибка при воспроизведении видео:", n);
+    }) : e.pause());
+  }, [i, l, a]), { containerRef: s, isError: h, vodUrl: l };
+};
+export {
+  y as useShakePlayer
+};

package/dist/components/AttachmentsGalleryModal/constants.d.ts

@@ -4,7 +4,7 @@ export declare const ZOOM_CONFIG: {
     readonly minScale: 1;
     readonly maxScale: 5;
     readonly wheelStep: 0.1;
-    readonly doubleClickStep: 0.7;
+    readonly buttonStepPercent: 50;
 };
 export declare const MODAL_TRANSITION: {
     readonly duration: 200;
@@ -17,3 +17,5 @@ export declare const TRANSFORM_COMPONENT_STYLES: {
     alignItems: string;
     justifyContent: string;
 };
+export declare const STEPS: number[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/AttachmentsGalleryModal/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentsGalleryModal/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,UAIvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC;AAEX,eAAO,MAAM,0BAA0B;;;;;;CAMtC,CAAC;AAEF,eAAO,MAAM,KAAK,UAAsC,CAAC"}

package/dist/components/AttachmentsGalleryModal/constants.js

@@ -0,0 +1,21 @@
+const t = {
+  initialScale: 1,
+  minScale: 1,
+  maxScale: 5,
+  wheelStep: 0.1
+}, e = {
+  duration: 200,
+  exitDuration: 200
+}, n = {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}, i = [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5];
+export {
+  e as MODAL_TRANSITION,
+  i as STEPS,
+  n as TRANSFORM_COMPONENT_STYLES,
+  t as ZOOM_CONFIG
+};

package/dist/components/AttachmentsGalleryModal/helpers.d.ts

@@ -0,0 +1,23 @@
+import { MutableRefObject } from 'react';
+import { ReactZoomPanPinchContentRef } from 'react-zoom-pan-pinch';
+export declare const animateTransform: ({ instance, from, to, duration, animationRef, }: {
+    instance: ReactZoomPanPinchContentRef["instance"];
+    from: {
+        scale: number;
+        x: number;
+        y: number;
+    };
+    to: {
+        scale: number;
+        x: number;
+        y: number;
+    };
+    duration: number;
+    animationRef: MutableRefObject<number | null>;
+}) => void;
+export declare const zoomStep: ({ dir, activeRef, animationRef, }: {
+    dir: "in" | "out";
+    activeRef: ReactZoomPanPinchContentRef;
+    animationRef: MutableRefObject<number | null>;
+}) => void;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/components/AttachmentsGalleryModal/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentsGalleryModal/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAInE,eAAO,MAAM,gBAAgB,GAAI,iDAM9B;IACD,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,CAAC;IAClD,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C,SAuBA,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,mCAItB;IACD,GAAG,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB,SAAS,EAAE,2BAA2B,CAAC;IACvC,YAAY,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C,SA2BA,CAAC"}

package/dist/components/AttachmentsGalleryModal/helpers.js

@@ -0,0 +1,40 @@
+import { STEPS as h } from "./constants.js";
+const y = ({
+  instance: r,
+  from: t,
+  to: e,
+  duration: s = 200,
+  animationRef: n
+}) => {
+  n.current && cancelAnimationFrame(n.current);
+  const c = performance.now(), a = (p) => {
+    const i = Math.min((p - c) / s, 1), o = 1 - Math.pow(1 - i, 3), x = t.scale + (e.scale - t.scale) * o, l = t.x + (e.x - t.x) * o, m = t.y + (e.y - t.y) * o;
+    r.setTransformState(x, l, m), i < 1 && (n.current = requestAnimationFrame(a));
+  };
+  n.current = requestAnimationFrame(a);
+}, I = ({
+  dir: r,
+  activeRef: t,
+  animationRef: e
+}) => {
+  const s = t?.instance;
+  if (!s) return;
+  const { scale: n, positionX: c, positionY: a } = s.transformState, p = s.wrapperComponent?.getBoundingClientRect(), i = (p?.width ?? 0) / 2, o = (p?.height ?? 0) / 2, x = S(n), l = r === "in" ? x + 1 : x - 1, m = Math.min(Math.max(l, 0), h.length - 1), u = h[m], d = u / n, f = i - (i - c) * d, w = o - (o - a) * d;
+  y({
+    instance: s,
+    from: { scale: n, x: c, y: a },
+    to: { scale: u, x: f, y: w },
+    duration: 200,
+    animationRef: e
+  });
+}, S = (r) => {
+  let t = 0, e = 1 / 0;
+  return h.forEach((s, n) => {
+    const c = Math.abs(s - r);
+    c < e && (e = c, t = n);
+  }), t;
+};
+export {
+  y as animateTransform,
+  I as zoomStep
+};

package/dist/components/AttachmentsGalleryModal/hooks/useDownloadFile.d.ts

@@ -6,3 +6,4 @@ export declare const useDownloadFile: (targetAttach?: IFileResponse) => {
     onDownload: (e: SyntheticEvent) => Promise<void>;
     isFetching: boolean;
 };
+//# sourceMappingURL=useDownloadFile.d.ts.map

package/dist/components/AttachmentsGalleryModal/hooks/useDownloadFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDownloadFile.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/hooks/useDownloadFile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAkC,MAAM,OAAO,CAAC;AAMvE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,eAAO,MAAM,eAAe,GAAI,eAAe,aAAa;;;oBAI9C,cAAc;;CA8C3B,CAAC"}

package/dist/components/AttachmentsGalleryModal/hooks/useDownloadFile.js

@@ -0,0 +1,35 @@
+import { useState as w, useCallback as u, useMemo as p } from "react";
+import { downloadImageFromExternalUrl as m, downloadURL as c } from "../../../helpers/download.js";
+import { isVideoFile as b } from "../../../helpers/fileUtils.js";
+import { useMenu as F } from "../../../hooks/useMenu.js";
+const L = (o) => {
+  const [l, e] = w(!1), n = u(
+    async (a) => {
+      if (a.stopPropagation(), !!o)
+        if (e(!0), o?.Url)
+          await m(o?.Url, "file"), e(!1);
+        else {
+          const i = await fetch(`/v1/attachments/${o.id}`, {
+            method: "GET"
+          });
+          if (!i.ok)
+            throw e(!1), new Error(`Error loading: ${i.statusText}`);
+          const d = await i.blob();
+          e(!1);
+          const s = window.URL.createObjectURL(d);
+          s && o && (o.id ? c(s, o.originalFileName || "file") : m(s, "file"));
+        }
+    },
+    [o]
+  ), { isMobile: r } = F(), f = b(
+    o?.contentType,
+    o?.originalFileName
+  );
+  return p(
+    () => ({ isVideo: f, isMobile: r, onDownload: n, isFetching: l }),
+    [r, f, n, l]
+  );
+};
+export {
+  L as useDownloadFile
+};

package/dist/components/AttachmentsGalleryModal/hooks/useEmblaCarousel.d.ts

@@ -6,3 +6,4 @@ export declare const useEmblaCarousel: () => {
     selectedIndex: number;
     visibleSlides: number[];
 };
+//# sourceMappingURL=useEmblaCarousel.d.ts.map

package/dist/components/AttachmentsGalleryModal/hooks/useEmblaCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEmblaCarousel.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/hooks/useEmblaCarousel.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB;;;;;;;CA2E5B,CAAC"}

package/dist/components/AttachmentsGalleryModal/hooks/useEmblaCarousel.js

@@ -0,0 +1,49 @@
+import { useState as v, useEffect as o } from "react";
+import { useAttachmentsGalleryContext as P } from "../AttachmentsGalleryContext.js";
+const V = () => {
+  const {
+    embla: e,
+    canScrollPrev: c,
+    setCanScrollPrev: i,
+    canScrollNext: a,
+    setCanScrollNext: d,
+    selectedIndex: S,
+    setSelectedIndex: f,
+    zoomPercentage: s,
+    setZoomPercentage: u,
+    prevIndexRef: x
+  } = P(), [I, m] = v([]), t = () => {
+    e && (i(e.canScrollPrev()), d(e.canScrollNext()));
+  };
+  return o(() => {
+    if (!e) return;
+    t();
+    const l = () => {
+      const r = e.slidesInView();
+      m(r);
+    }, n = () => {
+      t();
+      const r = e.selectedScrollSnap();
+      x.current = r, f(r), u(100), l();
+    };
+    return l(), e.on("select", n), e.on("slidesInView", l), e.on("reInit", t), () => {
+      e.off("select", n), e.off("slidesInView", l), e.off("reInit", t);
+    };
+  }, [e]), o(() => {
+    e && e.reInit({ watchDrag: s === 100 });
+  }, [e, s]), {
+    scrollPrev: () => {
+      e?.scrollPrev();
+    },
+    scrollNext: () => {
+      e?.scrollNext();
+    },
+    canScrollPrev: c,
+    canScrollNext: a,
+    selectedIndex: S,
+    visibleSlides: I
+  };
+};
+export {
+  V as useEmblaCarousel
+};

package/dist/components/AttachmentsGalleryModal/hooks/useGetPreviewUrl.d.ts

@@ -3,6 +3,7 @@ export declare const useGetPreviewUrl: (attachment: IFileResponse) => {
     fileUrl: string | null;
     isFetching: boolean;
     isError: boolean;
-    setIsError: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    setIsError: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     isVideo: boolean;
 };
+//# sourceMappingURL=useGetPreviewUrl.d.ts.map

package/dist/components/AttachmentsGalleryModal/hooks/useGetPreviewUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetPreviewUrl.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/hooks/useGetPreviewUrl.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,eAAO,MAAM,gBAAgB,GAAI,YAAY,aAAa;;;;;;CAwCzD,CAAC"}

package/dist/components/AttachmentsGalleryModal/hooks/useGetPreviewUrl.js

@@ -0,0 +1,28 @@
+import { useState as t, useEffect as w, useMemo as U } from "react";
+import { isVideoFile as E } from "../../../helpers/fileUtils.js";
+const p = (e) => {
+  const [l, c] = t(null), [n, s] = t(!1), [f, o] = t(!1);
+  async function u(d) {
+    s(!0);
+    const i = await fetch(`/v1/attachments/${d}`, {
+      method: "GET"
+    });
+    if (!i.ok)
+      throw s(!1), o(!0), new Error(`Error loading: ${i.statusText}`);
+    const a = await i.blob();
+    c(window.URL.createObjectURL(a)), s(!1), o(!1);
+  }
+  const r = E(
+    e.contentType,
+    e.originalFileName
+  );
+  return w(() => {
+    e.id && !r && !e.Url && u(e.id);
+  }, [e.Url, e.id, r]), U(
+    () => ({ fileUrl: l, isFetching: n, isError: f, setIsError: o, isVideo: r }),
+    [l, f, n, r]
+  );
+};
+export {
+  p as useGetPreviewUrl
+};

package/dist/components/AttachmentsGalleryModal/hooks/usePanning.d.ts

@@ -0,0 +1,11 @@
+export declare const usePanning: ({ isVideo, isFetching, }: {
+    isFetching: boolean;
+    isVideo: boolean;
+}) => {
+    onMouseDown: (e: React.MouseEvent) => void;
+    onMouseMove: (e: React.MouseEvent) => void;
+    onMouseUp: () => void;
+    onMouseLeave: () => void;
+    onDoubleClick: () => void;
+};
+//# sourceMappingURL=usePanning.d.ts.map

package/dist/components/AttachmentsGalleryModal/hooks/usePanning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanning.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/hooks/usePanning.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,GAAI,0BAGxB;IACD,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CAClB;qBAYO,KAAK,CAAC,UAAU;qBAchB,KAAK,CAAC,UAAU;;;;CAuDvB,CAAC"}

package/dist/components/AttachmentsGalleryModal/hooks/usePanning.js

@@ -0,0 +1,61 @@
+import { useRef as i, useCallback as l, useMemo as g } from "react";
+import { useAttachmentsGalleryContext as v } from "../AttachmentsGalleryContext.js";
+import { zoomStep as w } from "../helpers.js";
+const b = ({
+  isVideo: p,
+  isFetching: x
+}) => {
+  const { transformRefs: t, selectedIndex: e } = v(), S = i(null), c = i(null), n = i(null), a = i(!1), d = l(
+    (r) => {
+      if (x || p) return;
+      const s = t.current[e]?.instance;
+      if (!s) return;
+      c.current = { x: r.clientX, y: r.clientY };
+      const { scale: o, positionX: u, positionY: y } = s.transformState;
+      n.current = { scale: o, x: u, y }, a.current = !1;
+    },
+    [x, p, e, t]
+  ), M = l(
+    (r) => {
+      if (!c.current || !n.current) return;
+      const s = t.current[e]?.instance;
+      if (!s) return;
+      const o = r.clientX - c.current.x, u = r.clientY - c.current.y;
+      if (Math.sqrt(o * o + u * u) > 5) {
+        a.current = !0;
+        const { scale: m } = n.current, X = n.current.x + o / m, Y = n.current.y + u / m;
+        s.setTransformState(m, X, Y);
+      }
+    },
+    [e, t]
+  ), f = l(() => {
+    if (!a.current && n.current) {
+      const r = t.current[e]?.instance;
+      r && r.setTransformState(
+        n.current.scale,
+        n.current.x,
+        n.current.y
+      );
+    }
+    c.current = null, n.current = null, a.current = !1;
+  }, [e, t]), R = l(() => {
+    w({
+      dir: "in",
+      activeRef: t.current[e],
+      animationRef: S
+    });
+  }, [e, t]);
+  return g(
+    () => ({
+      onMouseDown: d,
+      onMouseMove: M,
+      onMouseUp: f,
+      onMouseLeave: f,
+      onDoubleClick: R
+    }),
+    [R, d, M, f]
+  );
+};
+export {
+  b as usePanning
+};

package/dist/components/AttachmentsGalleryModal/hooks/useZoomReset.d.ts

@@ -1 +1,2 @@
 export declare const useZoomReset: () => void;
+//# sourceMappingURL=useZoomReset.d.ts.map

package/dist/components/AttachmentsGalleryModal/hooks/useZoomReset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomReset.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/hooks/useZoomReset.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,YAkBxB,CAAC"}

package/dist/components/AttachmentsGalleryModal/hooks/useZoomReset.js

@@ -0,0 +1,16 @@
+import { useRef as o, useEffect as c } from "react";
+import { useAttachmentsGalleryContext as u } from "../AttachmentsGalleryContext.js";
+const i = () => {
+  const { selectedIndex: e, transformRefs: r } = u(), n = o(e);
+  c(() => {
+    const t = n.current;
+    n.current = e;
+    const s = setTimeout(() => {
+      t !== e && r.current[t] && r.current[t].resetTransform(), r.current[e] && r.current[e].resetTransform();
+    }, 0);
+    return () => clearTimeout(s);
+  }, [e]);
+};
+export {
+  i as useZoomReset
+};

package/dist/components/AttachmentsGalleryModal/styles.module.css.js

@@ -0,0 +1,29 @@
+const o = "_container_ohoof_1", t = "_root_ohoof_7", n = "_carouselRoot_ohoof_14", e = "_carouselViewport_ohoof_18", a = "_carouselSlide_ohoof_22", _ = "_navButton_ohoof_30", r = "_navButtonPrev_ohoof_44", c = "_navButtonNext_ohoof_48", s = "_modalContent_ohoof_52", i = "_modalBody_ohoof_57", l = "_videoContainer_ohoof_63", u = "_imageContainer_ohoof_68", d = {
+  container: o,
+  root: t,
+  carouselRoot: n,
+  carouselViewport: e,
+  carouselSlide: a,
+  navButton: _,
+  navButtonPrev: r,
+  navButtonNext: c,
+  modalContent: s,
+  modalBody: i,
+  videoContainer: l,
+  imageContainer: u
+};
+export {
+  n as carouselRoot,
+  a as carouselSlide,
+  e as carouselViewport,
+  o as container,
+  d as default,
+  u as imageContainer,
+  i as modalBody,
+  s as modalContent,
+  _ as navButton,
+  c as navButtonNext,
+  r as navButtonPrev,
+  t as root,
+  l as videoContainer
+};

package/dist/components/AttachmentsGalleryModal/types.d.ts

@@ -5,3 +5,4 @@ export type IAttachment = {
     contentType: string;
     Url?: string;
 };
+//# sourceMappingURL=types.d.ts.map