@instructure/studio-player 0.1.1 → 0.1.2

package/dist/studio-player.es.js

@@ -1,6 +1,844 @@
-import { E as a, P as A, S as E } from "./index-BM9a_WKH.js";
+import { jsx as e, jsxs as l, Fragment as E } from "react/jsx-runtime";
+import { useCallback as h, createContext as U, useContext as u, useEffect as Q, useState as T, useMemo as W, useRef as ce } from "react";
+import { Spinner as F, useMediaState as r, isTrackCaptionKind as ie, useMediaRemote as D, Track as re, Captions as ue, usePlaybackRateOptions as de, useCaptionOptions as me, useVideoQualityOptions as he, useMediaStore as G, FullscreenButton as X, useMediaPlayer as _e, PlayButton as ge, Poster as pe, Time as z, TimeSlider as w, MuteButton as fe, VolumeSlider as V, MediaPlayer as be, MediaProvider as ke } from "@vidstack/react";
+import { useFloating as Ce, autoUpdate as ve, flip as we, arrow as ye, useDismiss as Le, useInteractions as Ne, FloatingFocusManager as xe, FloatingArrow as Me } from "@floating-ui/react";
+import './index.css';const Be = "_media-buffering-indicator_1fwjr_1", He = "_media-buffering-spinner_1fwjr_17", Ve = "_media-buffering-spin_1fwjr_17", Ie = "_media-buffering-track_1fwjr_22", Pe = "_media-buffering-track-fill_1fwjr_27", I = {
+  "media-buffering-indicator": "_media-buffering-indicator_1fwjr_1",
+  mediaBufferingIndicator: Be,
+  "media-buffering-spinner": "_media-buffering-spinner_1fwjr_17",
+  mediaBufferingSpinner: He,
+  "media-buffering-spin": "_media-buffering-spin_1fwjr_17",
+  mediaBufferingSpin: Ve,
+  "media-buffering-track": "_media-buffering-track_1fwjr_22",
+  mediaBufferingTrack: Ie,
+  "media-buffering-track-fill": "_media-buffering-track-fill_1fwjr_27",
+  mediaBufferingTrackFill: Pe
+};
+function Te() {
+  return /* @__PURE__ */ e("div", { className: I.mediaBufferingIndicator, children: /* @__PURE__ */ l(F.Root, { className: I.mediaBufferingSpinner, size: 96, children: [
+    /* @__PURE__ */ e(F.Track, { className: I.mediaBufferingTrack, width: 8 }),
+    /* @__PURE__ */ e(
+      F.TrackFill,
+      {
+        className: I.mediaBufferingTrackFill,
+        width: 8
+      }
+    )
+  ] }) });
+}
+const Y = (n) => /* @__PURE__ */ l("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: [
+  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_149_104418", children: /* @__PURE__ */ e("rect", { width: 24, height: 24, fill: "white" }) }) }),
+  /* @__PURE__ */ e("g", { clipPath: "url(#clip0_149_104418)", children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22.5 21.8125V2.3125C22.5 1.9 22.1625 1.5625 21.75 1.5625H2.25C1.8375 1.5625 1.5 1.9 1.5 2.3125V21.8125C1.5 22.225 1.8375 22.5625 2.25 22.5625H21.75C22.1625 22.5625 22.5 22.225 22.5 21.8125ZM21.75 0.0625C22.9905 0.0625 24 1.072 24 2.3125V21.8125C24 23.053 22.9905 24.0625 21.75 24.0625H2.25C1.0095 24.0625 0 23.053 0 21.8125V2.3125C0 1.072 1.0095 0.0625 2.25 0.0625H21.75ZM10.744 10.6709H8.74403V10.0042H6.07736V14.0042H8.74403V13.3375H10.744V14.6709C10.744 15.4042 10.144 16.0042 9.41069 16.0042H5.41069C4.67736 16.0042 4.07736 15.4042 4.07736 14.6709V9.33753C4.07736 8.6042 4.67736 8.0042 5.41069 8.0042H9.41069C10.144 8.0042 10.744 8.6042 10.744 9.33753V10.6709ZM19.8065 10.6709H17.8065V10.0042H15.1399V14.0042H17.8065V13.3375H19.8065V14.6709C19.8065 15.4042 19.2065 16.0042 18.4732 16.0042H14.4732C13.7399 16.0042 13.1399 15.4042 13.1399 14.6709V9.33753C13.1399 8.6042 13.7399 8.0042 14.4732 8.0042H18.4732C19.2065 8.0042 19.8065 8.6042 19.8065 9.33753V10.6709Z", fill: "currentColor" }) })
+] }), J = (n) => /* @__PURE__ */ l("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...n, children: [
+  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_149_104406", children: /* @__PURE__ */ e("rect", { width: 24, height: 24, fill: "white" }) }) }),
+  /* @__PURE__ */ e("g", { clipPath: "url(#clip0_149_104406)", children: /* @__PURE__ */ e("path", { d: "M21.3333 0H2.66666C1.18666 0 0 1.35 0 3V21C0 22.65 1.18666 24 2.66666 24H21.3333C22.8 24 24 22.65 24 21V3C24 1.35 22.8 0 21.3333 0ZM10.6667 10.6667H8.66666V10H6V14H8.66666V13.3333H10.6667V14.6667C10.6667 15.4 10.0667 16 9.33334 16H5.33334C4.6 16 4 15.4 4 14.6667V9.33334C4 8.6 4.6 8 5.33334 8H9.33334C10.0667 8 10.6667 8.6 10.6667 9.33334V10.6667ZM20.0042 10.6667H18.0042V10H15.3375V14H18.0042V13.3333H20.0042V14.6667C20.0042 15.4 19.4042 16 18.6708 16H14.6708C13.9375 16 13.3375 15.4 13.3375 14.6667V9.33334C13.3375 8.6 13.9375 8 14.6708 8H18.6708C19.4042 8 20.0042 8.6 20.0042 9.33334V10.6667Z", fill: "currentColor" }) })
+] });
+function Re() {
+  const n = r("hasCaptions"), t = r("textTrack"), a = t && ie(t), o = D(), c = h(
+    (i) => {
+      o.toggleCaptions(i.nativeEvent);
+    },
+    [o]
+  );
+  return n ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: "controls-button",
+      onClick: c,
+      "aria-label": "Captions",
+      children: a ? /* @__PURE__ */ e(J, { className: "controls-button-icon" }) : /* @__PURE__ */ e(Y, { className: "controls-button-icon" })
+    }
+  ) : null;
+}
+const N = U(null), Se = "_captions_yfgdn_1", Fe = {
+  captions: Se
+};
+function $e({ captions: n }) {
+  const t = r("hasCaptions"), a = u(N);
+  return /* @__PURE__ */ l(E, { children: [
+    n.map((o) => /* @__PURE__ */ e(
+      re,
+      {
+        kind: "subtitles",
+        type: o.type,
+        language: o.language,
+        label: o.label,
+        src: o.src
+      },
+      o.label
+    )),
+    t ? /* @__PURE__ */ e(
+      ue,
+      {
+        className: Fe.captions,
+        style: {
+          "--captions-font-size-multiplier": (a == null ? void 0 : a.state.captionsFontSizeMultiplier.value) ?? 1
+        }
+      }
+    ) : null
+  ] });
+}
+const Ze = "_root_zdwuq_1", qe = "_left-controls_zdwuq_27", ze = "_right-controls_zdwuq_33", je = "_indicators_zdwuq_39", Oe = "_normal-timeline_zdwuq_48", Ae = "_compact-timeline_zdwuq_54", f = {
+  root: Ze,
+  "left-controls": "_left-controls_zdwuq_27",
+  leftControls: qe,
+  "right-controls": "_right-controls_zdwuq_33",
+  rightControls: ze,
+  indicators: je,
+  "normal-timeline": "_normal-timeline_zdwuq_48",
+  normalTimeline: Oe,
+  "compact-timeline": "_compact-timeline_zdwuq_54",
+  compactTimeline: Ae
+};
+function Ke() {
+  return /* @__PURE__ */ l("div", { className: f.root, children: [
+    /* @__PURE__ */ e(A, { className: f.normalTimeline }),
+    /* @__PURE__ */ l("div", { className: f.leftControls, children: [
+      /* @__PURE__ */ e(Qn, {}),
+      /* @__PURE__ */ e(wt, {})
+    ] }),
+    /* @__PURE__ */ e("div", { className: f.indicators, children: /* @__PURE__ */ e(ct, {}) }),
+    /* @__PURE__ */ e(A, { className: f.compactTimeline }),
+    /* @__PURE__ */ l("div", { className: f.rightControls, children: [
+      /* @__PURE__ */ e(Re, {}),
+      /* @__PURE__ */ e(Nn, {}),
+      /* @__PURE__ */ e(jn, {})
+    ] })
+  ] });
+}
+const Ee = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.0692 12C21.0692 11.4776 21.0212 10.944 20.9238 10.4104L23.5511 8.13318L21.0579 3.87247L17.7431 4.97788C16.9059 4.28329 15.9515 3.73553 14.9449 3.37271L14.2616 0H9.28941L8.60612 3.37129C7.58823 3.73553 6.65082 4.27482 5.80659 4.97647L2.49318 3.87247L0 8.13318L2.62729 10.4104C2.52988 10.944 2.48188 11.4776 2.48188 12C2.48188 12.5224 2.52988 13.056 2.62729 13.5896L0 15.8668L2.49318 20.1275L5.808 19.0221C6.64518 19.7167 7.59953 20.2645 8.60612 20.6273L9.28941 24H14.2616L14.9449 20.6287C15.9614 20.2645 16.9002 19.7252 17.7445 19.0235L21.0579 20.1289L23.5511 15.8682L20.9238 13.5911C21.0212 13.056 21.0692 12.5224 21.0692 12ZM11.7755 16.9412C9.05082 16.9412 6.83435 14.7247 6.83435 12C6.83435 9.2753 9.05082 7.05883 11.7755 7.05883C14.5002 7.05883 16.7167 9.2753 16.7167 12C16.7167 14.7247 14.5002 16.9412 11.7755 16.9412Z", fill: "currentColor" }) }), m = U(null), Ue = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 3.03704L7.03704 2L14.037 9L7.03704 16L6 14.963L11.963 9L6 3.03704Z", fill: "currentColor" }) }), Qe = "_menu-hint_k49ve_1", We = "_menu-button_k49ve_5", De = "_menu-label_k49ve_37", Ge = "_menu-icon_k49ve_42", P = {
+  "menu-hint": "_menu-hint_k49ve_1",
+  menuHint: Qe,
+  "menu-button": "_menu-button_k49ve_5",
+  menuButton: We,
+  "menu-label": "_menu-label_k49ve_37",
+  menuLabel: De,
+  "menu-icon": "_menu-icon_k49ve_42",
+  menuIcon: Ge
+};
+function x({ label: n, hint: t, onClick: a, Icon: o }) {
+  return /* @__PURE__ */ l("button", { type: "button", className: P.menuButton, onClick: a, children: [
+    o && /* @__PURE__ */ e(o, { className: P.menuIcon }),
+    /* @__PURE__ */ e("span", { className: P.menuLabel, children: n }),
+    /* @__PURE__ */ e("span", { className: P.menuHint, children: t }),
+    /* @__PURE__ */ e(Ue, {})
+  ] });
+}
+const Xe = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.42229 2.82911C4.71149 1.83006 6.23876 1.19768 7.8383 1L7.96797 2.05432C6.55867 2.22862 5.21101 2.7866 4.07273 3.66874L3.42229 2.82911ZM5.44493 6.71393L9.49745 10.7665L17.0924 3.1705L17.8438 3.92297L9.49745 12.2693L4.69352 7.46534L5.44493 6.71393ZM17.932 8.83829C17.8618 8.27074 17.7364 7.70745 17.5589 7.16222L16.5482 7.49276C16.7055 7.97209 16.816 8.46843 16.8766 8.96689C16.917 9.29742 16.9372 9.6269 16.9372 9.96594C16.9372 10.305 16.917 10.6344 16.8777 10.9639C16.7033 12.3732 16.1454 13.7209 15.2632 14.8592L16.1029 15.5096C17.1019 14.2204 17.7343 12.6931 17.932 11.0925C17.9766 10.7205 18 10.3486 18 9.96594C18 9.58332 17.9766 9.21134 17.932 8.83829ZM1.05432 8.96795L0 8.83829C0.197684 7.23874 0.830061 5.71147 1.82911 4.42228L2.66874 5.07272C1.7866 6.211 1.22862 7.55865 1.05432 8.96795ZM0 11.0936C0.197684 12.6931 0.830061 14.2204 1.82911 15.5096L2.66874 14.8591C1.7866 13.7209 1.22862 12.3732 1.05432 10.9639L0 11.0936ZM10.0939 1.00011C11.6935 1.19673 13.2207 1.83017 14.5099 2.82922L13.8595 3.66884C12.7202 2.7867 11.3736 2.22872 9.96426 2.05442L10.0939 1.00011Z", fill: "currentColor" }) });
+function Ye() {
+  const n = u(m), t = r("playbackRate"), a = h(() => {
+    n && n.setPage("speed");
+  }, [n]);
+  return n ? /* @__PURE__ */ e(
+    x,
+    {
+      label: "Playback Speed",
+      hint: `${t}x`,
+      onClick: a,
+      Icon: Xe
+    }
+  ) : null;
+}
+function Je() {
+  const n = u(m), t = r("hasCaptions"), a = r("textTrack"), o = h(() => {
+    n && n.setPage("captions");
+  }, [n]);
+  return n && t ? /* @__PURE__ */ e(
+    x,
+    {
+      label: "Captions",
+      hint: (a == null ? void 0 : a.label) ?? "Off",
+      onClick: o,
+      Icon: Y
+    }
+  ) : null;
+}
+const en = (n) => /* @__PURE__ */ l("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: [
+  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_412_23039", children: /* @__PURE__ */ e("rect", { width: 18, height: 18, fill: "white" }) }) }),
+  /* @__PURE__ */ l("g", { clipPath: "url(#clip0_412_23039)", children: [
+    /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.46326 3.85039H0V2.65039H2.46326C2.7388 1.36449 3.88181 0.400391 5.24999 0.400391C6.61818 0.400391 7.76119 1.36449 8.03673 2.65039H18V3.85039H8.03673C7.76119 5.13629 6.61818 6.10039 5.24999 6.10039C3.88181 6.10039 2.7388 5.13629 2.46326 3.85039ZM3.59999 3.25039C3.59999 2.33912 4.33872 1.60039 5.24999 1.60039C6.16126 1.60039 6.89999 2.33912 6.89999 3.25039C6.89999 4.16166 6.16126 4.90039 5.24999 4.90039C4.33872 4.90039 3.59999 4.16166 3.59999 3.25039Z", fill: "currentColor" }),
+    /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 8.40039H9.46326C9.7388 7.11449 10.8818 6.15039 12.25 6.15039C13.6182 6.15039 14.7612 7.11449 15.0367 8.40039H18V9.60039H15.0367C14.7612 10.8863 13.6182 11.8504 12.25 11.8504C10.8818 11.8504 9.7388 10.8863 9.46326 9.60039H0V8.40039ZM12.25 7.35039C11.3387 7.35039 10.6 8.08912 10.6 9.00039C10.6 9.91166 11.3387 10.6504 12.25 10.6504C13.1613 10.6504 13.9 9.91166 13.9 9.00039C13.9 8.08912 13.1613 7.35039 12.25 7.35039Z", fill: "currentColor" }),
+    /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.24999 17.6004C6.61818 17.6004 7.76119 16.6363 8.03673 15.3504H18V14.1504H8.03673C7.76119 12.8645 6.61818 11.9004 5.24999 11.9004C3.88181 11.9004 2.7388 12.8645 2.46326 14.1504H0V15.3504H2.46326C2.7388 16.6363 3.88181 17.6004 5.24999 17.6004ZM5.24999 13.1004C4.33872 13.1004 3.59999 13.8391 3.59999 14.7504C3.59999 15.6617 4.33872 16.4004 5.24999 16.4004C6.16126 16.4004 6.89999 15.6617 6.89999 14.7504C6.89999 13.8391 6.16126 13.1004 5.24999 13.1004Z", fill: "currentColor" })
+  ] })
+] });
+function nn() {
+  const n = u(m), t = r("autoQuality"), a = r("quality"), o = h(() => {
+    n && n.setPage("quality");
+  }, [n]);
+  return n && a ? /* @__PURE__ */ e(
+    x,
+    {
+      label: "Quality",
+      hint: t ? `Auto (${a.height}p)` : `${a.height}p`,
+      onClick: o,
+      Icon: en
+    }
+  ) : null;
+}
+function k(n) {
+  Q(() => {
+    const t = (a) => {
+      a.key === "Escape" && (n == null || n());
+    };
+    return document.addEventListener("keydown", t), () => {
+      document.removeEventListener("keydown", t);
+    };
+  }, []);
+}
+const tn = "_main-menu_7h96l_1", an = {
+  "main-menu": "_main-menu_7h96l_1",
+  mainMenu: tn
+};
+function on() {
+  const n = u(m);
+  return k(n == null ? void 0 : n.toggle), /* @__PURE__ */ l("div", { className: an.mainMenu, children: [
+    /* @__PURE__ */ e(Ye, {}),
+    /* @__PURE__ */ e(Je, {}),
+    /* @__PURE__ */ e(nn, {})
+  ] });
+}
+const R = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1347 3.00061L6.55157 13.5825L0.865302 7.89624L0 8.76154L6.55157 15.3131L17.9988 3.86469L17.1347 3.00061Z", fill: "currentColor" }) }), M = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.037 3.03704L6.07407 9L12.037 14.963L11 16L4 9L11 2L12.037 3.03704Z", fill: "currentColor" }) }), b = [0.5, 0.75, 1, 1.25, 1.5, 2], ln = [
+  { label: "50%", value: 0.5 },
+  { label: "100%", value: 1 },
+  { label: "200%", value: 2 },
+  { label: "300%", value: 3 },
+  { label: "400%", value: 4 }
+], sn = "_menu-container_rqjaq_1", cn = "_menu-options_rqjaq_6", rn = "_menu-heading_rqjaq_11", un = "_check-icon_rqjaq_27", dn = "_menu-item-label_rqjaq_33", mn = "_menu-item_rqjaq_33", hn = "_menu-back-button_rqjaq_65", s = {
+  "menu-container": "_menu-container_rqjaq_1",
+  menuContainer: sn,
+  "menu-options": "_menu-options_rqjaq_6",
+  menuOptions: cn,
+  "menu-heading": "_menu-heading_rqjaq_11",
+  menuHeading: rn,
+  "check-icon": "_check-icon_rqjaq_27",
+  checkIcon: un,
+  "menu-item-label": "_menu-item-label_rqjaq_33",
+  menuItemLabel: dn,
+  "menu-item": "_menu-item_rqjaq_33",
+  menuItem: mn,
+  "menu-back-button": "_menu-back-button_rqjaq_65",
+  menuBackButton: hn
+};
+function _n() {
+  const n = u(m), t = de({
+    rates: b,
+    normalLabel: "1x"
+  });
+  return k(n == null ? void 0 : n.backToMain), n ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: s.menuBackButton,
+        onClick: n.backToMain,
+        children: [
+          /* @__PURE__ */ e(M, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Playback Speed" }),
+    /* @__PURE__ */ e("div", { role: "menu", className: s.menuOptions, children: t.map(({ value: a, label: o, select: c, selected: i }) => /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": i,
+        onClick: () => {
+          c(), n.backToMain(), n.toggle();
+        },
+        className: s.menuItem,
+        children: [
+          /* @__PURE__ */ e(R, { className: s.checkIcon }),
+          /* @__PURE__ */ e("span", { className: s.menuItemLabel, children: o })
+        ]
+      },
+      a
+    )) })
+  ] }) : null;
+}
+function gn() {
+  const n = u(m), t = r("textTrack"), a = h(() => {
+    n && n.setPage("captionLanguage");
+  }, [n]);
+  return n ? /* @__PURE__ */ e(
+    x,
+    {
+      label: "Language",
+      hint: (t == null ? void 0 : t.label) ?? "Off",
+      onClick: a
+    }
+  ) : null;
+}
+function pn() {
+  const n = u(N), t = u(m), a = h(() => {
+    t && t.setPage("captionFontSize");
+  }, [t]);
+  return t && n ? /* @__PURE__ */ e(
+    x,
+    {
+      label: "Caption Font Size",
+      hint: n.state.captionsFontSizeMultiplier.label,
+      onClick: a
+    }
+  ) : null;
+}
+function fn() {
+  const n = u(m);
+  return k(n == null ? void 0 : n.backToMain), n ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: s.menuBackButton,
+        onClick: n.backToMain,
+        children: [
+          /* @__PURE__ */ e(M, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Captions" }),
+    /* @__PURE__ */ e(gn, {}),
+    /* @__PURE__ */ e(pn, {})
+  ] }) : null;
+}
+function bn() {
+  const n = u(m), t = me();
+  return k(n == null ? void 0 : n.backToCaptions), n ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: s.menuBackButton,
+        onClick: n.backToCaptions,
+        children: [
+          /* @__PURE__ */ e(M, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Captions" }),
+    /* @__PURE__ */ e("div", { role: "menu", className: s.menuOptions, children: t.map(({ value: a, label: o, select: c, selected: i }) => /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": i,
+        onClick: () => {
+          c(), n.backToMain(), n.toggle();
+        },
+        className: s.menuItem,
+        children: [
+          /* @__PURE__ */ e(R, { className: s.checkIcon }),
+          /* @__PURE__ */ e("span", { className: s.menuItemLabel, children: o })
+        ]
+      },
+      a
+    )) })
+  ] }) : null;
+}
+function kn() {
+  const n = u(N), t = u(m);
+  return k(t == null ? void 0 : t.backToCaptions), n && t ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: s.menuBackButton,
+        onClick: t.backToCaptions,
+        children: [
+          /* @__PURE__ */ e(M, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Captions" }),
+    /* @__PURE__ */ e("div", { role: "menu", className: s.menuOptions, children: ln.map((a) => /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": a.value === n.state.captionsFontSizeMultiplier.value,
+        onClick: () => {
+          n.setState((o) => ({
+            ...o,
+            captionsFontSizeMultiplier: a
+          })), t.backToMain(), t.toggle();
+        },
+        className: s.menuItem,
+        children: [
+          /* @__PURE__ */ e(R, { className: s.checkIcon }),
+          /* @__PURE__ */ e("span", { className: s.menuItemLabel, children: a.label })
+        ]
+      },
+      a.label
+    )) })
+  ] }) : null;
+}
+function Cn() {
+  const n = u(m), t = he({ sort: "descending" }), a = r("autoQuality");
+  return k(n == null ? void 0 : n.backToMain), n ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: s.menuBackButton,
+        onClick: n.backToMain,
+        children: [
+          /* @__PURE__ */ e(M, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Quality" }),
+    /* @__PURE__ */ e("div", { role: "menu", className: s.menuOptions, children: t.map(({ value: o, label: c, select: i, selected: _ }) => /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": o === "auto" && a || _ && !a,
+        onClick: () => {
+          i(), n.backToMain(), n.toggle();
+        },
+        className: s.menuItem,
+        children: [
+          /* @__PURE__ */ e(R, { className: s.checkIcon }),
+          /* @__PURE__ */ e("span", { className: s.menuItemLabel, children: c })
+        ]
+      },
+      o
+    )) })
+  ] }) : null;
+}
+const vn = {
+  main: on,
+  speed: _n,
+  captions: fn,
+  captionLanguage: bn,
+  captionFontSize: kn,
+  quality: Cn
+};
+function wn() {
+  const [n, t] = T("main"), [a, o] = T(!1), c = h(() => {
+    o((v) => !v);
+  }, []), i = h((v) => {
+    t(v);
+  }, []), _ = h(() => {
+    t("captions");
+  }, []), p = h(() => {
+    t("main");
+  }, []), B = W(() => vn[n], [n]), C = ce(null), { refs: S, floatingStyles: H, context: q } = Ce({
+    open: a,
+    onOpenChange: (v) => {
+      o(v), p();
+    },
+    placement: "top-end",
+    whileElementsMounted: ve,
+    middleware: [
+      we(),
+      ye({
+        element: C
+      })
+    ]
+  }), oe = Le(q, { escapeKey: !1 }), { getReferenceProps: le, getFloatingProps: se } = Ne([oe]);
+  return {
+    Page: B,
+    open: a,
+    toggle: c,
+    setPage: i,
+    backToCaptions: _,
+    backToMain: p,
+    arrowRef: C,
+    refs: S,
+    floatingStyles: H,
+    context: q,
+    getReferenceProps: le,
+    getFloatingProps: se
+  };
+}
+const yn = "_settings-menu_hxlsv_1", Ln = "_arrow_hxlsv_15", j = {
+  "settings-menu": "_settings-menu_hxlsv_1",
+  settingsMenu: yn,
+  arrow: Ln
+};
+function Nn() {
+  const {
+    Page: n,
+    arrowRef: t,
+    backToCaptions: a,
+    backToMain: o,
+    context: c,
+    floatingStyles: i,
+    getFloatingProps: _,
+    getReferenceProps: p,
+    open: B,
+    refs: C,
+    setPage: S,
+    toggle: H
+  } = wn();
+  return /* @__PURE__ */ l(E, { children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        ref: C.setReference,
+        type: "button",
+        className: "controls-button",
+        "aria-label": "Settings",
+        onClick: H,
+        "aria-expanded": B,
+        ...p(),
+        children: /* @__PURE__ */ e(Ee, { className: "controls-button-icon icon-rotate" })
+      }
+    ),
+    B && /* @__PURE__ */ e(xe, { context: c, initialFocus: -1, modal: !1, children: /* @__PURE__ */ l(
+      "div",
+      {
+        className: j.settingsMenu,
+        ref: C.setFloating,
+        style: i,
+        ..._(),
+        children: [
+          /* @__PURE__ */ e(
+            m.Provider,
+            {
+              value: { setPage: S, backToMain: o, backToCaptions: a, toggle: H },
+              children: /* @__PURE__ */ e(n, {})
+            }
+          ),
+          /* @__PURE__ */ e(
+            Me,
+            {
+              ref: t,
+              context: c,
+              className: j.arrow
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+function ee(n, t = 1e3) {
+  return function() {
+    const o = r("lastKeyboardAction"), [c, i] = T(!1), _ = h(() => i(!1), []);
+    return Q(() => {
+      i(!!o);
+      const p = setTimeout(_, t);
+      return () => clearTimeout(p);
+    }, [o, t]), c ? /* @__PURE__ */ e(n, {}) : null;
+  };
+}
+const $ = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { d: "M 11,21 H 5 V 3 h 6 z m 8,0 H 13 V 3 h 6 z", fill: "currentColor" }) }), Z = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { d: "M 5,2 V 22 L 21,12.000665 Z", fill: "currentColor" }) }), ne = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1179 1.41211V22.589H11.2943L5.64717 16.9418V7.05928L11.2943 1.41211H14.1179ZM4.23537 7.05928V16.9418H2.11769C0.957618 16.9418 0.0189406 16.0147 0.00028305 14.8592L0 14.8241V9.17696C0 8.01689 0.927077 7.07822 2.0826 7.05956L2.11769 7.05928H4.23537ZM22.3744 7.93711L24 9.56119L21.5623 11.9988L24 14.4365L22.3744 16.0621L19.9383 13.6245L17.5006 16.0621L15.875 14.4365L18.3127 11.9988L15.875 9.56119L17.5006 7.93711L19.9383 10.3748L22.3744 7.93711Z", fill: "currentColor" }) }), te = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 6.98017V16.8627L11.2943 22.5099H14.1179V1.33301H11.2943L5.64714 6.98017ZM0 9.09785V14.745C0 15.9168 0.945899 16.8627 2.11768 16.8627H4.23537V6.98017H2.11768C0.945899 6.98017 0 7.92607 0 9.09785ZM18.3527 11.9207C18.3527 10.6134 17.8388 9.36962 16.9056 8.4209L17.9094 7.43123C19.1066 8.64396 19.7645 10.2393 19.7645 11.9207C19.7645 13.6036 19.1066 15.1989 17.9094 16.4116L16.9056 15.422C17.8388 14.4732 18.3527 13.2295 18.3527 11.9207Z", fill: "currentColor" }) }), ae = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 16.8627V6.98017L11.2943 1.33301H14.1179V22.5099H11.2943L5.64714 16.8627ZM0 14.745V9.09785C0 7.92607 0.945899 6.98017 2.11768 6.98017H4.23537V16.8627H2.11768C0.945899 16.8627 0 15.9168 0 14.745ZM16.9056 8.4209C17.8388 9.36962 18.3527 10.6134 18.3527 11.9207C18.3527 13.2295 17.8388 14.4732 16.9056 15.422L17.9094 16.4116C19.1066 15.1989 19.7645 13.6036 19.7645 11.9207C19.7645 10.2393 19.1066 8.64396 17.9094 7.43123L16.9056 8.4209ZM19.9016 5.43185L20.8997 4.43372C22.9002 6.43422 24 9.09403 24 11.9219C24 14.7497 22.9002 17.4081 20.8997 19.4086L19.9016 18.4104C21.6353 16.6782 22.5882 14.3727 22.5882 11.9219C22.5882 9.46957 21.6353 7.16553 19.9016 5.43185Z", fill: "currentColor" }) }), xn = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.691 3.99987V10.5281L0 4.00655V20.2596L10.691 13.7367V20.2663L23.9987 12.1331L10.691 3.99987Z", fill: "currentColor" }) }), Mn = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.309 3.99987L0 12.1331L13.309 20.2663V13.7367L23.9987 20.2596V4.00655L13.309 10.5281V3.99987Z", fill: "currentColor" }) }), Bn = "_feedback-overlay_v4lbu_1", Hn = "_feedback-message_v4lbu_14", Vn = "_feedback-icon_v4lbu_30", In = "_feedback-icon-animation_v4lbu_1", d = {
+  "feedback-overlay": "_feedback-overlay_v4lbu_1",
+  feedbackOverlay: Bn,
+  "feedback-message": "_feedback-message_v4lbu_14",
+  feedbackMessage: Hn,
+  "feedback-icon": "_feedback-icon_v4lbu_30",
+  feedbackIcon: Vn,
+  "feedback-icon-animation": "_feedback-icon-animation_v4lbu_1",
+  feedbackIconAnimation: In
+};
+function Pn() {
+  var a;
+  const n = G();
+  switch ((a = n.lastKeyboardAction) == null ? void 0 : a.action) {
+    case "togglePaused":
+      return /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: n.paused ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ e(Z, {}) });
+    case "toggleCaptions":
+    case "nextCaptionLanguage":
+    case "previousCaptionLanguage":
+      return n.hasCaptions ? /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: /* @__PURE__ */ e(J, {}) }) : null;
+    case "volumeUp":
+    case "volumeDown":
+    case "toggleMuted":
+      return /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: n.muted || n.volume === 0 ? /* @__PURE__ */ e(ne, {}) : n.volume >= 0.5 ? /* @__PURE__ */ e(ae, {}) : /* @__PURE__ */ e(te, {}) });
+    case "seekForward":
+    case "seekForward10":
+      return /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: /* @__PURE__ */ e(xn, { className: "right" }) });
+    case "seekBackward":
+    case "seekBackward10":
+      return /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: /* @__PURE__ */ e(Mn, { className: "left" }) });
+    default:
+      return null;
+  }
+}
+function Tn() {
+  var a;
+  const n = G();
+  switch ((a = n.lastKeyboardAction) == null ? void 0 : a.action) {
+    case "toggleCaptions":
+    case "nextCaptionLanguage":
+    case "previousCaptionLanguage":
+      return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: n.textTrack ? `Caption Language: ${n.textTrack.label}` : "Captions: Off" });
+    case "volumeUp":
+    case "volumeDown":
+    case "toggleMuted":
+      return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: n.muted || n.volume === 0 ? "Muted" : `Volume: ${(n.volume * 100).toFixed(0)}%` });
+    case "increasePlaybackRate":
+    case "decreasePlaybackRate":
+    case "resetPlaybackRate":
+      return /* @__PURE__ */ l("div", { className: d.feedbackMessage, children: [
+        "Playback speed: ",
+        n.playbackRate,
+        "x"
+      ] });
+    case "seekForward":
+      return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: "Seek forward: 5 seconds" });
+    case "seekForward10":
+      return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: "Seek forward: 10 seconds" });
+    case "seekBackward":
+      return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: "Seek backward: 5 seconds" });
+    case "seekBackward10":
+      return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: "Seek backward: 10 seconds" });
+    default:
+      return null;
+  }
+}
+const Rn = ee(Pn, 500), Sn = ee(Tn, 1e3);
+function Fn() {
+  return /* @__PURE__ */ l("div", { className: d.feedbackOverlay, children: [
+    /* @__PURE__ */ e(Rn, {}),
+    /* @__PURE__ */ e(Sn, {})
+  ] });
+}
+const $n = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1383 0.999867V3.66268H18.4561L3.66281 18.4546V14.1382H1V23H9.86449V20.3372H5.54542L20.3387 5.54528V9.86303H23.0001V0.999867H14.1383Z", fill: "currentColor" }) }), Zn = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.562 6.58944L22.1514 0L24.0005 1.84907L17.4111 8.43851H21.6506V11.0552H12.9453V2.34861H15.562V6.58944ZM2.34861 15.5615V12.9461H11.0539V21.6501H8.43982V17.4106L1.84907 24L0 22.1509L6.59075 15.5615H2.34861Z", fill: "currentColor" }) }), qn = "_full-screen-button_8detf_2", zn = {
+  "full-screen-button": "_full-screen-button_8detf_2",
+  fullScreenButton: qn
+};
+function jn() {
+  const n = r("fullscreen"), t = u(N);
+  return t && !t.hideFullScreen ? /* @__PURE__ */ e(
+    X,
+    {
+      className: `controls-button ${zn.fullScreenButton}`,
+      children: n ? /* @__PURE__ */ e(Zn, { className: "controls-button-icon" }) : /* @__PURE__ */ e($n, { className: "controls-button-icon" })
+    }
+  ) : null;
+}
+const On = "_gestures-container_1fn3b_1", An = "_gesture_1fn3b_1", O = {
+  "gestures-container": "_gestures-container_1fn3b_1",
+  gesturesContainer: On,
+  gesture: An
+};
+function Kn() {
+  const n = D(), t = () => {
+    n.togglePaused();
+  };
+  return /* @__PURE__ */ e("div", { className: O.gesturesContainer, children: /* @__PURE__ */ e("div", { "aria-hidden": !0, className: O.gesture, onClick: t }) });
+}
+const En = "_play-pause-button_1owe7_1", Un = {
+  "play-pause-button": "_play-pause-button_1owe7_1",
+  playPauseButton: En
+};
+function Qn() {
+  const n = _e(), t = r("paused");
+  return n ? /* @__PURE__ */ e(
+    ge,
+    {
+      className: `${Un.playPauseButton} controls-button`,
+      onKeyDown: (a) => {
+        a.key === " " && (n == null || n.$state.lastKeyboardAction.set({
+          action: "togglePaused",
+          event: a.nativeEvent
+        }));
+      },
+      children: t ? /* @__PURE__ */ e(Z, { className: "controls-button-icon" }) : /* @__PURE__ */ e($, { className: "controls-button-icon" })
+    }
+  ) : null;
+}
+const Wn = "_poster_195hi_1", Dn = {
+  poster: Wn
+};
+function Gn({ src: n }) {
+  const t = r("source");
+  return t.type === "video/youtube" || t.type === "video/vimeo" ? null : /* @__PURE__ */ e(pe, { src: n, className: Dn.poster });
+}
+const Xn = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.94968 7.74766L3.99993 2.79791L2.79785 3.99999L7.7476 8.94974L2.79785 13.8995L3.99993 15.1016L8.94968 10.1518L13.8994 15.1016L15.1015 13.8995L10.1518 8.94974L15.1015 3.99999L13.8994 2.79791L8.94968 7.74766Z", fill: "currentColor" }) }), Yn = "_small-layout-overlay_xbovu_1", Jn = "_small-layout-button_xbovu_14", et = "_small-layout-icon-play_xbovu_24", nt = "_small-layout-icon-pause_xbovu_30", tt = "_full-screen-close-icon_xbovu_36", at = "_fade-out_xbovu_1", y = {
+  "small-layout-overlay": "_small-layout-overlay_xbovu_1",
+  smallLayoutOverlay: Yn,
+  "small-layout-button": "_small-layout-button_xbovu_14",
+  smallLayoutButton: Jn,
+  "small-layout-icon-play": "_small-layout-icon-play_xbovu_24",
+  smallLayoutIconPlay: et,
+  "small-layout-icon-pause": "_small-layout-icon-pause_xbovu_30",
+  smallLayoutIconPause: nt,
+  "full-screen-close-icon": "_full-screen-close-icon_xbovu_36",
+  fullScreenCloseIcon: tt,
+  "fade-out": "_fade-out_xbovu_1",
+  fadeOut: at
+};
+function ot() {
+  return /* @__PURE__ */ l("div", { className: y.smallLayoutOverlay, children: [
+    /* @__PURE__ */ e(X, { className: y.fullScreenCloseIcon, children: /* @__PURE__ */ e(Xn, {}) }),
+    /* @__PURE__ */ l("i", { className: y.smallLayoutButton, children: [
+      /* @__PURE__ */ e(Z, { className: y.smallLayoutIconPlay }),
+      /* @__PURE__ */ e($, { className: y.smallLayoutIconPause })
+    ] })
+  ] });
+}
+const lt = "_time-indicator_1wsym_1", st = {
+  "time-indicator": "_time-indicator_1wsym_1",
+  timeIndicator: lt
+};
+function ct() {
+  return /* @__PURE__ */ l("div", { className: st.timeIndicator, children: [
+    /* @__PURE__ */ e(z, { type: "current" }),
+    "/",
+    /* @__PURE__ */ e(z, { type: "duration" })
+  ] });
+}
+const it = "_timeline-wrapper_j9z56_1", rt = "_track_j9z56_8", ut = "_thumb_j9z56_19", dt = "_root_j9z56_33", mt = "_track-inner_j9z56_63", ht = "_progress_j9z56_69", _t = "_track-fill_j9z56_75", g = {
+  "timeline-wrapper": "_timeline-wrapper_j9z56_1",
+  timelineWrapper: it,
+  track: rt,
+  thumb: ut,
+  root: dt,
+  "track-inner": "_track-inner_j9z56_63",
+  trackInner: mt,
+  progress: ht,
+  "track-fill": "_track-fill_j9z56_75",
+  trackFill: _t
+}, gt = `${g.progress} ${g.trackInner}`, pt = `${g.trackFill} ${g.trackInner}`;
+function A({ className: n }) {
+  const t = n ? `${g.timelineWrapper} ${n}` : g.timelineWrapper;
+  return /* @__PURE__ */ e("div", { className: t, children: /* @__PURE__ */ l(w.Root, { className: g.root, children: [
+    /* @__PURE__ */ l(w.Track, { className: g.track, children: [
+      /* @__PURE__ */ e(w.Progress, { className: gt }),
+      /* @__PURE__ */ e(w.TrackFill, { className: pt })
+    ] }),
+    /* @__PURE__ */ e(w.Thumb, { className: g.thumb })
+  ] }) });
+}
+const ft = "_wrapper_3zgs9_1", bt = "_track_3zgs9_6", kt = "_thumb_3zgs9_16", Ct = "_track-fill_3zgs9_30", vt = "_root_3zgs9_48", L = {
+  wrapper: ft,
+  track: bt,
+  thumb: kt,
+  "track-fill": "_track-fill_3zgs9_30",
+  trackFill: Ct,
+  root: vt
+};
+function wt() {
+  const n = r("volume"), t = r("muted");
+  return /* @__PURE__ */ l("div", { className: L.wrapper, children: [
+    /* @__PURE__ */ e(fe, { className: "controls-button", children: t || n == 0 ? /* @__PURE__ */ e(ne, { className: "controls-button-icon" }) : n < 0.5 ? /* @__PURE__ */ e(te, { className: "controls-button-icon" }) : /* @__PURE__ */ e(ae, { className: "controls-button-icon" }) }),
+    /* @__PURE__ */ l(V.Root, { className: L.root, children: [
+      /* @__PURE__ */ e(V.Track, { className: L.track, children: /* @__PURE__ */ e(V.TrackFill, { className: L.trackFill }) }),
+      /* @__PURE__ */ e(V.Thumb, { className: L.thumb })
+    ] })
+  ] });
+}
+const K = {
+  togglePaused: ["Space", "Enter", "k"],
+  seekForward: ["ArrowRight"],
+  seekBackward: ["ArrowLeft"],
+  volumeUp: ["ArrowUp"],
+  volumeDown: ["ArrowDown"],
+  toggleFullscreen: ["f"],
+  toggleMuted: ["m"],
+  toggleCaptions: ["c"],
+  nextCaptionLanguage: {
+    keys: ["v"],
+    onKeyUp({ event: n, player: t, remote: a }) {
+      const o = t.textTracks.selectedIndex, c = o + 1;
+      a.changeTextTrackMode(o, "hidden"), a.changeTextTrackMode(
+        c >= t.textTracks.length ? 0 : c,
+        "showing"
+      ), t.$state.lastKeyboardAction.set({
+        action: "nextCaptionLanguage",
+        event: n
+      });
+    }
+  },
+  previousCaptionLanguage: {
+    keys: ["x"],
+    onKeyUp({ event: n, player: t, remote: a }) {
+      const o = t.textTracks.selectedIndex, c = o - 1;
+      a.changeTextTrackMode(o, "hidden"), a.changeTextTrackMode(
+        c < 0 ? t.textTracks.length - 1 : c,
+        "showing"
+      ), t.$state.lastKeyboardAction.set({
+        action: "previousCaptionLanguage",
+        event: n
+      });
+    }
+  },
+  decreasePlaybackRate: {
+    keys: ["a"],
+    onKeyUp({ event: n, player: t, remote: a }) {
+      const c = b.indexOf(t.playbackRate) - 1;
+      c >= 0 && (a.changePlaybackRate(b[c]), t.$state.lastKeyboardAction.set({
+        action: "decreasePlaybackRate",
+        event: n
+      }));
+    }
+  },
+  increasePlaybackRate: {
+    keys: ["d"],
+    onKeyUp({ event: n, player: t, remote: a }) {
+      const c = b.indexOf(t.playbackRate) + 1;
+      c < b.length && (a.changePlaybackRate(b[c]), t.$state.lastKeyboardAction.set({
+        action: "increasePlaybackRate",
+        event: n
+      }));
+    }
+  },
+  resetPlaybackRate: {
+    keys: ["s"],
+    onKeyUp({ event: n, player: t, remote: a }) {
+      a.changePlaybackRate(1), t.$state.lastKeyboardAction.set({
+        action: "resetPlaybackRate",
+        event: n
+      });
+    }
+  },
+  seekForward10Seconds: {
+    keys: ["l"],
+    onKeyUp({ event: n, player: t, remote: a }) {
+      a.seek(t.currentTime + 10), t.$state.lastKeyboardAction.set({
+        action: "seekForward10",
+        event: n
+      });
+    }
+  },
+  seekBackward10Seconds: {
+    keys: ["j"],
+    onKeyUp({ event: n, player: t, remote: a }) {
+      a.seek(t.currentTime - 10), t.$state.lastKeyboardAction.set({
+        action: "seekBackward10",
+        event: n
+      });
+    }
+  }
+}, yt = {};
+function Bt({
+  title: n,
+  src: t,
+  captions: a = [],
+  thumbnail: o,
+  hideFullScreen: c = !1
+}) {
+  const [i, _] = T({
+    captionsFontSizeMultiplier: { label: "100%", value: 1 }
+  }), p = W(() => c ? {
+    ...K,
+    toggleFullscreen: []
+  } : K, [c]);
+  return /* @__PURE__ */ e(N.Provider, { value: { state: i, setState: _, hideFullScreen: c }, children: /* @__PURE__ */ l(be, { title: n, src: t, keyShortcuts: p, playsInline: !0, children: [
+    /* @__PURE__ */ l(ke, { className: yt.mediaProvider, children: [
+      /* @__PURE__ */ e(Te, {}),
+      /* @__PURE__ */ e(Gn, { src: o }),
+      /* @__PURE__ */ e($e, { captions: a }),
+      /* @__PURE__ */ e(Fn, {}),
+      /* @__PURE__ */ e(ot, {}),
+      /* @__PURE__ */ e(Kn, {})
+    ] }),
+    /* @__PURE__ */ e(Ke, {})
+  ] }) });
+}
 export {
-  a as CAPTION_FONT_SIZE_MULTIPLIERS,
-  A as PLAYBACK_RATES,
-  E as StudioPlayer
+  ln as CAPTION_FONT_SIZE_MULTIPLIERS,
+  b as PLAYBACK_RATES,
+  Bt as StudioPlayer
 };