@layers-app/shared 0.4.5 → 0.4.7

package/dist/components/VideoPlayer/components/VideoIcons.js

@@ -0,0 +1,145 @@
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { MultiplicationSignIcon as C, SubtitleIcon as l, DashboardSpeed02Icon as a, SlidersHorizontalIcon as s, ArrowLeftIcon as h, VolumeHighIcon as u, VolumeOffIcon as I, Settings01Icon as d, ArrowRight01Icon as f, PictureInPictureOnIcon as w, Tick02Icon as g, MoreVerticalIcon as p } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as m } from "@hugeicons/react";
+function n(o) {
+  return function({
+    size: c = 20,
+    color: i = "currentColor"
+  }) {
+    return /* @__PURE__ */ t(m, { icon: o, size: c, color: i });
+  };
+}
+function x({
+  size: o = 20,
+  color: e = "currentColor"
+}) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: o,
+      height: o * 44 / 42,
+      viewBox: "0 0 42 44",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M7.80209 0.289726C10.2068 -0.391222 12.6819 0.195277 15.3958 1.34962C18.1136 2.50569 21.4619 4.41001 25.724 6.83139C30.1341 9.33682 33.595 11.3004 36.0547 13.097C38.5092 14.8899 40.3262 16.7646 40.9766 19.235C41.4534 21.0471 41.4534 22.9542 40.9766 24.7663C40.3262 27.2368 38.5092 29.1114 36.0547 30.9043C33.595 32.7009 30.1341 34.6644 25.724 37.1699C21.4619 39.5912 18.1136 41.4956 15.3958 42.6517C12.6819 43.8061 10.2069 44.3926 7.80209 43.7116C6.03479 43.2107 4.4259 42.2585 3.13021 40.9512C1.3719 39.1771 0.664657 36.7249 0.330731 33.7741C-0.00366531 30.8183 1.69004e-06 26.9408 1.69004e-06 22.0007C1.68951e-06 17.0605 -0.00366606 13.183 0.330731 10.2272C0.664657 7.27644 1.37188 4.82417 3.13021 3.05014C4.42578 1.74306 6.03454 0.790589 7.80209 0.289726Z",
+          fill: e
+        }
+      )
+    }
+  );
+}
+function L({
+  size: o = 20,
+  color: e = "currentColor"
+}) {
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: o,
+      height: o,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M8.9585 14.1666C8.9585 14.7382 8.9599 15.2299 8.90723 15.6217C8.85213 16.0313 8.72764 16.4238 8.40918 16.7423C8.09069 17.0607 7.69819 17.1852 7.28858 17.2403C6.89686 17.293 6.40509 17.2916 5.8335 17.2916C5.26191 17.2916 4.77014 17.293 4.37842 17.2403C3.96881 17.1852 3.5763 17.0607 3.25782 16.7423C2.93936 16.4238 2.81487 16.0313 2.75977 15.6217C2.7071 15.2299 2.7085 14.7382 2.7085 14.1666V5.83326C2.7085 5.26167 2.7071 4.7699 2.75977 4.37818C2.81486 3.96855 2.93933 3.57606 3.25782 3.25757C3.5763 2.93908 3.9688 2.81462 4.37842 2.75953C4.77014 2.70686 5.26191 2.70826 5.8335 2.70826C6.40509 2.70826 6.89686 2.70686 7.28858 2.75953C7.6982 2.81462 8.09069 2.93908 8.40918 3.25757C8.72767 3.57606 8.85213 3.96855 8.90723 4.37818C8.9599 4.7699 8.9585 5.26167 8.9585 5.83326V14.1666Z",
+            fill: e
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M17.2915 14.1666C17.2915 14.7382 17.2929 15.2299 17.2402 15.6217C17.1851 16.0313 17.0606 16.4238 16.7422 16.7423C16.4237 17.0607 16.0312 17.1852 15.6216 17.2403C15.2299 17.293 14.7381 17.2916 14.1665 17.2916C13.5949 17.2916 13.1031 17.293 12.7114 17.2403C12.3018 17.1852 11.9093 17.0607 11.5908 16.7423C11.2724 16.4238 11.1479 16.0313 11.0928 15.6217C11.0401 15.2299 11.0415 14.7382 11.0415 14.1666V5.83326C11.0415 5.26167 11.0401 4.76989 11.0928 4.37818C11.1479 3.96856 11.2724 3.57606 11.5908 3.25757C11.9093 2.93911 12.3018 2.81462 12.7114 2.75953C13.1032 2.70686 13.5949 2.70826 14.1665 2.70826C14.7381 2.70826 15.2299 2.70686 15.6216 2.75953C16.0312 2.81462 16.4237 2.93911 16.7422 3.25757C17.0607 3.57606 17.1851 3.96856 17.2402 4.37818C17.2929 4.76989 17.2915 5.26167 17.2915 5.83326V14.1666Z",
+            fill: e
+          }
+        )
+      ]
+    }
+  );
+}
+const S = n(u), b = n(I), k = n(d), P = n(f);
+function Z({
+  size: o = 20,
+  color: e = "currentColor"
+}) {
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: o,
+      height: o,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: e,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ t("path", { d: "M3 9V5a2 2 0 0 1 2-2h4" }),
+        /* @__PURE__ */ t("path", { d: "M21 9V5a2 2 0 0 0-2-2h-4" }),
+        /* @__PURE__ */ t("path", { d: "M3 15v4a2 2 0 0 0 2 2h4" }),
+        /* @__PURE__ */ t("path", { d: "M21 15v4a2 2 0 0 1-2 2h-4" })
+      ]
+    }
+  );
+}
+const y = n(w), A = n(h), B = n(g), j = n(l), H = n(a), $ = n(s), O = n(p), R = n(C);
+function T({ size: o = 32 }) {
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: o,
+      height: o,
+      viewBox: "0 0 32 32",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M16 1.66699C23.916 1.66699 30.333 8.08391 30.333 16C30.333 23.916 23.916 30.333 16 30.333C8.08391 30.333 1.66699 23.916 1.66699 16C1.66699 8.08392 8.08392 1.66699 16 1.66699Z",
+            fill: "var(--mantine-primary-color-filled, #4c6ef5)"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M20.5961 11.3243C20.9693 10.9172 21.6018 10.8899 22.0089 11.2631C22.4159 11.6363 22.4432 12.2687 22.0701 12.6758L14.7367 20.6758C14.5525 20.8767 14.2944 20.994 14.0219 21C13.7492 21.006 13.4856 20.8999 13.2927 20.7071L9.9594 17.3737C9.56887 16.9832 9.56887 16.3502 9.9594 15.9597C10.3499 15.5691 10.9829 15.5691 11.3735 15.9597L13.9672 18.5534L20.5961 11.3243Z",
+            fill: "white"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  A as ArrowLeftIcon,
+  T as CheckCircleIcon,
+  P as ChevronRightIcon,
+  R as CloseMenuIcon,
+  Z as FullscreenIcon,
+  O as MoreVerticalIcon,
+  L as PauseIcon,
+  y as PictureInPictureIcon,
+  x as PlayIcon,
+  $ as QualityIcon,
+  k as SettingsPlayerIcon,
+  H as SpeedIcon,
+  j as SubtitleIcon,
+  B as TickIcon,
+  S as VolumeIcon,
+  b as VolumeMuteIcon
+};

