@instructure/studio-player 0.1.1 → 0.1.4

package/dist/studio-player.es.js

@@ -1,6 +1,1129 @@
-import { E as a, P as A, S as E } from "./index-BM9a_WKH.js";
+import { jsx as e, jsxs as a, Fragment as Q } from "react/jsx-runtime";
+import { Spinner as j, useMediaState as m, isTrackCaptionKind as de, useMediaRemote as O, Track as he, Captions as me, usePlaybackRateOptions as _e, useCaptionOptions as pe, useVideoQualityOptions as be, useMediaStore as W, FullscreenButton as J, useMediaPlayer as fe, PlayButton as ge, Poster as ke, Time as A, TimeSlider as B, MuteButton as we, VolumeSlider as S, MediaPlayer as Ce, MediaProvider as ve } from "@vidstack/react";
+import { createContext as X, useContext as i, useCallback as d, useEffect as G, useState as v, useMemo as Y, useRef as ye } from "react";
+import { useFloating as Le, autoUpdate as Me, flip as Ne, arrow as xe, useDismiss as Ie, useInteractions as Be, FloatingFocusManager as He, FloatingArrow as Ve } from "@floating-ui/react";
+import './index.css';const Te = "_media-buffering-indicator_1fwjr_1", Pe = "_media-buffering-spinner_1fwjr_17", Se = "_media-buffering-spin_1fwjr_17", Re = "_media-buffering-track_1fwjr_22", Fe = "_media-buffering-track-fill_1fwjr_27", R = {
+  "media-buffering-indicator": "_media-buffering-indicator_1fwjr_1",
+  mediaBufferingIndicator: Te,
+  "media-buffering-spinner": "_media-buffering-spinner_1fwjr_17",
+  mediaBufferingSpinner: Pe,
+  "media-buffering-spin": "_media-buffering-spin_1fwjr_17",
+  mediaBufferingSpin: Se,
+  "media-buffering-track": "_media-buffering-track_1fwjr_22",
+  mediaBufferingTrack: Re,
+  "media-buffering-track-fill": "_media-buffering-track-fill_1fwjr_27",
+  mediaBufferingTrackFill: Fe
+};
+function Ze() {
+  return /* @__PURE__ */ e("div", { className: R.mediaBufferingIndicator, children: /* @__PURE__ */ a(j.Root, { className: R.mediaBufferingSpinner, size: 96, children: [
+    /* @__PURE__ */ e(j.Track, { className: R.mediaBufferingTrack, width: 8 }),
+    /* @__PURE__ */ e(
+      j.TrackFill,
+      {
+        className: R.mediaBufferingTrackFill,
+        width: 8
+      }
+    )
+  ] }) });
+}
+const p = X(null), ee = (t) => /* @__PURE__ */ a("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) })
+] }), te = (t) => /* @__PURE__ */ a("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...t, 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 je() {
+  const t = m("hasCaptions"), n = m("textTrack"), o = n && de(n), c = O(), s = i(p), r = d(
+    (u) => {
+      c.toggleCaptions(u.nativeEvent);
+    },
+    [c]
+  );
+  return t ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: "controls-button",
+      onClick: r,
+      "aria-label": "Captions",
+      tabIndex: s != null && s.state.interactionsDisabled ? -1 : 0,
+      children: o ? /* @__PURE__ */ e(te, { className: "controls-button-icon" }) : /* @__PURE__ */ e(ee, { className: "controls-button-icon" })
+    }
+  ) : null;
+}
+const $e = "_captions_13epz_1", Oe = {
+  captions: $e
+};
+function qe({ captions: t }) {
+  const n = m("hasCaptions"), o = i(p);
+  return /* @__PURE__ */ a(Q, { children: [
+    t.map((c) => /* @__PURE__ */ e(
+      he,
+      {
+        kind: "subtitles",
+        type: c.type,
+        language: c.language,
+        label: c.label,
+        src: c.src
+      },
+      c.label
+    )),
+    n ? /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          display: "contents",
+          "--captions-font-size-multiplier": (o == null ? void 0 : o.state.captionsFontSizeMultiplier.value) ?? 1,
+          "--captions-flex-direction": o != null && o.state.captionPositionOnTop ? "column" : "column-reverse",
+          "--captions-color": o != null && o.state.captionsInvertColors ? "rgba(22, 22, 22)" : "white",
+          "--captions-background-color": o != null && o.state.captionsInvertColors ? "rgba(255, 255, 255, 0.75)" : "rgba(22, 22, 22, 0.75)"
+        },
+        children: /* @__PURE__ */ e(me, { className: Oe.captions })
+      }
+    ) : null
+  ] });
+}
+const ze = "_root_zdwuq_1", Ae = "_left-controls_zdwuq_27", Ke = "_right-controls_zdwuq_33", De = "_indicators_zdwuq_39", Ee = "_normal-timeline_zdwuq_48", Ue = "_compact-timeline_zdwuq_54", M = {
+  root: ze,
+  "left-controls": "_left-controls_zdwuq_27",
+  leftControls: Ae,
+  "right-controls": "_right-controls_zdwuq_33",
+  rightControls: Ke,
+  indicators: De,
+  "normal-timeline": "_normal-timeline_zdwuq_48",
+  normalTimeline: Ee,
+  "compact-timeline": "_compact-timeline_zdwuq_54",
+  compactTimeline: Ue
+};
+function Qe() {
+  return /* @__PURE__ */ a("div", { className: M.root, children: [
+    /* @__PURE__ */ e(E, { className: M.normalTimeline }),
+    /* @__PURE__ */ a("div", { className: M.leftControls, children: [
+      /* @__PURE__ */ e(hn, {}),
+      /* @__PURE__ */ e(On, {})
+    ] }),
+    /* @__PURE__ */ e("div", { className: M.indicators, children: /* @__PURE__ */ e(Mn, {}) }),
+    /* @__PURE__ */ e(E, { className: M.compactTimeline }),
+    /* @__PURE__ */ a("div", { className: M.rightControls, children: [
+      /* @__PURE__ */ e(je, {}),
+      /* @__PURE__ */ e(Zt, {}),
+      /* @__PURE__ */ e(Yt, {})
+    ] })
+  ] });
+}
+const We = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), b = X(null), Je = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), Xe = "_menu-hint_k49ve_1", Ge = "_menu-button_k49ve_5", Ye = "_menu-label_k49ve_37", et = "_menu-icon_k49ve_42", F = {
+  "menu-hint": "_menu-hint_k49ve_1",
+  menuHint: Xe,
+  "menu-button": "_menu-button_k49ve_5",
+  menuButton: Ge,
+  "menu-label": "_menu-label_k49ve_37",
+  menuLabel: Ye,
+  "menu-icon": "_menu-icon_k49ve_42",
+  menuIcon: et
+};
+function T({ label: t, hint: n, onClick: o, Icon: c }) {
+  return /* @__PURE__ */ a("button", { type: "button", className: F.menuButton, onClick: o, children: [
+    c && /* @__PURE__ */ e(c, { className: F.menuIcon }),
+    /* @__PURE__ */ e("span", { className: F.menuLabel, children: t }),
+    /* @__PURE__ */ e("span", { className: F.menuHint, children: n }),
+    /* @__PURE__ */ e(Je, {})
+  ] });
+}
+const tt = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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 nt() {
+  const t = i(b), n = m("playbackRate"), o = d(() => {
+    t && t.setPage("speed");
+  }, [t]);
+  return t ? /* @__PURE__ */ e(
+    T,
+    {
+      label: "Playback Speed",
+      hint: `${n}x`,
+      onClick: o,
+      Icon: tt
+    }
+  ) : null;
+}
+function ot() {
+  const t = i(b), n = m("hasCaptions"), o = m("textTrack"), c = d(() => {
+    t && t.setPage("captions");
+  }, [t]);
+  return t && n ? /* @__PURE__ */ e(
+    T,
+    {
+      label: "Captions",
+      hint: (o == null ? void 0 : o.label) ?? "Off",
+      onClick: c,
+      Icon: ee
+    }
+  ) : null;
+}
+const at = (t) => /* @__PURE__ */ a("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_412_23039", children: /* @__PURE__ */ e("rect", { width: 18, height: 18, fill: "white" }) }) }),
+  /* @__PURE__ */ a("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 ct() {
+  const t = i(b), n = m("autoQuality"), o = m("quality"), c = d(() => {
+    t && t.setPage("quality");
+  }, [t]);
+  return t && o ? /* @__PURE__ */ e(
+    T,
+    {
+      label: "Quality",
+      hint: n ? `Auto (${o.height}p)` : `${o.height}p`,
+      onClick: c,
+      Icon: at
+    }
+  ) : null;
+}
+function y(t) {
+  G(() => {
+    const n = (o) => {
+      o.key === "Escape" && (t == null || t());
+    };
+    return document.addEventListener("keydown", n), () => {
+      document.removeEventListener("keydown", n);
+    };
+  }, []);
+}
+const st = "_main-menu_7h96l_1", lt = {
+  "main-menu": "_main-menu_7h96l_1",
+  mainMenu: st
+};
+function it() {
+  const t = i(b);
+  return y(t == null ? void 0 : t.toggle), /* @__PURE__ */ a("div", { className: lt.mainMenu, children: [
+    /* @__PURE__ */ e(nt, {}),
+    /* @__PURE__ */ e(ot, {}),
+    /* @__PURE__ */ e(ct, {})
+  ] });
+}
+const Z = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), P = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), x = [0.5, 0.75, 1, 1.25, 1.5, 2], rt = [
+  { label: "50%", value: 0.5 },
+  { label: "100%", value: 1 },
+  { label: "200%", value: 2 },
+  { label: "300%", value: 3 },
+  { label: "400%", value: 4 }
+], ut = "_menu-container_rqjaq_1", dt = "_menu-options_rqjaq_6", ht = "_menu-heading_rqjaq_11", mt = "_check-icon_rqjaq_27", _t = "_menu-item-label_rqjaq_33", pt = "_menu-item_rqjaq_33", bt = "_menu-back-button_rqjaq_65", l = {
+  "menu-container": "_menu-container_rqjaq_1",
+  menuContainer: ut,
+  "menu-options": "_menu-options_rqjaq_6",
+  menuOptions: dt,
+  "menu-heading": "_menu-heading_rqjaq_11",
+  menuHeading: ht,
+  "check-icon": "_check-icon_rqjaq_27",
+  checkIcon: mt,
+  "menu-item-label": "_menu-item-label_rqjaq_33",
+  menuItemLabel: _t,
+  "menu-item": "_menu-item_rqjaq_33",
+  menuItem: pt,
+  "menu-back-button": "_menu-back-button_rqjaq_65",
+  menuBackButton: bt
+};
+function ft() {
+  const t = i(b), n = _e({
+    rates: x,
+    normalLabel: "1x"
+  });
+  return y(t == null ? void 0 : t.backToMain), t ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: l.menuBackButton,
+        onClick: t.backToMain,
+        children: [
+          /* @__PURE__ */ e(P, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Playback Speed" }),
+    /* @__PURE__ */ e("div", { role: "menu", className: l.menuOptions, children: n.map(({ value: o, label: c, select: s, selected: r }) => /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": r,
+        onClick: () => {
+          s(), t.backToMain(), t.toggle();
+        },
+        className: l.menuItem,
+        children: [
+          /* @__PURE__ */ e(Z, { className: l.checkIcon }),
+          /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: c })
+        ]
+      },
+      o
+    )) })
+  ] }) : null;
+}
+function gt() {
+  const t = i(b), n = m("textTrack"), o = d(() => {
+    t && t.setPage("captionLanguage");
+  }, [t]);
+  return t ? /* @__PURE__ */ e(
+    T,
+    {
+      label: "Language",
+      hint: (n == null ? void 0 : n.label) ?? "Off",
+      onClick: o
+    }
+  ) : null;
+}
+function kt() {
+  const t = i(p), n = i(b), o = d(() => {
+    n && n.setPage("captionFontSize");
+  }, [n]);
+  return n && t ? /* @__PURE__ */ e(
+    T,
+    {
+      label: "Caption Font Size",
+      hint: t.state.captionsFontSizeMultiplier.label,
+      onClick: o
+    }
+  ) : null;
+}
+const wt = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M 21.798373,3.342155 8.8843977,16.256145 2.2000774,9.571825 0,11.771895 8.8843977,20.657845 24,5.543795 Z", fill: "currentColor" }) }), Ct = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M 9.64706,12 4,17.64706 6.35293,20 12,14.35293 17.64706,20 20,17.64706 14.35293,12 20,6.35293 17.64706,4 12,9.64706 6.35293,4 4,6.35293 Z", fill: "currentColor" }) }), vt = "_switch-track_8rjat_1", yt = "_switch-thumb_8rjat_11", Lt = "_switch-icon_8rjat_25", Mt = "_switch-body_8rjat_31", Nt = "_switch-label_8rjat_68", N = {
+  "switch-track": "_switch-track_8rjat_1",
+  switchTrack: vt,
+  "switch-thumb": "_switch-thumb_8rjat_11",
+  switchThumb: yt,
+  "switch-icon": "_switch-icon_8rjat_25",
+  switchIcon: Lt,
+  "switch-body": "_switch-body_8rjat_31",
+  switchBody: Mt,
+  "switch-label": "_switch-label_8rjat_68",
+  switchLabel: Nt
+};
+function ne({
+  label: t,
+  checked: n = !1,
+  onClick: o
+}) {
+  const c = d(
+    (s) => {
+      (s.key === "Enter" || s.key === " ") && (o == null || o());
+    },
+    [o]
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: N.switchBody,
+      role: "menuitemcheckbox",
+      "aria-checked": n,
+      onClick: o,
+      onKeyDown: c,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ e("span", { className: N.switchLabel, children: t }),
+        /* @__PURE__ */ e("div", { className: N.switchTrack, children: /* @__PURE__ */ e("div", { className: N.switchThumb, children: n ? /* @__PURE__ */ e(wt, { className: N.switchIcon }) : /* @__PURE__ */ e(Ct, { className: N.switchIcon }) }) })
+      ]
+    }
+  );
+}
+function xt() {
+  const t = i(p);
+  return t ? /* @__PURE__ */ e(
+    ne,
+    {
+      label: "On Top",
+      onClick: t.toggleCaptionPositionOnTop,
+      checked: t.state.captionPositionOnTop
+    }
+  ) : null;
+}
+function It() {
+  const t = i(p);
+  return t ? /* @__PURE__ */ e(
+    ne,
+    {
+      label: "Invert Colors",
+      onClick: t.toggleCaptionsInvertColors,
+      checked: t.state.captionsInvertColors
+    }
+  ) : null;
+}
+function Bt() {
+  const t = i(b);
+  return y(t == null ? void 0 : t.backToMain), t ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: l.menuBackButton,
+        onClick: t.backToMain,
+        children: [
+          /* @__PURE__ */ e(P, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Captions" }),
+    /* @__PURE__ */ e(gt, {}),
+    /* @__PURE__ */ e(kt, {}),
+    /* @__PURE__ */ e(xt, {}),
+    /* @__PURE__ */ e(It, {})
+  ] }) : null;
+}
+function Ht() {
+  const t = i(b), n = pe();
+  return y(t == null ? void 0 : t.backToCaptions), t ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: l.menuBackButton,
+        onClick: t.backToCaptions,
+        children: [
+          /* @__PURE__ */ e(P, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Captions" }),
+    /* @__PURE__ */ e("div", { role: "menu", className: l.menuOptions, children: n.map(({ value: o, label: c, select: s, selected: r }) => /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": r,
+        onClick: () => {
+          s(), t.backToMain(), t.toggle();
+        },
+        className: l.menuItem,
+        children: [
+          /* @__PURE__ */ e(Z, { className: l.checkIcon }),
+          /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: c })
+        ]
+      },
+      o
+    )) })
+  ] }) : null;
+}
+function Vt() {
+  const t = i(p), n = i(b);
+  return y(n == null ? void 0 : n.backToCaptions), t && n ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: l.menuBackButton,
+        onClick: n.backToCaptions,
+        children: [
+          /* @__PURE__ */ e(P, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Captions" }),
+    /* @__PURE__ */ e("div", { role: "menu", className: l.menuOptions, children: rt.map((o) => /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": o.value === t.state.captionsFontSizeMultiplier.value,
+        onClick: () => {
+          t.setCaptionsFontSizeMultiplier(o), n.backToMain(), n.toggle();
+        },
+        className: l.menuItem,
+        children: [
+          /* @__PURE__ */ e(Z, { className: l.checkIcon }),
+          /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: o.label })
+        ]
+      },
+      o.label
+    )) })
+  ] }) : null;
+}
+function Tt() {
+  const t = i(b), n = be({ sort: "descending" }), o = m("autoQuality");
+  return y(t == null ? void 0 : t.backToMain), t ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: l.menuBackButton,
+        onClick: t.backToMain,
+        children: [
+          /* @__PURE__ */ e(P, {}),
+          /* @__PURE__ */ e("span", { children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Quality" }),
+    /* @__PURE__ */ e("div", { role: "menu", className: l.menuOptions, children: n.map(({ value: c, label: s, select: r, selected: u }) => /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": c === "auto" && o || u && !o,
+        onClick: () => {
+          r(), t.backToMain(), t.toggle();
+        },
+        className: l.menuItem,
+        children: [
+          /* @__PURE__ */ e(Z, { className: l.checkIcon }),
+          /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: s })
+        ]
+      },
+      c
+    )) })
+  ] }) : null;
+}
+const Pt = {
+  main: it,
+  speed: ft,
+  captions: Bt,
+  captionLanguage: Ht,
+  captionFontSize: Vt,
+  quality: Tt
+};
+function St() {
+  const [t, n] = v("main"), [o, c] = v(!1), s = d(() => {
+    c((I) => !I);
+  }, []), r = d((I) => {
+    n(I);
+  }, []), u = d(() => {
+    n("captions");
+  }, []), f = d(() => {
+    n("main");
+  }, []), g = Y(() => Pt[t], [t]), h = ye(null), { refs: C, floatingStyles: L, context: k } = Le({
+    open: o,
+    onOpenChange: (I) => {
+      c(I), f();
+    },
+    placement: "top-end",
+    whileElementsMounted: Me,
+    middleware: [
+      Ne(),
+      xe({
+        element: h
+      })
+    ]
+  }), ie = Ie(k, { escapeKey: !1 }), { getReferenceProps: re, getFloatingProps: ue } = Be([ie]);
+  return {
+    Page: g,
+    open: o,
+    toggle: s,
+    setPage: r,
+    backToCaptions: u,
+    backToMain: f,
+    arrowRef: h,
+    refs: C,
+    floatingStyles: L,
+    context: k,
+    getReferenceProps: re,
+    getFloatingProps: ue
+  };
+}
+const Rt = "_settings-menu_hxlsv_1", Ft = "_arrow_hxlsv_15", K = {
+  "settings-menu": "_settings-menu_hxlsv_1",
+  settingsMenu: Rt,
+  arrow: Ft
+};
+function Zt() {
+  const {
+    Page: t,
+    arrowRef: n,
+    backToCaptions: o,
+    backToMain: c,
+    context: s,
+    floatingStyles: r,
+    getFloatingProps: u,
+    getReferenceProps: f,
+    open: g,
+    refs: h,
+    setPage: C,
+    toggle: L
+  } = St(), k = i(p);
+  return /* @__PURE__ */ a(Q, { children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        ref: h.setReference,
+        type: "button",
+        className: "controls-button",
+        "aria-label": "Settings",
+        onClick: L,
+        "aria-expanded": g,
+        tabIndex: k != null && k.state.interactionsDisabled ? -1 : 0,
+        ...f(),
+        children: /* @__PURE__ */ e(We, { className: "controls-button-icon icon-rotate" })
+      }
+    ),
+    g && /* @__PURE__ */ e(He, { context: s, initialFocus: -1, modal: !1, children: /* @__PURE__ */ a(
+      "div",
+      {
+        className: K.settingsMenu,
+        ref: h.setFloating,
+        style: r,
+        ...u(),
+        children: [
+          /* @__PURE__ */ e(
+            b.Provider,
+            {
+              value: { setPage: C, backToMain: c, backToCaptions: o, toggle: L },
+              children: /* @__PURE__ */ e(t, {})
+            }
+          ),
+          /* @__PURE__ */ e(
+            Ve,
+            {
+              ref: n,
+              context: s,
+              className: K.arrow
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+function oe(t, n = 1e3) {
+  return function() {
+    const c = m("lastKeyboardAction"), [s, r] = v(!1), u = d(() => r(!1), []);
+    return G(() => {
+      r(!!c);
+      const f = setTimeout(u, n);
+      return () => clearTimeout(f);
+    }, [c, n]), s ? /* @__PURE__ */ e(t, {}) : null;
+  };
+}
+const q = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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 = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M 5,2 V 22 L 21,12.000665 Z", fill: "currentColor" }) }), ae = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), ce = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), se = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), jt = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), $t = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), Ot = "_feedback-overlay_v4lbu_1", qt = "_feedback-message_v4lbu_14", zt = "_feedback-icon_v4lbu_30", At = "_feedback-icon-animation_v4lbu_1", _ = {
+  "feedback-overlay": "_feedback-overlay_v4lbu_1",
+  feedbackOverlay: Ot,
+  "feedback-message": "_feedback-message_v4lbu_14",
+  feedbackMessage: qt,
+  "feedback-icon": "_feedback-icon_v4lbu_30",
+  feedbackIcon: zt,
+  "feedback-icon-animation": "_feedback-icon-animation_v4lbu_1",
+  feedbackIconAnimation: At
+};
+function Kt() {
+  var o;
+  const t = W();
+  switch ((o = t.lastKeyboardAction) == null ? void 0 : o.action) {
+    case "togglePaused":
+      return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: t.paused ? /* @__PURE__ */ e(q, {}) : /* @__PURE__ */ e(z, {}) });
+    case "toggleCaptions":
+    case "nextCaptionLanguage":
+    case "previousCaptionLanguage":
+      return t.hasCaptions ? /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: /* @__PURE__ */ e(te, {}) }) : null;
+    case "volumeUp":
+    case "volumeDown":
+    case "toggleMuted":
+      return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: t.muted || t.volume === 0 ? /* @__PURE__ */ e(ae, {}) : t.volume >= 0.5 ? /* @__PURE__ */ e(se, {}) : /* @__PURE__ */ e(ce, {}) });
+    case "seekForward":
+    case "seekForward10":
+      return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: /* @__PURE__ */ e(jt, { className: "right" }) });
+    case "seekBackward":
+    case "seekBackward10":
+      return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: /* @__PURE__ */ e($t, { className: "left" }) });
+    default:
+      return null;
+  }
+}
+function Dt() {
+  var o;
+  const t = W();
+  switch ((o = t.lastKeyboardAction) == null ? void 0 : o.action) {
+    case "toggleCaptions":
+    case "nextCaptionLanguage":
+    case "previousCaptionLanguage":
+      return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: t.textTrack ? `Caption Language: ${t.textTrack.label}` : "Captions: Off" });
+    case "volumeUp":
+    case "volumeDown":
+    case "toggleMuted":
+      return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: t.muted || t.volume === 0 ? "Muted" : `Volume: ${(t.volume * 100).toFixed(0)}%` });
+    case "increasePlaybackRate":
+    case "decreasePlaybackRate":
+    case "resetPlaybackRate":
+      return /* @__PURE__ */ a("div", { className: _.feedbackMessage, children: [
+        "Playback speed: ",
+        t.playbackRate,
+        "x"
+      ] });
+    case "seekForward":
+      return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek forward: 5 seconds" });
+    case "seekForward10":
+      return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek forward: 10 seconds" });
+    case "seekBackward":
+      return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek backward: 5 seconds" });
+    case "seekBackward10":
+      return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek backward: 10 seconds" });
+    default:
+      return null;
+  }
+}
+const Et = oe(Kt, 500), Ut = oe(Dt, 1e3);
+function Qt() {
+  return /* @__PURE__ */ a("div", { className: _.feedbackOverlay, children: [
+    /* @__PURE__ */ e(Et, {}),
+    /* @__PURE__ */ e(Ut, {})
+  ] });
+}
+const Wt = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), Jt = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), Xt = "_full-screen-button_1xm32_2", Gt = {
+  "full-screen-button": "_full-screen-button_1xm32_2",
+  fullScreenButton: Xt
+};
+function Yt() {
+  const t = m("fullscreen"), n = i(p);
+  return n && !n.hideFullScreen ? /* @__PURE__ */ e(
+    J,
+    {
+      tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
+      className: `controls-button ${Gt.fullScreenButton}`,
+      children: t ? /* @__PURE__ */ e(Jt, { className: "controls-button-icon" }) : /* @__PURE__ */ e(Wt, { className: "controls-button-icon" })
+    }
+  ) : null;
+}
+const en = "_gestures-container_1fn3b_1", tn = "_gesture_1fn3b_1", D = {
+  "gestures-container": "_gestures-container_1fn3b_1",
+  gesturesContainer: en,
+  gesture: tn
+};
+function nn() {
+  const t = O(), n = () => {
+    t.togglePaused();
+  };
+  return /* @__PURE__ */ e("div", { className: D.gesturesContainer, children: /* @__PURE__ */ e("div", { "aria-hidden": !0, className: D.gesture, onClick: n }) });
+}
+const on = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.76472 10.5294C5.05696 10.5294 5.29413 10.2922 5.29413 9.99999V8.94117C5.29413 8.64893 5.05696 8.41175 4.76472 8.41175H3.7059C3.41366 8.41175 3.17649 8.64893 3.17649 8.94117V9.99999C3.17649 10.2922 3.41366 10.5294 3.7059 10.5294H4.76472ZM11.1177 10.5294C11.4099 10.5294 11.6471 10.2922 11.6471 9.99999V8.94117C11.6471 8.64893 11.4099 8.41175 11.1177 8.41175H10.0588C9.76661 8.41175 9.52944 8.64893 9.52944 8.94117V9.99999C9.52944 10.2922 9.76661 10.5294 10.0588 10.5294H11.1177ZM14.8235 9.99999C14.8235 10.2922 14.5864 10.5294 14.2941 10.5294H13.2353C12.9431 10.5294 12.7059 10.2922 12.7059 9.99999V8.94117C12.7059 8.64893 12.9431 8.41175 13.2353 8.41175H14.2941C14.5864 8.41175 14.8235 8.64893 14.8235 8.94117V9.99999ZM14.8235 13.1765C14.8235 13.4687 14.5864 13.7059 14.2941 13.7059H13.2353C12.9431 13.7059 12.7059 13.4687 12.7059 13.1765V12.1176C12.7059 11.8254 12.9431 11.5882 13.2353 11.5882H14.2941C14.5864 11.5882 14.8235 11.8254 14.8235 12.1176V13.1765ZM11.6471 13.1765C11.6471 13.4687 11.4099 13.7059 11.1177 13.7059H6.88239C6.59015 13.7059 6.35297 13.4687 6.35297 13.1765V12.1176C6.35297 11.8254 6.59015 11.5882 6.88239 11.5882H11.1177C11.4099 11.5882 11.6471 11.8254 11.6471 12.1176V13.1765ZM5.29413 13.1765C5.29413 13.4687 5.05696 13.7059 4.76472 13.7059H3.7059C3.41366 13.7059 3.17649 13.4687 3.17649 13.1765V12.1176C3.17649 11.8254 3.41366 11.5882 3.7059 11.5882H4.76472C5.05696 11.5882 5.29413 11.8254 5.29413 12.1176V13.1765ZM6.88238 8.41175C6.59015 8.41175 6.35297 8.64893 6.35297 8.94117V9.99999C6.35297 10.2922 6.59015 10.5294 6.88238 10.5294H7.94121C8.23344 10.5294 8.47062 10.2922 8.47062 9.99999V8.94117C8.47062 8.64893 8.23344 8.41175 7.94121 8.41175H6.88238ZM16.4118 5.23529H9.57494C9.71471 4.42 10.1933 4.17118 10.8254 3.85565C11.6629 3.43741 12.7059 2.91541 12.7059 1H11.6471C11.6471 2.26106 11.1039 2.53212 10.3511 2.90906C9.59824 3.28494 8.68659 3.75506 8.50871 5.23529H1.58824C0.712588 5.23529 0 5.94788 0 6.82353V15.2941C0 16.1698 0.712588 16.8824 1.58824 16.8824H16.4118C17.2874 16.8824 18 16.1698 18 15.2941V6.82353C18 5.94788 17.2874 5.23529 16.4118 5.23529Z", fill: "currentColor" }) }), le = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, 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" }) }), an = "_keyboard-shortcuts-overlay_uwwbr_1", cn = "_keyboard-shortcuts-button_uwwbr_67", sn = "_close-button_uwwbr_91", $ = {
+  "keyboard-shortcuts-overlay": "_keyboard-shortcuts-overlay_uwwbr_1",
+  keyboardShortcutsOverlay: an,
+  "keyboard-shortcuts-button": "_keyboard-shortcuts-button_uwwbr_67",
+  keyboardShortcutsButton: cn,
+  "close-button": "_close-button_uwwbr_91",
+  closeButton: sn
+};
+function ln({ onClose: t }) {
+  y(t);
+  const n = (o) => {
+    o && o.focus();
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: $.keyboardShortcutsOverlay,
+      tabIndex: 0,
+      ref: n,
+      children: [
+        /* @__PURE__ */ a("header", { children: [
+          /* @__PURE__ */ e("h2", { children: "Keyboard Shortcuts" }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: $.closeButton,
+              onClick: t,
+              "aria-label": "Close",
+              children: /* @__PURE__ */ e(le, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("table", { children: [
+          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { children: [
+            /* @__PURE__ */ e("th", { children: "Action" }),
+            /* @__PURE__ */ e("th", { children: "Key" })
+          ] }) }),
+          /* @__PURE__ */ a("tbody", { children: [
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Seek back 5 sec" }),
+              /* @__PURE__ */ e("td", { children: "Left Arrow" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Seek forward 5 sec" }),
+              /* @__PURE__ */ e("td", { children: "Right Arrow" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Seek back 10 sec" }),
+              /* @__PURE__ */ e("td", { children: "J" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Seek forward 10 sec" }),
+              /* @__PURE__ */ e("td", { children: "L" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Increase volume by 5%" }),
+              /* @__PURE__ */ e("td", { children: "Up Arrow" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Decrease volume by 5%" }),
+              /* @__PURE__ */ e("td", { children: "Down Arrow" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Toggle mute" }),
+              /* @__PURE__ */ e("td", { children: "M" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Toggle play/pause" }),
+              /* @__PURE__ */ e("td", { children: "Space, K" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Enter full screen" }),
+              /* @__PURE__ */ e("td", { children: "F" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Exit full screen" }),
+              /* @__PURE__ */ e("td", { children: "Esc, F" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Toggle captions" }),
+              /* @__PURE__ */ e("td", { children: "C" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Next caption language" }),
+              /* @__PURE__ */ e("td", { children: "V" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Previous caption language" }),
+              /* @__PURE__ */ e("td", { children: "X" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Decrease playback speed" }),
+              /* @__PURE__ */ e("td", { children: "A" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Reset playback speed to 1x" }),
+              /* @__PURE__ */ e("td", { children: "S" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Increase playback speed" }),
+              /* @__PURE__ */ e("td", { children: "D" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Jump to start" }),
+              /* @__PURE__ */ e("td", { children: "0" })
+            ] }),
+            /* @__PURE__ */ a("tr", { children: [
+              /* @__PURE__ */ e("td", { children: "Jump to specific percentage (1-10%, 2-20%, etc)" }),
+              /* @__PURE__ */ e("td", { children: "1-9" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function rn() {
+  const [t, n] = v(!1), [o, c] = v(!1), [s, r] = v(!1), u = i(p), f = m("playing"), g = O(), h = d(() => {
+    n(!0), u == null || u.disableInteractions(), f && (r(!0), g.pause());
+  }, [f, g, u]), C = d(() => {
+    n(!1), c(!0), u == null || u.enableInteractions(), s && (r(!1), g.play());
+  }, [s, g, u]), L = d(
+    (k) => o && (k == null ? void 0 : k.focus()),
+    [o]
+  );
+  return t ? /* @__PURE__ */ e(ln, { onClose: C }) : /* @__PURE__ */ e(
+    "button",
+    {
+      ref: L,
+      "aria-label": "Keyboard shortcuts",
+      type: "button",
+      className: $.keyboardShortcutsButton,
+      onClick: h,
+      tabIndex: 0,
+      children: /* @__PURE__ */ e(on, {})
+    }
+  );
+}
+const un = "_play-pause-button_1owe7_1", dn = {
+  "play-pause-button": "_play-pause-button_1owe7_1",
+  playPauseButton: un
+};
+function hn() {
+  const t = fe(), n = i(p), o = m("paused");
+  return t ? /* @__PURE__ */ e(
+    ge,
+    {
+      tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
+      className: `${dn.playPauseButton} controls-button`,
+      onKeyDown: (c) => {
+        c.key === " " && (t == null || t.$state.lastKeyboardAction.set({
+          action: "togglePaused",
+          event: c.nativeEvent
+        }));
+      },
+      children: o ? /* @__PURE__ */ e(z, { className: "controls-button-icon" }) : /* @__PURE__ */ e(q, { className: "controls-button-icon" })
+    }
+  ) : null;
+}
+const mn = "_poster_195hi_1", _n = {
+  poster: mn
+};
+function pn({ src: t }) {
+  const n = m("source");
+  return n.type === "video/youtube" || n.type === "video/vimeo" ? null : /* @__PURE__ */ e(ke, { src: t, className: _n.poster });
+}
+const bn = "_small-layout-overlay_xbovu_1", fn = "_small-layout-button_xbovu_14", gn = "_small-layout-icon-play_xbovu_24", kn = "_small-layout-icon-pause_xbovu_30", wn = "_full-screen-close-icon_xbovu_36", Cn = "_fade-out_xbovu_1", H = {
+  "small-layout-overlay": "_small-layout-overlay_xbovu_1",
+  smallLayoutOverlay: bn,
+  "small-layout-button": "_small-layout-button_xbovu_14",
+  smallLayoutButton: fn,
+  "small-layout-icon-play": "_small-layout-icon-play_xbovu_24",
+  smallLayoutIconPlay: gn,
+  "small-layout-icon-pause": "_small-layout-icon-pause_xbovu_30",
+  smallLayoutIconPause: kn,
+  "full-screen-close-icon": "_full-screen-close-icon_xbovu_36",
+  fullScreenCloseIcon: wn,
+  "fade-out": "_fade-out_xbovu_1",
+  fadeOut: Cn
+};
+function vn() {
+  return /* @__PURE__ */ a("div", { className: H.smallLayoutOverlay, children: [
+    /* @__PURE__ */ e(J, { className: H.fullScreenCloseIcon, children: /* @__PURE__ */ e(le, {}) }),
+    /* @__PURE__ */ a("i", { className: H.smallLayoutButton, children: [
+      /* @__PURE__ */ e(z, { className: H.smallLayoutIconPlay }),
+      /* @__PURE__ */ e(q, { className: H.smallLayoutIconPause })
+    ] })
+  ] });
+}
+const yn = "_time-indicator_1wsym_1", Ln = {
+  "time-indicator": "_time-indicator_1wsym_1",
+  timeIndicator: yn
+};
+function Mn() {
+  return /* @__PURE__ */ a("div", { className: Ln.timeIndicator, children: [
+    /* @__PURE__ */ e(A, { type: "current" }),
+    "/",
+    /* @__PURE__ */ e(A, { type: "duration" })
+  ] });
+}
+const Nn = "_timeline-wrapper_j9z56_1", xn = "_track_j9z56_8", In = "_thumb_j9z56_19", Bn = "_root_j9z56_33", Hn = "_track-inner_j9z56_63", Vn = "_progress_j9z56_69", Tn = "_track-fill_j9z56_75", w = {
+  "timeline-wrapper": "_timeline-wrapper_j9z56_1",
+  timelineWrapper: Nn,
+  track: xn,
+  thumb: In,
+  root: Bn,
+  "track-inner": "_track-inner_j9z56_63",
+  trackInner: Hn,
+  progress: Vn,
+  "track-fill": "_track-fill_j9z56_75",
+  trackFill: Tn
+}, Pn = `${w.progress} ${w.trackInner}`, Sn = `${w.trackFill} ${w.trackInner}`;
+function E({ className: t }) {
+  const n = i(p), o = t ? `${w.timelineWrapper} ${t}` : w.timelineWrapper;
+  return /* @__PURE__ */ e("div", { className: o, children: /* @__PURE__ */ a(
+    B.Root,
+    {
+      className: w.root,
+      tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ a(B.Track, { className: w.track, children: [
+          /* @__PURE__ */ e(B.Progress, { className: Pn }),
+          /* @__PURE__ */ e(B.TrackFill, { className: Sn })
+        ] }),
+        /* @__PURE__ */ e(B.Thumb, { className: w.thumb })
+      ]
+    }
+  ) });
+}
+const Rn = "_wrapper_ulntk_1", Fn = "_track_ulntk_6", Zn = "_thumb_ulntk_18", jn = "_track-fill_ulntk_32", $n = "_root_ulntk_50", V = {
+  wrapper: Rn,
+  track: Fn,
+  thumb: Zn,
+  "track-fill": "_track-fill_ulntk_32",
+  trackFill: jn,
+  root: $n
+};
+function On() {
+  const t = m("volume"), n = m("muted"), o = i(p);
+  return /* @__PURE__ */ a("div", { className: V.wrapper, children: [
+    /* @__PURE__ */ e(
+      we,
+      {
+        tabIndex: o != null && o.state.interactionsDisabled ? -1 : 0,
+        className: "controls-button",
+        children: n || t == 0 ? /* @__PURE__ */ e(ae, { className: "controls-button-icon" }) : t < 0.5 ? /* @__PURE__ */ e(ce, { className: "controls-button-icon" }) : /* @__PURE__ */ e(se, { className: "controls-button-icon" })
+      }
+    ),
+    /* @__PURE__ */ a(
+      S.Root,
+      {
+        className: V.root,
+        tabIndex: o != null && o.state.interactionsDisabled ? -1 : 0,
+        children: [
+          /* @__PURE__ */ e(S.Track, { className: V.track, children: /* @__PURE__ */ e(S.TrackFill, { className: V.trackFill }) }),
+          /* @__PURE__ */ e(S.Thumb, { className: V.thumb })
+        ]
+      }
+    )
+  ] });
+}
+const qn = {}, U = {
+  togglePaused: ["Space", "Enter", "k"],
+  seekForward: ["ArrowRight"],
+  seekBackward: ["ArrowLeft"],
+  volumeUp: ["ArrowUp"],
+  volumeDown: ["ArrowDown"],
+  toggleFullscreen: ["f"],
+  toggleMuted: ["m"],
+  toggleCaptions: ["c"],
+  nextCaptionLanguage: {
+    keys: ["v"],
+    onKeyUp({ event: t, player: n, remote: o }) {
+      const c = n.textTracks.selectedIndex, s = c + 1;
+      o.changeTextTrackMode(c, "hidden"), o.changeTextTrackMode(
+        s >= n.textTracks.length ? 0 : s,
+        "showing"
+      ), n.$state.lastKeyboardAction.set({
+        action: "nextCaptionLanguage",
+        event: t
+      });
+    }
+  },
+  previousCaptionLanguage: {
+    keys: ["x"],
+    onKeyUp({ event: t, player: n, remote: o }) {
+      const c = n.textTracks.selectedIndex, s = c - 1;
+      o.changeTextTrackMode(c, "hidden"), o.changeTextTrackMode(
+        s < 0 ? n.textTracks.length - 1 : s,
+        "showing"
+      ), n.$state.lastKeyboardAction.set({
+        action: "previousCaptionLanguage",
+        event: t
+      });
+    }
+  },
+  decreasePlaybackRate: {
+    keys: ["a"],
+    onKeyUp({ event: t, player: n, remote: o }) {
+      const s = x.indexOf(n.playbackRate) - 1;
+      s >= 0 && (o.changePlaybackRate(x[s]), n.$state.lastKeyboardAction.set({
+        action: "decreasePlaybackRate",
+        event: t
+      }));
+    }
+  },
+  increasePlaybackRate: {
+    keys: ["d"],
+    onKeyUp({ event: t, player: n, remote: o }) {
+      const s = x.indexOf(n.playbackRate) + 1;
+      s < x.length && (o.changePlaybackRate(x[s]), n.$state.lastKeyboardAction.set({
+        action: "increasePlaybackRate",
+        event: t
+      }));
+    }
+  },
+  resetPlaybackRate: {
+    keys: ["s"],
+    onKeyUp({ event: t, player: n, remote: o }) {
+      o.changePlaybackRate(1), n.$state.lastKeyboardAction.set({
+        action: "resetPlaybackRate",
+        event: t
+      });
+    }
+  },
+  seekForward10Seconds: {
+    keys: ["l"],
+    onKeyUp({ event: t, player: n, remote: o }) {
+      o.seek(n.currentTime + 10), n.$state.lastKeyboardAction.set({
+        action: "seekForward10",
+        event: t
+      });
+    }
+  },
+  seekBackward10Seconds: {
+    keys: ["j"],
+    onKeyUp({ event: t, player: n, remote: o }) {
+      o.seek(n.currentTime - 10), n.$state.lastKeyboardAction.set({
+        action: "seekBackward10",
+        event: t
+      });
+    }
+  }
+};
+function zn({ hideFullScreen: t }) {
+  const [n, o] = v({
+    captionsFontSizeMultiplier: { label: "100%", value: 1 },
+    captionPositionOnTop: !1,
+    captionsInvertColors: !1,
+    interactionsDisabled: !1
+  }), c = d(
+    (h) => {
+      o((C) => ({
+        ...C,
+        captionsFontSizeMultiplier: h
+      }));
+    },
+    []
+  ), s = d(() => {
+    o((h) => ({
+      ...h,
+      captionPositionOnTop: !h.captionPositionOnTop
+    }));
+  }, []), r = d(() => {
+    o((h) => ({
+      ...h,
+      captionsInvertColors: !h.captionsInvertColors
+    }));
+  }, []), u = d(() => {
+    o((h) => ({
+      ...h,
+      interactionsDisabled: !1
+    }));
+  }, []), f = d(() => {
+    o((h) => ({
+      ...h,
+      interactionsDisabled: !0
+    }));
+  }, []), g = Y(() => t ? {
+    ...U,
+    toggleFullscreen: []
+  } : U, [t]);
+  return {
+    contextValue: {
+      state: n,
+      setCaptionsFontSizeMultiplier: c,
+      toggleCaptionPositionOnTop: s,
+      toggleCaptionsInvertColors: r,
+      enableInteractions: u,
+      disableInteractions: f,
+      hideFullScreen: t
+    },
+    shortcuts: g
+  };
+}
+function Un({
+  title: t,
+  src: n,
+  captions: o = [],
+  thumbnail: c,
+  hideFullScreen: s = !1
+}) {
+  const { contextValue: r, shortcuts: u } = zn({ hideFullScreen: s });
+  return /* @__PURE__ */ e(p.Provider, { value: r, children: /* @__PURE__ */ a(
+    Ce,
+    {
+      title: t,
+      src: n,
+      keyShortcuts: u,
+      playsInline: !0,
+      keyDisabled: r.state.interactionsDisabled,
+      children: [
+        /* @__PURE__ */ e(rn, {}),
+        /* @__PURE__ */ a(ve, { className: qn.mediaProvider, children: [
+          /* @__PURE__ */ e(Ze, {}),
+          /* @__PURE__ */ e(pn, { src: c }),
+          /* @__PURE__ */ e(qe, { captions: o }),
+          /* @__PURE__ */ e(Qt, {}),
+          /* @__PURE__ */ e(vn, {}),
+          /* @__PURE__ */ e(nn, {})
+        ] }),
+        /* @__PURE__ */ e(Qe, {})
+      ]
+    }
+  ) });
+}
 export {
-  a as CAPTION_FONT_SIZE_MULTIPLIERS,
-  A as PLAYBACK_RATES,
-  E as StudioPlayer
+  rt as CAPTION_FONT_SIZE_MULTIPLIERS,
+  x as PLAYBACK_RATES,
+  Un as StudioPlayer
 };