@aigamo/hydrangean-diva 0.0.1-alpha.64 → 0.0.1-alpha.66

package/dist/index.es.js

@@ -1,17 +1,17 @@
 import { jsx as o, Fragment as G, jsxs as m } from "@emotion/react/jsx-runtime";
-import { createContext as oe, useContext as re, useState as C, useEffect as yt, memo as D, useCallback as I, useMemo as J, useLayoutEffect as Ve } from "react";
-import gt from "ajv";
-import { computed as c, action as i, makeObservable as M, observable as R, reaction as vt } from "mobx";
+import { createContext as oe, useContext as re, useState as C, useEffect as Ve, memo as D, useCallback as I, useMemo as J, useLayoutEffect as gt } from "react";
+import vt from "ajv";
+import { computed as c, action as i, makeObservable as M, observable as R, reaction as He } from "mobx";
 import { useLocalStorageState as he } from "@aigamo/route-sphere";
 import { pull as pe } from "lodash-es";
 import { useNostalgicDiva as ne, nullPlayerController as ft, NostalgicDivaProvider as bt, NostalgicDiva as It, findVideoService as St } from "@aigamo/nostalgic-diva";
-import { EuiPageTemplate as se, EuiSpacer as ye, EuiButtonIcon as A, EuiFlexGroup as L, EuiHideFor as $, EuiIcon as h, EuiContextMenu as Y, EuiPopover as K, EuiButtonEmpty as ge, EuiFormRow as te, EuiRange as He, EuiBottomBar as Pt, EuiFlexItem as B, useGeneratedHtmlId as Ce, EuiModal as Te, EuiModalHeader as xe, EuiModalHeaderTitle as we, EuiModalBody as ke, EuiForm as Oe, EuiFieldText as me, EuiModalFooter as Be, EuiButton as O, useEuiTheme as ie, EuiShowFor as Ue, EuiTableHeaderMobile as qe, EuiCheckbox as W, EuiTableHeader as Ae, EuiTableHeaderCellCheckbox as Ge, EuiTableHeaderCell as U, EuiTableRowCell as q, EuiTableRow as Fe, EuiTableRowCellCheckbox as Je, EuiLink as Re, EuiTable as Me, EuiEmptyPrompt as Ct, EuiConfirmModal as Tt } from "@elastic/eui";
+import { EuiPageTemplate as se, EuiSpacer as ye, EuiButtonIcon as A, EuiFlexGroup as _, EuiHideFor as $, EuiIcon as h, EuiContextMenu as Y, EuiPopover as K, EuiButtonEmpty as ge, EuiFormRow as te, EuiRange as Ue, EuiBottomBar as Pt, EuiFlexItem as B, useGeneratedHtmlId as Ce, EuiModal as Te, EuiModalHeader as xe, EuiModalHeaderTitle as we, EuiModalBody as ke, EuiForm as Oe, EuiFieldText as me, EuiModalFooter as Be, EuiButton as O, useEuiTheme as ie, EuiShowFor as qe, EuiTableHeaderMobile as Ge, EuiCheckbox as W, EuiTableHeader as Ae, EuiTableHeaderCellCheckbox as Je, EuiTableHeaderCell as U, EuiTableRowCell as q, EuiTableRow as Fe, EuiTableRowCellCheckbox as Ke, EuiLink as Re, EuiTable as Me, EuiEmptyPrompt as Ct, EuiConfirmModal as Tt } from "@elastic/eui";
 import { observer as d } from "mobx-react-lite";
