@layers-app/shared 0.4.5 → 0.4.7

package/dist/components/VideoPlayer/components/VideoSettingsModal/CoverSection.js

@@ -0,0 +1,264 @@
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import { useState as l, useRef as $, useMemo as R, useCallback as x, useEffect as b } from "react";
+import { Image02Icon as te, AlertCircleIcon as oe, ArrowLeft01Icon as se, ArrowRight01Icon as ne } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as E } from "@hugeicons/react";
+import { Carousel as P } from "@mantine/carousel";
+import { Stack as ie, Text as j, Group as ce, Button as le, Box as U, Loader as ae } from "@mantine/core";
+import { Dropzone as de, IMAGE_MIME_TYPE as ue } from "@mantine/dropzone";
+import { CheckCircleIcon as me } from "../VideoIcons.js";
+import { useVideoSettingsDataSource as fe } from "./context.js";
+function Le({
+  opened: O,
+  videoId: w,
+  initialData: I,
+  title: q,
+  uploadLabel: B,
+  loadErrorLabel: D,
+  retryLabel: T,
+  onCoverUpload: u,
+  onPosterChange: ve,
+  onSelectedPosterChange: m,
+  selectedPosterUrl: L
+}) {
+  const F = fe(), [n, A] = l(null), [H, c] = l(
+    null
+  ), [, C] = l(!1), [K, k] = l(!1), [V, a] = l(/* @__PURE__ */ new Set()), [Y, f] = l(/* @__PURE__ */ new Set()), [v, y] = l(null), p = $(
+    null
+  ), z = $(!1), d = R(() => {
+    const e = n?.previews ?? [];
+    return v ? [
+      ...e,
+      { id: "uploaded", url: v, order: e.length }
+    ] : e;
+  }, [n?.previews, v]), J = R(
+    () => n?.cover?.previewId ?? d[0]?.id ?? null,
+    [n?.cover?.previewId, d]
+  ), S = H ?? J, M = d.length + 1, Q = M > 3, W = x((e) => {
+    a((t) => {
+      const r = new Set(t);
+      return r.delete(e), r;
+    }), f((t) => {
+      const r = new Set(t);
+      return r.delete(e), r;
+    });
+  }, []), X = x((e) => {
+    a((t) => {
+      const r = new Set(t);
+      return r.delete(e), r;
+    }), f((t) => new Set(t).add(e));
+  }, []), g = x(async () => {
+    if (w) {
+      C(!0), k(!1);
+      try {
+        const e = await F.getSettings();
+        A(e);
+        const t = e?.previews?.[0]?.id ?? null, r = e?.cover?.previewId ?? t;
+        c(r), a(/* @__PURE__ */ new Set()), f(/* @__PURE__ */ new Set());
+      } catch (e) {
+        console.error(
+          "cover status fetch failed",
+          e instanceof Error ? e.message : e
+        ), k(!0);
+      } finally {
+        C(!1);
+      }
+    }
+  }, [w, F]), Z = x(
+    async (e) => {
+      const t = e[0];
+      if (!t || !u) return;
+      const r = URL.createObjectURL(t);
+      y(r), a(/* @__PURE__ */ new Set(["uploaded"])), c("uploaded"), m?.(r);
+      try {
+        const s = await Promise.resolve(u(t));
+        y(null), r && URL.revokeObjectURL(r);
+        const i = s?.previews, ee = Array.isArray(i) && i.length > 0;
+        if (s && ee && i) {
+          z.current = !0, A(s);
+          const N = i[i.length - 1]?.id ?? s?.cover?.previewId ?? i[0]?.id;
+          if (c(N ?? "uploaded"), N) {
+            const _ = i.find(
+              (re) => re.id === N
+            )?.url;
+            _ && m?.(_);
+          }
+          a(/* @__PURE__ */ new Set()), f(/* @__PURE__ */ new Set());
+        } else
+          g();
+      } catch (s) {
+        y(null), r && URL.revokeObjectURL(r), c(null), console.error(
+          "cover upload failed",
+          s instanceof Error ? s.message : s
+        ), g();
+      }
+    },
+    [u, g, m]
+  ), G = R(() => L || (d.find((e) => e.id === S)?.url ?? n?.cover?.url ?? null), [L, d, S, n?.cover?.url]);
+  return b(() => {
+    if (!(!O || !w))
+      if (I) {
+        A(I);
+        const e = I?.previews?.[0]?.id ?? null, t = I?.cover?.previewId ?? e;
+        c(t), a(/* @__PURE__ */ new Set()), f(/* @__PURE__ */ new Set()), C(!1), k(!1);
+      } else
+        g();
+  }, [O, w]), b(() => {
+    if (!v || !p.current) return;
+    const t = requestAnimationFrame(() => {
+      const s = (n?.previews ?? []).length + 1;
+      p.current?.scrollTo(s);
+    });
+    return () => cancelAnimationFrame(t);
+  }, [v, n?.previews]), b(() => {
+    if (!z.current) return;
+    z.current = !1;
+    const e = p.current;
+    if (!e) return;
+    const r = (n?.previews ?? []).length;
+    requestAnimationFrame(() => e.scrollTo(r));
+  }, [n?.previews]), b(
+    () => () => {
+      p.current = null;
+    },
+    []
+  ), /* @__PURE__ */ h(ie, { gap: "xs", "data-test-id": "video-settings-cover-section", children: [
+    /* @__PURE__ */ o(
+      j,
+      {
+        className: "video-settings-modal-section-title",
+        "data-test-id": "video-settings-cover-title",
+        children: q
+      }
+    ),
+    K && /* @__PURE__ */ h(ce, { gap: "xs", mb: "xs", children: [
+      /* @__PURE__ */ o(j, { size: "sm", c: "red", children: D }),
+      T && /* @__PURE__ */ o(le, { variant: "light", size: "xs", onClick: g, children: T })
+    ] }),
+    /* @__PURE__ */ h(
+      P,
+      {
+        className: "video-settings-modal-cover-carousel",
+        classNames: {
+          controls: "video-settings-modal-cover-controls",
+          control: "video-settings-modal-cover-control"
+        },
+        slideSize: "33.333%",
+        slideGap: "10px",
+        emblaOptions: { loop: !1 },
+        withControls: Q,
+        draggable: M > 1,
+        nextControlIcon: /* @__PURE__ */ o(
+          E,
+          {
+            icon: ne,
+            size: 20,
+            color: "currentColor"
+          }
+        ),
+        previousControlIcon: /* @__PURE__ */ o(
+          E,
+          {
+            icon: se,
+            size: 20,
+            color: "currentColor"
+          }
+        ),
+        getEmblaApi: (e) => {
+          p.current = e;
+        },
+        children: [
+          /* @__PURE__ */ o(P.Slide, { children: /* @__PURE__ */ o(U, { className: "video-settings-modal-cover-cell", children: /* @__PURE__ */ o(
+            de,
+            {
+              className: "video-settings-modal-cover-upload",
+              onDrop: Z,
+              accept: ue,
+              maxFiles: 1,
+              disabled: !u,
+              style: u ? void 0 : { opacity: 0.7, pointerEvents: "none" },
+              children: /* @__PURE__ */ h(U, { className: "video-settings-modal-cover-upload-inner", children: [
+                /* @__PURE__ */ o(
+                  E,
+                  {
+                    icon: te,
+                    size: 20,
+                    color: "var(--mantine-color-bright)"
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  j,
+                  {
+                    size: "sm",
+                    fw: 500,
+                    className: "video-settings-modal-cover-upload-label",
+                    children: B
+                  }
+                )
+              ] })
+            }
+          ) }) }),
+          d.map((e) => {
+            const t = G != null ? e.url === G : S != null && e.id === S, r = V.has(e.id), s = Y.has(e.id);
+            return /* @__PURE__ */ o(P.Slide, { children: /* @__PURE__ */ h(
+              U,
+              {
+                className: `video-settings-modal-cover-cell video-settings-modal-cover-thumb ${t && !s ? "selected" : ""} ${r ? "loading" : ""} ${s ? "error" : ""}`,
+                onClick: () => {
+                  s || (c(e.id), m?.(e.url));
+                },
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: (i) => i.key === "Enter" && !s && void (c(e.id), m?.(e.url)),
+                children: [
+                  /* @__PURE__ */ o(
+                    "img",
+                    {
+                      src: e.url,
+                      alt: "",
+                      onLoad: () => W(e.id),
+                      onError: () => X(e.id)
+                    }
+                  ),
+                  r && /* @__PURE__ */ o(
+                    "span",
+                    {
+                      className: "video-settings-modal-cover-spinner",
+                      "aria-hidden": !0,
+                      children: /* @__PURE__ */ o(ae, { size: "sm", color: "gray" })
+                    }
+                  ),
+                  s && /* @__PURE__ */ o(
+                    "span",
+                    {
+                      className: "video-settings-modal-cover-error-icon",
+                      "aria-hidden": !0,
+                      children: /* @__PURE__ */ o(
+                        E,
+                        {
+                          icon: oe,
+                          size: 24,
+                          color: "#fff"
+                        }
+                      )
+                    }
+                  ),
+                  t && !s && /* @__PURE__ */ o(
+                    "span",
+                    {
+                      className: "video-settings-modal-cover-check",
+                      "aria-hidden": !0,
+                      children: /* @__PURE__ */ o(me, { size: 32 })
+                    }
+                  )
+                ]
+              }
+            ) }, e.id);
+          })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Le as CoverSection
+};

package/dist/components/VideoPlayer/components/VideoSettingsModal/FooterActions.d.ts

@@ -0,0 +1,10 @@
+type FooterActionsProps = {
+    cancelLabel: string;
+    saveLabel: string;
+    onCancel: () => void;
+    onSave: () => void;
+    isSaving?: boolean;
+};
+export declare function FooterActions({ cancelLabel, saveLabel, onCancel, onSave, isSaving, }: FooterActionsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FooterActions.d.ts.map

package/dist/components/VideoPlayer/components/VideoSettingsModal/FooterActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterActions.d.ts","sourceRoot":"","sources":["../../../../../src/components/VideoPlayer/components/VideoSettingsModal/FooterActions.tsx"],"names":[],"mappings":"AAEA,KAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,WAAW,EACX,SAAS,EACT,QAAQ,EACR,MAAM,EACN,QAAQ,GACT,EAAE,kBAAkB,2CAyBpB"}

package/dist/components/VideoPlayer/components/VideoSettingsModal/FooterActions.js

@@ -0,0 +1,39 @@
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { Group as a, Button as e } from "@mantine/core";
+function m({
+  cancelLabel: s,
+  saveLabel: o,
+  onCancel: d,
+  onSave: r,
+  isSaving: t
+}) {
+  return /* @__PURE__ */ n(a, { justify: "flex-end", gap: 8, children: [
+    /* @__PURE__ */ i(
+      e,
+      {
+        size: "sm",
+        variant: "subtle",
+        color: "gray",
+        radius: "md",
+        onClick: d,
+        disabled: t,
+        "data-test-id": "video-settings-cancel",
+        children: s
+      }
+    ),
+    /* @__PURE__ */ i(
+      e,
+      {
+        size: "sm",
+        radius: "md",
+        onClick: r,
+        loading: t,
+        "data-test-id": "video-settings-save",
+        children: o
+      }
+    )
+  ] });
+}
+export {
+  m as FooterActions
+};

package/dist/components/VideoPlayer/components/VideoSettingsModal/ManualSubtitlesPanel.d.ts

@@ -0,0 +1,14 @@
+import type { Subtitle } from '../../types';
+import { type SubtitleTrack } from '../../utils/subtitles';
+type ManualSubtitlesPanelProps = {
+    videoId?: string | null;
+    mode: 'shaka' | 'native';
+    shakaPlayer?: any | null;
+    nativeVideo?: HTMLVideoElement | null;
+    statusSubtitles?: Subtitle[];
+    onTracksChange?: (tracks: SubtitleTrack[]) => void;
+    onSave?: (handler: () => Promise<void>) => void;
+};
+export declare function ManualSubtitlesPanel({ videoId, statusSubtitles, onTracksChange, onSave, }: ManualSubtitlesPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ManualSubtitlesPanel.d.ts.map

package/dist/components/VideoPlayer/components/VideoSettingsModal/ManualSubtitlesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManualSubtitlesPanel.d.ts","sourceRoot":"","sources":["../../../../../src/components/VideoPlayer/components/VideoSettingsModal/ManualSubtitlesPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EACL,KAAK,aAAa,EAGnB,MAAM,uBAAuB,CAAC;AAK/B,KAAK,yBAAyB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACjD,CAAC;AA4CF,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,eAAe,EACf,cAAc,EACd,MAAM,GACP,EAAE,yBAAyB,2CAgT3B"}

package/dist/components/VideoPlayer/components/VideoSettingsModal/ManualSubtitlesPanel.js

@@ -0,0 +1,360 @@
+import { jsxs as g, jsx as a, Fragment as Y } from "react/jsx-runtime";
+import { useState as F, useRef as G, useMemo as L, useEffect as D, useCallback as v } from "react";
+import { useTranslation as O } from "react-i18next";
+import { Flex as y, Text as T, Switch as Z, Divider as $, Menu as b, ActionIcon as q, Box as I, Loader as ee, Button as te } from "@mantine/core";
+import { isAutoGeneratedTrack as B, normalizeSubtitleTrack as V } from "../../utils/subtitles.js";
+import { TickIcon as le, MoreVerticalIcon as H } from "../VideoIcons.js";
+import ae from "../VideoSelect.js";
+import { useVideoSettingsDataSource as ie } from "./context.js";
+const E = [
+  { value: "en", label: "English" },
+  { value: "es", label: "Español" },
+  { value: "fr", label: "Français" },
+  { value: "de", label: "Deutsch" },
+  { value: "it", label: "Italiano" },
+  { value: "pt", label: "Português" },
+  { value: "ru", label: "Русский" },
+  { value: "uk", label: "Українська" },
+  { value: "pl", label: "Polski" },
+  { value: "nl", label: "Nederlands" },
+  { value: "sv", label: "Svenska" },
+  { value: "no", label: "Norsk" },
+  { value: "da", label: "Dansk" },
+  { value: "fi", label: "Suomi" },
+  { value: "tr", label: "Türkçe" },
+  { value: "ar", label: "العربية" },
+  { value: "he", label: "עברית" },
+  { value: "hi", label: "हिन्दी" },
+  { value: "ja", label: "日本語" },
+  { value: "ko", label: "한국어" },
+  { value: "zh", label: "中文" },
+  { value: "ro", label: "Română" }
+], _ = "ru", P = E.reduce(
+  (i, r) => (i[r.value] = r.label, i),
+  {}
+);
+function me({
+  videoId: i,
+  statusSubtitles: r,
+  onTracksChange: x,
+  onSave: z
+}) {
+  const { t: m } = O(), s = ie(), h = ae, [u, c] = F([]), [f, n] = F([]), w = G(/* @__PURE__ */ new Map()), [k, j] = F(!1), o = L(
+    () => u.find(B) ?? null,
+    [u]
+  );
+  D(() => {
+    o && j(o.isDisabled);
+  }, [o]);
+  const J = v(
+    (e) => {
+      o && (j(e), c(
+        (t) => t.map(
+          (l) => l.id === o.id ? { ...l, isDisabled: e } : l
+        )
+      ));
+    },
+    [o]
+  ), A = G(null);
+  D(() => {
+    o && A.current === null && (A.current = o.isDisabled);
+  }, [o]);
+  const M = v(
+    async (e = !1) => {
+      if (i) {
+        if (e || r == null)
+          try {
+            const t = await s.listSubtitles();
+            c(t);
+            return;
+          } catch {
+          }
+        try {
+          const t = await s.listSubtitles();
+          c(t);
+        } catch {
+          if (r != null) {
+            const t = (r || []).map(V).filter((l) => l.id);
+            c(t);
+          } else
+            try {
+              const l = ((await s.getSettings())?.subtitles || []).map(V).filter((d) => d.id);
+              c(l);
+            } catch (t) {
+              s.onError?.(t, "subtitles");
+            }
+        }
+      }
+    },
+    [i, s, r]
+  );
+  D(() => {
+    if (!i) {
+      c([]), n([]);
+      return;
+    }
+    M().catch(() => {
+    });
+  }, [i, M]), D(() => {
+    x?.(u);
+  }, [u, x]), D(() => {
+    z?.(async () => {
+      !i || !o || k !== A.current && (await s.setSubtitleDisabled(
+        o.id,
+        k
+      ), A.current = k);
+    });
+  }, [z, i, o, k, s]);
+  const R = L(() => {
+    const e = u.filter((l) => !B(l)), t = /* @__PURE__ */ new Map();
+    for (const l of e)
+      t.set(l.lang, l);
+    return Array.from(t.values());
+  }, [u]), N = L(() => {
+    const e = new Set(R.map((t) => t.lang));
+    return f.forEach((t) => {
+      t.lang && e.add(t.lang);
+    }), e;
+  }, [R, f]), K = v(() => {
+    const e = E.find((l) => !N.has(l.value))?.value ?? (N.has(_) ? null : _), t = e ? P[e] || e : null;
+    n((l) => [
+      ...l,
+      {
+        id: crypto.randomUUID(),
+        lang: e,
+        label: t,
+        status: "draft"
+      }
+    ]);
+  }, [N]), C = v(
+    (e, t) => {
+      n(
+        (l) => l.map(
+          (d) => d.id === e ? { ...d, ...t } : d
+        )
+      );
+    },
+    []
+  ), Q = v(
+    async (e, t) => {
+      if (!i) return;
+      const l = f.find((p) => p.id === e);
+      if (!l?.lang) return;
+      const d = new AbortController();
+      w.current.set(e, d), C(e, { status: "uploading", fileName: t.name });
+      try {
+        const p = await s.uploadSubtitle(t, {
+          lang: l.lang,
+          label: l.label || P[l.lang] || l.lang,
+          kind: "subtitles",
+          default: !1,
+          signal: d.signal
+        });
+        w.current.delete(e), n((S) => S.filter((U) => U.id !== e)), p ? c((S) => S.find((U) => U.id === p.id) ? S : [...S, p]) : await M(!0);
+      } catch (p) {
+        w.current.delete(e), C(e, { status: "error" }), s.onError?.(p, "subtitles");
+      }
+    },
+    [i, s, f, M, C]
+  ), W = v(
+    async (e) => {
+      i && (c((t) => t.filter((l) => l.id !== e)), await s.deleteSubtitle(e));
+    },
+    [i, s]
+  ), X = v((e) => {
+    n((t) => t.filter((l) => l.id !== e));
+  }, []);
+  return /* @__PURE__ */ g("div", { className: "video-settings-modal-subtitles", children: [
+    o && /* @__PURE__ */ g(
+      y,
+      {
+        align: "center",
+        gap: "md",
+        className: "video-settings-modal-subtitles-auto-toggle",
+        children: [
+          /* @__PURE__ */ a(T, { size: "sm", fw: 500, c: "var(--mantine-color-bright)", flex: 1, children: m("editor.video.settingsModal.hideAutoSubtitles") }),
+          /* @__PURE__ */ a(
+            Z,
+            {
+              size: "sm",
+              checked: k,
+              onChange: (e) => J(e.currentTarget.checked)
+            }
+          )
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ a($, { my: 4 }),
+    /* @__PURE__ */ a(
+      T,
+      {
+        size: "sm",
+        mb: 0,
+        className: "video-settings-modal-subtitles-label video-settings-modal-text-label",
+        children: m("editor.video.settingsModal.uploadSubtitlesManually")
+      }
+    ),
+    R.map((e) => /* @__PURE__ */ g(
+      y,
+      {
+        align: "center",
+        gap: "xs",
+        wrap: "nowrap",
+        className: "video-settings-modal-subtitles-row",
+        children: [
+          /* @__PURE__ */ a(
+            h,
+            {
+              size: "sm",
+              data: E,
+              value: e.lang,
+              disabled: !0,
+              flex: 1,
+              miw: 140,
+              w: "auto",
+              comboboxProps: { width: "target" },
+              classNames: { input: "video-settings-modal-language-select" }
+            }
+          ),
+          /* @__PURE__ */ g(y, { align: "center", gap: 6, flex: 1, children: [
+            /* @__PURE__ */ a(le, { size: 20, color: "var(--mantine-color-green-6)" }),
+            /* @__PURE__ */ a(T, { size: "sm", "data-test-id": "video-settings-subtitle-success", children: m("editor.video.settingsModal.successfullyLoaded") })
+          ] }),
+          /* @__PURE__ */ g(b, { position: "bottom-end", children: [
+            /* @__PURE__ */ a(b.Target, { children: /* @__PURE__ */ a(
+              q,
+              {
+                size: 36,
+                variant: "subtle",
+                color: "gray",
+                "aria-label": "Subtitle actions",
+                "data-test-id": "video-settings-subtitle-row-menu",
+                children: /* @__PURE__ */ a(H, { size: 20 })
+              }
+            ) }),
+            /* @__PURE__ */ a(b.Dropdown, { children: /* @__PURE__ */ a(
+              b.Item,
+              {
+                color: "red",
+                onClick: () => W(e.id),
+                "data-test-id": "video-settings-subtitle-delete",
+                children: m("editor.video.settingsModal.deleteSubtitle")
+              }
+            ) })
+          ] })
+        ]
+      },
+      e.id
+    )),
+    f.map((e) => /* @__PURE__ */ a(
+      ne,
+      {
+        draft: e,
+        usedLanguages: N,
+        onChange: (t) => C(e.id, t),
+        onUpload: (t) => Q(e.id, t),
+        onRemove: () => X(e.id),
+        SelectComponent: h
+      },
+      e.id
+    )),
+    /* @__PURE__ */ a(
+      T,
+      {
+        component: "button",
+        type: "button",
+        className: "video-settings-modal-link",
+        onClick: K,
+        "data-test-id": "video-settings-subtitle-add",
+        children: m("editor.video.settingsModal.addSubtitleTrack")
+      }
+    )
+  ] });
+}
+function ne({
+  draft: i,
+  usedLanguages: r,
+  onChange: x,
+  onUpload: z,
+  onRemove: m,
+  SelectComponent: s
+}) {
+  const { t: h } = O(), u = G(null), c = L(
+    () => E.filter(
+      (n) => n.value === i.lang || !r.has(n.value)
+    ),
+    [r, i.lang]
+  ), f = (n) => {
+    const w = n.target.files?.[0];
+    n.target.value = "", w && z(w);
+  };
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ g(
+    y,
+    {
+      align: "center",
+      wrap: "nowrap",
+      className: "video-settings-modal-subtitles-row",
+      children: [
+        /* @__PURE__ */ a(
+          s,
+          {
+            size: "sm",
+            placeholder: h("editor.video.settingsModal.selectLanguage"),
+            data: c,
+            value: i.lang,
+            onChange: (n) => x({
+              lang: n,
+              label: n ? P[n] : null
+            }),
+            flex: 1,
+            miw: 140,
+            w: "auto",
+            comboboxProps: { width: "target" },
+            inputClassName: "video-settings-modal-language-select"
+          }
+        ),
+        /* @__PURE__ */ a(y, { align: "center", gap: 6, flex: 1, children: i.status === "uploading" ? /* @__PURE__ */ a(ee, { size: 22 }) : /* @__PURE__ */ g(Y, { children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ref: u,
+              type: "file",
+              accept: ".srt,.vtt",
+              hidden: !0,
+              onChange: f
+            }
+          ),
+          /* @__PURE__ */ a(
+            te,
+            {
+              variant: "light",
+              size: "sm",
+              className: "video-settings-modal-upload-button",
+              disabled: !i.lang,
+              onClick: () => u.current?.click(),
+              "data-test-id": "video-settings-subtitle-upload-file",
+              children: h("editor.video.settingsModal.uploadFile")
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ g(b, { position: "bottom-end", children: [
+          /* @__PURE__ */ a(b.Target, { children: /* @__PURE__ */ a(
+            q,
+            {
+              size: 36,
+              variant: "subtle",
+              color: "gray",
+              "aria-label": "Subtitle actions",
+              children: /* @__PURE__ */ a(H, { size: 20 })
+            }
+          ) }),
+          /* @__PURE__ */ a(b.Dropdown, { children: /* @__PURE__ */ a(b.Item, { color: "red", onClick: m, children: h("editor.video.settingsModal.deleteSubtitle") }) })
+        ] }),
+        i.status === "error" && /* @__PURE__ */ a(T, { size: "sm", c: "red", children: h("editor.video.settingsModal.uploadError") })
+      ]
+    }
+  ) });
+}
+export {
+  me as ManualSubtitlesPanel
+};