@instructure/studio-player 0.1.8 → 0.2.0

package/dist/studio-player.es.js

@@ -1,18 +1,18 @@
-import './index.css';var be = Object.defineProperty;
-var ve = (e, n, o) => n in e ? be(e, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[n] = o;
-var L = (e, n, o) => ve(e, typeof n != "symbol" ? n + "" : n, o);
-import { jsx as t, jsxs as s, Fragment as oe } from "react/jsx-runtime";
-import { createContext as ae, useContext as u, useCallback as m, useEffect as $, useState as T, useMemo as K, useRef as Ce } from "react";
-import { Spinner as j, useMediaState as h, isTrackCaptionKind as ke, useMediaRemote as z, Track as we, Captions as ye, useMediaPlayer as se, usePlaybackRateOptions as Le, useCaptionOptions as Ne, useVideoQualityOptions as Te, useMediaStore as ce, FullscreenButton as ie, PlayButton as Me, Poster as Ie, Time as Q, TimeSlider as H, MuteButton as Se, VolumeSlider as O, MediaPlayer as Pe, MediaProvider as Be } from "@vidstack/react";
-import { initReactI18next as Re, useTranslation as p } from "react-i18next";
-import He from "i18next";
-import Ve from "i18next-resources-to-backend";
-import { useFloating as xe, autoUpdate as Ae, flip as Ee, arrow as Oe, useDismiss as Fe, useInteractions as Ze, FloatingFocusManager as Ke, FloatingArrow as $e } from "@floating-ui/react";
-const De = (e, n, o) => {
-  const a = e[n];
-  return a ? typeof a == "function" ? a() : Promise.resolve(a) : new Promise((c, i) => {
+import './index.css';var Re = Object.defineProperty;
+var Ae = (e, n, o) => n in e ? Re(e, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[n] = o;
+var N = (e, n, o) => Ae(e, typeof n != "symbol" ? n + "" : n, o);
+import { jsx as t, jsxs as s, Fragment as J } from "react/jsx-runtime";
+import { createContext as X, useContext as y, useState as P, useCallback as p, useEffect as V, useMemo as F, useRef as he } from "react";
+import { useMediaPlayer as ee, Spinner as G, useMediaRemote as Z, useMediaState as v, isTrackCaptionKind as Ee, Track as Oe, Captions as Fe, usePlaybackRateOptions as Ze, useCaptionOptions as $e, useVideoQualityOptions as Ke, useMediaStore as _e, FullscreenButton as pe, PlayButton as De, Poster as ze, Time as ae, TimeSlider as A, MuteButton as je, VolumeSlider as j, MediaPlayer as Ue, MediaProvider as qe } from "@vidstack/react";
+import { initReactI18next as We, useTranslation as C } from "react-i18next";
+import Ge from "i18next";
+import Qe from "i18next-resources-to-backend";
+import { useFloating as ve, autoUpdate as fe, flip as Ce, arrow as ge, useDismiss as be, useInteractions as ke, FloatingFocusManager as Ye, FloatingArrow as ye, shift as Je, offset as Xe } from "@floating-ui/react";
+const et = (e, n, o) => {
+  const i = e[n];
+  return i ? typeof i == "function" ? i() : Promise.resolve(i) : new Promise((a, c) => {
     (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
-      i.bind(
+      c.bind(
         null,
         new Error(
           "Unknown variable dynamic import: " + n + (n.split("/").length !== o ? ". Note that variables only represent file names one level deep." : "")
@@ -21,9 +21,9 @@ const De = (e, n, o) => {
     );
   });
 };
-He.use(Re).use(
-  Ve(
-    (e) => De(/* @__PURE__ */ Object.assign({ "./locales/en.json": () => import("./en-CDw-Fu7s.js"), "./locales/kl.json": () => import("./kl-fK-9jtTT.js") }), `./locales/${e}.json`, 3)
+Ge.use(We).use(
+  Qe(
+    (e) => et(/* @__PURE__ */ Object.assign({ "./locales/en.json": () => import("./en-DFSgRHa0.js"), "./locales/kl.json": () => import("./kl-dmbsz-te.js") }), `./locales/${e}.json`, 3)
   )
 ).init({
   fallbackLng: "en",
@@ -34,242 +34,329 @@ He.use(Re).use(
     escapeValue: !1
   }
 });
-const je = "_media-buffering-indicator_1fwjr_1", Ue = "_media-buffering-spinner_1fwjr_17", ze = "_media-buffering-spin_1fwjr_17", Ge = "_media-buffering-track_1fwjr_22", We = "_media-buffering-track-fill_1fwjr_27", F = {
+const we = X(null);
+function tt({
+  children: e,
+  contextValue: n
+}) {
+  return /* @__PURE__ */ t(we.Provider, { value: n, children: e });
+}
+function g() {
+  const e = y(we);
+  if (!e)
+    throw new Error(
+      "useStudioPlayerContext must be used within a StudioPlayerContextProvider"
+    );
+  return e;
+}
+const Le = X(null);
+function nt({
+  hideFullScreen: e,
+  comments: n,
+  annotations: o,
+  quizMarkers: i,
+  interactive: a,
+  onAnnotationClick: c,
+  onQuizMarkerClick: l,
+  onInteractivePinClick: u,
+  interactiveMenuElements: _,
+  children: f
+}) {
+  const b = {
+    hideFullScreen: e,
+    comments: n,
+    annotations: o,
+    quizMarkers: i,
+    interactive: a,
+    onAnnotationClick: c,
+    onQuizMarkerClick: l,
+    onInteractivePinClick: u,
+    interactiveMenuElements: _,
+    hasComments: n.length > 0,
+    hasAnnotations: o.length > 0,
+    hasQuizmarkers: i.length > 0
+  };
+  return /* @__PURE__ */ t(Le.Provider, { value: b, children: f });
+}
+function B() {
+  const e = y(Le);
+  if (!e)
+    throw new Error(
+      "useStudioPlayerPropsContext must be used within a StudioPlayerPropsContextProvider"
+    );
+  return e;
+}
+const ot = "_annotation-overlay_1kxzn_1", it = {
+  "annotation-overlay": "_annotation-overlay_1kxzn_1",
+  annotationOverlay: ot
+}, se = 0.25, at = (e, n) => {
+  let o = !1;
+  return (i) => {
+    const a = i.detail.currentTime;
+    a >= e.time && a < e.time + se && !o && (o = !0, n(e)), (a < e.time || a >= e.time + se) && o && (o = !1);
+  };
+};
+function st({ annotations: e }) {
+  const n = ee(), o = g(), [i, a] = P(
+    null
+  ), c = p(
+    (u) => {
+      n == null || n.pause(), o.disableInteractions(), a(u);
+    },
+    [n, o]
+  ), l = () => {
+    n == null || n.play(), a(null), o.enableInteractions();
+  };
+  return V(() => {
+    if (!n)
+      return;
+    const u = [];
+    for (const _ of e) {
+      const f = at(_, c);
+      n.addEventListener("time-update", f), u.push(f);
+    }
+    return () => {
+      for (const _ of u)
+        n.removeEventListener("time-update", _);
+    };
+  }, [n, e]), i ? /* @__PURE__ */ t("div", { className: it.annotationOverlay, children: i.render(l) }) : null;
+}
+const ct = "_media-buffering-indicator_1fwjr_1", lt = "_media-buffering-spinner_1fwjr_17", rt = "_media-buffering-spin_1fwjr_17", ut = "_media-buffering-track_1fwjr_22", dt = "_media-buffering-track-fill_1fwjr_27", U = {
   "media-buffering-indicator": "_media-buffering-indicator_1fwjr_1",
-  mediaBufferingIndicator: je,
+  mediaBufferingIndicator: ct,
   "media-buffering-spinner": "_media-buffering-spinner_1fwjr_17",
-  mediaBufferingSpinner: Ue,
+  mediaBufferingSpinner: lt,
   "media-buffering-spin": "_media-buffering-spin_1fwjr_17",
-  mediaBufferingSpin: ze,
+  mediaBufferingSpin: rt,
   "media-buffering-track": "_media-buffering-track_1fwjr_22",
-  mediaBufferingTrack: Ge,
+  mediaBufferingTrack: ut,
   "media-buffering-track-fill": "_media-buffering-track-fill_1fwjr_27",
-  mediaBufferingTrackFill: We
+  mediaBufferingTrackFill: dt
 };
-function qe() {
-  return /* @__PURE__ */ t("div", { className: F.mediaBufferingIndicator, children: /* @__PURE__ */ s(j.Root, { className: F.mediaBufferingSpinner, size: 96, children: [
-    /* @__PURE__ */ t(j.Track, { className: F.mediaBufferingTrack, width: 8 }),
+function mt() {
+  return /* @__PURE__ */ t("div", { className: U.mediaBufferingIndicator, children: /* @__PURE__ */ s(G.Root, { className: U.mediaBufferingSpinner, size: 96, children: [
+    /* @__PURE__ */ t(G.Track, { className: U.mediaBufferingTrack, width: 8 }),
     /* @__PURE__ */ t(
-      j.TrackFill,
+      G.TrackFill,
       {
-        className: F.mediaBufferingTrackFill,
+        className: U.mediaBufferingTrackFill,
         width: 8
       }
     )
   ] }) });
 }
-const f = ae(null), le = (e) => /* @__PURE__ */ s("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: [
+const Pe = (e) => /* @__PURE__ */ s("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: [
   /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_149_104418", children: /* @__PURE__ */ t("rect", { width: 24, height: 24, fill: "white" }) }) }),
   /* @__PURE__ */ t("g", { clipPath: "url(#clip0_149_104418)", children: /* @__PURE__ */ t("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" }) })
-] }), re = (e) => /* @__PURE__ */ s("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...e, children: [
+] }), Ne = (e) => /* @__PURE__ */ s("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...e, children: [
   /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_149_104406", children: /* @__PURE__ */ t("rect", { width: 24, height: 24, fill: "white" }) }) }),
   /* @__PURE__ */ t("g", { clipPath: "url(#clip0_149_104406)", children: /* @__PURE__ */ t("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 Qe() {
-  const e = h("hasCaptions"), n = h("textTrack"), o = n && ke(n), a = z(), c = u(f), i = m(
+function ht() {
+  const e = Z(), n = v("textTrack"), o = v("hasCaptions"), i = n && Ee(n), a = g(), c = p(
     (l) => {
-      a.toggleCaptions(l.nativeEvent);
+      e.toggleCaptions(l.nativeEvent);
     },
-    [a]
+    [e]
   );
-  return e ? /* @__PURE__ */ t(
+  return o ? /* @__PURE__ */ t(
     "button",
     {
       type: "button",
       className: "controls-button",
-      onClick: i,
+      onClick: c,
       "aria-label": "Captions",
-      tabIndex: c != null && c.state.interactionsDisabled ? -1 : 0,
-      children: o ? /* @__PURE__ */ t(re, { className: "controls-button-icon" }) : /* @__PURE__ */ t(le, { className: "controls-button-icon" })
+      tabIndex: a.state.interactionsDisabled ? -1 : 0,
+      children: i ? /* @__PURE__ */ t(Ne, { className: "controls-button-icon" }) : /* @__PURE__ */ t(Pe, { className: "controls-button-icon" })
     }
   ) : null;
 }
-const Ye = "_captions_13epz_1", Je = {
-  captions: Ye
+const _t = "_captions_13epz_1", pt = {
+  captions: _t
 };
-function Xe({ captions: e }) {
-  const n = h("hasCaptions"), o = u(f);
-  return /* @__PURE__ */ s(oe, { children: [
-    e.map((a) => /* @__PURE__ */ t(
-      we,
+function vt({ captions: e }) {
+  const n = v("hasCaptions"), o = g();
+  return /* @__PURE__ */ s(J, { children: [
+    e.map((i) => /* @__PURE__ */ t(
+      Oe,
       {
         kind: "subtitles",
-        type: a.type,
-        language: a.language,
-        label: a.label,
-        src: a.src
+        type: i.type,
+        language: i.language,
+        label: i.label,
+        src: i.src
       },
-      a.label
+      i.label
     )),
     n ? /* @__PURE__ */ t(
       "div",
       {
         style: {
           display: "contents",
-          "--captions-font-size-multiplier": (o == null ? void 0 : o.state.captionsFontSizeMultiplier) ?? 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)"
+          "--captions-font-size-multiplier": o.state.captionsFontSizeMultiplier ?? 1,
+          "--captions-flex-direction": o.state.captionPositionOnTop ? "column" : "column-reverse",
+          "--captions-color": o.state.captionsInvertColors ? "rgba(22, 22, 22)" : "white",
+          "--captions-background-color": o.state.captionsInvertColors ? "rgba(255, 255, 255, 0.75)" : "rgba(22, 22, 22, 0.75)"
         },
-        children: /* @__PURE__ */ t(ye, { className: Je.captions })
+        children: /* @__PURE__ */ t(Fe, { className: pt.captions })
       }
     ) : null
   ] });
 }
-const P = [0.5, 0.75, 1, 1.25, 1.5, 2], et = [0.5, 1, 2, 3, 4], ue = 5, tt = (e) => {
-  const [, n] = T({});
-  return K(() => {
+const S = [0.5, 0.75, 1, 1.25, 1.5, 2], ft = [0.5, 1, 2, 3, 4], xe = 5, Ct = (e) => {
+  const [, n] = P({});
+  return F(() => {
     let o = [];
     return {
-      add(a) {
-        o.length >= e && o.shift(), o.push(a), n({});
+      add(i) {
+        o.length >= e && o.shift(), o.push(i), n({});
       },
-      remove(a) {
-        o = o.filter((c) => c !== a), n({});
+      remove(i) {
+        o = o.filter((a) => a !== i), n({});
       },
-      map(a) {
-        return o.map(a);
+      map(i) {
+        return o.map(i);
       }
     };
   }, []);
-}, nt = (e, n, o) => {
-  let a = !1;
-  return (c) => {
-    const i = c.detail.currentTime;
-    i >= e.timestamp && i < e.timestamp + n && !a && (o.add(e), a = !0), (i < e.timestamp || i >= e.timestamp + n) && a && (o.remove(e), a = !1);
+}, gt = (e, n, o) => {
+  let i = !1;
+  return (a) => {
+    const c = a.detail.currentTime;
+    c >= e.timestamp && c < e.timestamp + n && !i && (o.add(e), i = !0), (c < e.timestamp || c >= e.timestamp + n) && i && (o.remove(e), i = !1);
   };
-}, ot = (e, n = 5) => {
-  const o = se(), a = tt(n);
-  return $(() => {
+}, bt = (e, n = 5) => {
+  const o = ee(), i = Ct(n);
+  return V(() => {
     if (!o)
       return;
-    const c = [];
-    for (const i of e) {
-      const l = nt(i, ue, a);
-      c.push(l), o.addEventListener("time-update", l);
+    const a = [];
+    for (const c of e) {
+      const l = gt(c, xe, i);
+      a.push(l), o.addEventListener("time-update", l);
     }
     return () => {
-      for (const i of c)
-        o.removeEventListener("time-update", i);
+      for (const c of a)
+        o.removeEventListener("time-update", c);
     };
-  }, [o, a, e]), a;
-}, at = "_comments-overlay_agbjl_1", st = "_comments-container_agbjl_9", ct = "_comment_agbjl_1", it = "_comment-text_agbjl_44", lt = "_comment-author-avatar_agbjl_67", rt = "_comment-author-name_agbjl_86", B = {
+  }, [o, i, e]), i;
+}, kt = "_comments-overlay_agbjl_1", yt = "_comments-container_agbjl_9", wt = "_comment_agbjl_1", Lt = "_comment-text_agbjl_44", Pt = "_comment-author-avatar_agbjl_67", Nt = "_comment-author-name_agbjl_86", H = {
   "comments-overlay": "_comments-overlay_agbjl_1",
-  commentsOverlay: at,
+  commentsOverlay: kt,
   "comments-container": "_comments-container_agbjl_9",
-  commentsContainer: st,
-  comment: ct,
+  commentsContainer: yt,
+  comment: wt,
   "comment-text": "_comment-text_agbjl_44",
-  commentText: it,
+  commentText: Lt,
   "comment-author-avatar": "_comment-author-avatar_agbjl_67",
-  commentAuthorAvatar: lt,
+  commentAuthorAvatar: Pt,
   "comment-author-name": "_comment-author-name_agbjl_86",
-  commentAuthorName: rt
+  commentAuthorName: Nt
 };
-function ut({ comment: e }) {
-  return /* @__PURE__ */ s("div", { className: B.comment, onClick: e.onClick, children: [
+function xt({ comment: e }) {
+  return /* @__PURE__ */ s("div", { className: H.comment, onClick: e.onClick, children: [
     /* @__PURE__ */ t(
       "img",
       {
-        className: B.commentAuthorAvatar,
+        className: H.commentAuthorAvatar,
         src: e.user.avatar,
         alt: e.user.name
       }
     ),
-    /* @__PURE__ */ t("span", { className: B.commentText, children: e.text }),
-    /* @__PURE__ */ t("span", { className: B.commentAuthorName, children: e.user.name })
+    /* @__PURE__ */ t("span", { className: H.commentText, children: e.text }),
+    /* @__PURE__ */ t("span", { className: H.commentAuthorName, children: e.user.name })
   ] });
 }
-const Y = 5;
-function dt() {
-  const e = u(f), n = (e == null ? void 0 : e.comments) || [], o = ot(n, Y), a = !!h("textTrack"), c = o.map((i) => /* @__PURE__ */ t(ut, { comment: i }, i.id));
-  return n.length > 0 && (e != null && e.state.commentsEnabled) ? /* @__PURE__ */ t(
+const ce = 5;
+function Mt({ comments: e }) {
+  const n = g(), o = bt(e, ce), i = !!v("textTrack"), a = o.map((c) => /* @__PURE__ */ t(xt, { comment: c }, c.id));
+  return e.length > 0 && n.state.commentsEnabled ? /* @__PURE__ */ t(
     "div",
     {
-      className: B.commentsOverlay,
+      className: H.commentsOverlay,
       style: {
-        flexDirection: e != null && e.state.captionPositionOnTop && a ? "column-reverse" : "column"
+        flexDirection: n.state.captionPositionOnTop && i ? "column-reverse" : "column"
       },
-      children: /* @__PURE__ */ t("div", { className: B.commentsContainer, children: a ? c.slice(-(Y - 1)) : c })
+      children: /* @__PURE__ */ t("div", { className: H.commentsContainer, children: i ? a.slice(-(ce - 1)) : a })
     }
   ) : null;
 }
-const mt = "_root_zdwuq_1", ht = "_left-controls_zdwuq_27", _t = "_right-controls_zdwuq_33", pt = "_indicators_zdwuq_39", gt = "_normal-timeline_zdwuq_48", ft = "_compact-timeline_zdwuq_54", S = {
-  root: mt,
-  "left-controls": "_left-controls_zdwuq_27",
-  leftControls: ht,
-  "right-controls": "_right-controls_zdwuq_33",
-  rightControls: _t,
-  indicators: pt,
-  "normal-timeline": "_normal-timeline_zdwuq_48",
-  normalTimeline: gt,
-  "compact-timeline": "_compact-timeline_zdwuq_54",
-  compactTimeline: ft
+const Tt = "_root_1mh1r_1", It = "_left-controls_1mh1r_27", St = "_right-controls_1mh1r_33", Ht = "_indicators_1mh1r_39", Vt = "_normal-timeline_1mh1r_48", Bt = "_compact-timeline_1mh1r_54", I = {
+  root: Tt,
+  "left-controls": "_left-controls_1mh1r_27",
+  leftControls: It,
+  "right-controls": "_right-controls_1mh1r_33",
+  rightControls: St,
+  indicators: Ht,
+  "normal-timeline": "_normal-timeline_1mh1r_48",
+  normalTimeline: Vt,
+  "compact-timeline": "_compact-timeline_1mh1r_54",
+  compactTimeline: Bt
 };
-function bt() {
-  return /* @__PURE__ */ s("div", { className: S.root, children: [
-    /* @__PURE__ */ t(ee, { className: S.normalTimeline }),
-    /* @__PURE__ */ s("div", { className: S.leftControls, children: [
-      /* @__PURE__ */ t(On, {}),
-      /* @__PURE__ */ t(go, {})
+function Rt() {
+  return /* @__PURE__ */ s("div", { className: I.root, children: [
+    /* @__PURE__ */ t(ue, { className: I.normalTimeline }),
+    /* @__PURE__ */ s("div", { className: I.leftControls, children: [
+      /* @__PURE__ */ t(to, {}),
+      /* @__PURE__ */ t(ai, {})
     ] }),
-    /* @__PURE__ */ t("div", { className: S.indicators, children: /* @__PURE__ */ t(Yn, {}) }),
-    /* @__PURE__ */ t(ee, { className: S.compactTimeline }),
-    /* @__PURE__ */ s("div", { className: S.rightControls, children: [
-      /* @__PURE__ */ t(Qe, {}),
-      /* @__PURE__ */ t(un, {}),
-      /* @__PURE__ */ t(Tn, {})
+    /* @__PURE__ */ t("div", { className: I.indicators, children: /* @__PURE__ */ t(po, {}) }),
+    /* @__PURE__ */ t(ue, { className: I.compactTimeline }),
+    /* @__PURE__ */ s("div", { className: I.rightControls, children: [
+      /* @__PURE__ */ t(ht, {}),
+      /* @__PURE__ */ t(xn, {}),
+      /* @__PURE__ */ t(Dn, {})
     ] })
   ] });
 }
-const vt = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), C = ae(null), Ct = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 3.03704L7.03704 2L14.037 9L7.03704 16L6 14.963L11.963 9L6 3.03704Z", fill: "currentColor" }) }), kt = "_menu-hint_k49ve_1", wt = "_menu-button_k49ve_5", yt = "_menu-label_k49ve_37", Lt = "_menu-icon_k49ve_42", Z = {
+const w = X(null), At = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 3.03704L7.03704 2L14.037 9L7.03704 16L6 14.963L11.963 9L6 3.03704Z", fill: "currentColor" }) }), Et = "_menu-hint_k49ve_1", Ot = "_menu-button_k49ve_5", Ft = "_menu-label_k49ve_37", Zt = "_menu-icon_k49ve_42", q = {
   "menu-hint": "_menu-hint_k49ve_1",
-  menuHint: kt,
+  menuHint: Et,
   "menu-button": "_menu-button_k49ve_5",
-  menuButton: wt,
+  menuButton: Ot,
   "menu-label": "_menu-label_k49ve_37",
-  menuLabel: yt,
+  menuLabel: Ft,
   "menu-icon": "_menu-icon_k49ve_42",
-  menuIcon: Lt
+  menuIcon: Zt
 };
-function A({ label: e, hint: n, onClick: o, Icon: a }) {
-  return /* @__PURE__ */ s("button", { type: "button", className: Z.menuButton, onClick: o, children: [
-    a && /* @__PURE__ */ t(a, { className: Z.menuIcon }),
-    /* @__PURE__ */ t("span", { className: Z.menuLabel, children: e }),
-    /* @__PURE__ */ t("span", { className: Z.menuHint, children: n }),
-    /* @__PURE__ */ t(Ct, {})
+function $({ label: e, hint: n, onClick: o, Icon: i }) {
+  return /* @__PURE__ */ s("button", { type: "button", className: q.menuButton, onClick: o, children: [
+    i && /* @__PURE__ */ t(i, { className: q.menuIcon }),
+    /* @__PURE__ */ t("span", { className: q.menuLabel, children: e }),
+    /* @__PURE__ */ t("span", { className: q.menuHint, children: n }),
+    /* @__PURE__ */ t(At, {})
   ] });
 }
-const Nt = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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 Tt() {
-  const e = u(C), n = h("playbackRate"), { t: o } = p(), a = m(() => {
+const $t = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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 Kt() {
+  const e = y(w), n = v("playbackRate"), { t: o } = C(), i = p(() => {
     e && e.setPage("speed");
   }, [e]);
   return e ? /* @__PURE__ */ t(
-    A,
+    $,
     {
       label: o("PLAYBACK_SPEED"),
       hint: `${n}x`,
-      onClick: a,
-      Icon: Nt
+      onClick: i,
+      Icon: $t
     }
   ) : null;
 }
-function Mt() {
-  const e = u(C), n = h("hasCaptions"), o = h("textTrack"), { t: a } = p(), c = m(() => {
+function Dt() {
+  const e = y(w), n = v("hasCaptions"), o = v("textTrack"), { t: i } = C(), a = p(() => {
     e && e.setPage("captions");
   }, [e]);
   return e && n ? /* @__PURE__ */ t(
-    A,
+    $,
     {
-      label: a("CAPTIONS"),
-      hint: (o == null ? void 0 : o.label) ?? a("OFF"),
-      onClick: c,
-      Icon: le
+      label: i("CAPTIONS"),
+      hint: (o == null ? void 0 : o.label) ?? i("OFF"),
+      onClick: a,
+      Icon: Pe
     }
   ) : null;
 }
-const It = (e) => /* @__PURE__ */ s("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: [
+const zt = (e) => /* @__PURE__ */ s("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: [
   /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_412_23039", children: /* @__PURE__ */ t("rect", { width: 18, height: 18, fill: "white" }) }) }),
   /* @__PURE__ */ s("g", { clipPath: "url(#clip0_412_23039)", children: [
     /* @__PURE__ */ t("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" }),
@@ -277,43 +364,43 @@ const It = (e) => /* @__PURE__ */ s("svg", { width: 18, height: 18, viewBox: "0
     /* @__PURE__ */ t("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 St() {
-  const e = u(C), n = h("autoQuality"), o = h("quality"), { t: a } = p(), c = m(() => {
+function jt() {
+  const e = y(w), n = v("autoQuality"), o = v("quality"), { t: i } = C(), a = p(() => {
     e && e.setPage("quality");
   }, [e]);
   return e && o ? /* @__PURE__ */ t(
-    A,
+    $,
     {
-      label: a("QUALITY"),
-      hint: n ? a("AUTO", { quality: o.height }) : `${o.height}p`,
-      onClick: c,
-      Icon: It
+      label: i("QUALITY"),
+      hint: n ? i("AUTO", { quality: o.height }) : `${o.height}p`,
+      onClick: a,
+      Icon: zt
     }
   ) : null;
 }
-const Pt = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Bt = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Rt = "_switch-track_vptv3_1", Ht = "_switch-thumb_vptv3_11", Vt = "_switch-icon_vptv3_25", xt = "_switch-body_vptv3_31", At = "_switch-label_vptv3_68", Et = "_menu-icon_vptv3_72", M = {
+const Ut = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), qt = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Wt = "_switch-track_vptv3_1", Gt = "_switch-thumb_vptv3_11", Qt = "_switch-icon_vptv3_25", Yt = "_switch-body_vptv3_31", Jt = "_switch-label_vptv3_68", Xt = "_menu-icon_vptv3_72", M = {
   "switch-track": "_switch-track_vptv3_1",
-  switchTrack: Rt,
+  switchTrack: Wt,
   "switch-thumb": "_switch-thumb_vptv3_11",
-  switchThumb: Ht,
+  switchThumb: Gt,
   "switch-icon": "_switch-icon_vptv3_25",
-  switchIcon: Vt,
+  switchIcon: Qt,
   "switch-body": "_switch-body_vptv3_31",
-  switchBody: xt,
+  switchBody: Yt,
   "switch-label": "_switch-label_vptv3_68",
-  switchLabel: At,
+  switchLabel: Jt,
   "menu-icon": "_menu-icon_vptv3_72",
-  menuIcon: Et
+  menuIcon: Xt
 };
-function G({
+function te({
   label: e,
   checked: n = !1,
   onClick: o,
-  Icon: a
+  Icon: i
 }) {
-  const c = m(
-    (i) => {
-      (i.key === "Enter" || i.key === " ") && (o == null || o());
+  const a = p(
+    (c) => {
+      (c.key === "Enter" || c.key === " ") && (o == null || o());
     },
     [o]
   );
@@ -324,31 +411,31 @@ function G({
       role: "menuitemcheckbox",
       "aria-checked": n,
       onClick: o,
-      onKeyDown: c,
+      onKeyDown: a,
       tabIndex: 0,
       children: [
-        a && /* @__PURE__ */ t(a, { className: M.menuIcon }),
+        i && /* @__PURE__ */ t(i, { className: M.menuIcon }),
         /* @__PURE__ */ t("span", { className: M.switchLabel, children: e }),
-        /* @__PURE__ */ t("div", { className: M.switchTrack, children: /* @__PURE__ */ t("div", { className: M.switchThumb, children: n ? /* @__PURE__ */ t(Pt, { className: M.switchIcon }) : /* @__PURE__ */ t(Bt, { className: M.switchIcon }) }) })
+        /* @__PURE__ */ t("div", { className: M.switchTrack, children: /* @__PURE__ */ t("div", { className: M.switchThumb, children: n ? /* @__PURE__ */ t(Ut, { className: M.switchIcon }) : /* @__PURE__ */ t(qt, { className: M.switchIcon }) }) })
       ]
     }
   );
 }
-const Ot = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 0V12.7489H5.44V18L10.5007 12.7489H16.582V0H1ZM2 1H15.58V11.7339H9.98655L6.52667 15.25V11.7339H2V1ZM5.24963 5.35011H12.3323V4.24835H5.24963V5.35011ZM5.24963 8.18462H9.50067V7.08285H5.24963V8.18462Z", fill: "currentColor" }) });
-function Ft() {
-  const e = u(f), { t: n } = p();
-  return e != null && e.hasComments ? /* @__PURE__ */ t(
-    G,
+const en = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 0V12.7489H5.44V18L10.5007 12.7489H16.582V0H1ZM2 1H15.58V11.7339H9.98655L6.52667 15.25V11.7339H2V1ZM5.24963 5.35011H12.3323V4.24835H5.24963V5.35011ZM5.24963 8.18462H9.50067V7.08285H5.24963V8.18462Z", fill: "currentColor" }) });
+function tn() {
+  const { t: e } = C(), n = B(), o = g();
+  return n.hasComments ? /* @__PURE__ */ t(
+    te,
     {
-      Icon: Ot,
-      label: n("COMMENTS"),
-      onClick: e.toggleComments,
-      checked: e.state.commentsEnabled
+      Icon: en,
+      label: e("COMMENTS"),
+      onClick: o.toggleComments,
+      checked: o.state.commentsEnabled
     }
   ) : null;
 }
-function I(e) {
-  $(() => {
+function T(e) {
+  V(() => {
     const n = (o) => {
       o.key === "Escape" && (e == null || e());
     };
@@ -357,41 +444,41 @@ function I(e) {
     };
   }, []);
 }
-const Zt = "_main-menu_7h96l_1", Kt = {
+const nn = "_main-menu_7h96l_1", on = {
   "main-menu": "_main-menu_7h96l_1",
-  mainMenu: Zt
+  mainMenu: nn
 };
-function $t() {
-  const e = u(C);
-  return I(e == null ? void 0 : e.toggle), /* @__PURE__ */ s("div", { className: Kt.mainMenu, children: [
-    /* @__PURE__ */ t(Tt, {}),
-    /* @__PURE__ */ t(Mt, {}),
-    /* @__PURE__ */ t(Ft, {}),
-    /* @__PURE__ */ t(St, {})
+function an() {
+  const e = y(w);
+  return T(e == null ? void 0 : e.toggle), /* @__PURE__ */ s("div", { className: on.mainMenu, children: [
+    /* @__PURE__ */ t(Kt, {}),
+    /* @__PURE__ */ t(Dt, {}),
+    /* @__PURE__ */ t(tn, {}),
+    /* @__PURE__ */ t(jt, {})
   ] });
 }
-const D = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), E = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.037 3.03704L6.07407 9L12.037 14.963L11 16L4 9L11 2L12.037 3.03704Z", fill: "currentColor" }) }), Dt = "_menu-container_1bjr3_1", jt = "_menu-options_1bjr3_6", Ut = "_menu-heading_1bjr3_11", zt = "_check-icon_1bjr3_27", Gt = "_menu-item-label_1bjr3_33", Wt = "_menu-item_1bjr3_33", qt = "_menu-back-button_1bjr3_66", r = {
+const W = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), K = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.037 3.03704L6.07407 9L12.037 14.963L11 16L4 9L11 2L12.037 3.03704Z", fill: "currentColor" }) }), sn = "_menu-container_1bjr3_1", cn = "_menu-options_1bjr3_6", ln = "_menu-heading_1bjr3_11", rn = "_check-icon_1bjr3_27", un = "_menu-item-label_1bjr3_33", dn = "_menu-item_1bjr3_33", mn = "_menu-back-button_1bjr3_66", r = {
   "menu-container": "_menu-container_1bjr3_1",
-  menuContainer: Dt,
+  menuContainer: sn,
   "menu-options": "_menu-options_1bjr3_6",
-  menuOptions: jt,
+  menuOptions: cn,
   "menu-heading": "_menu-heading_1bjr3_11",
-  menuHeading: Ut,
+  menuHeading: ln,
   "check-icon": "_check-icon_1bjr3_27",
-  checkIcon: zt,
+  checkIcon: rn,
   "menu-item-label": "_menu-item-label_1bjr3_33",
-  menuItemLabel: Gt,
+  menuItemLabel: un,
   "menu-item": "_menu-item_1bjr3_33",
-  menuItem: Wt,
+  menuItem: dn,
   "menu-back-button": "_menu-back-button_1bjr3_66",
-  menuBackButton: qt
+  menuBackButton: mn
 };
-function Qt() {
-  const e = u(C), n = Le({
-    rates: P,
+function hn() {
+  const e = y(w), n = Ze({
+    rates: S,
     normalLabel: "1x"
-  }), { t: o } = p();
-  return I(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
+  }), { t: o } = C();
+  return T(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
     /* @__PURE__ */ s(
       "button",
       {
@@ -399,82 +486,82 @@ function Qt() {
         className: r.menuBackButton,
         onClick: e.backToMain,
         children: [
-          /* @__PURE__ */ t(E, {}),
+          /* @__PURE__ */ t(K, {}),
           /* @__PURE__ */ t("span", { children: o("BACK") })
         ]
       }
     ),
     /* @__PURE__ */ t("strong", { className: r.menuHeading, children: o("PLAYBACK_SPEED") }),
-    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: n.map(({ value: a, label: c, select: i, selected: l }) => /* @__PURE__ */ s(
+    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: n.map(({ value: i, label: a, select: c, selected: l }) => /* @__PURE__ */ s(
       "button",
       {
         type: "button",
         role: "menuitemradio",
         "aria-checked": l,
         onClick: () => {
-          i(), e.backToMain(), e.toggle();
+          c(), e.backToMain(), e.toggle();
         },
         className: r.menuItem,
         children: [
-          /* @__PURE__ */ t(D, { className: r.checkIcon }),
-          /* @__PURE__ */ t("span", { className: r.menuItemLabel, children: c })
+          /* @__PURE__ */ t(W, { className: r.checkIcon }),
+          /* @__PURE__ */ t("span", { className: r.menuItemLabel, children: a })
         ]
       },
-      a
+      i
     )) })
   ] }) : null;
 }
-function Yt() {
-  const e = u(C), n = h("textTrack"), { t: o } = p(), a = m(() => {
+function _n() {
+  const e = y(w), n = v("textTrack"), { t: o } = C(), i = p(() => {
     e && e.setPage("captionLanguage");
   }, [e]);
   return e ? /* @__PURE__ */ t(
-    A,
+    $,
     {
       label: o("LANGUAGE"),
       hint: (n == null ? void 0 : n.label) ?? o("OFF"),
-      onClick: a
+      onClick: i
     }
   ) : null;
 }
-function Jt() {
-  const e = u(f), n = u(C), { t: o } = p(), a = m(() => {
-    n && n.setPage("captionFontSize");
-  }, [n]);
-  return n && e ? /* @__PURE__ */ t(
-    A,
+function pn() {
+  const { t: e } = C(), n = g(), o = y(w), i = p(() => {
+    o && o.setPage("captionFontSize");
+  }, [o]);
+  return o ? /* @__PURE__ */ t(
+    $,
     {
-      label: o("CAPTION_FONT_SIZE"),
-      hint: `${e.state.captionsFontSizeMultiplier * 100}%`,
-      onClick: a
+      label: e("CAPTION_FONT_SIZE"),
+      hint: `${n.state.captionsFontSizeMultiplier * 100}%`,
+      onClick: i
     }
   ) : null;
 }
-function Xt() {
-  const e = u(f), { t: n } = p();
-  return e ? /* @__PURE__ */ t(
-    G,
+function vn() {
+  const { t: e } = C(), n = g();
+  return /* @__PURE__ */ t(
+    te,
     {
-      label: n("ON_TOP"),
-      onClick: e.toggleCaptionPositionOnTop,
-      checked: e.state.captionPositionOnTop
+      label: e("ON_TOP"),
+      onClick: n.toggleCaptionPositionOnTop,
+      checked: n.state.captionPositionOnTop
     }
-  ) : null;
+  );
 }
-function en() {
-  const e = u(f), { t: n } = p();
-  return e ? /* @__PURE__ */ t(
-    G,
+function fn() {
+  const { t: e } = C(), n = g();
+  return /* @__PURE__ */ t(
+    te,
     {
-      label: n("INVERT_COLORS"),
-      onClick: e.toggleCaptionsInvertColors,
-      checked: e.state.captionsInvertColors
+      label: e("INVERT_COLORS"),
+      onClick: n.toggleCaptionsInvertColors,
+      checked: n.state.captionsInvertColors
     }
-  ) : null;
+  );
 }
-function tn() {
-  const e = u(C), { t: n } = p();
-  return I(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
+function Cn() {
+  const e = y(w), { t: n } = C();
+  return T(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
     /* @__PURE__ */ s(
       "button",
       {
@@ -482,21 +569,21 @@ function tn() {
         className: r.menuBackButton,
         onClick: e.backToMain,
         children: [
-          /* @__PURE__ */ t(E, {}),
+          /* @__PURE__ */ t(K, {}),
           /* @__PURE__ */ t("span", { children: n("BACK") })
         ]
       }
     ),
     /* @__PURE__ */ t("strong", { className: r.menuHeading, children: n("CAPTIONS") }),
-    /* @__PURE__ */ t(Yt, {}),
-    /* @__PURE__ */ t(Jt, {}),
-    /* @__PURE__ */ t(Xt, {}),
-    /* @__PURE__ */ t(en, {})
+    /* @__PURE__ */ t(_n, {}),
+    /* @__PURE__ */ t(pn, {}),
+    /* @__PURE__ */ t(vn, {}),
+    /* @__PURE__ */ t(fn, {})
   ] }) : null;
 }
-function nn() {
-  const e = u(C), n = Ne(), { t: o } = p();
-  return I(e == null ? void 0 : e.backToCaptions), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
+function gn() {
+  const e = y(w), n = $e(), { t: o } = C();
+  return T(e == null ? void 0 : e.backToCaptions), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
     /* @__PURE__ */ s(
       "button",
       {
@@ -504,34 +591,34 @@ function nn() {
         className: r.menuBackButton,
         onClick: e.backToCaptions,
         children: [
-          /* @__PURE__ */ t(E, {}),
+          /* @__PURE__ */ t(K, {}),
           /* @__PURE__ */ t("span", { children: o("BACK") })
         ]
       }
     ),
     /* @__PURE__ */ t("strong", { className: r.menuHeading, children: o("CAPTIONS") }),
-    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: n.map(({ value: a, label: c, select: i, selected: l }) => /* @__PURE__ */ s(
+    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: n.map(({ value: i, label: a, select: c, selected: l }) => /* @__PURE__ */ s(
       "button",
       {
         type: "button",
         role: "menuitemradio",
         "aria-checked": l,
         onClick: () => {
-          i(), e.backToMain(), e.toggle();
+          c(), e.backToMain(), e.toggle();
         },
         className: r.menuItem,
         children: [
-          /* @__PURE__ */ t(D, { className: r.checkIcon }),
-          /* @__PURE__ */ t("span", { className: r.menuItemLabel, children: c })
+          /* @__PURE__ */ t(W, { className: r.checkIcon }),
+          /* @__PURE__ */ t("span", { className: r.menuItemLabel, children: a })
         ]
       },
-      a
+      i
     )) })
   ] }) : null;
 }
-function on() {
-  const e = u(f), n = u(C), { t: o } = p();
-  return I(n == null ? void 0 : n.backToCaptions), e && n ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
+function bn() {
+  const e = g(), n = y(w), { t: o } = C();
+  return T(n == null ? void 0 : n.backToCaptions), n ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
     /* @__PURE__ */ s(
       "button",
       {
@@ -539,37 +626,37 @@ function on() {
         className: r.menuBackButton,
         onClick: n.backToCaptions,
         children: [
-          /* @__PURE__ */ t(E, {}),
+          /* @__PURE__ */ t(K, {}),
           /* @__PURE__ */ t("span", { children: o("BACK") })
         ]
       }
     ),
     /* @__PURE__ */ t("strong", { className: r.menuHeading, children: o("CAPTIONS") }),
-    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: et.map((a) => /* @__PURE__ */ s(
+    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: ft.map((i) => /* @__PURE__ */ s(
       "button",
       {
         type: "button",
         role: "menuitemradio",
-        "aria-checked": a === e.state.captionsFontSizeMultiplier,
+        "aria-checked": i === e.state.captionsFontSizeMultiplier,
         onClick: () => {
-          e.setCaptionsFontSizeMultiplier(a), n.backToMain(), n.toggle();
+          e.setCaptionsFontSizeMultiplier(i), n.backToMain(), n.toggle();
         },
         className: r.menuItem,
         children: [
-          /* @__PURE__ */ t(D, { className: r.checkIcon }),
+          /* @__PURE__ */ t(W, { className: r.checkIcon }),
           /* @__PURE__ */ s("span", { className: r.menuItemLabel, children: [
-            a * 100,
+            i * 100,
             "%"
           ] })
         ]
       },
-      a
+      i
     )) })
   ] }) : null;
 }
-function an() {
-  const e = u(C), n = Te({ sort: "descending" }), o = h("autoQuality"), { t: a } = p();
-  return I(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
+function kn() {
+  const e = y(w), n = Ke({ sort: "descending" }), o = v("autoQuality"), { t: i } = C();
+  return T(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
     /* @__PURE__ */ s(
       "button",
       {
@@ -577,133 +664,133 @@ function an() {
         className: r.menuBackButton,
         onClick: e.backToMain,
         children: [
-          /* @__PURE__ */ t(E, {}),
-          /* @__PURE__ */ t("span", { children: a("BACK") })
+          /* @__PURE__ */ t(K, {}),
+          /* @__PURE__ */ t("span", { children: i("BACK") })
         ]
       }
     ),
-    /* @__PURE__ */ t("strong", { className: r.menuHeading, children: a("QUALITY") }),
-    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: n.map(({ value: c, label: i, select: l, selected: g }) => /* @__PURE__ */ s(
+    /* @__PURE__ */ t("strong", { className: r.menuHeading, children: i("QUALITY") }),
+    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: n.map(({ value: a, label: c, select: l, selected: u }) => /* @__PURE__ */ s(
       "button",
       {
         type: "button",
         role: "menuitemradio",
-        "aria-checked": c === "auto" && o || g && !o,
+        "aria-checked": a === "auto" && o || u && !o,
         onClick: () => {
           l(), e.backToMain(), e.toggle();
         },
         className: r.menuItem,
         children: [
-          /* @__PURE__ */ t(D, { className: r.checkIcon }),
-          /* @__PURE__ */ t("span", { className: r.menuItemLabel, children: i })
+          /* @__PURE__ */ t(W, { className: r.checkIcon }),
+          /* @__PURE__ */ t("span", { className: r.menuItemLabel, children: c })
         ]
       },
-      c
+      a
     )) })
   ] }) : null;
 }
-const sn = {
-  main: $t,
-  speed: Qt,
-  captions: tn,
-  captionLanguage: nn,
-  captionFontSize: on,
-  quality: an
+const yn = {
+  main: an,
+  speed: hn,
+  captions: Cn,
+  captionLanguage: gn,
+  captionFontSize: bn,
+  quality: kn
 };
-function cn() {
-  const [e, n] = T("main"), [o, a] = T(!1), c = m(() => {
-    a((R) => !R);
-  }, []), i = m((R) => {
-    n(R);
-  }, []), l = m(() => {
+function wn() {
+  const [e, n] = P("main"), [o, i] = P(!1), a = p(() => {
+    i((x) => !x);
+  }, []), c = p((x) => {
+    n(x);
+  }, []), l = p(() => {
     n("captions");
-  }, []), g = m(() => {
+  }, []), u = p(() => {
     n("main");
-  }, []), b = K(() => sn[e], [e]), k = Ce(null), { refs: y, floatingStyles: N, context: d } = xe({
+  }, []), _ = F(() => yn[e], [e]), f = he(null), { refs: b, floatingStyles: m, context: h } = ve({
     open: o,
-    onOpenChange: (R) => {
-      a(R), g();
+    onOpenChange: (x) => {
+      i(x), u();
     },
     placement: "top-end",
-    whileElementsMounted: Ae,
+    whileElementsMounted: fe,
     middleware: [
-      Ee(),
-      Oe({
-        element: k
+      Ce(),
+      ge({
+        element: f
       })
     ]
-  }), _ = Fe(d, { escapeKey: !1 }), { getReferenceProps: ge, getFloatingProps: fe } = Ze([_]);
+  }), L = be(h, { escapeKey: !1 }), { getReferenceProps: R, getFloatingProps: D } = ke([L]);
   return {
-    Page: b,
+    Page: _,
     open: o,
-    toggle: c,
-    setPage: i,
+    toggle: a,
+    setPage: c,
     backToCaptions: l,
-    backToMain: g,
-    arrowRef: k,
-    refs: y,
-    floatingStyles: N,
-    context: d,
-    getReferenceProps: ge,
-    getFloatingProps: fe
+    backToMain: u,
+    arrowRef: f,
+    refs: b,
+    floatingStyles: m,
+    context: h,
+    getReferenceProps: R,
+    getFloatingProps: D
   };
 }
-const ln = "_settings-menu_hxlsv_1", rn = "_arrow_hxlsv_15", J = {
+const Ln = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Pn = "_settings-menu_hxlsv_1", Nn = "_arrow_hxlsv_15", le = {
   "settings-menu": "_settings-menu_hxlsv_1",
-  settingsMenu: ln,
-  arrow: rn
+  settingsMenu: Pn,
+  arrow: Nn
 };
-function un() {
+function xn() {
   const {
     Page: e,
     arrowRef: n,
     backToCaptions: o,
-    backToMain: a,
-    context: c,
-    floatingStyles: i,
+    backToMain: i,
+    context: a,
+    floatingStyles: c,
     getFloatingProps: l,
-    getReferenceProps: g,
-    open: b,
-    refs: k,
-    setPage: y,
-    toggle: N
-  } = cn(), d = u(f), { t: _ } = p();
-  return /* @__PURE__ */ s(oe, { children: [
+    getReferenceProps: u,
+    open: _,
+    refs: f,
+    setPage: b,
+    toggle: m
+  } = wn(), h = g(), { t: L } = C();
+  return /* @__PURE__ */ s(J, { children: [
     /* @__PURE__ */ t(
       "button",
       {
-        ref: k.setReference,
+        ref: f.setReference,
         type: "button",
         className: "controls-button",
-        "aria-label": _("SETTINGS"),
-        onClick: N,
-        "aria-expanded": b,
-        tabIndex: d != null && d.state.interactionsDisabled ? -1 : 0,
-        ...g(),
-        children: /* @__PURE__ */ t(vt, { className: "controls-button-icon icon-rotate" })
+        "aria-label": L("SETTINGS"),
+        onClick: m,
+        "aria-expanded": _,
+        tabIndex: h != null && h.state.interactionsDisabled ? -1 : 0,
+        ...u(),
+        children: /* @__PURE__ */ t(Ln, { className: "controls-button-icon icon-rotate" })
       }
     ),
-    b && /* @__PURE__ */ t(Ke, { context: c, initialFocus: -1, modal: !1, children: /* @__PURE__ */ s(
+    _ && /* @__PURE__ */ t(Ye, { context: a, initialFocus: -1, modal: !1, children: /* @__PURE__ */ s(
       "div",
       {
-        className: J.settingsMenu,
-        ref: k.setFloating,
-        style: i,
+        className: le.settingsMenu,
+        ref: f.setFloating,
+        style: c,
         ...l(),
         children: [
           /* @__PURE__ */ t(
-            C.Provider,
+            w.Provider,
             {
-              value: { setPage: y, backToMain: a, backToCaptions: o, toggle: N },
+              value: { setPage: b, backToMain: i, backToCaptions: o, toggle: m },
               children: /* @__PURE__ */ t(e, {})
             }
           ),
           /* @__PURE__ */ t(
-            $e,
+            ye,
             {
               ref: n,
-              context: c,
-              className: J.arrow
+              context: a,
+              className: le.arrow
             }
           )
         ]
@@ -711,129 +798,129 @@ function un() {
     ) })
   ] });
 }
-function de(e, n = 1e3) {
+function Me(e, n = 1e3) {
   return function() {
-    const a = h("lastKeyboardAction"), [c, i] = T(!1), l = m(() => i(!1), []);
-    return $(() => {
-      i(!!a);
-      const g = setTimeout(l, n);
-      return () => clearTimeout(g);
-    }, [a, n]), c ? /* @__PURE__ */ t(e, {}) : null;
+    const i = v("lastKeyboardAction"), [a, c] = P(!1), l = p(() => c(!1), []);
+    return V(() => {
+      c(!!i);
+      const u = setTimeout(l, n);
+      return () => clearTimeout(u);
+    }, [i, n]), a ? /* @__PURE__ */ t(e, {}) : null;
   };
 }
-const W = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { d: "M 11,21 H 5 V 3 h 6 z m 8,0 H 13 V 3 h 6 z", fill: "currentColor" }) }), q = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { d: "M 5,2 V 22 L 21,12.000665 Z", fill: "currentColor" }) }), me = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), he = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), _e = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), dn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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 = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), hn = "_feedback-overlay_v4lbu_1", _n = "_feedback-message_v4lbu_14", pn = "_feedback-icon_v4lbu_30", gn = "_feedback-icon-animation_v4lbu_1", v = {
+const ne = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { d: "M 11,21 H 5 V 3 h 6 z m 8,0 H 13 V 3 h 6 z", fill: "currentColor" }) }), oe = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { d: "M 5,2 V 22 L 21,12.000665 Z", fill: "currentColor" }) }), Te = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Ie = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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 = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Mn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Tn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), In = "_feedback-overlay_v4lbu_1", Sn = "_feedback-message_v4lbu_14", Hn = "_feedback-icon_v4lbu_30", Vn = "_feedback-icon-animation_v4lbu_1", k = {
   "feedback-overlay": "_feedback-overlay_v4lbu_1",
-  feedbackOverlay: hn,
+  feedbackOverlay: In,
   "feedback-message": "_feedback-message_v4lbu_14",
-  feedbackMessage: _n,
+  feedbackMessage: Sn,
   "feedback-icon": "_feedback-icon_v4lbu_30",
-  feedbackIcon: pn,
+  feedbackIcon: Hn,
   "feedback-icon-animation": "_feedback-icon-animation_v4lbu_1",
-  feedbackIconAnimation: gn
+  feedbackIconAnimation: Vn
 };
-function fn() {
+function Bn() {
   var o;
-  const e = ce();
+  const e = _e();
   switch ((o = e.lastKeyboardAction) == null ? void 0 : o.action) {
     case "togglePaused":
-      return /* @__PURE__ */ t("i", { className: v.feedbackIcon, children: e.paused ? /* @__PURE__ */ t(W, {}) : /* @__PURE__ */ t(q, {}) });
+      return /* @__PURE__ */ t("i", { className: k.feedbackIcon, children: e.paused ? /* @__PURE__ */ t(ne, {}) : /* @__PURE__ */ t(oe, {}) });
     case "toggleCaptions":
     case "nextCaptionLanguage":
     case "previousCaptionLanguage":
-      return e.hasCaptions ? /* @__PURE__ */ t("i", { className: v.feedbackIcon, children: /* @__PURE__ */ t(re, {}) }) : null;
+      return e.hasCaptions ? /* @__PURE__ */ t("i", { className: k.feedbackIcon, children: /* @__PURE__ */ t(Ne, {}) }) : null;
     case "volumeUp":
     case "volumeDown":
     case "toggleMuted":
-      return /* @__PURE__ */ t("i", { className: v.feedbackIcon, children: e.muted || e.volume === 0 ? /* @__PURE__ */ t(me, {}) : e.volume >= 0.5 ? /* @__PURE__ */ t(_e, {}) : /* @__PURE__ */ t(he, {}) });
+      return /* @__PURE__ */ t("i", { className: k.feedbackIcon, children: e.muted || e.volume === 0 ? /* @__PURE__ */ t(Te, {}) : e.volume >= 0.5 ? /* @__PURE__ */ t(Se, {}) : /* @__PURE__ */ t(Ie, {}) });
     case "seekForward":
     case "seekForward10":
-      return /* @__PURE__ */ t("i", { className: v.feedbackIcon, children: /* @__PURE__ */ t(dn, { className: "right" }) });
+      return /* @__PURE__ */ t("i", { className: k.feedbackIcon, children: /* @__PURE__ */ t(Mn, { className: "right" }) });
     case "seekBackward":
     case "seekBackward10":
-      return /* @__PURE__ */ t("i", { className: v.feedbackIcon, children: /* @__PURE__ */ t(mn, { className: "left" }) });
+      return /* @__PURE__ */ t("i", { className: k.feedbackIcon, children: /* @__PURE__ */ t(Tn, { className: "left" }) });
     default:
       return null;
   }
 }
-function bn() {
-  var a;
-  const { t: e } = p(), n = ce();
-  switch ((a = n.lastKeyboardAction) == null ? void 0 : a.action) {
+function Rn() {
+  var i;
+  const { t: e } = C(), n = _e();
+  switch ((i = n.lastKeyboardAction) == null ? void 0 : i.action) {
     case "toggleCaptions":
     case "nextCaptionLanguage":
     case "previousCaptionLanguage":
-      return /* @__PURE__ */ t("div", { className: v.feedbackMessage, children: n.textTrack ? e("CAPTION_LANGUAGE", { language: n.textTrack.label }) : `${e("CAPTIONS")}: ${e("OFF")}` });
+      return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: n.textTrack ? e("CAPTION_LANGUAGE", { language: n.textTrack.label }) : `${e("CAPTIONS")}: ${e("OFF")}` });
     case "volumeUp":
     case "volumeDown":
     case "toggleMuted":
-      return /* @__PURE__ */ t("div", { className: v.feedbackMessage, children: n.muted || n.volume === 0 ? e("MUTED") : e("VOLUME", { volume: (n.volume * 100).toFixed(0) }) });
+      return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: n.muted || n.volume === 0 ? e("MUTED") : e("VOLUME", { volume: (n.volume * 100).toFixed(0) }) });
     case "increasePlaybackRate":
     case "decreasePlaybackRate":
     case "resetPlaybackRate":
-      return /* @__PURE__ */ t("div", { className: v.feedbackMessage, children: e("PLAYBACK_SPEED_MESSAGE", { speed: n.playbackRate }) });
+      return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("PLAYBACK_SPEED_MESSAGE", { speed: n.playbackRate }) });
     case "seekForward":
-      return /* @__PURE__ */ t("div", { className: v.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 5 }) });
+      return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 5 }) });
     case "seekForward10":
-      return /* @__PURE__ */ t("div", { className: v.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 10 }) });
+      return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 10 }) });
     case "seekBackward":
-      return /* @__PURE__ */ t("div", { className: v.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 5 }) });
+      return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 5 }) });
     case "seekBackward10":
-      return /* @__PURE__ */ t("div", { className: v.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 10 }) });
+      return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 10 }) });
     default:
       return null;
   }
 }
-const vn = de(fn, 500), Cn = de(bn, 1e3);
-function kn() {
-  return /* @__PURE__ */ s("div", { className: v.feedbackOverlay, children: [
-    /* @__PURE__ */ t(vn, {}),
-    /* @__PURE__ */ t(Cn, {})
+const An = Me(Bn, 500), En = Me(Rn, 1e3);
+function On() {
+  return /* @__PURE__ */ s("div", { className: k.feedbackOverlay, children: [
+    /* @__PURE__ */ t(An, {}),
+    /* @__PURE__ */ t(En, {})
   ] });
 }
-const wn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), yn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Ln = "_full-screen-button_1xm32_2", Nn = {
+const Fn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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 = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), $n = "_full-screen-button_1xm32_2", Kn = {
   "full-screen-button": "_full-screen-button_1xm32_2",
-  fullScreenButton: Ln
+  fullScreenButton: $n
 };
-function Tn() {
-  const e = h("fullscreen"), n = u(f);
-  return n && !n.hideFullScreen ? /* @__PURE__ */ t(
-    ie,
+function Dn() {
+  const e = v("fullscreen"), n = g();
+  return B().hideFullScreen ? null : /* @__PURE__ */ t(
+    pe,
     {
-      tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
-      className: `controls-button ${Nn.fullScreenButton}`,
-      children: e ? /* @__PURE__ */ t(yn, { className: "controls-button-icon" }) : /* @__PURE__ */ t(wn, { className: "controls-button-icon" })
+      tabIndex: n.state.interactionsDisabled ? -1 : 0,
+      className: `controls-button ${Kn.fullScreenButton}`,
+      children: e ? /* @__PURE__ */ t(Zn, { className: "controls-button-icon" }) : /* @__PURE__ */ t(Fn, { className: "controls-button-icon" })
     }
-  ) : null;
+  );
 }
-const Mn = "_gestures-container_1fn3b_1", In = "_gesture_1fn3b_1", X = {
+const zn = "_gestures-container_1fn3b_1", jn = "_gesture_1fn3b_1", re = {
   "gestures-container": "_gestures-container_1fn3b_1",
-  gesturesContainer: Mn,
-  gesture: In
+  gesturesContainer: zn,
+  gesture: jn
 };
-function Sn() {
-  const e = z(), n = () => {
+function Un() {
+  const e = Z(), n = () => {
     e.togglePaused();
   };
-  return /* @__PURE__ */ t("div", { className: X.gesturesContainer, children: /* @__PURE__ */ t("div", { "aria-hidden": !0, className: X.gesture, onClick: n }) });
+  return /* @__PURE__ */ t("div", { className: re.gesturesContainer, children: /* @__PURE__ */ t("div", { "aria-hidden": !0, className: re.gesture, onClick: n }) });
 }
-const Pn = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), pe = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Bn = "_keyboard-shortcuts-overlay_y5kv6_1", Rn = "_keyboard-shortcuts-button_y5kv6_67", Hn = "_close-button_y5kv6_93", U = {
+const qn = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), He = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("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" }) }), Wn = "_keyboard-shortcuts-overlay_y5kv6_1", Gn = "_keyboard-shortcuts-button_y5kv6_67", Qn = "_close-button_y5kv6_93", Y = {
   "keyboard-shortcuts-overlay": "_keyboard-shortcuts-overlay_y5kv6_1",
-  keyboardShortcutsOverlay: Bn,
+  keyboardShortcutsOverlay: Wn,
   "keyboard-shortcuts-button": "_keyboard-shortcuts-button_y5kv6_67",
-  keyboardShortcutsButton: Rn,
+  keyboardShortcutsButton: Gn,
   "close-button": "_close-button_y5kv6_93",
-  closeButton: Hn
+  closeButton: Qn
 };
-function Vn({ onClose: e }) {
-  const { t: n } = p();
-  I(e);
-  const o = (a) => {
-    a && a.focus();
+function Yn({ onClose: e }) {
+  const { t: n } = C();
+  T(e);
+  const o = (i) => {
+    i && i.focus();
   };
   return /* @__PURE__ */ s(
     "div",
     {
-      className: U.keyboardShortcutsOverlay,
+      className: Y.keyboardShortcutsOverlay,
       tabIndex: 0,
       ref: o,
       children: [
@@ -843,10 +930,10 @@ function Vn({ onClose: e }) {
             "button",
             {
               type: "button",
-              className: U.closeButton,
+              className: Y.closeButton,
               onClick: e,
               "aria-label": n("CLOSE"),
-              children: /* @__PURE__ */ t(pe, {})
+              children: /* @__PURE__ */ t(He, {})
             }
           )
         ] }),
@@ -937,174 +1024,464 @@ function Vn({ onClose: e }) {
     }
   );
 }
-function xn() {
-  const [e, n] = T(!1), [o, a] = T(!1), [c, i] = T(!1), l = u(f), g = h("playing"), b = z(), { t: k } = p(), y = m(() => {
-    n(!0), l == null || l.disableInteractions(), g && (i(!0), b.pause());
-  }, [g, b, l]), N = m(() => {
-    n(!1), a(!0), l == null || l.enableInteractions(), c && (i(!1), b.play());
-  }, [c, b, l]), d = m(
-    (_) => o && (_ == null ? void 0 : _.focus()),
+function Jn() {
+  const [e, n] = P(!1), [o, i] = P(!1), [a, c] = P(!1), l = g(), u = v("playing"), _ = Z(), { t: f } = C(), b = p(() => {
+    n(!0), l.disableInteractions(), u && (c(!0), _.pause());
+  }, [u, _, l]), m = p(() => {
+    n(!1), i(!0), l.enableInteractions(), a && (c(!1), _.play());
+  }, [a, _, l]), h = p(
+    (L) => o && (L == null ? void 0 : L.focus()),
     [o]
   );
-  return e ? /* @__PURE__ */ t(Vn, { onClose: N }) : /* @__PURE__ */ t(
+  return e ? /* @__PURE__ */ t(Yn, { onClose: m }) : /* @__PURE__ */ t(
     "button",
     {
-      ref: d,
-      "aria-label": k("KEYBOARD_SHORTCUTS"),
+      ref: h,
+      "aria-label": f("KEYBOARD_SHORTCUTS"),
       type: "button",
-      className: U.keyboardShortcutsButton,
-      onClick: y,
-      tabIndex: 0,
-      children: /* @__PURE__ */ t(Pn, {})
+      className: Y.keyboardShortcutsButton,
+      onClick: b,
+      tabIndex: l.state.interactionsDisabled ? -1 : 0,
+      children: /* @__PURE__ */ t(qn, {})
     }
   );
 }
-const An = "_play-pause-button_kyuc5_1", En = {
+const Xn = "_play-pause-button_kyuc5_1", eo = {
   "play-pause-button": "_play-pause-button_kyuc5_1",
-  playPauseButton: An
+  playPauseButton: Xn
 };
-function On() {
-  const e = se(), n = u(f), o = h("paused");
+function to() {
+  const e = ee(), n = g(), o = v("paused");
   return e ? /* @__PURE__ */ t(
-    Me,
+    De,
     {
-      tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
-      className: `${En.playPauseButton} controls-button`,
-      onKeyDown: (a) => {
-        a.key === " " && (e == null || e.$state.lastKeyboardAction.set({
+      tabIndex: n.state.interactionsDisabled ? -1 : 0,
+      className: `${eo.playPauseButton} controls-button`,
+      onKeyDown: (i) => {
+        i.key === " " && (e == null || e.$state.lastKeyboardAction.set({
           action: "togglePaused",
-          event: a.nativeEvent
+          event: i.nativeEvent
         }));
       },
-      children: o ? /* @__PURE__ */ t(q, { className: "controls-button-icon" }) : /* @__PURE__ */ t(W, { className: "controls-button-icon" })
+      children: o ? /* @__PURE__ */ t(oe, { className: "controls-button-icon" }) : /* @__PURE__ */ t(ne, { className: "controls-button-icon" })
     }
   ) : null;
 }
-const Fn = "_poster_195hi_1", Zn = {
-  poster: Fn
+const no = "_poster_195hi_1", oo = {
+  poster: no
 };
-function Kn({ src: e }) {
-  const n = h("source");
-  return n.type === "video/youtube" || n.type === "video/vimeo" ? null : /* @__PURE__ */ t(Ie, { src: e, className: Zn.poster });
+function io({ src: e }) {
+  const n = v("source");
+  return n.type === "video/youtube" || n.type === "video/vimeo" ? null : /* @__PURE__ */ t(ze, { src: e, className: oo.poster });
 }
-const $n = "_small-layout-overlay_1vli4_1", Dn = "_small-layout-button_1vli4_14", jn = "_small-layout-icon-play_1vli4_24", Un = "_small-layout-icon-pause_1vli4_30", zn = "_full-screen-close-icon_1vli4_36", Gn = "_fade-out_1vli4_1", V = {
+const ao = "_small-layout-overlay_1vli4_1", so = "_small-layout-button_1vli4_14", co = "_small-layout-icon-play_1vli4_24", lo = "_small-layout-icon-pause_1vli4_30", ro = "_full-screen-close-icon_1vli4_36", uo = "_fade-out_1vli4_1", E = {
   "small-layout-overlay": "_small-layout-overlay_1vli4_1",
-  smallLayoutOverlay: $n,
+  smallLayoutOverlay: ao,
   "small-layout-button": "_small-layout-button_1vli4_14",
-  smallLayoutButton: Dn,
+  smallLayoutButton: so,
   "small-layout-icon-play": "_small-layout-icon-play_1vli4_24",
-  smallLayoutIconPlay: jn,
+  smallLayoutIconPlay: co,
   "small-layout-icon-pause": "_small-layout-icon-pause_1vli4_30",
-  smallLayoutIconPause: Un,
+  smallLayoutIconPause: lo,
   "full-screen-close-icon": "_full-screen-close-icon_1vli4_36",
-  fullScreenCloseIcon: zn,
+  fullScreenCloseIcon: ro,
   "fade-out": "_fade-out_1vli4_1",
-  fadeOut: Gn
+  fadeOut: uo
 };
-function Wn() {
-  return /* @__PURE__ */ s("div", { className: V.smallLayoutOverlay, children: [
-    /* @__PURE__ */ t(ie, { className: V.fullScreenCloseIcon, children: /* @__PURE__ */ t(pe, {}) }),
-    /* @__PURE__ */ s("i", { className: V.smallLayoutButton, children: [
-      /* @__PURE__ */ t(q, { className: V.smallLayoutIconPlay }),
-      /* @__PURE__ */ t(W, { className: V.smallLayoutIconPause })
+function mo() {
+  return /* @__PURE__ */ s("div", { className: E.smallLayoutOverlay, children: [
+    /* @__PURE__ */ t(pe, { className: E.fullScreenCloseIcon, children: /* @__PURE__ */ t(He, {}) }),
+    /* @__PURE__ */ s("i", { className: E.smallLayoutButton, children: [
+      /* @__PURE__ */ t(oe, { className: E.smallLayoutIconPlay }),
+      /* @__PURE__ */ t(ne, { className: E.smallLayoutIconPause })
     ] })
   ] });
 }
-const qn = "_time-indicator_1ght2_1", Qn = {
+const ho = "_time-indicator_1ght2_1", _o = {
   "time-indicator": "_time-indicator_1ght2_1",
-  timeIndicator: qn
+  timeIndicator: ho
 };
-function Yn() {
-  return /* @__PURE__ */ s("div", { className: Qn.timeIndicator, children: [
-    /* @__PURE__ */ t(Q, { type: "current" }),
+function po() {
+  return /* @__PURE__ */ s("div", { className: _o.timeIndicator, children: [
+    /* @__PURE__ */ t(ae, { type: "current" }),
     "/",
-    /* @__PURE__ */ t(Q, { type: "duration" })
+    /* @__PURE__ */ t(ae, { type: "duration" })
   ] });
 }
-const Jn = "_comment-markers_1xw2k_1", Xn = "_comment-marker_1xw2k_1", eo = "_timeline-wrapper_1xw2k_21", to = "_track_1xw2k_34", no = "_thumb_1xw2k_47", oo = "_root_1xw2k_61", ao = "_track-inner_1xw2k_91", so = "_progress_1xw2k_97", co = "_track-fill_1xw2k_103", w = {
-  "comment-markers": "_comment-markers_1xw2k_1",
-  commentMarkers: Jn,
-  "comment-marker": "_comment-marker_1xw2k_1",
-  commentMarker: Xn,
-  "timeline-wrapper": "_timeline-wrapper_1xw2k_21",
-  timelineWrapper: eo,
-  track: to,
-  thumb: no,
-  root: oo,
-  "track-inner": "_track-inner_1xw2k_91",
-  trackInner: ao,
-  progress: so,
-  "track-fill": "_track-fill_1xw2k_103",
-  trackFill: co
+const vo = "_comment-markers_1k8rn_1", fo = "_comment-marker_1k8rn_1", Co = "_timeline-wrapper_1k8rn_21", go = "_track_1k8rn_35", bo = "_thumb_1k8rn_48", ko = "_root_1k8rn_62", yo = "_track-inner_1k8rn_92", wo = "_progress_1k8rn_98", Lo = "_track-fill_1k8rn_104", Po = "_pins_1k8rn_120", No = "_pin-button_1k8rn_133", xo = "_annotation-pin_1k8rn_153", Mo = "_quiz-pin_1k8rn_158", To = "_annotation-pin-child_1k8rn_163", Io = "_quiz-pin-child_1k8rn_167", So = "_interactive-pin-container_1k8rn_172", Ho = "_interactive-pin-wrapper_1k8rn_182", Vo = "_interactive-pin-icon_1k8rn_188", Bo = "_interactive-pin_1k8rn_172", Ro = "_bg_1k8rn_202", Ao = "_symbol_1k8rn_206", Eo = "_interactive-pin-button_1k8rn_211", Oo = "_interactive-pin-menu_1k8rn_231", Fo = "_interactive-pin-menu-item_1k8rn_245", Zo = "_arrow_1k8rn_266", d = {
+  "comment-markers": "_comment-markers_1k8rn_1",
+  commentMarkers: vo,
+  "comment-marker": "_comment-marker_1k8rn_1",
+  commentMarker: fo,
+  "timeline-wrapper": "_timeline-wrapper_1k8rn_21",
+  timelineWrapper: Co,
+  track: go,
+  thumb: bo,
+  root: ko,
+  "track-inner": "_track-inner_1k8rn_92",
+  trackInner: yo,
+  progress: wo,
+  "track-fill": "_track-fill_1k8rn_104",
+  trackFill: Lo,
+  pins: Po,
+  "pin-button": "_pin-button_1k8rn_133",
+  pinButton: No,
+  "annotation-pin": "_annotation-pin_1k8rn_153",
+  annotationPin: xo,
+  "quiz-pin": "_quiz-pin_1k8rn_158",
+  quizPin: Mo,
+  "annotation-pin-child": "_annotation-pin-child_1k8rn_163",
+  annotationPinChild: To,
+  "quiz-pin-child": "_quiz-pin-child_1k8rn_167",
+  quizPinChild: Io,
+  "interactive-pin-container": "_interactive-pin-container_1k8rn_172",
+  interactivePinContainer: So,
+  "interactive-pin-wrapper": "_interactive-pin-wrapper_1k8rn_182",
+  interactivePinWrapper: Ho,
+  "interactive-pin-icon": "_interactive-pin-icon_1k8rn_188",
+  interactivePinIcon: Vo,
+  "interactive-pin": "_interactive-pin_1k8rn_172",
+  interactivePin: Bo,
+  bg: Ro,
+  symbol: Ao,
+  "interactive-pin-button": "_interactive-pin-button_1k8rn_211",
+  interactivePinButton: Eo,
+  "interactive-pin-menu": "_interactive-pin-menu_1k8rn_231",
+  interactivePinMenu: Oo,
+  "interactive-pin-menu-item": "_interactive-pin-menu-item_1k8rn_245",
+  interactivePinMenuItem: Fo,
+  arrow: Zo
+}, $o = {
+  annotation: d.annotationPin,
+  quiz: d.quizPin
 };
-function io() {
-  const e = u(f), n = h("duration");
-  return e != null && e.hasComments && (e != null && e.state.commentsEnabled) ? /* @__PURE__ */ t("div", { className: w.commentMarkers, children: e.comments.map((o) => /* @__PURE__ */ t(
+function Ve({
+  type: e,
+  position: n,
+  children: o,
+  onClick: i
+}) {
+  const a = g();
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      tabIndex: a.state.interactionsDisabled ? -1 : 0,
+      className: d.pinButton,
+      style: { left: `${n}%` },
+      onClick: i,
+      children: /* @__PURE__ */ s(
+        "svg",
+        {
+          className: $o[e],
+          width: "26",
+          height: "32",
+          viewBox: "0 0 26 32",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ t("path", { d: "M25.5 13C25.5 15.4774 24.7798 17.785 23.5376 19.7268C21.932 22.1411 20.1501 23.9459 18.2945 25.7433C18.0942 25.9373 17.8929 26.1314 17.6908 26.3262C16.157 27.8047 14.5793 29.3256 13.0545 31.2007C11.5227 29.3377 9.93394 27.8282 8.39067 26.362C8.17552 26.1576 7.96126 25.954 7.74816 25.7505C5.87029 23.9566 4.07076 22.1526 2.46259 19.7271C1.22024 17.7852 0.5 15.4775 0.5 13C0.5 6.09644 6.09644 0.5 13 0.5C19.9036 0.5 25.5 6.09644 25.5 13Z" }),
+            o
+          ]
+        }
+      )
+    }
+  );
+}
+function Ko(e) {
+  return /* @__PURE__ */ t(Ve, { type: "annotation", ...e, children: /* @__PURE__ */ t(
+    "path",
+    {
+      className: d.annotationPinChild,
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7 8V19.25H8.875V18.875C8.875 17.8415 9.7165 17 10.75 17H19V8H7ZM10 11.75H16V11H10V11.75ZM14.5 14H10V13.25H14.5V14Z",
+      fill: "currentColor",
+      stroke: "none"
+    }
+  ) });
+}
+function Do(e) {
+  return /* @__PURE__ */ t(Ve, { type: "quiz", ...e, children: e.multiple ? /* @__PURE__ */ t("circle", { className: d.quizPinChild, cx: "13", cy: "13", r: "6" }) : /* @__PURE__ */ t(
+    "text",
+    {
+      className: d.quizPinChild,
+      x: "50%",
+      y: "56%",
+      textAnchor: "middle",
+      fill: "currentColor",
+      stroke: "none",
+      children: e.ordinal
+    }
+  ) });
+}
+function zo(e, n) {
+  return e.map((o, i) => ({
+    id: o.id,
+    time: o.time,
+    type: "annotation",
+    ordinal: i + 1,
+    onClick: () => n(o)
+  }));
+}
+function jo(e, n) {
+  const o = /* @__PURE__ */ new Map();
+  e.forEach((c) => {
+    var u;
+    const l = c.time;
+    o.has(l) || o.set(l, []), (u = o.get(l)) == null || u.push(c);
+  });
+  const i = [];
+  let a = 1;
+  return o.forEach((c, l) => {
+    i.push({
+      id: c.map((u) => u.id).join("-"),
+      time: l,
+      type: "quiz",
+      ordinal: a + 1,
+      onClick: () => n(c),
+      multiple: c.length > 1
+    }), a++;
+  }), i;
+}
+function Uo(e, n, o, i) {
+  switch (e.type) {
+    case "annotation": {
+      const a = () => i ? e.onClick() : o.seek(e.time);
+      return /* @__PURE__ */ t(
+        Ko,
+        {
+          position: e.time / n * 100,
+          onClick: a
+        },
+        e.id
+      );
+    }
+    case "quiz":
+      return /* @__PURE__ */ t(
+        Do,
+        {
+          position: e.time / n * 100,
+          ordinal: e.ordinal,
+          multiple: e.multiple,
+          onClick: e.onClick
+        },
+        e.id
+      );
+    default:
+      return null;
+  }
+}
+function qo() {
+  const e = Z(), n = v("duration"), o = B(), i = F(() => [
+    ...zo(
+      o.annotations,
+      o.onAnnotationClick
+    ),
+    ...jo(o.quizMarkers, o.onQuizMarkerClick)
+  ].sort((c, l) => c.time - l.time).map((c) => Uo(c, n, e, o.interactive)), [o.annotations, o.quizMarkers, n, e]);
+  return /* @__PURE__ */ t("div", { className: d.pins, children: i });
+}
+function Wo() {
+  const e = v("duration"), n = B(), o = g();
+  return n.hasComments && o.state.commentsEnabled ? /* @__PURE__ */ t("div", { className: d.commentMarkers, children: n.comments.map((i) => /* @__PURE__ */ t(
     "span",
     {
-      className: w.commentMarker,
+      className: d.commentMarker,
       style: {
-        left: `${o.timestamp / n * 100}%`,
-        width: `${ue / n * 100}%`
+        left: `${i.timestamp / e * 100}%`,
+        width: `${xe / e * 100}%`
       }
     },
-    o.id
+    i.id
   )) }) : null;
 }
-const lo = `${w.progress} ${w.trackInner}`, ro = `${w.trackFill} ${w.trackInner}`;
-function ee({ className: e }) {
-  const n = u(f), o = e ? `${w.timelineWrapper} ${e}` : w.timelineWrapper;
-  return /* @__PURE__ */ s("div", { className: o, children: [
+function Go({ position: e }) {
+  const [n, o] = P(!1), i = B(), a = p(() => i.interactiveMenuElements.length > 0 ? o((h) => !h) : i.onInteractivePinClick(e), [
+    i.interactiveMenuElements,
+    i.onInteractivePinClick,
+    e
+  ]), c = he(null), { refs: l, floatingStyles: u, context: _ } = ve({
+    open: n,
+    onOpenChange: o,
+    whileElementsMounted: fe,
+    placement: "top",
+    middleware: [
+      Je(),
+      Xe(6),
+      Ce(),
+      ge({
+        element: c
+      })
+    ]
+  }), f = be(_), { getReferenceProps: b, getFloatingProps: m } = ke([f]);
+  return /* @__PURE__ */ s(J, { children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: a,
+        className: d.interactivePinButton,
+        ref: l.setReference,
+        style: { left: `${e}%` },
+        ...b(),
+        children: /* @__PURE__ */ s(
+          "svg",
+          {
+            className: d.interactivePin,
+            width: "36",
+            height: "44",
+            fill: "none",
+            viewBox: "0 0 36 44",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ t(
+                "path",
+                {
+                  className: d.bg,
+                  d: "M 33.1703,27.499961 C 34.9615,24.721661 36,21.418761 36,17.874961 36,8.0028612 27.9411,-3.8819277e-5 18,-3.8819277e-5 8.0588999,-3.8819277e-5 -1.5e-7,8.0028612 -1.5e-7,17.874961 c 0,3.5438 1.03844995,6.8467 2.82964995,9.625 4.5447501,6.8094 10.1600502,10.1014 15.2487502,16.5 5.0364,-6.3985 10.5573,-9.7259 15.0919,-16.5 z"
+                }
+              ),
+              /* @__PURE__ */ t(
+                "path",
+                {
+                  className: d.symbol,
+                  d: "m 35.499961,17.877772 c 0,3.443549 -1.008198,6.652061 -2.747494,9.351891 -2.235095,3.338633 -4.71529,5.832631 -7.286584,8.306425 -0.277599,0.267143 -0.556499,0.534085 -0.836198,0.801928 -2.174595,2.082232 -4.40389,4.216673 -6.553385,6.870196 -2.158995,-2.636621 -4.40379,-4.754859 -6.591985,-6.819788 -0.2979,-0.281145 -0.594699,-0.561289 -0.890198,-0.841534 C 7.9918219,33.077896 5.4869279,30.584698 3.2477829,27.230063 1.5082968,24.530133 0.50003905,21.321521 0.50003905,17.877772 0.50003905,8.2835422 8.3317219,0.50000048 18,0.50000048 c 9.668278,0 17.499961,7.78354172 17.499961,17.37777152 z"
+                }
+              ),
+              /* @__PURE__ */ t(
+                "path",
+                {
+                  className: d.interactivePinIcon,
+                  "data-open": n,
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
+                  d: "m 18.75,17.388467 v -6.25 h -1.5 v 6.25 H 11 v 1.5 h 6.25 v 6.25 h 1.5 v -6.25 H 25 v -1.5 z",
+                  fill: "white"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    n && /* @__PURE__ */ s(
+      "div",
+      {
+        ref: l.setFloating,
+        style: u,
+        className: d.interactivePinMenu,
+        ...m(),
+        children: [
+          i.interactiveMenuElements.map(({ id: h, text: L, onClick: R }) => /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              className: d.interactivePinMenuItem,
+              onClick: () => {
+                R(h, e), o(!1);
+              },
+              children: [
+                /* @__PURE__ */ t(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ t(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M7.33339 7.33339H1.77783V8.66672H7.33339V14.2223H8.66672V8.66672H14.2223V7.33339H8.66672V1.77783H7.33339V7.33339Z",
+                        fill: "#273540"
+                      }
+                    )
+                  }
+                ),
+                L
+              ]
+            },
+            h
+          )),
+          /* @__PURE__ */ t(
+            ye,
+            {
+              ref: c,
+              context: _,
+              className: d.arrow
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function Qo() {
+  const e = v("duration"), o = v("currentTime") / e * 100;
+  return /* @__PURE__ */ t("div", { className: d.interactivePinContainer, children: /* @__PURE__ */ t("div", { className: d.interactivePinWrapper, children: /* @__PURE__ */ t(Go, { position: o }) }) });
+}
+function Yo() {
+  const e = v("paused"), n = g();
+  return e && !n.state.interactionsDisabled ? /* @__PURE__ */ t(Qo, {}) : null;
+}
+const Jo = `${d.progress} ${d.trackInner}`, Xo = `${d.trackFill} ${d.trackInner}`;
+function ue({ className: e }) {
+  const n = g(), { hasAnnotations: o, hasQuizmarkers: i, interactive: a } = B(), c = e ? `${d.timelineWrapper} ${e}` : d.timelineWrapper;
+  return /* @__PURE__ */ s("div", { className: c, children: [
+    a ? /* @__PURE__ */ t(Yo, {}) : null,
+    o || i ? /* @__PURE__ */ t(qo, {}) : null,
     /* @__PURE__ */ s(
-      H.Root,
+      A.Root,
       {
-        className: w.root,
-        tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
+        className: d.root,
+        tabIndex: n.state.interactionsDisabled ? -1 : 0,
         children: [
-          /* @__PURE__ */ s(H.Track, { className: w.track, children: [
-            /* @__PURE__ */ t(H.Progress, { className: lo }),
-            /* @__PURE__ */ t(H.TrackFill, { className: ro })
+          /* @__PURE__ */ s(A.Track, { className: d.track, children: [
+            /* @__PURE__ */ t(A.Progress, { className: Jo }),
+            /* @__PURE__ */ t(A.TrackFill, { className: Xo })
           ] }),
-          /* @__PURE__ */ t(H.Thumb, { className: w.thumb })
+          /* @__PURE__ */ t(A.Thumb, { className: d.thumb })
         ]
       }
     ),
-    /* @__PURE__ */ t(io, {})
+    /* @__PURE__ */ t(Wo, {})
   ] });
 }
-const uo = "_wrapper_d2nt6_1", mo = "_track_d2nt6_6", ho = "_thumb_d2nt6_16", _o = "_track-fill_d2nt6_30", po = "_root_d2nt6_48", x = {
-  wrapper: uo,
-  track: mo,
-  thumb: ho,
+const ei = "_wrapper_d2nt6_1", ti = "_track_d2nt6_6", ni = "_thumb_d2nt6_16", oi = "_track-fill_d2nt6_30", ii = "_root_d2nt6_48", O = {
+  wrapper: ei,
+  track: ti,
+  thumb: ni,
   "track-fill": "_track-fill_d2nt6_30",
-  trackFill: _o,
-  root: po
+  trackFill: oi,
+  root: ii
 };
-function go() {
-  const e = h("volume"), n = h("muted"), o = u(f);
-  return /* @__PURE__ */ s("div", { className: x.wrapper, children: [
+function ai() {
+  const e = v("volume"), n = v("muted"), o = g();
+  return /* @__PURE__ */ s("div", { className: O.wrapper, children: [
     /* @__PURE__ */ t(
-      Se,
+      je,
       {
-        tabIndex: o != null && o.state.interactionsDisabled ? -1 : 0,
+        tabIndex: o.state.interactionsDisabled ? -1 : 0,
         className: "controls-button",
-        children: n || e == 0 ? /* @__PURE__ */ t(me, { className: "controls-button-icon" }) : e < 0.5 ? /* @__PURE__ */ t(he, { className: "controls-button-icon" }) : /* @__PURE__ */ t(_e, { className: "controls-button-icon" })
+        children: n || e == 0 ? /* @__PURE__ */ t(Te, { className: "controls-button-icon" }) : e < 0.5 ? /* @__PURE__ */ t(Ie, { className: "controls-button-icon" }) : /* @__PURE__ */ t(Se, { className: "controls-button-icon" })
       }
     ),
     /* @__PURE__ */ s(
-      O.Root,
+      j.Root,
       {
-        className: x.root,
-        tabIndex: o != null && o.state.interactionsDisabled ? -1 : 0,
+        className: O.root,
+        tabIndex: o.state.interactionsDisabled ? -1 : 0,
         children: [
-          /* @__PURE__ */ t(O.Track, { className: x.track, children: /* @__PURE__ */ t(O.TrackFill, { className: x.trackFill }) }),
-          /* @__PURE__ */ t(O.Thumb, { className: x.thumb })
+          /* @__PURE__ */ t(j.Track, { className: O.track, children: /* @__PURE__ */ t(j.TrackFill, { className: O.trackFill }) }),
+          /* @__PURE__ */ t(j.Thumb, { className: O.thumb })
         ]
       }
     )
   ] });
 }
-const te = {
+const de = {
   togglePaused: ["Space", "Enter", "k"],
   seekForward: ["ArrowRight"],
   seekBackward: ["ArrowLeft"],
@@ -1116,9 +1493,9 @@ const te = {
   nextCaptionLanguage: {
     keys: ["v"],
     onKeyUp({ event: e, player: n, remote: o }) {
-      const a = n.textTracks.selectedIndex, c = a + 1;
-      o.changeTextTrackMode(a, "hidden"), o.changeTextTrackMode(
-        c >= n.textTracks.length ? 0 : c,
+      const i = n.textTracks.selectedIndex, a = i + 1;
+      o.changeTextTrackMode(i, "hidden"), o.changeTextTrackMode(
+        a >= n.textTracks.length ? 0 : a,
         "showing"
       ), n.$state.lastKeyboardAction.set({
         action: "nextCaptionLanguage",
@@ -1129,9 +1506,9 @@ const te = {
   previousCaptionLanguage: {
     keys: ["x"],
     onKeyUp({ event: e, player: n, remote: o }) {
-      const a = n.textTracks.selectedIndex, c = a - 1;
-      o.changeTextTrackMode(a, "hidden"), o.changeTextTrackMode(
-        c < 0 ? n.textTracks.length - 1 : c,
+      const i = n.textTracks.selectedIndex, a = i - 1;
+      o.changeTextTrackMode(i, "hidden"), o.changeTextTrackMode(
+        a < 0 ? n.textTracks.length - 1 : a,
         "showing"
       ), n.$state.lastKeyboardAction.set({
         action: "previousCaptionLanguage",
@@ -1142,8 +1519,8 @@ const te = {
   decreasePlaybackRate: {
     keys: ["a"],
     onKeyUp({ event: e, player: n, remote: o }) {
-      const c = P.indexOf(n.playbackRate) - 1;
-      c >= 0 && (o.changePlaybackRate(P[c]), n.$state.lastKeyboardAction.set({
+      const a = S.indexOf(n.playbackRate) - 1;
+      a >= 0 && (o.changePlaybackRate(S[a]), n.$state.lastKeyboardAction.set({
         action: "decreasePlaybackRate",
         event: e
       }));
@@ -1152,8 +1529,8 @@ const te = {
   increasePlaybackRate: {
     keys: ["d"],
     onKeyUp({ event: e, player: n, remote: o }) {
-      const c = P.indexOf(n.playbackRate) + 1;
-      c < P.length && (o.changePlaybackRate(P[c]), n.$state.lastKeyboardAction.set({
+      const a = S.indexOf(n.playbackRate) + 1;
+      a < S.length && (o.changePlaybackRate(S[a]), n.$state.lastKeyboardAction.set({
         action: "increasePlaybackRate",
         event: e
       }));
@@ -1187,7 +1564,7 @@ const te = {
     }
   }
 };
-function fo(e, n = 1e3) {
+function si(e, n = 1e3) {
   let o = !1;
   return () => {
     o || (e(), o = !0, setTimeout(() => {
@@ -1195,7 +1572,7 @@ function fo(e, n = 1e3) {
     }, n));
   };
 }
-const ne = {
+const me = {
   volume: 1,
   muted: !1,
   lang: null,
@@ -1206,20 +1583,20 @@ const ne = {
   invert: !1,
   comments: !1
 };
-class bo {
+class ci {
   constructor() {
-    L(this, "playerId", "studio-player");
-    L(this, "mediaId", null);
-    L(this, "data", ne);
-    L(this, "time", null);
-    L(this, "saveTime", () => {
+    N(this, "playerId", "studio-player");
+    N(this, "mediaId", null);
+    N(this, "data", me);
+    N(this, "time", null);
+    N(this, "saveTime", () => {
       if (!this.mediaId) return;
       const n = (this.time ?? 0).toString();
       localStorage.setItem(this.mediaId, n);
     });
-    L(this, "saveTimeThrottled", fo(this.saveTime, 1e3));
+    N(this, "saveTimeThrottled", si(this.saveTime, 1e3));
     // only used for useStudioPlayer hook's state initialization
-    L(this, "initializeState", () => {
+    N(this, "initializeState", () => {
       const n = localStorage.getItem(this.playerId);
       if (n)
         try {
@@ -1234,7 +1611,7 @@ class bo {
         interactionsDisabled: !1
       };
     });
-    L(this, "saveData", (n, o) => {
+    N(this, "saveData", (n, o) => {
       this.data = {
         ...this.data,
         [n]: o
@@ -1269,8 +1646,8 @@ class bo {
     return this.time;
   }
   async setTime(n, o) {
-    const a = n < 0;
-    this.time = a ? null : n, a || o ? this.saveTime() : this.saveTimeThrottled();
+    const i = n < 0;
+    this.time = i ? null : n, i || o ? this.saveTime() : this.saveTimeThrottled();
   }
   async getCaptions() {
     return this.data.captions;
@@ -1284,19 +1661,19 @@ class bo {
   async setPlaybackRate(n) {
     this.data.rate = n, this.save();
   }
-  onChange(n, o, a = "studio-player") {
-    const c = a ? localStorage.getItem(a) : null, i = o ? localStorage.getItem(o) : null;
-    this.playerId = a, this.mediaId = o;
+  onChange(n, o, i = "studio-player") {
+    const a = i ? localStorage.getItem(i) : null, c = o ? localStorage.getItem(o) : null;
+    this.playerId = i, this.mediaId = o;
     let l = {};
-    if (c)
+    if (a)
       try {
-        l = JSON.parse(c);
+        l = JSON.parse(a);
       } catch {
       }
     this.data = {
-      ...ne,
+      ...me,
       ...l
-    }, this.time = i ? +i : null;
+    }, this.time = c ? +c : null;
   }
   save() {
     if (!this.playerId) return;
@@ -1304,119 +1681,136 @@ class bo {
     localStorage.setItem(this.playerId, n);
   }
 }
-function vo({
-  hideFullScreen: e,
-  comments: n
-}) {
-  const o = K(() => new bo(), []), [a, c] = T(
-    o.initializeState
-  ), i = m(
-    (d) => {
-      c((_) => (o.saveData("multiplier", d), {
-        ..._,
-        captionsFontSizeMultiplier: d
+function li(e) {
+  const n = F(() => new ci(), []), [o, i] = P(
+    n.initializeState
+  ), a = p(
+    (m) => {
+      i((h) => (n.saveData("multiplier", m), {
+        ...h,
+        captionsFontSizeMultiplier: m
       }));
     },
-    [o]
-  ), l = m(() => {
-    c((d) => {
-      const _ = !d.captionPositionOnTop;
-      return o.saveData("ontop", _), {
-        ...d,
-        captionPositionOnTop: _
+    [n]
+  ), c = p(() => {
+    i((m) => {
+      const h = !m.captionPositionOnTop;
+      return n.saveData("ontop", h), {
+        ...m,
+        captionPositionOnTop: h
       };
     });
-  }, [o]), g = m(() => {
-    c((d) => {
-      const _ = !d.captionsInvertColors;
-      return o.saveData("invert", _), {
-        ...d,
-        captionsInvertColors: _
+  }, [n]), l = p(() => {
+    i((m) => {
+      const h = !m.captionsInvertColors;
+      return n.saveData("invert", h), {
+        ...m,
+        captionsInvertColors: h
       };
     });
-  }, [o]), b = m(() => {
-    c((d) => {
-      const _ = !d.commentsEnabled;
-      return o.saveData("comments", _), {
-        ...d,
-        commentsEnabled: _
+  }, [n]), u = p(() => {
+    i((m) => {
+      const h = !m.commentsEnabled;
+      return n.saveData("comments", h), {
+        ...m,
+        commentsEnabled: h
       };
     });
-  }, [o]), k = m(() => {
-    c((d) => ({
-      ...d,
+  }, [n]), _ = p(() => {
+    i((m) => ({
+      ...m,
       interactionsDisabled: !1
     }));
-  }, []), y = m(() => {
-    c((d) => ({
-      ...d,
+  }, []), f = p(() => {
+    i((m) => ({
+      ...m,
       interactionsDisabled: !0
     }));
-  }, []), N = K(() => e ? {
-    ...te,
+  }, []), b = F(() => e ? {
+    ...de,
     toggleFullscreen: []
-  } : te, [e]);
+  } : de, [e]);
   return {
     contextValue: {
-      state: a,
-      setCaptionsFontSizeMultiplier: i,
-      toggleCaptionPositionOnTop: l,
-      toggleCaptionsInvertColors: g,
-      enableInteractions: k,
-      disableInteractions: y,
-      toggleComments: b,
-      hideFullScreen: e,
-      hasComments: n.length > 0,
-      comments: n
+      state: o,
+      setCaptionsFontSizeMultiplier: a,
+      toggleCaptionPositionOnTop: c,
+      toggleCaptionsInvertColors: l,
+      enableInteractions: _,
+      disableInteractions: f,
+      toggleComments: u
     },
-    shortcuts: N,
-    storage: o
+    shortcuts: b,
+    storage: n
   };
 }
-const Co = {};
-function So({
+const ri = {}, Q = () => {
+};
+function Ci({
   title: e,
-  src: n,
-  captions: o = [],
+  remoteRef: n,
+  src: o,
+  captions: i = [],
   thumbnail: a,
   hideFullScreen: c = !1,
-  comments: i = [],
-  locale: l = "en"
+  comments: l = [],
+  locale: u = "en",
+  annotations: _ = [],
+  quizMarkers: f = [],
+  interactive: b = !1,
+  onAnnotationClick: m = Q,
+  onQuizMarkerClick: h = Q,
+  onInteractivePinClick: L = Q,
+  interactiveMenuElements: R = []
 }) {
-  const { contextValue: g, shortcuts: b, storage: k } = vo({
-    hideFullScreen: c,
-    comments: i
-  }), { i18n: y } = p();
-  return $(() => {
-    y.changeLanguage(l);
-  }, [y, l]), /* @__PURE__ */ t(f.Provider, { value: g, children: /* @__PURE__ */ s(
-    Pe,
+  const { contextValue: D, shortcuts: x, storage: Be } = li(c), { i18n: ie } = C(), z = Z();
+  return V(() => {
+    z && n && (z.pauseControls(), n.current = z);
+  }, [z, n]), V(() => {
+    ie.changeLanguage(u);
+  }, [ie, u]), /* @__PURE__ */ t(
+    nt,
     {
-      storage: k,
-      title: e,
-      src: n,
-      keyShortcuts: b,
-      playsInline: !0,
-      keyDisabled: g.state.interactionsDisabled,
-      children: [
-        /* @__PURE__ */ t(xn, {}),
-        /* @__PURE__ */ s(Be, { className: Co.mediaProvider, children: [
-          /* @__PURE__ */ t(Kn, { src: a }),
-          /* @__PURE__ */ t(kn, {}),
-          /* @__PURE__ */ t(qe, {}),
-          /* @__PURE__ */ t(Xe, { captions: o }),
-          /* @__PURE__ */ t(dt, {}),
-          /* @__PURE__ */ t(Wn, {}),
-          /* @__PURE__ */ t(Sn, {})
-        ] }),
-        /* @__PURE__ */ t(bt, {})
-      ]
+      hideFullScreen: c,
+      comments: l,
+      annotations: _,
+      quizMarkers: f,
+      interactive: b,
+      onAnnotationClick: m,
+      onQuizMarkerClick: h,
+      onInteractivePinClick: L,
+      interactiveMenuElements: R,
+      children: /* @__PURE__ */ t(tt, { contextValue: D, children: /* @__PURE__ */ s(
+        Ue,
+        {
+          storage: Be,
+          title: e,
+          src: o,
+          keyShortcuts: x,
+          playsInline: !0,
+          keyDisabled: D.state.interactionsDisabled,
+          children: [
+            /* @__PURE__ */ t(Jn, {}),
+            /* @__PURE__ */ s(qe, { className: ri.mediaProvider, children: [
+              /* @__PURE__ */ t(io, { src: a }),
+              /* @__PURE__ */ t(On, {}),
+              /* @__PURE__ */ t(mt, {}),
+              /* @__PURE__ */ t(vt, { captions: i }),
+              /* @__PURE__ */ t(Mt, { comments: l }),
+              /* @__PURE__ */ t(mo, {}),
+              /* @__PURE__ */ t(Un, {})
+            ] }),
+            /* @__PURE__ */ t(Rt, {}),
+            /* @__PURE__ */ t(st, { annotations: _ })
+          ]
+        }
+      ) })
     }
-  ) });
+  );
 }
 export {
-  et as CAPTION_FONT_SIZE_MULTIPLIERS,
-  ue as COMMENT_DURATION,
-  P as PLAYBACK_RATES,
-  So as StudioPlayer
+  ft as CAPTION_FONT_SIZE_MULTIPLIERS,
+  xe as COMMENT_DURATION,
+  S as PLAYBACK_RATES,
+  Ci as StudioPlayer
 };