@instructure/studio-player 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/StudioPlayer/hooks/useCallbackOnEsc.d.ts +1 -0
  2. package/dist/StudioPlayer/useStudioPlayer.d.ts +9 -0
  3. package/dist/index.css +1 -1
  4. package/dist/studio-player.es.js +750 -465
  5. package/package.json +16 -14
package/dist/studio-player.es.js CHANGED
@@ -1,518 +1,584 @@
1
- import { jsx as e, jsxs as l, Fragment as E } from "react/jsx-runtime";
2
- import { useCallback as h, createContext as U, useContext as u, useEffect as Q, useState as T, useMemo as W, useRef as ce } from "react";
3
- import { Spinner as F, useMediaState as r, isTrackCaptionKind as ie, useMediaRemote as D, Track as re, Captions as ue, usePlaybackRateOptions as de, useCaptionOptions as me, useVideoQualityOptions as he, useMediaStore as G, FullscreenButton as X, useMediaPlayer as _e, PlayButton as ge, Poster as pe, Time as z, TimeSlider as w, MuteButton as fe, VolumeSlider as V, MediaPlayer as be, MediaProvider as ke } from "@vidstack/react";
4
- import { useFloating as Ce, autoUpdate as ve, flip as we, arrow as ye, useDismiss as Le, useInteractions as Ne, FloatingFocusManager as xe, FloatingArrow as Me } from "@floating-ui/react";
5
- import './index.css';const Be = "_media-buffering-indicator_1fwjr_1", He = "_media-buffering-spinner_1fwjr_17", Ve = "_media-buffering-spin_1fwjr_17", Ie = "_media-buffering-track_1fwjr_22", Pe = "_media-buffering-track-fill_1fwjr_27", I = {
1
+ import { jsx as e, jsxs as a, Fragment as Q } from "react/jsx-runtime";
2
+ import { Spinner as j, useMediaState as m, isTrackCaptionKind as de, useMediaRemote as O, Track as he, Captions as me, usePlaybackRateOptions as _e, useCaptionOptions as pe, useVideoQualityOptions as be, useMediaStore as W, FullscreenButton as J, useMediaPlayer as fe, PlayButton as ge, Poster as ke, Time as A, TimeSlider as B, MuteButton as we, VolumeSlider as S, MediaPlayer as Ce, MediaProvider as ve } from "@vidstack/react";
3
+ import { createContext as X, useContext as i, useCallback as d, useEffect as G, useState as v, useMemo as Y, useRef as ye } from "react";
4
+ import { useFloating as Le, autoUpdate as Me, flip as Ne, arrow as xe, useDismiss as Ie, useInteractions as Be, FloatingFocusManager as He, FloatingArrow as Ve } from "@floating-ui/react";
5
+ import './index.css';const Te = "_media-buffering-indicator_1fwjr_1", Pe = "_media-buffering-spinner_1fwjr_17", Se = "_media-buffering-spin_1fwjr_17", Re = "_media-buffering-track_1fwjr_22", Fe = "_media-buffering-track-fill_1fwjr_27", R = {
6
6
  "media-buffering-indicator": "_media-buffering-indicator_1fwjr_1",
7
- mediaBufferingIndicator: Be,
7
+ mediaBufferingIndicator: Te,
8
8
  "media-buffering-spinner": "_media-buffering-spinner_1fwjr_17",
9
- mediaBufferingSpinner: He,
9
+ mediaBufferingSpinner: Pe,
10
10
  "media-buffering-spin": "_media-buffering-spin_1fwjr_17",
11
- mediaBufferingSpin: Ve,
11
+ mediaBufferingSpin: Se,
12
12
  "media-buffering-track": "_media-buffering-track_1fwjr_22",
13
- mediaBufferingTrack: Ie,
13
+ mediaBufferingTrack: Re,
14
14
  "media-buffering-track-fill": "_media-buffering-track-fill_1fwjr_27",
15
- mediaBufferingTrackFill: Pe
15
+ mediaBufferingTrackFill: Fe
16
16
  };
17
- function Te() {
18
- return /* @__PURE__ */ e("div", { className: I.mediaBufferingIndicator, children: /* @__PURE__ */ l(F.Root, { className: I.mediaBufferingSpinner, size: 96, children: [
19
- /* @__PURE__ */ e(F.Track, { className: I.mediaBufferingTrack, width: 8 }),
17
+ function Ze() {
18
+ return /* @__PURE__ */ e("div", { className: R.mediaBufferingIndicator, children: /* @__PURE__ */ a(j.Root, { className: R.mediaBufferingSpinner, size: 96, children: [
19
+ /* @__PURE__ */ e(j.Track, { className: R.mediaBufferingTrack, width: 8 }),
20
20
  /* @__PURE__ */ e(
21
- F.TrackFill,
21
+ j.TrackFill,
22
22
  {
23
- className: I.mediaBufferingTrackFill,
23
+ className: R.mediaBufferingTrackFill,
24
24
  width: 8
25
25
  }
26
26
  )
27
27
  ] }) });
28
28
  }
29
- const Y = (n) => /* @__PURE__ */ l("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: [
29
+ const p = X(null), ee = (t) => /* @__PURE__ */ a("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
30
30
  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_149_104418", children: /* @__PURE__ */ e("rect", { width: 24, height: 24, fill: "white" }) }) }),
31
31
  /* @__PURE__ */ e("g", { clipPath: "url(#clip0_149_104418)", children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22.5 21.8125V2.3125C22.5 1.9 22.1625 1.5625 21.75 1.5625H2.25C1.8375 1.5625 1.5 1.9 1.5 2.3125V21.8125C1.5 22.225 1.8375 22.5625 2.25 22.5625H21.75C22.1625 22.5625 22.5 22.225 22.5 21.8125ZM21.75 0.0625C22.9905 0.0625 24 1.072 24 2.3125V21.8125C24 23.053 22.9905 24.0625 21.75 24.0625H2.25C1.0095 24.0625 0 23.053 0 21.8125V2.3125C0 1.072 1.0095 0.0625 2.25 0.0625H21.75ZM10.744 10.6709H8.74403V10.0042H6.07736V14.0042H8.74403V13.3375H10.744V14.6709C10.744 15.4042 10.144 16.0042 9.41069 16.0042H5.41069C4.67736 16.0042 4.07736 15.4042 4.07736 14.6709V9.33753C4.07736 8.6042 4.67736 8.0042 5.41069 8.0042H9.41069C10.144 8.0042 10.744 8.6042 10.744 9.33753V10.6709ZM19.8065 10.6709H17.8065V10.0042H15.1399V14.0042H17.8065V13.3375H19.8065V14.6709C19.8065 15.4042 19.2065 16.0042 18.4732 16.0042H14.4732C13.7399 16.0042 13.1399 15.4042 13.1399 14.6709V9.33753C13.1399 8.6042 13.7399 8.0042 14.4732 8.0042H18.4732C19.2065 8.0042 19.8065 8.6042 19.8065 9.33753V10.6709Z", fill: "currentColor" }) })
32
- ] }), J = (n) => /* @__PURE__ */ l("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...n, children: [
32
+ ] }), te = (t) => /* @__PURE__ */ a("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
33
33
  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_149_104406", children: /* @__PURE__ */ e("rect", { width: 24, height: 24, fill: "white" }) }) }),
34
34
  /* @__PURE__ */ e("g", { clipPath: "url(#clip0_149_104406)", children: /* @__PURE__ */ e("path", { d: "M21.3333 0H2.66666C1.18666 0 0 1.35 0 3V21C0 22.65 1.18666 24 2.66666 24H21.3333C22.8 24 24 22.65 24 21V3C24 1.35 22.8 0 21.3333 0ZM10.6667 10.6667H8.66666V10H6V14H8.66666V13.3333H10.6667V14.6667C10.6667 15.4 10.0667 16 9.33334 16H5.33334C4.6 16 4 15.4 4 14.6667V9.33334C4 8.6 4.6 8 5.33334 8H9.33334C10.0667 8 10.6667 8.6 10.6667 9.33334V10.6667ZM20.0042 10.6667H18.0042V10H15.3375V14H18.0042V13.3333H20.0042V14.6667C20.0042 15.4 19.4042 16 18.6708 16H14.6708C13.9375 16 13.3375 15.4 13.3375 14.6667V9.33334C13.3375 8.6 13.9375 8 14.6708 8H18.6708C19.4042 8 20.0042 8.6 20.0042 9.33334V10.6667Z", fill: "currentColor" }) })
35
35
  ] });
36
- function Re() {
37
- const n = r("hasCaptions"), t = r("textTrack"), a = t && ie(t), o = D(), c = h(
38
- (i) => {
39
- o.toggleCaptions(i.nativeEvent);
36
+ function je() {
37
+ const t = m("hasCaptions"), n = m("textTrack"), o = n && de(n), c = O(), s = i(p), r = d(
38
+ (u) => {
39
+ c.toggleCaptions(u.nativeEvent);
40
40
  },
41
- [o]
41
+ [c]
42
42
  );
43
- return n ? /* @__PURE__ */ e(
43
+ return t ? /* @__PURE__ */ e(
44
44
  "button",
45
45
  {
46
46
  type: "button",
47
47
  className: "controls-button",
48
- onClick: c,
48
+ onClick: r,
49
49
  "aria-label": "Captions",
50
- children: a ? /* @__PURE__ */ e(J, { className: "controls-button-icon" }) : /* @__PURE__ */ e(Y, { className: "controls-button-icon" })
50
+ tabIndex: s != null && s.state.interactionsDisabled ? -1 : 0,
51
+ children: o ? /* @__PURE__ */ e(te, { className: "controls-button-icon" }) : /* @__PURE__ */ e(ee, { className: "controls-button-icon" })
51
52
  }
52
53
  ) : null;
53
54
  }
54
- const N = U(null), Se = "_captions_yfgdn_1", Fe = {
55
- captions: Se
55
+ const $e = "_captions_13epz_1", Oe = {
56
+ captions: $e
56
57
  };
57
- function $e({ captions: n }) {
58
- const t = r("hasCaptions"), a = u(N);
59
- return /* @__PURE__ */ l(E, { children: [
60
- n.map((o) => /* @__PURE__ */ e(
61
- re,
58
+ function qe({ captions: t }) {
59
+ const n = m("hasCaptions"), o = i(p);
60
+ return /* @__PURE__ */ a(Q, { children: [
61
+ t.map((c) => /* @__PURE__ */ e(
62
+ he,
62
63
  {
63
64
  kind: "subtitles",
64
- type: o.type,
65
- language: o.language,
66
- label: o.label,
67
- src: o.src
65
+ type: c.type,
66
+ language: c.language,
67
+ label: c.label,
68
+ src: c.src
68
69
  },
69
- o.label
70
+ c.label
70
71
  )),
71
- t ? /* @__PURE__ */ e(
72
- ue,
72
+ n ? /* @__PURE__ */ e(
73
+ "div",
73
74
  {
74
- className: Fe.captions,
75
75
  style: {
76
- "--captions-font-size-multiplier": (a == null ? void 0 : a.state.captionsFontSizeMultiplier.value) ?? 1
77
- }
76
+ display: "contents",
77
+ "--captions-font-size-multiplier": (o == null ? void 0 : o.state.captionsFontSizeMultiplier.value) ?? 1,
78
+ "--captions-flex-direction": o != null && o.state.captionPositionOnTop ? "column" : "column-reverse",
79
+ "--captions-color": o != null && o.state.captionsInvertColors ? "rgba(22, 22, 22)" : "white",
80
+ "--captions-background-color": o != null && o.state.captionsInvertColors ? "rgba(255, 255, 255, 0.75)" : "rgba(22, 22, 22, 0.75)"
81
+ },
82
+ children: /* @__PURE__ */ e(me, { className: Oe.captions })
78
83
  }
79
84
  ) : null
80
85
  ] });
81
86
  }
82
- const Ze = "_root_zdwuq_1", qe = "_left-controls_zdwuq_27", ze = "_right-controls_zdwuq_33", je = "_indicators_zdwuq_39", Oe = "_normal-timeline_zdwuq_48", Ae = "_compact-timeline_zdwuq_54", f = {
83
- root: Ze,
87
+ const ze = "_root_zdwuq_1", Ae = "_left-controls_zdwuq_27", Ke = "_right-controls_zdwuq_33", De = "_indicators_zdwuq_39", Ee = "_normal-timeline_zdwuq_48", Ue = "_compact-timeline_zdwuq_54", M = {
88
+ root: ze,
84
89
  "left-controls": "_left-controls_zdwuq_27",
85
- leftControls: qe,
90
+ leftControls: Ae,
86
91
  "right-controls": "_right-controls_zdwuq_33",
87
- rightControls: ze,
88
- indicators: je,
92
+ rightControls: Ke,
93
+ indicators: De,
89
94
  "normal-timeline": "_normal-timeline_zdwuq_48",
90
- normalTimeline: Oe,
95
+ normalTimeline: Ee,
91
96
  "compact-timeline": "_compact-timeline_zdwuq_54",
92
- compactTimeline: Ae
97
+ compactTimeline: Ue
93
98
  };
94
- function Ke() {
95
- return /* @__PURE__ */ l("div", { className: f.root, children: [
96
- /* @__PURE__ */ e(A, { className: f.normalTimeline }),
97
- /* @__PURE__ */ l("div", { className: f.leftControls, children: [
98
- /* @__PURE__ */ e(Qn, {}),
99
- /* @__PURE__ */ e(wt, {})
99
+ function Qe() {
100
+ return /* @__PURE__ */ a("div", { className: M.root, children: [
101
+ /* @__PURE__ */ e(E, { className: M.normalTimeline }),
102
+ /* @__PURE__ */ a("div", { className: M.leftControls, children: [
103
+ /* @__PURE__ */ e(hn, {}),
104
+ /* @__PURE__ */ e(On, {})
100
105
  ] }),
101
- /* @__PURE__ */ e("div", { className: f.indicators, children: /* @__PURE__ */ e(ct, {}) }),
102
- /* @__PURE__ */ e(A, { className: f.compactTimeline }),
103
- /* @__PURE__ */ l("div", { className: f.rightControls, children: [
104
- /* @__PURE__ */ e(Re, {}),
105
- /* @__PURE__ */ e(Nn, {}),
106
- /* @__PURE__ */ e(jn, {})
106
+ /* @__PURE__ */ e("div", { className: M.indicators, children: /* @__PURE__ */ e(Mn, {}) }),
107
+ /* @__PURE__ */ e(E, { className: M.compactTimeline }),
108
+ /* @__PURE__ */ a("div", { className: M.rightControls, children: [
109
+ /* @__PURE__ */ e(je, {}),
110
+ /* @__PURE__ */ e(Zt, {}),
111
+ /* @__PURE__ */ e(Yt, {})
107
112
  ] })
108
113
  ] });
109
114
  }
110
- const Ee = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.0692 12C21.0692 11.4776 21.0212 10.944 20.9238 10.4104L23.5511 8.13318L21.0579 3.87247L17.7431 4.97788C16.9059 4.28329 15.9515 3.73553 14.9449 3.37271L14.2616 0H9.28941L8.60612 3.37129C7.58823 3.73553 6.65082 4.27482 5.80659 4.97647L2.49318 3.87247L0 8.13318L2.62729 10.4104C2.52988 10.944 2.48188 11.4776 2.48188 12C2.48188 12.5224 2.52988 13.056 2.62729 13.5896L0 15.8668L2.49318 20.1275L5.808 19.0221C6.64518 19.7167 7.59953 20.2645 8.60612 20.6273L9.28941 24H14.2616L14.9449 20.6287C15.9614 20.2645 16.9002 19.7252 17.7445 19.0235L21.0579 20.1289L23.5511 15.8682L20.9238 13.5911C21.0212 13.056 21.0692 12.5224 21.0692 12ZM11.7755 16.9412C9.05082 16.9412 6.83435 14.7247 6.83435 12C6.83435 9.2753 9.05082 7.05883 11.7755 7.05883C14.5002 7.05883 16.7167 9.2753 16.7167 12C16.7167 14.7247 14.5002 16.9412 11.7755 16.9412Z", fill: "currentColor" }) }), m = U(null), Ue = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 3.03704L7.03704 2L14.037 9L7.03704 16L6 14.963L11.963 9L6 3.03704Z", fill: "currentColor" }) }), Qe = "_menu-hint_k49ve_1", We = "_menu-button_k49ve_5", De = "_menu-label_k49ve_37", Ge = "_menu-icon_k49ve_42", P = {
115
+ const We = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.0692 12C21.0692 11.4776 21.0212 10.944 20.9238 10.4104L23.5511 8.13318L21.0579 3.87247L17.7431 4.97788C16.9059 4.28329 15.9515 3.73553 14.9449 3.37271L14.2616 0H9.28941L8.60612 3.37129C7.58823 3.73553 6.65082 4.27482 5.80659 4.97647L2.49318 3.87247L0 8.13318L2.62729 10.4104C2.52988 10.944 2.48188 11.4776 2.48188 12C2.48188 12.5224 2.52988 13.056 2.62729 13.5896L0 15.8668L2.49318 20.1275L5.808 19.0221C6.64518 19.7167 7.59953 20.2645 8.60612 20.6273L9.28941 24H14.2616L14.9449 20.6287C15.9614 20.2645 16.9002 19.7252 17.7445 19.0235L21.0579 20.1289L23.5511 15.8682L20.9238 13.5911C21.0212 13.056 21.0692 12.5224 21.0692 12ZM11.7755 16.9412C9.05082 16.9412 6.83435 14.7247 6.83435 12C6.83435 9.2753 9.05082 7.05883 11.7755 7.05883C14.5002 7.05883 16.7167 9.2753 16.7167 12C16.7167 14.7247 14.5002 16.9412 11.7755 16.9412Z", fill: "currentColor" }) }), b = X(null), Je = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 3.03704L7.03704 2L14.037 9L7.03704 16L6 14.963L11.963 9L6 3.03704Z", fill: "currentColor" }) }), Xe = "_menu-hint_k49ve_1", Ge = "_menu-button_k49ve_5", Ye = "_menu-label_k49ve_37", et = "_menu-icon_k49ve_42", F = {
111
116
  "menu-hint": "_menu-hint_k49ve_1",
112
- menuHint: Qe,
117
+ menuHint: Xe,
113
118
  "menu-button": "_menu-button_k49ve_5",
114
- menuButton: We,
119
+ menuButton: Ge,
115
120
  "menu-label": "_menu-label_k49ve_37",
116
- menuLabel: De,
121
+ menuLabel: Ye,
117
122
  "menu-icon": "_menu-icon_k49ve_42",
118
- menuIcon: Ge
123
+ menuIcon: et
119
124
  };
120
- function x({ label: n, hint: t, onClick: a, Icon: o }) {
121
- return /* @__PURE__ */ l("button", { type: "button", className: P.menuButton, onClick: a, children: [
122
- o && /* @__PURE__ */ e(o, { className: P.menuIcon }),
123
- /* @__PURE__ */ e("span", { className: P.menuLabel, children: n }),
124
- /* @__PURE__ */ e("span", { className: P.menuHint, children: t }),
125
- /* @__PURE__ */ e(Ue, {})
125
+ function T({ label: t, hint: n, onClick: o, Icon: c }) {
126
+ return /* @__PURE__ */ a("button", { type: "button", className: F.menuButton, onClick: o, children: [
127
+ c && /* @__PURE__ */ e(c, { className: F.menuIcon }),
128
+ /* @__PURE__ */ e("span", { className: F.menuLabel, children: t }),
129
+ /* @__PURE__ */ e("span", { className: F.menuHint, children: n }),
130
+ /* @__PURE__ */ e(Je, {})
126
131
  ] });
127
132
  }
128
- const Xe = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.42229 2.82911C4.71149 1.83006 6.23876 1.19768 7.8383 1L7.96797 2.05432C6.55867 2.22862 5.21101 2.7866 4.07273 3.66874L3.42229 2.82911ZM5.44493 6.71393L9.49745 10.7665L17.0924 3.1705L17.8438 3.92297L9.49745 12.2693L4.69352 7.46534L5.44493 6.71393ZM17.932 8.83829C17.8618 8.27074 17.7364 7.70745 17.5589 7.16222L16.5482 7.49276C16.7055 7.97209 16.816 8.46843 16.8766 8.96689C16.917 9.29742 16.9372 9.6269 16.9372 9.96594C16.9372 10.305 16.917 10.6344 16.8777 10.9639C16.7033 12.3732 16.1454 13.7209 15.2632 14.8592L16.1029 15.5096C17.1019 14.2204 17.7343 12.6931 17.932 11.0925C17.9766 10.7205 18 10.3486 18 9.96594C18 9.58332 17.9766 9.21134 17.932 8.83829ZM1.05432 8.96795L0 8.83829C0.197684 7.23874 0.830061 5.71147 1.82911 4.42228L2.66874 5.07272C1.7866 6.211 1.22862 7.55865 1.05432 8.96795ZM0 11.0936C0.197684 12.6931 0.830061 14.2204 1.82911 15.5096L2.66874 14.8591C1.7866 13.7209 1.22862 12.3732 1.05432 10.9639L0 11.0936ZM10.0939 1.00011C11.6935 1.19673 13.2207 1.83017 14.5099 2.82922L13.8595 3.66884C12.7202 2.7867 11.3736 2.22872 9.96426 2.05442L10.0939 1.00011Z", fill: "currentColor" }) });
129
- function Ye() {
130
- const n = u(m), t = r("playbackRate"), a = h(() => {
131
- n && n.setPage("speed");
132
- }, [n]);
133
- return n ? /* @__PURE__ */ e(
134
- x,
133
+ const tt = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.42229 2.82911C4.71149 1.83006 6.23876 1.19768 7.8383 1L7.96797 2.05432C6.55867 2.22862 5.21101 2.7866 4.07273 3.66874L3.42229 2.82911ZM5.44493 6.71393L9.49745 10.7665L17.0924 3.1705L17.8438 3.92297L9.49745 12.2693L4.69352 7.46534L5.44493 6.71393ZM17.932 8.83829C17.8618 8.27074 17.7364 7.70745 17.5589 7.16222L16.5482 7.49276C16.7055 7.97209 16.816 8.46843 16.8766 8.96689C16.917 9.29742 16.9372 9.6269 16.9372 9.96594C16.9372 10.305 16.917 10.6344 16.8777 10.9639C16.7033 12.3732 16.1454 13.7209 15.2632 14.8592L16.1029 15.5096C17.1019 14.2204 17.7343 12.6931 17.932 11.0925C17.9766 10.7205 18 10.3486 18 9.96594C18 9.58332 17.9766 9.21134 17.932 8.83829ZM1.05432 8.96795L0 8.83829C0.197684 7.23874 0.830061 5.71147 1.82911 4.42228L2.66874 5.07272C1.7866 6.211 1.22862 7.55865 1.05432 8.96795ZM0 11.0936C0.197684 12.6931 0.830061 14.2204 1.82911 15.5096L2.66874 14.8591C1.7866 13.7209 1.22862 12.3732 1.05432 10.9639L0 11.0936ZM10.0939 1.00011C11.6935 1.19673 13.2207 1.83017 14.5099 2.82922L13.8595 3.66884C12.7202 2.7867 11.3736 2.22872 9.96426 2.05442L10.0939 1.00011Z", fill: "currentColor" }) });
134
+ function nt() {
135
+ const t = i(b), n = m("playbackRate"), o = d(() => {
136
+ t && t.setPage("speed");
137
+ }, [t]);
138
+ return t ? /* @__PURE__ */ e(
139
+ T,
135
140
  {
136
141
  label: "Playback Speed",
137
- hint: `${t}x`,
138
- onClick: a,
139
- Icon: Xe
142
+ hint: `${n}x`,
143
+ onClick: o,
144
+ Icon: tt
140
145
  }
141
146
  ) : null;
142
147
  }
143
- function Je() {
144
- const n = u(m), t = r("hasCaptions"), a = r("textTrack"), o = h(() => {
145
- n && n.setPage("captions");
146
- }, [n]);
147
- return n && t ? /* @__PURE__ */ e(
148
- x,
148
+ function ot() {
149
+ const t = i(b), n = m("hasCaptions"), o = m("textTrack"), c = d(() => {
150
+ t && t.setPage("captions");
151
+ }, [t]);
152
+ return t && n ? /* @__PURE__ */ e(
153
+ T,
149
154
  {
150
155
  label: "Captions",
151
- hint: (a == null ? void 0 : a.label) ?? "Off",
152
- onClick: o,
153
- Icon: Y
156
+ hint: (o == null ? void 0 : o.label) ?? "Off",
157
+ onClick: c,
158
+ Icon: ee
154
159
  }
155
160
  ) : null;
156
161
  }
157
- const en = (n) => /* @__PURE__ */ l("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: [
162
+ const at = (t) => /* @__PURE__ */ a("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
158
163
  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_412_23039", children: /* @__PURE__ */ e("rect", { width: 18, height: 18, fill: "white" }) }) }),
159
- /* @__PURE__ */ l("g", { clipPath: "url(#clip0_412_23039)", children: [
164
+ /* @__PURE__ */ a("g", { clipPath: "url(#clip0_412_23039)", children: [
160
165
  /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.46326 3.85039H0V2.65039H2.46326C2.7388 1.36449 3.88181 0.400391 5.24999 0.400391C6.61818 0.400391 7.76119 1.36449 8.03673 2.65039H18V3.85039H8.03673C7.76119 5.13629 6.61818 6.10039 5.24999 6.10039C3.88181 6.10039 2.7388 5.13629 2.46326 3.85039ZM3.59999 3.25039C3.59999 2.33912 4.33872 1.60039 5.24999 1.60039C6.16126 1.60039 6.89999 2.33912 6.89999 3.25039C6.89999 4.16166 6.16126 4.90039 5.24999 4.90039C4.33872 4.90039 3.59999 4.16166 3.59999 3.25039Z", fill: "currentColor" }),
161
166
  /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 8.40039H9.46326C9.7388 7.11449 10.8818 6.15039 12.25 6.15039C13.6182 6.15039 14.7612 7.11449 15.0367 8.40039H18V9.60039H15.0367C14.7612 10.8863 13.6182 11.8504 12.25 11.8504C10.8818 11.8504 9.7388 10.8863 9.46326 9.60039H0V8.40039ZM12.25 7.35039C11.3387 7.35039 10.6 8.08912 10.6 9.00039C10.6 9.91166 11.3387 10.6504 12.25 10.6504C13.1613 10.6504 13.9 9.91166 13.9 9.00039C13.9 8.08912 13.1613 7.35039 12.25 7.35039Z", fill: "currentColor" }),
162
167
  /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.24999 17.6004C6.61818 17.6004 7.76119 16.6363 8.03673 15.3504H18V14.1504H8.03673C7.76119 12.8645 6.61818 11.9004 5.24999 11.9004C3.88181 11.9004 2.7388 12.8645 2.46326 14.1504H0V15.3504H2.46326C2.7388 16.6363 3.88181 17.6004 5.24999 17.6004ZM5.24999 13.1004C4.33872 13.1004 3.59999 13.8391 3.59999 14.7504C3.59999 15.6617 4.33872 16.4004 5.24999 16.4004C6.16126 16.4004 6.89999 15.6617 6.89999 14.7504C6.89999 13.8391 6.16126 13.1004 5.24999 13.1004Z", fill: "currentColor" })
163
168
  ] })
164
169
  ] });
165
- function nn() {
166
- const n = u(m), t = r("autoQuality"), a = r("quality"), o = h(() => {
167
- n && n.setPage("quality");
168
- }, [n]);
169
- return n && a ? /* @__PURE__ */ e(
170
- x,
170
+ function ct() {
171
+ const t = i(b), n = m("autoQuality"), o = m("quality"), c = d(() => {
172
+ t && t.setPage("quality");
173
+ }, [t]);
174
+ return t && o ? /* @__PURE__ */ e(
175
+ T,
171
176
  {
172
177
  label: "Quality",
173
- hint: t ? `Auto (${a.height}p)` : `${a.height}p`,
174
- onClick: o,
175
- Icon: en
178
+ hint: n ? `Auto (${o.height}p)` : `${o.height}p`,
179
+ onClick: c,
180
+ Icon: at
176
181
  }
177
182
  ) : null;
178
183
  }
179
- function k(n) {
180
- Q(() => {
181
- const t = (a) => {
182
- a.key === "Escape" && (n == null || n());
184
+ function y(t) {
185
+ G(() => {
186
+ const n = (o) => {
187
+ o.key === "Escape" && (t == null || t());
183
188
  };
184
- return document.addEventListener("keydown", t), () => {
185
- document.removeEventListener("keydown", t);
189
+ return document.addEventListener("keydown", n), () => {
190
+ document.removeEventListener("keydown", n);
186
191
  };
187
192
  }, []);
188
193
  }
189
- const tn = "_main-menu_7h96l_1", an = {
194
+ const st = "_main-menu_7h96l_1", lt = {
190
195
  "main-menu": "_main-menu_7h96l_1",
191
- mainMenu: tn
196
+ mainMenu: st
192
197
  };
193
- function on() {
194
- const n = u(m);
195
- return k(n == null ? void 0 : n.toggle), /* @__PURE__ */ l("div", { className: an.mainMenu, children: [
196
- /* @__PURE__ */ e(Ye, {}),
197
- /* @__PURE__ */ e(Je, {}),
198
- /* @__PURE__ */ e(nn, {})
198
+ function it() {
199
+ const t = i(b);
200
+ return y(t == null ? void 0 : t.toggle), /* @__PURE__ */ a("div", { className: lt.mainMenu, children: [
201
+ /* @__PURE__ */ e(nt, {}),
202
+ /* @__PURE__ */ e(ot, {}),
203
+ /* @__PURE__ */ e(ct, {})
199
204
  ] });
200
205
  }
201
- const R = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1347 3.00061L6.55157 13.5825L0.865302 7.89624L0 8.76154L6.55157 15.3131L17.9988 3.86469L17.1347 3.00061Z", fill: "currentColor" }) }), M = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.037 3.03704L6.07407 9L12.037 14.963L11 16L4 9L11 2L12.037 3.03704Z", fill: "currentColor" }) }), b = [0.5, 0.75, 1, 1.25, 1.5, 2], ln = [
206
+ const Z = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1347 3.00061L6.55157 13.5825L0.865302 7.89624L0 8.76154L6.55157 15.3131L17.9988 3.86469L17.1347 3.00061Z", fill: "currentColor" }) }), P = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.037 3.03704L6.07407 9L12.037 14.963L11 16L4 9L11 2L12.037 3.03704Z", fill: "currentColor" }) }), x = [0.5, 0.75, 1, 1.25, 1.5, 2], rt = [
202
207
  { label: "50%", value: 0.5 },
203
208
  { label: "100%", value: 1 },
204
209
  { label: "200%", value: 2 },
205
210
  { label: "300%", value: 3 },
206
211
  { label: "400%", value: 4 }
207
- ], sn = "_menu-container_rqjaq_1", cn = "_menu-options_rqjaq_6", rn = "_menu-heading_rqjaq_11", un = "_check-icon_rqjaq_27", dn = "_menu-item-label_rqjaq_33", mn = "_menu-item_rqjaq_33", hn = "_menu-back-button_rqjaq_65", s = {
212
+ ], ut = "_menu-container_rqjaq_1", dt = "_menu-options_rqjaq_6", ht = "_menu-heading_rqjaq_11", mt = "_check-icon_rqjaq_27", _t = "_menu-item-label_rqjaq_33", pt = "_menu-item_rqjaq_33", bt = "_menu-back-button_rqjaq_65", l = {
208
213
  "menu-container": "_menu-container_rqjaq_1",
209
- menuContainer: sn,
214
+ menuContainer: ut,
210
215
  "menu-options": "_menu-options_rqjaq_6",
211
- menuOptions: cn,
216
+ menuOptions: dt,
212
217
  "menu-heading": "_menu-heading_rqjaq_11",
213
- menuHeading: rn,
218
+ menuHeading: ht,
214
219
  "check-icon": "_check-icon_rqjaq_27",
215
- checkIcon: un,
220
+ checkIcon: mt,
216
221
  "menu-item-label": "_menu-item-label_rqjaq_33",
217
- menuItemLabel: dn,
222
+ menuItemLabel: _t,
218
223
  "menu-item": "_menu-item_rqjaq_33",
219
- menuItem: mn,
224
+ menuItem: pt,
220
225
  "menu-back-button": "_menu-back-button_rqjaq_65",
221
- menuBackButton: hn
226
+ menuBackButton: bt
222
227
  };
223
- function _n() {
224
- const n = u(m), t = de({
225
- rates: b,
228
+ function ft() {
229
+ const t = i(b), n = _e({
230
+ rates: x,
226
231
  normalLabel: "1x"
227
232
  });
228
- return k(n == null ? void 0 : n.backToMain), n ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
229
- /* @__PURE__ */ l(
233
+ return y(t == null ? void 0 : t.backToMain), t ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
234
+ /* @__PURE__ */ a(
230
235
  "button",
231
236
  {
232
237
  type: "button",
233
- className: s.menuBackButton,
234
- onClick: n.backToMain,
238
+ className: l.menuBackButton,
239
+ onClick: t.backToMain,
235
240
  children: [
236
- /* @__PURE__ */ e(M, {}),
241
+ /* @__PURE__ */ e(P, {}),
237
242
  /* @__PURE__ */ e("span", { children: "Back" })
238
243
  ]
239
244
  }
240
245
  ),
241
- /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Playback Speed" }),
242
- /* @__PURE__ */ e("div", { role: "menu", className: s.menuOptions, children: t.map(({ value: a, label: o, select: c, selected: i }) => /* @__PURE__ */ l(
246
+ /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Playback Speed" }),
247
+ /* @__PURE__ */ e("div", { role: "menu", className: l.menuOptions, children: n.map(({ value: o, label: c, select: s, selected: r }) => /* @__PURE__ */ a(
243
248
  "button",
244
249
  {
245
250
  type: "button",
246
251
  role: "menuitemradio",
247
- "aria-checked": i,
252
+ "aria-checked": r,
248
253
  onClick: () => {
249
- c(), n.backToMain(), n.toggle();
254
+ s(), t.backToMain(), t.toggle();
250
255
  },
251
- className: s.menuItem,
256
+ className: l.menuItem,
252
257
  children: [
253
- /* @__PURE__ */ e(R, { className: s.checkIcon }),
254
- /* @__PURE__ */ e("span", { className: s.menuItemLabel, children: o })
258
+ /* @__PURE__ */ e(Z, { className: l.checkIcon }),
259
+ /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: c })
255
260
  ]
256
261
  },
257
- a
262
+ o
258
263
  )) })
259
264
  ] }) : null;
260
265
  }
261
- function gn() {
262
- const n = u(m), t = r("textTrack"), a = h(() => {
263
- n && n.setPage("captionLanguage");
264
- }, [n]);
265
- return n ? /* @__PURE__ */ e(
266
- x,
266
+ function gt() {
267
+ const t = i(b), n = m("textTrack"), o = d(() => {
268
+ t && t.setPage("captionLanguage");
269
+ }, [t]);
270
+ return t ? /* @__PURE__ */ e(
271
+ T,
267
272
  {
268
273
  label: "Language",
269
- hint: (t == null ? void 0 : t.label) ?? "Off",
270
- onClick: a
274
+ hint: (n == null ? void 0 : n.label) ?? "Off",
275
+ onClick: o
271
276
  }
272
277
  ) : null;
273
278
  }
274
- function pn() {
275
- const n = u(N), t = u(m), a = h(() => {
276
- t && t.setPage("captionFontSize");
277
- }, [t]);
278
- return t && n ? /* @__PURE__ */ e(
279
- x,
279
+ function kt() {
280
+ const t = i(p), n = i(b), o = d(() => {
281
+ n && n.setPage("captionFontSize");
282
+ }, [n]);
283
+ return n && t ? /* @__PURE__ */ e(
284
+ T,
280
285
  {
281
286
  label: "Caption Font Size",
282
- hint: n.state.captionsFontSizeMultiplier.label,
283
- onClick: a
287
+ hint: t.state.captionsFontSizeMultiplier.label,
288
+ onClick: o
289
+ }
290
+ ) : null;
291
+ }
292
+ const wt = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M 21.798373,3.342155 8.8843977,16.256145 2.2000774,9.571825 0,11.771895 8.8843977,20.657845 24,5.543795 Z", fill: "currentColor" }) }), Ct = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M 9.64706,12 4,17.64706 6.35293,20 12,14.35293 17.64706,20 20,17.64706 14.35293,12 20,6.35293 17.64706,4 12,9.64706 6.35293,4 4,6.35293 Z", fill: "currentColor" }) }), vt = "_switch-track_8rjat_1", yt = "_switch-thumb_8rjat_11", Lt = "_switch-icon_8rjat_25", Mt = "_switch-body_8rjat_31", Nt = "_switch-label_8rjat_68", N = {
293
+ "switch-track": "_switch-track_8rjat_1",
294
+ switchTrack: vt,
295
+ "switch-thumb": "_switch-thumb_8rjat_11",
296
+ switchThumb: yt,
297
+ "switch-icon": "_switch-icon_8rjat_25",
298
+ switchIcon: Lt,
299
+ "switch-body": "_switch-body_8rjat_31",
300
+ switchBody: Mt,
301
+ "switch-label": "_switch-label_8rjat_68",
302
+ switchLabel: Nt
303
+ };
304
+ function ne({
305
+ label: t,
306
+ checked: n = !1,
307
+ onClick: o
308
+ }) {
309
+ const c = d(
310
+ (s) => {
311
+ (s.key === "Enter" || s.key === " ") && (o == null || o());
312
+ },
313
+ [o]
314
+ );
315
+ return /* @__PURE__ */ a(
316
+ "div",
317
+ {
318
+ className: N.switchBody,
319
+ role: "menuitemcheckbox",
320
+ "aria-checked": n,
321
+ onClick: o,
322
+ onKeyDown: c,
323
+ tabIndex: 0,
324
+ children: [
325
+ /* @__PURE__ */ e("span", { className: N.switchLabel, children: t }),
326
+ /* @__PURE__ */ e("div", { className: N.switchTrack, children: /* @__PURE__ */ e("div", { className: N.switchThumb, children: n ? /* @__PURE__ */ e(wt, { className: N.switchIcon }) : /* @__PURE__ */ e(Ct, { className: N.switchIcon }) }) })
327
+ ]
328
+ }
329
+ );
330
+ }
331
+ function xt() {
332
+ const t = i(p);
333
+ return t ? /* @__PURE__ */ e(
334
+ ne,
335
+ {
336
+ label: "On Top",
337
+ onClick: t.toggleCaptionPositionOnTop,
338
+ checked: t.state.captionPositionOnTop
339
+ }
340
+ ) : null;
341
+ }
342
+ function It() {
343
+ const t = i(p);
344
+ return t ? /* @__PURE__ */ e(
345
+ ne,
346
+ {
347
+ label: "Invert Colors",
348
+ onClick: t.toggleCaptionsInvertColors,
349
+ checked: t.state.captionsInvertColors
284
350
  }
285
351
  ) : null;
286
352
  }
287
- function fn() {
288
- const n = u(m);
289
- return k(n == null ? void 0 : n.backToMain), n ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
290
- /* @__PURE__ */ l(
353
+ function Bt() {
354
+ const t = i(b);
355
+ return y(t == null ? void 0 : t.backToMain), t ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
356
+ /* @__PURE__ */ a(
291
357
  "button",
292
358
  {
293
359
  type: "button",
294
- className: s.menuBackButton,
295
- onClick: n.backToMain,
360
+ className: l.menuBackButton,
361
+ onClick: t.backToMain,
296
362
  children: [
297
- /* @__PURE__ */ e(M, {}),
363
+ /* @__PURE__ */ e(P, {}),
298
364
  /* @__PURE__ */ e("span", { children: "Back" })
299
365
  ]
300
366
  }
301
367
  ),
302
- /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Captions" }),
303
- /* @__PURE__ */ e(gn, {}),
304
- /* @__PURE__ */ e(pn, {})
368
+ /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Captions" }),
369
+ /* @__PURE__ */ e(gt, {}),
370
+ /* @__PURE__ */ e(kt, {}),
371
+ /* @__PURE__ */ e(xt, {}),
372
+ /* @__PURE__ */ e(It, {})
305
373
  ] }) : null;
306
374
  }
307
- function bn() {
308
- const n = u(m), t = me();
309
- return k(n == null ? void 0 : n.backToCaptions), n ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
310
- /* @__PURE__ */ l(
375
+ function Ht() {
376
+ const t = i(b), n = pe();
377
+ return y(t == null ? void 0 : t.backToCaptions), t ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
378
+ /* @__PURE__ */ a(
311
379
  "button",
312
380
  {
313
381
  type: "button",
314
- className: s.menuBackButton,
315
- onClick: n.backToCaptions,
382
+ className: l.menuBackButton,
383
+ onClick: t.backToCaptions,
316
384
  children: [
317
- /* @__PURE__ */ e(M, {}),
385
+ /* @__PURE__ */ e(P, {}),
318
386
  /* @__PURE__ */ e("span", { children: "Back" })
319
387
  ]
320
388
  }
321
389
  ),
322
- /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Captions" }),
323
- /* @__PURE__ */ e("div", { role: "menu", className: s.menuOptions, children: t.map(({ value: a, label: o, select: c, selected: i }) => /* @__PURE__ */ l(
390
+ /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Captions" }),
391
+ /* @__PURE__ */ e("div", { role: "menu", className: l.menuOptions, children: n.map(({ value: o, label: c, select: s, selected: r }) => /* @__PURE__ */ a(
324
392
  "button",
325
393
  {
326
394
  type: "button",
327
395
  role: "menuitemradio",
328
- "aria-checked": i,
396
+ "aria-checked": r,
329
397
  onClick: () => {
330
- c(), n.backToMain(), n.toggle();
398
+ s(), t.backToMain(), t.toggle();
331
399
  },
332
- className: s.menuItem,
400
+ className: l.menuItem,
333
401
  children: [
334
- /* @__PURE__ */ e(R, { className: s.checkIcon }),
335
- /* @__PURE__ */ e("span", { className: s.menuItemLabel, children: o })
402
+ /* @__PURE__ */ e(Z, { className: l.checkIcon }),
403
+ /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: c })
336
404
  ]
337
405
  },
338
- a
406
+ o
339
407
  )) })
340
408
  ] }) : null;
341
409
  }
342
- function kn() {
343
- const n = u(N), t = u(m);
344
- return k(t == null ? void 0 : t.backToCaptions), n && t ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
345
- /* @__PURE__ */ l(
410
+ function Vt() {
411
+ const t = i(p), n = i(b);
412
+ return y(n == null ? void 0 : n.backToCaptions), t && n ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
413
+ /* @__PURE__ */ a(
346
414
  "button",
347
415
  {
348
416
  type: "button",
349
- className: s.menuBackButton,
350
- onClick: t.backToCaptions,
417
+ className: l.menuBackButton,
418
+ onClick: n.backToCaptions,
351
419
  children: [
352
- /* @__PURE__ */ e(M, {}),
420
+ /* @__PURE__ */ e(P, {}),
353
421
  /* @__PURE__ */ e("span", { children: "Back" })
354
422
  ]
355
423
  }
356
424
  ),
357
- /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Captions" }),
358
- /* @__PURE__ */ e("div", { role: "menu", className: s.menuOptions, children: ln.map((a) => /* @__PURE__ */ l(
425
+ /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Captions" }),
426
+ /* @__PURE__ */ e("div", { role: "menu", className: l.menuOptions, children: rt.map((o) => /* @__PURE__ */ a(
359
427
  "button",
360
428
  {
361
429
  type: "button",
362
430
  role: "menuitemradio",
363
- "aria-checked": a.value === n.state.captionsFontSizeMultiplier.value,
431
+ "aria-checked": o.value === t.state.captionsFontSizeMultiplier.value,
364
432
  onClick: () => {
365
- n.setState((o) => ({
366
- ...o,
367
- captionsFontSizeMultiplier: a
368
- })), t.backToMain(), t.toggle();
433
+ t.setCaptionsFontSizeMultiplier(o), n.backToMain(), n.toggle();
369
434
  },
370
- className: s.menuItem,
435
+ className: l.menuItem,
371
436
  children: [
372
- /* @__PURE__ */ e(R, { className: s.checkIcon }),
373
- /* @__PURE__ */ e("span", { className: s.menuItemLabel, children: a.label })
437
+ /* @__PURE__ */ e(Z, { className: l.checkIcon }),
438
+ /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: o.label })
374
439
  ]
375
440
  },
376
- a.label
441
+ o.label
377
442
  )) })
378
443
  ] }) : null;
379
444
  }
380
- function Cn() {
381
- const n = u(m), t = he({ sort: "descending" }), a = r("autoQuality");
382
- return k(n == null ? void 0 : n.backToMain), n ? /* @__PURE__ */ l("div", { className: s.menuContainer, children: [
383
- /* @__PURE__ */ l(
445
+ function Tt() {
446
+ const t = i(b), n = be({ sort: "descending" }), o = m("autoQuality");
447
+ return y(t == null ? void 0 : t.backToMain), t ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
448
+ /* @__PURE__ */ a(
384
449
  "button",
385
450
  {
386
451
  type: "button",
387
- className: s.menuBackButton,
388
- onClick: n.backToMain,
452
+ className: l.menuBackButton,
453
+ onClick: t.backToMain,
389
454
  children: [
390
- /* @__PURE__ */ e(M, {}),
455
+ /* @__PURE__ */ e(P, {}),
391
456
  /* @__PURE__ */ e("span", { children: "Back" })
392
457
  ]
393
458
  }
394
459
  ),
395
- /* @__PURE__ */ e("strong", { className: s.menuHeading, children: "Quality" }),
396
- /* @__PURE__ */ e("div", { role: "menu", className: s.menuOptions, children: t.map(({ value: o, label: c, select: i, selected: _ }) => /* @__PURE__ */ l(
460
+ /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Quality" }),
461
+ /* @__PURE__ */ e("div", { role: "menu", className: l.menuOptions, children: n.map(({ value: c, label: s, select: r, selected: u }) => /* @__PURE__ */ a(
397
462
  "button",
398
463
  {
399
464
  type: "button",
400
465
  role: "menuitemradio",
401
- "aria-checked": o === "auto" && a || _ && !a,
466
+ "aria-checked": c === "auto" && o || u && !o,
402
467
  onClick: () => {
403
- i(), n.backToMain(), n.toggle();
468
+ r(), t.backToMain(), t.toggle();
404
469
  },
405
- className: s.menuItem,
470
+ className: l.menuItem,
406
471
  children: [
407
- /* @__PURE__ */ e(R, { className: s.checkIcon }),
408
- /* @__PURE__ */ e("span", { className: s.menuItemLabel, children: c })
472
+ /* @__PURE__ */ e(Z, { className: l.checkIcon }),
473
+ /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: s })
409
474
  ]
410
475
  },
411
- o
476
+ c
412
477
  )) })
413
478
  ] }) : null;
414
479
  }
415
- const vn = {
416
- main: on,
417
- speed: _n,
418
- captions: fn,
419
- captionLanguage: bn,
420
- captionFontSize: kn,
421
- quality: Cn
480
+ const Pt = {
481
+ main: it,
482
+ speed: ft,
483
+ captions: Bt,
484
+ captionLanguage: Ht,
485
+ captionFontSize: Vt,
486
+ quality: Tt
422
487
  };
423
- function wn() {
424
- const [n, t] = T("main"), [a, o] = T(!1), c = h(() => {
425
- o((v) => !v);
426
- }, []), i = h((v) => {
427
- t(v);
428
- }, []), _ = h(() => {
429
- t("captions");
430
- }, []), p = h(() => {
431
- t("main");
432
- }, []), B = W(() => vn[n], [n]), C = ce(null), { refs: S, floatingStyles: H, context: q } = Ce({
433
- open: a,
434
- onOpenChange: (v) => {
435
- o(v), p();
488
+ function St() {
489
+ const [t, n] = v("main"), [o, c] = v(!1), s = d(() => {
490
+ c((I) => !I);
491
+ }, []), r = d((I) => {
492
+ n(I);
493
+ }, []), u = d(() => {
494
+ n("captions");
495
+ }, []), f = d(() => {
496
+ n("main");
497
+ }, []), g = Y(() => Pt[t], [t]), h = ye(null), { refs: C, floatingStyles: L, context: k } = Le({
498
+ open: o,
499
+ onOpenChange: (I) => {
500
+ c(I), f();
436
501
  },
437
502
  placement: "top-end",
438
- whileElementsMounted: ve,
503
+ whileElementsMounted: Me,
439
504
  middleware: [
440
- we(),
441
- ye({
442
- element: C
505
+ Ne(),
506
+ xe({
507
+ element: h
443
508
  })
444
509
  ]
445
- }), oe = Le(q, { escapeKey: !1 }), { getReferenceProps: le, getFloatingProps: se } = Ne([oe]);
510
+ }), ie = Ie(k, { escapeKey: !1 }), { getReferenceProps: re, getFloatingProps: ue } = Be([ie]);
446
511
  return {
447
- Page: B,
448
- open: a,
449
- toggle: c,
450
- setPage: i,
451
- backToCaptions: _,
452
- backToMain: p,
453
- arrowRef: C,
454
- refs: S,
455
- floatingStyles: H,
456
- context: q,
457
- getReferenceProps: le,
458
- getFloatingProps: se
512
+ Page: g,
513
+ open: o,
514
+ toggle: s,
515
+ setPage: r,
516
+ backToCaptions: u,
517
+ backToMain: f,
518
+ arrowRef: h,
519
+ refs: C,
520
+ floatingStyles: L,
521
+ context: k,
522
+ getReferenceProps: re,
523
+ getFloatingProps: ue
459
524
  };
460
525
  }
461
- const yn = "_settings-menu_hxlsv_1", Ln = "_arrow_hxlsv_15", j = {
526
+ const Rt = "_settings-menu_hxlsv_1", Ft = "_arrow_hxlsv_15", K = {
462
527
  "settings-menu": "_settings-menu_hxlsv_1",
463
- settingsMenu: yn,
464
- arrow: Ln
528
+ settingsMenu: Rt,
529
+ arrow: Ft
465
530
  };
466
- function Nn() {
531
+ function Zt() {
467
532
  const {
468
- Page: n,
469
- arrowRef: t,
470
- backToCaptions: a,
471
- backToMain: o,
472
- context: c,
473
- floatingStyles: i,
474
- getFloatingProps: _,
475
- getReferenceProps: p,
476
- open: B,
477
- refs: C,
478
- setPage: S,
479
- toggle: H
480
- } = wn();
481
- return /* @__PURE__ */ l(E, { children: [
533
+ Page: t,
534
+ arrowRef: n,
535
+ backToCaptions: o,
536
+ backToMain: c,
537
+ context: s,
538
+ floatingStyles: r,
539
+ getFloatingProps: u,
540
+ getReferenceProps: f,
541
+ open: g,
542
+ refs: h,
543
+ setPage: C,
544
+ toggle: L
545
+ } = St(), k = i(p);
546
+ return /* @__PURE__ */ a(Q, { children: [
482
547
  /* @__PURE__ */ e(
483
548
  "button",
484
549
  {
485
- ref: C.setReference,
550
+ ref: h.setReference,
486
551
  type: "button",
487
552
  className: "controls-button",
488
553
  "aria-label": "Settings",
489
- onClick: H,
490
- "aria-expanded": B,
491
- ...p(),
492
- children: /* @__PURE__ */ e(Ee, { className: "controls-button-icon icon-rotate" })
554
+ onClick: L,
555
+ "aria-expanded": g,
556
+ tabIndex: k != null && k.state.interactionsDisabled ? -1 : 0,
557
+ ...f(),
558
+ children: /* @__PURE__ */ e(We, { className: "controls-button-icon icon-rotate" })
493
559
  }
494
560
  ),
495
- B && /* @__PURE__ */ e(xe, { context: c, initialFocus: -1, modal: !1, children: /* @__PURE__ */ l(
561
+ g && /* @__PURE__ */ e(He, { context: s, initialFocus: -1, modal: !1, children: /* @__PURE__ */ a(
496
562
  "div",
497
563
  {
498
- className: j.settingsMenu,
499
- ref: C.setFloating,
500
- style: i,
501
- ..._(),
564
+ className: K.settingsMenu,
565
+ ref: h.setFloating,
566
+ style: r,
567
+ ...u(),
502
568
  children: [
503
569
  /* @__PURE__ */ e(
504
- m.Provider,
570
+ b.Provider,
505
571
  {
506
- value: { setPage: S, backToMain: o, backToCaptions: a, toggle: H },
507
- children: /* @__PURE__ */ e(n, {})
572
+ value: { setPage: C, backToMain: c, backToCaptions: o, toggle: L },
573
+ children: /* @__PURE__ */ e(t, {})
508
574
  }
509
575
  ),
510
576
  /* @__PURE__ */ e(
511
- Me,
577
+ Ve,
512
578
  {
513
- ref: t,
514
- context: c,
515
- className: j.arrow
579
+ ref: n,
580
+ context: s,
581
+ className: K.arrow
516
582
  }
517
583
  )
518
584
  ]
@@ -520,216 +586,378 @@ function Nn() {
520
586
  ) })
521
587
  ] });
522
588
  }
523
- function ee(n, t = 1e3) {
589
+ function oe(t, n = 1e3) {
524
590
  return function() {
525
- const o = r("lastKeyboardAction"), [c, i] = T(!1), _ = h(() => i(!1), []);
526
- return Q(() => {
527
- i(!!o);
528
- const p = setTimeout(_, t);
529
- return () => clearTimeout(p);
530
- }, [o, t]), c ? /* @__PURE__ */ e(n, {}) : null;
591
+ const c = m("lastKeyboardAction"), [s, r] = v(!1), u = d(() => r(!1), []);
592
+ return G(() => {
593
+ r(!!c);
594
+ const f = setTimeout(u, n);
595
+ return () => clearTimeout(f);
596
+ }, [c, n]), s ? /* @__PURE__ */ e(t, {}) : null;
531
597
  };
532
598
  }
533
- const $ = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { d: "M 11,21 H 5 V 3 h 6 z m 8,0 H 13 V 3 h 6 z", fill: "currentColor" }) }), Z = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { d: "M 5,2 V 22 L 21,12.000665 Z", fill: "currentColor" }) }), ne = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1179 1.41211V22.589H11.2943L5.64717 16.9418V7.05928L11.2943 1.41211H14.1179ZM4.23537 7.05928V16.9418H2.11769C0.957618 16.9418 0.0189406 16.0147 0.00028305 14.8592L0 14.8241V9.17696C0 8.01689 0.927077 7.07822 2.0826 7.05956L2.11769 7.05928H4.23537ZM22.3744 7.93711L24 9.56119L21.5623 11.9988L24 14.4365L22.3744 16.0621L19.9383 13.6245L17.5006 16.0621L15.875 14.4365L18.3127 11.9988L15.875 9.56119L17.5006 7.93711L19.9383 10.3748L22.3744 7.93711Z", fill: "currentColor" }) }), te = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 6.98017V16.8627L11.2943 22.5099H14.1179V1.33301H11.2943L5.64714 6.98017ZM0 9.09785V14.745C0 15.9168 0.945899 16.8627 2.11768 16.8627H4.23537V6.98017H2.11768C0.945899 6.98017 0 7.92607 0 9.09785ZM18.3527 11.9207C18.3527 10.6134 17.8388 9.36962 16.9056 8.4209L17.9094 7.43123C19.1066 8.64396 19.7645 10.2393 19.7645 11.9207C19.7645 13.6036 19.1066 15.1989 17.9094 16.4116L16.9056 15.422C17.8388 14.4732 18.3527 13.2295 18.3527 11.9207Z", fill: "currentColor" }) }), ae = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 16.8627V6.98017L11.2943 1.33301H14.1179V22.5099H11.2943L5.64714 16.8627ZM0 14.745V9.09785C0 7.92607 0.945899 6.98017 2.11768 6.98017H4.23537V16.8627H2.11768C0.945899 16.8627 0 15.9168 0 14.745ZM16.9056 8.4209C17.8388 9.36962 18.3527 10.6134 18.3527 11.9207C18.3527 13.2295 17.8388 14.4732 16.9056 15.422L17.9094 16.4116C19.1066 15.1989 19.7645 13.6036 19.7645 11.9207C19.7645 10.2393 19.1066 8.64396 17.9094 7.43123L16.9056 8.4209ZM19.9016 5.43185L20.8997 4.43372C22.9002 6.43422 24 9.09403 24 11.9219C24 14.7497 22.9002 17.4081 20.8997 19.4086L19.9016 18.4104C21.6353 16.6782 22.5882 14.3727 22.5882 11.9219C22.5882 9.46957 21.6353 7.16553 19.9016 5.43185Z", fill: "currentColor" }) }), xn = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.691 3.99987V10.5281L0 4.00655V20.2596L10.691 13.7367V20.2663L23.9987 12.1331L10.691 3.99987Z", fill: "currentColor" }) }), Mn = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.309 3.99987L0 12.1331L13.309 20.2663V13.7367L23.9987 20.2596V4.00655L13.309 10.5281V3.99987Z", fill: "currentColor" }) }), Bn = "_feedback-overlay_v4lbu_1", Hn = "_feedback-message_v4lbu_14", Vn = "_feedback-icon_v4lbu_30", In = "_feedback-icon-animation_v4lbu_1", d = {
599
+ const q = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M 11,21 H 5 V 3 h 6 z m 8,0 H 13 V 3 h 6 z", fill: "currentColor" }) }), z = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M 5,2 V 22 L 21,12.000665 Z", fill: "currentColor" }) }), ae = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1179 1.41211V22.589H11.2943L5.64717 16.9418V7.05928L11.2943 1.41211H14.1179ZM4.23537 7.05928V16.9418H2.11769C0.957618 16.9418 0.0189406 16.0147 0.00028305 14.8592L0 14.8241V9.17696C0 8.01689 0.927077 7.07822 2.0826 7.05956L2.11769 7.05928H4.23537ZM22.3744 7.93711L24 9.56119L21.5623 11.9988L24 14.4365L22.3744 16.0621L19.9383 13.6245L17.5006 16.0621L15.875 14.4365L18.3127 11.9988L15.875 9.56119L17.5006 7.93711L19.9383 10.3748L22.3744 7.93711Z", fill: "currentColor" }) }), ce = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 6.98017V16.8627L11.2943 22.5099H14.1179V1.33301H11.2943L5.64714 6.98017ZM0 9.09785V14.745C0 15.9168 0.945899 16.8627 2.11768 16.8627H4.23537V6.98017H2.11768C0.945899 6.98017 0 7.92607 0 9.09785ZM18.3527 11.9207C18.3527 10.6134 17.8388 9.36962 16.9056 8.4209L17.9094 7.43123C19.1066 8.64396 19.7645 10.2393 19.7645 11.9207C19.7645 13.6036 19.1066 15.1989 17.9094 16.4116L16.9056 15.422C17.8388 14.4732 18.3527 13.2295 18.3527 11.9207Z", fill: "currentColor" }) }), se = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 16.8627V6.98017L11.2943 1.33301H14.1179V22.5099H11.2943L5.64714 16.8627ZM0 14.745V9.09785C0 7.92607 0.945899 6.98017 2.11768 6.98017H4.23537V16.8627H2.11768C0.945899 16.8627 0 15.9168 0 14.745ZM16.9056 8.4209C17.8388 9.36962 18.3527 10.6134 18.3527 11.9207C18.3527 13.2295 17.8388 14.4732 16.9056 15.422L17.9094 16.4116C19.1066 15.1989 19.7645 13.6036 19.7645 11.9207C19.7645 10.2393 19.1066 8.64396 17.9094 7.43123L16.9056 8.4209ZM19.9016 5.43185L20.8997 4.43372C22.9002 6.43422 24 9.09403 24 11.9219C24 14.7497 22.9002 17.4081 20.8997 19.4086L19.9016 18.4104C21.6353 16.6782 22.5882 14.3727 22.5882 11.9219C22.5882 9.46957 21.6353 7.16553 19.9016 5.43185Z", fill: "currentColor" }) }), jt = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.691 3.99987V10.5281L0 4.00655V20.2596L10.691 13.7367V20.2663L23.9987 12.1331L10.691 3.99987Z", fill: "currentColor" }) }), $t = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.309 3.99987L0 12.1331L13.309 20.2663V13.7367L23.9987 20.2596V4.00655L13.309 10.5281V3.99987Z", fill: "currentColor" }) }), Ot = "_feedback-overlay_v4lbu_1", qt = "_feedback-message_v4lbu_14", zt = "_feedback-icon_v4lbu_30", At = "_feedback-icon-animation_v4lbu_1", _ = {
534
600
  "feedback-overlay": "_feedback-overlay_v4lbu_1",
535
- feedbackOverlay: Bn,
601
+ feedbackOverlay: Ot,
536
602
  "feedback-message": "_feedback-message_v4lbu_14",
537
- feedbackMessage: Hn,
603
+ feedbackMessage: qt,
538
604
  "feedback-icon": "_feedback-icon_v4lbu_30",
539
- feedbackIcon: Vn,
605
+ feedbackIcon: zt,
540
606
  "feedback-icon-animation": "_feedback-icon-animation_v4lbu_1",
541
- feedbackIconAnimation: In
607
+ feedbackIconAnimation: At
542
608
  };
543
- function Pn() {
544
- var a;
545
- const n = G();
546
- switch ((a = n.lastKeyboardAction) == null ? void 0 : a.action) {
609
+ function Kt() {
610
+ var o;
611
+ const t = W();
612
+ switch ((o = t.lastKeyboardAction) == null ? void 0 : o.action) {
547
613
  case "togglePaused":
548
- return /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: n.paused ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ e(Z, {}) });
614
+ return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: t.paused ? /* @__PURE__ */ e(q, {}) : /* @__PURE__ */ e(z, {}) });
549
615
  case "toggleCaptions":
550
616
  case "nextCaptionLanguage":
551
617
  case "previousCaptionLanguage":
552
- return n.hasCaptions ? /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: /* @__PURE__ */ e(J, {}) }) : null;
618
+ return t.hasCaptions ? /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: /* @__PURE__ */ e(te, {}) }) : null;
553
619
  case "volumeUp":
554
620
  case "volumeDown":
555
621
  case "toggleMuted":
556
- return /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: n.muted || n.volume === 0 ? /* @__PURE__ */ e(ne, {}) : n.volume >= 0.5 ? /* @__PURE__ */ e(ae, {}) : /* @__PURE__ */ e(te, {}) });
622
+ return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: t.muted || t.volume === 0 ? /* @__PURE__ */ e(ae, {}) : t.volume >= 0.5 ? /* @__PURE__ */ e(se, {}) : /* @__PURE__ */ e(ce, {}) });
557
623
  case "seekForward":
558
624
  case "seekForward10":
559
- return /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: /* @__PURE__ */ e(xn, { className: "right" }) });
625
+ return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: /* @__PURE__ */ e(jt, { className: "right" }) });
560
626
  case "seekBackward":
561
627
  case "seekBackward10":
562
- return /* @__PURE__ */ e("i", { className: d.feedbackIcon, children: /* @__PURE__ */ e(Mn, { className: "left" }) });
628
+ return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: /* @__PURE__ */ e($t, { className: "left" }) });
563
629
  default:
564
630
  return null;
565
631
  }
566
632
  }
567
- function Tn() {
568
- var a;
569
- const n = G();
570
- switch ((a = n.lastKeyboardAction) == null ? void 0 : a.action) {
633
+ function Dt() {
634
+ var o;
635
+ const t = W();
636
+ switch ((o = t.lastKeyboardAction) == null ? void 0 : o.action) {
571
637
  case "toggleCaptions":
572
638
  case "nextCaptionLanguage":
573
639
  case "previousCaptionLanguage":
574
- return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: n.textTrack ? `Caption Language: ${n.textTrack.label}` : "Captions: Off" });
640
+ return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: t.textTrack ? `Caption Language: ${t.textTrack.label}` : "Captions: Off" });
575
641
  case "volumeUp":
576
642
  case "volumeDown":
577
643
  case "toggleMuted":
578
- return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: n.muted || n.volume === 0 ? "Muted" : `Volume: ${(n.volume * 100).toFixed(0)}%` });
644
+ return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: t.muted || t.volume === 0 ? "Muted" : `Volume: ${(t.volume * 100).toFixed(0)}%` });
579
645
  case "increasePlaybackRate":
580
646
  case "decreasePlaybackRate":
581
647
  case "resetPlaybackRate":
582
- return /* @__PURE__ */ l("div", { className: d.feedbackMessage, children: [
648
+ return /* @__PURE__ */ a("div", { className: _.feedbackMessage, children: [
583
649
  "Playback speed: ",
584
- n.playbackRate,
650
+ t.playbackRate,
585
651
  "x"
586
652
  ] });
587
653
  case "seekForward":
588
- return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: "Seek forward: 5 seconds" });
654
+ return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek forward: 5 seconds" });
589
655
  case "seekForward10":
590
- return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: "Seek forward: 10 seconds" });
656
+ return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek forward: 10 seconds" });
591
657
  case "seekBackward":
592
- return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: "Seek backward: 5 seconds" });
658
+ return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek backward: 5 seconds" });
593
659
  case "seekBackward10":
594
- return /* @__PURE__ */ e("div", { className: d.feedbackMessage, children: "Seek backward: 10 seconds" });
660
+ return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek backward: 10 seconds" });
595
661
  default:
596
662
  return null;
597
663
  }
598
664
  }
599
- const Rn = ee(Pn, 500), Sn = ee(Tn, 1e3);
600
- function Fn() {
601
- return /* @__PURE__ */ l("div", { className: d.feedbackOverlay, children: [
602
- /* @__PURE__ */ e(Rn, {}),
603
- /* @__PURE__ */ e(Sn, {})
665
+ const Et = oe(Kt, 500), Ut = oe(Dt, 1e3);
666
+ function Qt() {
667
+ return /* @__PURE__ */ a("div", { className: _.feedbackOverlay, children: [
668
+ /* @__PURE__ */ e(Et, {}),
669
+ /* @__PURE__ */ e(Ut, {})
604
670
  ] });
605
671
  }
606
- const $n = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1383 0.999867V3.66268H18.4561L3.66281 18.4546V14.1382H1V23H9.86449V20.3372H5.54542L20.3387 5.54528V9.86303H23.0001V0.999867H14.1383Z", fill: "currentColor" }) }), Zn = (n) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.562 6.58944L22.1514 0L24.0005 1.84907L17.4111 8.43851H21.6506V11.0552H12.9453V2.34861H15.562V6.58944ZM2.34861 15.5615V12.9461H11.0539V21.6501H8.43982V17.4106L1.84907 24L0 22.1509L6.59075 15.5615H2.34861Z", fill: "currentColor" }) }), qn = "_full-screen-button_8detf_2", zn = {
607
- "full-screen-button": "_full-screen-button_8detf_2",
608
- fullScreenButton: qn
672
+ const Wt = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1383 0.999867V3.66268H18.4561L3.66281 18.4546V14.1382H1V23H9.86449V20.3372H5.54542L20.3387 5.54528V9.86303H23.0001V0.999867H14.1383Z", fill: "currentColor" }) }), Jt = (t) => /* @__PURE__ */ e("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.562 6.58944L22.1514 0L24.0005 1.84907L17.4111 8.43851H21.6506V11.0552H12.9453V2.34861H15.562V6.58944ZM2.34861 15.5615V12.9461H11.0539V21.6501H8.43982V17.4106L1.84907 24L0 22.1509L6.59075 15.5615H2.34861Z", fill: "currentColor" }) }), Xt = "_full-screen-button_1xm32_2", Gt = {
673
+ "full-screen-button": "_full-screen-button_1xm32_2",
674
+ fullScreenButton: Xt
609
675
  };
610
- function jn() {
611
- const n = r("fullscreen"), t = u(N);
612
- return t && !t.hideFullScreen ? /* @__PURE__ */ e(
613
- X,
676
+ function Yt() {
677
+ const t = m("fullscreen"), n = i(p);
678
+ return n && !n.hideFullScreen ? /* @__PURE__ */ e(
679
+ J,
614
680
  {
615
- className: `controls-button ${zn.fullScreenButton}`,
616
- children: n ? /* @__PURE__ */ e(Zn, { className: "controls-button-icon" }) : /* @__PURE__ */ e($n, { className: "controls-button-icon" })
681
+ tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
682
+ className: `controls-button ${Gt.fullScreenButton}`,
683
+ children: t ? /* @__PURE__ */ e(Jt, { className: "controls-button-icon" }) : /* @__PURE__ */ e(Wt, { className: "controls-button-icon" })
617
684
  }
618
685
  ) : null;
619
686
  }
620
- const On = "_gestures-container_1fn3b_1", An = "_gesture_1fn3b_1", O = {
687
+ const en = "_gestures-container_1fn3b_1", tn = "_gesture_1fn3b_1", D = {
621
688
  "gestures-container": "_gestures-container_1fn3b_1",
622
- gesturesContainer: On,
623
- gesture: An
689
+ gesturesContainer: en,
690
+ gesture: tn
691
+ };
692
+ function nn() {
693
+ const t = O(), n = () => {
694
+ t.togglePaused();
695
+ };
696
+ return /* @__PURE__ */ e("div", { className: D.gesturesContainer, children: /* @__PURE__ */ e("div", { "aria-hidden": !0, className: D.gesture, onClick: n }) });
697
+ }
698
+ const on = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.76472 10.5294C5.05696 10.5294 5.29413 10.2922 5.29413 9.99999V8.94117C5.29413 8.64893 5.05696 8.41175 4.76472 8.41175H3.7059C3.41366 8.41175 3.17649 8.64893 3.17649 8.94117V9.99999C3.17649 10.2922 3.41366 10.5294 3.7059 10.5294H4.76472ZM11.1177 10.5294C11.4099 10.5294 11.6471 10.2922 11.6471 9.99999V8.94117C11.6471 8.64893 11.4099 8.41175 11.1177 8.41175H10.0588C9.76661 8.41175 9.52944 8.64893 9.52944 8.94117V9.99999C9.52944 10.2922 9.76661 10.5294 10.0588 10.5294H11.1177ZM14.8235 9.99999C14.8235 10.2922 14.5864 10.5294 14.2941 10.5294H13.2353C12.9431 10.5294 12.7059 10.2922 12.7059 9.99999V8.94117C12.7059 8.64893 12.9431 8.41175 13.2353 8.41175H14.2941C14.5864 8.41175 14.8235 8.64893 14.8235 8.94117V9.99999ZM14.8235 13.1765C14.8235 13.4687 14.5864 13.7059 14.2941 13.7059H13.2353C12.9431 13.7059 12.7059 13.4687 12.7059 13.1765V12.1176C12.7059 11.8254 12.9431 11.5882 13.2353 11.5882H14.2941C14.5864 11.5882 14.8235 11.8254 14.8235 12.1176V13.1765ZM11.6471 13.1765C11.6471 13.4687 11.4099 13.7059 11.1177 13.7059H6.88239C6.59015 13.7059 6.35297 13.4687 6.35297 13.1765V12.1176C6.35297 11.8254 6.59015 11.5882 6.88239 11.5882H11.1177C11.4099 11.5882 11.6471 11.8254 11.6471 12.1176V13.1765ZM5.29413 13.1765C5.29413 13.4687 5.05696 13.7059 4.76472 13.7059H3.7059C3.41366 13.7059 3.17649 13.4687 3.17649 13.1765V12.1176C3.17649 11.8254 3.41366 11.5882 3.7059 11.5882H4.76472C5.05696 11.5882 5.29413 11.8254 5.29413 12.1176V13.1765ZM6.88238 8.41175C6.59015 8.41175 6.35297 8.64893 6.35297 8.94117V9.99999C6.35297 10.2922 6.59015 10.5294 6.88238 10.5294H7.94121C8.23344 10.5294 8.47062 10.2922 8.47062 9.99999V8.94117C8.47062 8.64893 8.23344 8.41175 7.94121 8.41175H6.88238ZM16.4118 5.23529H9.57494C9.71471 4.42 10.1933 4.17118 10.8254 3.85565C11.6629 3.43741 12.7059 2.91541 12.7059 1H11.6471C11.6471 2.26106 11.1039 2.53212 10.3511 2.90906C9.59824 3.28494 8.68659 3.75506 8.50871 5.23529H1.58824C0.712588 5.23529 0 5.94788 0 6.82353V15.2941C0 16.1698 0.712588 16.8824 1.58824 16.8824H16.4118C17.2874 16.8824 18 16.1698 18 15.2941V6.82353C18 5.94788 17.2874 5.23529 16.4118 5.23529Z", fill: "currentColor" }) }), le = (t) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.94968 7.74766L3.99993 2.79791L2.79785 3.99999L7.7476 8.94974L2.79785 13.8995L3.99993 15.1016L8.94968 10.1518L13.8994 15.1016L15.1015 13.8995L10.1518 8.94974L15.1015 3.99999L13.8994 2.79791L8.94968 7.74766Z", fill: "currentColor" }) }), an = "_keyboard-shortcuts-overlay_uwwbr_1", cn = "_keyboard-shortcuts-button_uwwbr_67", sn = "_close-button_uwwbr_91", $ = {
699
+ "keyboard-shortcuts-overlay": "_keyboard-shortcuts-overlay_uwwbr_1",
700
+ keyboardShortcutsOverlay: an,
701
+ "keyboard-shortcuts-button": "_keyboard-shortcuts-button_uwwbr_67",
702
+ keyboardShortcutsButton: cn,
703
+ "close-button": "_close-button_uwwbr_91",
704
+ closeButton: sn
624
705
  };
625
- function Kn() {
626
- const n = D(), t = () => {
627
- n.togglePaused();
706
+ function ln({ onClose: t }) {
707
+ y(t);
708
+ const n = (o) => {
709
+ o && o.focus();
628
710
  };
629
- return /* @__PURE__ */ e("div", { className: O.gesturesContainer, children: /* @__PURE__ */ e("div", { "aria-hidden": !0, className: O.gesture, onClick: t }) });
711
+ return /* @__PURE__ */ a(
712
+ "div",
713
+ {
714
+ className: $.keyboardShortcutsOverlay,
715
+ tabIndex: 0,
716
+ ref: n,
717
+ children: [
718
+ /* @__PURE__ */ a("header", { children: [
719
+ /* @__PURE__ */ e("h2", { children: "Keyboard Shortcuts" }),
720
+ /* @__PURE__ */ e(
721
+ "button",
722
+ {
723
+ type: "button",
724
+ className: $.closeButton,
725
+ onClick: t,
726
+ "aria-label": "Close",
727
+ children: /* @__PURE__ */ e(le, {})
728
+ }
729
+ )
730
+ ] }),
731
+ /* @__PURE__ */ a("table", { children: [
732
+ /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { children: [
733
+ /* @__PURE__ */ e("th", { children: "Action" }),
734
+ /* @__PURE__ */ e("th", { children: "Key" })
735
+ ] }) }),
736
+ /* @__PURE__ */ a("tbody", { children: [
737
+ /* @__PURE__ */ a("tr", { children: [
738
+ /* @__PURE__ */ e("td", { children: "Seek back 5 sec" }),
739
+ /* @__PURE__ */ e("td", { children: "Left Arrow" })
740
+ ] }),
741
+ /* @__PURE__ */ a("tr", { children: [
742
+ /* @__PURE__ */ e("td", { children: "Seek forward 5 sec" }),
743
+ /* @__PURE__ */ e("td", { children: "Right Arrow" })
744
+ ] }),
745
+ /* @__PURE__ */ a("tr", { children: [
746
+ /* @__PURE__ */ e("td", { children: "Seek back 10 sec" }),
747
+ /* @__PURE__ */ e("td", { children: "J" })
748
+ ] }),
749
+ /* @__PURE__ */ a("tr", { children: [
750
+ /* @__PURE__ */ e("td", { children: "Seek forward 10 sec" }),
751
+ /* @__PURE__ */ e("td", { children: "L" })
752
+ ] }),
753
+ /* @__PURE__ */ a("tr", { children: [
754
+ /* @__PURE__ */ e("td", { children: "Increase volume by 5%" }),
755
+ /* @__PURE__ */ e("td", { children: "Up Arrow" })
756
+ ] }),
757
+ /* @__PURE__ */ a("tr", { children: [
758
+ /* @__PURE__ */ e("td", { children: "Decrease volume by 5%" }),
759
+ /* @__PURE__ */ e("td", { children: "Down Arrow" })
760
+ ] }),
761
+ /* @__PURE__ */ a("tr", { children: [
762
+ /* @__PURE__ */ e("td", { children: "Toggle mute" }),
763
+ /* @__PURE__ */ e("td", { children: "M" })
764
+ ] }),
765
+ /* @__PURE__ */ a("tr", { children: [
766
+ /* @__PURE__ */ e("td", { children: "Toggle play/pause" }),
767
+ /* @__PURE__ */ e("td", { children: "Space, K" })
768
+ ] }),
769
+ /* @__PURE__ */ a("tr", { children: [
770
+ /* @__PURE__ */ e("td", { children: "Enter full screen" }),
771
+ /* @__PURE__ */ e("td", { children: "F" })
772
+ ] }),
773
+ /* @__PURE__ */ a("tr", { children: [
774
+ /* @__PURE__ */ e("td", { children: "Exit full screen" }),
775
+ /* @__PURE__ */ e("td", { children: "Esc, F" })
776
+ ] }),
777
+ /* @__PURE__ */ a("tr", { children: [
778
+ /* @__PURE__ */ e("td", { children: "Toggle captions" }),
779
+ /* @__PURE__ */ e("td", { children: "C" })
780
+ ] }),
781
+ /* @__PURE__ */ a("tr", { children: [
782
+ /* @__PURE__ */ e("td", { children: "Next caption language" }),
783
+ /* @__PURE__ */ e("td", { children: "V" })
784
+ ] }),
785
+ /* @__PURE__ */ a("tr", { children: [
786
+ /* @__PURE__ */ e("td", { children: "Previous caption language" }),
787
+ /* @__PURE__ */ e("td", { children: "X" })
788
+ ] }),
789
+ /* @__PURE__ */ a("tr", { children: [
790
+ /* @__PURE__ */ e("td", { children: "Decrease playback speed" }),
791
+ /* @__PURE__ */ e("td", { children: "A" })
792
+ ] }),
793
+ /* @__PURE__ */ a("tr", { children: [
794
+ /* @__PURE__ */ e("td", { children: "Reset playback speed to 1x" }),
795
+ /* @__PURE__ */ e("td", { children: "S" })
796
+ ] }),
797
+ /* @__PURE__ */ a("tr", { children: [
798
+ /* @__PURE__ */ e("td", { children: "Increase playback speed" }),
799
+ /* @__PURE__ */ e("td", { children: "D" })
800
+ ] }),
801
+ /* @__PURE__ */ a("tr", { children: [
802
+ /* @__PURE__ */ e("td", { children: "Jump to start" }),
803
+ /* @__PURE__ */ e("td", { children: "0" })
804
+ ] }),
805
+ /* @__PURE__ */ a("tr", { children: [
806
+ /* @__PURE__ */ e("td", { children: "Jump to specific percentage (1-10%, 2-20%, etc)" }),
807
+ /* @__PURE__ */ e("td", { children: "1-9" })
808
+ ] })
809
+ ] })
810
+ ] })
811
+ ]
812
+ }
813
+ );
630
814
  }
631
- const En = "_play-pause-button_1owe7_1", Un = {
815
+ function rn() {
816
+ const [t, n] = v(!1), [o, c] = v(!1), [s, r] = v(!1), u = i(p), f = m("playing"), g = O(), h = d(() => {
817
+ n(!0), u == null || u.disableInteractions(), f && (r(!0), g.pause());
818
+ }, [f, g, u]), C = d(() => {
819
+ n(!1), c(!0), u == null || u.enableInteractions(), s && (r(!1), g.play());
820
+ }, [s, g, u]), L = d(
821
+ (k) => o && (k == null ? void 0 : k.focus()),
822
+ [o]
823
+ );
824
+ return t ? /* @__PURE__ */ e(ln, { onClose: C }) : /* @__PURE__ */ e(
825
+ "button",
826
+ {
827
+ ref: L,
828
+ "aria-label": "Keyboard shortcuts",
829
+ type: "button",
830
+ className: $.keyboardShortcutsButton,
831
+ onClick: h,
832
+ tabIndex: 0,
833
+ children: /* @__PURE__ */ e(on, {})
834
+ }
835
+ );
836
+ }
837
+ const un = "_play-pause-button_1owe7_1", dn = {
632
838
  "play-pause-button": "_play-pause-button_1owe7_1",
633
- playPauseButton: En
839
+ playPauseButton: un
634
840
  };
635
- function Qn() {
636
- const n = _e(), t = r("paused");
637
- return n ? /* @__PURE__ */ e(
841
+ function hn() {
842
+ const t = fe(), n = i(p), o = m("paused");
843
+ return t ? /* @__PURE__ */ e(
638
844
  ge,
639
845
  {
640
- className: `${Un.playPauseButton} controls-button`,
641
- onKeyDown: (a) => {
642
- a.key === " " && (n == null || n.$state.lastKeyboardAction.set({
846
+ tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
847
+ className: `${dn.playPauseButton} controls-button`,
848
+ onKeyDown: (c) => {
849
+ c.key === " " && (t == null || t.$state.lastKeyboardAction.set({
643
850
  action: "togglePaused",
644
- event: a.nativeEvent
851
+ event: c.nativeEvent
645
852
  }));
646
853
  },
647
- children: t ? /* @__PURE__ */ e(Z, { className: "controls-button-icon" }) : /* @__PURE__ */ e($, { className: "controls-button-icon" })
854
+ children: o ? /* @__PURE__ */ e(z, { className: "controls-button-icon" }) : /* @__PURE__ */ e(q, { className: "controls-button-icon" })
648
855
  }
649
856
  ) : null;
650
857
  }
651
- const Wn = "_poster_195hi_1", Dn = {
652
- poster: Wn
858
+ const mn = "_poster_195hi_1", _n = {
859
+ poster: mn
653
860
  };
654
- function Gn({ src: n }) {
655
- const t = r("source");
656
- return t.type === "video/youtube" || t.type === "video/vimeo" ? null : /* @__PURE__ */ e(pe, { src: n, className: Dn.poster });
861
+ function pn({ src: t }) {
862
+ const n = m("source");
863
+ return n.type === "video/youtube" || n.type === "video/vimeo" ? null : /* @__PURE__ */ e(ke, { src: t, className: _n.poster });
657
864
  }
658
- const Xn = (n) => /* @__PURE__ */ e("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.94968 7.74766L3.99993 2.79791L2.79785 3.99999L7.7476 8.94974L2.79785 13.8995L3.99993 15.1016L8.94968 10.1518L13.8994 15.1016L15.1015 13.8995L10.1518 8.94974L15.1015 3.99999L13.8994 2.79791L8.94968 7.74766Z", fill: "currentColor" }) }), Yn = "_small-layout-overlay_xbovu_1", Jn = "_small-layout-button_xbovu_14", et = "_small-layout-icon-play_xbovu_24", nt = "_small-layout-icon-pause_xbovu_30", tt = "_full-screen-close-icon_xbovu_36", at = "_fade-out_xbovu_1", y = {
865
+ const bn = "_small-layout-overlay_xbovu_1", fn = "_small-layout-button_xbovu_14", gn = "_small-layout-icon-play_xbovu_24", kn = "_small-layout-icon-pause_xbovu_30", wn = "_full-screen-close-icon_xbovu_36", Cn = "_fade-out_xbovu_1", H = {
659
866
  "small-layout-overlay": "_small-layout-overlay_xbovu_1",
660
- smallLayoutOverlay: Yn,
867
+ smallLayoutOverlay: bn,
661
868
  "small-layout-button": "_small-layout-button_xbovu_14",
662
- smallLayoutButton: Jn,
869
+ smallLayoutButton: fn,
663
870
  "small-layout-icon-play": "_small-layout-icon-play_xbovu_24",
664
- smallLayoutIconPlay: et,
871
+ smallLayoutIconPlay: gn,
665
872
  "small-layout-icon-pause": "_small-layout-icon-pause_xbovu_30",
666
- smallLayoutIconPause: nt,
873
+ smallLayoutIconPause: kn,
667
874
  "full-screen-close-icon": "_full-screen-close-icon_xbovu_36",
668
- fullScreenCloseIcon: tt,
875
+ fullScreenCloseIcon: wn,
669
876
  "fade-out": "_fade-out_xbovu_1",
670
- fadeOut: at
877
+ fadeOut: Cn
671
878
  };
672
- function ot() {
673
- return /* @__PURE__ */ l("div", { className: y.smallLayoutOverlay, children: [
674
- /* @__PURE__ */ e(X, { className: y.fullScreenCloseIcon, children: /* @__PURE__ */ e(Xn, {}) }),
675
- /* @__PURE__ */ l("i", { className: y.smallLayoutButton, children: [
676
- /* @__PURE__ */ e(Z, { className: y.smallLayoutIconPlay }),
677
- /* @__PURE__ */ e($, { className: y.smallLayoutIconPause })
879
+ function vn() {
880
+ return /* @__PURE__ */ a("div", { className: H.smallLayoutOverlay, children: [
881
+ /* @__PURE__ */ e(J, { className: H.fullScreenCloseIcon, children: /* @__PURE__ */ e(le, {}) }),
882
+ /* @__PURE__ */ a("i", { className: H.smallLayoutButton, children: [
883
+ /* @__PURE__ */ e(z, { className: H.smallLayoutIconPlay }),
884
+ /* @__PURE__ */ e(q, { className: H.smallLayoutIconPause })
678
885
  ] })
679
886
  ] });
680
887
  }
681
- const lt = "_time-indicator_1wsym_1", st = {
888
+ const yn = "_time-indicator_1wsym_1", Ln = {
682
889
  "time-indicator": "_time-indicator_1wsym_1",
683
- timeIndicator: lt
890
+ timeIndicator: yn
684
891
  };
685
- function ct() {
686
- return /* @__PURE__ */ l("div", { className: st.timeIndicator, children: [
687
- /* @__PURE__ */ e(z, { type: "current" }),
892
+ function Mn() {
893
+ return /* @__PURE__ */ a("div", { className: Ln.timeIndicator, children: [
894
+ /* @__PURE__ */ e(A, { type: "current" }),
688
895
  "/",
689
- /* @__PURE__ */ e(z, { type: "duration" })
896
+ /* @__PURE__ */ e(A, { type: "duration" })
690
897
  ] });
691
898
  }
692
- const it = "_timeline-wrapper_j9z56_1", rt = "_track_j9z56_8", ut = "_thumb_j9z56_19", dt = "_root_j9z56_33", mt = "_track-inner_j9z56_63", ht = "_progress_j9z56_69", _t = "_track-fill_j9z56_75", g = {
899
+ const Nn = "_timeline-wrapper_j9z56_1", xn = "_track_j9z56_8", In = "_thumb_j9z56_19", Bn = "_root_j9z56_33", Hn = "_track-inner_j9z56_63", Vn = "_progress_j9z56_69", Tn = "_track-fill_j9z56_75", w = {
693
900
  "timeline-wrapper": "_timeline-wrapper_j9z56_1",
694
- timelineWrapper: it,
695
- track: rt,
696
- thumb: ut,
697
- root: dt,
901
+ timelineWrapper: Nn,
902
+ track: xn,
903
+ thumb: In,
904
+ root: Bn,
698
905
  "track-inner": "_track-inner_j9z56_63",
699
- trackInner: mt,
700
- progress: ht,
906
+ trackInner: Hn,
907
+ progress: Vn,
701
908
  "track-fill": "_track-fill_j9z56_75",
702
- trackFill: _t
703
- }, gt = `${g.progress} ${g.trackInner}`, pt = `${g.trackFill} ${g.trackInner}`;
704
- function A({ className: n }) {
705
- const t = n ? `${g.timelineWrapper} ${n}` : g.timelineWrapper;
706
- return /* @__PURE__ */ e("div", { className: t, children: /* @__PURE__ */ l(w.Root, { className: g.root, children: [
707
- /* @__PURE__ */ l(w.Track, { className: g.track, children: [
708
- /* @__PURE__ */ e(w.Progress, { className: gt }),
709
- /* @__PURE__ */ e(w.TrackFill, { className: pt })
710
- ] }),
711
- /* @__PURE__ */ e(w.Thumb, { className: g.thumb })
712
- ] }) });
909
+ trackFill: Tn
910
+ }, Pn = `${w.progress} ${w.trackInner}`, Sn = `${w.trackFill} ${w.trackInner}`;
911
+ function E({ className: t }) {
912
+ const n = i(p), o = t ? `${w.timelineWrapper} ${t}` : w.timelineWrapper;
913
+ return /* @__PURE__ */ e("div", { className: o, children: /* @__PURE__ */ a(
914
+ B.Root,
915
+ {
916
+ className: w.root,
917
+ tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
918
+ children: [
919
+ /* @__PURE__ */ a(B.Track, { className: w.track, children: [
920
+ /* @__PURE__ */ e(B.Progress, { className: Pn }),
921
+ /* @__PURE__ */ e(B.TrackFill, { className: Sn })
922
+ ] }),
923
+ /* @__PURE__ */ e(B.Thumb, { className: w.thumb })
924
+ ]
925
+ }
926
+ ) });
713
927
  }
714
- const ft = "_wrapper_3zgs9_1", bt = "_track_3zgs9_6", kt = "_thumb_3zgs9_16", Ct = "_track-fill_3zgs9_30", vt = "_root_3zgs9_48", L = {
715
- wrapper: ft,
716
- track: bt,
717
- thumb: kt,
718
- "track-fill": "_track-fill_3zgs9_30",
719
- trackFill: Ct,
720
- root: vt
928
+ const Rn = "_wrapper_ulntk_1", Fn = "_track_ulntk_6", Zn = "_thumb_ulntk_18", jn = "_track-fill_ulntk_32", $n = "_root_ulntk_50", V = {
929
+ wrapper: Rn,
930
+ track: Fn,
931
+ thumb: Zn,
932
+ "track-fill": "_track-fill_ulntk_32",
933
+ trackFill: jn,
934
+ root: $n
721
935
  };
722
- function wt() {
723
- const n = r("volume"), t = r("muted");
724
- return /* @__PURE__ */ l("div", { className: L.wrapper, children: [
725
- /* @__PURE__ */ e(fe, { className: "controls-button", children: t || n == 0 ? /* @__PURE__ */ e(ne, { className: "controls-button-icon" }) : n < 0.5 ? /* @__PURE__ */ e(te, { className: "controls-button-icon" }) : /* @__PURE__ */ e(ae, { className: "controls-button-icon" }) }),
726
- /* @__PURE__ */ l(V.Root, { className: L.root, children: [
727
- /* @__PURE__ */ e(V.Track, { className: L.track, children: /* @__PURE__ */ e(V.TrackFill, { className: L.trackFill }) }),
728
- /* @__PURE__ */ e(V.Thumb, { className: L.thumb })
729
- ] })
936
+ function On() {
937
+ const t = m("volume"), n = m("muted"), o = i(p);
938
+ return /* @__PURE__ */ a("div", { className: V.wrapper, children: [
939
+ /* @__PURE__ */ e(
940
+ we,
941
+ {
942
+ tabIndex: o != null && o.state.interactionsDisabled ? -1 : 0,
943
+ className: "controls-button",
944
+ children: n || t == 0 ? /* @__PURE__ */ e(ae, { className: "controls-button-icon" }) : t < 0.5 ? /* @__PURE__ */ e(ce, { className: "controls-button-icon" }) : /* @__PURE__ */ e(se, { className: "controls-button-icon" })
945
+ }
946
+ ),
947
+ /* @__PURE__ */ a(
948
+ S.Root,
949
+ {
950
+ className: V.root,
951
+ tabIndex: o != null && o.state.interactionsDisabled ? -1 : 0,
952
+ children: [
953
+ /* @__PURE__ */ e(S.Track, { className: V.track, children: /* @__PURE__ */ e(S.TrackFill, { className: V.trackFill }) }),
954
+ /* @__PURE__ */ e(S.Thumb, { className: V.thumb })
955
+ ]
956
+ }
957
+ )
730
958
  ] });
731
959
  }
732
- const K = {
960
+ const qn = {}, U = {
733
961
  togglePaused: ["Space", "Enter", "k"],
734
962
  seekForward: ["ArrowRight"],
735
963
  seekBackward: ["ArrowLeft"],
@@ -740,105 +968,162 @@ const K = {
740
968
  toggleCaptions: ["c"],
741
969
  nextCaptionLanguage: {
742
970
  keys: ["v"],
743
- onKeyUp({ event: n, player: t, remote: a }) {
744
- const o = t.textTracks.selectedIndex, c = o + 1;
745
- a.changeTextTrackMode(o, "hidden"), a.changeTextTrackMode(
746
- c >= t.textTracks.length ? 0 : c,
971
+ onKeyUp({ event: t, player: n, remote: o }) {
972
+ const c = n.textTracks.selectedIndex, s = c + 1;
973
+ o.changeTextTrackMode(c, "hidden"), o.changeTextTrackMode(
974
+ s >= n.textTracks.length ? 0 : s,
747
975
  "showing"
748
- ), t.$state.lastKeyboardAction.set({
976
+ ), n.$state.lastKeyboardAction.set({
749
977
  action: "nextCaptionLanguage",
750
- event: n
978
+ event: t
751
979
  });
752
980
  }
753
981
  },
754
982
  previousCaptionLanguage: {
755
983
  keys: ["x"],
756
- onKeyUp({ event: n, player: t, remote: a }) {
757
- const o = t.textTracks.selectedIndex, c = o - 1;
758
- a.changeTextTrackMode(o, "hidden"), a.changeTextTrackMode(
759
- c < 0 ? t.textTracks.length - 1 : c,
984
+ onKeyUp({ event: t, player: n, remote: o }) {
985
+ const c = n.textTracks.selectedIndex, s = c - 1;
986
+ o.changeTextTrackMode(c, "hidden"), o.changeTextTrackMode(
987
+ s < 0 ? n.textTracks.length - 1 : s,
760
988
  "showing"
761
- ), t.$state.lastKeyboardAction.set({
989
+ ), n.$state.lastKeyboardAction.set({
762
990
  action: "previousCaptionLanguage",
763
- event: n
991
+ event: t
764
992
  });
765
993
  }
766
994
  },
767
995
  decreasePlaybackRate: {
768
996
  keys: ["a"],
769
- onKeyUp({ event: n, player: t, remote: a }) {
770
- const c = b.indexOf(t.playbackRate) - 1;
771
- c >= 0 && (a.changePlaybackRate(b[c]), t.$state.lastKeyboardAction.set({
997
+ onKeyUp({ event: t, player: n, remote: o }) {
998
+ const s = x.indexOf(n.playbackRate) - 1;
999
+ s >= 0 && (o.changePlaybackRate(x[s]), n.$state.lastKeyboardAction.set({
772
1000
  action: "decreasePlaybackRate",
773
- event: n
1001
+ event: t
774
1002
  }));
775
1003
  }
776
1004
  },
777
1005
  increasePlaybackRate: {
778
1006
  keys: ["d"],
779
- onKeyUp({ event: n, player: t, remote: a }) {
780
- const c = b.indexOf(t.playbackRate) + 1;
781
- c < b.length && (a.changePlaybackRate(b[c]), t.$state.lastKeyboardAction.set({
1007
+ onKeyUp({ event: t, player: n, remote: o }) {
1008
+ const s = x.indexOf(n.playbackRate) + 1;
1009
+ s < x.length && (o.changePlaybackRate(x[s]), n.$state.lastKeyboardAction.set({
782
1010
  action: "increasePlaybackRate",
783
- event: n
1011
+ event: t
784
1012
  }));
785
1013
  }
786
1014
  },
787
1015
  resetPlaybackRate: {
788
1016
  keys: ["s"],
789
- onKeyUp({ event: n, player: t, remote: a }) {
790
- a.changePlaybackRate(1), t.$state.lastKeyboardAction.set({
1017
+ onKeyUp({ event: t, player: n, remote: o }) {
1018
+ o.changePlaybackRate(1), n.$state.lastKeyboardAction.set({
791
1019
  action: "resetPlaybackRate",
792
- event: n
1020
+ event: t
793
1021
  });
794
1022
  }
795
1023
  },
796
1024
  seekForward10Seconds: {
797
1025
  keys: ["l"],
798
- onKeyUp({ event: n, player: t, remote: a }) {
799
- a.seek(t.currentTime + 10), t.$state.lastKeyboardAction.set({
1026
+ onKeyUp({ event: t, player: n, remote: o }) {
1027
+ o.seek(n.currentTime + 10), n.$state.lastKeyboardAction.set({
800
1028
  action: "seekForward10",
801
- event: n
1029
+ event: t
802
1030
  });
803
1031
  }
804
1032
  },
805
1033
  seekBackward10Seconds: {
806
1034
  keys: ["j"],
807
- onKeyUp({ event: n, player: t, remote: a }) {
808
- a.seek(t.currentTime - 10), t.$state.lastKeyboardAction.set({
1035
+ onKeyUp({ event: t, player: n, remote: o }) {
1036
+ o.seek(n.currentTime - 10), n.$state.lastKeyboardAction.set({
809
1037
  action: "seekBackward10",
810
- event: n
1038
+ event: t
811
1039
  });
812
1040
  }
813
1041
  }
814
- }, yt = {};
815
- function Bt({
816
- title: n,
817
- src: t,
818
- captions: a = [],
819
- thumbnail: o,
820
- hideFullScreen: c = !1
821
- }) {
822
- const [i, _] = T({
823
- captionsFontSizeMultiplier: { label: "100%", value: 1 }
824
- }), p = W(() => c ? {
825
- ...K,
1042
+ };
1043
+ function zn({ hideFullScreen: t }) {
1044
+ const [n, o] = v({
1045
+ captionsFontSizeMultiplier: { label: "100%", value: 1 },
1046
+ captionPositionOnTop: !1,
1047
+ captionsInvertColors: !1,
1048
+ interactionsDisabled: !1
1049
+ }), c = d(
1050
+ (h) => {
1051
+ o((C) => ({
1052
+ ...C,
1053
+ captionsFontSizeMultiplier: h
1054
+ }));
1055
+ },
1056
+ []
1057
+ ), s = d(() => {
1058
+ o((h) => ({
1059
+ ...h,
1060
+ captionPositionOnTop: !h.captionPositionOnTop
1061
+ }));
1062
+ }, []), r = d(() => {
1063
+ o((h) => ({
1064
+ ...h,
1065
+ captionsInvertColors: !h.captionsInvertColors
1066
+ }));
1067
+ }, []), u = d(() => {
1068
+ o((h) => ({
1069
+ ...h,
1070
+ interactionsDisabled: !1
1071
+ }));
1072
+ }, []), f = d(() => {
1073
+ o((h) => ({
1074
+ ...h,
1075
+ interactionsDisabled: !0
1076
+ }));
1077
+ }, []), g = Y(() => t ? {
1078
+ ...U,
826
1079
  toggleFullscreen: []
827
- } : K, [c]);
828
- return /* @__PURE__ */ e(N.Provider, { value: { state: i, setState: _, hideFullScreen: c }, children: /* @__PURE__ */ l(be, { title: n, src: t, keyShortcuts: p, playsInline: !0, children: [
829
- /* @__PURE__ */ l(ke, { className: yt.mediaProvider, children: [
830
- /* @__PURE__ */ e(Te, {}),
831
- /* @__PURE__ */ e(Gn, { src: o }),
832
- /* @__PURE__ */ e($e, { captions: a }),
833
- /* @__PURE__ */ e(Fn, {}),
834
- /* @__PURE__ */ e(ot, {}),
835
- /* @__PURE__ */ e(Kn, {})
836
- ] }),
837
- /* @__PURE__ */ e(Ke, {})
838
- ] }) });
1080
+ } : U, [t]);
1081
+ return {
1082
+ contextValue: {
1083
+ state: n,
1084
+ setCaptionsFontSizeMultiplier: c,
1085
+ toggleCaptionPositionOnTop: s,
1086
+ toggleCaptionsInvertColors: r,
1087
+ enableInteractions: u,
1088
+ disableInteractions: f,
1089
+ hideFullScreen: t
1090
+ },
1091
+ shortcuts: g
1092
+ };
1093
+ }
1094
+ function Un({
1095
+ title: t,
1096
+ src: n,
1097
+ captions: o = [],
1098
+ thumbnail: c,
1099
+ hideFullScreen: s = !1
1100
+ }) {
1101
+ const { contextValue: r, shortcuts: u } = zn({ hideFullScreen: s });
1102
+ return /* @__PURE__ */ e(p.Provider, { value: r, children: /* @__PURE__ */ a(
1103
+ Ce,
1104
+ {
1105
+ title: t,
1106
+ src: n,
1107
+ keyShortcuts: u,
1108
+ playsInline: !0,
1109
+ keyDisabled: r.state.interactionsDisabled,
1110
+ children: [
1111
+ /* @__PURE__ */ e(rn, {}),
1112
+ /* @__PURE__ */ a(ve, { className: qn.mediaProvider, children: [
1113
+ /* @__PURE__ */ e(Ze, {}),
1114
+ /* @__PURE__ */ e(pn, { src: c }),
1115
+ /* @__PURE__ */ e(qe, { captions: o }),
1116
+ /* @__PURE__ */ e(Qt, {}),
1117
+ /* @__PURE__ */ e(vn, {}),
1118
+ /* @__PURE__ */ e(nn, {})
1119
+ ] }),
1120
+ /* @__PURE__ */ e(Qe, {})
1121
+ ]
1122
+ }
1123
+ ) });
839
1124
  }
840
1125
  export {
841
- ln as CAPTION_FONT_SIZE_MULTIPLIERS,
842
- b as PLAYBACK_RATES,
843
- Bt as StudioPlayer
1126
+ rt as CAPTION_FONT_SIZE_MULTIPLIERS,
1127
+ x as PLAYBACK_RATES,
1128
+ Un as StudioPlayer
844
1129
  };