@aigamo/hydrangean-diva 0.0.1-alpha.4 → 0.0.1-alpha.6

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.
package/dist/index.es.js CHANGED
@@ -1,85 +1,85 @@
1
1
  var Q = Object.defineProperty;
2
- var ee = (t, e, n) => e in t ? Q(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
3
- var p = (t, e, n) => ee(t, typeof e != "symbol" ? e + "" : e, n);
4
- import { useNostalgicDiva as R, findVideoService as te, NostalgicDiva as ne } from "@aigamo/nostalgic-diva";
5
- import { EuiRange as j, EuiPopover as F, EuiFormRow as S, EuiFlexGroup as C, EuiButtonIcon as I, EuiIcon as E, EuiContextMenu as ie, EuiBottomBar as se, EuiFlexItem as v, EuiButton as x, EuiModal as re, EuiModalHeader as ae, EuiModalHeaderTitle as le, EuiModalBody as oe, EuiForm as ce, EuiFieldText as V, EuiModalFooter as me, EuiButtonEmpty as de, useEuiTheme as H, EuiTableHeader as ue, EuiTableHeaderCellCheckbox as he, EuiCheckbox as U, EuiTableHeaderCell as w, EuiContextMenuItem as pe, EuiContextMenuPanel as ge, EuiHorizontalRule as L, EuiTableRowCell as O, EuiTableRow as fe, EuiTableRowCellCheckbox as Ee, EuiLink as ve, EuiTable as Ie, EuiFlyout as ye, EuiCodeBlock as be, EuiSpacer as $, EuiPageTemplate as A } from "@elastic/eui";
6
- import { Speaker2Regular as q, TopSpeedRegular as Te, SkipBack10Regular as xe, SkipForward30Regular as Re, DismissRegular as B, ArrowRepeat1Filled as Ce, ArrowRepeatAllFilled as ke, ArrowRepeatAllOffFilled as we, ArrowShuffleFilled as Pe, ArrowShuffleOffFilled as Se, PreviousFilled as Oe, PauseFilled as Ae, PlayFilled as ze, NextFilled as Me, MoreHorizontalFilled as J, AddRegular as N, ArrowUploadRegular as Fe, ArrowDownloadRegular as Be, PlayRegular as Ne, DeleteRegular as Ve } from "@fluentui/react-icons";
2
+ var ee = (n, e, i) => e in n ? Q(n, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[e] = i;
3
+ var p = (n, e, i) => ee(n, typeof e != "symbol" ? e + "" : e, i);
4
+ import { useNostalgicDiva as C, findVideoService as te, NostalgicDiva as ne } from "@aigamo/nostalgic-diva";
5
+ import { EuiRange as j, EuiPopover as F, EuiFormRow as O, EuiFlexGroup as k, EuiButtonIcon as I, EuiIcon as E, EuiContextMenu as ie, EuiBottomBar as se, EuiFlexItem as v, EuiButton as x, EuiModal as re, EuiModalHeader as le, EuiModalHeaderTitle as ae, EuiModalBody as oe, EuiForm as ce, EuiFieldText as V, EuiModalFooter as me, EuiButtonEmpty as de, useEuiTheme as H, EuiTableHeader as ue, EuiTableHeaderCellCheckbox as he, EuiCheckbox as U, EuiTableHeaderCell as P, EuiContextMenuItem as pe, EuiContextMenuPanel as ge, EuiHorizontalRule as L, EuiTableRowCell as A, EuiTableRow as fe, EuiTableRowCellCheckbox as Ee, EuiLink as ve, EuiTable as Ie, EuiFlyout as ye, EuiCodeBlock as be, EuiSpacer as $, EuiPageTemplate as z } from "@elastic/eui";
6
+ import { Speaker2Regular as q, TopSpeedRegular as Te, SkipBack10Regular as xe, SkipForward30Regular as Ce, DismissRegular as B, ArrowRepeat1Filled as ke, ArrowRepeatAllFilled as we, ArrowRepeatAllOffFilled as Pe, ArrowShuffleFilled as Se, ArrowShuffleOffFilled as Oe, PreviousFilled as Ae, PauseFilled as ze, PlayFilled as Me, NextFilled as Re, MoreHorizontalFilled as J, AddRegular as N, ArrowUploadRegular as Fe, ArrowDownloadRegular as Be, PlayRegular as Ne, DeleteRegular as Ve } from "@fluentui/react-icons";
7
7
  import { observer as h } from "mobx-react-lite";
8
- import i, { useCallback as u, memo as y, useState as g, useLayoutEffect as Le, useMemo as G, createContext as W, useContext as X, useEffect as De } from "react";
8
+ import t, { useCallback as u, memo as y, useState as g, useLayoutEffect as Le, useMemo as G, createContext as W, useContext as X, useEffect as De } from "react";
9
9
  import { ReactSortable as je } from "react-sortablejs";
10
10
  import { makeObservable as He, action as r, computed as c, observable as b, reaction as Ue } from "mobx";
11
11
  import { pull as D } from "lodash-es";
12
12
  import $e from "ajv";
13
- var o = /* @__PURE__ */ ((t) => (t.Off = "Off", t.All = "All", t.One = "One", t))(o || {});
14
- const Y = 80, qe = h(({ playerStore: t }) => {
15
- const e = R(), n = u(
16
- (l) => {
17
- const m = Number(l.currentTarget.value) / 100;
18
- t.setPercent(m);
13
+ var o = /* @__PURE__ */ ((n) => (n.Off = "Off", n.All = "All", n.One = "One", n))(o || {});
14
+ const Y = 80, qe = h(({ playerStore: n }) => {
15
+ const e = C(), i = u(
16
+ (a) => {
17
+ const m = Number(a.currentTarget.value) / 100;
18
+ n.setPercent(m);
19
19
  },
20
- [t]
20
+ [n]
21
21
  ), s = u(
22
- (l) => {
23
- l.button === 0 && t.setSeeking(!0);
22
+ (a) => {
23
+ a.button === 0 && n.setSeeking(!0);
24
24
  },
25
- [t]
26
- ), a = u(
27
- async (l) => {
28
- if (l.button === 0) {
29
- const m = Number(l.currentTarget.value) / 100;
30
- t.setSeeking(!1);
25
+ [n]
26
+ ), l = u(
27
+ async (a) => {
28
+ if (a.button === 0) {
29
+ const m = Number(a.currentTarget.value) / 100;
30
+ n.setSeeking(!1);
31
31
  const d = await e.getDuration();
32
32
  d !== void 0 && await e.setCurrentTime(d * m);
33
33
  }
34
34
  },
35
- [t, e]
35
+ [n, e]
36
36
  );
37
- return /* @__PURE__ */ i.createElement(
37
+ return /* @__PURE__ */ t.createElement(
38
38
  j,
39
39
  {
40
40
  min: 0,
41
41
  max: 100,
42
42
  step: 1e-7,
43
- value: t.percent * 100,
44
- onChange: n,
43
+ value: n.percent * 100,
44
+ onChange: i,
45
45
  onMouseDown: s,
46
- onMouseUp: a,
46
+ onMouseUp: l,
47
47
  fullWidth: !0,
48
48
  showRange: !0,
49
49
  css: { blockSize: 32 }
50
50
  }
51
51
  );
52
52
  }), Je = y(
53
- ({ button: t, isOpen: e, closePopover: n }) => {
54
- const [s, a] = g("0"), l = R();
53
+ ({ button: n, isOpen: e, closePopover: i }) => {
54
+ const [s, l] = g("0"), a = C();
55
55
  Le(() => {
56
- e && l.getVolume().then((d) => {
57
- d !== void 0 && a(Math.floor(d * 100).toString());
56
+ e && a.getVolume().then((d) => {
57
+ d !== void 0 && l(Math.floor(d * 100).toString());
58
58
  });
59
- }, [e, l]);
59
+ }, [e, a]);
60
60
  const m = u(
61
61
  async (d) => {
62
- a(d.currentTarget.value), await l.setVolume(Number(d.currentTarget.value) / 100);
62
+ l(d.currentTarget.value), await a.setVolume(Number(d.currentTarget.value) / 100);
63
63
  },
64
- [l]
64
+ [a]
65
65
  );
66
- return /* @__PURE__ */ i.createElement(
66
+ return /* @__PURE__ */ t.createElement(
67
67
  F,
68
68
  {
69
- button: t,
69
+ button: n,
70
70
  isOpen: e,
71
- closePopover: n,
71
+ closePopover: i,
72
72
  anchorPosition: "upRight"
73
73
  },
74
- /* @__PURE__ */ i.createElement(S, null, /* @__PURE__ */ i.createElement(
75
- C,
74
+ /* @__PURE__ */ t.createElement(O, null, /* @__PURE__ */ t.createElement(
75
+ k,
76
76
  {
77
77
  responsive: !1,
78
78
  gutterSize: "s",
79
79
  justifyContent: "center",
80
80
  alignItems: "center"
81
81
  },
82
- /* @__PURE__ */ i.createElement(
82
+ /* @__PURE__ */ t.createElement(
83
83
  I,
84
84
  {
85
85
  title: "Mute",
@@ -89,7 +89,7 @@ const Y = 80, qe = h(({ playerStore: t }) => {
89
89
  iconSize: "l"
90
90
  }
91
91
  ),
92
- /* @__PURE__ */ i.createElement(
92
+ /* @__PURE__ */ t.createElement(
93
93
  j,
94
94
  {
95
95
  min: 0,
@@ -105,54 +105,54 @@ const Y = 80, qe = h(({ playerStore: t }) => {
105
105
  }
106
106
  ), Ge = y(
107
107
  ({
108
- playQueueStore: t,
108
+ playQueueStore: n,
109
109
  closePopover: e
110
110
  }) => {
111
- const n = R(), s = u(async () => {
112
- const f = await n.getCurrentTime();
113
- f !== void 0 && await n.setCurrentTime(f - 10), e();
114
- }, [n, e]), a = u(async () => {
115
- const f = await n.getCurrentTime();
116
- f !== void 0 && await n.setCurrentTime(f + 30), e();
117
- }, [n, e]), l = u(
111
+ const i = C(), s = u(async () => {
112
+ const f = await i.getCurrentTime();
113
+ f !== void 0 && await i.setCurrentTime(f - 10), e();
114
+ }, [i, e]), l = u(async () => {
115
+ const f = await i.getCurrentTime();
116
+ f !== void 0 && await i.setCurrentTime(f + 30), e();
117
+ }, [i, e]), a = u(
118
118
  async (f) => {
119
- await n.setPlaybackRate(f), e();
119
+ await i.setPlaybackRate(f), e();
120
120
  },
121
- [n, e]
121
+ [i, e]
122
122
  ), m = u(async () => {
123
- t.currentItem !== void 0 && await t.removeItems([
124
- t.currentItem
123
+ n.currentItem !== void 0 && await n.removeItems([
124
+ n.currentItem
125
125
  ]), e();
126
- }, [t, e]), [d] = g(), T = G(
126
+ }, [n, e]), [d] = g(), T = G(
127
127
  () => [
128
128
  {
129
129
  id: 0,
130
130
  items: [
131
131
  {
132
132
  name: "Speed",
133
- icon: /* @__PURE__ */ i.createElement(E, { type: Te, size: "m" }),
133
+ icon: /* @__PURE__ */ t.createElement(E, { type: Te, size: "m" }),
134
134
  panel: 1
135
135
  },
136
136
  {
137
137
  name: "Skip back 10 seconds",
138
- icon: /* @__PURE__ */ i.createElement(E, { type: xe, size: "m" }),
138
+ icon: /* @__PURE__ */ t.createElement(E, { type: xe, size: "m" }),
139
139
  onClick: s,
140
- disabled: t.isEmpty
140
+ disabled: n.isEmpty
141
141
  },
142
142
  {
143
143
  name: "Skip forward 30 seconds",
144
- icon: /* @__PURE__ */ i.createElement(E, { type: Re, size: "m" }),
145
- onClick: a,
146
- disabled: t.isEmpty
144
+ icon: /* @__PURE__ */ t.createElement(E, { type: Ce, size: "m" }),
145
+ onClick: l,
146
+ disabled: n.isEmpty
147
147
  },
148
148
  {
149
149
  isSeparator: !0
150
150
  },
151
151
  {
152
152
  name: "Remove from play queue",
153
- icon: /* @__PURE__ */ i.createElement(E, { type: B, size: "m" }),
153
+ icon: /* @__PURE__ */ t.createElement(E, { type: B, size: "m" }),
154
154
  onClick: m,
155
- disabled: t.isEmpty
155
+ disabled: n.isEmpty
156
156
  }
157
157
  ]
158
158
  },
@@ -162,130 +162,130 @@ const Y = 80, qe = h(({ playerStore: t }) => {
162
162
  items: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
163
163
  (f) => ({
164
164
  name: f.toString(),
165
- onClick: () => l(f),
165
+ onClick: () => a(f),
166
166
  icon: f === d ? "check" : "empty"
167
167
  })
168
168
  )
169
169
  }
170
170
  ],
171
171
  [
172
- t,
172
+ n,
173
173
  s,
174
- a,
175
- m,
176
174
  l,
175
+ m,
176
+ a,
177
177
  d
178
178
  ]
179
179
  );
180
- return /* @__PURE__ */ i.createElement(ie, { initialPanelId: 0, panels: T });
180
+ return /* @__PURE__ */ t.createElement(ie, { initialPanelId: 0, panels: T });
181
181
  }
182
182
  ), We = y(
183
183
  ({
184
- playQueueStore: t,
184
+ playQueueStore: n,
185
185
  button: e,
186
- isOpen: n,
186
+ isOpen: i,
187
187
  closePopover: s
188
- }) => /* @__PURE__ */ i.createElement(
188
+ }) => /* @__PURE__ */ t.createElement(
189
189
  F,
190
190
  {
191
191
  button: e,
192
- isOpen: n,
192
+ isOpen: i,
193
193
  closePopover: s,
194
194
  panelPaddingSize: "none",
195
195
  anchorPosition: "upRight"
196
196
  },
197
- /* @__PURE__ */ i.createElement(
197
+ /* @__PURE__ */ t.createElement(
198
198
  Ge,
199
199
  {
200
- playQueueStore: t,
200
+ playQueueStore: n,
201
201
  closePopover: s
202
202
  }
203
203
  )
204
204
  )
205
205
  ), Xe = {
206
- [o.Off]: we,
207
- [o.All]: ke,
208
- [o.One]: Ce
206
+ [o.Off]: Pe,
207
+ [o.All]: we,
208
+ [o.One]: ke
209
209
  }, Ye = h(
210
210
  ({
211
- playerStore: t,
211
+ playerStore: n,
212
212
  playQueueStore: e
213
213
  }) => {
214
- const n = R(), s = u(async () => {
214
+ const i = C(), s = u(async () => {
215
215
  if (e.hasPreviousItem) {
216
- const a = await n.getCurrentTime();
217
- a === void 0 || a < 5 ? await e.previous() : await n.setCurrentTime(0);
216
+ const l = await i.getCurrentTime();
217
+ l === void 0 || l < 5 ? await e.previous() : await i.setCurrentTime(0);
218
218
  } else
219
- await n.setCurrentTime(0);
220
- }, [e, n]);
221
- return /* @__PURE__ */ i.createElement(
222
- C,
219
+ await i.setCurrentTime(0);
220
+ }, [e, i]);
221
+ return /* @__PURE__ */ t.createElement(
222
+ k,
223
223
  {
224
224
  responsive: !1,
225
225
  gutterSize: "s",
226
226
  justifyContent: "center",
227
227
  alignItems: "center"
228
228
  },
229
- /* @__PURE__ */ i.createElement(
229
+ /* @__PURE__ */ t.createElement(
230
230
  I,
231
231
  {
232
232
  title: `Shuffle: ${e.shuffle ? "On" : "Off"}`,
233
233
  "aria-label": `Shuffle: ${e.shuffle ? "On" : "Off"}`,
234
- iconType: e.shuffle ? Pe : Se,
234
+ iconType: e.shuffle ? Se : Oe,
235
235
  size: "s",
236
236
  iconSize: "l",
237
237
  onClick: e.toggleShuffle,
238
238
  disabled: !0
239
239
  }
240
240
  ),
241
- /* @__PURE__ */ i.createElement(
241
+ /* @__PURE__ */ t.createElement(
242
242
  I,
243
243
  {
244
244
  title: "Previous",
245
245
  "aria-label": "Previous",
246
- iconType: Oe,
246
+ iconType: Ae,
247
247
  size: "s",
248
248
  iconSize: "l",
249
249
  onClick: s,
250
250
  disabled: e.isEmpty
251
251
  }
252
252
  ),
253
- t.playing ? /* @__PURE__ */ i.createElement(
253
+ n.playing ? /* @__PURE__ */ t.createElement(
254
254
  I,
255
255
  {
256
256
  title: "Pause",
257
257
  "aria-label": "Pause",
258
- iconType: Ae,
258
+ iconType: ze,
259
259
  size: "s",
260
260
  iconSize: "l",
261
- onClick: () => n.pause(),
261
+ onClick: () => i.pause(),
262
262
  disabled: !e.canPlay
263
263
  }
264
- ) : /* @__PURE__ */ i.createElement(
264
+ ) : /* @__PURE__ */ t.createElement(
265
265
  I,
266
266
  {
267
267
  title: "Play",
268
268
  "aria-label": "Play",
269
- iconType: ze,
269
+ iconType: Me,
270
270
  size: "s",
271
271
  iconSize: "l",
272
- onClick: () => n.play(),
272
+ onClick: () => i.play(),
273
273
  disabled: !e.canPlay
274
274
  }
275
275
  ),
276
- /* @__PURE__ */ i.createElement(
276
+ /* @__PURE__ */ t.createElement(
277
277
  I,
278
278
  {
279
279
  title: "Next",
280
280
  "aria-label": "Next",
281
- iconType: Me,
281
+ iconType: Re,
282
282
  size: "s",
283
283
  iconSize: "l",
284
284
  onClick: e.next,
285
285
  disabled: !e.hasNextItem
286
286
  }
287
287
  ),
288
- /* @__PURE__ */ i.createElement(
288
+ /* @__PURE__ */ t.createElement(
289
289
  I,
290
290
  {
291
291
  title: `Repeat: ${e.repeat === o.All ? "All" : e.repeat === o.One ? "One" : "Off"}`,
@@ -299,11 +299,11 @@ const Y = 80, qe = h(({ playerStore: t }) => {
299
299
  );
300
300
  }
301
301
  ), Ke = y(() => {
302
- const [t, e] = g(!1), n = () => e(!t);
303
- return /* @__PURE__ */ i.createElement(
302
+ const [n, e] = g(!1), i = () => e(!n);
303
+ return /* @__PURE__ */ t.createElement(
304
304
  Je,
305
305
  {
306
- button: /* @__PURE__ */ i.createElement(
306
+ button: /* @__PURE__ */ t.createElement(
307
307
  I,
308
308
  {
309
309
  title: "Volume",
@@ -311,21 +311,21 @@ const Y = 80, qe = h(({ playerStore: t }) => {
311
311
  iconType: q,
312
312
  size: "s",
313
313
  iconSize: "l",
314
- onClick: n
314
+ onClick: i
315
315
  }
316
316
  ),
317
- isOpen: t,
317
+ isOpen: n,
318
318
  closePopover: () => e(!1)
319
319
  }
320
320
  );
321
321
  }), Ze = y(
322
- ({ playQueueStore: t }) => {
323
- const [e, n] = g(!1), s = () => n(!e);
324
- return /* @__PURE__ */ i.createElement(
322
+ ({ playQueueStore: n }) => {
323
+ const [e, i] = g(!1), s = () => i(!e);
324
+ return /* @__PURE__ */ t.createElement(
325
325
  We,
326
326
  {
327
- playQueueStore: t,
328
- button: /* @__PURE__ */ i.createElement(
327
+ playQueueStore: n,
328
+ button: /* @__PURE__ */ t.createElement(
329
329
  I,
330
330
  {
331
331
  title: "More options",
@@ -337,122 +337,122 @@ const Y = 80, qe = h(({ playerStore: t }) => {
337
337
  }
338
338
  ),
339
339
  isOpen: e,
340
- closePopover: () => n(!1)
340
+ closePopover: () => i(!1)
341
341
  }
342
342
  );
343
343
  }
344
344
  ), _e = y(
345
- ({ playQueueStore: t }) => /* @__PURE__ */ i.createElement(
346
- C,
345
+ ({ playQueueStore: n }) => /* @__PURE__ */ t.createElement(
346
+ k,
347
347
  {
348
348
  responsive: !1,
349
349
  gutterSize: "s",
350
350
  justifyContent: "flexEnd",
351
351
  alignItems: "center"
352
352
  },
353
- /* @__PURE__ */ i.createElement(Ke, null),
354
- /* @__PURE__ */ i.createElement(Ze, { playQueueStore: t })
353
+ /* @__PURE__ */ t.createElement(Ke, null),
354
+ /* @__PURE__ */ t.createElement(Ze, { playQueueStore: n })
355
355
  )
356
- ), Pt = h(
357
- ({ playerStore: t, playQueueStore: e }) => /* @__PURE__ */ i.createElement(se, { paddingSize: "s" }, /* @__PURE__ */ i.createElement(C, { direction: "column", gutterSize: "none" }, /* @__PURE__ */ i.createElement(v, null, /* @__PURE__ */ i.createElement(qe, { playerStore: t })), /* @__PURE__ */ i.createElement(v, null, /* @__PURE__ */ i.createElement(C, { responsive: !1 }, /* @__PURE__ */ i.createElement(v, { css: { width: "calc(100% / 3)" } }), /* @__PURE__ */ i.createElement(v, { css: { width: "calc(100% / 3)" } }, /* @__PURE__ */ i.createElement(
356
+ ), St = h(
357
+ ({ playerStore: n, playQueueStore: e }) => /* @__PURE__ */ t.createElement(se, { paddingSize: "s" }, /* @__PURE__ */ t.createElement(k, { direction: "column", gutterSize: "none" }, /* @__PURE__ */ t.createElement(v, null, /* @__PURE__ */ t.createElement(qe, { playerStore: n })), /* @__PURE__ */ t.createElement(v, null, /* @__PURE__ */ t.createElement(k, { responsive: !1 }, /* @__PURE__ */ t.createElement(v, { css: { width: "calc(100% / 3)" } }), /* @__PURE__ */ t.createElement(v, { css: { width: "calc(100% / 3)" } }, /* @__PURE__ */ t.createElement(
358
358
  Ye,
359
359
  {
360
- playerStore: t,
360
+ playerStore: n,
361
361
  playQueueStore: e
362
362
  }
363
- )), /* @__PURE__ */ i.createElement(v, { css: { width: "calc(100% / 3)" } }, /* @__PURE__ */ i.createElement(
363
+ )), /* @__PURE__ */ t.createElement(v, { css: { width: "calc(100% / 3)" } }, /* @__PURE__ */ t.createElement(
364
364
  _e,
365
365
  {
366
366
  playQueueStore: e
367
367
  }
368
368
  ))))))
369
369
  ), Qe = ({
370
- onCancel: t,
370
+ onCancel: n,
371
371
  onSave: e
372
372
  }) => {
373
- const [n, s] = g(""), [a, l] = g(""), [m, d] = g(!1);
374
- return /* @__PURE__ */ React.createElement(re, { onClose: t, initialFocus: "[name=url]" }, /* @__PURE__ */ React.createElement(ae, null, /* @__PURE__ */ React.createElement(le, null, "Add video")), /* @__PURE__ */ React.createElement(oe, null, /* @__PURE__ */ React.createElement(ce, { component: "form" }, /* @__PURE__ */ React.createElement(S, { label: "URL" }, /* @__PURE__ */ React.createElement(
373
+ const [i, s] = g(""), [l, a] = g(""), [m, d] = g(!1);
374
+ return /* @__PURE__ */ t.createElement(re, { onClose: n, initialFocus: "[name=url]" }, /* @__PURE__ */ t.createElement(le, null, /* @__PURE__ */ t.createElement(ae, null, "Add video")), /* @__PURE__ */ t.createElement(oe, null, /* @__PURE__ */ t.createElement(ce, { component: "form" }, /* @__PURE__ */ t.createElement(O, { label: "URL" }, /* @__PURE__ */ t.createElement(
375
375
  V,
376
376
  {
377
377
  name: "url",
378
- value: n,
378
+ value: i,
379
379
  onChange: (T) => s(T.target.value)
380
380
  }
381
- )), /* @__PURE__ */ React.createElement(S, { label: "Title" }, /* @__PURE__ */ React.createElement(
381
+ )), /* @__PURE__ */ t.createElement(O, { label: "Title" }, /* @__PURE__ */ t.createElement(
382
382
  V,
383
383
  {
384
384
  name: "title",
385
- value: a,
386
- onChange: (T) => l(T.target.value)
385
+ value: l,
386
+ onChange: (T) => a(T.target.value)
387
387
  }
388
- )))), /* @__PURE__ */ React.createElement(me, null, /* @__PURE__ */ React.createElement(de, { onClick: t }, "Cancel"), /* @__PURE__ */ React.createElement(
388
+ )))), /* @__PURE__ */ t.createElement(me, null, /* @__PURE__ */ t.createElement(de, { onClick: n }, "Cancel"), /* @__PURE__ */ t.createElement(
389
389
  x,
390
390
  {
391
391
  type: "submit",
392
392
  onClick: async () => {
393
393
  try {
394
- d(!0), await e({ url: n, title: a });
394
+ d(!0), await e({ url: i, title: l });
395
395
  } finally {
396
396
  d(!1);
397
397
  }
398
398
  },
399
399
  fill: !0,
400
- disabled: n.trim().length === 0,
400
+ disabled: i.trim().length === 0,
401
401
  isLoading: m
402
402
  },
403
403
  "Save"
404
404
  )));
405
405
  };
406
- function et(t) {
407
- return t !== null && typeof t == "object" && "title" in t && typeof t.title == "string";
406
+ function et(n) {
407
+ return n !== null && typeof n == "object" && "title" in n && typeof n.title == "string";
408
408
  }
409
409
  const tt = y(
410
- ({ playQueueStore: t }) => {
411
- const [e, n] = g(!1), s = u(
412
- async (a) => {
413
- const l = te(a.url);
414
- if (l !== void 0) {
415
- const m = l.extractVideoId(a.url);
410
+ ({ playQueueStore: n }) => {
411
+ const [e, i] = g(!1), s = u(
412
+ async (l) => {
413
+ const a = te(l.url);
414
+ if (a !== void 0) {
415
+ const m = a.extractVideoId(l.url);
416
416
  if (m !== void 0) {
417
417
  const T = await (await fetch(
418
418
  `https://noembed.com/embed?url=${encodeURIComponent(
419
- a.url
419
+ l.url
420
420
  )}`
421
421
  )).json();
422
- await t.addItems([
423
- t.createItem({
424
- url: a.url,
425
- type: l.type,
422
+ await n.addItems([
423
+ n.createItem({
424
+ url: l.url,
425
+ type: a.type,
426
426
  videoId: m,
427
- title: a.title || (et(T) ? T.title : m)
427
+ title: l.title || (et(T) ? T.title : m)
428
428
  })
429
429
  ]);
430
430
  }
431
431
  }
432
- n(!1);
432
+ i(!1);
433
433
  },
434
- [t]
434
+ [n]
435
435
  );
436
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
436
+ return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
437
437
  x,
438
438
  {
439
- onClick: () => n(!0),
439
+ onClick: () => i(!0),
440
440
  iconType: N,
441
441
  color: "primary"
442
442
  },
443
443
  "Add video"
444
- ), e && /* @__PURE__ */ React.createElement(
444
+ ), e && /* @__PURE__ */ t.createElement(
445
445
  Qe,
446
446
  {
447
- onCancel: () => n(!1),
447
+ onCancel: () => i(!1),
448
448
  onSave: s
449
449
  }
450
450
  ));
451
451
  }
452
452
  ), nt = h(
453
- ({ playQueueStore: t }) => {
453
+ ({ playQueueStore: n }) => {
454
454
  const { euiTheme: e } = H();
455
- return /* @__PURE__ */ i.createElement(
455
+ return /* @__PURE__ */ t.createElement(
456
456
  ue,
457
457
  {
458
458
  style: {
@@ -462,102 +462,102 @@ const tt = y(
462
462
  background: e.colors.backgroundBasePlain
463
463
  }
464
464
  },
465
- /* @__PURE__ */ i.createElement(he, null, /* @__PURE__ */ i.createElement(
465
+ /* @__PURE__ */ t.createElement(he, null, /* @__PURE__ */ t.createElement(
466
466
  U,
467
467
  {
468
468
  id: "",
469
- checked: t.allItemsSelected,
470
- onChange: (n) => {
471
- t.allItemsSelected = n.target.checked;
469
+ checked: n.allItemsSelected,
470
+ onChange: (i) => {
471
+ n.allItemsSelected = i.target.checked;
472
472
  }
473
473
  }
474
474
  )),
475
- /* @__PURE__ */ i.createElement(w, { width: 24 }),
476
- /* @__PURE__ */ i.createElement(w, null, "Title"),
477
- /* @__PURE__ */ i.createElement(w, null)
475
+ /* @__PURE__ */ t.createElement(P, { width: 24 }),
476
+ /* @__PURE__ */ t.createElement(P, null, "Title"),
477
+ /* @__PURE__ */ t.createElement(P, null)
478
478
  );
479
479
  }
480
480
  ), it = y(
481
481
  ({
482
- item: t,
482
+ item: n,
483
483
  closePopover: e
484
484
  }) => {
485
- const n = y(
485
+ const i = y(
486
486
  ({
487
487
  onClick: s,
488
- ...a
488
+ ...l
489
489
  }) => {
490
- const l = u(
490
+ const a = u(
491
491
  (m) => {
492
492
  e(), s == null || s(m);
493
493
  },
494
494
  [s]
495
495
  );
496
- return /* @__PURE__ */ i.createElement(pe, { ...a, onClick: l });
496
+ return /* @__PURE__ */ t.createElement(pe, { ...l, onClick: a });
497
497
  }
498
498
  );
499
- return /* @__PURE__ */ i.createElement(ge, null, /* @__PURE__ */ i.createElement(
500
- n,
499
+ return /* @__PURE__ */ t.createElement(ge, null, /* @__PURE__ */ t.createElement(
500
+ i,
501
501
  {
502
- icon: /* @__PURE__ */ i.createElement(E, { type: "" }),
503
- onClick: t.playFirst
502
+ icon: /* @__PURE__ */ t.createElement(E, { type: "" }),
503
+ onClick: n.playFirst
504
504
  },
505
505
  "Play first"
506
- ), /* @__PURE__ */ i.createElement(
507
- n,
506
+ ), /* @__PURE__ */ t.createElement(
507
+ i,
508
508
  {
509
- icon: /* @__PURE__ */ i.createElement(E, { type: "" }),
510
- onClick: t.playNext
509
+ icon: /* @__PURE__ */ t.createElement(E, { type: "" }),
510
+ onClick: n.playNext
511
511
  },
512
512
  "Play next"
513
- ), /* @__PURE__ */ i.createElement(
514
- n,
513
+ ), /* @__PURE__ */ t.createElement(
514
+ i,
515
515
  {
516
- icon: /* @__PURE__ */ i.createElement(E, { type: N }),
517
- onClick: t.addToPlayQueue
516
+ icon: /* @__PURE__ */ t.createElement(E, { type: N }),
517
+ onClick: n.addToPlayQueue
518
518
  },
519
519
  "Add to play queue"
520
- ), /* @__PURE__ */ i.createElement(L, { margin: "none" }), /* @__PURE__ */ i.createElement(
521
- n,
520
+ ), /* @__PURE__ */ t.createElement(L, { margin: "none" }), /* @__PURE__ */ t.createElement(
521
+ i,
522
522
  {
523
- icon: /* @__PURE__ */ i.createElement(E, { type: Fe }),
524
- onClick: t.moveToTop,
525
- disabled: !t.canMoveToTop
523
+ icon: /* @__PURE__ */ t.createElement(E, { type: Fe }),
524
+ onClick: n.moveToTop,
525
+ disabled: !n.canMoveToTop
526
526
  },
527
527
  "Move to the top"
528
- ), /* @__PURE__ */ i.createElement(
529
- n,
528
+ ), /* @__PURE__ */ t.createElement(
529
+ i,
530
530
  {
531
- icon: /* @__PURE__ */ i.createElement(E, { type: Be }),
532
- onClick: t.moveToBottom,
533
- disabled: !t.canMoveToBottom
531
+ icon: /* @__PURE__ */ t.createElement(E, { type: Be }),
532
+ onClick: n.moveToBottom,
533
+ disabled: !n.canMoveToBottom
534
534
  },
535
535
  "Move to the bottom"
536
- ), /* @__PURE__ */ i.createElement(L, { margin: "none" }), /* @__PURE__ */ i.createElement(
537
- n,
536
+ ), /* @__PURE__ */ t.createElement(L, { margin: "none" }), /* @__PURE__ */ t.createElement(
537
+ i,
538
538
  {
539
- icon: /* @__PURE__ */ i.createElement(E, { type: "" }),
540
- onClick: t.removeToTop,
541
- disabled: !t.canRemoveToTop
539
+ icon: /* @__PURE__ */ t.createElement(E, { type: "" }),
540
+ onClick: n.removeToTop,
541
+ disabled: !n.canRemoveToTop
542
542
  },
543
543
  "Remove to the top"
544
- ), /* @__PURE__ */ i.createElement(
545
- n,
544
+ ), /* @__PURE__ */ t.createElement(
545
+ i,
546
546
  {
547
- icon: /* @__PURE__ */ i.createElement(E, { type: "" }),
548
- onClick: t.removeOthers,
549
- disabled: !t.canRemoveOthers
547
+ icon: /* @__PURE__ */ t.createElement(E, { type: "" }),
548
+ onClick: n.removeOthers,
549
+ disabled: !n.canRemoveOthers
550
550
  },
551
551
  "Remove others"
552
552
  ));
553
553
  }
554
554
  ), st = y(
555
- ({ item: t }) => {
556
- const [e, n] = g(!1), s = u(() => n(!e), [e]), a = u(() => n(!1), []);
557
- return /* @__PURE__ */ i.createElement(
555
+ ({ item: n }) => {
556
+ const [e, i] = g(!1), s = u(() => i(!e), [e]), l = u(() => i(!1), []);
557
+ return /* @__PURE__ */ t.createElement(
558
558
  F,
559
559
  {
560
- button: /* @__PURE__ */ i.createElement(
560
+ button: /* @__PURE__ */ t.createElement(
561
561
  I,
562
562
  {
563
563
  title: "More options",
@@ -569,43 +569,43 @@ const tt = y(
569
569
  }
570
570
  ),
571
571
  isOpen: e,
572
- closePopover: a,
572
+ closePopover: l,
573
573
  panelPaddingSize: "none",
574
574
  anchorPosition: "leftCenter"
575
575
  },
576
- /* @__PURE__ */ i.createElement(
576
+ /* @__PURE__ */ t.createElement(
577
577
  it,
578
578
  {
579
- item: t,
580
- closePopover: a
579
+ item: n,
580
+ closePopover: l
581
581
  }
582
582
  )
583
583
  );
584
584
  }
585
585
  ), rt = h(
586
- ({ item: t }) => {
587
- const e = R();
588
- return /* @__PURE__ */ i.createElement(O, { textOnly: !1, hasActions: !0, align: "right" }, /* @__PURE__ */ i.createElement(
586
+ ({ item: n }) => {
587
+ const e = C();
588
+ return /* @__PURE__ */ t.createElement(A, { textOnly: !1, hasActions: !0, align: "right" }, /* @__PURE__ */ t.createElement(
589
589
  x,
590
590
  {
591
591
  iconType: Ne,
592
592
  size: "s",
593
593
  onClick: async () => {
594
- t.isCurrent ? await e.setCurrentTime(0) : t.play();
594
+ n.isCurrent ? await e.setCurrentTime(0) : n.play();
595
595
  }
596
596
  },
597
597
  "Play"
598
- ), /* @__PURE__ */ i.createElement(
598
+ ), /* @__PURE__ */ t.createElement(
599
599
  x,
600
600
  {
601
601
  iconType: B,
602
602
  size: "s",
603
- onClick: t.remove
603
+ onClick: n.remove
604
604
  },
605
605
  "Remove"
606
- ), /* @__PURE__ */ i.createElement(st, { item: t }));
606
+ ), /* @__PURE__ */ t.createElement(st, { item: n }));
607
607
  }
608
- ), at = {
608
+ ), lt = {
609
609
  Audio: "",
610
610
  Dailymotion: "https://www.dailymotion.com/favicon.ico",
611
611
  Niconico: "https://www.nicovideo.jp/favicon.ico",
@@ -613,58 +613,58 @@ const tt = y(
613
613
  Twitch: "https://www.twitch.tv/favicon.ico",
614
614
  Vimeo: "https://vimeo.com/favicon.ico",
615
615
  YouTube: "https://www.youtube.com/favicon.ico"
616
- }, lt = h(
617
- ({ item: t }) => {
618
- const e = R();
619
- return /* @__PURE__ */ i.createElement(fe, { key: t.id, isSelected: t.isCurrent }, /* @__PURE__ */ i.createElement(Ee, null, /* @__PURE__ */ i.createElement(
616
+ }, at = h(
617
+ ({ item: n }) => {
618
+ const e = C();
619
+ return /* @__PURE__ */ t.createElement(fe, { key: n.id, isSelected: n.isCurrent }, /* @__PURE__ */ t.createElement(Ee, null, /* @__PURE__ */ t.createElement(
620
620
  U,
621
621
  {
622
- id: t.id.toString(),
623
- checked: t.isSelected,
624
- onChange: t.toggleSelected
622
+ id: n.id.toString(),
623
+ checked: n.isSelected,
624
+ onChange: n.toggleSelected
625
625
  }
626
- )), /* @__PURE__ */ i.createElement(O, { textOnly: !1 }, /* @__PURE__ */ i.createElement(
626
+ )), /* @__PURE__ */ t.createElement(A, { textOnly: !1 }, /* @__PURE__ */ t.createElement(
627
627
  "img",
628
628
  {
629
- src: at[t.type],
629
+ src: lt[n.type],
630
630
  width: 16,
631
631
  height: 16,
632
- alt: t.type
632
+ alt: n.type
633
633
  }
634
- )), /* @__PURE__ */ i.createElement(O, null, /* @__PURE__ */ i.createElement(
634
+ )), /* @__PURE__ */ t.createElement(A, null, /* @__PURE__ */ t.createElement(
635
635
  ve,
636
636
  {
637
- href: t.url,
637
+ href: n.url,
638
638
  target: "_blank",
639
639
  external: !0,
640
640
  onClick: () => e.pause()
641
641
  },
642
- t.title
643
- )), /* @__PURE__ */ i.createElement(rt, { item: t }));
642
+ n.title
643
+ )), /* @__PURE__ */ t.createElement(rt, { item: n }));
644
644
  }
645
645
  ), ot = h(
646
- ({ playQueueStore: t }) => /* @__PURE__ */ i.createElement(
646
+ ({ playQueueStore: n }) => /* @__PURE__ */ t.createElement(
647
647
  je,
648
648
  {
649
649
  tag: "tbody",
650
- list: t.items,
651
- setList: (e) => t.setItems(e)
650
+ list: n.items,
651
+ setList: (e) => n.setItems(e)
652
652
  },
653
- t.items.map((e) => /* @__PURE__ */ i.createElement(lt, { key: e.id, item: e }))
653
+ n.items.map((e) => /* @__PURE__ */ t.createElement(at, { key: e.id, item: e }))
654
654
  )
655
655
  ), ct = h(
656
- ({ playQueueStore: t }) => /* @__PURE__ */ i.createElement(Ie, null, /* @__PURE__ */ i.createElement(nt, { playQueueStore: t }), /* @__PURE__ */ i.createElement(ot, { playQueueStore: t }))
656
+ ({ playQueueStore: n }) => /* @__PURE__ */ t.createElement(Ie, null, /* @__PURE__ */ t.createElement(nt, { playQueueStore: n }), /* @__PURE__ */ t.createElement(ot, { playQueueStore: n }))
657
657
  ), mt = h(
658
- ({ playQueueStore: t }) => {
659
- const [e, n] = g(!1);
660
- return /* @__PURE__ */ React.createElement(React.Fragment, null, e && /* @__PURE__ */ React.createElement(
658
+ ({ playQueueStore: n }) => {
659
+ const [e, i] = g(!1);
660
+ return /* @__PURE__ */ t.createElement(t.Fragment, null, e && /* @__PURE__ */ t.createElement(
661
661
  ye,
662
662
  {
663
663
  type: "push",
664
664
  size: "s",
665
- onClose: () => n(!1)
665
+ onClose: () => i(!1)
666
666
  },
667
- /* @__PURE__ */ React.createElement("div", { style: { blockSize: "100%" } }, /* @__PURE__ */ React.createElement(
667
+ /* @__PURE__ */ t.createElement("div", { style: { blockSize: "100%" } }, /* @__PURE__ */ t.createElement(
668
668
  be,
669
669
  {
670
670
  language: "json",
@@ -673,18 +673,18 @@ const tt = y(
673
673
  isVirtualized: !0
674
674
  },
675
675
  JSON.stringify(
676
- t.localStorageState,
676
+ n.localStorageState,
677
677
  void 0,
678
678
  2
679
679
  )
680
680
  ))
681
- ), /* @__PURE__ */ React.createElement(tt, { playQueueStore: t }));
681
+ ), /* @__PURE__ */ t.createElement(tt, { playQueueStore: n }));
682
682
  }
683
683
  ), dt = h(
684
- ({ playerStore: t, playQueueStore: e }) => {
685
- const { euiTheme: n } = H();
686
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
687
- C,
684
+ ({ playerStore: n, playQueueStore: e }) => {
685
+ const { euiTheme: i } = H();
686
+ return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
687
+ k,
688
688
  {
689
689
  alignItems: "center",
690
690
  gutterSize: "m",
@@ -692,10 +692,10 @@ const tt = y(
692
692
  position: "sticky",
693
693
  top: 48,
694
694
  zIndex: 998,
695
- background: n.colors.backgroundBasePlain
695
+ background: i.colors.backgroundBasePlain
696
696
  }
697
697
  },
698
- /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(
698
+ /* @__PURE__ */ t.createElement(v, { grow: !1 }, /* @__PURE__ */ t.createElement(
699
699
  x,
700
700
  {
701
701
  disabled: e.isEmpty || e.selectedItems.length === 0,
@@ -703,7 +703,7 @@ const tt = y(
703
703
  },
704
704
  "Play next"
705
705
  )),
706
- /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(
706
+ /* @__PURE__ */ t.createElement(v, { grow: !1 }, /* @__PURE__ */ t.createElement(
707
707
  x,
708
708
  {
709
709
  iconType: N,
@@ -712,7 +712,7 @@ const tt = y(
712
712
  },
713
713
  "Add to play queue"
714
714
  )),
715
- /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(
715
+ /* @__PURE__ */ t.createElement(v, { grow: !1 }, /* @__PURE__ */ t.createElement(
716
716
  x,
717
717
  {
718
718
  iconType: B,
@@ -721,7 +721,7 @@ const tt = y(
721
721
  },
722
722
  "Remove"
723
723
  )),
724
- /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(
724
+ /* @__PURE__ */ t.createElement(v, { grow: !1 }, /* @__PURE__ */ t.createElement(
725
725
  x,
726
726
  {
727
727
  iconType: Ve,
@@ -730,9 +730,9 @@ const tt = y(
730
730
  },
731
731
  "Clear"
732
732
  )),
733
- /* @__PURE__ */ React.createElement(v, { grow: !0 }),
734
- /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(mt, { playQueueStore: e }))
735
- ), !e.isEmpty && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
733
+ /* @__PURE__ */ t.createElement(v, { grow: !0 }),
734
+ /* @__PURE__ */ t.createElement(v, { grow: !1 }, /* @__PURE__ */ t.createElement(mt, { playQueueStore: e }))
735
+ ), !e.isEmpty && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
736
736
  $,
737
737
  {
738
738
  size: "l",
@@ -740,97 +740,97 @@ const tt = y(
740
740
  position: "sticky",
741
741
  top: 88,
742
742
  zIndex: 998,
743
- background: n.colors.backgroundBasePlain
743
+ background: i.colors.backgroundBasePlain
744
744
  }
745
745
  }
746
- ), /* @__PURE__ */ React.createElement(ct, { playQueueStore: e })));
746
+ ), /* @__PURE__ */ t.createElement(ct, { playQueueStore: e })));
747
747
  }
748
- ), St = h(
749
- ({ playerStore: t, playQueueStore: e }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
750
- A.Header,
748
+ ), Ot = h(
749
+ ({ playerStore: n, playQueueStore: e }) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
750
+ z.Header,
751
751
  {
752
752
  pageTitle: "Play queue",
753
753
  rightSideItems: []
754
754
  }
755
- ), /* @__PURE__ */ React.createElement(A.Section, null, /* @__PURE__ */ React.createElement(
755
+ ), /* @__PURE__ */ t.createElement(z.Section, null, /* @__PURE__ */ t.createElement(
756
756
  dt,
757
757
  {
758
- playerStore: t,
758
+ playerStore: n,
759
759
  playQueueStore: e
760
760
  }
761
761
  )))
762
- ), z = {
762
+ ), M = {
763
763
  width: 16 * 25,
764
764
  height: 9 * 25
765
- }, Ot = h(
766
- ({ playerStore: t, playQueueStore: e }) => {
767
- const n = R(), s = u(async () => {
768
- e.interacted && await n.play();
769
- }, [e, n]), a = u(async () => {
765
+ }, At = h(
766
+ ({ playerStore: n, playQueueStore: e }) => {
767
+ const i = C(), s = u(async () => {
768
+ e.interacted && await i.play();
769
+ }, [e, i]), l = u(async () => {
770
770
  switch (e.repeat) {
771
771
  case o.One:
772
- await n.setCurrentTime(0);
772
+ await i.setCurrentTime(0);
773
773
  break;
774
774
  case o.Off:
775
775
  case o.All:
776
776
  if (e.isLastItem)
777
777
  switch (e.repeat) {
778
778
  case o.Off:
779
- t.onEnded();
779
+ n.onEnded();
780
780
  break;
781
781
  case o.All:
782
- e.hasMultipleItems ? await e.goToFirst() : await n.setCurrentTime(0);
782
+ e.hasMultipleItems ? await e.goToFirst() : await i.setCurrentTime(0);
783
783
  break;
784
784
  }
785
785
  else
786
786
  await e.next();
787
787
  break;
788
788
  }
789
- }, [e, t, n]), l = G(
789
+ }, [e, n, i]), a = G(
790
790
  () => ({
791
791
  onLoaded: s,
792
- onPlay: t.onPlay,
793
- onPause: t.onPause,
794
- onEnded: a,
795
- onTimeUpdate: t.onTimeUpdate
792
+ onPlay: n.onPlay,
793
+ onPause: n.onPause,
794
+ onEnded: l,
795
+ onTimeUpdate: n.onTimeUpdate
796
796
  }),
797
- [t, s, a]
797
+ [n, s, l]
798
798
  );
799
- return /* @__PURE__ */ React.createElement(
799
+ return /* @__PURE__ */ t.createElement(
800
800
  "div",
801
801
  {
802
802
  css: {
803
803
  position: "fixed",
804
804
  right: 0,
805
805
  bottom: Y,
806
- width: z.width,
807
- height: z.height,
806
+ width: M.width,
807
+ height: M.height,
808
808
  zIndex: 998,
809
809
  backgroundColor: "rgb(39, 39, 39)",
810
810
  display: "flex",
811
811
  flexDirection: "column"
812
812
  }
813
813
  },
814
- /* @__PURE__ */ React.createElement("div", { css: { flexGrow: 1, backgroundColor: "black" } }, e.currentItem && /* @__PURE__ */ React.createElement(
814
+ /* @__PURE__ */ t.createElement("div", { css: { flexGrow: 1, backgroundColor: "black" } }, e.currentItem && /* @__PURE__ */ t.createElement(
815
815
  ne,
816
816
  {
817
817
  src: e.currentItem.url,
818
- options: l
818
+ options: a
819
819
  }
820
820
  ))
821
821
  );
822
822
  }
823
823
  );
824
824
  class K {
825
- makeObservable(e, n) {
826
- return He(e, n);
825
+ makeObservable(e, i) {
826
+ return He(e, i);
827
827
  }
828
828
  }
829
- const k = class k {
830
- constructor(e, n, s) {
829
+ const w = class w {
830
+ constructor(e, i, s) {
831
831
  p(this, "id");
832
832
  p(this, "isSelected", !1);
833
- this.observableStateProvider = e, this.playQueueStore = n, this.dto = s, this.id = k.nextId++, e.makeObservable(this, {
833
+ this.observableStateProvider = e, this.playQueueStore = i, this.dto = s, this.id = w.nextId++, e.makeObservable(this, {
834
834
  isSelected: b,
835
835
  isCurrent: c,
836
836
  index: c,
@@ -853,10 +853,10 @@ const k = class k {
853
853
  removeOthers: r.bound
854
854
  });
855
855
  }
856
- static fromDto(e, n, s) {
857
- return new k(
856
+ static fromDto(e, i, s) {
857
+ return new w(
858
858
  e,
859
- n,
859
+ i,
860
860
  s
861
861
  );
862
862
  }
@@ -936,20 +936,20 @@ const k = class k {
936
936
  return this.playQueueStore.removeOtherItems(this);
937
937
  }
938
938
  };
939
- p(k, "nextId", 1);
940
- let M = k;
941
- const P = new $e({
939
+ p(w, "nextId", 1);
940
+ let R = w;
941
+ const S = new $e({
942
942
  coerceTypes: !0
943
943
  });
944
- function ut(t, e) {
945
- let n;
946
- if (n = P.getSchema(e), n === void 0 && (P.addSchema(t, e), n = P.getSchema(e)), n === void 0 || n.schema !== t)
944
+ function ut(n, e) {
945
+ let i;
946
+ if (i = S.getSchema(e), i === void 0 && (S.addSchema(n, e), i = S.getSchema(e)), i === void 0 || i.schema !== n)
947
947
  throw new Error(
948
948
  `Invalid schema. Expected: '${JSON.stringify(
949
- t
950
- )}', but got '${JSON.stringify(n == null ? void 0 : n.schema)}'.`
949
+ n
950
+ )}', but got '${JSON.stringify(i == null ? void 0 : i.schema)}'.`
951
951
  );
952
- return n;
952
+ return i;
953
953
  }
954
954
  const ht = {
955
955
  type: "object",
@@ -1049,7 +1049,7 @@ class gt {
1049
1049
  });
1050
1050
  }
1051
1051
  createItem(e) {
1052
- return M.fromDto(
1052
+ return R.fromDto(
1053
1053
  this.observableStateProvider,
1054
1054
  this,
1055
1055
  e
@@ -1065,8 +1065,8 @@ class gt {
1065
1065
  };
1066
1066
  }
1067
1067
  set localStorageState(e) {
1068
- var n;
1069
- this.repeat = e.repeat ?? o.Off, this.shuffle = e.shuffle ?? !1, this.items = ((n = e.items) == null ? void 0 : n.map((s) => this.createItem(s))) ?? [], this.currentIndex = e.currentIndex;
1068
+ var i;
1069
+ this.repeat = e.repeat ?? o.Off, this.shuffle = e.shuffle ?? !1, this.items = ((i = e.items) == null ? void 0 : i.map((s) => this.createItem(s))) ?? [], this.currentIndex = e.currentIndex;
1070
1070
  }
1071
1071
  validateLocalStorageState(e) {
1072
1072
  return pt(e);
@@ -1090,8 +1090,8 @@ class gt {
1090
1090
  return this.currentId !== void 0 ? this.items.findIndex((e) => e.id === this.currentId) : void 0;
1091
1091
  }
1092
1092
  set currentIndex(e) {
1093
- var n;
1094
- this.currentId = e !== void 0 ? (n = this.items.at(e)) == null ? void 0 : n.id : void 0;
1093
+ var i;
1094
+ this.currentId = e !== void 0 ? (i = this.items.at(e)) == null ? void 0 : i.id : void 0;
1095
1095
  }
1096
1096
  get hasPreviousItem() {
1097
1097
  return this.hasMultipleItems && this.currentIndex !== void 0 && this.currentIndex > 0;
@@ -1109,8 +1109,8 @@ class gt {
1109
1109
  return this.selectedItems.length === this.items.length;
1110
1110
  }
1111
1111
  set allItemsSelected(e) {
1112
- for (const n of this.items)
1113
- n.isSelected = e;
1112
+ for (const i of this.items)
1113
+ i.isSelected = e;
1114
1114
  }
1115
1115
  get selectedItemsOrAllItems() {
1116
1116
  return this.selectedItems.length > 0 ? this.selectedItems : this.items;
@@ -1166,35 +1166,35 @@ class gt {
1166
1166
  this.clearAndSetItems(e);
1167
1167
  return;
1168
1168
  }
1169
- const { currentIndex: n } = this;
1170
- n !== void 0 && (this.interact(), this.items.splice(n, 0, ...e), this.currentIndex = n);
1169
+ const { currentIndex: i } = this;
1170
+ i !== void 0 && (this.interact(), this.items.splice(i, 0, ...e), this.currentIndex = i);
1171
1171
  }
1172
- moveItem(e, n) {
1172
+ moveItem(e, i) {
1173
1173
  const s = this.items.splice(this.items.indexOf(e), 1)[0];
1174
- this.items.splice(n, 0, s);
1174
+ this.items.splice(i, 0, s);
1175
1175
  }
1176
1176
  async removeItems(e) {
1177
- const { currentItem: n } = this;
1178
- D(this.items, ...e.filter((l) => l !== n));
1179
- const { currentIndex: s, isLastItem: a } = this;
1177
+ const { currentItem: i } = this;
1178
+ D(this.items, ...e.filter((a) => a !== i));
1179
+ const { currentIndex: s, isLastItem: l } = this;
1180
1180
  D(
1181
1181
  this.items,
1182
- e.find((l) => l === n)
1183
- ), this.currentItem !== n && (this.interact(), a ? await this.goToFirst() : this.currentIndex = s);
1182
+ e.find((a) => a === i)
1183
+ ), this.currentItem !== i && (this.interact(), l ? await this.goToFirst() : this.currentIndex = s);
1184
1184
  }
1185
1185
  async removeSelectedItems() {
1186
1186
  await this.removeItems(this.selectedItemsOrAllItems), this.unselectAll();
1187
1187
  }
1188
1188
  async removeOtherItems(e) {
1189
- const n = e.id;
1189
+ const i = e.id;
1190
1190
  return this.removeItems(
1191
- this.items.filter((s) => s.id !== n)
1191
+ this.items.filter((s) => s.id !== i)
1192
1192
  );
1193
1193
  }
1194
1194
  async removeItemsAbove(e) {
1195
- const n = this.items.indexOf(e);
1195
+ const i = this.items.indexOf(e);
1196
1196
  return this.removeItems(
1197
- this.items.filter((s, a) => a < n)
1197
+ this.items.filter((s, l) => l < i)
1198
1198
  );
1199
1199
  }
1200
1200
  toggleRepeat() {
@@ -1223,31 +1223,31 @@ class gt {
1223
1223
  this.currentIndex !== void 0 && (this.currentIndex = 0);
1224
1224
  }
1225
1225
  }
1226
- const Z = W(void 0), At = ({
1227
- children: t
1226
+ const Z = W(void 0), zt = ({
1227
+ children: n
1228
1228
  }) => {
1229
1229
  const [e] = g(
1230
1230
  () => new gt(new K())
1231
- ), n = R();
1231
+ ), i = C();
1232
1232
  return De(() => Ue(
1233
1233
  () => e.currentItem,
1234
- async (s, a) => {
1235
- s === void 0 || a === void 0 || s.type === a.type && s.videoId === a.videoId && await n.setCurrentTime(0);
1234
+ async (s, l) => {
1235
+ s === void 0 || l === void 0 || s.type === l.type && s.videoId === l.videoId && await i.setCurrentTime(0);
1236
1236
  }
1237
- ), [e, n]), /* @__PURE__ */ React.createElement(Z.Provider, { value: e }, t);
1238
- }, ft = () => X(Z), zt = h(
1239
- ({ children: t }) => {
1237
+ ), [e, i]), /* @__PURE__ */ t.createElement(Z.Provider, { value: e }, n);
1238
+ }, ft = () => X(Z), Mt = h(
1239
+ ({ children: n }) => {
1240
1240
  const e = ft();
1241
- return /* @__PURE__ */ React.createElement(
1242
- A,
1241
+ return /* @__PURE__ */ t.createElement(
1242
+ z,
1243
1243
  {
1244
1244
  panelled: !0,
1245
1245
  style: {
1246
1246
  minBlockSize: `max(460px, 100vh - ${Y}px)`
1247
1247
  }
1248
1248
  },
1249
- t,
1250
- !e.isEmpty && /* @__PURE__ */ React.createElement($, { style: { blockSize: z.height } })
1249
+ n,
1250
+ !e.isEmpty && /* @__PURE__ */ t.createElement($, { style: { blockSize: M.height } })
1251
1251
  );
1252
1252
  }
1253
1253
  );
@@ -1291,31 +1291,31 @@ class Et {
1291
1291
  e !== void 0 && (this.seeking || (this.percent = e));
1292
1292
  }
1293
1293
  }
1294
- const _ = W(void 0), Mt = ({
1295
- children: t
1294
+ const _ = W(void 0), Rt = ({
1295
+ children: n
1296
1296
  }) => {
1297
1297
  const [e] = g(
1298
1298
  () => new Et(new K())
1299
1299
  );
1300
- return /* @__PURE__ */ React.createElement(_.Provider, { value: e }, t);
1300
+ return /* @__PURE__ */ t.createElement(_.Provider, { value: e }, n);
1301
1301
  }, Ft = () => X(_);
1302
1302
  class Bt {
1303
- makeObservable(e, n) {
1303
+ makeObservable(e, i) {
1304
1304
  return e;
1305
1305
  }
1306
1306
  }
1307
1307
  export {
1308
- Pt as BottomBar,
1309
- St as HydrangeanDiva,
1310
- zt as MediaPlayerLayout,
1311
- Ot as MiniPlayer,
1308
+ St as BottomBar,
1309
+ Ot as HydrangeanDiva,
1310
+ Mt as MediaPlayerLayout,
1311
+ At as MiniPlayer,
1312
1312
  K as MobXObservableStateProvider,
1313
1313
  Bt as ObservableStateProvider,
1314
- At as PlayQueueStoreProvider,
1315
- Mt as PlayerStoreProvider,
1314
+ zt as PlayQueueStoreProvider,
1315
+ Rt as PlayerStoreProvider,
1316
1316
  o as RepeatMode,
1317
1317
  Y as bottomBarHeight,
1318
- z as miniPlayerSize,
1318
+ M as miniPlayerSize,
1319
1319
  ft as usePlayQueueStore,
1320
1320
  Ft as usePlayerStore
1321
1321
  };