@layers-app/shared 0.4.6 → 0.4.7

package/dist/components/VideoPlayer/components/VideoSelect.js

@@ -0,0 +1,168 @@
+import { jsxs as p, Fragment as H, jsx as e } from "react/jsx-runtime";
+import { useState as V, useMemo as W } from "react";
+import { useTranslation as M } from "react-i18next";
+import { ArrowDown01Icon as y, Tick02Icon as F } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as u } from "@hugeicons/react";
+import { useCombobox as G, InputBase as I, Stack as L, Combobox as s, Group as U } from "@mantine/core";
+import { useDisclosure as Y } from "@mantine/hooks";
+import { IS_TOUCH_DEVICE as q } from "../utils/touch.js";
+import { MobileDrawer as J } from "./MobileDrawer/index.js";
+import { SelectListOptionButton as K } from "./SelectListOptionButton.js";
+/* empty css             */
+function ho({
+  size: d = "sm",
+  w: m = 150,
+  comboboxProps: _,
+  rightSection: h,
+  renderOption: f,
+  data: i,
+  value: x,
+  defaultValue: N,
+  onChange: b,
+  inputClassName: O,
+  ...k
+}) {
+  const {
+    onClick: w,
+    type: Q,
+    onCopy: R,
+    onCut: X,
+    onPaste: Z,
+    classNames: t,
+    allowDeselect: $,
+    ...v
+  } = k, C = [typeof t == "object" && t && "input" in t ? t.input : void 0, O].filter(Boolean).join(" ") || void 0, g = C ? {
+    ...typeof t == "object" && t ? t : {},
+    input: C
+  } : t, [, P] = V(""), n = G({
+    onDropdownClose: () => {
+      n.resetSelectedOption(), n.focusTarget(), P("");
+    },
+    onDropdownOpen: () => {
+      n.focusSearchInput();
+    }
+  }), l = W(
+    () => (Array.isArray(i) ? i : []).map(
+      (o) => typeof o == "string" ? { value: o, label: o } : o
+    ),
+    [i]
+  ), a = x ?? N ?? null, D = l.find((o) => o.value === a)?.label ?? "", { t: T } = M(), [j, { open: E, close: S }] = Y(!1);
+  if (q)
+    return /* @__PURE__ */ p(H, { children: [
+      /* @__PURE__ */ e(
+        I,
+        {
+          component: "button",
+          size: d,
+          w: m,
+          classNames: g,
+          pointer: !0,
+          rightSection: h ?? /* @__PURE__ */ e(
+            u,
+            {
+              icon: y,
+              size: 16,
+              className: "editor-select__chevron"
+            }
+          ),
+          rightSectionPointerEvents: "none",
+          onClick: (o) => {
+            w?.(o), E();
+          },
+          ...v,
+          children: D
+        }
+      ),
+      /* @__PURE__ */ e(
+        J,
+        {
+          opened: j,
+          onClose: S,
+          title: T("editor.video.source.drawerTitle", "Source"),
+          children: /* @__PURE__ */ e(L, { gap: 4, p: 0, children: l.map((o) => /* @__PURE__ */ e(
+            K,
+            {
+              label: o.label,
+              checked: o.value === a,
+              onSelect: () => {
+                b?.(o.value, o), S();
+              }
+            },
+            o.value
+          )) })
+        }
+      )
+    ] });
+  const z = (o, r, c) => f ? f({
+    option: { value: o, label: r },
+    checked: c
+  }) : /* @__PURE__ */ p(U, { justify: "space-between", wrap: "nowrap", w: "100%", children: [
+    r,
+    c && /* @__PURE__ */ e(
+      u,
+      {
+        icon: F,
+        size: 16,
+        color: "var(--mantine-primary-color-text)"
+      }
+    )
+  ] }), { width: A, ...B } = _ || {};
+  return /* @__PURE__ */ p(
+    s,
+    {
+      store: n,
+      withinPortal: !0,
+      onOptionSubmit: (o) => {
+        const r = l.find((c) => c.value === o) ?? {
+          value: o,
+          label: o
+        };
+        b?.(o, r), n.closeDropdown();
+      },
+      width: A ?? "target",
+      ...B,
+      children: [
+        /* @__PURE__ */ e(s.Target, { children: /* @__PURE__ */ e(
+          I,
+          {
+            component: "button",
+            size: d,
+            w: m,
+            classNames: g,
+            pointer: !0,
+            rightSection: h ?? /* @__PURE__ */ e(
+              u,
+              {
+                icon: y,
+                size: 16,
+                className: "editor-select__chevron"
+              }
+            ),
+            rightSectionPointerEvents: "none",
+            onClick: (o) => {
+              w?.(o), n.toggleDropdown();
+            },
+            ...v,
+            children: D
+          }
+        ) }),
+        /* @__PURE__ */ e(s.Dropdown, { children: /* @__PURE__ */ e(
+          s.Options,
+          {
+            style: {
+              maxHeight: 396,
+              overflowY: "auto"
+            },
+            children: l.length > 0 ? l.map((o) => {
+              const r = o.value === a;
+              return /* @__PURE__ */ e(s.Option, { value: o.value, children: z(o.value, o.label, r) }, o.value);
+            }) : /* @__PURE__ */ e(s.Empty, { children: "Nothing found" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  ho as default
+};

package/dist/components/VideoPlayer/components/VideoSettingsMenu/index.d.ts

@@ -0,0 +1,12 @@
+import type { PlayerSettingsSnapshot } from '../../utils/videoSettings';
+type VideoSettingsMenuProps = {
+    isOpen?: boolean;
+    disabled?: boolean;
+    settings: PlayerSettingsSnapshot;
+    onSpeedClick: () => void;
+    onQualityClick: () => void;
+    onSubtitlesClick: () => void;
+};
+export declare function VideoSettingsMenu({ disabled, settings, onSpeedClick, onQualityClick, onSubtitlesClick, }: VideoSettingsMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/VideoPlayer/components/VideoSettingsMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/VideoPlayer/components/VideoSettingsMenu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AASxE,KAAK,sBAAsB,GAAG;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,EAAE,sBAAsB,2CA+CxB"}

package/dist/components/VideoPlayer/components/VideoSettingsMenu/index.js

@@ -0,0 +1,48 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useTranslation as f } from "react-i18next";
+import { ChevronRightIcon as n, SubtitleIcon as m, SpeedIcon as p, QualityIcon as S } from "../VideoIcons.js";
+import { VideoMenu as I } from "../VideoMenu.js";
+function g({
+  disabled: o,
+  settings: e,
+  onSpeedClick: r,
+  onQualityClick: s,
+  onSubtitlesClick: d
+}) {
+  const { t: i } = f(), u = e.currentSpeed === 1 ? i("editor.video.settings.normal") : `${e.currentSpeed}x`, a = e.qualities.find((l) => l.id === e.currentQualityId)?.label || i("editor.video.settings.auto"), c = e.subtitles.find((l) => l.id === e.currentSubtitleId)?.label || i("editor.video.settings.off"), b = [
+    {
+      key: "subtitles",
+      testId: "video-settings-menu-subtitles",
+      onClick: d,
+      disabled: o || !e.hasRealSubtitles,
+      leftIcon: /* @__PURE__ */ t(m, { size: 16 }),
+      leftLabel: i("editor.video.settings.subtitlesCc"),
+      centerLabel: c,
+      rightSection: /* @__PURE__ */ t(n, { size: 16 })
+    },
+    {
+      key: "speed",
+      testId: "video-settings-menu-speed",
+      onClick: r,
+      disabled: o || !e.hasRealSpeeds,
+      leftIcon: /* @__PURE__ */ t(p, { size: 16 }),
+      leftLabel: i("editor.video.settings.speed"),
+      centerLabel: u,
+      rightSection: /* @__PURE__ */ t(n, { size: 16 })
+    },
+    {
+      key: "quality",
+      testId: "video-settings-menu-quality",
+      onClick: s,
+      disabled: o || !e.hasRealQualities,
+      leftIcon: /* @__PURE__ */ t(S, { size: 16 }),
+      leftLabel: i("editor.video.settings.quality"),
+      centerLabel: a,
+      rightSection: /* @__PURE__ */ t(n, { size: 16 })
+    }
+  ];
+  return /* @__PURE__ */ t(I, { width: 300, items: b });
+}
+export {
+  g as VideoSettingsMenu
+};

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

@@ -0,0 +1,25 @@
+import type { Chapter } from '../../types';
+import { type ChapterInput } from '../../utils/chapters';
+type ChaptersSectionProps = {
+    videoId?: string | null;
+    initialChapters?: Chapter[];
+    nativeVideo?: HTMLVideoElement | null;
+    shakaPlayer?: any | null;
+    videoDuration?: number | null;
+    title: string;
+    toggleLabel: string;
+    chaptersDisabled: boolean;
+    onChaptersDisabledChange: (value: boolean) => void;
+    onSave?: (saveHandler: () => Promise<ChapterInput[] | null>) => void;
+    timePlaceholder: string;
+    endTimePlaceholder: string;
+    titlePlaceholder: string;
+    addChapterLabel: string;
+    deleteChapterLabel: string;
+    emptyLabel: string;
+    errorLabel: string;
+    invalidRangeLabel: string;
+};
+export declare function ChaptersSection({ videoId, initialChapters, nativeVideo, shakaPlayer, videoDuration: videoDurationProp, title, toggleLabel, chaptersDisabled, onChaptersDisabledChange, onSave, timePlaceholder, endTimePlaceholder, titlePlaceholder, addChapterLabel, deleteChapterLabel, emptyLabel, errorLabel, }: ChaptersSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChaptersSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChaptersSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/VideoPlayer/components/VideoSettingsModal/ChaptersSection.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,sBAAsB,CAAC;AAM9B,KAAK,oBAAoB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,wBAAwB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,OAAO,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IACrE,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AA0PF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,eAAe,EACf,WAAW,EACX,WAAW,EACX,aAAa,EAAE,iBAAiB,EAChC,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,MAAM,EACN,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,UAAU,EACV,UAAU,GACX,EAAE,oBAAoB,2CA4StB"}

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

@@ -0,0 +1,384 @@
+import { jsxs as B, jsx as r, Fragment as St } from "react/jsx-runtime";
+import { useState as g, useRef as it, useCallback as T, useEffect as j } from "react";
+import { Stack as st, Text as R, Flex as at, Switch as xt, Divider as Tt, Group as yt, TextInput as ut, Textarea as Mt, Menu as Q, ActionIcon as Ct } from "@mantine/core";
+import { secondsToTimestamp as D, parseTimestampToSec as dt } from "../../utils/chapters.js";
+import { MoreVerticalIcon as wt } from "../VideoIcons.js";
+import { useVideoSettingsDataSource as Et } from "./context.js";
+function ht() {
+  try {
+    return crypto.randomUUID();
+  } catch {
+    return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  }
+}
+function vt(x) {
+  return x.map((i) => ({
+    id: ht(),
+    startSec: i.startSec ?? 0,
+    title: (i.title ?? "").trim()
+  })).sort((i, m) => i.startSec - m.startSec);
+}
+function Nt({
+  chapter: x,
+  index: i,
+  startSec: m,
+  endSec: p,
+  isLast: y,
+  disabled: N,
+  startTimePlaceholder: X,
+  endTimePlaceholder: U,
+  titlePlaceholder: Y,
+  deleteChapterLabel: $,
+  startMin: G,
+  startMax: b,
+  endMin: Z,
+  endMax: V,
+  onStartSecChange: W,
+  onEndSecChange: P,
+  onTitleChange: _,
+  onRemove: z
+}) {
+  const [S, L] = g(
+    () => D(m)
+  ), [H, k] = g(
+    () => p == null ? "" : D(p)
+  ), [M, C] = g(!1), [q, a] = g(!1), [I, h] = g(!1), [w, A] = g(!1);
+  j(() => {
+    I || L(D(m));
+  }, [m, I]), j(() => {
+    w || k(p == null ? "" : D(p));
+  }, [p, w]);
+  const J = (c) => {
+    L(c);
+    const E = dt(c);
+    if (E !== null) {
+      const f = Math.floor(Number(E) || 0), F = f < G, v = b != null && f > b;
+      if (F || v) {
+        C(!0);
+        return;
+      }
+      C(!1), W(i, f);
+    } else if (c.trim() === "") {
+      const F = 0 < G, v = b != null && 0 > b;
+      if (F || v) {
+        C(!0);
+        return;
+      }
+      C(!1), W(i, 0);
+    } else
+      C(!0);
+  }, tt = (c) => {
+    if (k(c), y) return;
+    const E = dt(c);
+    if (E !== null) {
+      const f = Math.floor(Number(E) || 0), v = f < (Z ?? -1 / 0), et = V != null && f > V;
+      if (v || et) {
+        a(!0);
+        return;
+      }
+      a(!1), P(i, f);
+    } else c.trim() === "" ? a(!1) : a(!0);
+  };
+  return /* @__PURE__ */ B(
+    yt,
+    {
+      gap: 10,
+      align: "flex-start",
+      wrap: "nowrap",
+      className: "video-settings-modal-chapter-row",
+      style: { maxWidth: "100%" },
+      children: [
+        /* @__PURE__ */ B(st, { className: "video-settings-modal-chapter-times", children: [
+          /* @__PURE__ */ r(
+            ut,
+            {
+              size: "sm",
+              radius: 8,
+              variant: "default",
+              placeholder: X,
+              value: S,
+              onChange: (c) => J(c.currentTarget.value),
+              style: { width: "100%" },
+              styles: {
+                input: {
+                  height: 36,
+                  paddingTop: 6,
+                  paddingBottom: 6,
+                  paddingLeft: 12,
+                  paddingRight: 12,
+                  lineHeight: 1.45
+                }
+              },
+              error: M,
+              disabled: N,
+              onFocus: () => h(!0),
+              onBlur: () => h(!1)
+            }
+          ),
+          /* @__PURE__ */ r(
+            ut,
+            {
+              size: "sm",
+              radius: 8,
+              variant: "default",
+              placeholder: U,
+              value: H,
+              onChange: (c) => tt(c.currentTarget.value),
+              style: { width: "100%" },
+              styles: {
+                input: {
+                  height: 36,
+                  paddingTop: 6,
+                  paddingBottom: 6,
+                  paddingLeft: 12,
+                  paddingRight: 12,
+                  lineHeight: 1.45
+                }
+              },
+              error: q,
+              disabled: N || y || p == null,
+              onFocus: () => A(!0),
+              onBlur: () => A(!1)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(at, { className: "video-settings-modal-chapter-title", children: /* @__PURE__ */ r(
+          Mt,
+          {
+            size: "sm",
+            radius: 8,
+            variant: "default",
+            placeholder: Y,
+            value: x.title,
+            onChange: (c) => _(i, c.currentTarget.value),
+            styles: {
+              root: {
+                width: "100%",
+                height: "100%"
+              },
+              wrapper: {
+                height: "100%"
+              },
+              input: {
+                height: "100%",
+                paddingTop: 8,
+                paddingBottom: 8,
+                paddingLeft: 12,
+                paddingRight: 12,
+                lineHeight: 1.45,
+                resize: "none"
+              }
+            },
+            style: { width: "100%", height: "100%" },
+            disabled: N
+          }
+        ) }),
+        /* @__PURE__ */ r(at, { className: "video-settings-modal-chapter-actions", children: /* @__PURE__ */ B(Q, { position: "bottom-end", children: [
+          /* @__PURE__ */ r(Q.Target, { children: /* @__PURE__ */ r(
+            Ct,
+            {
+              size: 36,
+              variant: "subtle",
+              color: "gray",
+              "aria-label": "Chapter actions",
+              disabled: N,
+              radius: 8,
+              "data-test-id": "video-settings-chapters-row-menu",
+              children: /* @__PURE__ */ r(wt, { size: 20 })
+            }
+          ) }),
+          /* @__PURE__ */ r(Q.Dropdown, { children: /* @__PURE__ */ r(
+            Q.Item,
+            {
+              color: "red",
+              onClick: () => z(i),
+              "data-test-id": "video-settings-chapters-delete",
+              children: $
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+}
+function Lt({
+  videoId: x,
+  initialChapters: i,
+  nativeVideo: m,
+  shakaPlayer: p,
+  videoDuration: y,
+  title: N,
+  toggleLabel: X,
+  chaptersDisabled: U,
+  onChaptersDisabledChange: Y,
+  onSave: $,
+  timePlaceholder: G,
+  endTimePlaceholder: b,
+  titlePlaceholder: Z,
+  addChapterLabel: V,
+  deleteChapterLabel: W,
+  emptyLabel: P,
+  errorLabel: _
+}) {
+  const [z, S] = g(
+    []
+  ), [L, H] = g(null), [k, M] = g(null), [C] = g(!1), [, q] = g(!1), [a, I] = g(null), h = it(!1), w = it(!1), A = Et(), J = T((t) => {
+    w.current || h.current || S(vt(t));
+  }, []);
+  j(() => {
+    if (y != null && y > 0) {
+      I(y);
+      return;
+    }
+    try {
+      const t = p?.seekRange?.();
+      if (t && Number.isFinite(t.end) && t.end > 0) {
+        I(t.end);
+        return;
+      }
+    } catch {
+    }
+    if (m) {
+      const t = m.duration;
+      if (Number.isFinite(t) && t > 0) {
+        I(t);
+        return;
+      }
+    }
+  }, [y, p, m]);
+  const tt = T(() => a == null ? null : Math.floor(a), [a]), c = T(async () => {
+    if (!x) return null;
+    M(null), q(!0), w.current = !0, H(null);
+    try {
+      const t = z.filter((e) => e.title.trim()).filter((e) => a == null || e.startSec < a).sort((e, n) => e.startSec - n.startSec).map(({ startSec: e, title: n }) => ({ startSec: e, title: n }));
+      return await A.saveChapters(t), h.current = !1, t;
+    } catch (t) {
+      const e = t instanceof Error ? t.message : _;
+      return /exceeds/i.test(e) || H(e), null;
+    } finally {
+      q(!1), w.current = !1;
+    }
+  }, [x, A, z, _, tt]);
+  j(() => {
+    $?.(c);
+  }, [c, $]);
+  const E = T(() => {
+    h.current = !0, M(null), S((t) => {
+      const e = a != null ? Math.floor(a) : null, n = [...t].sort((d, u) => d.startSec - u.startSec), l = n.length > 0 ? Math.floor(n[n.length - 1].startSec) : -1, s = Math.max(0, l + 1), o = e != null ? Math.min(s, Math.max(0, e - 1)) : s;
+      return [
+        ...n,
+        {
+          id: ht(),
+          startSec: o,
+          title: ""
+        }
+      ];
+    });
+  }, [a]), f = T((t, e) => {
+    h.current = !0, S((n) => {
+      const s = [...[...n].sort((d, u) => d.startSec - u.startSec)], o = s[t];
+      return o ? (s[t] = { ...o, title: e }, s) : n;
+    });
+  }, []), F = T((t, e) => {
+    h.current = !0, M(null), S((n) => {
+      const l = [...n].sort((d, u) => d.startSec - u.startSec), s = l[t];
+      if (!s) return n;
+      const o = [...l];
+      return o[t] = { ...s, startSec: e }, o.sort((d, u) => d.startSec - u.startSec);
+    });
+  }, []), v = T((t, e) => {
+    h.current = !0, M(null), S((n) => {
+      const l = [...n].sort((d, u) => d.startSec - u.startSec);
+      if (t >= l.length - 1) return n;
+      const s = l[t + 1];
+      if (!s) return n;
+      const o = [...l];
+      return o[t + 1] = { ...s, startSec: e }, o.sort((d, u) => d.startSec - u.startSec);
+    });
+  }, []), et = T((t) => {
+    h.current = !0, M(null), S((e) => [...e].sort((l, s) => l.startSec - s.startSec).filter((l, s) => s !== t));
+  }, []);
+  return j(() => {
+    if (!x) {
+      S([]), H(null), h.current = !1;
+      return;
+    }
+    w.current || h.current || Array.isArray(i) && J(i);
+  }, [x, i, J]), /* @__PURE__ */ B(st, { gap: "xs", "data-test-id": "video-settings-chapters-section", children: [
+    /* @__PURE__ */ r(
+      R,
+      {
+        className: "video-settings-modal-section-title",
+        "data-test-id": "video-settings-chapters-title",
+        children: N
+      }
+    ),
+    /* @__PURE__ */ B(
+      at,
+      {
+        align: "center",
+        gap: "md",
+        className: "video-settings-modal-subtitles-auto-toggle",
+        children: [
+          /* @__PURE__ */ r(R, { size: "sm", fw: 500, c: "var(--mantine-color-bright)", flex: 1, children: X }),
+          /* @__PURE__ */ r(
+            xt,
+            {
+              size: "sm",
+              checked: !U,
+              onChange: (t) => Y(!t.currentTarget.checked),
+              "data-test-id": "video-settings-chapters-toggle"
+            }
+          )
+        ]
+      }
+    ),
+    !U && /* @__PURE__ */ B(St, { children: [
+      /* @__PURE__ */ r(Tt, { my: 4 }),
+      L && /* @__PURE__ */ r(R, { size: "sm", c: "red", mb: "xs", children: L }),
+      k && /* @__PURE__ */ r(R, { size: "sm", c: "red", mb: "xs", children: k }),
+      /* @__PURE__ */ r(st, { gap: 12, children: [...z].sort((t, e) => t.startSec - e.startSec).map((t, e, n) => {
+        const l = n[e + 1] || null, s = n[e + 2] || null, o = a != null ? Math.floor(a) : null, d = l != null ? Math.floor(l.startSec) : o ?? null, u = Math.floor(t.startSec), lt = e > 0 ? Math.floor(n[e - 1].startSec) : null, ot = l != null ? Math.floor(l.startSec) : null, gt = lt != null ? lt + 1 : 0, K = ot != null ? ot - 1 : null, nt = o != null ? o - 1 : null, ft = K != null && nt != null ? Math.min(K, nt) : K ?? nt, mt = e < n.length - 1 ? u + 1 : null, ct = s != null ? Math.floor(s.startSec) : null, O = ct != null ? ct - 1 : null, rt = o ?? null, pt = O != null && rt != null ? Math.min(O, rt) : O ?? rt;
+        return /* @__PURE__ */ r(
+          Nt,
+          {
+            chapter: t,
+            index: e,
+            startSec: u,
+            endSec: d,
+            isLast: e === n.length - 1,
+            startMin: gt,
+            startMax: ft,
+            endMin: mt,
+            endMax: pt,
+            disabled: !1,
+            startTimePlaceholder: G,
+            endTimePlaceholder: a != null ? D(Math.floor(a)) : b,
+            titlePlaceholder: Z,
+            deleteChapterLabel: W,
+            onStartSecChange: F,
+            onEndSecChange: v,
+            onTitleChange: f,
+            onRemove: et
+          },
+          t.id
+        );
+      }) }),
+      /* @__PURE__ */ r(
+        R,
+        {
+          component: "button",
+          type: "button",
+          className: "video-settings-modal-link",
+          onClick: E,
+          "data-test-id": "video-settings-chapters-add",
+          children: V
+        }
+      ),
+      z.length === 0 && !C && /* @__PURE__ */ r(R, { size: "xs", c: "dimmed", children: P })
+    ] })
+  ] });
+}
+export {
+  Lt as ChaptersSection
+};

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

@@ -0,0 +1,21 @@
+import { FileWithPath } from '@mantine/dropzone';
+import type { VideoSettingsData } from '../../types';
+type CoverSectionProps = {
+    opened: boolean;
+    videoId?: string | null;
+    initialData?: VideoSettingsData | null;
+    title: string;
+    uploadLabel: string;
+    cropLabel: string;
+    emptyCoverLabel: string;
+    loadErrorLabel?: string;
+    retryLabel?: string;
+    onCoverUpload?: (file: FileWithPath) => void | Promise<VideoSettingsData | undefined>;
+    onCropCover?: () => void;
+    onPosterChange?: (posterUrl: string | null) => void;
+    onSelectedPosterChange?: (url: string | null) => void;
+    selectedPosterUrl?: string | null;
+};
+export declare function CoverSection({ opened, videoId, initialData, title, uploadLabel, loadErrorLabel, retryLabel, onCoverUpload, onPosterChange: _onPosterChange, onSelectedPosterChange, selectedPosterUrl, }: CoverSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CoverSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CoverSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/VideoPlayer/components/VideoSettingsModal/CoverSection.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAY,YAAY,EAAmB,MAAM,mBAAmB,CAAC;AAE5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIrD,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CACd,IAAI,EAAE,YAAY,KACf,IAAI,GAAG,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,WAAW,EACX,KAAK,EACL,WAAW,EACX,cAAc,EACd,UAAU,EACV,aAAa,EACb,cAAc,EAAE,eAAe,EAC/B,sBAAsB,EACtB,iBAAiB,GAClB,EAAE,iBAAiB,2CA6VnB"}