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

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 G, EuiPopover as lt, EuiIcon as H, EuiHorizontalRule as Pt, EuiTableHeaderCell as Xe, EuiCodeBlock as Gr, EuiFlyout as Jr, EuiFlexGroup as me, EuiFlexItem as J, 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, NavigationPlayRegular as yn } 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 gn, useNostalgicDiva as ie, NostalgicDiva as bn } from "@aigamo/nostalgic-diva";
+import { ReactSortable as En } from "react-sortablejs";
 import { pull as Rt } from "lodash-es";
-import bn from "ajv";
+import Tn from "ajv";
+class Gt {
+  makeObservable(e, n) {
+    return Rr(e, n);
+  }
+}
+class _i {
+  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 xn() {
   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 Sn() {
   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;
@@ -93,7 +103,7 @@ function Tn() {
     function Oe(r) {
       return r.displayName || "Context";
     }
-    function J(r) {
+    function K(r) {
       if (r == null)
         return null;
       if (typeof r.tag == "number" && I("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof r == "function")
@@ -126,11 +136,11 @@ function Tn() {
             return Ye(r, r.render, "ForwardRef");
           case P:
             var v = r.displayName || null;
-            return v !== null ? v : J(r.type) || "Memo";
+            return v !== null ? v : K(r.type) || "Memo";
           case D: {
             var T = r, C = T._payload, b = T._init;
             try {
-              return J(b(C));
+              return K(b(C));
             } catch {
               return null;
             }
@@ -487,7 +497,7 @@ function Tn() {
     function bt() {
       {
         if (He.current) {
-          var r = J(He.current.type);
+          var r = K(He.current.type);
           if (r)
             return `
 
@@ -522,7 +532,7 @@ Check the top-level render call using <` + u + ">.");
           return;
         Et[u] = !0;
         var v = "";
-        r && r._owner && r._owner !== He.current && (v = " It was passed a child from " + J(r._owner.type) + "."), fe(r), I('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', u, v), fe(null);
+        r && r._owner && r._owner !== He.current && (v = " It was passed a child from " + K(r._owner.type) + "."), fe(r), I('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', u, v), fe(null);
       }
     }
     function xt(r, s) {
@@ -559,11 +569,11 @@ Check the top-level render call using <` + u + ">.");
         else
           return;
         if (u) {
-          var v = J(s);
+          var v = K(s);
           nr(u, r.props, "prop", v, r);
         } else if (s.PropTypes !== void 0 && !Ge) {
           Ge = !0;
-          var T = J(s);
+          var T = K(s);
           I("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", T || "Unknown");
         }
         typeof s.getDefaultProps == "function" && !s.getDefaultProps.isReactClassApproved && I("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
@@ -591,7 +601,7 @@ Check the top-level render call using <` + u + ">.");
           var N = vr();
           N ? g += N : g += bt();
           var O;
-          r === null ? O = "null" : qe(r) ? O = "array" : r !== void 0 && r.$$typeof === e ? (O = "<" + (J(r.type) || "Unknown") + " />", g = " Did you accidentally export a JSX literal instead of a component?") : O = typeof r, I("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", O, g);
+          r === null ? O = "null" : qe(r) ? O = "array" : r !== void 0 && r.$$typeof === e ? (O = "<" + (K(r.type) || "Unknown") + " />", g = " Did you accidentally export a JSX literal instead of a component?") : O = typeof r, I("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", O, g);
         }
         var M = hr(r, s, u, T, C);
         if (M == null)
@@ -610,7 +620,7 @@ Check the top-level render call using <` + u + ">.");
               xt(W, r);
         }
         if (Te.call(s, "key")) {
-          var se = J(r), V = Object.keys(s).filter(function(Cr) {
+          var se = K(r), V = Object.keys(s).filter(function(Cr) {
             return Cr !== "key";
           }), Ke = V.length > 0 ? "{key: someKey, " + V.join(": ..., ") + ": ...}" : "{key: someKey}";
           if (!St[se + Ke]) {
@@ -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 Cn() {
+  return _t || (_t = 1, process.env.NODE_ENV === "production" ? $e.exports = xn() : $e.exports = Sn()), $e.exports;
 }
-var Ie = xn(), De = { exports: {} }, x = {};
+var Ie = Cn(), 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 In() {
   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 Pn() {
   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) {
@@ -764,7 +774,7 @@ function Cn() {
         }
       }
     }
-    var c = m, L = p, he = h, Re = f, we = e, Ve = E, Ye = i, Oe = A, J = j, ee = n, oe = l, _e = a, Ae = P, ve = !1;
+    var c = m, L = p, he = h, Re = f, we = e, Ve = E, Ye = i, Oe = A, K = j, ee = n, oe = l, _e = a, Ae = P, ve = !1;
     function ke(d) {
       return ve || (ve = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), pe(d) || w(d) === m;
     }
@@ -804,18 +814,18 @@ function Cn() {
     function Ue(d) {
       return w(d) === P;
     }
-    S.AsyncMode = c, S.ConcurrentMode = L, S.ContextConsumer = he, S.ContextProvider = Re, S.Element = we, S.ForwardRef = Ve, S.Fragment = Ye, S.Lazy = Oe, S.Memo = J, S.Portal = ee, S.Profiler = oe, S.StrictMode = _e, S.Suspense = Ae, S.isAsyncMode = ke, S.isConcurrentMode = pe, S.isContextConsumer = Me, S.isContextProvider = Fe, S.isElement = je, S.isForwardRef = Be, S.isFragment = We, S.isLazy = ye, S.isMemo = ge, S.isPortal = le, S.isProfiler = be, S.isStrictMode = ce, S.isSuspense = Ue, S.isValidElementType = k, S.typeOf = w;
+    S.AsyncMode = c, S.ConcurrentMode = L, S.ContextConsumer = he, S.ContextProvider = Re, S.Element = we, S.ForwardRef = Ve, S.Fragment = Ye, S.Lazy = Oe, S.Memo = K, S.Portal = ee, S.Profiler = oe, S.StrictMode = _e, S.Suspense = Ae, S.isAsyncMode = ke, S.isConcurrentMode = pe, S.isContextConsumer = Me, S.isContextProvider = Fe, S.isElement = je, S.isForwardRef = Be, S.isFragment = We, S.isLazy = ye, S.isMemo = ge, S.isPortal = le, S.isProfiler = be, S.isStrictMode = ce, S.isSuspense = Ue, S.isValidElementType = k, S.typeOf = w;
   }()), S;
 }
 var Mt;
-function In() {
-  return Mt || (Mt = 1, process.env.NODE_ENV === "production" ? De.exports = Sn() : De.exports = Cn()), De.exports;
+function Rn() {
+  return Mt || (Mt = 1, process.env.NODE_ENV === "production" ? De.exports = In() : De.exports = Pn()), De.exports;
 }
 var Ze, Ft;
-function Pn() {
+function wn() {
   if (Ft) return Ze;
   Ft = 1;
-  var t = In(), e = {
+  var t = Rn(), 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) {
+wn();
+var On = !0;
+function _n(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);
+  On === !1) && e.registered[a] === void 0 && (e.registered[a] = n.styles);
+}, An = 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 kn(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 Mn = {
   animationIterationCount: 1,
   aspectRatio: 1,
   borderImageOutset: 1,
@@ -976,24 +986,24 @@ var An = {
   strokeOpacity: 1,
   strokeWidth: 1
 };
-function kn(t) {
+function Fn(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 jn = /[A-Z]|^ms/g, Nn = /_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__ */ Fn(function(t) {
+  return Kt(t) ? t : t.replace(jn, "-$&").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(Nn, 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 Mn[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 $n(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 $n(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 Dn(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,708 +1106,331 @@ 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 = kn(a) + p;
   return {
     name: P,
     styles: a,
     next: X
   };
 }
-var $n = function(e) {
+var zn = function(e) {
   return e();
-}, Dn = te.useInsertionEffect ? te.useInsertionEffect : !1, zn = Dn || $n, Jt = /* @__PURE__ */ te.createContext(
+}, Ln = re.useInsertionEffect ? re.useInsertionEffect : !1, Vn = Ln || zn, 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 Yn = 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) {
+}, Bn = /* @__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) {
+}, Wn = 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), Vn(function() {
+    return An(n, i, a);
   }), null;
-}, Bn = /* @__PURE__ */ Ln(function(t, e, n) {
+}, Un = /* @__PURE__ */ Yn(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 = _n(e.registered, l, t.className) : t.className != null && (f = t.className + " ");
+  var h = Dn(l, void 0, re.useContext(Bn));
   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(Wn, {
     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 = Un, 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 qn = ({
+  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 Hn(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 = gn(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 || (Hn(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(
+        qn,
+        {
+          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,
+), Gn = 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(
+), Jn = 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"
+        }
+      )
+    ] });
+  }
+), Kn = 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,
+          G,
           {
             title: "More options",
             "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(
+          Jn,
+          {
+            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,
+), Xn = Y(
+  ({ item: t }) => {
+    const e = ie();
+    return /* @__PURE__ */ F(rt, { textOnly: !1, hasActions: !0, align: "right", children: [
+      /* @__PURE__ */ o(
+        ne,
         {
-          playerStore: t,
-          playQueueStore: e
+          iconType: Qr,
+          size: "s",
+          onClick: async () => {
+            t.isCurrent ? await e.setCurrentTime(0) : t.play();
+          },
+          children: "Play"
         }
-      ) }),
-      /* @__PURE__ */ o(G, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
-        Zn,
+      ),
+      /* @__PURE__ */ o(
+        ne,
         {
-          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"
-        }
-      ),
-      /* @__PURE__ */ o(
-        ne,
-        {
-          iconType: ct,
-          size: "s",
-          onClick: t.remove,
-          children: "Remove"
+          iconType: ut,
+          size: "s",
+          onClick: t.remove,
+          children: "Remove"
         }
       ),
-      /* @__PURE__ */ o(ni, { item: t })
+      /* @__PURE__ */ o(Kn, { item: t })
     ] });
   }
-), oi = {
+), Zn = {
   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(
+}, Qn = 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: Zn[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(Xn, { item: t })
     ] }, t.id);
   }
-), si = Y(
+), ei = Y(
   ({ playQueueStore: t }) => /* @__PURE__ */ o(
-    pn,
+    En,
     {
       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(Qn, { item: e }, e.id))
     }
   )
-), li = Y(
-  ({ playQueueStore: t }) => /* @__PURE__ */ F(Jr, { children: [
-    /* @__PURE__ */ o(ti, { playQueueStore: t }),
-    /* @__PURE__ */ o(si, { playQueueStore: t })
+), ti = Y(
+  ({ playQueueStore: t }) => /* @__PURE__ */ F(Hr, { children: [
+    /* @__PURE__ */ o(Gn, { playQueueStore: t }),
+    /* @__PURE__ */ o(ei, { 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 ri = 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(
+            /* @__PURE__ */ o(J, { 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(
+            /* @__PURE__ */ o(J, { 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(
+            /* @__PURE__ */ o(J, { 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(
+            /* @__PURE__ */ o(J, { 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__ */ o(J, { grow: !0 }),
+            /* @__PURE__ */ F(J, { 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(ti, { playQueueStore: t })
     ] });
   }
-), Oi = Y(
-  ({ playerStore: t, playQueueStore: e }) => /* @__PURE__ */ F(Le, { children: [
+), Ai = Y(
+  ({ 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(ri, { 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 Tn({
+  coerceTypes: !0
+});
+function ni(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 ii = {
+  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 oi = {
+  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: ii
+    },
+    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 ai {
   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 ni(
+      oi,
+      "PlayQueueDto"
+    )(e);
   }
   get isEmpty() {
     return this.items.length === 0;
@@ -2368,119 +1941,583 @@ 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), ki = ({
+  children: t
+}) => {
+  const [e] = q(
+    () => new ai(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 });
+}, si = () => st(er), tr = 81, li = 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
+      }
+    );
+  }
+), ci = 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(
+                G,
+                {
+                  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 }
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    );
+  }
+), ui = 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 });
+  }
+), fi = 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(
+        ui,
+        {
+          playQueueStore: t,
+          closePopover: i
+        }
+      )
+    }
+  )
+), di = {
+  [R.Off]: un,
+  [R.All]: cn,
+  [R.One]: ln
+}, mi = 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(
+            G,
+            {
+              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(
+            G,
+            {
+              title: "Previous",
+              "aria-label": "Previous",
+              iconType: mn,
+              size: "s",
+              iconSize: "l",
+              onClick: i,
+              disabled: e.isEmpty
+            }
+          ),
+          t.playing ? /* @__PURE__ */ o(
+            G,
+            {
+              title: "Pause",
+              "aria-label": "Pause",
+              iconType: hn,
+              size: "s",
+              iconSize: "l",
+              onClick: () => n.pause(),
+              disabled: !e.canPlay
+            }
+          ) : /* @__PURE__ */ o(
+            G,
+            {
+              title: "Play",
+              "aria-label": "Play",
+              iconType: vn,
+              size: "s",
+              iconSize: "l",
+              onClick: () => n.play(),
+              disabled: !e.canPlay
+            }
+          ),
+          /* @__PURE__ */ o(
+            G,
+            {
+              title: "Next",
+              "aria-label": "Next",
+              iconType: pn,
+              size: "s",
+              iconSize: "l",
+              onClick: e.next,
+              disabled: !e.hasNextItem
+            }
+          ),
+          /* @__PURE__ */ o(
+            G,
+            {
+              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: di[e.repeat],
+              size: "s",
+              iconSize: "l",
+              onClick: e.toggleRepeat
+            }
+          )
+        ]
+      }
+    );
+  }
+), hi = Z(() => {
+  const [t, e] = q(!1);
+  return /* @__PURE__ */ o(
+    ci,
+    {
+      button: /* @__PURE__ */ o(
+        G,
+        {
+          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();
+  );
+}), vi = ({
+  onClickPlayQueueButton: t
+}) => /* @__PURE__ */ o(
+  G,
+  {
+    title: "Play queue",
+    "aria-label": "Play queue",
+    iconType: yn,
+    size: "s",
+    iconSize: "l",
+    onClick: t
+  }
+), pi = Z(
+  ({ playQueueStore: t }) => {
+    const [e, n] = q(!1);
+    return /* @__PURE__ */ o(
+      fi,
+      {
+        playQueueStore: t,
+        button: /* @__PURE__ */ o(
+          G,
+          {
+            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;
+), yi = Z(
+  ({
+    playQueueStore: t,
+    onClickPlayQueueButton: e
+  }) => /* @__PURE__ */ F(
+    me,
+    {
+      responsive: !1,
+      gutterSize: "s",
+      justifyContent: "flexEnd",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ o(hi, {}),
+        e && /* @__PURE__ */ o(
+          vi,
+          {
+            onClickPlayQueueButton: e
+          }
+        ),
+        /* @__PURE__ */ o(pi, { 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)
+  )
+), Mi = Y(
+  ({
+    playerStore: t,
+    playQueueStore: e,
+    onClickPlayQueueButton: n
+  }) => /* @__PURE__ */ o(Zr, { paddingSize: "s", children: /* @__PURE__ */ F(me, { direction: "column", gutterSize: "none", children: [
+    /* @__PURE__ */ o(J, { children: /* @__PURE__ */ o(
+      li,
+      {
+        playerStore: t,
+        playQueueStore: e
+      }
+    ) }),
+    /* @__PURE__ */ o(J, { children: /* @__PURE__ */ F(me, { responsive: !1, children: [
+      /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" } }),
+      /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
+        mi,
+        {
+          playerStore: t,
+          playQueueStore: e
+        }
+      ) }),
+      /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
+        yi,
+        {
+          playQueueStore: e,
+          onClickPlayQueueButton: n
+        }
+      ) })
+    ] }) })
+  ] }) })
+), at = {
+  width: 16 * 25,
+  height: 9 * 25
+}, Fi = 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(
+          bn,
+          {
+            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(
+), ji = Y(
   ({ children: t }) => {
-    const e = vi();
+    const e = si();
     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 } })
         ]
       }
     );
   }
 );
-class pi {
+class gi {
   constructor(e) {
     U(this, "playing", !1);
     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 +2549,27 @@ class pi {
     e !== void 0 && (this.seeking || (this.percent = e));
   }
 }
-const rr = Lt(void 0), Mi = ({
+const rr = Lt(void 0), Ni = ({
   children: t
 }) => {
   const [e] = q(
-    () => new pi(new er())
+    () => new gi(new Gt())
   );
   return /* @__PURE__ */ o(rr.Provider, { value: e, children: t });
-}, Fi = () => st(rr);
-class ji {
-  makeObservable(e, n) {
-    return e;
-  }
-}
+}, $i = () => st(rr);
 export {
-  wi 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 BottomBar,
+  Ai as HydrangeanDiva,
+  ji as MediaPlayerLayout,
+  Fi as MiniPlayer,
+  Gt as MobXObservableStateProvider,
+  _i as ObservableStateProvider,
+  ki as PlayQueueStoreProvider,
+  Ni as PlayerStoreProvider,
   R as RepeatMode,
-  Zt as bottomBarHeight,
-  ot as miniPlayerSize,
-  vi as usePlayQueueStore,
-  Fi as usePlayerStore
+  tr as bottomBarHeight,
+  at as miniPlayerSize,
+  si as usePlayQueueStore,
+  $i as usePlayerStore
 };
 //# sourceMappingURL=index.es.js.map