@layers-app/shared 0.4.8 → 0.4.9

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

@@ -14,6 +14,8 @@ interface AttachmentsGalleryContextValue {
     setZoomPercentage: (value: number) => void;
     transformRefs: React.MutableRefObject<ReactZoomPanPinchContentRef[]>;
     prevIndexRef: React.MutableRefObject<number>;
+    videoRefreshKey: number;
+    refreshVideo: () => void;
 }
 export declare const useAttachmentsGalleryContext: () => AttachmentsGalleryContextValue;
 interface AttachmentsGalleryProviderProps {

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsGalleryContext.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentsGalleryModal/AttachmentsGalleryContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,UAAU,8BAA8B;IACtC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,2BAA2B,EAAE,CAAC,CAAC;IACrE,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAC9C;AAKD,eAAO,MAAM,4BAA4B,sCAQxC,CAAC;AAEF,UAAU,+BAA+B;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,0BAA0B,GAAI,6BAGxC,+BAA+B,4CA6BjC,CAAC"}
+{"version":3,"file":"AttachmentsGalleryContext.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentsGalleryModal/AttachmentsGalleryContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,UAAU,8BAA8B;IACtC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,2BAA2B,EAAE,CAAC,CAAC;IACrE,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC7C,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAKD,eAAO,MAAM,4BAA4B,sCAQxC,CAAC;AAEF,UAAU,+BAA+B;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,0BAA0B,GAAI,6BAGxC,+BAA+B,4CAoCjC,CAAC"}

package/dist/components/AttachmentsGalleryModal/AttachmentsGalleryContext.js

@@ -1,39 +1,44 @@
-import { jsx as C } from "react/jsx-runtime";
-import { useState as e, useRef as n, createContext as P, useContext as S } from "react";
-const o = P(null), G = () => {
-  const t = S(o);
+import { jsx as A } from "react/jsx-runtime";
+import { useState as e, useRef as o, useCallback as G, createContext as R, useContext as b } from "react";
+const s = R(null), I = () => {
+  const t = b(s);
   if (!t)
     throw new Error(
       "useAttachmentsGalleryContext must be used within AttachmentsGalleryProvider"
     );
   return t;
-}, p = ({
+}, g = ({
   children: t,
-  initialIndex: r
+  initialIndex: n
 }) => {
-  const [s, l] = e(null), [c, a] = e(!1), [m, x] = e(!1), [u, d] = e(r ?? 0), [f, i] = e(100), h = n([]), v = n(0);
-  return /* @__PURE__ */ C(
-    o.Provider,
+  const [r, c] = e(null), [l, a] = e(!1), [m, u] = e(!1), [x, d] = e(n ?? 0), [f, i] = e(100), h = o([]), v = o(0), [C, y] = e(0), P = G(
+    () => y((S) => S + 1),
+    []
+  );
+  return /* @__PURE__ */ A(
+    s.Provider,
     {
       value: {
-        embla: s,
-        setEmbla: l,
-        canScrollPrev: c,
+        embla: r,
+        setEmbla: c,
+        canScrollPrev: l,
         setCanScrollPrev: a,
         canScrollNext: m,
-        setCanScrollNext: x,
-        selectedIndex: u,
+        setCanScrollNext: u,
+        selectedIndex: x,
         setSelectedIndex: d,
         zoomPercentage: f,
         setZoomPercentage: i,
         transformRefs: h,
-        prevIndexRef: v
+        prevIndexRef: v,
+        videoRefreshKey: C,
+        refreshVideo: P
       },
       children: t
     }
   );
 };
 export {
-  p as AttachmentsGalleryProvider,
-  G as useAttachmentsGalleryContext
+  g as AttachmentsGalleryProvider,
+  I as useAttachmentsGalleryContext
 };

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

@@ -0,0 +1,15 @@
+type Props = {
+    attachmentId: string;
+    isActive?: boolean;
+    autoPlay?: boolean;
+};
+/**
+ * Chooses how to play a video attachment based on its status:
+ * - pipeline videos (status 200) → {@link StatusVideoPlayer}: playback URLs +
+ *   subtitles/chapters/storyboard come from `/status`, no `/vod` polling.
+ * - legacy attachments (status 404) → {@link LegacyAttachmentVideoPlayer}: the
+ *   existing `/vod` resolution flow.
+ */
+export declare const AttachmentVideoPlayer: ({ attachmentId, isActive, autoPlay, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AttachmentVideoPlayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentVideoPlayer.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/components/AttachmentVideoPlayer.tsx"],"names":[],"mappings":"AAQA,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,uCAInC,KAAK,4CAiCP,CAAC"}

package/dist/components/AttachmentsGalleryModal/components/AttachmentVideoPlayer.js

@@ -0,0 +1,36 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useAttachmentsGalleryContext as a } from "../AttachmentsGalleryContext.js";
+import { BaseLoader as l } from "../../Loaders/BaseLoader.js";
+import { LegacyAttachmentVideoPlayer as f } from "./LegacyAttachmentVideoPlayer.js";
+import { StatusVideoPlayer as n } from "./StatusVideoPlayer.js";
+import { useAttachmentVideoStatus as d } from "./useAttachmentVideoStatus.js";
+import p from "../styles.module.css.js";
+const P = ({
+  attachmentId: r,
+  isActive: t,
+  autoPlay: o
+}) => {
+  const { videoRefreshKey: i } = a(), { status: m, loaded: s } = d(
+    r,
+    i
+  );
+  return s ? m ? /* @__PURE__ */ e(
+    n,
+    {
+      attachmentId: r,
+      status: m,
+      isActive: t,
+      autoPlay: o
+    }
+  ) : /* @__PURE__ */ e(
+    f,
+    {
+      attachmentId: r,
+      isActive: t,
+      autoPlay: o
+    }
+  ) : /* @__PURE__ */ e("div", { className: p.videoPlayerFill, children: /* @__PURE__ */ e(l, {}) });
+};
+export {
+  P as AttachmentVideoPlayer
+};

package/dist/components/AttachmentsGalleryModal/components/GallerySlide.js

@@ -3,30 +3,30 @@ import { memo as P } from "react";
 import { TransformWrapper as F, TransformComponent as T } from "react-zoom-pan-pinch";
 import { Box as a } from "@mantine/core";
 import { BaseLoader as U } from "../../Loaders/BaseLoader.js";
-import { ShakaVideoPlayer as E } from "./ShakePlayer/ShakaPlayer.js";
-import { TRANSFORM_COMPONENT_STYLES as p, ZOOM_CONFIG as s } from "../constants.js";
+import { AttachmentVideoPlayer as E } from "./AttachmentVideoPlayer.js";
+import { TRANSFORM_COMPONENT_STYLES as d, ZOOM_CONFIG as s } from "../constants.js";
 import { useGetPreviewUrl as O } from "../hooks/useGetPreviewUrl.js";
 import { usePanning as b } from "../hooks/usePanning.js";
 import { ErrorSection as t } from "./ErrorSection.js";
 import { UnsupportedSection as x } from "./UnsupportedSection.js";
 import i from "../styles.module.css.js";
-const h = P(
-  ({ onTransformed: S, attachment: e, isActive: n, ref: N }) => {
+const Z = P(
+  ({ onTransformed: N, attachment: e, isActive: p, ref: S }) => {
     const {
-      isError: m,
+      isError: n,
       setIsError: g,
       fileUrl: o,
       isFetching: l,
-      isVideo: f,
-      isPdf: c,
+      isVideo: c,
+      isPdf: f,
       isAudio: u,
-      isSupported: d
-    } = O(e), y = b({ isFetching: l, isVideo: f });
-    return f && !l && d ? /* @__PURE__ */ r("div", { style: p, children: /* @__PURE__ */ r(a, { className: i.videoContainer, children: /* @__PURE__ */ r(
+      isSupported: m
+    } = O(e), y = b({ isFetching: l, isVideo: c });
+    return c && !l && m ? /* @__PURE__ */ r("div", { style: d, children: /* @__PURE__ */ r(a, { className: i.videoContainer, children: /* @__PURE__ */ r(
       E,
       {
-        isActive: n,
-        autoPlay: n,
+        isActive: p,
+        autoPlay: !1,
         attachmentId: e.id
       }
     ) }) }) : /* @__PURE__ */ r(
@@ -35,15 +35,15 @@ const h = P(
         panning: {
           disabled: !0
         },
-        onTransformed: S,
+        onTransformed: N,
         initialScale: s.initialScale,
         minScale: s.minScale,
         maxScale: s.maxScale,
         limitToBounds: !0,
-        disabled: l || c || u || !d,
+        disabled: l || f || u || !m,
         disablePadding: !0,
         centerZoomedOut: !0,
-        ref: N,
+        ref: S,
         wheel: {
           disabled: !1,
           step: s.wheelStep
@@ -54,28 +54,28 @@ const h = P(
         children: /* @__PURE__ */ r(
           T,
           {
-            wrapperStyle: p,
-            contentStyle: p,
+            wrapperStyle: d,
+            contentStyle: d,
             wrapperProps: y,
-            children: d ? l ? /* @__PURE__ */ r(U, {}) : c ? m || !(e?.Url || o) ? /* @__PURE__ */ r(t, {}) : /* @__PURE__ */ r(a, { className: i.pdfContainer, children: /* @__PURE__ */ r(
+            children: m ? l ? /* @__PURE__ */ r(U, {}) : f ? n || !(e?.Url || o) ? /* @__PURE__ */ r(t, {}) : /* @__PURE__ */ r(a, { className: i.pdfContainer, children: /* @__PURE__ */ r(
               "iframe",
               {
                 title: e.originalFileName || "pdf",
                 src: e?.Url ?? o ?? "",
                 className: i.pdfFrame
               }
-            ) }) : u ? m || !(e?.Url || o) ? /* @__PURE__ */ r(t, {}) : /* @__PURE__ */ C(a, { className: i.audioContainer, children: [
+            ) }) : u ? n || !(e?.Url || o) ? /* @__PURE__ */ r(t, {}) : /* @__PURE__ */ C(a, { className: i.audioContainer, children: [
               /* @__PURE__ */ r(a, { className: i.audioName, children: e.originalFileName || "audio" }),
               /* @__PURE__ */ r(
                 "audio",
                 {
                   src: e?.Url ?? o ?? "",
                   controls: !0,
-                  autoPlay: n,
+                  autoPlay: p,
                   className: i.audioElement
                 }
               )
-            ] }) : m ? /* @__PURE__ */ r(t, {}) : /* @__PURE__ */ r(
+            ] }) : n ? /* @__PURE__ */ r(t, {}) : /* @__PURE__ */ r(
               "img",
               {
                 onError: () => g(!0),
@@ -97,5 +97,5 @@ const h = P(
   }
 );
 export {
-  h as GallerySlide
+  Z as GallerySlide
 };

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

@@ -0,0 +1,14 @@
+type Props = {
+    attachmentId: string;
+    isActive?: boolean;
+    autoPlay?: boolean;
+};
+/**
+ * Player for legacy attachments that never went through the video pipeline (no
+ * VideoAsset, `/status` 404). Stream resolution stays on the existing `/vod`
+ * flow via `useShakePlayer` (HLS when ready, raw fallback). No subtitles/chapters
+ * exist for these, so none are passed.
+ */
+export declare const LegacyAttachmentVideoPlayer: ({ attachmentId, isActive, autoPlay, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LegacyAttachmentVideoPlayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyAttachmentVideoPlayer.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/components/LegacyAttachmentVideoPlayer.tsx"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,GAAI,uCAIzC,KAAK,4CAwBP,CAAC"}

package/dist/components/AttachmentsGalleryModal/components/LegacyAttachmentVideoPlayer.js

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ErrorSection as m } from "./ErrorSection.js";
+import { useShakePlayer as n } from "./ShakePlayer/useShakePlayer.js";
+import c from "../styles.module.css.js";
+import { VideoPlayer as d } from "../../VideoPlayer/VideoPlayer.js";
+const u = ({
+  attachmentId: o,
+  isActive: t,
+  autoPlay: l
+}) => {
+  const { containerRef: s, vodUrl: r, rawUrl: i, isError: a } = n({
+    attachmentId: o,
+    isActive: t,
+    autoPlay: l
+  });
+  return a ? /* @__PURE__ */ e(m, {}) : /* @__PURE__ */ e("div", { ref: s, className: c.videoPlayerFill, children: /* @__PURE__ */ e(
+    d,
+    {
+      videoId: o,
+      source: {
+        streamUrl: r,
+        nativeUrl: i,
+        optimizedReady: !!r,
+        isProcessing: !r && !i
+      }
+    }
+  ) });
+};
+export {
+  u as LegacyAttachmentVideoPlayer
+};

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

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/components/ModalHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAQrD,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,iEACK,gBAAgB,6CA2I5C,CAAC"}
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/components/ModalHeader.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAWrD,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,iEACK,gBAAgB,6CAiN5C,CAAC"}

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

@@ -1,132 +1,191 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { memo as v, useRef as I } from "react";
-import { useTranslation as F } from "react-i18next";
-import { Box as C, Tooltip as t, ActionIcon as i, Flex as s, Text as u } from "@mantine/core";
-import { IconDownload as f, IconMinus as N, IconPlus as R, IconX as k } from "@tabler/icons-react";
-import { getFileIcons as T } from "../../../helpers/getFileIcons.js";
-import { getFileType as Z } from "../../../helpers/getFileType.js";
-import { useAttachmentsGalleryContext as j } from "../AttachmentsGalleryContext.js";
-import { getAttachmentFormat as D, zoomStep as p } from "../helpers.js";
-import { useDownloadFile as M } from "../hooks/useDownloadFile.js";
-import { useZoomReset as O } from "../hooks/useZoomReset.js";
-import n from "../styles.module.css.js";
-const U = v(
-  ({ onClose: w, attachments: z }) => {
-    O();
-    const { t: r } = F("ui"), c = I(null), { zoomPercentage: y, transformRefs: m, selectedIndex: a } = j(), o = z?.[a], b = () => {
-      p({
-        animationRef: c,
+import { jsxs as r, Fragment as P, jsx as e } from "react/jsx-runtime";
+import { memo as V, useRef as O, useState as Z, useMemo as j } from "react";
+import { useTranslation as x } from "react-i18next";
+import { Box as B, Tooltip as a, ActionIcon as n, Flex as m, Text as h, Loader as E } from "@mantine/core";
+import { IconDownload as A, IconMinus as U, IconPlus as G, IconSettings as H, IconX as K } from "@tabler/icons-react";
+import { getEnvConfig as L } from "../../../config/envConfig.js";
+import { getFileIcons as X } from "../../../helpers/getFileIcons.js";
+import { getFileType as q } from "../../../helpers/getFileType.js";
+import { createVideoSettingsDataSource as J } from "../../../videoSettings/createVideoSettingsDataSource.js";
+import { useAttachmentsGalleryContext as Q } from "../AttachmentsGalleryContext.js";
+import { getAttachmentFormat as W, zoomStep as S } from "../helpers.js";
+import { useDownloadFile as Y } from "../hooks/useDownloadFile.js";
+import { useZoomReset as _ } from "../hooks/useZoomReset.js";
+import { useAttachmentVideoStatus as $ } from "./useAttachmentVideoStatus.js";
+import i from "../styles.module.css.js";
+import { VideoSettingsModal as ee } from "../../VideoPlayer/components/VideoSettingsModal/index.js";
+const be = V(
+  ({ onClose: C, attachments: I }) => {
+    _();
+    const { t: l } = x("ui"), { t: u } = x(), p = O(null), {
+      zoomPercentage: D,
+      transformRefs: f,
+      selectedIndex: g,
+      videoRefreshKey: F,
+      refreshVideo: c
+    } = Q(), t = I?.[g], b = t ? W(t) : null, { status: o } = $(
+      b?.isVideo ? t?.id : void 0,
+      F
+    ), s = o?.videoId ?? null, [N, v] = Z(!1), d = j(
+      () => s ? J(s, {
+        baseUrl: L().apiBaseUrl
+      }) : null,
+      [s]
+    ), R = () => {
+      S({
+        animationRef: p,
         dir: "in",
-        activeRef: m.current[a]
+        activeRef: f.current[g]
       });
-    }, x = () => {
-      p({
-        animationRef: c,
+    }, k = () => {
+      S({
+        animationRef: p,
         dir: "out",
-        activeRef: m.current[a]
+        activeRef: f.current[g]
       });
-    }, { isFetching: d, onDownload: g, isMobile: h } = M(o), A = o ? D(o).isImage : !1;
-    return /* @__PURE__ */ l(
-      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: [
-          h ? /* @__PURE__ */ e(t, { withArrow: !0, label: r("gallery.download"), children: /* @__PURE__ */ e(
-            i,
-            {
-              className: n.headerAction,
-              size: "lg",
-              variant: "subtle",
-              loading: d,
-              onClick: g,
-              children: /* @__PURE__ */ e(f, { size: 20 })
-            }
-          ) }) : /* @__PURE__ */ l(s, { align: "center", gap: 8, ml: 6, miw: 0, children: [
-            o ? T(
-              Z(
-                o.contentType ?? "",
-                !1,
-                o.originalFileName
-              ),
-              !1,
-              20
-            ) : null,
-            /* @__PURE__ */ e(u, { fw: 500, fz: 14, c: "var(--app-gallary-text)", truncate: !0, children: o?.originalFileName || "" })
-          ] }),
-          A ? /* @__PURE__ */ l(s, { gap: "xs", children: [
-            /* @__PURE__ */ e(t, { withArrow: !0, label: r("gallery.zoomOut"), children: /* @__PURE__ */ e(
-              i,
-              {
-                className: n.headerAction,
-                size: "lg",
-                variant: "subtle",
-                onClick: x,
-                children: /* @__PURE__ */ e(N, { size: 20 })
-              }
-            ) }),
-            /* @__PURE__ */ l(
-              u,
-              {
-                fw: 500,
-                fz: 14,
-                c: "var(--app-gallary-text)",
-                miw: 50,
-                ta: "center",
-                children: [
-                  y,
-                  "%"
-                ]
-              }
-            ),
-            /* @__PURE__ */ e(t, { withArrow: !0, label: r("gallery.zoomIn"), children: /* @__PURE__ */ e(
-              i,
+    }, { isFetching: w, onDownload: z, isMobile: y } = Y(t), T = b?.isImage ?? !1;
+    return /* @__PURE__ */ r(P, { children: [
+      /* @__PURE__ */ r(
+        B,
+        {
+          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: [
+            y ? /* @__PURE__ */ e(a, { withArrow: !0, label: l("gallery.download"), children: /* @__PURE__ */ e(
+              n,
               {
-                className: n.headerAction,
+                className: i.headerAction,
                 size: "lg",
                 variant: "subtle",
-                onClick: b,
-                children: /* @__PURE__ */ e(R, { size: 20 })
+                loading: w,
+                onClick: z,
+                children: /* @__PURE__ */ e(A, { size: 20 })
               }
-            ) })
-          ] }) : /* @__PURE__ */ e("div", {}),
-          /* @__PURE__ */ l(s, { justify: "end", gap: "xs", children: [
-            !h && /* @__PURE__ */ e(t, { withArrow: !0, label: r("gallery.download"), children: /* @__PURE__ */ e(
-              i,
-              {
-                className: n.headerAction,
-                size: "lg",
-                variant: "subtle",
-                loading: d,
-                onClick: g,
-                children: /* @__PURE__ */ e(f, { size: 20 })
-              }
-            ) }),
-            /* @__PURE__ */ e(t, { withArrow: !0, label: r("gallery.close"), children: /* @__PURE__ */ e(
-              i,
-              {
-                className: n.headerAction,
-                size: "lg",
-                variant: "subtle",
-                onClick: w,
-                children: /* @__PURE__ */ e(k, { size: 20 })
-              }
-            ) })
-          ] })
-        ]
-      }
-    );
+            ) }) : /* @__PURE__ */ r(m, { align: "center", gap: 8, ml: 6, miw: 0, children: [
+              t ? X(
+                q(
+                  t.contentType ?? "",
+                  !1,
+                  t.originalFileName
+                ),
+                !1,
+                20
+              ) : null,
+              /* @__PURE__ */ e(h, { fw: 500, fz: 14, c: "var(--app-gallary-text)", truncate: !0, children: t?.originalFileName || "" })
+            ] }),
+            T ? /* @__PURE__ */ r(m, { gap: "xs", children: [
+              /* @__PURE__ */ e(a, { withArrow: !0, label: l("gallery.zoomOut"), children: /* @__PURE__ */ e(
+                n,
+                {
+                  className: i.headerAction,
+                  size: "lg",
+                  variant: "subtle",
+                  onClick: k,
+                  children: /* @__PURE__ */ e(U, { size: 20 })
+                }
+              ) }),
+              /* @__PURE__ */ r(
+                h,
+                {
+                  fw: 500,
+                  fz: 14,
+                  c: "var(--app-gallary-text)",
+                  miw: 50,
+                  ta: "center",
+                  children: [
+                    D,
+                    "%"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(a, { withArrow: !0, label: l("gallery.zoomIn"), children: /* @__PURE__ */ e(
+                n,
+                {
+                  className: i.headerAction,
+                  size: "lg",
+                  variant: "subtle",
+                  onClick: R,
+                  children: /* @__PURE__ */ e(G, { size: 20 })
+                }
+              ) })
+            ] }) : o?.isProcessing ? /* @__PURE__ */ r(m, { align: "center", gap: 8, miw: 0, children: [
+              /* @__PURE__ */ e(E, { size: "xs", color: "var(--app-gallary-text)" }),
+              /* @__PURE__ */ e(h, { className: i.processingText, fw: 500, fz: 14, children: u("editor.video.upload.processingShort", {
+                percent: Math.round(o.processingPercent ?? 0)
+              }) })
+            ] }) : /* @__PURE__ */ e("div", {}),
+            /* @__PURE__ */ r(m, { justify: "end", gap: "xs", children: [
+              d && !o?.isProcessing && !o?.autogenDisabled && /* @__PURE__ */ e(
+                a,
+                {
+                  withArrow: !0,
+                  label: u("editor.video.player.settings"),
+                  children: /* @__PURE__ */ e(
+                    n,
+                    {
+                      className: i.headerAction,
+                      size: "lg",
+                      variant: "subtle",
+                      onClick: () => v(!0),
+                      children: /* @__PURE__ */ e(H, { size: 20 })
+                    }
+                  )
+                }
+              ),
+              !y && /* @__PURE__ */ e(a, { withArrow: !0, label: l("gallery.download"), children: /* @__PURE__ */ e(
+                n,
+                {
+                  className: i.headerAction,
+                  size: "lg",
+                  variant: "subtle",
+                  loading: w,
+                  onClick: z,
+                  children: /* @__PURE__ */ e(A, { size: 20 })
+                }
+              ) }),
+              /* @__PURE__ */ e(a, { withArrow: !0, label: l("gallery.close"), children: /* @__PURE__ */ e(
+                n,
+                {
+                  className: i.headerAction,
+                  size: "lg",
+                  variant: "subtle",
+                  onClick: C,
+                  children: /* @__PURE__ */ e(K, { size: 20 })
+                }
+              ) })
+            ] })
+          ]
+        }
+      ),
+      d && s && !o?.autogenDisabled && /* @__PURE__ */ e(
+        ee,
+        {
+          opened: N,
+          onClose: () => v(!1),
+          dataSource: d,
+          videoId: s,
+          chaptersDisabled: o?.chaptersDisabled,
+          onChaptersSaved: c,
+          onSubtitlesSaved: c,
+          onPosterChange: c,
+          onChaptersDisabledChange: (M) => {
+            d.setChaptersDisabled(M).then(c).catch(() => {
+            });
+          }
+        }
+      )
+    ] });
   }
 );
 export {
-  U as ModalHeader
+  be as ModalHeader
 };

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

@@ -0,0 +1,18 @@
+import type { AttachmentVideoStatus } from './useAttachmentVideoStatus';
+type Props = {
+    attachmentId: string;
+    status: AttachmentVideoStatus;
+    isActive?: boolean;
+    autoPlay?: boolean;
+};
+/**
+ * Player for videos that went through the video pipeline: playback URLs come
+ * straight from `/v1/videos/{id}/status`, so there is no `/vod` polling. While
+ * the backend is still transcoding, chapters are hidden and HLS is used only
+ * once `optimizedReady`; otherwise the raw URL plays. The processing progress
+ * is shown in the gallery header. Subtitles/chapters/storyboard ride along from
+ * the same status payload.
+ */
+export declare const StatusVideoPlayer: ({ attachmentId, status, isActive, autoPlay, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StatusVideoPlayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusVideoPlayer.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/components/StatusVideoPlayer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAAI,+CAK/B,KAAK,4CAsCP,CAAC"}