package/dist/components/VideoPlayer/components/VideoMenu.d.ts

@@ -0,0 +1,27 @@
+type VideoMenuHeader = {
+    label: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    leftSection?: React.ReactNode;
+    rightSection?: React.ReactNode;
+    testId?: string;
+};
+type VideoMenuItem = {
+    key: string;
+    onClick: () => void;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    leftLabel: React.ReactNode;
+    centerLabel?: React.ReactNode;
+    rightSection?: React.ReactNode;
+    testId?: string;
+};
+type VideoMenuProps = {
+    header?: VideoMenuHeader;
+    items: VideoMenuItem[];
+    width?: number;
+    maxHeight?: number;
+};
+export declare function VideoMenu({ header, items, width, maxHeight, }: VideoMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VideoMenu.d.ts.map

package/dist/components/VideoPlayer/components/VideoMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/components/VideoMenu.tsx"],"names":[],"mappings":"AAEA,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,KAAK,EACL,KAAW,EACX,SAAS,GACV,EAAE,cAAc,2CAwEhB"}

package/dist/components/VideoPlayer/components/VideoMenu.js

@@ -0,0 +1,77 @@
+import { jsxs as o, Fragment as r, jsx as n } from "react/jsx-runtime";
+import { Menu as l, Text as c } from "@mantine/core";
+function v({
+  header: i,
+  items: a,
+  width: t = 300,
+  maxHeight: s
+}) {
+  return /* @__PURE__ */ o(
+    l.Dropdown,
+    {
+      w: t,
+      mah: s,
+      style: s ? { overflowY: "auto" } : void 0,
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      children: [
+        i && /* @__PURE__ */ o(r, { children: [
+          /* @__PURE__ */ n(
+            l.Item,
+            {
+              onClick: (e) => {
+                e.stopPropagation(), i.onClick();
+              },
+              disabled: i.disabled,
+              leftSection: i.leftSection,
+              closeMenuOnClick: !1,
+              className: "video-menu-item",
+              "data-test-id": i.testId,
+              children: /* @__PURE__ */ o("div", { className: "video-menu-row", children: [
+                /* @__PURE__ */ n(c, { className: "video-menu-header", children: i.label }),
+                i.rightSection && /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: "video-menu-icon",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    },
+                    children: i.rightSection
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ n(l.Divider, {})
+        ] }),
+        a.map((e) => /* @__PURE__ */ n(
+          l.Item,
+          {
+            onClick: (d) => {
+              d.stopPropagation(), e.onClick();
+            },
+            disabled: e.disabled,
+            closeMenuOnClick: !1,
+            className: "video-menu-item",
+            "data-test-id": e.testId,
+            children: /* @__PURE__ */ o("div", { className: "video-menu-row", children: [
+              /* @__PURE__ */ o("div", { className: "video-menu-left", children: [
+                e.leftIcon && /* @__PURE__ */ n("span", { className: "video-menu-icon", children: e.leftIcon }),
+                /* @__PURE__ */ n(c, { className: "video-menu-item-text", children: e.leftLabel })
+              ] }),
+              /* @__PURE__ */ o("div", { className: "video-menu-right", children: [
+                /* @__PURE__ */ n(c, { className: "video-menu-item-text video-menu-value", children: e.centerLabel ?? "" }),
+                e.rightSection ? /* @__PURE__ */ n("span", { className: "video-menu-chevron", children: e.rightSection }) : null
+              ] })
+            ] })
+          },
+          e.key
+        ))
+      ]
+    }
+  );
+}
+export {
+  v as VideoMenu
+};

package/dist/components/VideoPlayer/components/VideoMobileSettingsDrawer.d.ts

@@ -0,0 +1,17 @@
+import type { PlayerSettingsSnapshot } from '../utils/videoSettings';
+import './VideoMobileSettingsDrawer.scss';
+type VideoMobileSettingsDrawerProps = {
+    opened: boolean;
+    onClose: () => void;
+    settings: PlayerSettingsSnapshot;
+    isSettingsDisabled?: boolean;
+    onSubtitlesOpen?: () => void;
+    onSpeedClick: (speed: number) => void;
+    onQualityClick: (qualityId: number | null) => void;
+    onSubtitleSelect: (subtitleId: number | null) => void;
+    optimisticSpeed: number | null;
+    setOptimisticSpeed: (speed: number | null) => void;
+};
+export declare function VideoMobileSettingsDrawer({ opened, onClose, settings, isSettingsDisabled, onSubtitlesOpen, onSpeedClick, onQualityClick, onSubtitleSelect, optimisticSpeed, setOptimisticSpeed, }: VideoMobileSettingsDrawerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VideoMobileSettingsDrawer.d.ts.map

package/dist/components/VideoPlayer/components/VideoMobileSettingsDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoMobileSettingsDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/components/VideoMobileSettingsDrawer.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAWrE,OAAO,kCAAkC,CAAC;AA6B1C,KAAK,8BAA8B,GAAG;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,EACxC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,kBAAkB,GACnB,EAAE,8BAA8B,2CAmUhC"}

package/dist/components/VideoPlayer/components/VideoMobileSettingsDrawer.js

@@ -0,0 +1,289 @@
+import { jsx as e, jsxs as t, Fragment as m } from "react/jsx-runtime";
+import { useState as Q } from "react";
+import { useTranslation as M } from "react-i18next";
+import { Drawer as $, Text as b } from "@mantine/core";
+import { isAutoGeneratedTrack as x } from "../utils/subtitles.js";
+import { CloseMenuIcon as _, SubtitleIcon as T, ChevronRightIcon as h, SpeedIcon as j, QualityIcon as E, ArrowLeftIcon as p, TickIcon as u } from "./VideoIcons.js";
+/* empty css                               */
+const G = {
+  en: "English",
+  es: "Español",
+  fr: "Français",
+  de: "Deutsch",
+  it: "Italiano",
+  pt: "Português",
+  ru: "Русский",
+  uk: "Українська",
+  pl: "Polski",
+  nl: "Nederlands",
+  sv: "Svenska",
+  no: "Norsk",
+  da: "Dansk",
+  fi: "Suomi",
+  tr: "Türkçe",
+  ar: "العربية",
+  he: "עברית",
+  hi: "हिन्दी",
+  ja: "日本語",
+  ko: "한국어",
+  zh: "中文",
+  ro: "Română"
+};
+function K({
+  opened: g,
+  onClose: f,
+  settings: s,
+  isSettingsDisabled: a,
+  onSubtitlesOpen: k,
+  onSpeedClick: y,
+  onQualityClick: w,
+  onSubtitleSelect: C,
+  optimisticSpeed: v,
+  setOptimisticSpeed: z
+}) {
+  const { t: l } = M(), [c, r] = Q("main"), o = () => {
+    f(), r("main");
+  }, I = (v ?? s.currentSpeed) === 1 ? l("editor.video.settings.normal") : `${v ?? s.currentSpeed}x`, S = s.qualities.find((i) => i.id === s.currentQualityId)?.label || l("editor.video.settings.auto"), R = s.subtitles.find((i) => i.id === s.currentSubtitleId)?.label || l("editor.video.settings.off"), A = (i) => i === 1 ? l("editor.video.settings.normal") : i.toString(), L = v ?? s.currentSpeed, q = l("editor.video.settingsModal.autoGenerated");
+  return /* @__PURE__ */ e(
+    $,
+    {
+      opened: g,
+      onClose: o,
+      position: "bottom",
+      size: "auto",
+      withCloseButton: !1,
+      padding: 0,
+      lockScroll: !1,
+      withOverlay: !1,
+      classNames: { content: "video-mobile-settings-drawer" },
+      withinPortal: !0,
+      children: /* @__PURE__ */ t("div", { className: "video-mobile-settings-drawer__inner", children: [
+        c === "main" && /* @__PURE__ */ t(m, { children: [
+          /* @__PURE__ */ t("div", { className: "video-mobile-settings-drawer__header", children: [
+            /* @__PURE__ */ e(b, { className: "video-mobile-settings-drawer__title", fw: 600, children: l("editor.video.player.settings") }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__close",
+                onClick: o,
+                children: /* @__PURE__ */ e(_, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "video-mobile-settings-drawer__divider" }),
+          /* @__PURE__ */ t("div", { className: "video-mobile-settings-drawer__list", children: [
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__item",
+                disabled: a || !s.hasRealSubtitles,
+                onClick: () => {
+                  !a && s.hasRealSubtitles && (k?.(), r("subtitles"));
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-icon", children: /* @__PURE__ */ e(T, { size: 16 }) }),
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-label", children: l("editor.video.settings.subtitlesCc") }),
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-value", children: R }),
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-chevron", children: /* @__PURE__ */ e(h, { size: 16 }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__item",
+                disabled: a || !s.hasRealSpeeds,
+                onClick: () => {
+                  s.hasRealSpeeds && r("speed");
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-icon", children: /* @__PURE__ */ e(j, { size: 16 }) }),
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-label", children: l("editor.video.settings.speed") }),
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-value", children: I }),
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-chevron", children: /* @__PURE__ */ e(h, { size: 16 }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__item",
+                disabled: a || !s.hasRealQualities,
+                onClick: () => {
+                  s.hasRealQualities && r("quality");
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-icon", children: /* @__PURE__ */ e(E, { size: 16 }) }),
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-label", children: l("editor.video.settings.quality") }),
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-value", children: S }),
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__item-chevron", children: /* @__PURE__ */ e(h, { size: 16 }) })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        c === "subtitles" && /* @__PURE__ */ t(m, { children: [
+          /* @__PURE__ */ t("div", { className: "video-mobile-settings-drawer__header video-mobile-settings-drawer__header--sub", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__back",
+                onClick: () => r("main"),
+                children: /* @__PURE__ */ e(p, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ e(b, { className: "video-mobile-settings-drawer__title", fw: 600, children: l("editor.video.settings.subtitlesCc") }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__close",
+                onClick: o,
+                children: /* @__PURE__ */ e(_, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "video-mobile-settings-drawer__divider" }),
+          /* @__PURE__ */ e("div", { className: "video-mobile-settings-drawer__scroll-list", children: s.subtitles.map((i) => {
+            const n = i.id === s.currentSubtitleId;
+            let d = i.label;
+            if (x({ label: d })) {
+              const N = i.lang ? G[i.lang.toLowerCase()] : null;
+              N && (d = N), d = `${d} (${q})`;
+            }
+            return /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__option",
+                disabled: a,
+                onClick: () => {
+                  C(i.id), o();
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__option-label", children: d }),
+                  n && /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__option-check", children: /* @__PURE__ */ e(u, { size: 16 }) })
+                ]
+              },
+              `subtitle-${i.id ?? "off"}`
+            );
+          }) })
+        ] }),
+        c === "speed" && /* @__PURE__ */ t(m, { children: [
+          /* @__PURE__ */ t("div", { className: "video-mobile-settings-drawer__header video-mobile-settings-drawer__header--sub", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__back",
+                onClick: () => r("main"),
+                children: /* @__PURE__ */ e(p, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ e(b, { className: "video-mobile-settings-drawer__title", fw: 600, children: l("editor.video.settings.speed") }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__close",
+                onClick: o,
+                children: /* @__PURE__ */ e(_, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "video-mobile-settings-drawer__divider" }),
+          /* @__PURE__ */ e("div", { className: "video-mobile-settings-drawer__scroll-list", children: s.speeds.map((i) => {
+            const n = i === L;
+            return /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__option",
+                disabled: a,
+                onClick: () => {
+                  z(i), y(i), o();
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__option-label", children: A(i) }),
+                  n && /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__option-check", children: /* @__PURE__ */ e(u, { size: 16 }) })
+                ]
+              },
+              `speed-${i}`
+            );
+          }) })
+        ] }),
+        c === "quality" && /* @__PURE__ */ t(m, { children: [
+          /* @__PURE__ */ t("div", { className: "video-mobile-settings-drawer__header video-mobile-settings-drawer__header--sub", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__back",
+                onClick: () => r("main"),
+                children: /* @__PURE__ */ e(p, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ e(b, { className: "video-mobile-settings-drawer__title", fw: 600, children: l("editor.video.settings.quality") }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__close",
+                onClick: o,
+                children: /* @__PURE__ */ e(_, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "video-mobile-settings-drawer__divider" }),
+          /* @__PURE__ */ t("div", { className: "video-mobile-settings-drawer__scroll-list", children: [
+            s.qualities.map((i) => {
+              const n = i.id === s.currentQualityId, d = i.label?.includes("1080");
+              return /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  className: "video-mobile-settings-drawer__option",
+                  disabled: a,
+                  onClick: () => {
+                    w(i.id), o();
+                  },
+                  children: [
+                    /* @__PURE__ */ t("span", { className: "video-mobile-settings-drawer__option-label", children: [
+                      i.label,
+                      d && /* @__PURE__ */ e("sup", { className: "video-mobile-settings-drawer__hd-badge", children: "HD" })
+                    ] }),
+                    n && /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__option-check", children: /* @__PURE__ */ e(u, { size: 16 }) })
+                  ]
+                },
+                `quality-${i.id}`
+              );
+            }),
+            s.hasRealQualities && /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "video-mobile-settings-drawer__option",
+                disabled: a,
+                onClick: () => {
+                  w(null), o();
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__option-label", children: l("editor.video.settings.auto") }),
+                  s.currentQualityId == null && /* @__PURE__ */ e("span", { className: "video-mobile-settings-drawer__option-check", children: /* @__PURE__ */ e(u, { size: 16 }) })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  K as VideoMobileSettingsDrawer
+};

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

@@ -0,0 +1,10 @@
+import type { PlayerSettingsSnapshot } from '../../utils/videoSettings';
+type VideoQualityMenuProps = {
+    disabled?: boolean;
+    settings: PlayerSettingsSnapshot;
+    onBack: () => void;
+    onSelect: (qualityId: number | null) => void;
+};
+export declare function VideoQualityMenu({ disabled, settings, onBack, onSelect, }: VideoQualityMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/VideoPlayer/components/VideoQualityMenu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAIxE,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,GACT,EAAE,qBAAqB,2CAiDvB"}

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

@@ -0,0 +1,55 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { useTranslation as y } from "react-i18next";
+import { TickIcon as a, ArrowLeftIcon as f } from "../VideoIcons.js";
+import { VideoMenu as h } from "../VideoMenu.js";
+function k({
+  disabled: l,
+  settings: e,
+  onBack: u,
+  onSelect: o
+}) {
+  const { t: n } = y(), r = [
+    ...e.qualities.map((i) => {
+      const s = i.id === e.currentQualityId, d = i.label?.includes("1080");
+      return {
+        key: `quality-${i.id}`,
+        testId: `video-settings-quality-${i.id}`,
+        onClick: () => o(i.id),
+        disabled: l,
+        leftLabel: d ? /* @__PURE__ */ c("span", { children: [
+          i.label,
+          " ",
+          /* @__PURE__ */ t("sup", { className: "video-menu-hd-badge", children: "HD" })
+        ] }) : i.label,
+        rightSection: s ? /* @__PURE__ */ t(a, { size: 16 }) : null
+      };
+    }),
+    ...e.hasRealQualities ? [
+      {
+        key: "quality-auto",
+        testId: "video-settings-quality-auto",
+        onClick: () => o(null),
+        disabled: l,
+        leftLabel: n("editor.video.settings.auto"),
+        rightSection: e.currentQualityId == null ? /* @__PURE__ */ t(a, { size: 16 }) : null
+      }
+    ] : []
+  ];
+  return /* @__PURE__ */ t(
+    h,
+    {
+      width: 264,
+      header: {
+        label: n("editor.video.settings.quality"),
+        onClick: u,
+        disabled: l,
+        leftSection: /* @__PURE__ */ t(f, { size: 16 }),
+        testId: "video-settings-quality-header"
+      },
+      items: r
+    }
+  );
+}
+export {
+  k as VideoQualityMenu
+};

package/dist/components/VideoPlayer/components/VideoSelect.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import { type ComboboxItem, SelectProps } from '@mantine/core';
+import '../styles.scss';
+export type VideoSelectProps = Omit<SelectProps, 'data'> & {
+    data?: (string | ComboboxItem)[];
+    inputClassName?: string;
+    'data-test-id'?: string;
+};
+export default function VideoSelect({ size, w, comboboxProps, rightSection, renderOption, data, value, defaultValue, onChange, inputClassName, ...inputProps }: VideoSelectProps): JSX.Element;
+//# sourceMappingURL=VideoSelect.d.ts.map

package/dist/components/VideoPlayer/components/VideoSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/components/VideoSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAwB,GAAG,EAAqB,MAAM,OAAO,CAAC;AAM1E,OAAO,EAEL,KAAK,YAAY,EAGjB,WAAW,EAGZ,MAAM,eAAe,CAAC;AAOvB,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,YAAY,CAAC,EAAE,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAW,EACX,CAAO,EACP,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,GAAG,UAAU,EACd,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyMhC"}