@aigamo/hydrangean-diva 0.0.1-alpha.11 → 0.0.1-alpha.12

package/dist/index.es.js

@@ -1,17 +1,27 @@
 var Ir = Object.defineProperty;
 var Pr = (t, e, n) => e in t ? Ir(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
 var U = (t, e, n) => Pr(t, typeof e != "symbol" ? e + "" : e, n);
-import * as te from "react";
-import Dt, { forwardRef as Rr, useContext as st, useCallback as $, memo as Z, useState as q, useLayoutEffect as wr, useMemo as zt, createContext as Lt, useEffect as Or } from "react";
-import _r from "@emotion/cache";
-import { useNostalgicDiva as ie, findVideoService as Ar, NostalgicDiva as kr } from "@aigamo/nostalgic-diva";
-import { EuiRange as Vt, EuiButtonIcon as K, EuiFlexGroup as me, EuiFlexItem as G, EuiBottomBar as Mr, EuiFormRow as tt, EuiPopover as lt, EuiIcon as H, EuiContextMenu as Fr, EuiButton as ne, EuiModalHeaderTitle as jr, EuiModalHeader as Nr, EuiForm as $r, EuiFieldText as It, EuiModalBody as Dr, EuiModalFooter as zr, EuiButtonEmpty as Lr, EuiModal as Vr, useEuiTheme as Yt, EuiCheckbox as Bt, EuiTableHeaderCellCheckbox as Yr, EuiTableHeaderCell as Xe, EuiTableHeader as Br, EuiContextMenuItem as Wr, EuiHorizontalRule as Pt, EuiContextMenuPanel as Ur, EuiTableRowCell as rt, EuiTableRowCellCheckbox as qr, EuiLink as Hr, EuiTableRow as Gr, EuiTable as Jr, EuiCodeBlock as Kr, EuiFlyout as Xr, EuiSpacer as Wt, EuiEmptyPrompt as Zr, EuiPageTemplate as nt } from "@elastic/eui";
-import { ArrowRepeat1Filled as Qr, ArrowRepeatAllFilled as en, ArrowRepeatAllOffFilled as tn, ArrowShuffleFilled as rn, ArrowShuffleOffFilled as nn, PreviousFilled as on, PauseFilled as an, PlayFilled as sn, NextFilled as ln, Speaker2Regular as Ut, MoreHorizontalFilled as qt, TopSpeedRegular as cn, SkipBack10Regular as un, SkipForward30Regular as fn, DismissRegular as ct, AddRegular as ut, ArrowUploadRegular as dn, ArrowDownloadRegular as mn, PlayRegular as hn, DeleteRegular as vn } from "@fluentui/react-icons";
+import { makeObservable as Rr, action as y, computed as _, observable as te, reaction as wr } from "mobx";
+import * as re from "react";
+import zt, { forwardRef as Or, useContext as st, memo as Z, useState as q, useCallback as $, createContext as Lt, useEffect as _r, useLayoutEffect as Ar, useMemo as Vt } from "react";
+import kr from "@emotion/cache";
+import { EuiButton as ne, EuiModalHeaderTitle as Mr, EuiModalHeader as Fr, EuiForm as jr, EuiFormRow as tt, EuiFieldText as It, EuiModalBody as Nr, EuiModalFooter as $r, EuiButtonEmpty as Dr, EuiModal as zr, useEuiTheme as Yt, EuiCheckbox as Bt, EuiTableHeaderCellCheckbox as Lr, EuiTableHeader as Vr, EuiContextMenuItem as Yr, EuiContextMenuPanel as Br, EuiTableRowCell as rt, EuiTableRowCellCheckbox as Wr, EuiLink as Ur, EuiTableRow as qr, EuiTable as Hr, EuiButtonIcon as K, EuiPopover as lt, EuiIcon as H, EuiHorizontalRule as Pt, EuiTableHeaderCell as Xe, EuiCodeBlock as Gr, EuiFlyout as Jr, EuiFlexGroup as me, EuiFlexItem as G, EuiSpacer as Wt, EuiEmptyPrompt as Kr, EuiPageTemplate as nt, EuiRange as Ut, EuiContextMenu as Xr, EuiBottomBar as Zr } from "@elastic/eui";
+import { AddRegular as ct, PlayRegular as Qr, DismissRegular as ut, MoreHorizontalFilled as qt, ArrowUploadRegular as en, ArrowDownloadRegular as tn, WindowDevToolsRegular as rn, DeleteRegular as nn, Speaker2Regular as Ht, TopSpeedRegular as on, SkipBack10Regular as an, SkipForward30Regular as sn, ArrowRepeat1Filled as ln, ArrowRepeatAllFilled as cn, ArrowRepeatAllOffFilled as un, ArrowShuffleFilled as fn, ArrowShuffleOffFilled as dn, PreviousFilled as mn, PauseFilled as hn, PlayFilled as vn, NextFilled as pn } from "@fluentui/react-icons";
 import { observer as Y } from "mobx-react-lite";
-import { ReactSortable as pn } from "react-sortablejs";
-import { makeObservable as yn, action as y, computed as _, observable as re, reaction as gn } from "mobx";
+import { findVideoService as yn, useNostalgicDiva as ie, NostalgicDiva as gn } from "@aigamo/nostalgic-diva";
+import { ReactSortable as bn } from "react-sortablejs";
 import { pull as Rt } from "lodash-es";
-import bn from "ajv";
+import En from "ajv";
+class Gt {
+  makeObservable(e, n) {
+    return Rr(e, n);
+  }
+}
+class wi {
+  makeObservable(e, n) {
+    return e;
+  }
+}
 var $e = { exports: {} }, xe = {};
 /**
  * @license React
@@ -23,10 +33,10 @@ var $e = { exports: {} }, xe = {};
  * LICENSE file in the root directory of this source tree.
  */
 var wt;
-function En() {
+function Tn() {
   if (wt) return xe;
   wt = 1;
-  var t = Dt, e = Symbol.for("react.element"), n = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, a = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, l = { key: !0, ref: !0, __self: !0, __source: !0 };
+  var t = zt, e = Symbol.for("react.element"), n = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, a = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, l = { key: !0, ref: !0, __self: !0, __source: !0 };
   function f(h, m, p) {
     var E, P = {}, D = null, j = null;
     p !== void 0 && (D = "" + p), m.key !== void 0 && (D = "" + m.key), m.ref !== void 0 && (j = m.ref);
@@ -47,9 +57,9 @@ var Se = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Ot;
-function Tn() {
+function xn() {
   return Ot || (Ot = 1, process.env.NODE_ENV !== "production" && function() {
-    var t = Dt, e = Symbol.for("react.element"), n = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), l = Symbol.for("react.profiler"), f = Symbol.for("react.provider"), h = Symbol.for("react.context"), m = Symbol.for("react.forward_ref"), p = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), P = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), j = Symbol.for("react.offscreen"), A = Symbol.iterator, B = "@@iterator";
+    var t = zt, e = Symbol.for("react.element"), n = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), l = Symbol.for("react.profiler"), f = Symbol.for("react.provider"), h = Symbol.for("react.context"), m = Symbol.for("react.forward_ref"), p = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), P = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), j = Symbol.for("react.offscreen"), A = Symbol.iterator, B = "@@iterator";
     function Q(r) {
       if (r === null || typeof r != "object")
         return null;
@@ -637,10 +647,10 @@ React keys must be passed directly to JSX without using spread:
   }()), Se;
 }
 var _t;