-import { ArrowShuffleFilled as Ke, ArrowShuffleOffFilled as We, PreviousFilled as xt, SkipBack10Regular as Ye, PauseFilled as wt, PlayFilled as kt, SkipForward30Regular as Xe, NextFilled as Ot, ArrowRepeat1Filled as Bt, ArrowRepeatAllFilled as At, ArrowRepeatAllOffFilled as Ft, OpenRegular as Rt, Speaker2Regular as Ze, TopSpeedRegular as Mt, DismissRegular as j, MoreHorizontalFilled as le, NavigationPlayRegular as Qt, AddRegular as V, DeleteRegular as Qe, PlayRegular as ae, ArrowUploadRegular as et, ArrowDownloadRegular as tt, RenameRegular as Dt } from "@fluentui/react-icons";
+import { ArrowShuffleFilled as We, ArrowShuffleOffFilled as Ye, PreviousFilled as xt, SkipBack10Regular as Xe, PauseFilled as wt, PlayFilled as kt, SkipForward30Regular as Ze, NextFilled as Ot, ArrowRepeat1Filled as Bt, ArrowRepeatAllFilled as At, ArrowRepeatAllOffFilled as Ft, OpenRegular as Rt, Speaker2Regular as et, TopSpeedRegular as Mt, DismissRegular as j, MoreHorizontalFilled as le, NavigationPlayRegular as Qt, AddRegular as V, DeleteRegular as Qe, PlayRegular as ae, ArrowUploadRegular as tt, ArrowDownloadRegular as ot, RenameRegular as Dt } from "@fluentui/react-icons";
 import H from "ez-modal-react";
 import { ReactSortable as De } from "react-sortablejs";
 import { useRouter as ze } from "@tanstack/react-router";
