@instructure/studio-player 0.1.5 → 0.2.0

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.
@@ -1,584 +1,796 @@
1
- import { jsx as e, jsxs as a, Fragment as Q } from "react/jsx-runtime";
2
- import { Spinner as Z, useMediaState as m, isTrackCaptionKind as ue, useMediaRemote as $, 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 u, 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 Ie, useDismiss as xe, 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 = {
1
+ import './index.css';var Re = Object.defineProperty;
2
+ var Ae = (e, n, o) => n in e ? Re(e, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[n] = o;
3
+ var N = (e, n, o) => Ae(e, typeof n != "symbol" ? n + "" : n, o);
4
+ import { jsx as t, jsxs as s, Fragment as J } from "react/jsx-runtime";
5
+ import { createContext as X, useContext as y, useState as P, useCallback as p, useEffect as V, useMemo as F, useRef as he } from "react";
6
+ 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";
7
+ import { initReactI18next as We, useTranslation as C } from "react-i18next";
8
+ import Ge from "i18next";
9
+ import Qe from "i18next-resources-to-backend";
10
+ 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";
11
+ const et = (e, n, o) => {
12
+ const i = e[n];
13
+ return i ? typeof i == "function" ? i() : Promise.resolve(i) : new Promise((a, c) => {
14
+ (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
15
+ c.bind(
16
+ null,
17
+ new Error(
18
+ "Unknown variable dynamic import: " + n + (n.split("/").length !== o ? ". Note that variables only represent file names one level deep." : "")
19
+ )
20
+ )
21
+ );
22
+ });
23
+ };
24
+ Ge.use(We).use(
25
+ Qe(
26
+ (e) => et(/* @__PURE__ */ Object.assign({ "./locales/en.json": () => import("./en-DFSgRHa0.js"), "./locales/kl.json": () => import("./kl-dmbsz-te.js") }), `./locales/${e}.json`, 3)
27
+ )
28
+ ).init({
29
+ fallbackLng: "en",
30
+ partialBundledLanguages: !0,
31
+ ns: [],
32
+ resources: {},
33
+ interpolation: {
34
+ escapeValue: !1
35
+ }
36
+ });
37
+ const we = X(null);
38
+ function tt({
39
+ children: e,
40
+ contextValue: n
41
+ }) {
42
+ return /* @__PURE__ */ t(we.Provider, { value: n, children: e });
43
+ }
44
+ function g() {
45
+ const e = y(we);
46
+ if (!e)
47
+ throw new Error(
48
+ "useStudioPlayerContext must be used within a StudioPlayerContextProvider"
49
+ );
50
+ return e;
51
+ }
52
+ const Le = X(null);
53
+ function nt({
54
+ hideFullScreen: e,
55
+ comments: n,
56
+ annotations: o,
57
+ quizMarkers: i,
58
+ interactive: a,
59
+ onAnnotationClick: c,
60
+ onQuizMarkerClick: l,
61
+ onInteractivePinClick: u,
62
+ interactiveMenuElements: _,
63
+ children: f
64
+ }) {
65
+ const b = {
66
+ hideFullScreen: e,
67
+ comments: n,
68
+ annotations: o,
69
+ quizMarkers: i,
70
+ interactive: a,
71
+ onAnnotationClick: c,
72
+ onQuizMarkerClick: l,
73
+ onInteractivePinClick: u,
74
+ interactiveMenuElements: _,
75
+ hasComments: n.length > 0,
76
+ hasAnnotations: o.length > 0,
77
+ hasQuizmarkers: i.length > 0
78
+ };
79
+ return /* @__PURE__ */ t(Le.Provider, { value: b, children: f });
80
+ }
81
+ function B() {
82
+ const e = y(Le);
83
+ if (!e)
84
+ throw new Error(
85
+ "useStudioPlayerPropsContext must be used within a StudioPlayerPropsContextProvider"
86
+ );
87
+ return e;
88
+ }
89
+ const ot = "_annotation-overlay_1kxzn_1", it = {
90
+ "annotation-overlay": "_annotation-overlay_1kxzn_1",
91
+ annotationOverlay: ot
92
+ }, se = 0.25, at = (e, n) => {
93
+ let o = !1;
94
+ return (i) => {
95
+ const a = i.detail.currentTime;
96
+ a >= e.time && a < e.time + se && !o && (o = !0, n(e)), (a < e.time || a >= e.time + se) && o && (o = !1);
97
+ };
98
+ };
99
+ function st({ annotations: e }) {
100
+ const n = ee(), o = g(), [i, a] = P(
101
+ null
102
+ ), c = p(
103
+ (u) => {
104
+ n == null || n.pause(), o.disableInteractions(), a(u);
105
+ },
106
+ [n, o]
107
+ ), l = () => {
108
+ n == null || n.play(), a(null), o.enableInteractions();
109
+ };
110
+ return V(() => {
111
+ if (!n)
112
+ return;
113
+ const u = [];
114
+ for (const _ of e) {
115
+ const f = at(_, c);
116
+ n.addEventListener("time-update", f), u.push(f);
117
+ }
118
+ return () => {
119
+ for (const _ of u)
120
+ n.removeEventListener("time-update", _);
121
+ };
122
+ }, [n, e]), i ? /* @__PURE__ */ t("div", { className: it.annotationOverlay, children: i.render(l) }) : null;
123
+ }
124
+ 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 = {
6
125
  "media-buffering-indicator": "_media-buffering-indicator_1fwjr_1",
7
- mediaBufferingIndicator: Te,
126
+ mediaBufferingIndicator: ct,
8
127
  "media-buffering-spinner": "_media-buffering-spinner_1fwjr_17",
9
- mediaBufferingSpinner: Pe,
128
+ mediaBufferingSpinner: lt,
10
129
  "media-buffering-spin": "_media-buffering-spin_1fwjr_17",
11
- mediaBufferingSpin: Se,
130
+ mediaBufferingSpin: rt,
12
131
  "media-buffering-track": "_media-buffering-track_1fwjr_22",
13
- mediaBufferingTrack: Re,
132
+ mediaBufferingTrack: ut,
14
133
  "media-buffering-track-fill": "_media-buffering-track-fill_1fwjr_27",
15
- mediaBufferingTrackFill: Fe
134
+ mediaBufferingTrackFill: dt
16
135
  };
17
- function qe() {
18
- return /* @__PURE__ */ e("div", { className: R.mediaBufferingIndicator, children: /* @__PURE__ */ a(Z.Root, { className: R.mediaBufferingSpinner, size: 96, children: [
19
- /* @__PURE__ */ e(Z.Track, { className: R.mediaBufferingTrack, width: 8 }),
20
- /* @__PURE__ */ e(
21
- Z.TrackFill,
136
+ function mt() {
137
+ return /* @__PURE__ */ t("div", { className: U.mediaBufferingIndicator, children: /* @__PURE__ */ s(G.Root, { className: U.mediaBufferingSpinner, size: 96, children: [
138
+ /* @__PURE__ */ t(G.Track, { className: U.mediaBufferingTrack, width: 8 }),
139
+ /* @__PURE__ */ t(
140
+ G.TrackFill,
22
141
  {
23
- className: R.mediaBufferingTrackFill,
142
+ className: U.mediaBufferingTrackFill,
24
143
  width: 8
25
144
  }
26
145
  )
27
146
  ] }) });
28
147
  }
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
- /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_149_104418", children: /* @__PURE__ */ e("rect", { width: 24, height: 24, fill: "white" }) }) }),
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
- ] }), te = (t) => /* @__PURE__ */ a("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
33
- /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_149_104406", children: /* @__PURE__ */ e("rect", { width: 24, height: 24, fill: "white" }) }) }),
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" }) })
148
+ 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: [
149
+ /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_149_104418", children: /* @__PURE__ */ t("rect", { width: 24, height: 24, fill: "white" }) }) }),
150
+ /* @__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" }) })
151
+ ] }), Ne = (e) => /* @__PURE__ */ s("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...e, children: [
152
+ /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_149_104406", children: /* @__PURE__ */ t("rect", { width: 24, height: 24, fill: "white" }) }) }),
153
+ /* @__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" }) })
35
154
  ] });
36
- function Ze() {
37
- const t = m("hasCaptions"), n = m("textTrack"), o = n && ue(n), c = $(), s = i(p), r = u(
38
- (d) => {
39
- c.toggleCaptions(d.nativeEvent);
155
+ function ht() {
156
+ const e = Z(), n = v("textTrack"), o = v("hasCaptions"), i = n && Ee(n), a = g(), c = p(
157
+ (l) => {
158
+ e.toggleCaptions(l.nativeEvent);
40
159
  },
41
- [c]
160
+ [e]
42
161
  );
43
- return t ? /* @__PURE__ */ e(
162
+ return o ? /* @__PURE__ */ t(
44
163
  "button",
45
164
  {
46
165
  type: "button",
47
166
  className: "controls-button",
48
- onClick: r,
167
+ onClick: c,
49
168
  "aria-label": "Captions",
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" })
169
+ tabIndex: a.state.interactionsDisabled ? -1 : 0,
170
+ children: i ? /* @__PURE__ */ t(Ne, { className: "controls-button-icon" }) : /* @__PURE__ */ t(Pe, { className: "controls-button-icon" })
52
171
  }
53
172
  ) : null;
54
173
  }
55
- const je = "_captions_13epz_1", $e = {
56
- captions: je
174
+ const _t = "_captions_13epz_1", pt = {
175
+ captions: _t
57
176
  };
58
- function Oe({ captions: t }) {
59
- const n = m("hasCaptions"), o = i(p);
60
- return /* @__PURE__ */ a(Q, { children: [
61
- t.map((c) => /* @__PURE__ */ e(
62
- he,
177
+ function vt({ captions: e }) {
178
+ const n = v("hasCaptions"), o = g();
179
+ return /* @__PURE__ */ s(J, { children: [
180
+ e.map((i) => /* @__PURE__ */ t(
181
+ Oe,
63
182
  {
64
183
  kind: "subtitles",
65
- type: c.type,
66
- language: c.language,
67
- label: c.label,
68
- src: c.src
184
+ type: i.type,
185
+ language: i.language,
186
+ label: i.label,
187
+ src: i.src
69
188
  },
70
- c.label
189
+ i.label
71
190
  )),
72
- n ? /* @__PURE__ */ e(
191
+ n ? /* @__PURE__ */ t(
73
192
  "div",
74
193
  {
75
194
  style: {
76
195
  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)"
196
+ "--captions-font-size-multiplier": o.state.captionsFontSizeMultiplier ?? 1,
197
+ "--captions-flex-direction": o.state.captionPositionOnTop ? "column" : "column-reverse",
198
+ "--captions-color": o.state.captionsInvertColors ? "rgba(22, 22, 22)" : "white",
199
+ "--captions-background-color": o.state.captionsInvertColors ? "rgba(255, 255, 255, 0.75)" : "rgba(22, 22, 22, 0.75)"
81
200
  },
82
- children: /* @__PURE__ */ e(me, { className: $e.captions })
201
+ children: /* @__PURE__ */ t(Fe, { className: pt.captions })
83
202
  }
84
203
  ) : null
85
204
  ] });
86
205
  }
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,
89
- "left-controls": "_left-controls_zdwuq_27",
90
- leftControls: Ae,
91
- "right-controls": "_right-controls_zdwuq_33",
92
- rightControls: Ke,
93
- indicators: De,
94
- "normal-timeline": "_normal-timeline_zdwuq_48",
95
- normalTimeline: Ee,
96
- "compact-timeline": "_compact-timeline_zdwuq_54",
97
- compactTimeline: Ue
206
+ const S = [0.5, 0.75, 1, 1.25, 1.5, 2], ft = [0.5, 1, 2, 3, 4], xe = 5, Ct = (e) => {
207
+ const [, n] = P({});
208
+ return F(() => {
209
+ let o = [];
210
+ return {
211
+ add(i) {
212
+ o.length >= e && o.shift(), o.push(i), n({});
213
+ },
214
+ remove(i) {
215
+ o = o.filter((a) => a !== i), n({});
216
+ },
217
+ map(i) {
218
+ return o.map(i);
219
+ }
220
+ };
221
+ }, []);
222
+ }, gt = (e, n, o) => {
223
+ let i = !1;
224
+ return (a) => {
225
+ const c = a.detail.currentTime;
226
+ 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);
227
+ };
228
+ }, bt = (e, n = 5) => {
229
+ const o = ee(), i = Ct(n);
230
+ return V(() => {
231
+ if (!o)
232
+ return;
233
+ const a = [];
234
+ for (const c of e) {
235
+ const l = gt(c, xe, i);
236
+ a.push(l), o.addEventListener("time-update", l);
237
+ }
238
+ return () => {
239
+ for (const c of a)
240
+ o.removeEventListener("time-update", c);
241
+ };
242
+ }, [o, i, e]), i;
243
+ }, 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 = {
244
+ "comments-overlay": "_comments-overlay_agbjl_1",
245
+ commentsOverlay: kt,
246
+ "comments-container": "_comments-container_agbjl_9",
247
+ commentsContainer: yt,
248
+ comment: wt,
249
+ "comment-text": "_comment-text_agbjl_44",
250
+ commentText: Lt,
251
+ "comment-author-avatar": "_comment-author-avatar_agbjl_67",
252
+ commentAuthorAvatar: Pt,
253
+ "comment-author-name": "_comment-author-name_agbjl_86",
254
+ commentAuthorName: Nt
98
255
  };
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($n, {})
256
+ function xt({ comment: e }) {
257
+ return /* @__PURE__ */ s("div", { className: H.comment, onClick: e.onClick, children: [
258
+ /* @__PURE__ */ t(
259
+ "img",
260
+ {
261
+ className: H.commentAuthorAvatar,
262
+ src: e.user.avatar,
263
+ alt: e.user.name
264
+ }
265
+ ),
266
+ /* @__PURE__ */ t("span", { className: H.commentText, children: e.text }),
267
+ /* @__PURE__ */ t("span", { className: H.commentAuthorName, children: e.user.name })
268
+ ] });
269
+ }
270
+ const ce = 5;
271
+ function Mt({ comments: e }) {
272
+ const n = g(), o = bt(e, ce), i = !!v("textTrack"), a = o.map((c) => /* @__PURE__ */ t(xt, { comment: c }, c.id));
273
+ return e.length > 0 && n.state.commentsEnabled ? /* @__PURE__ */ t(
274
+ "div",
275
+ {
276
+ className: H.commentsOverlay,
277
+ style: {
278
+ flexDirection: n.state.captionPositionOnTop && i ? "column-reverse" : "column"
279
+ },
280
+ children: /* @__PURE__ */ t("div", { className: H.commentsContainer, children: i ? a.slice(-(ce - 1)) : a })
281
+ }
282
+ ) : null;
283
+ }
284
+ 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 = {
285
+ root: Tt,
286
+ "left-controls": "_left-controls_1mh1r_27",
287
+ leftControls: It,
288
+ "right-controls": "_right-controls_1mh1r_33",
289
+ rightControls: St,
290
+ indicators: Ht,
291
+ "normal-timeline": "_normal-timeline_1mh1r_48",
292
+ normalTimeline: Vt,
293
+ "compact-timeline": "_compact-timeline_1mh1r_54",
294
+ compactTimeline: Bt
295
+ };
296
+ function Rt() {
297
+ return /* @__PURE__ */ s("div", { className: I.root, children: [
298
+ /* @__PURE__ */ t(ue, { className: I.normalTimeline }),
299
+ /* @__PURE__ */ s("div", { className: I.leftControls, children: [
300
+ /* @__PURE__ */ t(to, {}),
301
+ /* @__PURE__ */ t(ai, {})
105
302
  ] }),
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(Ze, {}),
110
- /* @__PURE__ */ e(qt, {}),
111
- /* @__PURE__ */ e(Yt, {})
303
+ /* @__PURE__ */ t("div", { className: I.indicators, children: /* @__PURE__ */ t(po, {}) }),
304
+ /* @__PURE__ */ t(ue, { className: I.compactTimeline }),
305
+ /* @__PURE__ */ s("div", { className: I.rightControls, children: [
306
+ /* @__PURE__ */ t(ht, {}),
307
+ /* @__PURE__ */ t(xn, {}),
308
+ /* @__PURE__ */ t(Dn, {})
112
309
  ] })
113
310
  ] });
114
311
  }
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 = {
312
+ 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 = {
116
313
  "menu-hint": "_menu-hint_k49ve_1",
117
- menuHint: Xe,
314
+ menuHint: Et,
118
315
  "menu-button": "_menu-button_k49ve_5",
119
- menuButton: Ge,
316
+ menuButton: Ot,
120
317
  "menu-label": "_menu-label_k49ve_37",
121
- menuLabel: Ye,
318
+ menuLabel: Ft,
122
319
  "menu-icon": "_menu-icon_k49ve_42",
123
- menuIcon: et
320
+ menuIcon: Zt
124
321
  };
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, {})
322
+ function $({ label: e, hint: n, onClick: o, Icon: i }) {
323
+ return /* @__PURE__ */ s("button", { type: "button", className: q.menuButton, onClick: o, children: [
324
+ i && /* @__PURE__ */ t(i, { className: q.menuIcon }),
325
+ /* @__PURE__ */ t("span", { className: q.menuLabel, children: e }),
326
+ /* @__PURE__ */ t("span", { className: q.menuHint, children: n }),
327
+ /* @__PURE__ */ t(At, {})
131
328
  ] });
132
329
  }
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 = u(() => {
136
- t && t.setPage("speed");
137
- }, [t]);
138
- return t ? /* @__PURE__ */ e(
139
- T,
330
+ 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" }) });
331
+ function Kt() {
332
+ const e = y(w), n = v("playbackRate"), { t: o } = C(), i = p(() => {
333
+ e && e.setPage("speed");
334
+ }, [e]);
335
+ return e ? /* @__PURE__ */ t(
336
+ $,
140
337
  {
141
- label: "Playback Speed",
338
+ label: o("PLAYBACK_SPEED"),
142
339
  hint: `${n}x`,
143
- onClick: o,
144
- Icon: tt
340
+ onClick: i,
341
+ Icon: $t
145
342
  }
146
343
  ) : null;
147
344
  }
148
- function ot() {
149
- const t = i(b), n = m("hasCaptions"), o = m("textTrack"), c = u(() => {
150
- t && t.setPage("captions");
151
- }, [t]);
152
- return t && n ? /* @__PURE__ */ e(
153
- T,
345
+ function Dt() {
346
+ const e = y(w), n = v("hasCaptions"), o = v("textTrack"), { t: i } = C(), a = p(() => {
347
+ e && e.setPage("captions");
348
+ }, [e]);
349
+ return e && n ? /* @__PURE__ */ t(
350
+ $,
154
351
  {
155
- label: "Captions",
156
- hint: (o == null ? void 0 : o.label) ?? "Off",
157
- onClick: c,
158
- Icon: ee
352
+ label: i("CAPTIONS"),
353
+ hint: (o == null ? void 0 : o.label) ?? i("OFF"),
354
+ onClick: a,
355
+ Icon: Pe
159
356
  }
160
357
  ) : null;
161
358
  }
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: [
163
- /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_412_23039", children: /* @__PURE__ */ e("rect", { width: 18, height: 18, fill: "white" }) }) }),
164
- /* @__PURE__ */ a("g", { clipPath: "url(#clip0_412_23039)", children: [
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" }),
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" }),
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" })
359
+ 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: [
360
+ /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_412_23039", children: /* @__PURE__ */ t("rect", { width: 18, height: 18, fill: "white" }) }) }),
361
+ /* @__PURE__ */ s("g", { clipPath: "url(#clip0_412_23039)", children: [
362
+ /* @__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" }),
363
+ /* @__PURE__ */ t("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" }),
364
+ /* @__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" })
168
365
  ] })
169
366
  ] });
170
- function ct() {
171
- const t = i(b), n = m("autoQuality"), o = m("quality"), c = u(() => {
172
- t && t.setPage("quality");
173
- }, [t]);
174
- return t && o ? /* @__PURE__ */ e(
175
- T,
367
+ function jt() {
368
+ const e = y(w), n = v("autoQuality"), o = v("quality"), { t: i } = C(), a = p(() => {
369
+ e && e.setPage("quality");
370
+ }, [e]);
371
+ return e && o ? /* @__PURE__ */ t(
372
+ $,
176
373
  {
177
- label: "Quality",
178
- hint: n ? `Auto (${o.height}p)` : `${o.height}p`,
179
- onClick: c,
180
- Icon: at
374
+ label: i("QUALITY"),
375
+ hint: n ? i("AUTO", { quality: o.height }) : `${o.height}p`,
376
+ onClick: a,
377
+ Icon: zt
378
+ }
379
+ ) : null;
380
+ }
381
+ 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 = {
382
+ "switch-track": "_switch-track_vptv3_1",
383
+ switchTrack: Wt,
384
+ "switch-thumb": "_switch-thumb_vptv3_11",
385
+ switchThumb: Gt,
386
+ "switch-icon": "_switch-icon_vptv3_25",
387
+ switchIcon: Qt,
388
+ "switch-body": "_switch-body_vptv3_31",
389
+ switchBody: Yt,
390
+ "switch-label": "_switch-label_vptv3_68",
391
+ switchLabel: Jt,
392
+ "menu-icon": "_menu-icon_vptv3_72",
393
+ menuIcon: Xt
394
+ };
395
+ function te({
396
+ label: e,
397
+ checked: n = !1,
398
+ onClick: o,
399
+ Icon: i
400
+ }) {
401
+ const a = p(
402
+ (c) => {
403
+ (c.key === "Enter" || c.key === " ") && (o == null || o());
404
+ },
405
+ [o]
406
+ );
407
+ return /* @__PURE__ */ s(
408
+ "div",
409
+ {
410
+ className: M.switchBody,
411
+ role: "menuitemcheckbox",
412
+ "aria-checked": n,
413
+ onClick: o,
414
+ onKeyDown: a,
415
+ tabIndex: 0,
416
+ children: [
417
+ i && /* @__PURE__ */ t(i, { className: M.menuIcon }),
418
+ /* @__PURE__ */ t("span", { className: M.switchLabel, children: e }),
419
+ /* @__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 }) }) })
420
+ ]
421
+ }
422
+ );
423
+ }
424
+ 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" }) });
425
+ function tn() {
426
+ const { t: e } = C(), n = B(), o = g();
427
+ return n.hasComments ? /* @__PURE__ */ t(
428
+ te,
429
+ {
430
+ Icon: en,
431
+ label: e("COMMENTS"),
432
+ onClick: o.toggleComments,
433
+ checked: o.state.commentsEnabled
181
434
  }
182
435
  ) : null;
183
436
  }
184
- function y(t) {
185
- G(() => {
437
+ function T(e) {
438
+ V(() => {
186
439
  const n = (o) => {
187
- o.key === "Escape" && (t == null || t());
440
+ o.key === "Escape" && (e == null || e());
188
441
  };
189
442
  return document.addEventListener("keydown", n), () => {
190
443
  document.removeEventListener("keydown", n);
191
444
  };
192
445
  }, []);
193
446
  }
194
- const st = "_main-menu_7h96l_1", lt = {
447
+ const nn = "_main-menu_7h96l_1", on = {
195
448
  "main-menu": "_main-menu_7h96l_1",
196
- mainMenu: st
449
+ mainMenu: nn
197
450
  };
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, {})
451
+ function an() {
452
+ const e = y(w);
453
+ return T(e == null ? void 0 : e.toggle), /* @__PURE__ */ s("div", { className: on.mainMenu, children: [
454
+ /* @__PURE__ */ t(Kt, {}),
455
+ /* @__PURE__ */ t(Dt, {}),
456
+ /* @__PURE__ */ t(tn, {}),
457
+ /* @__PURE__ */ t(jt, {})
204
458
  ] });
205
459
  }
206
- const q = (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" }) }), I = [0.5, 0.75, 1, 1.25, 1.5, 2], rt = [
207
- { label: "50%", value: 0.5 },
208
- { label: "100%", value: 1 },
209
- { label: "200%", value: 2 },
210
- { label: "300%", value: 3 },
211
- { label: "400%", value: 4 }
212
- ], dt = "_menu-container_rqjaq_1", ut = "_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 = {
213
- "menu-container": "_menu-container_rqjaq_1",
214
- menuContainer: dt,
215
- "menu-options": "_menu-options_rqjaq_6",
216
- menuOptions: ut,
217
- "menu-heading": "_menu-heading_rqjaq_11",
218
- menuHeading: ht,
219
- "check-icon": "_check-icon_rqjaq_27",
220
- checkIcon: mt,
221
- "menu-item-label": "_menu-item-label_rqjaq_33",
222
- menuItemLabel: _t,
223
- "menu-item": "_menu-item_rqjaq_33",
224
- menuItem: pt,
225
- "menu-back-button": "_menu-back-button_rqjaq_65",
226
- menuBackButton: bt
460
+ 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 = {
461
+ "menu-container": "_menu-container_1bjr3_1",
462
+ menuContainer: sn,
463
+ "menu-options": "_menu-options_1bjr3_6",
464
+ menuOptions: cn,
465
+ "menu-heading": "_menu-heading_1bjr3_11",
466
+ menuHeading: ln,
467
+ "check-icon": "_check-icon_1bjr3_27",
468
+ checkIcon: rn,
469
+ "menu-item-label": "_menu-item-label_1bjr3_33",
470
+ menuItemLabel: un,
471
+ "menu-item": "_menu-item_1bjr3_33",
472
+ menuItem: dn,
473
+ "menu-back-button": "_menu-back-button_1bjr3_66",
474
+ menuBackButton: mn
227
475
  };
228
- function ft() {
229
- const t = i(b), n = _e({
230
- rates: I,
476
+ function hn() {
477
+ const e = y(w), n = Ze({
478
+ rates: S,
231
479
  normalLabel: "1x"
232
- });
233
- return y(t == null ? void 0 : t.backToMain), t ? /* @__PURE__ */ a("div", { className: l.menuContainer, children: [
234
- /* @__PURE__ */ a(
480
+ }), { t: o } = C();
481
+ return T(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
482
+ /* @__PURE__ */ s(
235
483
  "button",
236
484
  {
237
485
  type: "button",
238
- className: l.menuBackButton,
239
- onClick: t.backToMain,
486
+ className: r.menuBackButton,
487
+ onClick: e.backToMain,
240
488
  children: [
241
- /* @__PURE__ */ e(P, {}),
242
- /* @__PURE__ */ e("span", { children: "Back" })
489
+ /* @__PURE__ */ t(K, {}),
490
+ /* @__PURE__ */ t("span", { children: o("BACK") })
243
491
  ]
244
492
  }
245
493
  ),
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(
494
+ /* @__PURE__ */ t("strong", { className: r.menuHeading, children: o("PLAYBACK_SPEED") }),
495
+ /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: n.map(({ value: i, label: a, select: c, selected: l }) => /* @__PURE__ */ s(
248
496
  "button",
249
497
  {
250
498
  type: "button",
251
499
  role: "menuitemradio",
252
- "aria-checked": r,
500
+ "aria-checked": l,
253
501
  onClick: () => {
254
- s(), t.backToMain(), t.toggle();
502
+ c(), e.backToMain(), e.toggle();
255
503
  },
256
- className: l.menuItem,
504
+ className: r.menuItem,
257
505
  children: [
258
- /* @__PURE__ */ e(q, { className: l.checkIcon }),
259
- /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: c })
506
+ /* @__PURE__ */ t(W, { className: r.checkIcon }),
507
+ /* @__PURE__ */ t("span", { className: r.menuItemLabel, children: a })
260
508
  ]
261
509
  },
262
- o
510
+ i
263
511
  )) })
264
512
  ] }) : null;
265
513
  }
266
- function gt() {
267
- const t = i(b), n = m("textTrack"), o = u(() => {
268
- t && t.setPage("captionLanguage");
269
- }, [t]);
270
- return t ? /* @__PURE__ */ e(
271
- T,
514
+ function _n() {
515
+ const e = y(w), n = v("textTrack"), { t: o } = C(), i = p(() => {
516
+ e && e.setPage("captionLanguage");
517
+ }, [e]);
518
+ return e ? /* @__PURE__ */ t(
519
+ $,
272
520
  {
273
- label: "Language",
274
- hint: (n == null ? void 0 : n.label) ?? "Off",
275
- onClick: o
521
+ label: o("LANGUAGE"),
522
+ hint: (n == null ? void 0 : n.label) ?? o("OFF"),
523
+ onClick: i
276
524
  }
277
525
  ) : null;
278
526
  }
279
- function kt() {
280
- const t = i(p), n = i(b), o = u(() => {
281
- n && n.setPage("captionFontSize");
282
- }, [n]);
283
- return n && t ? /* @__PURE__ */ e(
284
- T,
527
+ function pn() {
528
+ const { t: e } = C(), n = g(), o = y(w), i = p(() => {
529
+ o && o.setPage("captionFontSize");
530
+ }, [o]);
531
+ return o ? /* @__PURE__ */ t(
532
+ $,
285
533
  {
286
- label: "Caption Font Size",
287
- hint: t.state.captionsFontSizeMultiplier.label,
288
- onClick: o
534
+ label: e("CAPTION_FONT_SIZE"),
535
+ hint: `${n.state.captionsFontSizeMultiplier * 100}%`,
536
+ onClick: i
289
537
  }
290
538
  ) : null;
291
539
  }
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 = u(
310
- (s) => {
311
- (s.key === "Enter" || s.key === " ") && (o == null || o());
312
- },
313
- [o]
314
- );
315
- return /* @__PURE__ */ a(
316
- "div",
540
+ function vn() {
541
+ const { t: e } = C(), n = g();
542
+ return /* @__PURE__ */ t(
543
+ te,
317
544
  {
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
- ]
545
+ label: e("ON_TOP"),
546
+ onClick: n.toggleCaptionPositionOnTop,
547
+ checked: n.state.captionPositionOnTop
328
548
  }
329
549
  );
330
550
  }
331
- function It() {
332
- const t = i(p);
333
- return t ? /* @__PURE__ */ e(
334
- ne,
551
+ function fn() {
552
+ const { t: e } = C(), n = g();
553
+ return /* @__PURE__ */ t(
554
+ te,
335
555
  {
336
- label: "On Top",
337
- onClick: t.toggleCaptionPositionOnTop,
338
- checked: t.state.captionPositionOnTop
556
+ label: e("INVERT_COLORS"),
557
+ onClick: n.toggleCaptionsInvertColors,
558
+ checked: n.state.captionsInvertColors
339
559
  }
340
- ) : null;
341
- }
342
- function xt() {
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
350
- }
351
- ) : null;
560
+ );
352
561
  }
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(
562
+ function Cn() {
563
+ const e = y(w), { t: n } = C();
564
+ return T(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
565
+ /* @__PURE__ */ s(
357
566
  "button",
358
567
  {
359
568
  type: "button",
360
- className: l.menuBackButton,
361
- onClick: t.backToMain,
569
+ className: r.menuBackButton,
570
+ onClick: e.backToMain,
362
571
  children: [
363
- /* @__PURE__ */ e(P, {}),
364
- /* @__PURE__ */ e("span", { children: "Back" })
572
+ /* @__PURE__ */ t(K, {}),
573
+ /* @__PURE__ */ t("span", { children: n("BACK") })
365
574
  ]
366
575
  }
367
576
  ),
368
- /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Captions" }),
369
- /* @__PURE__ */ e(gt, {}),
370
- /* @__PURE__ */ e(kt, {}),
371
- /* @__PURE__ */ e(It, {}),
372
- /* @__PURE__ */ e(xt, {})
577
+ /* @__PURE__ */ t("strong", { className: r.menuHeading, children: n("CAPTIONS") }),
578
+ /* @__PURE__ */ t(_n, {}),
579
+ /* @__PURE__ */ t(pn, {}),
580
+ /* @__PURE__ */ t(vn, {}),
581
+ /* @__PURE__ */ t(fn, {})
373
582
  ] }) : null;
374
583
  }
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(
584
+ function gn() {
585
+ const e = y(w), n = $e(), { t: o } = C();
586
+ return T(e == null ? void 0 : e.backToCaptions), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
587
+ /* @__PURE__ */ s(
379
588
  "button",
380
589
  {
381
590
  type: "button",
382
- className: l.menuBackButton,
383
- onClick: t.backToCaptions,
591
+ className: r.menuBackButton,
592
+ onClick: e.backToCaptions,
384
593
  children: [
385
- /* @__PURE__ */ e(P, {}),
386
- /* @__PURE__ */ e("span", { children: "Back" })
594
+ /* @__PURE__ */ t(K, {}),
595
+ /* @__PURE__ */ t("span", { children: o("BACK") })
387
596
  ]
388
597
  }
389
598
  ),
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(
599
+ /* @__PURE__ */ t("strong", { className: r.menuHeading, children: o("CAPTIONS") }),
600
+ /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: n.map(({ value: i, label: a, select: c, selected: l }) => /* @__PURE__ */ s(
392
601
  "button",
393
602
  {
394
603
  type: "button",
395
604
  role: "menuitemradio",
396
- "aria-checked": r,
605
+ "aria-checked": l,
397
606
  onClick: () => {
398
- s(), t.backToMain(), t.toggle();
607
+ c(), e.backToMain(), e.toggle();
399
608
  },
400
- className: l.menuItem,
609
+ className: r.menuItem,
401
610
  children: [
402
- /* @__PURE__ */ e(q, { className: l.checkIcon }),
403
- /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: c })
611
+ /* @__PURE__ */ t(W, { className: r.checkIcon }),
612
+ /* @__PURE__ */ t("span", { className: r.menuItemLabel, children: a })
404
613
  ]
405
614
  },
406
- o
615
+ i
407
616
  )) })
408
617
  ] }) : null;
409
618
  }
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(
619
+ function bn() {
620
+ const e = g(), n = y(w), { t: o } = C();
621
+ return T(n == null ? void 0 : n.backToCaptions), n ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
622
+ /* @__PURE__ */ s(
414
623
  "button",
415
624
  {
416
625
  type: "button",
417
- className: l.menuBackButton,
626
+ className: r.menuBackButton,
418
627
  onClick: n.backToCaptions,
419
628
  children: [
420
- /* @__PURE__ */ e(P, {}),
421
- /* @__PURE__ */ e("span", { children: "Back" })
629
+ /* @__PURE__ */ t(K, {}),
630
+ /* @__PURE__ */ t("span", { children: o("BACK") })
422
631
  ]
423
632
  }
424
633
  ),
425
- /* @__PURE__ */ e("strong", { className: l.menuHeading, children: "Captions" }),
426
- /* @__PURE__ */ e("div", { role: "menu", className: l.menuOptions, children: rt.map((o) => /* @__PURE__ */ a(
634
+ /* @__PURE__ */ t("strong", { className: r.menuHeading, children: o("CAPTIONS") }),
635
+ /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: ft.map((i) => /* @__PURE__ */ s(
427
636
  "button",
428
637
  {
429
638
  type: "button",
430
639
  role: "menuitemradio",
431
- "aria-checked": o.value === t.state.captionsFontSizeMultiplier.value,
640
+ "aria-checked": i === e.state.captionsFontSizeMultiplier,
432
641
  onClick: () => {
433
- t.setCaptionsFontSizeMultiplier(o), n.backToMain(), n.toggle();
642
+ e.setCaptionsFontSizeMultiplier(i), n.backToMain(), n.toggle();
434
643
  },
435
- className: l.menuItem,
644
+ className: r.menuItem,
436
645
  children: [
437
- /* @__PURE__ */ e(q, { className: l.checkIcon }),
438
- /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: o.label })
646
+ /* @__PURE__ */ t(W, { className: r.checkIcon }),
647
+ /* @__PURE__ */ s("span", { className: r.menuItemLabel, children: [
648
+ i * 100,
649
+ "%"
650
+ ] })
439
651
  ]
440
652
  },
441
- o.label
653
+ i
442
654
  )) })
443
655
  ] }) : null;
444
656
  }
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(
657
+ function kn() {
658
+ const e = y(w), n = Ke({ sort: "descending" }), o = v("autoQuality"), { t: i } = C();
659
+ return T(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
660
+ /* @__PURE__ */ s(
449
661
  "button",
450
662
  {
451
663
  type: "button",
452
- className: l.menuBackButton,
453
- onClick: t.backToMain,
664
+ className: r.menuBackButton,
665
+ onClick: e.backToMain,
454
666
  children: [
455
- /* @__PURE__ */ e(P, {}),
456
- /* @__PURE__ */ e("span", { children: "Back" })
667
+ /* @__PURE__ */ t(K, {}),
668
+ /* @__PURE__ */ t("span", { children: i("BACK") })
457
669
  ]
458
670
  }
459
671
  ),
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: d }) => /* @__PURE__ */ a(
672
+ /* @__PURE__ */ t("strong", { className: r.menuHeading, children: i("QUALITY") }),
673
+ /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: n.map(({ value: a, label: c, select: l, selected: u }) => /* @__PURE__ */ s(
462
674
  "button",
463
675
  {
464
676
  type: "button",
465
677
  role: "menuitemradio",
466
- "aria-checked": c === "auto" && o || d && !o,
678
+ "aria-checked": a === "auto" && o || u && !o,
467
679
  onClick: () => {
468
- r(), t.backToMain(), t.toggle();
680
+ l(), e.backToMain(), e.toggle();
469
681
  },
470
- className: l.menuItem,
682
+ className: r.menuItem,
471
683
  children: [
472
- /* @__PURE__ */ e(q, { className: l.checkIcon }),
473
- /* @__PURE__ */ e("span", { className: l.menuItemLabel, children: s })
684
+ /* @__PURE__ */ t(W, { className: r.checkIcon }),
685
+ /* @__PURE__ */ t("span", { className: r.menuItemLabel, children: c })
474
686
  ]
475
687
  },
476
- c
688
+ a
477
689
  )) })
478
690
  ] }) : null;
479
691
  }
480
- const Pt = {
481
- main: it,
482
- speed: ft,
483
- captions: Bt,
484
- captionLanguage: Ht,
485
- captionFontSize: Vt,
486
- quality: Tt
692
+ const yn = {
693
+ main: an,
694
+ speed: hn,
695
+ captions: Cn,
696
+ captionLanguage: gn,
697
+ captionFontSize: bn,
698
+ quality: kn
487
699
  };
488
- function St() {
489
- const [t, n] = v("main"), [o, c] = v(!1), s = u(() => {
490
- c((x) => !x);
491
- }, []), r = u((x) => {
700
+ function wn() {
701
+ const [e, n] = P("main"), [o, i] = P(!1), a = p(() => {
702
+ i((x) => !x);
703
+ }, []), c = p((x) => {
492
704
  n(x);
493
- }, []), d = u(() => {
705
+ }, []), l = p(() => {
494
706
  n("captions");
495
- }, []), f = u(() => {
707
+ }, []), u = p(() => {
496
708
  n("main");
497
- }, []), g = Y(() => Pt[t], [t]), h = ye(null), { refs: C, floatingStyles: L, context: k } = Le({
709
+ }, []), _ = F(() => yn[e], [e]), f = he(null), { refs: b, floatingStyles: m, context: h } = ve({
498
710
  open: o,
499
711
  onOpenChange: (x) => {
500
- c(x), f();
712
+ i(x), u();
501
713
  },
502
714
  placement: "top-end",
503
- whileElementsMounted: Me,
715
+ whileElementsMounted: fe,
504
716
  middleware: [
505
- Ne(),
506
- Ie({
507
- element: h
717
+ Ce(),
718
+ ge({
719
+ element: f
508
720
  })
509
721
  ]
510
- }), ie = xe(k, { escapeKey: !1 }), { getReferenceProps: re, getFloatingProps: de } = Be([ie]);
722
+ }), L = be(h, { escapeKey: !1 }), { getReferenceProps: R, getFloatingProps: D } = ke([L]);
511
723
  return {
512
- Page: g,
724
+ Page: _,
513
725
  open: o,
514
- toggle: s,
515
- setPage: r,
516
- backToCaptions: d,
517
- backToMain: f,
518
- arrowRef: h,
519
- refs: C,
520
- floatingStyles: L,
521
- context: k,
522
- getReferenceProps: re,
523
- getFloatingProps: de
726
+ toggle: a,
727
+ setPage: c,
728
+ backToCaptions: l,
729
+ backToMain: u,
730
+ arrowRef: f,
731
+ refs: b,
732
+ floatingStyles: m,
733
+ context: h,
734
+ getReferenceProps: R,
735
+ getFloatingProps: D
524
736
  };
525
737
  }
526
- const Rt = "_settings-menu_hxlsv_1", Ft = "_arrow_hxlsv_15", K = {
738
+ 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 = {
527
739
  "settings-menu": "_settings-menu_hxlsv_1",
528
- settingsMenu: Rt,
529
- arrow: Ft
740
+ settingsMenu: Pn,
741
+ arrow: Nn
530
742
  };
531
- function qt() {
743
+ function xn() {
532
744
  const {
533
- Page: t,
745
+ Page: e,
534
746
  arrowRef: n,
535
747
  backToCaptions: o,
536
- backToMain: c,
537
- context: s,
538
- floatingStyles: r,
539
- getFloatingProps: d,
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: [
547
- /* @__PURE__ */ e(
748
+ backToMain: i,
749
+ context: a,
750
+ floatingStyles: c,
751
+ getFloatingProps: l,
752
+ getReferenceProps: u,
753
+ open: _,
754
+ refs: f,
755
+ setPage: b,
756
+ toggle: m
757
+ } = wn(), h = g(), { t: L } = C();
758
+ return /* @__PURE__ */ s(J, { children: [
759
+ /* @__PURE__ */ t(
548
760
  "button",
549
761
  {
550
- ref: h.setReference,
762
+ ref: f.setReference,
551
763
  type: "button",
552
764
  className: "controls-button",
553
- "aria-label": "Settings",
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" })
765
+ "aria-label": L("SETTINGS"),
766
+ onClick: m,
767
+ "aria-expanded": _,
768
+ tabIndex: h != null && h.state.interactionsDisabled ? -1 : 0,
769
+ ...u(),
770
+ children: /* @__PURE__ */ t(Ln, { className: "controls-button-icon icon-rotate" })
559
771
  }
560
772
  ),
561
- g && /* @__PURE__ */ e(He, { context: s, initialFocus: -1, modal: !1, children: /* @__PURE__ */ a(
773
+ _ && /* @__PURE__ */ t(Ye, { context: a, initialFocus: -1, modal: !1, children: /* @__PURE__ */ s(
562
774
  "div",
563
775
  {
564
- className: K.settingsMenu,
565
- ref: h.setFloating,
566
- style: r,
567
- ...d(),
776
+ className: le.settingsMenu,
777
+ ref: f.setFloating,
778
+ style: c,
779
+ ...l(),
568
780
  children: [
569
- /* @__PURE__ */ e(
570
- b.Provider,
781
+ /* @__PURE__ */ t(
782
+ w.Provider,
571
783
  {
572
- value: { setPage: C, backToMain: c, backToCaptions: o, toggle: L },
573
- children: /* @__PURE__ */ e(t, {})
784
+ value: { setPage: b, backToMain: i, backToCaptions: o, toggle: m },
785
+ children: /* @__PURE__ */ t(e, {})
574
786
  }
575
787
  ),
576
- /* @__PURE__ */ e(
577
- Ve,
788
+ /* @__PURE__ */ t(
789
+ ye,
578
790
  {
579
791
  ref: n,
580
- context: s,
581
- className: K.arrow
792
+ context: a,
793
+ className: le.arrow
582
794
  }
583
795
  )
584
796
  ]
@@ -586,225 +798,225 @@ function qt() {
586
798
  ) })
587
799
  ] });
588
800
  }
589
- function oe(t, n = 1e3) {
801
+ function Me(e, n = 1e3) {
590
802
  return function() {
591
- const c = m("lastKeyboardAction"), [s, r] = v(!1), d = u(() => r(!1), []);
592
- return G(() => {
593
- r(!!c);
594
- const f = setTimeout(d, n);
595
- return () => clearTimeout(f);
596
- }, [c, n]), s ? /* @__PURE__ */ e(t, {}) : null;
803
+ const i = v("lastKeyboardAction"), [a, c] = P(!1), l = p(() => c(!1), []);
804
+ return V(() => {
805
+ c(!!i);
806
+ const u = setTimeout(l, n);
807
+ return () => clearTimeout(u);
808
+ }, [i, n]), a ? /* @__PURE__ */ t(e, {}) : null;
597
809
  };
598
810
  }
599
- const O = (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" }) }), Zt = (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" }) }), 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: "M13.309 3.99987L0 12.1331L13.309 20.2663V13.7367L23.9987 20.2596V4.00655L13.309 10.5281V3.99987Z", fill: "currentColor" }) }), $t = "_feedback-overlay_v4lbu_1", Ot = "_feedback-message_v4lbu_14", zt = "_feedback-icon_v4lbu_30", At = "_feedback-icon-animation_v4lbu_1", _ = {
811
+ 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 = {
600
812
  "feedback-overlay": "_feedback-overlay_v4lbu_1",
601
- feedbackOverlay: $t,
813
+ feedbackOverlay: In,
602
814
  "feedback-message": "_feedback-message_v4lbu_14",
603
- feedbackMessage: Ot,
815
+ feedbackMessage: Sn,
604
816
  "feedback-icon": "_feedback-icon_v4lbu_30",
605
- feedbackIcon: zt,
817
+ feedbackIcon: Hn,
606
818
  "feedback-icon-animation": "_feedback-icon-animation_v4lbu_1",
607
- feedbackIconAnimation: At
819
+ feedbackIconAnimation: Vn
608
820
  };
609
- function Kt() {
821
+ function Bn() {
610
822
  var o;
611
- const t = W();
612
- switch ((o = t.lastKeyboardAction) == null ? void 0 : o.action) {
823
+ const e = _e();
824
+ switch ((o = e.lastKeyboardAction) == null ? void 0 : o.action) {
613
825
  case "togglePaused":
614
- return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: t.paused ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e(z, {}) });
826
+ return /* @__PURE__ */ t("i", { className: k.feedbackIcon, children: e.paused ? /* @__PURE__ */ t(ne, {}) : /* @__PURE__ */ t(oe, {}) });
615
827
  case "toggleCaptions":
616
828
  case "nextCaptionLanguage":
617
829
  case "previousCaptionLanguage":
618
- return t.hasCaptions ? /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: /* @__PURE__ */ e(te, {}) }) : null;
830
+ return e.hasCaptions ? /* @__PURE__ */ t("i", { className: k.feedbackIcon, children: /* @__PURE__ */ t(Ne, {}) }) : null;
619
831
  case "volumeUp":
620
832
  case "volumeDown":
621
833
  case "toggleMuted":
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, {}) });
834
+ 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, {}) });
623
835
  case "seekForward":
624
836
  case "seekForward10":
625
- return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: /* @__PURE__ */ e(Zt, { className: "right" }) });
837
+ return /* @__PURE__ */ t("i", { className: k.feedbackIcon, children: /* @__PURE__ */ t(Mn, { className: "right" }) });
626
838
  case "seekBackward":
627
839
  case "seekBackward10":
628
- return /* @__PURE__ */ e("i", { className: _.feedbackIcon, children: /* @__PURE__ */ e(jt, { className: "left" }) });
840
+ return /* @__PURE__ */ t("i", { className: k.feedbackIcon, children: /* @__PURE__ */ t(Tn, { className: "left" }) });
629
841
  default:
630
842
  return null;
631
843
  }
632
844
  }
633
- function Dt() {
634
- var o;
635
- const t = W();
636
- switch ((o = t.lastKeyboardAction) == null ? void 0 : o.action) {
845
+ function Rn() {
846
+ var i;
847
+ const { t: e } = C(), n = _e();
848
+ switch ((i = n.lastKeyboardAction) == null ? void 0 : i.action) {
637
849
  case "toggleCaptions":
638
850
  case "nextCaptionLanguage":
639
851
  case "previousCaptionLanguage":
640
- return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: t.textTrack ? `Caption Language: ${t.textTrack.label}` : "Captions: Off" });
852
+ return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: n.textTrack ? e("CAPTION_LANGUAGE", { language: n.textTrack.label }) : `${e("CAPTIONS")}: ${e("OFF")}` });
641
853
  case "volumeUp":
642
854
  case "volumeDown":
643
855
  case "toggleMuted":
644
- return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: t.muted || t.volume === 0 ? "Muted" : `Volume: ${(t.volume * 100).toFixed(0)}%` });
856
+ return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: n.muted || n.volume === 0 ? e("MUTED") : e("VOLUME", { volume: (n.volume * 100).toFixed(0) }) });
645
857
  case "increasePlaybackRate":
646
858
  case "decreasePlaybackRate":
647
859
  case "resetPlaybackRate":
648
- return /* @__PURE__ */ a("div", { className: _.feedbackMessage, children: [
649
- "Playback speed: ",
650
- t.playbackRate,
651
- "x"
652
- ] });
860
+ return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("PLAYBACK_SPEED_MESSAGE", { speed: n.playbackRate }) });
653
861
  case "seekForward":
654
- return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek forward: 5 seconds" });
862
+ return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 5 }) });
655
863
  case "seekForward10":
656
- return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek forward: 10 seconds" });
864
+ return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 10 }) });
657
865
  case "seekBackward":
658
- return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek backward: 5 seconds" });
866
+ return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 5 }) });
659
867
  case "seekBackward10":
660
- return /* @__PURE__ */ e("div", { className: _.feedbackMessage, children: "Seek backward: 10 seconds" });
868
+ return /* @__PURE__ */ t("div", { className: k.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 10 }) });
661
869
  default:
662
870
  return null;
663
871
  }
664
872
  }
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, {})
873
+ const An = Me(Bn, 500), En = Me(Rn, 1e3);
874
+ function On() {
875
+ return /* @__PURE__ */ s("div", { className: k.feedbackOverlay, children: [
876
+ /* @__PURE__ */ t(An, {}),
877
+ /* @__PURE__ */ t(En, {})
670
878
  ] });
671
879
  }
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 = {
880
+ 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 = {
673
881
  "full-screen-button": "_full-screen-button_1xm32_2",
674
- fullScreenButton: Xt
882
+ fullScreenButton: $n
675
883
  };
676
- function Yt() {
677
- const t = m("fullscreen"), n = i(p);
678
- return n && !n.hideFullScreen ? /* @__PURE__ */ e(
679
- J,
884
+ function Dn() {
885
+ const e = v("fullscreen"), n = g();
886
+ return B().hideFullScreen ? null : /* @__PURE__ */ t(
887
+ pe,
680
888
  {
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" })
889
+ tabIndex: n.state.interactionsDisabled ? -1 : 0,
890
+ className: `controls-button ${Kn.fullScreenButton}`,
891
+ children: e ? /* @__PURE__ */ t(Zn, { className: "controls-button-icon" }) : /* @__PURE__ */ t(Fn, { className: "controls-button-icon" })
684
892
  }
685
- ) : null;
893
+ );
686
894
  }
687
- const en = "_gestures-container_1fn3b_1", tn = "_gesture_1fn3b_1", D = {
895
+ const zn = "_gestures-container_1fn3b_1", jn = "_gesture_1fn3b_1", re = {
688
896
  "gestures-container": "_gestures-container_1fn3b_1",
689
- gesturesContainer: en,
690
- gesture: tn
897
+ gesturesContainer: zn,
898
+ gesture: jn
691
899
  };
692
- function nn() {
693
- const t = $(), n = () => {
694
- t.togglePaused();
900
+ function Un() {
901
+ const e = Z(), n = () => {
902
+ e.togglePaused();
695
903
  };
696
- return /* @__PURE__ */ e("div", { className: D.gesturesContainer, children: /* @__PURE__ */ e("div", { "aria-hidden": !0, className: D.gesture, onClick: n }) });
904
+ return /* @__PURE__ */ t("div", { className: re.gesturesContainer, children: /* @__PURE__ */ t("div", { "aria-hidden": !0, className: re.gesture, onClick: n }) });
697
905
  }
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", j = {
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
906
+ 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 = {
907
+ "keyboard-shortcuts-overlay": "_keyboard-shortcuts-overlay_y5kv6_1",
908
+ keyboardShortcutsOverlay: Wn,
909
+ "keyboard-shortcuts-button": "_keyboard-shortcuts-button_y5kv6_67",
910
+ keyboardShortcutsButton: Gn,
911
+ "close-button": "_close-button_y5kv6_93",
912
+ closeButton: Qn
705
913
  };
706
- function ln({ onClose: t }) {
707
- y(t);
708
- const n = (o) => {
709
- o && o.focus();
914
+ function Yn({ onClose: e }) {
915
+ const { t: n } = C();
916
+ T(e);
917
+ const o = (i) => {
918
+ i && i.focus();
710
919
  };
711
- return /* @__PURE__ */ a(
920
+ return /* @__PURE__ */ s(
712
921
  "div",
713
922
  {
714
- className: j.keyboardShortcutsOverlay,
923
+ className: Y.keyboardShortcutsOverlay,
715
924
  tabIndex: 0,
716
- ref: n,
925
+ ref: o,
717
926
  children: [
718
- /* @__PURE__ */ a("header", { children: [
719
- /* @__PURE__ */ e("h2", { children: "Keyboard Shortcuts" }),
720
- /* @__PURE__ */ e(
927
+ /* @__PURE__ */ s("header", { children: [
928
+ /* @__PURE__ */ t("h2", { children: n("KEYBOARD_SHORTCUTS") }),
929
+ /* @__PURE__ */ t(
721
930
  "button",
722
931
  {
723
932
  type: "button",
724
- className: j.closeButton,
725
- onClick: t,
726
- "aria-label": "Close",
727
- children: /* @__PURE__ */ e(le, {})
933
+ className: Y.closeButton,
934
+ onClick: e,
935
+ "aria-label": n("CLOSE"),
936
+ children: /* @__PURE__ */ t(He, {})
728
937
  }
729
938
  )
730
939
  ] }),
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" })
940
+ /* @__PURE__ */ s("table", { children: [
941
+ /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ s("tr", { children: [
942
+ /* @__PURE__ */ t("th", { children: n("ACTION") }),
943
+ /* @__PURE__ */ t("th", { children: n("SHORTCUT") })
735
944
  ] }) }),
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" })
945
+ /* @__PURE__ */ s("tbody", { children: [
946
+ /* @__PURE__ */ s("tr", { children: [
947
+ /* @__PURE__ */ t("td", { children: n("SEEK_BACKWARD", { seconds: 5 }) }),
948
+ /* @__PURE__ */ t("td", { children: n("LEFT_ARROW") })
740
949
  ] }),
741
- /* @__PURE__ */ a("tr", { children: [
742
- /* @__PURE__ */ e("td", { children: "Seek forward 5 sec" }),
743
- /* @__PURE__ */ e("td", { children: "Right Arrow" })
950
+ /* @__PURE__ */ s("tr", { children: [
951
+ /* @__PURE__ */ t("td", { children: n("SEEK_FORWARD", { seconds: 5 }) }),
952
+ /* @__PURE__ */ t("td", { children: n("RIGHT_ARROW") })
744
953
  ] }),
745
- /* @__PURE__ */ a("tr", { children: [
746
- /* @__PURE__ */ e("td", { children: "Seek back 10 sec" }),
747
- /* @__PURE__ */ e("td", { children: "J" })
954
+ /* @__PURE__ */ s("tr", { children: [
955
+ /* @__PURE__ */ t("td", { children: n("SEEK_BACKWARD", { seconds: 10 }) }),
956
+ /* @__PURE__ */ t("td", { children: "J" })
748
957
  ] }),
749
- /* @__PURE__ */ a("tr", { children: [
750
- /* @__PURE__ */ e("td", { children: "Seek forward 10 sec" }),
751
- /* @__PURE__ */ e("td", { children: "L" })
958
+ /* @__PURE__ */ s("tr", { children: [
959
+ /* @__PURE__ */ t("td", { children: n("SEEK_FORWARD", { seconds: 10 }) }),
960
+ /* @__PURE__ */ t("td", { children: "L" })
752
961
  ] }),
753
- /* @__PURE__ */ a("tr", { children: [
754
- /* @__PURE__ */ e("td", { children: "Increase volume by 5%" }),
755
- /* @__PURE__ */ e("td", { children: "Up Arrow" })
962
+ /* @__PURE__ */ s("tr", { children: [
963
+ /* @__PURE__ */ t("td", { children: n("INCREASE_VOLUME", { percent: 5 }) }),
964
+ /* @__PURE__ */ t("td", { children: n("UP_ARROW") })
756
965
  ] }),
757
- /* @__PURE__ */ a("tr", { children: [
758
- /* @__PURE__ */ e("td", { children: "Decrease volume by 5%" }),
759
- /* @__PURE__ */ e("td", { children: "Down Arrow" })
966
+ /* @__PURE__ */ s("tr", { children: [
967
+ /* @__PURE__ */ t("td", { children: n("DECREASE_VOLUME", { percent: 5 }) }),
968
+ /* @__PURE__ */ t("td", { children: n("DOWN_ARROW") })
760
969
  ] }),
761
- /* @__PURE__ */ a("tr", { children: [
762
- /* @__PURE__ */ e("td", { children: "Toggle mute" }),
763
- /* @__PURE__ */ e("td", { children: "M" })
970
+ /* @__PURE__ */ s("tr", { children: [
971
+ /* @__PURE__ */ t("td", { children: n("TOGGLE_MUTED") }),
972
+ /* @__PURE__ */ t("td", { children: "M" })
764
973
  ] }),
765
- /* @__PURE__ */ a("tr", { children: [
766
- /* @__PURE__ */ e("td", { children: "Toggle play/pause" }),
767
- /* @__PURE__ */ e("td", { children: "Space, K" })
974
+ /* @__PURE__ */ s("tr", { children: [
975
+ /* @__PURE__ */ t("td", { children: n("TOGGLE_PLAY_PAUSE") }),
976
+ /* @__PURE__ */ s("td", { children: [
977
+ n("SPACE"),
978
+ ", K"
979
+ ] })
768
980
  ] }),
769
- /* @__PURE__ */ a("tr", { children: [
770
- /* @__PURE__ */ e("td", { children: "Enter full screen" }),
771
- /* @__PURE__ */ e("td", { children: "F" })
981
+ /* @__PURE__ */ s("tr", { children: [
982
+ /* @__PURE__ */ t("td", { children: n("ENTER_FULLSCREEN") }),
983
+ /* @__PURE__ */ t("td", { children: "F" })
772
984
  ] }),
773
- /* @__PURE__ */ a("tr", { children: [
774
- /* @__PURE__ */ e("td", { children: "Exit full screen" }),
775
- /* @__PURE__ */ e("td", { children: "Esc, F" })
985
+ /* @__PURE__ */ s("tr", { children: [
986
+ /* @__PURE__ */ t("td", { children: n("EXIT_FULLSCREEN") }),
987
+ /* @__PURE__ */ t("td", { children: "Esc, F" })
776
988
  ] }),
777
- /* @__PURE__ */ a("tr", { children: [
778
- /* @__PURE__ */ e("td", { children: "Toggle captions" }),
779
- /* @__PURE__ */ e("td", { children: "C" })
989
+ /* @__PURE__ */ s("tr", { children: [
990
+ /* @__PURE__ */ t("td", { children: n("TOGGLE_CAPTIONS") }),
991
+ /* @__PURE__ */ t("td", { children: "C" })
780
992
  ] }),
781
- /* @__PURE__ */ a("tr", { children: [
782
- /* @__PURE__ */ e("td", { children: "Next caption language" }),
783
- /* @__PURE__ */ e("td", { children: "V" })
993
+ /* @__PURE__ */ s("tr", { children: [
994
+ /* @__PURE__ */ t("td", { children: n("NEXT_CAPTION_LANGUAGE") }),
995
+ /* @__PURE__ */ t("td", { children: "V" })
784
996
  ] }),
785
- /* @__PURE__ */ a("tr", { children: [
786
- /* @__PURE__ */ e("td", { children: "Previous caption language" }),
787
- /* @__PURE__ */ e("td", { children: "X" })
997
+ /* @__PURE__ */ s("tr", { children: [
998
+ /* @__PURE__ */ t("td", { children: n("PREVIOUS_CAPTION_LANGUAGE") }),
999
+ /* @__PURE__ */ t("td", { children: "X" })
788
1000
  ] }),
789
- /* @__PURE__ */ a("tr", { children: [
790
- /* @__PURE__ */ e("td", { children: "Decrease playback speed" }),
791
- /* @__PURE__ */ e("td", { children: "A" })
1001
+ /* @__PURE__ */ s("tr", { children: [
1002
+ /* @__PURE__ */ t("td", { children: n("DECREASE_PLAYBACK_SPEED") }),
1003
+ /* @__PURE__ */ t("td", { children: "A" })
792
1004
  ] }),
793
- /* @__PURE__ */ a("tr", { children: [
794
- /* @__PURE__ */ e("td", { children: "Reset playback speed to 1x" }),
795
- /* @__PURE__ */ e("td", { children: "S" })
1005
+ /* @__PURE__ */ s("tr", { children: [
1006
+ /* @__PURE__ */ t("td", { children: n("RESET_PLAYBACK_SPEED") }),
1007
+ /* @__PURE__ */ t("td", { children: "S" })
796
1008
  ] }),
797
- /* @__PURE__ */ a("tr", { children: [
798
- /* @__PURE__ */ e("td", { children: "Increase playback speed" }),
799
- /* @__PURE__ */ e("td", { children: "D" })
1009
+ /* @__PURE__ */ s("tr", { children: [
1010
+ /* @__PURE__ */ t("td", { children: n("INCREASE_PLAYBACK_SPEED") }),
1011
+ /* @__PURE__ */ t("td", { children: "D" })
800
1012
  ] }),
801
- /* @__PURE__ */ a("tr", { children: [
802
- /* @__PURE__ */ e("td", { children: "Jump to start" }),
803
- /* @__PURE__ */ e("td", { children: "0" })
1013
+ /* @__PURE__ */ s("tr", { children: [
1014
+ /* @__PURE__ */ t("td", { children: n("JUMP_TO_START") }),
1015
+ /* @__PURE__ */ t("td", { children: "0" })
804
1016
  ] }),
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" })
1017
+ /* @__PURE__ */ s("tr", { children: [
1018
+ /* @__PURE__ */ t("td", { children: n("JUMP_TO_PERCENTAGE") }),
1019
+ /* @__PURE__ */ t("td", { children: "1-9" })
808
1020
  ] })
809
1021
  ] })
810
1022
  ] })
@@ -812,152 +1024,464 @@ function ln({ onClose: t }) {
812
1024
  }
813
1025
  );
814
1026
  }
815
- function rn() {
816
- const [t, n] = v(!1), [o, c] = v(!1), [s, r] = v(!1), d = i(p), f = m("playing"), g = $(), h = u(() => {
817
- n(!0), d == null || d.disableInteractions(), f && (r(!0), g.pause());
818
- }, [f, g, d]), C = u(() => {
819
- n(!1), c(!0), d == null || d.enableInteractions(), s && (r(!1), g.play());
820
- }, [s, g, d]), L = u(
821
- (k) => o && (k == null ? void 0 : k.focus()),
1027
+ function Jn() {
1028
+ const [e, n] = P(!1), [o, i] = P(!1), [a, c] = P(!1), l = g(), u = v("playing"), _ = Z(), { t: f } = C(), b = p(() => {
1029
+ n(!0), l.disableInteractions(), u && (c(!0), _.pause());
1030
+ }, [u, _, l]), m = p(() => {
1031
+ n(!1), i(!0), l.enableInteractions(), a && (c(!1), _.play());
1032
+ }, [a, _, l]), h = p(
1033
+ (L) => o && (L == null ? void 0 : L.focus()),
822
1034
  [o]
823
1035
  );
824
- return t ? /* @__PURE__ */ e(ln, { onClose: C }) : /* @__PURE__ */ e(
1036
+ return e ? /* @__PURE__ */ t(Yn, { onClose: m }) : /* @__PURE__ */ t(
825
1037
  "button",
826
1038
  {
827
- ref: L,
828
- "aria-label": "Keyboard shortcuts",
1039
+ ref: h,
1040
+ "aria-label": f("KEYBOARD_SHORTCUTS"),
829
1041
  type: "button",
830
- className: j.keyboardShortcutsButton,
831
- onClick: h,
832
- tabIndex: 0,
833
- children: /* @__PURE__ */ e(on, {})
1042
+ className: Y.keyboardShortcutsButton,
1043
+ onClick: b,
1044
+ tabIndex: l.state.interactionsDisabled ? -1 : 0,
1045
+ children: /* @__PURE__ */ t(qn, {})
834
1046
  }
835
1047
  );
836
1048
  }
837
- const dn = "_play-pause-button_kyuc5_1", un = {
1049
+ const Xn = "_play-pause-button_kyuc5_1", eo = {
838
1050
  "play-pause-button": "_play-pause-button_kyuc5_1",
839
- playPauseButton: dn
1051
+ playPauseButton: Xn
840
1052
  };
841
- function hn() {
842
- const t = fe(), n = i(p), o = m("paused");
843
- return t ? /* @__PURE__ */ e(
844
- ge,
1053
+ function to() {
1054
+ const e = ee(), n = g(), o = v("paused");
1055
+ return e ? /* @__PURE__ */ t(
1056
+ De,
845
1057
  {
846
- tabIndex: n != null && n.state.interactionsDisabled ? -1 : 0,
847
- className: `${un.playPauseButton} controls-button`,
848
- onKeyDown: (c) => {
849
- c.key === " " && (t == null || t.$state.lastKeyboardAction.set({
1058
+ tabIndex: n.state.interactionsDisabled ? -1 : 0,
1059
+ className: `${eo.playPauseButton} controls-button`,
1060
+ onKeyDown: (i) => {
1061
+ i.key === " " && (e == null || e.$state.lastKeyboardAction.set({
850
1062
  action: "togglePaused",
851
- event: c.nativeEvent
1063
+ event: i.nativeEvent
852
1064
  }));
853
1065
  },
854
- children: o ? /* @__PURE__ */ e(z, { className: "controls-button-icon" }) : /* @__PURE__ */ e(O, { className: "controls-button-icon" })
1066
+ children: o ? /* @__PURE__ */ t(oe, { className: "controls-button-icon" }) : /* @__PURE__ */ t(ne, { className: "controls-button-icon" })
855
1067
  }
856
1068
  ) : null;
857
1069
  }
858
- const mn = "_poster_195hi_1", _n = {
859
- poster: mn
1070
+ const no = "_poster_195hi_1", oo = {
1071
+ poster: no
860
1072
  };
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 });
1073
+ function io({ src: e }) {
1074
+ const n = v("source");
1075
+ return n.type === "video/youtube" || n.type === "video/vimeo" ? null : /* @__PURE__ */ t(ze, { src: e, className: oo.poster });
864
1076
  }
865
- const bn = "_small-layout-overlay_38qhb_1", fn = "_small-layout-button_38qhb_14", gn = "_small-layout-icon-play_38qhb_24", kn = "_small-layout-icon-pause_38qhb_30", wn = "_full-screen-close-icon_38qhb_36", Cn = "_fade-out_38qhb_1", H = {
866
- "small-layout-overlay": "_small-layout-overlay_38qhb_1",
867
- smallLayoutOverlay: bn,
868
- "small-layout-button": "_small-layout-button_38qhb_14",
869
- smallLayoutButton: fn,
870
- "small-layout-icon-play": "_small-layout-icon-play_38qhb_24",
871
- smallLayoutIconPlay: gn,
872
- "small-layout-icon-pause": "_small-layout-icon-pause_38qhb_30",
873
- smallLayoutIconPause: kn,
874
- "full-screen-close-icon": "_full-screen-close-icon_38qhb_36",
875
- fullScreenCloseIcon: wn,
876
- "fade-out": "_fade-out_38qhb_1",
877
- fadeOut: Cn
1077
+ 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 = {
1078
+ "small-layout-overlay": "_small-layout-overlay_1vli4_1",
1079
+ smallLayoutOverlay: ao,
1080
+ "small-layout-button": "_small-layout-button_1vli4_14",
1081
+ smallLayoutButton: so,
1082
+ "small-layout-icon-play": "_small-layout-icon-play_1vli4_24",
1083
+ smallLayoutIconPlay: co,
1084
+ "small-layout-icon-pause": "_small-layout-icon-pause_1vli4_30",
1085
+ smallLayoutIconPause: lo,
1086
+ "full-screen-close-icon": "_full-screen-close-icon_1vli4_36",
1087
+ fullScreenCloseIcon: ro,
1088
+ "fade-out": "_fade-out_1vli4_1",
1089
+ fadeOut: uo
878
1090
  };
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(O, { className: H.smallLayoutIconPause })
1091
+ function mo() {
1092
+ return /* @__PURE__ */ s("div", { className: E.smallLayoutOverlay, children: [
1093
+ /* @__PURE__ */ t(pe, { className: E.fullScreenCloseIcon, children: /* @__PURE__ */ t(He, {}) }),
1094
+ /* @__PURE__ */ s("i", { className: E.smallLayoutButton, children: [
1095
+ /* @__PURE__ */ t(oe, { className: E.smallLayoutIconPlay }),
1096
+ /* @__PURE__ */ t(ne, { className: E.smallLayoutIconPause })
885
1097
  ] })
886
1098
  ] });
887
1099
  }
888
- const yn = "_time-indicator_1wsym_1", Ln = {
889
- "time-indicator": "_time-indicator_1wsym_1",
890
- timeIndicator: yn
1100
+ const ho = "_time-indicator_1ght2_1", _o = {
1101
+ "time-indicator": "_time-indicator_1ght2_1",
1102
+ timeIndicator: ho
891
1103
  };
892
- function Mn() {
893
- return /* @__PURE__ */ a("div", { className: Ln.timeIndicator, children: [
894
- /* @__PURE__ */ e(A, { type: "current" }),
1104
+ function po() {
1105
+ return /* @__PURE__ */ s("div", { className: _o.timeIndicator, children: [
1106
+ /* @__PURE__ */ t(ae, { type: "current" }),
895
1107
  "/",
896
- /* @__PURE__ */ e(A, { type: "duration" })
1108
+ /* @__PURE__ */ t(ae, { type: "duration" })
897
1109
  ] });
898
1110
  }
899
- const Nn = "_timeline-wrapper_j9z56_1", In = "_track_j9z56_8", xn = "_thumb_j9z56_19", Bn = "_root_j9z56_33", Hn = "_track-inner_j9z56_63", Vn = "_progress_j9z56_69", Tn = "_track-fill_j9z56_75", w = {
900
- "timeline-wrapper": "_timeline-wrapper_j9z56_1",
901
- timelineWrapper: Nn,
902
- track: In,
903
- thumb: xn,
904
- root: Bn,
905
- "track-inner": "_track-inner_j9z56_63",
906
- trackInner: Hn,
907
- progress: Vn,
908
- "track-fill": "_track-fill_j9z56_75",
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,
1111
+ 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 = {
1112
+ "comment-markers": "_comment-markers_1k8rn_1",
1113
+ commentMarkers: vo,
1114
+ "comment-marker": "_comment-marker_1k8rn_1",
1115
+ commentMarker: fo,
1116
+ "timeline-wrapper": "_timeline-wrapper_1k8rn_21",
1117
+ timelineWrapper: Co,
1118
+ track: go,
1119
+ thumb: bo,
1120
+ root: ko,
1121
+ "track-inner": "_track-inner_1k8rn_92",
1122
+ trackInner: yo,
1123
+ progress: wo,
1124
+ "track-fill": "_track-fill_1k8rn_104",
1125
+ trackFill: Lo,
1126
+ pins: Po,
1127
+ "pin-button": "_pin-button_1k8rn_133",
1128
+ pinButton: No,
1129
+ "annotation-pin": "_annotation-pin_1k8rn_153",
1130
+ annotationPin: xo,
1131
+ "quiz-pin": "_quiz-pin_1k8rn_158",
1132
+ quizPin: Mo,
1133
+ "annotation-pin-child": "_annotation-pin-child_1k8rn_163",
1134
+ annotationPinChild: To,
1135
+ "quiz-pin-child": "_quiz-pin-child_1k8rn_167",
1136
+ quizPinChild: Io,
1137
+ "interactive-pin-container": "_interactive-pin-container_1k8rn_172",
1138
+ interactivePinContainer: So,
1139
+ "interactive-pin-wrapper": "_interactive-pin-wrapper_1k8rn_182",
1140
+ interactivePinWrapper: Ho,
1141
+ "interactive-pin-icon": "_interactive-pin-icon_1k8rn_188",
1142
+ interactivePinIcon: Vo,
1143
+ "interactive-pin": "_interactive-pin_1k8rn_172",
1144
+ interactivePin: Bo,
1145
+ bg: Ro,
1146
+ symbol: Ao,
1147
+ "interactive-pin-button": "_interactive-pin-button_1k8rn_211",
1148
+ interactivePinButton: Eo,
1149
+ "interactive-pin-menu": "_interactive-pin-menu_1k8rn_231",
1150
+ interactivePinMenu: Oo,
1151
+ "interactive-pin-menu-item": "_interactive-pin-menu-item_1k8rn_245",
1152
+ interactivePinMenuItem: Fo,
1153
+ arrow: Zo
1154
+ }, $o = {
1155
+ annotation: d.annotationPin,
1156
+ quiz: d.quizPin
1157
+ };
1158
+ function Ve({
1159
+ type: e,
1160
+ position: n,
1161
+ children: o,
1162
+ onClick: i
1163
+ }) {
1164
+ const a = g();
1165
+ return /* @__PURE__ */ t(
1166
+ "button",
915
1167
  {
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
- ]
1168
+ type: "button",
1169
+ tabIndex: a.state.interactionsDisabled ? -1 : 0,
1170
+ className: d.pinButton,
1171
+ style: { left: `${n}%` },
1172
+ onClick: i,
1173
+ children: /* @__PURE__ */ s(
1174
+ "svg",
1175
+ {
1176
+ className: $o[e],
1177
+ width: "26",
1178
+ height: "32",
1179
+ viewBox: "0 0 26 32",
1180
+ xmlns: "http://www.w3.org/2000/svg",
1181
+ children: [
1182
+ /* @__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" }),
1183
+ o
1184
+ ]
1185
+ }
1186
+ )
1187
+ }
1188
+ );
1189
+ }
1190
+ function Ko(e) {
1191
+ return /* @__PURE__ */ t(Ve, { type: "annotation", ...e, children: /* @__PURE__ */ t(
1192
+ "path",
1193
+ {
1194
+ className: d.annotationPinChild,
1195
+ fillRule: "evenodd",
1196
+ clipRule: "evenodd",
1197
+ d: "M7 8V19.25H8.875V18.875C8.875 17.8415 9.7165 17 10.75 17H19V8H7ZM10 11.75H16V11H10V11.75ZM14.5 14H10V13.25H14.5V14Z",
1198
+ fill: "currentColor",
1199
+ stroke: "none"
925
1200
  }
926
1201
  ) });
927
1202
  }
928
- const Rn = "_wrapper_d2nt6_1", Fn = "_track_d2nt6_6", qn = "_thumb_d2nt6_16", Zn = "_track-fill_d2nt6_30", jn = "_root_d2nt6_48", V = {
929
- wrapper: Rn,
930
- track: Fn,
931
- thumb: qn,
1203
+ function Do(e) {
1204
+ return /* @__PURE__ */ t(Ve, { type: "quiz", ...e, children: e.multiple ? /* @__PURE__ */ t("circle", { className: d.quizPinChild, cx: "13", cy: "13", r: "6" }) : /* @__PURE__ */ t(
1205
+ "text",
1206
+ {
1207
+ className: d.quizPinChild,
1208
+ x: "50%",
1209
+ y: "56%",
1210
+ textAnchor: "middle",
1211
+ fill: "currentColor",
1212
+ stroke: "none",
1213
+ children: e.ordinal
1214
+ }
1215
+ ) });
1216
+ }
1217
+ function zo(e, n) {
1218
+ return e.map((o, i) => ({
1219
+ id: o.id,
1220
+ time: o.time,
1221
+ type: "annotation",
1222
+ ordinal: i + 1,
1223
+ onClick: () => n(o)
1224
+ }));
1225
+ }
1226
+ function jo(e, n) {
1227
+ const o = /* @__PURE__ */ new Map();
1228
+ e.forEach((c) => {
1229
+ var u;
1230
+ const l = c.time;
1231
+ o.has(l) || o.set(l, []), (u = o.get(l)) == null || u.push(c);
1232
+ });
1233
+ const i = [];
1234
+ let a = 1;
1235
+ return o.forEach((c, l) => {
1236
+ i.push({
1237
+ id: c.map((u) => u.id).join("-"),
1238
+ time: l,
1239
+ type: "quiz",
1240
+ ordinal: a + 1,
1241
+ onClick: () => n(c),
1242
+ multiple: c.length > 1
1243
+ }), a++;
1244
+ }), i;
1245
+ }
1246
+ function Uo(e, n, o, i) {
1247
+ switch (e.type) {
1248
+ case "annotation": {
1249
+ const a = () => i ? e.onClick() : o.seek(e.time);
1250
+ return /* @__PURE__ */ t(
1251
+ Ko,
1252
+ {
1253
+ position: e.time / n * 100,
1254
+ onClick: a
1255
+ },
1256
+ e.id
1257
+ );
1258
+ }
1259
+ case "quiz":
1260
+ return /* @__PURE__ */ t(
1261
+ Do,
1262
+ {
1263
+ position: e.time / n * 100,
1264
+ ordinal: e.ordinal,
1265
+ multiple: e.multiple,
1266
+ onClick: e.onClick
1267
+ },
1268
+ e.id
1269
+ );
1270
+ default:
1271
+ return null;
1272
+ }
1273
+ }
1274
+ function qo() {
1275
+ const e = Z(), n = v("duration"), o = B(), i = F(() => [
1276
+ ...zo(
1277
+ o.annotations,
1278
+ o.onAnnotationClick
1279
+ ),
1280
+ ...jo(o.quizMarkers, o.onQuizMarkerClick)
1281
+ ].sort((c, l) => c.time - l.time).map((c) => Uo(c, n, e, o.interactive)), [o.annotations, o.quizMarkers, n, e]);
1282
+ return /* @__PURE__ */ t("div", { className: d.pins, children: i });
1283
+ }
1284
+ function Wo() {
1285
+ const e = v("duration"), n = B(), o = g();
1286
+ return n.hasComments && o.state.commentsEnabled ? /* @__PURE__ */ t("div", { className: d.commentMarkers, children: n.comments.map((i) => /* @__PURE__ */ t(
1287
+ "span",
1288
+ {
1289
+ className: d.commentMarker,
1290
+ style: {
1291
+ left: `${i.timestamp / e * 100}%`,
1292
+ width: `${xe / e * 100}%`
1293
+ }
1294
+ },
1295
+ i.id
1296
+ )) }) : null;
1297
+ }
1298
+ function Go({ position: e }) {
1299
+ const [n, o] = P(!1), i = B(), a = p(() => i.interactiveMenuElements.length > 0 ? o((h) => !h) : i.onInteractivePinClick(e), [
1300
+ i.interactiveMenuElements,
1301
+ i.onInteractivePinClick,
1302
+ e
1303
+ ]), c = he(null), { refs: l, floatingStyles: u, context: _ } = ve({
1304
+ open: n,
1305
+ onOpenChange: o,
1306
+ whileElementsMounted: fe,
1307
+ placement: "top",
1308
+ middleware: [
1309
+ Je(),
1310
+ Xe(6),
1311
+ Ce(),
1312
+ ge({
1313
+ element: c
1314
+ })
1315
+ ]
1316
+ }), f = be(_), { getReferenceProps: b, getFloatingProps: m } = ke([f]);
1317
+ return /* @__PURE__ */ s(J, { children: [
1318
+ /* @__PURE__ */ t(
1319
+ "button",
1320
+ {
1321
+ type: "button",
1322
+ onClick: a,
1323
+ className: d.interactivePinButton,
1324
+ ref: l.setReference,
1325
+ style: { left: `${e}%` },
1326
+ ...b(),
1327
+ children: /* @__PURE__ */ s(
1328
+ "svg",
1329
+ {
1330
+ className: d.interactivePin,
1331
+ width: "36",
1332
+ height: "44",
1333
+ fill: "none",
1334
+ viewBox: "0 0 36 44",
1335
+ xmlns: "http://www.w3.org/2000/svg",
1336
+ children: [
1337
+ /* @__PURE__ */ t(
1338
+ "path",
1339
+ {
1340
+ className: d.bg,
1341
+ 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"
1342
+ }
1343
+ ),
1344
+ /* @__PURE__ */ t(
1345
+ "path",
1346
+ {
1347
+ className: d.symbol,
1348
+ 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"
1349
+ }
1350
+ ),
1351
+ /* @__PURE__ */ t(
1352
+ "path",
1353
+ {
1354
+ className: d.interactivePinIcon,
1355
+ "data-open": n,
1356
+ fillRule: "evenodd",
1357
+ clipRule: "evenodd",
1358
+ 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",
1359
+ fill: "white"
1360
+ }
1361
+ )
1362
+ ]
1363
+ }
1364
+ )
1365
+ }
1366
+ ),
1367
+ n && /* @__PURE__ */ s(
1368
+ "div",
1369
+ {
1370
+ ref: l.setFloating,
1371
+ style: u,
1372
+ className: d.interactivePinMenu,
1373
+ ...m(),
1374
+ children: [
1375
+ i.interactiveMenuElements.map(({ id: h, text: L, onClick: R }) => /* @__PURE__ */ s(
1376
+ "button",
1377
+ {
1378
+ type: "button",
1379
+ className: d.interactivePinMenuItem,
1380
+ onClick: () => {
1381
+ R(h, e), o(!1);
1382
+ },
1383
+ children: [
1384
+ /* @__PURE__ */ t(
1385
+ "svg",
1386
+ {
1387
+ width: "16",
1388
+ height: "16",
1389
+ viewBox: "0 0 16 16",
1390
+ fill: "none",
1391
+ xmlns: "http://www.w3.org/2000/svg",
1392
+ children: /* @__PURE__ */ t(
1393
+ "path",
1394
+ {
1395
+ fillRule: "evenodd",
1396
+ clipRule: "evenodd",
1397
+ d: "M7.33339 7.33339H1.77783V8.66672H7.33339V14.2223H8.66672V8.66672H14.2223V7.33339H8.66672V1.77783H7.33339V7.33339Z",
1398
+ fill: "#273540"
1399
+ }
1400
+ )
1401
+ }
1402
+ ),
1403
+ L
1404
+ ]
1405
+ },
1406
+ h
1407
+ )),
1408
+ /* @__PURE__ */ t(
1409
+ ye,
1410
+ {
1411
+ ref: c,
1412
+ context: _,
1413
+ className: d.arrow
1414
+ }
1415
+ )
1416
+ ]
1417
+ }
1418
+ )
1419
+ ] });
1420
+ }
1421
+ function Qo() {
1422
+ const e = v("duration"), o = v("currentTime") / e * 100;
1423
+ return /* @__PURE__ */ t("div", { className: d.interactivePinContainer, children: /* @__PURE__ */ t("div", { className: d.interactivePinWrapper, children: /* @__PURE__ */ t(Go, { position: o }) }) });
1424
+ }
1425
+ function Yo() {
1426
+ const e = v("paused"), n = g();
1427
+ return e && !n.state.interactionsDisabled ? /* @__PURE__ */ t(Qo, {}) : null;
1428
+ }
1429
+ const Jo = `${d.progress} ${d.trackInner}`, Xo = `${d.trackFill} ${d.trackInner}`;
1430
+ function ue({ className: e }) {
1431
+ const n = g(), { hasAnnotations: o, hasQuizmarkers: i, interactive: a } = B(), c = e ? `${d.timelineWrapper} ${e}` : d.timelineWrapper;
1432
+ return /* @__PURE__ */ s("div", { className: c, children: [
1433
+ a ? /* @__PURE__ */ t(Yo, {}) : null,
1434
+ o || i ? /* @__PURE__ */ t(qo, {}) : null,
1435
+ /* @__PURE__ */ s(
1436
+ A.Root,
1437
+ {
1438
+ className: d.root,
1439
+ tabIndex: n.state.interactionsDisabled ? -1 : 0,
1440
+ children: [
1441
+ /* @__PURE__ */ s(A.Track, { className: d.track, children: [
1442
+ /* @__PURE__ */ t(A.Progress, { className: Jo }),
1443
+ /* @__PURE__ */ t(A.TrackFill, { className: Xo })
1444
+ ] }),
1445
+ /* @__PURE__ */ t(A.Thumb, { className: d.thumb })
1446
+ ]
1447
+ }
1448
+ ),
1449
+ /* @__PURE__ */ t(Wo, {})
1450
+ ] });
1451
+ }
1452
+ const ei = "_wrapper_d2nt6_1", ti = "_track_d2nt6_6", ni = "_thumb_d2nt6_16", oi = "_track-fill_d2nt6_30", ii = "_root_d2nt6_48", O = {
1453
+ wrapper: ei,
1454
+ track: ti,
1455
+ thumb: ni,
932
1456
  "track-fill": "_track-fill_d2nt6_30",
933
- trackFill: Zn,
934
- root: jn
1457
+ trackFill: oi,
1458
+ root: ii
935
1459
  };
936
- function $n() {
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,
1460
+ function ai() {
1461
+ const e = v("volume"), n = v("muted"), o = g();
1462
+ return /* @__PURE__ */ s("div", { className: O.wrapper, children: [
1463
+ /* @__PURE__ */ t(
1464
+ je,
941
1465
  {
942
- tabIndex: o != null && o.state.interactionsDisabled ? -1 : 0,
1466
+ tabIndex: o.state.interactionsDisabled ? -1 : 0,
943
1467
  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" })
1468
+ 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" })
945
1469
  }
946
1470
  ),
947
- /* @__PURE__ */ a(
948
- S.Root,
1471
+ /* @__PURE__ */ s(
1472
+ j.Root,
949
1473
  {
950
- className: V.root,
951
- tabIndex: o != null && o.state.interactionsDisabled ? -1 : 0,
1474
+ className: O.root,
1475
+ tabIndex: o.state.interactionsDisabled ? -1 : 0,
952
1476
  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 })
1477
+ /* @__PURE__ */ t(j.Track, { className: O.track, children: /* @__PURE__ */ t(j.TrackFill, { className: O.trackFill }) }),
1478
+ /* @__PURE__ */ t(j.Thumb, { className: O.thumb })
955
1479
  ]
956
1480
  }
957
1481
  )
958
1482
  ] });
959
1483
  }
960
- const On = {}, U = {
1484
+ const de = {
961
1485
  togglePaused: ["Space", "Enter", "k"],
962
1486
  seekForward: ["ArrowRight"],
963
1487
  seekBackward: ["ArrowLeft"],
@@ -968,162 +1492,325 @@ const On = {}, U = {
968
1492
  toggleCaptions: ["c"],
969
1493
  nextCaptionLanguage: {
970
1494
  keys: ["v"],
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,
1495
+ onKeyUp({ event: e, player: n, remote: o }) {
1496
+ const i = n.textTracks.selectedIndex, a = i + 1;
1497
+ o.changeTextTrackMode(i, "hidden"), o.changeTextTrackMode(
1498
+ a >= n.textTracks.length ? 0 : a,
975
1499
  "showing"
976
1500
  ), n.$state.lastKeyboardAction.set({
977
1501
  action: "nextCaptionLanguage",
978
- event: t
1502
+ event: e
979
1503
  });
980
1504
  }
981
1505
  },
982
1506
  previousCaptionLanguage: {
983
1507
  keys: ["x"],
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,
1508
+ onKeyUp({ event: e, player: n, remote: o }) {
1509
+ const i = n.textTracks.selectedIndex, a = i - 1;
1510
+ o.changeTextTrackMode(i, "hidden"), o.changeTextTrackMode(
1511
+ a < 0 ? n.textTracks.length - 1 : a,
988
1512
  "showing"
989
1513
  ), n.$state.lastKeyboardAction.set({
990
1514
  action: "previousCaptionLanguage",
991
- event: t
1515
+ event: e
992
1516
  });
993
1517
  }
994
1518
  },
995
1519
  decreasePlaybackRate: {
996
1520
  keys: ["a"],
997
- onKeyUp({ event: t, player: n, remote: o }) {
998
- const s = I.indexOf(n.playbackRate) - 1;
999
- s >= 0 && (o.changePlaybackRate(I[s]), n.$state.lastKeyboardAction.set({
1521
+ onKeyUp({ event: e, player: n, remote: o }) {
1522
+ const a = S.indexOf(n.playbackRate) - 1;
1523
+ a >= 0 && (o.changePlaybackRate(S[a]), n.$state.lastKeyboardAction.set({
1000
1524
  action: "decreasePlaybackRate",
1001
- event: t
1525
+ event: e
1002
1526
  }));
1003
1527
  }
1004
1528
  },
1005
1529
  increasePlaybackRate: {
1006
1530
  keys: ["d"],
1007
- onKeyUp({ event: t, player: n, remote: o }) {
1008
- const s = I.indexOf(n.playbackRate) + 1;
1009
- s < I.length && (o.changePlaybackRate(I[s]), n.$state.lastKeyboardAction.set({
1531
+ onKeyUp({ event: e, player: n, remote: o }) {
1532
+ const a = S.indexOf(n.playbackRate) + 1;
1533
+ a < S.length && (o.changePlaybackRate(S[a]), n.$state.lastKeyboardAction.set({
1010
1534
  action: "increasePlaybackRate",
1011
- event: t
1535
+ event: e
1012
1536
  }));
1013
1537
  }
1014
1538
  },
1015
1539
  resetPlaybackRate: {
1016
1540
  keys: ["s"],
1017
- onKeyUp({ event: t, player: n, remote: o }) {
1541
+ onKeyUp({ event: e, player: n, remote: o }) {
1018
1542
  o.changePlaybackRate(1), n.$state.lastKeyboardAction.set({
1019
1543
  action: "resetPlaybackRate",
1020
- event: t
1544
+ event: e
1021
1545
  });
1022
1546
  }
1023
1547
  },
1024
1548
  seekForward10Seconds: {
1025
1549
  keys: ["l"],
1026
- onKeyUp({ event: t, player: n, remote: o }) {
1550
+ onKeyUp({ event: e, player: n, remote: o }) {
1027
1551
  o.seek(n.currentTime + 10), n.$state.lastKeyboardAction.set({
1028
1552
  action: "seekForward10",
1029
- event: t
1553
+ event: e
1030
1554
  });
1031
1555
  }
1032
1556
  },
1033
1557
  seekBackward10Seconds: {
1034
1558
  keys: ["j"],
1035
- onKeyUp({ event: t, player: n, remote: o }) {
1559
+ onKeyUp({ event: e, player: n, remote: o }) {
1036
1560
  o.seek(n.currentTime - 10), n.$state.lastKeyboardAction.set({
1037
1561
  action: "seekBackward10",
1038
- event: t
1562
+ event: e
1039
1563
  });
1040
1564
  }
1041
1565
  }
1042
1566
  };
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 = u(
1050
- (h) => {
1051
- o((C) => ({
1052
- ...C,
1053
- captionsFontSizeMultiplier: h
1567
+ function si(e, n = 1e3) {
1568
+ let o = !1;
1569
+ return () => {
1570
+ o || (e(), o = !0, setTimeout(() => {
1571
+ o = !1;
1572
+ }, n));
1573
+ };
1574
+ }
1575
+ const me = {
1576
+ volume: 1,
1577
+ muted: !1,
1578
+ lang: null,
1579
+ captions: !1,
1580
+ rate: 1,
1581
+ multiplier: 1,
1582
+ ontop: !1,
1583
+ invert: !1,
1584
+ comments: !1
1585
+ };
1586
+ class ci {
1587
+ constructor() {
1588
+ N(this, "playerId", "studio-player");
1589
+ N(this, "mediaId", null);
1590
+ N(this, "data", me);
1591
+ N(this, "time", null);
1592
+ N(this, "saveTime", () => {
1593
+ if (!this.mediaId) return;
1594
+ const n = (this.time ?? 0).toString();
1595
+ localStorage.setItem(this.mediaId, n);
1596
+ });
1597
+ N(this, "saveTimeThrottled", si(this.saveTime, 1e3));
1598
+ // only used for useStudioPlayer hook's state initialization
1599
+ N(this, "initializeState", () => {
1600
+ const n = localStorage.getItem(this.playerId);
1601
+ if (n)
1602
+ try {
1603
+ this.data = JSON.parse(n);
1604
+ } catch {
1605
+ }
1606
+ return {
1607
+ captionsFontSizeMultiplier: this.data.multiplier,
1608
+ captionPositionOnTop: this.data.ontop,
1609
+ captionsInvertColors: this.data.invert,
1610
+ commentsEnabled: this.data.comments,
1611
+ interactionsDisabled: !1
1612
+ };
1613
+ });
1614
+ N(this, "saveData", (n, o) => {
1615
+ this.data = {
1616
+ ...this.data,
1617
+ [n]: o
1618
+ }, this.save();
1619
+ });
1620
+ }
1621
+ async getVideoQuality() {
1622
+ return null;
1623
+ }
1624
+ async getAudioGain() {
1625
+ return null;
1626
+ }
1627
+ async getLang() {
1628
+ return this.data.lang;
1629
+ }
1630
+ async setLang(n) {
1631
+ this.data.lang = n, this.save();
1632
+ }
1633
+ async getVolume() {
1634
+ return this.data.volume;
1635
+ }
1636
+ async setVolume(n) {
1637
+ this.data.volume = n, this.save();
1638
+ }
1639
+ async getMuted() {
1640
+ return this.data.muted;
1641
+ }
1642
+ async setMuted(n) {
1643
+ this.data.muted = n, this.save();
1644
+ }
1645
+ async getTime() {
1646
+ return this.time;
1647
+ }
1648
+ async setTime(n, o) {
1649
+ const i = n < 0;
1650
+ this.time = i ? null : n, i || o ? this.saveTime() : this.saveTimeThrottled();
1651
+ }
1652
+ async getCaptions() {
1653
+ return this.data.captions;
1654
+ }
1655
+ async setCaptions(n) {
1656
+ this.data.captions = n, this.save();
1657
+ }
1658
+ async getPlaybackRate() {
1659
+ return this.data.rate;
1660
+ }
1661
+ async setPlaybackRate(n) {
1662
+ this.data.rate = n, this.save();
1663
+ }
1664
+ onChange(n, o, i = "studio-player") {
1665
+ const a = i ? localStorage.getItem(i) : null, c = o ? localStorage.getItem(o) : null;
1666
+ this.playerId = i, this.mediaId = o;
1667
+ let l = {};
1668
+ if (a)
1669
+ try {
1670
+ l = JSON.parse(a);
1671
+ } catch {
1672
+ }
1673
+ this.data = {
1674
+ ...me,
1675
+ ...l
1676
+ }, this.time = c ? +c : null;
1677
+ }
1678
+ save() {
1679
+ if (!this.playerId) return;
1680
+ const n = JSON.stringify(this.data);
1681
+ localStorage.setItem(this.playerId, n);
1682
+ }
1683
+ }
1684
+ function li(e) {
1685
+ const n = F(() => new ci(), []), [o, i] = P(
1686
+ n.initializeState
1687
+ ), a = p(
1688
+ (m) => {
1689
+ i((h) => (n.saveData("multiplier", m), {
1690
+ ...h,
1691
+ captionsFontSizeMultiplier: m
1054
1692
  }));
1055
1693
  },
1056
- []
1057
- ), s = u(() => {
1058
- o((h) => ({
1059
- ...h,
1060
- captionPositionOnTop: !h.captionPositionOnTop
1061
- }));
1062
- }, []), r = u(() => {
1063
- o((h) => ({
1064
- ...h,
1065
- captionsInvertColors: !h.captionsInvertColors
1066
- }));
1067
- }, []), d = u(() => {
1068
- o((h) => ({
1069
- ...h,
1694
+ [n]
1695
+ ), c = p(() => {
1696
+ i((m) => {
1697
+ const h = !m.captionPositionOnTop;
1698
+ return n.saveData("ontop", h), {
1699
+ ...m,
1700
+ captionPositionOnTop: h
1701
+ };
1702
+ });
1703
+ }, [n]), l = p(() => {
1704
+ i((m) => {
1705
+ const h = !m.captionsInvertColors;
1706
+ return n.saveData("invert", h), {
1707
+ ...m,
1708
+ captionsInvertColors: h
1709
+ };
1710
+ });
1711
+ }, [n]), u = p(() => {
1712
+ i((m) => {
1713
+ const h = !m.commentsEnabled;
1714
+ return n.saveData("comments", h), {
1715
+ ...m,
1716
+ commentsEnabled: h
1717
+ };
1718
+ });
1719
+ }, [n]), _ = p(() => {
1720
+ i((m) => ({
1721
+ ...m,
1070
1722
  interactionsDisabled: !1
1071
1723
  }));
1072
- }, []), f = u(() => {
1073
- o((h) => ({
1074
- ...h,
1724
+ }, []), f = p(() => {
1725
+ i((m) => ({
1726
+ ...m,
1075
1727
  interactionsDisabled: !0
1076
1728
  }));
1077
- }, []), g = Y(() => t ? {
1078
- ...U,
1729
+ }, []), b = F(() => e ? {
1730
+ ...de,
1079
1731
  toggleFullscreen: []
1080
- } : U, [t]);
1732
+ } : de, [e]);
1081
1733
  return {
1082
1734
  contextValue: {
1083
- state: n,
1084
- setCaptionsFontSizeMultiplier: c,
1085
- toggleCaptionPositionOnTop: s,
1086
- toggleCaptionsInvertColors: r,
1087
- enableInteractions: d,
1735
+ state: o,
1736
+ setCaptionsFontSizeMultiplier: a,
1737
+ toggleCaptionPositionOnTop: c,
1738
+ toggleCaptionsInvertColors: l,
1739
+ enableInteractions: _,
1088
1740
  disableInteractions: f,
1089
- hideFullScreen: t
1741
+ toggleComments: u
1090
1742
  },
1091
- shortcuts: g
1743
+ shortcuts: b,
1744
+ storage: n
1092
1745
  };
1093
1746
  }
1094
- function Un({
1095
- title: t,
1096
- src: n,
1097
- captions: o = [],
1098
- thumbnail: c,
1099
- hideFullScreen: s = !1
1747
+ const ri = {}, Q = () => {
1748
+ };
1749
+ function Ci({
1750
+ title: e,
1751
+ remoteRef: n,
1752
+ src: o,
1753
+ captions: i = [],
1754
+ thumbnail: a,
1755
+ hideFullScreen: c = !1,
1756
+ comments: l = [],
1757
+ locale: u = "en",
1758
+ annotations: _ = [],
1759
+ quizMarkers: f = [],
1760
+ interactive: b = !1,
1761
+ onAnnotationClick: m = Q,
1762
+ onQuizMarkerClick: h = Q,
1763
+ onInteractivePinClick: L = Q,
1764
+ interactiveMenuElements: R = []
1100
1765
  }) {
1101
- const { contextValue: r, shortcuts: d } = zn({ hideFullScreen: s });
1102
- return /* @__PURE__ */ e(p.Provider, { value: r, children: /* @__PURE__ */ a(
1103
- Ce,
1766
+ const { contextValue: D, shortcuts: x, storage: Be } = li(c), { i18n: ie } = C(), z = Z();
1767
+ return V(() => {
1768
+ z && n && (z.pauseControls(), n.current = z);
1769
+ }, [z, n]), V(() => {
1770
+ ie.changeLanguage(u);
1771
+ }, [ie, u]), /* @__PURE__ */ t(
1772
+ nt,
1104
1773
  {
1105
- title: t,
1106
- src: n,
1107
- keyShortcuts: d,
1108
- playsInline: !0,
1109
- keyDisabled: r.state.interactionsDisabled,
1110
- children: [
1111
- /* @__PURE__ */ e(rn, {}),
1112
- /* @__PURE__ */ a(ve, { className: On.mediaProvider, children: [
1113
- /* @__PURE__ */ e(qe, {}),
1114
- /* @__PURE__ */ e(pn, { src: c }),
1115
- /* @__PURE__ */ e(Oe, { captions: o }),
1116
- /* @__PURE__ */ e(Qt, {}),
1117
- /* @__PURE__ */ e(vn, {}),
1118
- /* @__PURE__ */ e(nn, {})
1119
- ] }),
1120
- /* @__PURE__ */ e(Qe, {})
1121
- ]
1774
+ hideFullScreen: c,
1775
+ comments: l,
1776
+ annotations: _,
1777
+ quizMarkers: f,
1778
+ interactive: b,
1779
+ onAnnotationClick: m,
1780
+ onQuizMarkerClick: h,
1781
+ onInteractivePinClick: L,
1782
+ interactiveMenuElements: R,
1783
+ children: /* @__PURE__ */ t(tt, { contextValue: D, children: /* @__PURE__ */ s(
1784
+ Ue,
1785
+ {
1786
+ storage: Be,
1787
+ title: e,
1788
+ src: o,
1789
+ keyShortcuts: x,
1790
+ playsInline: !0,
1791
+ keyDisabled: D.state.interactionsDisabled,
1792
+ children: [
1793
+ /* @__PURE__ */ t(Jn, {}),
1794
+ /* @__PURE__ */ s(qe, { className: ri.mediaProvider, children: [
1795
+ /* @__PURE__ */ t(io, { src: a }),
1796
+ /* @__PURE__ */ t(On, {}),
1797
+ /* @__PURE__ */ t(mt, {}),
1798
+ /* @__PURE__ */ t(vt, { captions: i }),
1799
+ /* @__PURE__ */ t(Mt, { comments: l }),
1800
+ /* @__PURE__ */ t(mo, {}),
1801
+ /* @__PURE__ */ t(Un, {})
1802
+ ] }),
1803
+ /* @__PURE__ */ t(Rt, {}),
1804
+ /* @__PURE__ */ t(st, { annotations: _ })
1805
+ ]
1806
+ }
1807
+ ) })
1122
1808
  }
1123
- ) });
1809
+ );
1124
1810
  }
1125
1811
  export {
1126
- rt as CAPTION_FONT_SIZE_MULTIPLIERS,
1127
- I as PLAYBACK_RATES,
1128
- Un as StudioPlayer
1812
+ ft as CAPTION_FONT_SIZE_MULTIPLIERS,
1813
+ xe as COMMENT_DURATION,
1814
+ S as PLAYBACK_RATES,
1815
+ Ci as StudioPlayer
1129
1816
  };