-function xn() {
-  return _t || (_t = 1, process.env.NODE_ENV === "production" ? $e.exports = En() : $e.exports = Tn()), $e.exports;
+function Sn() {
+  return _t || (_t = 1, process.env.NODE_ENV === "production" ? $e.exports = Tn() : $e.exports = xn()), $e.exports;
 }
-var Ie = xn(), De = { exports: {} }, x = {};
+var Ie = Sn(), De = { exports: {} }, x = {};
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -650,7 +660,7 @@ var Ie = xn(), De = { exports: {} }, x = {};
  * LICENSE file in the root directory of this source tree.
  */
 var At;
-function Sn() {
+function Cn() {
   if (At) return x;
   At = 1;
   var t = typeof Symbol == "function" && Symbol.for, e = t ? Symbol.for("react.element") : 60103, n = t ? Symbol.for("react.portal") : 60106, i = t ? Symbol.for("react.fragment") : 60107, a = t ? Symbol.for("react.strict_mode") : 60108, l = t ? Symbol.for("react.profiler") : 60114, f = t ? Symbol.for("react.provider") : 60109, h = t ? Symbol.for("react.context") : 60110, m = t ? Symbol.for("react.async_mode") : 60111, p = t ? Symbol.for("react.concurrent_mode") : 60111, E = t ? Symbol.for("react.forward_ref") : 60112, P = t ? Symbol.for("react.suspense") : 60113, D = t ? Symbol.for("react.suspense_list") : 60120, j = t ? Symbol.for("react.memo") : 60115, A = t ? Symbol.for("react.lazy") : 60116, B = t ? Symbol.for("react.block") : 60121, Q = t ? Symbol.for("react.fundamental") : 60117, z = t ? Symbol.for("react.responder") : 60118, I = t ? Symbol.for("react.scope") : 60119;
@@ -725,7 +735,7 @@ var S = {};
  * LICENSE file in the root directory of this source tree.
  */
 var kt;
-function Cn() {
+function In() {
   return kt || (kt = 1, process.env.NODE_ENV !== "production" && function() {
     var t = typeof Symbol == "function" && Symbol.for, e = t ? Symbol.for("react.element") : 60103, n = t ? Symbol.for("react.portal") : 60106, i = t ? Symbol.for("react.fragment") : 60107, a = t ? Symbol.for("react.strict_mode") : 60108, l = t ? Symbol.for("react.profiler") : 60114, f = t ? Symbol.for("react.provider") : 60109, h = t ? Symbol.for("react.context") : 60110, m = t ? Symbol.for("react.async_mode") : 60111, p = t ? Symbol.for("react.concurrent_mode") : 60111, E = t ? Symbol.for("react.forward_ref") : 60112, P = t ? Symbol.for("react.suspense") : 60113, D = t ? Symbol.for("react.suspense_list") : 60120, j = t ? Symbol.for("react.memo") : 60115, A = t ? Symbol.for("react.lazy") : 60116, B = t ? Symbol.for("react.block") : 60121, Q = t ? Symbol.for("react.fundamental") : 60117, z = t ? Symbol.for("react.responder") : 60118, I = t ? Symbol.for("react.scope") : 60119;
     function k(d) {
@@ -808,14 +818,14 @@ function Cn() {
   }()), S;
 }
 var Mt;
-function In() {
-  return Mt || (Mt = 1, process.env.NODE_ENV === "production" ? De.exports = Sn() : De.exports = Cn()), De.exports;
+function Pn() {
+  return Mt || (Mt = 1, process.env.NODE_ENV === "production" ? De.exports = Cn() : De.exports = In()), De.exports;
 }
 var Ze, Ft;
-function Pn() {
+function Rn() {
   if (Ft) return Ze;
   Ft = 1;
-  var t = In(), e = {
+  var t = Pn(), e = {
     childContextTypes: !0,
     contextType: !0,
     contextTypes: !0,
@@ -877,15 +887,15 @@ function Pn() {
   }
   return Ze = j, Ze;
 }
-Pn();
-var Rn = !0;
-function wn(t, e, n) {
+Rn();
+var wn = !0;
+function On(t, e, n) {
   var i = "";
   return n.split(" ").forEach(function(a) {
     t[a] !== void 0 ? e.push(t[a] + ";") : a && (i += a + " ");
   }), i;
 }
-var Ht = function(e, n, i) {
+var Jt = function(e, n, i) {
   var a = e.key + "-" + n.name;
   // we only need to add the styles to the registered cache if the
   // class name could be used further down
@@ -896,9 +906,9 @@ var Ht = function(e, n, i) {
   // in node since emotion-server relies on whether a style is in
   // the registered cache to know whether a style is global or not
   // also, note that this check will be dead code eliminated in the browser
-  Rn === !1) && e.registered[a] === void 0 && (e.registered[a] = n.styles);
-}, On = function(e, n, i) {
-  Ht(e, n, i);
+  wn === !1) && e.registered[a] === void 0 && (e.registered[a] = n.styles);
+}, _n = function(e, n, i) {
+  Jt(e, n, i);
   var a = e.key + "-" + n.name;
   if (e.inserted[n.name] === void 0) {
     var l = n;
@@ -907,7 +917,7 @@ var Ht = function(e, n, i) {
     while (l !== void 0);
   }
 };
-function _n(t) {
+function An(t) {
   for (var e = 0, n, i = 0, a = t.length; a >= 4; ++i, a -= 4)
     n = t.charCodeAt(i) & 255 | (t.charCodeAt(++i) & 255) << 8 | (t.charCodeAt(++i) & 255) << 16 | (t.charCodeAt(++i) & 255) << 24, n = /* Math.imul(k, m): */
     (n & 65535) * 1540483477 + ((n >>> 16) * 59797 << 16), n ^= /* k >>> r: */
@@ -926,7 +936,7 @@ function _n(t) {
   return e ^= e >>> 13, e = /* Math.imul(h, m): */
   (e & 65535) * 1540483477 + ((e >>> 16) * 59797 << 16), ((e ^ e >>> 15) >>> 0).toString(36);
 }
-var An = {
+var kn = {
   animationIterationCount: 1,
   aspectRatio: 1,
   borderImageOutset: 1,
@@ -976,24 +986,24 @@ var An = {
   strokeOpacity: 1,
   strokeWidth: 1
 };
-function kn(t) {
+function Mn(t) {
   var e = /* @__PURE__ */ Object.create(null);
   return function(n) {
     return e[n] === void 0 && (e[n] = t(n)), e[n];
   };
 }
-var Mn = /[A-Z]|^ms/g, Fn = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Gt = function(e) {
+var Fn = /[A-Z]|^ms/g, jn = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Kt = function(e) {
   return e.charCodeAt(1) === 45;
 }, jt = function(e) {
   return e != null && typeof e != "boolean";
-}, Qe = /* @__PURE__ */ kn(function(t) {
-  return Gt(t) ? t : t.replace(Mn, "-$&").toLowerCase();
+}, Qe = /* @__PURE__ */ Mn(function(t) {
+  return Kt(t) ? t : t.replace(Fn, "-$&").toLowerCase();
 }), Nt = function(e, n) {
   switch (e) {
     case "animation":
     case "animationName":
       if (typeof n == "string")
-        return n.replace(Fn, function(i, a, l) {
+        return n.replace(jn, function(i, a, l) {
           return X = {
             name: a,
             styles: l,
@@ -1001,7 +1011,7 @@ var Mn = /[A-Z]|^ms/g, Fn = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Gt = function(e) {
           }, a;
         });
   }
-  return An[e] !== 1 && !Gt(e) && typeof n == "number" && n !== 0 ? n + "px" : n;
+  return kn[e] !== 1 && !Kt(e) && typeof n == "number" && n !== 0 ? n + "px" : n;
 };
 function Pe(t, e, n) {
   if (n == null)
@@ -1033,7 +1043,7 @@ function Pe(t, e, n) {
         var h = l.styles + ";";
         return h;
       }
-      return jn(t, e, n);
+      return Nn(t, e, n);
     }
     case "function": {
       if (t !== void 0) {
@@ -1046,7 +1056,7 @@ function Pe(t, e, n) {
   var E = n;
   return E;
 }
-function jn(t, e, n) {
+function Nn(t, e, n) {
   var i = "";
   if (Array.isArray(n))
     for (var a = 0; a < n.length; a++)
@@ -1076,7 +1086,7 @@ function jn(t, e, n) {
   return i;
 }
 var $t = /label:\s*([^\s;{]+)\s*(;|$)/g, X;
-function Nn(t, e, n) {
+function $n(t, e, n) {
   if (t.length === 1 && typeof t[0] == "object" && t[0] !== null && t[0].styles !== void 0)
     return t[0];
   var i = !0, a = "";
@@ -1096,383 +1106,278 @@ function Nn(t, e, n) {
   $t.lastIndex = 0;
   for (var p = "", E; (E = $t.exec(a)) !== null; )
     p += "-" + E[1];
-  var P = _n(a) + p;
+  var P = An(a) + p;
   return {
     name: P,
     styles: a,
     next: X
   };
 }
-var $n = function(e) {
+var Dn = function(e) {
   return e();
-}, Dn = te.useInsertionEffect ? te.useInsertionEffect : !1, zn = Dn || $n, Jt = /* @__PURE__ */ te.createContext(
+}, zn = re.useInsertionEffect ? re.useInsertionEffect : !1, Ln = zn || Dn, Xt = /* @__PURE__ */ re.createContext(
   // we're doing this to avoid preconstruct's dead code elimination in this one case
   // because this module is primarily intended for the browser and node
   // but it's also required in react native and similar environments sometimes
   // and we could have a special build just for that
   // but this is much easier and the native packages
   // might use a different theme context in the future anyway
-  typeof HTMLElement < "u" ? /* @__PURE__ */ _r({
+  typeof HTMLElement < "u" ? /* @__PURE__ */ kr({
     key: "css"
   }) : null
 );
-Jt.Provider;
-var Ln = function(e) {
-  return /* @__PURE__ */ Rr(function(n, i) {
-    var a = st(Jt);
+Xt.Provider;
+var Vn = function(e) {
+  return /* @__PURE__ */ Or(function(n, i) {
+    var a = st(Xt);
     return e(n, a, i);
   });
-}, Vn = /* @__PURE__ */ te.createContext({}), ze = {}.hasOwnProperty, it = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", Kt = function(e, n) {
+}, Yn = /* @__PURE__ */ re.createContext({}), ze = {}.hasOwnProperty, it = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", Zt = function(e, n) {
   var i = {};
   for (var a in n)
     ze.call(n, a) && (i[a] = n[a]);
   return i[it] = e, i;
-}, Yn = function(e) {
+}, Bn = function(e) {
   var n = e.cache, i = e.serialized, a = e.isStringTag;
-  return Ht(n, i, a), zn(function() {
-    return On(n, i, a);
+  return Jt(n, i, a), Ln(function() {
+    return _n(n, i, a);
   }), null;
-}, Bn = /* @__PURE__ */ Ln(function(t, e, n) {
+}, Wn = /* @__PURE__ */ Vn(function(t, e, n) {
   var i = t.css;
   typeof i == "string" && e.registered[i] !== void 0 && (i = e.registered[i]);
   var a = t[it], l = [i], f = "";
-  typeof t.className == "string" ? f = wn(e.registered, l, t.className) : t.className != null && (f = t.className + " ");
-  var h = Nn(l, void 0, te.useContext(Vn));
+  typeof t.className == "string" ? f = On(e.registered, l, t.className) : t.className != null && (f = t.className + " ");
+  var h = $n(l, void 0, re.useContext(Yn));
   f += e.key + "-" + h.name;
   var m = {};
   for (var p in t)
     ze.call(t, p) && p !== "css" && p !== it && (m[p] = t[p]);
-  return m.className = f, n && (m.ref = n), /* @__PURE__ */ te.createElement(te.Fragment, null, /* @__PURE__ */ te.createElement(Yn, {
+  return m.className = f, n && (m.ref = n), /* @__PURE__ */ re.createElement(re.Fragment, null, /* @__PURE__ */ re.createElement(Bn, {
     cache: e,
     serialized: h,
     isStringTag: typeof a == "string"
-  }), /* @__PURE__ */ te.createElement(a, m));
-}), Xt = Bn, Le = Ie.Fragment, o = function(e, n, i) {
-  return ze.call(n, "css") ? Ie.jsx(Xt, Kt(e, n), i) : Ie.jsx(e, n, i);
+  }), /* @__PURE__ */ re.createElement(a, m));
+}), Qt = Wn, Le = Ie.Fragment, o = function(e, n, i) {
+  return ze.call(n, "css") ? Ie.jsx(Qt, Zt(e, n), i) : Ie.jsx(e, n, i);
 }, F = function(e, n, i) {
-  return ze.call(n, "css") ? Ie.jsxs(Xt, Kt(e, n), i) : Ie.jsxs(e, n, i);
-}, R = /* @__PURE__ */ ((t) => (t.Off = "Off", t.All = "All", t.One = "One", t))(R || {});
-const Zt = 80, Wn = Y(
-  ({ playerStore: t, playQueueStore: e }) => {
-    const n = ie(), i = $(
-      (f) => {
-        const h = Number(f.currentTarget.value) / 100;
-        t.setPercent(h);
-      },
-      [t]
-    ), a = $(
-      (f) => {
-        f.button === 0 && t.setSeeking(!0);
-      },
-      [t]
-    ), l = $(
-      async (f) => {
-        if (f.button === 0) {
-          const h = Number(f.currentTarget.value) / 100;
-          t.setSeeking(!1);
-          const m = await n.getDuration();
-          m !== void 0 && await n.setCurrentTime(m * h);
+  return ze.call(n, "css") ? Ie.jsxs(Qt, Zt(e, n), i) : Ie.jsxs(e, n, i);
+};
+const Un = ({
+  onCancel: t,
+  onSave: e
+}) => {
+  const [n, i] = q(""), [a, l] = q(""), [f, h] = q(!1);
+  return /* @__PURE__ */ F(zr, { onClose: t, initialFocus: "[name=url]", children: [
+    /* @__PURE__ */ o(Fr, { children: /* @__PURE__ */ o(Mr, { children: "Add video" }) }),
+    /* @__PURE__ */ o(Nr, { children: /* @__PURE__ */ F(jr, { component: "form", children: [
+      /* @__PURE__ */ o(tt, { label: "URL", children: /* @__PURE__ */ o(
+        It,
+        {
+          name: "url",
+          value: n,
+          onChange: (m) => i(m.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ o(tt, { label: "Title", children: /* @__PURE__ */ o(
+        It,
+        {
+          name: "title",
+          value: a,
+          onChange: (m) => l(m.target.value)
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ F($r, { children: [
+      /* @__PURE__ */ o(Dr, { onClick: t, children: "Cancel" }),
+      /* @__PURE__ */ o(
+        ne,
+        {
+          type: "submit",
+          onClick: async () => {
+            try {
+              h(!0), await e({ url: n, title: a });
+            } finally {
+              h(!1);
+            }
+          },
+          fill: !0,
+          disabled: n.trim().length === 0,
+          isLoading: f,
+          children: "Save"
+        }
+      )
+    ] })
+  ] });
+};
+function qn(t) {
+  return t !== null && typeof t == "object" && "title" in t && typeof t.title == "string";
+}
+const Dt = Z(
+  ({ playQueueStore: t }) => {
+    const [e, n] = q(!1), i = $(
+      async (a) => {
+        const l = yn(a.url);
+        if (l !== void 0) {
+          const f = l.extractVideoId(a.url);
+          if (f !== void 0) {
+            const m = await (await fetch(
+              `https://noembed.com/embed?url=${encodeURIComponent(
+                a.url
+              )}`
+            )).json();
+            await t.addItems([
+              t.createItem({
+                url: a.url,
+                type: l.type,
+                videoId: f,
+                title: a.title || (qn(m) ? m.title : f)
+              })
+            ]);
+          }
         }
+        n(!1);
       },
-      [t, n]
-    );
-    return /* @__PURE__ */ o(
-      Vt,
-      {
-        min: 0,
-        max: 100,
-        step: 1e-7,
-        value: t.percent * 100,
-        onChange: i,
-        onMouseDown: a,
-        onMouseUp: l,
-        fullWidth: !0,
-        showRange: !0,
-        css: { blockSize: 32 },
-        disabled: e.isEmpty
-      }
+      [t]
     );
+    return /* @__PURE__ */ F(Le, { children: [
+      /* @__PURE__ */ o(
+        ne,
+        {
+          onClick: () => n(!0),
+          iconType: ct,
+          color: "primary",
+          children: "Add video"
+        }
+      ),
+      e && /* @__PURE__ */ o(
+        Un,
+        {
+          onCancel: () => n(!1),
+          onSave: i
+        }
+      )
+    ] });
   }
-), Un = Z(
-  ({ button: t, isOpen: e, closePopover: n }) => {
-    const [i, a] = q("0"), l = ie();
-    wr(() => {
-      e && l.getVolume().then((h) => {
-        h !== void 0 && a(Math.floor(h * 100).toString());
-      });
-    }, [e, l]);
-    const f = $(
-      async (h) => {
-        a(h.currentTarget.value), await l.setVolume(Number(h.currentTarget.value) / 100);
-      },
-      [l]
-    );
-    return /* @__PURE__ */ o(
-      lt,
+), Hn = Y(
+  ({ playQueueStore: t }) => {
+    const { euiTheme: e } = Yt();
+    return /* @__PURE__ */ F(
+      Vr,
       {
-        button: t,
-        isOpen: e,
-        closePopover: n,
-        anchorPosition: "upRight",
-        children: /* @__PURE__ */ o(tt, { children: /* @__PURE__ */ F(
-          me,
-          {
-            responsive: !1,
-            gutterSize: "s",
-            justifyContent: "center",
-            alignItems: "center",
-            children: [
-              /* @__PURE__ */ o(
-                K,
-                {
-                  title: "Mute",
-                  "aria-label": "Mute",
-                  iconType: Ut,
-                  size: "s",
-                  iconSize: "l"
-                }
-              ),
-              /* @__PURE__ */ o(
-                Vt,
-                {
-                  min: 0,
-                  max: 100,
-                  step: 1,
-                  value: i,
-                  onChange: f,
-                  css: { blockSize: 32 }
-                }
-              )
-            ]
-          }
-        ) })
+        style: {
+          position: "sticky",
+          top: 112,
+          zIndex: 998,
+          background: e.colors.backgroundBasePlain
+        },
+        children: [
+          /* @__PURE__ */ o(Lr, { children: /* @__PURE__ */ o(
+            Bt,
+            {
+              id: "",
+              checked: t.allItemsSelected,
+              onChange: (n) => {
+                t.allItemsSelected = n.target.checked;
+              }
+            }
+          ) }),
+          /* @__PURE__ */ o(Xe, { width: 24 }),
+          /* @__PURE__ */ o(Xe, { children: "Title" }),
+          /* @__PURE__ */ o(Xe, {})
+        ]
       }
     );
   }
-), qn = Z(
+), Gn = Z(
   ({
-    playQueueStore: t,
+    item: t,
     closePopover: e
   }) => {
-    const n = ie(), i = $(async () => {
-      const p = await n.getCurrentTime();
-      p !== void 0 && await n.setCurrentTime(p - 10), e();
-    }, [n, e]), a = $(async () => {
-      const p = await n.getCurrentTime();
-      p !== void 0 && await n.setCurrentTime(p + 30), e();
-    }, [n, e]), l = $(
-      async (p) => {
-        await n.setPlaybackRate(p), e();
-      },
-      [n, e]
-    ), f = $(async () => {
-      t.currentItem !== void 0 && await t.removeItems([
-        t.currentItem
-      ]), e();
-    }, [t, e]), [h] = q(), m = zt(
-      () => [
+    const n = Z(
+      ({
+        onClick: i,
+        ...a
+      }) => {
+        const l = $(
+          (f) => {
+            e(), i == null || i(f);
+          },
+          [i]
+        );
+        return /* @__PURE__ */ o(Yr, { ...a, onClick: l });
+      }
+    );
+    return /* @__PURE__ */ F(Br, { children: [
+      /* @__PURE__ */ o(
+        n,
         {
-          id: 0,
-          items: [
-            {
-              name: "Speed",
-              icon: /* @__PURE__ */ o(H, { type: cn, size: "m" }),
-              panel: 1
-            },
-            {
-              name: "Skip back 10 seconds",
-              icon: /* @__PURE__ */ o(H, { type: un, size: "m" }),
-              onClick: i,
-              disabled: t.isEmpty
-            },
-            {
-              name: "Skip forward 30 seconds",
-              icon: /* @__PURE__ */ o(H, { type: fn, size: "m" }),
-              onClick: a,
-              disabled: t.isEmpty
-            },
-            {
-              isSeparator: !0
-            },
-            {
-              name: "Remove from play queue",
-              icon: /* @__PURE__ */ o(H, { type: ct, size: "m" }),
-              onClick: f,
-              disabled: t.isEmpty
-            }
-          ]
-        },
+          icon: /* @__PURE__ */ o(H, { type: "" }),
+          onClick: t.playFirst,
+          children: "Play first"
+        }
+      ),
+      /* @__PURE__ */ o(
+        n,
         {
-          id: 1,
-          title: "Speed",
-          items: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
-            (p) => ({
-              name: p.toString(),
-              onClick: () => l(p),
-              icon: p === h ? "check" : "empty"
-            })
-          )
+          icon: /* @__PURE__ */ o(H, { type: "" }),
+          onClick: t.playNext,
+          children: "Play next"
         }
-      ],
-      [
-        t,
-        i,
-        a,
-        f,
-        l,
-        h
-      ]
-    );
-    return /* @__PURE__ */ o(Fr, { initialPanelId: 0, panels: m });
-  }
-), Hn = Z(
-  ({
-    playQueueStore: t,
-    button: e,
-    isOpen: n,
-    closePopover: i
-  }) => /* @__PURE__ */ o(
-    lt,
-    {
-      button: e,
-      isOpen: n,
-      closePopover: i,
-      panelPaddingSize: "none",
-      anchorPosition: "upRight",
-      children: /* @__PURE__ */ o(
-        qn,
+      ),
+      /* @__PURE__ */ o(
+        n,
         {
-          playQueueStore: t,
-          closePopover: i
+          icon: /* @__PURE__ */ o(H, { type: ct }),
+          onClick: t.addToPlayQueue,
+          children: "Add to play queue"
         }
-      )
-    }
-  )
-), Gn = {
-  [R.Off]: tn,
-  [R.All]: en,
-  [R.One]: Qr
-}, Jn = Y(
-  ({
-    playerStore: t,
-    playQueueStore: e
-  }) => {
-    const n = ie(), i = $(async () => {
-      if (e.hasPreviousItem) {
-        const a = await n.getCurrentTime();
-        a === void 0 || a < 5 ? await e.previous() : await n.setCurrentTime(0);
-      } else
-        await n.setCurrentTime(0);
-    }, [e, n]);
-    return /* @__PURE__ */ F(
-      me,
-      {
-        responsive: !1,
-        gutterSize: "s",
-        justifyContent: "center",
-        alignItems: "center",
-        children: [
-          /* @__PURE__ */ o(
-            K,
-            {
-              title: `Shuffle: ${e.shuffle ? "On" : "Off"}`,
-              "aria-label": `Shuffle: ${e.shuffle ? "On" : "Off"}`,
-              iconType: e.shuffle ? rn : nn,
-              size: "s",
-              iconSize: "l",
-              onClick: e.toggleShuffle,
-              disabled: !0
-            }
-          ),
-          /* @__PURE__ */ o(
-            K,
-            {
-              title: "Previous",
-              "aria-label": "Previous",
-              iconType: on,
-              size: "s",
-              iconSize: "l",
-              onClick: i,
-              disabled: e.isEmpty
-            }
-          ),
-          t.playing ? /* @__PURE__ */ o(
-            K,
-            {
-              title: "Pause",
-              "aria-label": "Pause",
-              iconType: an,
-              size: "s",
-              iconSize: "l",
-              onClick: () => n.pause(),
-              disabled: !e.canPlay
-            }
-          ) : /* @__PURE__ */ o(
-            K,
-            {
-              title: "Play",
-              "aria-label": "Play",
-              iconType: sn,
-              size: "s",
-              iconSize: "l",
-              onClick: () => n.play(),
-              disabled: !e.canPlay
-            }
-          ),
-          /* @__PURE__ */ o(
-            K,
-            {
-              title: "Next",
-              "aria-label": "Next",
-              iconType: ln,
-              size: "s",
-              iconSize: "l",
-              onClick: e.next,
-              disabled: !e.hasNextItem
-            }
-          ),
-          /* @__PURE__ */ o(
-            K,
-            {
-              title: `Repeat: ${e.repeat === R.All ? "All" : e.repeat === R.One ? "One" : "Off"}`,
-              "aria-label": `Repeat: ${e.repeat === R.All ? "All" : e.repeat === R.One ? "One" : "Off"}`,
-              iconType: Gn[e.repeat],
-              size: "s",
-              iconSize: "l",
-              onClick: e.toggleRepeat
-            }
-          )
-        ]
-      }
-    );
-  }
-), Kn = Z(() => {
-  const [t, e] = q(!1);
-  return /* @__PURE__ */ o(
-    Un,
-    {
-      button: /* @__PURE__ */ o(
-        K,
+      ),
+      /* @__PURE__ */ o(Pt, { margin: "none" }),
+      /* @__PURE__ */ o(
+        n,
         {
-          title: "Volume",
-          "aria-label": "Volume",
-          iconType: Ut,
-          size: "s",
-          iconSize: "l",
-          onClick: () => e(!t)
+          icon: /* @__PURE__ */ o(H, { type: en }),
+          onClick: t.moveToTop,
+          disabled: !t.canMoveToTop,
+          children: "Move to the top"
         }
       ),
-      isOpen: t,
-      closePopover: () => e(!1)
-    }
-  );
-}), Xn = Z(
-  ({ playQueueStore: t }) => {
-    const [e, n] = q(!1);
+      /* @__PURE__ */ o(
+        n,
+        {
+          icon: /* @__PURE__ */ o(H, { type: tn }),
+          onClick: t.moveToBottom,
+          disabled: !t.canMoveToBottom,
+          children: "Move to the bottom"
+        }
+      ),
+      /* @__PURE__ */ o(Pt, { margin: "none" }),
+      /* @__PURE__ */ o(
+        n,
+        {
+          icon: /* @__PURE__ */ o(H, { type: "" }),
+          onClick: t.removeToTop,
+          disabled: !t.canRemoveToTop,
+          children: "Remove to the top"
+        }
+      ),
+      /* @__PURE__ */ o(
+        n,
+        {
+          icon: /* @__PURE__ */ o(H, { type: "" }),
+          onClick: t.removeOthers,
+          disabled: !t.canRemoveOthers,
+          children: "Remove others"
+        }
+      )
+    ] });
+  }
+), Jn = Z(
+  ({ item: t }) => {
+    const [e, n] = q(!1), i = $(() => n(!e), [e]), a = $(() => n(!1), []);
     return /* @__PURE__ */ o(
-      Hn,
+      lt,
       {
-        playQueueStore: t,
         button: /* @__PURE__ */ o(
           K,
           {
@@ -1480,324 +1385,52 @@ const Zt = 80, Wn = Y(
             "aria-label": "More options",
             iconType: qt,
             size: "s",
-            iconSize: "l",
-            onClick: () => n(!e)
+            color: "text",
+            onClick: i
           }
         ),
         isOpen: e,
-        closePopover: () => n(!1)
+        closePopover: a,
+        panelPaddingSize: "none",
+        anchorPosition: "leftCenter",
+        children: /* @__PURE__ */ o(
+          Gn,
+          {
+            item: t,
+            closePopover: a
+          }
+        )
       }
     );
   }
-), Zn = Z(
-  ({ playQueueStore: t }) => /* @__PURE__ */ F(
-    me,
-    {
-      responsive: !1,
-      gutterSize: "s",
-      justifyContent: "flexEnd",
-      alignItems: "center",
-      children: [
-        /* @__PURE__ */ o(Kn, {}),
-        /* @__PURE__ */ o(Xn, { playQueueStore: t })
-      ]
-    }
-  )
-), wi = Y(
-  ({ playerStore: t, playQueueStore: e }) => /* @__PURE__ */ o(Mr, { paddingSize: "s", children: /* @__PURE__ */ F(me, { direction: "column", gutterSize: "none", children: [
-    /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(
-      Wn,
-      {
-        playerStore: t,
-        playQueueStore: e
-      }
-    ) }),
-    /* @__PURE__ */ o(G, { children: /* @__PURE__ */ F(me, { responsive: !1, children: [
-      /* @__PURE__ */ o(G, { css: { width: "calc(100% / 3)" } }),
-      /* @__PURE__ */ o(G, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
-        Jn,
+), Kn = Y(
+  ({ item: t }) => {
+    const e = ie();
+    return /* @__PURE__ */ F(rt, { textOnly: !1, hasActions: !0, align: "right", children: [
+      /* @__PURE__ */ o(
+        ne,
         {
-          playerStore: t,
-          playQueueStore: e
-        }
-      ) }),
-      /* @__PURE__ */ o(G, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
-        Zn,
-        {
-          playQueueStore: e
-        }
-      ) })
-    ] }) })
-  ] }) })
-), Qn = ({
-  onCancel: t,
-  onSave: e
-}) => {
-  const [n, i] = q(""), [a, l] = q(""), [f, h] = q(!1);
-  return /* @__PURE__ */ F(Vr, { onClose: t, initialFocus: "[name=url]", children: [
-    /* @__PURE__ */ o(Nr, { children: /* @__PURE__ */ o(jr, { children: "Add video" }) }),
-    /* @__PURE__ */ o(Dr, { children: /* @__PURE__ */ F($r, { component: "form", children: [
-      /* @__PURE__ */ o(tt, { label: "URL", children: /* @__PURE__ */ o(
-        It,
-        {
-          name: "url",
-          value: n,
-          onChange: (m) => i(m.target.value)
-        }
-      ) }),
-      /* @__PURE__ */ o(tt, { label: "Title", children: /* @__PURE__ */ o(
-        It,
-        {
-          name: "title",
-          value: a,
-          onChange: (m) => l(m.target.value)
-        }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ F(zr, { children: [
-      /* @__PURE__ */ o(Lr, { onClick: t, children: "Cancel" }),
-      /* @__PURE__ */ o(
-        ne,
-        {
-          type: "submit",
-          onClick: async () => {
-            try {
-              h(!0), await e({ url: n, title: a });
-            } finally {
-              h(!1);
-            }
-          },
-          fill: !0,
-          disabled: n.trim().length === 0,
-          isLoading: f,
-          children: "Save"
-        }
-      )
-    ] })
-  ] });
-};
-function ei(t) {
-  return t !== null && typeof t == "object" && "title" in t && typeof t.title == "string";
-}
-const Qt = Z(
-  ({ playQueueStore: t }) => {
-    const [e, n] = q(!1), i = $(
-      async (a) => {
-        const l = Ar(a.url);
-        if (l !== void 0) {
-          const f = l.extractVideoId(a.url);
-          if (f !== void 0) {
-            const m = await (await fetch(
-              `https://noembed.com/embed?url=${encodeURIComponent(
-                a.url
-              )}`
-            )).json();
-            await t.addItems([
-              t.createItem({
-                url: a.url,
-                type: l.type,
-                videoId: f,
-                title: a.title || (ei(m) ? m.title : f)
-              })
-            ]);
-          }
-        }
-        n(!1);
-      },
-      [t]
-    );
-    return /* @__PURE__ */ F(Le, { children: [
-      /* @__PURE__ */ o(
-        ne,
-        {
-          onClick: () => n(!0),
-          iconType: ut,
-          color: "primary",
-          children: "Add video"
-        }
-      ),
-      e && /* @__PURE__ */ o(
-        Qn,
-        {
-          onCancel: () => n(!1),
-          onSave: i
-        }
-      )
-    ] });
-  }
-), ti = Y(
-  ({ playQueueStore: t }) => {
-    const { euiTheme: e } = Yt();
-    return /* @__PURE__ */ F(
-      Br,
-      {
-        style: {
-          position: "sticky",
-          top: 112,
-          zIndex: 998,
-          background: e.colors.backgroundBasePlain
-        },
-        children: [
-          /* @__PURE__ */ o(Yr, { children: /* @__PURE__ */ o(
-            Bt,
-            {
-              id: "",
-              checked: t.allItemsSelected,
-              onChange: (n) => {
-                t.allItemsSelected = n.target.checked;
-              }
-            }
-          ) }),
-          /* @__PURE__ */ o(Xe, { width: 24 }),
-          /* @__PURE__ */ o(Xe, { children: "Title" }),
-          /* @__PURE__ */ o(Xe, {})
-        ]
-      }
-    );
-  }
-), ri = Z(
-  ({
-    item: t,
-    closePopover: e
-  }) => {
-    const n = Z(
-      ({
-        onClick: i,
-        ...a
-      }) => {
-        const l = $(
-          (f) => {
-            e(), i == null || i(f);
-          },
-          [i]
-        );
-        return /* @__PURE__ */ o(Wr, { ...a, onClick: l });
-      }
-    );
-    return /* @__PURE__ */ F(Ur, { children: [
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: "" }),
-          onClick: t.playFirst,
-          children: "Play first"
-        }
-      ),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: "" }),
-          onClick: t.playNext,
-          children: "Play next"
-        }
-      ),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: ut }),
-          onClick: t.addToPlayQueue,
-          children: "Add to play queue"
-        }
-      ),
-      /* @__PURE__ */ o(Pt, { margin: "none" }),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: dn }),
-          onClick: t.moveToTop,
-          disabled: !t.canMoveToTop,
-          children: "Move to the top"
-        }
-      ),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: mn }),
-          onClick: t.moveToBottom,
-          disabled: !t.canMoveToBottom,
-          children: "Move to the bottom"
-        }
-      ),
-      /* @__PURE__ */ o(Pt, { margin: "none" }),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: "" }),
-          onClick: t.removeToTop,
-          disabled: !t.canRemoveToTop,
-          children: "Remove to the top"
-        }
-      ),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: "" }),
-          onClick: t.removeOthers,
-          disabled: !t.canRemoveOthers,
-          children: "Remove others"
-        }
-      )
-    ] });
-  }
-), ni = Z(
-  ({ item: t }) => {
-    const [e, n] = q(!1), i = $(() => n(!e), [e]), a = $(() => n(!1), []);
-    return /* @__PURE__ */ o(
-      lt,
-      {
-        button: /* @__PURE__ */ o(
-          K,
-          {
-            title: "More options",
-            "aria-label": "More options",
-            iconType: qt,
-            size: "s",
-            color: "text",
-            onClick: i
-          }
-        ),
-        isOpen: e,
-        closePopover: a,
-        panelPaddingSize: "none",
-        anchorPosition: "leftCenter",
-        children: /* @__PURE__ */ o(
-          ri,
-          {
-            item: t,
-            closePopover: a
-          }
-        )
-      }
-    );
-  }
-), ii = Y(
-  ({ item: t }) => {
-    const e = ie();
-    return /* @__PURE__ */ F(rt, { textOnly: !1, hasActions: !0, align: "right", children: [
-      /* @__PURE__ */ o(
-        ne,
-        {
-          iconType: hn,
-          size: "s",
-          onClick: async () => {
-            t.isCurrent ? await e.setCurrentTime(0) : t.play();
-          },
-          children: "Play"
+          iconType: Qr,
+          size: "s",
+          onClick: async () => {
+            t.isCurrent ? await e.setCurrentTime(0) : t.play();
+          },
+          children: "Play"
         }
       ),
       /* @__PURE__ */ o(
         ne,
         {
-          iconType: ct,
+          iconType: ut,
           size: "s",
           onClick: t.remove,
           children: "Remove"
         }
       ),
-      /* @__PURE__ */ o(ni, { item: t })
+      /* @__PURE__ */ o(Jn, { item: t })
     ] });
   }
-), oi = {
+), Xn = {
   Audio: "",
   Dailymotion: "https://www.dailymotion.com/favicon.ico",
   Niconico: "https://www.nicovideo.jp/favicon.ico",
@@ -1805,11 +1438,11 @@ const Qt = Z(
   Twitch: "https://www.twitch.tv/favicon.ico",
   Vimeo: "https://vimeo.com/favicon.ico",
   YouTube: "https://www.youtube.com/favicon.ico"
-}, ai = Y(
+}, Zn = Y(
   ({ item: t }) => {
     const e = ie();
-    return /* @__PURE__ */ F(Gr, { isSelected: t.isCurrent, children: [
-      /* @__PURE__ */ o(qr, { children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ F(qr, { isSelected: t.isCurrent, children: [
+      /* @__PURE__ */ o(Wr, { children: /* @__PURE__ */ o(
         Bt,
         {
           id: t.id.toString(),
@@ -1820,14 +1453,14 @@ const Qt = Z(
       /* @__PURE__ */ o(rt, { textOnly: !1, children: /* @__PURE__ */ o(
         "img",
         {
-          src: oi[t.type],
+          src: Xn[t.type],
           width: 16,
           height: 16,
           alt: t.type
         }
       ) }),
       /* @__PURE__ */ o(rt, { children: /* @__PURE__ */ o(
-        Hr,
+        Ur,
         {
           href: t.url,
           target: "_blank",
@@ -1836,36 +1469,37 @@ const Qt = Z(
           children: t.title
         }
       ) }),
-      /* @__PURE__ */ o(ii, { item: t })
+      /* @__PURE__ */ o(Kn, { item: t })
     ] }, t.id);
   }
-), si = Y(
+), Qn = Y(
   ({ playQueueStore: t }) => /* @__PURE__ */ o(
-    pn,
+    bn,
     {
       tag: "tbody",
       list: t.items,
       setList: (e) => t.setItems(e),
-      children: t.items.map((e) => /* @__PURE__ */ o(ai, { item: e }, e.id))
+      children: t.items.map((e) => /* @__PURE__ */ o(Zn, { item: e }, e.id))
     }
   )
-), li = Y(
-  ({ playQueueStore: t }) => /* @__PURE__ */ F(Jr, { children: [
-    /* @__PURE__ */ o(ti, { playQueueStore: t }),
-    /* @__PURE__ */ o(si, { playQueueStore: t })
+), ei = Y(
+  ({ playQueueStore: t }) => /* @__PURE__ */ F(Hr, { children: [
+    /* @__PURE__ */ o(Hn, { playQueueStore: t }),
+    /* @__PURE__ */ o(Qn, { playQueueStore: t })
   ] })
-), ci = Y(
+);
+Y(
   ({ playQueueStore: t }) => {
     const [e, n] = q(!1);
     return /* @__PURE__ */ F(Le, { children: [
       e && /* @__PURE__ */ o(
-        Xr,
+        Jr,
         {
           type: "push",
           size: "s",
           onClose: () => n(!1),
           children: /* @__PURE__ */ o("div", { style: { blockSize: "100%" }, children: /* @__PURE__ */ o(
-            Kr,
+            Gr,
             {
               language: "json",
               overflowHeight: "100%",
@@ -1880,12 +1514,20 @@ const Qt = Z(
           ) })
         }
       ),
-      /* @__PURE__ */ o(Qt, { playQueueStore: t })
+      /* @__PURE__ */ o(
+        ne,
+        {
+          onClick: () => n((i) => !i),
+          iconType: rn,
+          children: "Developer tools"
+        }
+      )
     ] });
   }
-), ui = Y(
-  ({ playerStore: t, playQueueStore: e }) => {
-    const { euiTheme: n } = Yt();
+);
+const ti = Y(
+  ({ playQueueStore: t }) => {
+    const { euiTheme: e } = Yt();
     return /* @__PURE__ */ F(Le, { children: [
       /* @__PURE__ */ F(
         me,
@@ -1896,46 +1538,49 @@ const Qt = Z(
             position: "sticky",
             top: 48,
             zIndex: 998,
-            background: n.colors.backgroundBasePlain
+            background: e.colors.backgroundBasePlain
           },
           children: [
             /* @__PURE__ */ o(G, { grow: !1, children: /* @__PURE__ */ o(
               ne,
               {
-                disabled: e.isEmpty || e.selectedItems.length === 0,
-                onClick: e.playSelectedItemsNext,
+                disabled: t.isEmpty || t.selectedItems.length === 0,
+                onClick: t.playSelectedItemsNext,
                 children: "Play next"
               }
             ) }),
             /* @__PURE__ */ o(G, { grow: !1, children: /* @__PURE__ */ o(
               ne,
               {
-                iconType: ut,
-                onClick: e.addSelectedItems,
-                disabled: e.isEmpty || e.selectedItems.length === 0,
+                iconType: ct,
+                onClick: t.addSelectedItems,
+                disabled: t.isEmpty || t.selectedItems.length === 0,
                 children: "Add to play queue"
               }
             ) }),
             /* @__PURE__ */ o(G, { grow: !1, children: /* @__PURE__ */ o(
               ne,
               {
-                iconType: ct,
-                onClick: e.removeSelectedItems,
-                disabled: e.isEmpty || e.selectedItems.length === 0,
+                iconType: ut,
+                onClick: t.removeSelectedItems,
+                disabled: t.isEmpty || t.selectedItems.length === 0,
                 children: "Remove"
               }
             ) }),
             /* @__PURE__ */ o(G, { grow: !1, children: /* @__PURE__ */ o(
               ne,
               {
-                iconType: vn,
-                onClick: e.clear,
-                disabled: e.isEmpty,
+                iconType: nn,
+                onClick: t.clear,
+                disabled: t.isEmpty,
                 children: "Clear"
               }
             ) }),
             /* @__PURE__ */ o(G, { grow: !0 }),
-            /* @__PURE__ */ o(G, { grow: !1, children: /* @__PURE__ */ o(ci, { playQueueStore: e }) })
+            /* @__PURE__ */ F(G, { grow: !1, children: [
+              !1,
+              /* @__PURE__ */ o(Dt, { playQueueStore: t })
+            ] })
           ]
         }
       ),
@@ -1947,22 +1592,22 @@ const Qt = Z(
             position: "sticky",
             top: 88,
             zIndex: 998,
-            background: n.colors.backgroundBasePlain
+            background: e.colors.backgroundBasePlain
           }
         }
       ),
-      e.isEmpty ? /* @__PURE__ */ o(
-        Zr,
+      t.isEmpty ? /* @__PURE__ */ o(
+        Kr,
         {
           title: /* @__PURE__ */ o("h2", { children: "We couldn't find any videos" }),
           body: /* @__PURE__ */ o("p", { children: "Your video library doesn't contain any video content." }),
-          actions: /* @__PURE__ */ o(Qt, { playQueueStore: e })
+          actions: /* @__PURE__ */ o(Dt, { playQueueStore: t })
         }
-      ) : /* @__PURE__ */ o(li, { playQueueStore: e })
+      ) : /* @__PURE__ */ o(ei, { playQueueStore: t })
     ] });
   }
 ), Oi = Y(
-  ({ playerStore: t, playQueueStore: e }) => /* @__PURE__ */ F(Le, { children: [
+  ({ playQueueStore: t }) => /* @__PURE__ */ F(Le, { children: [
     /* @__PURE__ */ o(
       nt.Header,
       {
@@ -1970,87 +1615,72 @@ const Qt = Z(
         rightSideItems: []
       }
     ),
-    /* @__PURE__ */ o(nt.Section, { children: /* @__PURE__ */ o(
-      ui,
-      {
-        playerStore: t,
-        playQueueStore: e
-      }
-    ) })
+    /* @__PURE__ */ o(nt.Section, { children: /* @__PURE__ */ o(ti, { playQueueStore: t }) })
   ] })
-), ot = {
-  width: 16 * 25,
-  height: 9 * 25
-}, _i = Y(
-  ({ playerStore: t, playQueueStore: e }) => {
-    const n = ie(), i = $(async () => {
-      e.interacted && await n.play();
-    }, [e, n]), a = $(async () => {
-      switch (e.repeat) {
-        case R.One:
-          await n.setCurrentTime(0);
-          break;
-        case R.Off:
-        case R.All:
-          if (e.isLastItem)
-            switch (e.repeat) {
-              case R.Off:
-                t.onEnded();
-                break;
-              case R.All:
-                e.hasMultipleItems ? await e.goToFirst() : await n.setCurrentTime(0);
-                break;
-            }
-          else
-            await e.next();
-          break;
-      }
-    }, [e, t, n]), l = zt(
-      () => ({
-        onLoaded: i,
-        onPlay: t.onPlay,
-        onPause: t.onPause,
-        onEnded: a,
-        onTimeUpdate: t.onTimeUpdate
-      }),
-      [t, i, a]
-    );
-    return /* @__PURE__ */ o(
-      "div",
-      {
-        css: {
-          position: "fixed",
-          right: 0,
-          bottom: Zt,
-          width: ot.width,
-          height: ot.height,
-          zIndex: 998,
-          backgroundColor: "rgb(39, 39, 39)",
-          display: "flex",
-          flexDirection: "column"
-        },
-        children: /* @__PURE__ */ o("div", { css: { flexGrow: 1, backgroundColor: "black" }, children: e.currentItem && /* @__PURE__ */ o(
-          kr,
-          {
-            src: e.currentItem.url,
-            options: l
-          }
-        ) })
-      }
+), et = new En({
+  coerceTypes: !0
+});
+function ri(t, e) {
+  let n;
+  if (n = et.getSchema(e), n === void 0 && (et.addSchema(t, e), n = et.getSchema(e)), n === void 0 || n.schema !== t)
+    throw new Error(
+      `Invalid schema. Expected: '${JSON.stringify(
+        t
+      )}', but got '${JSON.stringify(n == null ? void 0 : n.schema)}'.`
     );
-  }
-);
-class er {
-  makeObservable(e, n) {
-    return yn(e, n);
-  }
+  return n;
 }
-const Ce = class Ce {
+const ni = {
+  type: "object",
+  properties: {
+    url: {
+      type: "string"
+    },
+    type: {
+      type: "string"
+    },
+    videoId: {
+      type: "string"
+    },
+    title: {
+      type: "string"
+    }
+  },
+  required: ["url", "type", "videoId", "title"]
+};
+var R = /* @__PURE__ */ ((t) => (t.Off = "Off", t.All = "All", t.One = "One", t))(R || {});
+const ii = {
+  type: "object",
+  properties: {
+    version: {
+      type: "string",
+      nullable: !0
+    },
+    repeat: {
+      type: "string",
+      enum: Object.values(R),
+      nullable: !0
+    },
+    shuffle: {
+      type: "boolean",
+      nullable: !0
+    },
+    items: {
+      type: "array",
+      nullable: !0,
+      items: ni
+    },
+    currentIndex: {
+      type: "integer",
+      nullable: !0
+    }
+  }
+}, Ce = class Ce {
   constructor(e, n, i) {
     U(this, "id");
     U(this, "isSelected", !1);
     this.observableStateProvider = e, this.playQueueStore = n, this.dto = i, this.id = Ce.nextId++, e.makeObservable(this, {
-      isSelected: re,
+      isSelected: te,
       isCurrent: _,
       index: _,
       isFirst: _,
@@ -2156,68 +1786,8 @@ const Ce = class Ce {
   }
 };
 U(Ce, "nextId", 1);
-let at = Ce;
-const et = new bn({
-  coerceTypes: !0
-});
-function fi(t, e) {
-  let n;
-  if (n = et.getSchema(e), n === void 0 && (et.addSchema(t, e), n = et.getSchema(e)), n === void 0 || n.schema !== t)
-    throw new Error(
-      `Invalid schema. Expected: '${JSON.stringify(
-        t
-      )}', but got '${JSON.stringify(n == null ? void 0 : n.schema)}'.`
-    );
-  return n;
-}
-const di = {
-  type: "object",
-  properties: {
-    version: {
-      type: "string",
-      nullable: !0
-    },
-    repeat: {
-      type: "string",
-      enum: Object.values(R),
-      nullable: !0
-    },
-    shuffle: {
-      type: "boolean",
-      nullable: !0
-    },
-    items: {
-      type: "array",
-      nullable: !0,
-      items: {
-        type: "object",
-        properties: {
-          url: {
-            type: "string"
-          },
-          type: {
-            type: "string"
-          },
-          videoId: {
-            type: "string"
-          },
-          title: {
-            type: "string"
-          }
-        },
-        required: ["url", "type", "videoId", "title"]
-      }
-    },
-    currentIndex: {
-      type: "integer",
-      nullable: !0
-    }
-  }
-}, mi = fi(
-  di,
-  "PlayQueueStore"
-);
-class hi {
+let ot = Ce;
+class oi {
   constructor(e) {
     U(this, "interacted", !1);
     U(this, "items", []);
@@ -2225,11 +1795,11 @@ class hi {
     U(this, "repeat", R.Off);
     U(this, "shuffle", !1);
     this.observableStateProvider = e, e.makeObservable(this, {
-      interacted: re,
-      items: re,
-      currentId: re,
-      repeat: re,
-      shuffle: re,
+      interacted: te,
+      items: te,
+      currentId: te,
+      repeat: te,
+      shuffle: te,
       localStorageState: _.struct,
       isEmpty: _,
       currentItem: _,
@@ -2268,7 +1838,7 @@ class hi {
     });
   }
   createItem(e) {
-    return at.fromDto(
+    return ot.fromDto(
       this.observableStateProvider,
       this,
       e
@@ -2288,7 +1858,10 @@ class hi {
     this.repeat = e.repeat ?? R.Off, this.shuffle = e.shuffle ?? !1, this.items = ((n = e.items) == null ? void 0 : n.map((i) => this.createItem(i))) ?? [], this.currentIndex = e.currentIndex;
   }
   validateLocalStorageState(e) {
-    return mi(e);
+    return ri(
+      ii,
+      "PlayQueueDto"
+    )(e);
   }
   get isEmpty() {
     return this.items.length === 0;
@@ -2368,105 +1941,543 @@ class hi {
       this.selectedItemsOrAllItems.map((e) => e.clone())
     ), this.unselectAll();
   }
-  async addItems(e) {
-    if (this.isEmpty) {
-      this.clearAndSetItems(e);
-      return;
+  async addItems(e) {
+    if (this.isEmpty) {
+      this.clearAndSetItems(e);
+      return;
+    }
+    this.items.push(...e);
+  }
+  async addSelectedItems() {
+    await this.addItems(
+      this.selectedItemsOrAllItems.map((e) => e.clone())
+    ), this.unselectAll();
+  }
+  async playFirst(e) {
+    if (this.isEmpty) {
+      this.clearAndSetItems(e);
+      return;
+    }
+    const { currentIndex: n } = this;
+    n !== void 0 && (this.interact(), this.items.splice(n, 0, ...e), this.currentIndex = n);
+  }
+  moveItem(e, n) {
+    const i = this.items.splice(this.items.indexOf(e), 1)[0];
+    this.items.splice(n, 0, i);
+  }
+  async removeItems(e) {
+    const { currentItem: n } = this;
+    Rt(this.items, ...e.filter((l) => l !== n));
+    const { currentIndex: i, isLastItem: a } = this;
+    Rt(
+      this.items,
+      e.find((l) => l === n)
+    ), this.currentItem !== n && (this.interact(), a ? await this.goToFirst() : this.currentIndex = i);
+  }
+  async removeSelectedItems() {
+    await this.removeItems(this.selectedItemsOrAllItems), this.unselectAll();
+  }
+  async removeOtherItems(e) {
+    const n = e.id;
+    return this.removeItems(
+      this.items.filter((i) => i.id !== n)
+    );
+  }
+  async removeItemsAbove(e) {
+    const n = this.items.indexOf(e);
+    return this.removeItems(
+      this.items.filter((i, a) => a < n)
+    );
+  }
+  toggleRepeat() {
+    switch (this.repeat) {
+      case R.Off:
+        this.repeat = R.All;
+        break;
+      case R.All:
+        this.repeat = R.One;
+        break;
+      case R.One:
+        this.repeat = R.Off;
+        break;
+    }
+  }
+  toggleShuffle() {
+    this.shuffle = !this.shuffle;
+  }
+  async previous() {
+    this.currentIndex !== void 0 && this.hasPreviousItem && (this.interact(), this.currentIndex--);
+  }
+  async next() {
+    this.currentIndex !== void 0 && this.hasNextItem && (this.interact(), this.currentIndex++);
+  }
+  async goToFirst() {
+    this.currentIndex !== void 0 && (this.currentIndex = 0);
+  }
+}
+const er = Lt(void 0), _i = ({
+  children: t
+}) => {
+  const [e] = q(
+    () => new oi(new Gt())
+  ), n = ie();
+  return _r(() => wr(
+    () => e.currentItem,
+    async (i, a) => {
+      i === void 0 || a === void 0 || i.type === a.type && i.videoId === a.videoId && await n.setCurrentTime(0);
+    }
+  ), [e, n]), /* @__PURE__ */ o(er.Provider, { value: e, children: t });
+}, ai = () => st(er), tr = 81, si = Y(
+  ({ playerStore: t, playQueueStore: e }) => {
+    const n = ie(), i = $(
+      (f) => {
+        const h = Number(f.currentTarget.value) / 100;
+        t.setPercent(h);
+      },
+      [t]
+    ), a = $(
+      (f) => {
+        f.button === 0 && t.setSeeking(!0);
+      },
+      [t]
+    ), l = $(
+      async (f) => {
+        if (f.button === 0) {
+          const h = Number(f.currentTarget.value) / 100;
+          t.setSeeking(!1);
+          const m = await n.getDuration();
+          m !== void 0 && await n.setCurrentTime(m * h);
+        }
+      },
+      [t, n]
+    );
+    return /* @__PURE__ */ o(
+      Ut,
+      {
+        min: 0,
+        max: 100,
+        step: 1e-7,
+        value: t.percent * 100,
+        onChange: i,
+        onMouseDown: a,
+        onMouseUp: l,
+        fullWidth: !0,
+        showRange: !0,
+        css: { blockSize: 32 },
+        disabled: e.isEmpty
+      }
+    );
+  }
+), li = Z(
+  ({ button: t, isOpen: e, closePopover: n }) => {
+    const [i, a] = q("0"), l = ie();
+    Ar(() => {
+      e && l.getVolume().then((h) => {
+        h !== void 0 && a(Math.floor(h * 100).toString());
+      });
+    }, [e, l]);
+    const f = $(
+      async (h) => {
+        a(h.currentTarget.value), await l.setVolume(Number(h.currentTarget.value) / 100);
+      },
+      [l]
+    );
+    return /* @__PURE__ */ o(
+      lt,
+      {
+        button: t,
+        isOpen: e,
+        closePopover: n,
+        anchorPosition: "upRight",
+        children: /* @__PURE__ */ o(tt, { children: /* @__PURE__ */ F(
+          me,
+          {
+            responsive: !1,
+            gutterSize: "s",
+            justifyContent: "center",
+            alignItems: "center",
+            children: [
+              /* @__PURE__ */ o(
+                K,
+                {
+                  title: "Mute",
+                  "aria-label": "Mute",
+                  iconType: Ht,
+                  size: "s",
+                  iconSize: "l"
+                }
+              ),
+              /* @__PURE__ */ o(
+                Ut,
+                {
+                  min: 0,
+                  max: 100,
+                  step: 1,
+                  value: i,
+                  onChange: f,
+                  css: { blockSize: 32 }
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    );
+  }
+), ci = Z(
+  ({
+    playQueueStore: t,
+    closePopover: e
+  }) => {
+    const n = ie(), i = $(async () => {
+      const p = await n.getCurrentTime();
+      p !== void 0 && await n.setCurrentTime(p - 10), e();
+    }, [n, e]), a = $(async () => {
+      const p = await n.getCurrentTime();
+      p !== void 0 && await n.setCurrentTime(p + 30), e();
+    }, [n, e]), l = $(
+      async (p) => {
+        await n.setPlaybackRate(p), e();
+      },
+      [n, e]
+    ), f = $(async () => {
+      t.currentItem !== void 0 && await t.removeItems([
+        t.currentItem
+      ]), e();
+    }, [t, e]), [h] = q(), m = Vt(
+      () => [
+        {
+          id: 0,
+          items: [
+            {
+              name: "Speed",
+              icon: /* @__PURE__ */ o(H, { type: on, size: "m" }),
+              panel: 1
+            },
+            {
+              name: "Skip back 10 seconds",
+              icon: /* @__PURE__ */ o(H, { type: an, size: "m" }),
+              onClick: i,
+              disabled: t.isEmpty
+            },
+            {
+              name: "Skip forward 30 seconds",
+              icon: /* @__PURE__ */ o(H, { type: sn, size: "m" }),
+              onClick: a,
+              disabled: t.isEmpty
+            },
+            {
+              isSeparator: !0
+            },
+            {
+              name: "Remove from play queue",
+              icon: /* @__PURE__ */ o(H, { type: ut, size: "m" }),
+              onClick: f,
+              disabled: t.isEmpty
+            }
+          ]
+        },
+        {
+          id: 1,
+          title: "Speed",
+          items: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
+            (p) => ({
+              name: p.toString(),
+              onClick: () => l(p),
+              icon: p === h ? "check" : "empty"
+            })
+          )
+        }
+      ],
+      [
+        t,
+        i,
+        a,
+        f,
+        l,
+        h
+      ]
+    );
+    return /* @__PURE__ */ o(Xr, { initialPanelId: 0, panels: m });
+  }
+), ui = Z(
+  ({
+    playQueueStore: t,
+    button: e,
+    isOpen: n,
+    closePopover: i
+  }) => /* @__PURE__ */ o(
+    lt,
+    {
+      button: e,
+      isOpen: n,
+      closePopover: i,
+      panelPaddingSize: "none",
+      anchorPosition: "upRight",
+      children: /* @__PURE__ */ o(
+        ci,
+        {
+          playQueueStore: t,
+          closePopover: i
+        }
+      )
+    }
+  )
+), fi = {
+  [R.Off]: un,
+  [R.All]: cn,
+  [R.One]: ln
+}, di = Y(
+  ({
+    playerStore: t,
+    playQueueStore: e
+  }) => {
+    const n = ie(), i = $(async () => {
+      if (e.hasPreviousItem) {
+        const a = await n.getCurrentTime();
+        a === void 0 || a < 5 ? await e.previous() : await n.setCurrentTime(0);
+      } else
+        await n.setCurrentTime(0);
+    }, [e, n]);
+    return /* @__PURE__ */ F(
+      me,
+      {
+        responsive: !1,
+        gutterSize: "s",
+        justifyContent: "center",
+        alignItems: "center",
+        children: [
+          /* @__PURE__ */ o(
+            K,
+            {
+              title: `Shuffle: ${e.shuffle ? "On" : "Off"}`,
+              "aria-label": `Shuffle: ${e.shuffle ? "On" : "Off"}`,
+              iconType: e.shuffle ? fn : dn,
+              size: "s",
+              iconSize: "l",
+              onClick: e.toggleShuffle,
+              disabled: !0
+            }
+          ),
+          /* @__PURE__ */ o(
+            K,
+            {
+              title: "Previous",
+              "aria-label": "Previous",
+              iconType: mn,
+              size: "s",
+              iconSize: "l",
+              onClick: i,
+              disabled: e.isEmpty
+            }
+          ),
+          t.playing ? /* @__PURE__ */ o(
+            K,
+            {
+              title: "Pause",
+              "aria-label": "Pause",
+              iconType: hn,
+              size: "s",
+              iconSize: "l",
+              onClick: () => n.pause(),
+              disabled: !e.canPlay
+            }
+          ) : /* @__PURE__ */ o(
+            K,
+            {
+              title: "Play",
+              "aria-label": "Play",
+              iconType: vn,
+              size: "s",
+              iconSize: "l",
+              onClick: () => n.play(),
+              disabled: !e.canPlay
+            }
+          ),
+          /* @__PURE__ */ o(
+            K,
+            {
+              title: "Next",
+              "aria-label": "Next",
+              iconType: pn,
+              size: "s",
+              iconSize: "l",
+              onClick: e.next,
+              disabled: !e.hasNextItem
+            }
+          ),
+          /* @__PURE__ */ o(
+            K,
+            {
+              title: `Repeat: ${e.repeat === R.All ? "All" : e.repeat === R.One ? "One" : "Off"}`,
+              "aria-label": `Repeat: ${e.repeat === R.All ? "All" : e.repeat === R.One ? "One" : "Off"}`,
+              iconType: fi[e.repeat],
+              size: "s",
+              iconSize: "l",
+              onClick: e.toggleRepeat
+            }
+          )
+        ]
+      }
+    );
+  }
+), mi = Z(() => {
+  const [t, e] = q(!1);
+  return /* @__PURE__ */ o(
+    li,
+    {
+      button: /* @__PURE__ */ o(
+        K,
+        {
+          title: "Volume",
+          "aria-label": "Volume",
+          iconType: Ht,
+          size: "s",
+          iconSize: "l",
+          onClick: () => e(!t)
+        }
+      ),
+      isOpen: t,
+      closePopover: () => e(!1)
     }
-    this.items.push(...e);
-  }
-  async addSelectedItems() {
-    await this.addItems(
-      this.selectedItemsOrAllItems.map((e) => e.clone())
-    ), this.unselectAll();
+  );
+}), hi = Z(
+  ({ playQueueStore: t }) => {
+    const [e, n] = q(!1);
+    return /* @__PURE__ */ o(
+      ui,
+      {
+        playQueueStore: t,
+        button: /* @__PURE__ */ o(
+          K,
+          {
+            title: "More options",
+            "aria-label": "More options",
+            iconType: qt,
+            size: "s",
+            iconSize: "l",
+            onClick: () => n(!e)
+          }
+        ),
+        isOpen: e,
+        closePopover: () => n(!1)
+      }
+    );
   }
-  async playFirst(e) {
-    if (this.isEmpty) {
-      this.clearAndSetItems(e);
-      return;
+), vi = Z(
+  ({ playQueueStore: t }) => /* @__PURE__ */ F(
+    me,
+    {
+      responsive: !1,
+      gutterSize: "s",
+      justifyContent: "flexEnd",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ o(mi, {}),
+        /* @__PURE__ */ o(hi, { playQueueStore: t })
+      ]
     }
-    const { currentIndex: n } = this;
-    n !== void 0 && (this.interact(), this.items.splice(n, 0, ...e), this.currentIndex = n);
-  }
-  moveItem(e, n) {
-    const i = this.items.splice(this.items.indexOf(e), 1)[0];
-    this.items.splice(n, 0, i);
-  }
-  async removeItems(e) {
-    const { currentItem: n } = this;
-    Rt(this.items, ...e.filter((l) => l !== n));
-    const { currentIndex: i, isLastItem: a } = this;
-    Rt(
-      this.items,
-      e.find((l) => l === n)
-    ), this.currentItem !== n && (this.interact(), a ? await this.goToFirst() : this.currentIndex = i);
-  }
-  async removeSelectedItems() {
-    await this.removeItems(this.selectedItemsOrAllItems), this.unselectAll();
-  }
-  async removeOtherItems(e) {
-    const n = e.id;
-    return this.removeItems(
-      this.items.filter((i) => i.id !== n)
+  )
+), Ai = Y(
+  ({ playerStore: t, playQueueStore: e }) => /* @__PURE__ */ o(Zr, { paddingSize: "s", children: /* @__PURE__ */ F(me, { direction: "column", gutterSize: "none", children: [
+    /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(
+      si,
+      {
+        playerStore: t,
+        playQueueStore: e
+      }
+    ) }),
+    /* @__PURE__ */ o(G, { children: /* @__PURE__ */ F(me, { responsive: !1, children: [
+      /* @__PURE__ */ o(G, { css: { width: "calc(100% / 3)" } }),
+      /* @__PURE__ */ o(G, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
+        di,
+        {
+          playerStore: t,
+          playQueueStore: e
+        }
+      ) }),
+      /* @__PURE__ */ o(G, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
+        vi,
+        {
+          playQueueStore: e
+        }
+      ) })
+    ] }) })
+  ] }) })
+), at = {
+  width: 16 * 25,
+  height: 9 * 25
+}, ki = Y(
+  ({ playerStore: t, playQueueStore: e }) => {
+    const n = ie(), i = $(async () => {
+      e.interacted && await n.play();
+    }, [e, n]), a = $(async () => {
+      switch (e.repeat) {
+        case R.One:
+          await n.setCurrentTime(0);
+          break;
+        case R.Off:
+        case R.All:
+          if (e.isLastItem)
+            switch (e.repeat) {
+              case R.Off:
+                t.onEnded();
+                break;
+              case R.All:
+                e.hasMultipleItems ? await e.goToFirst() : await n.setCurrentTime(0);
+                break;
+            }
+          else
+            await e.next();
+          break;
+      }
+    }, [e, t, n]), l = Vt(
+      () => ({
+        onLoaded: i,
+        onPlay: t.onPlay,
+        onPause: t.onPause,
+        onEnded: a,
+        onTimeUpdate: t.onTimeUpdate
+      }),
+      [t, i, a]
     );
-  }
-  async removeItemsAbove(e) {
-    const n = this.items.indexOf(e);
-    return this.removeItems(
-      this.items.filter((i, a) => a < n)
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        css: {
+          position: "fixed",
+          right: 0,
+          bottom: tr,
+          width: at.width,
+          height: at.height,
+          zIndex: 998,
+          backgroundColor: "rgb(39, 39, 39)",
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: /* @__PURE__ */ o("div", { css: { flexGrow: 1, backgroundColor: "black" }, children: e.currentItem && /* @__PURE__ */ o(
+          gn,
+          {
+            src: e.currentItem.url,
+            options: l
+          }
+        ) })
+      }
     );
   }
-  toggleRepeat() {
-    switch (this.repeat) {
-      case R.Off:
-        this.repeat = R.All;
-        break;
-      case R.All:
-        this.repeat = R.One;
-        break;
-      case R.One:
-        this.repeat = R.Off;
-        break;
-    }
-  }
-  toggleShuffle() {
-    this.shuffle = !this.shuffle;
-  }
-  async previous() {
-    this.currentIndex !== void 0 && this.hasPreviousItem && (this.interact(), this.currentIndex--);
-  }
-  async next() {
-    this.currentIndex !== void 0 && this.hasNextItem && (this.interact(), this.currentIndex++);
-  }
-  async goToFirst() {
-    this.currentIndex !== void 0 && (this.currentIndex = 0);
-  }
-}
-const tr = Lt(void 0), Ai = ({
-  children: t
-}) => {
-  const [e] = q(
-    () => new hi(new er())
-  ), n = ie();
-  return Or(() => gn(
-    () => e.currentItem,
-    async (i, a) => {
-      i === void 0 || a === void 0 || i.type === a.type && i.videoId === a.videoId && await n.setCurrentTime(0);
-    }
-  ), [e, n]), /* @__PURE__ */ o(tr.Provider, { value: e, children: t });
-}, vi = () => st(tr), ki = Y(
+), Mi = Y(
   ({ children: t }) => {
-    const e = vi();
+    const e = ai();
     return /* @__PURE__ */ F(
       nt,
       {
         panelled: !0,
         style: {
-          minBlockSize: `max(460px, 100vh - ${Zt}px)`
+          minBlockSize: `max(460px, 100vh - ${tr}px)`
         },
         children: [
           t,
-          !e.isEmpty && /* @__PURE__ */ o(Wt, { style: { blockSize: ot.height } })
+          !e.isEmpty && /* @__PURE__ */ o(Wt, { style: { blockSize: at.height } })
         ]
       }
     );
@@ -2478,9 +2489,9 @@ class pi {
     U(this, "percent", 0);
     U(this, "seeking", !1);
     e.makeObservable(this, {
-      playing: re,
-      percent: re,
-      seeking: re,
+      playing: te,
+      percent: te,
+      seeking: te,
       setPlaying: y,
       setPercent: y,
       setSeeking: y,
@@ -2512,32 +2523,27 @@ class pi {
     e !== void 0 && (this.seeking || (this.percent = e));
   }
 }
-const rr = Lt(void 0), Mi = ({
+const rr = Lt(void 0), Fi = ({
   children: t
 }) => {
   const [e] = q(
-    () => new pi(new er())
+    () => new pi(new Gt())
   );
   return /* @__PURE__ */ o(rr.Provider, { value: e, children: t });
-}, Fi = () => st(rr);
-class ji {
-  makeObservable(e, n) {
-    return e;
-  }
-}
+}, ji = () => st(rr);
 export {
-  wi as BottomBar,
+  Ai as BottomBar,
   Oi as HydrangeanDiva,
-  ki as MediaPlayerLayout,
-  _i as MiniPlayer,
-  er as MobXObservableStateProvider,
-  ji as ObservableStateProvider,
-  Ai as PlayQueueStoreProvider,
-  Mi as PlayerStoreProvider,
+  Mi as MediaPlayerLayout,
+  ki as MiniPlayer,
+  Gt as MobXObservableStateProvider,
+  wi as ObservableStateProvider,
+  _i as PlayQueueStoreProvider,
+  Fi as PlayerStoreProvider,
   R as RepeatMode,
-  Zt as bottomBarHeight,
-  ot as miniPlayerSize,
-  vi as usePlayQueueStore,
-  Fi as usePlayerStore
+  tr as bottomBarHeight,
+  at as miniPlayerSize,
+  ai as usePlayQueueStore,
+  ji as usePlayerStore
 };
 //# sourceMappingURL=index.es.js.map