-const ot = 81, Ee = new Map(
+const rt = 81, Ee = new Map(
   Object.entries({
     Audio: "",
     Dailymotion: "https://www.dailymotion.com/favicon.ico",
@@ -32,7 +32,7 @@ const ot = 81, Ee = new Map(
   bottomBar: "BottomBarStore",
   playlistList: "PlaylistListStore",
   playlist: (t) => `PlaylistStore/${t}`
-}, rt = oe(void 0), F = () => re(rt), be = new gt({
+}, nt = oe(void 0), F = () => re(nt), be = new vt({
   coerceTypes: !0
 });
 function Ne(t, e) {
@@ -50,7 +50,7 @@ var b = /* @__PURE__ */ ((t) => (t.Off = "Off", t.All = "All", t.One = "One", t)
     (a = t[l]) && (n = (s ? a(e, r, n) : a(n)) || n);
   return s && n && Et(e, r, n), n;
 };
-const Lt = {
+const _t = {
   type: "object",
   properties: {
     repeat: {
@@ -64,7 +64,7 @@ const Lt = {
     }
   }
 };
-class nt {
+class st {
   constructor(e) {
     this.bottomBar = e, M(this);
   }
@@ -79,17 +79,17 @@ class nt {
   }
   validateState(e) {
     return Ne(
-      Lt,
+      _t,
       "BottomBarLocalStorageState"
     )(e);
   }
 }
 g([
   c.struct
-], nt.prototype, "state", 1);
+], st.prototype, "state", 1);
 class v {
   constructor(e, r) {
-    this.player = e, this.playQueue = r, M(this), this.localStorageState = new nt(this);
+    this.player = e, this.playQueue = r, M(this), this.localStorageState = new st(this);
   }
   localStorageState;
   repeat = b.Off;
@@ -267,16 +267,16 @@ g([
 g([
   i.bound
 ], v.prototype, "removeFromPlayQueue", 1);
-const st = oe(void 0), ce = () => re(st), it = oe(void 0), lt = () => re(it), _t = ({
+const it = oe(void 0), ce = () => re(it), lt = oe(void 0), at = () => re(lt), Lt = ({
   children: t
 }) => {
-  const e = lt(), r = ce(), [s] = C(() => new v(e, r));
+  const e = at(), r = ce(), [s] = C(() => new v(e, r));
   return he(
     ve.bottomBar,
     s.localStorageState
-  ), /* @__PURE__ */ o(rt.Provider, { value: s, children: t });
-}, at = oe(void 0), jt = () => re(at);
-var $t = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, _ = (t, e, r, s) => {
+  ), /* @__PURE__ */ o(nt.Provider, { value: s, children: t });
+}, ct = oe(void 0), jt = () => re(ct);
+var $t = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, L = (t, e, r, s) => {
   for (var n = s > 1 ? void 0 : s ? Vt(e, r) : e, l = t.length - 1, a; l >= 0; l--)
     (a = t[l]) && (n = (s ? a(e, r, n) : a(n)) || n);
   return s && n && $t(e, r, n), n;
@@ -332,44 +332,44 @@ class N {
     this.player.onControllerChange(e);
   }
 }
-_([
+L([
   R
 ], N.prototype, "interacted", 2);
-_([
+L([
   c
 ], N.prototype, "controller", 1);
-_([
+L([
   c
 ], N.prototype, "currentItem", 1);
-_([
+L([
   i.bound
 ], N.prototype, "interact", 1);
-_([
+L([
   i.bound
 ], N.prototype, "onLoaded", 1);
-_([
+L([
   i.bound
 ], N.prototype, "onPlay", 1);
-_([
+L([
   i.bound
 ], N.prototype, "onPause", 1);
-_([
+L([
   i.bound
 ], N.prototype, "onEnded", 1);
-_([
+L([
   i.bound
 ], N.prototype, "onTimeUpdate", 1);
-_([
+L([
   i.bound
 ], N.prototype, "onControllerChange", 1);
 const Ht = ({
   children: t
 }) => {
-  const e = lt(), r = ce(), s = F(), [n] = C(
+  const e = at(), r = ce(), s = F(), [n] = C(
     () => new N(e, r, s)
   );
-  return /* @__PURE__ */ o(at.Provider, { value: n, children: t });
-}, ct = {
+  return /* @__PURE__ */ o(ct.Provider, { value: n, children: t });
+}, dt = {
   type: "object",
   properties: {
     url: {
@@ -405,7 +405,7 @@ const Ht = ({
     items: {
       type: "array",
       nullable: !0,
-      items: ct
+      items: dt
     },
     currentIndex: {
       type: "integer",
@@ -573,7 +573,7 @@ var Kt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, u = (t, e,
     (a = t[l]) && (n = (s ? a(e, r, n) : a(n)) || n);
   return s && n && Kt(e, r, n), n;
 };
-class dt {
+class ut {
   constructor(e) {
     this.playQueue = e, M(this);
   }
@@ -595,13 +595,13 @@ class dt {
 }
 u([
   c.struct
-], dt.prototype, "state", 1);
+], ut.prototype, "state", 1);
 class p {
   localStorageState;
   items = [];
   currentId;
   constructor() {
-    M(this), this.localStorageState = new dt(this);
+    M(this), this.localStorageState = new ut(this);
   }
   createItemFromDto(e) {
     return Jt.fromDto(this, {
@@ -891,12 +891,12 @@ const Yt = ({
     e.localStorageState
   );
   const r = ne();
-  return yt(() => vt(
+  return Ve(() => He(
     () => e.currentItem,
     async (s, n) => {
       s === void 0 || n === void 0 || s.type === n.type && s.videoId === n.videoId && await r.setCurrentTime(0);
     }
-  ), [e, r]), /* @__PURE__ */ o(st.Provider, { value: e, children: t });
+  ), [e, r]), /* @__PURE__ */ o(it.Provider, { value: e, children: t });
 };
 var Xt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, z = (t, e, r, s) => {
   for (var n = s > 1 ? void 0 : s ? Zt(e, r) : e, l = t.length - 1, a; l >= 0; l--)
@@ -976,10 +976,10 @@ const eo = ({
   children: t
 }) => {
   const [e] = C(() => new Q());
-  return /* @__PURE__ */ o(it.Provider, { value: e, children: t });
-}, ut = oe(
+  return /* @__PURE__ */ o(lt.Provider, { value: e, children: t });
+}, pt = oe(
   void 0
-), to = () => re(ut);
+), to = () => re(pt);
 var oo = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, fe = (t, e, r, s) => {
   for (var n = s > 1 ? void 0 : s ? ro(e, r) : e, l = t.length - 1, a; l >= 0; l--)
     (a = t[l]) && (n = (s ? a(e, r, n) : a(n)) || n);
@@ -1015,7 +1015,7 @@ var no = Object.defineProperty, so = Object.getOwnPropertyDescriptor, de = (t, e
     (a = t[l]) && (n = (s ? a(e, r, n) : a(n)) || n);
   return s && n && no(e, r, n), n;
 };
-class pt {
+class mt {
   constructor(e) {
     this.playlistList = e, M(this);
   }
@@ -1042,12 +1042,12 @@ class pt {
 }
 de([
   c.struct
-], pt.prototype, "state", 1);
+], mt.prototype, "state", 1);
 class ue {
   localStorageState;
   items = [];
   constructor() {
-    M(this), this.localStorageState = new pt(this);
+    M(this), this.localStorageState = new mt(this);
   }
   createItem(e) {
     return new X(this, crypto.randomUUID(), e);
@@ -1081,7 +1081,7 @@ const io = ({
   return he(
     ve.playlistList,
     e.localStorageState
-  ), /* @__PURE__ */ o(ut.Provider, { value: e, children: t });
+  ), /* @__PURE__ */ o(pt.Provider, { value: e, children: t });
 }, Qr = ({
   children: t,
   nostalgicDivaProps: e
@@ -1091,7 +1091,7 @@ const io = ({
     components: [
       eo,
       Yt,
-      _t,
+      Lt,
       Ht,
       io
     ],
@@ -1108,7 +1108,7 @@ const io = ({
       {
         panelled: !0,
         style: {
-          minBlockSize: `max(460px, 100vh - ${ot}px)`
+          minBlockSize: `max(460px, 100vh - ${rt}px)`
         },
         children: [
           t,
@@ -1124,7 +1124,7 @@ const io = ({
     {
       title: `Shuffle: ${t.shuffle ? "On" : "Off"}`,
       "aria-label": `Shuffle: ${t.shuffle ? "On" : "Off"}`,
-      iconType: t.shuffle ? Ke : We,
+      iconType: t.shuffle ? We : Ye,
       size: "s",
       iconSize: "l",
       onClick: t.toggleShuffle,
@@ -1152,7 +1152,7 @@ const io = ({
     {
       title: "Skip back 10 seconds",
       "aria-label": "Skip back 10 seconds",
-      iconType: Ye,
+      iconType: Xe,
       size: "s",
       iconSize: "l",
       onClick: t.skipBack10,
@@ -1194,7 +1194,7 @@ const io = ({
     {
       title: "Skip forward 30 seconds",
       "aria-label": "Skip forward 30 seconds",
-      iconType: Xe,
+      iconType: Ze,
       size: "s",
       iconSize: "l",
       onClick: t.skipForward30,
@@ -1215,7 +1215,7 @@ const io = ({
       disabled: !t.canNext
     }
   );
-}), mt = {
+}), ht = {
   [b.Off]: Ft,
   [b.All]: At,
   [b.One]: Bt
@@ -1226,7 +1226,7 @@ const io = ({
     {
       title: `Repeat: ${t.repeat === b.All ? "All" : t.repeat === b.One ? "One" : "Off"}`,
       "aria-label": `Repeat: ${t.repeat === b.All ? "All" : t.repeat === b.One ? "One" : "Off"}`,
-      iconType: mt[t.repeat],
+      iconType: ht[t.repeat],
       size: "s",
       iconSize: "l",
       onClick: t.toggleRepeat,
@@ -1236,7 +1236,7 @@ const io = ({
 }), go = d(() => {
   const t = F();
   return /* @__PURE__ */ m(
-    L,
+    _,
     {
       responsive: !1,
       gutterSize: "s",
@@ -1337,7 +1337,7 @@ const io = ({
 ), bo = d(() => {
   const t = F();
   return /* @__PURE__ */ o(
-    L,
+    _,
     {
       responsive: !1,
       gutterSize: "s",
@@ -1353,7 +1353,7 @@ const io = ({
     {
       title: "Mute",
       "aria-label": "Mute",
-      iconType: Ze,
+      iconType: et,
       size: "s",
       iconSize: "l",
       disabled: !t.controller.supports("setMuted")
@@ -1362,7 +1362,7 @@ const io = ({
 }), So = d(
   ({ button: t, isOpen: e, closePopover: r }) => {
     const s = F(), [n, l] = C("0"), a = ne();
-    Ve(() => {
+    gt(() => {
       e && a.getVolume().then((y) => {
         y !== void 0 && l(Math.floor(y * 100).toString());
       });
@@ -1381,7 +1381,7 @@ const io = ({
         closePopover: r,
         anchorPosition: "upRight",
         children: /* @__PURE__ */ o(te, { children: /* @__PURE__ */ m(
-          L,
+          _,
           {
             responsive: !1,
             gutterSize: "s",
@@ -1390,7 +1390,7 @@ const io = ({
             children: [
               /* @__PURE__ */ o(Io, {}),
               /* @__PURE__ */ o(
-                He,
+                Ue,
                 {
                   min: 0,
                   max: 100,
@@ -1417,7 +1417,7 @@ const io = ({
         {
           title: "Volume",
           "aria-label": "Volume",
-          iconType: Ze,
+          iconType: et,
           size: "s",
           iconSize: "l",
           onClick: () => r(!e),
@@ -1477,13 +1477,13 @@ const io = ({
             },
             a({
               name: "Skip back 10 seconds",
-              icon: /* @__PURE__ */ o(h, { type: Ye }),
+              icon: /* @__PURE__ */ o(h, { type: Xe }),
               onClick: e.skipBack10,
               disabled: !e.canSkipBack10
             }),
             a({
               name: "Skip forward 30 seconds",
-              icon: /* @__PURE__ */ o(h, { type: Xe }),
+              icon: /* @__PURE__ */ o(h, { type: Ze }),
               onClick: e.skipForward30,
               disabled: !e.canSkipForward30
             }),
@@ -1492,7 +1492,7 @@ const io = ({
               icon: /* @__PURE__ */ o(
                 h,
                 {
-                  type: e.shuffle ? Ke : We
+                  type: e.shuffle ? We : Ye
                 }
               ),
               onClick: e.toggleShuffle,
@@ -1504,7 +1504,7 @@ const io = ({
               icon: /* @__PURE__ */ o(
                 h,
                 {
-                  type: mt[e.repeat]
+                  type: ht[e.repeat]
                 }
               ),
               onClick: e.toggleRepeat,
@@ -1579,7 +1579,7 @@ const io = ({
   );
 }), ko = D(
   ({ onClickPlayQueueButton: t }) => /* @__PURE__ */ m(
-    L,
+    _,
     {
       responsive: !1,
       gutterSize: "s",
@@ -1621,7 +1621,7 @@ const io = ({
     [t, e]
   );
   return /* @__PURE__ */ o(
-    He,
+    Ue,
     {
       min: 0,
       max: 100,
@@ -1637,9 +1637,9 @@ const io = ({
     }
   );
 }), zr = d(
-  ({ onClickPlayQueueButton: t }) => /* @__PURE__ */ o(Pt, { paddingSize: "s", children: /* @__PURE__ */ m(L, { direction: "column", gutterSize: "none", children: [
+  ({ onClickPlayQueueButton: t }) => /* @__PURE__ */ o(Pt, { paddingSize: "s", children: /* @__PURE__ */ m(_, { direction: "column", gutterSize: "none", children: [
     /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(Oo, {}) }),
-    /* @__PURE__ */ o(B, { children: /* @__PURE__ */ m(L, { responsive: !1, children: [
+    /* @__PURE__ */ o(B, { children: /* @__PURE__ */ m(_, { responsive: !1, children: [
       /* @__PURE__ */ o(B, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(bo, {}) }),
       /* @__PURE__ */ o(B, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(go, {}) }),
       /* @__PURE__ */ o(B, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
@@ -1661,15 +1661,13 @@ const io = ({
     }),
     [t]
   );
-  return Ve(() => (window.addEventListener("click", t.interact, { once: !0 }), () => {
-    window.removeEventListener("click", t.interact);
-  }), [t]), /* @__PURE__ */ o(
+  return Ve(() => He(() => t.currentItem, t.interact), [t]), /* @__PURE__ */ o(
     "div",
     {
       css: {
         position: "fixed",
         right: 0,
-        bottom: ot,
+        bottom: rt,
         width: Se.width,
         height: Se.height,
         zIndex: 998,
@@ -1760,7 +1758,7 @@ const Ao = H.create(
       ] })
     ] });
   }
-), Le = D(
+), _e = D(
   ({ onFulfilled: t }) => /* @__PURE__ */ o(
     O,
     {
@@ -1864,7 +1862,7 @@ const Ao = H.create(
   ({ playQueue: t }) => {
     const { euiTheme: e } = ie();
     return /* @__PURE__ */ m(
-      L,
+      _,
       {
         alignItems: "center",
         gutterSize: "m",
@@ -1905,9 +1903,9 @@ const Ao = H.create(
               }
             ) })
           ] }),
-          /* @__PURE__ */ o(Ue, { sizes: ["xs"], children: /* @__PURE__ */ o(Mo, { playQueue: t }) }),
+          /* @__PURE__ */ o(qe, { sizes: ["xs"], children: /* @__PURE__ */ o(Mo, { playQueue: t }) }),
           /* @__PURE__ */ o(B, { grow: !0 }),
-          /* @__PURE__ */ o(B, { grow: !1, children: /* @__PURE__ */ o(Le, { onFulfilled: t.addItemFromDto }) })
+          /* @__PURE__ */ o(B, { grow: !1, children: /* @__PURE__ */ o(_e, { onFulfilled: t.addItemFromDto }) })
         ]
       }
     );
@@ -1916,8 +1914,8 @@ const Ao = H.create(
   ({ playQueue: t }) => {
     const { euiTheme: e } = ie();
     return /* @__PURE__ */ m(G, { children: [
-      /* @__PURE__ */ o(qe, { children: /* @__PURE__ */ o(
-        L,
+      /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
+        _,
         {
           responsive: !1,
           justifyContent: "spaceBetween",
@@ -1944,7 +1942,7 @@ const Ao = H.create(
             background: e.colors.backgroundBasePlain
           },
           children: [
-            /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
+            /* @__PURE__ */ o(Je, { children: /* @__PURE__ */ o(
               W,
               {
                 id: "",
@@ -2015,13 +2013,13 @@ const Ao = H.create(
             },
             r({
               name: "Move to the top",
-              icon: /* @__PURE__ */ o(h, { type: et }),
+              icon: /* @__PURE__ */ o(h, { type: tt }),
               onClick: t.moveToTop,
               disabled: !t.canMoveToTop
             }),
             r({
               name: "Move to the bottom",
-              icon: /* @__PURE__ */ o(h, { type: tt }),
+              icon: /* @__PURE__ */ o(h, { type: ot }),
               onClick: t.moveToBottom,
               disabled: !t.canMoveToBottom
             }),
@@ -2113,9 +2111,9 @@ const Ao = H.create(
       /* @__PURE__ */ o(Eo, { item: t })
     ] });
   }
-), Lo = d(
+), _o = d(
   ({ item: t }) => /* @__PURE__ */ m(Fe, { isSelected: t.isCurrent, hasSelection: !0, hasActions: !0, children: [
-    /* @__PURE__ */ o(Je, { children: /* @__PURE__ */ o(
+    /* @__PURE__ */ o(Ke, { children: /* @__PURE__ */ o(
       W,
       {
         id: t.id.toString(),
@@ -2145,20 +2143,20 @@ const Ao = H.create(
     ),
     /* @__PURE__ */ o(No, { item: t })
   ] })
-), _o = d(
+), Lo = d(
   ({ playQueue: t }) => /* @__PURE__ */ o(
     De,
     {
       tag: "tbody",
       list: t.items,
       setList: (e) => t.setItems(e),
-      children: t.items.map((e) => /* @__PURE__ */ o(Lo, { item: e }, e.id))
+      children: t.items.map((e) => /* @__PURE__ */ o(_o, { item: e }, e.id))
     }
   )
 ), jo = d(
   ({ playQueue: t }) => /* @__PURE__ */ m(Me, { children: [
     /* @__PURE__ */ o(Do, { playQueue: t }),
-    /* @__PURE__ */ o(_o, { playQueue: t })
+    /* @__PURE__ */ o(Lo, { playQueue: t })
   ] })
 ), $o = d(
   ({ playQueue: t }) => {
@@ -2183,7 +2181,7 @@ const Ao = H.create(
           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(
-            Le,
+            _e,
             {
               onFulfilled: t.addItemFromDto
             }
@@ -2192,7 +2190,7 @@ const Ao = H.create(
       ) : /* @__PURE__ */ o(jo, { playQueue: t })
     ] });
   }
-), _e = ({
+), Le = ({
   breadcrumbs: t,
   tabs: e,
   ...r
@@ -2228,7 +2226,7 @@ const Ao = H.create(
   const t = ce();
   return /* @__PURE__ */ m(G, { children: [
     /* @__PURE__ */ o(
-      _e,
+      Le,
       {
         pageTitle: "Play queue",
         rightSideItems: []
@@ -2349,7 +2347,7 @@ const Ao = H.create(
   ({ playlist: t }) => {
     const { euiTheme: e } = ie();
     return /* @__PURE__ */ m(
-      L,
+      _,
       {
         alignItems: "center",
         gutterSize: "m",
@@ -2381,17 +2379,17 @@ const Ao = H.create(
               }
             ) })
           ] }),
-          /* @__PURE__ */ o(Ue, { sizes: ["xs"], children: /* @__PURE__ */ o(qo, { playlist: t }) }),
+          /* @__PURE__ */ o(qe, { sizes: ["xs"], children: /* @__PURE__ */ o(qo, { playlist: t }) }),
           /* @__PURE__ */ o(B, { grow: !0 }),
-          /* @__PURE__ */ o(B, { grow: !1, children: /* @__PURE__ */ o(Le, { onFulfilled: t.addItemFromDto }) })
+          /* @__PURE__ */ o(B, { grow: !1, children: /* @__PURE__ */ o(_e, { onFulfilled: t.addItemFromDto }) })
         ]
       }
     );
   }
 ), Jo = d(
   ({ playlist: t }) => /* @__PURE__ */ m(G, { children: [
-    /* @__PURE__ */ o(qe, { children: /* @__PURE__ */ o(
-      L,
+    /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
+      _,
       {
         responsive: !1,
         justifyContent: "spaceBetween",
@@ -2409,7 +2407,7 @@ const Ao = H.create(
       }
     ) }),
     /* @__PURE__ */ m(Ae, { children: [
-      /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
+      /* @__PURE__ */ o(Je, { children: /* @__PURE__ */ o(
         W,
         {
           id: "",
@@ -2477,13 +2475,13 @@ const Ao = H.create(
             },
             r({
               name: "Move to the top",
-              icon: /* @__PURE__ */ o(h, { type: et }),
+              icon: /* @__PURE__ */ o(h, { type: tt }),
               onClick: t.moveToTop,
               disabled: !t.canMoveToTop
             }),
             r({
               name: "Move to the bottom",
-              icon: /* @__PURE__ */ o(h, { type: tt }),
+              icon: /* @__PURE__ */ o(h, { type: ot }),
               onClick: t.moveToBottom,
               disabled: !t.canMoveToBottom
             }),
@@ -2572,7 +2570,7 @@ const Ao = H.create(
   ] })
 ), Xo = d(
   ({ item: t }) => /* @__PURE__ */ m(Fe, { isSelected: t.isCurrent, hasSelection: !0, hasActions: !0, children: [
-    /* @__PURE__ */ o(Je, { children: /* @__PURE__ */ o(
+    /* @__PURE__ */ o(Ke, { children: /* @__PURE__ */ o(
       W,
       {
         id: t.id.toString(),
@@ -2861,11 +2859,11 @@ const ar = {
     items: {
       type: "array",
       nullable: !0,
-      items: ct
+      items: dt
     }
   }
 };
-class ht {
+class yt {
   constructor(e) {
     this.playlist = e, M(this);
   }
@@ -2887,10 +2885,10 @@ class ht {
 }
 S([
   c.struct
-], ht.prototype, "state", 1);
+], yt.prototype, "state", 1);
 class P {
   constructor(e) {
-    this.playQueue = e, M(this), this.localStorageState = new ht(this);
+    this.playQueue = e, M(this), this.localStorageState = new yt(this);
   }
   localStorageState;
   items = [];
@@ -3070,7 +3068,7 @@ const cr = ({ onClick: t }) => /* @__PURE__ */ o(O, { onClick: t, iconType: ae,
   onFulfilled: e
 }) => /* @__PURE__ */ o(O, { onClick: () => H.show(Vo, {
   playlistListItem: t
-}).then(e), iconType: Qe, children: "Delete" }), Lr = d(
+}).then(e), iconType: Qe, children: "Delete" }), _r = d(
   ({ playlistListItem: t }) => {
     const e = ve.playlist(
       t.id
@@ -3086,7 +3084,7 @@ const cr = ({ onClick: t }) => /* @__PURE__ */ o(O, { onClick: t, iconType: ae,
     }, [t, n, e]);
     return /* @__PURE__ */ m(G, { children: [
       /* @__PURE__ */ o(
-        _e,
+        Le,
         {
           pageTitle: t.name,
           breadcrumbs: [
@@ -3216,7 +3214,7 @@ const cr = ({ onClick: t }) => /* @__PURE__ */ o(O, { onClick: t, iconType: ae,
     /* @__PURE__ */ o(vr, { playlistList: t })
   ] })
 ), br = () => /* @__PURE__ */ o(
-  _e,
+  Le,
   {
     pageTitle: "Playlists",
     breadcrumbs: [
@@ -3239,7 +3237,7 @@ const cr = ({ onClick: t }) => /* @__PURE__ */ o(O, { onClick: t, iconType: ae,
       /* @__PURE__ */ o(fr, { playlistList: t })
     ] });
   }
-), _r = D(() => {
+), Lr = D(() => {
   const t = to();
   return /* @__PURE__ */ m(G, { children: [
     /* @__PURE__ */ o(br, {}),
@@ -3251,14 +3249,14 @@ export {
   Qr as HydrangeanDivaProvider,
   Dr as MediaPlayerLayout,
   Er as MiniPlayer,
-  st as PlayQueueContext,
+  it as PlayQueueContext,
   Nr as PlayQueuePage,
   $o as PlayQueueSection,
-  Lr as PlaylistDetailsPage,
-  ut as PlaylistListContext,
-  _r as PlaylistListPage,
+  _r as PlaylistDetailsPage,
+  pt as PlaylistListContext,
+  Lr as PlaylistListPage,
   b as RepeatMode,
-  ot as bottomBarHeight,
+  rt as bottomBarHeight,
   ce as usePlayQueue,
   to as usePlaylistList,
   Ee as videoServiceIcons