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

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 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 { createContext as oe, useContext as re, useState as C, useEffect as ht, memo as D, useCallback as I, useMemo as J, useLayoutEffect as yt } 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 { 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 _, 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 { EuiPageTemplate as se, EuiSpacer as ye, EuiButtonIcon as A, EuiFlexGroup as N, EuiHideFor as $, EuiIcon as h, EuiContextMenu as Y, EuiPopover as K, EuiButtonEmpty as ge, EuiFormRow as te, EuiRange as Ve, 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 He, EuiTableHeaderMobile as Ue, EuiCheckbox as W, EuiTableHeader as Ae, EuiTableHeaderCellCheckbox as qe, EuiTableHeaderCell as U, EuiTableRowCell as q, EuiTableRow as Fe, EuiTableRowCellCheckbox as Ge, 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 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 { ArrowShuffleFilled as Je, ArrowShuffleOffFilled as Ke, PreviousFilled as xt, SkipBack10Regular as We, PauseFilled as wt, PlayFilled as kt, SkipForward30Regular as Ye, NextFilled as Ot, ArrowRepeat1Filled as Bt, ArrowRepeatAllFilled as At, ArrowRepeatAllOffFilled as Ft, OpenRegular as Rt, Speaker2Regular as Xe, TopSpeedRegular as Mt, DismissRegular as L, MoreHorizontalFilled as le, NavigationPlayRegular as Qt, AddRegular as V, DeleteRegular as Qe, PlayRegular as ae, ArrowUploadRegular as Ze, ArrowDownloadRegular as et, 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 rt = 81, Ee = new Map(
+const tt = 81, Ee = new Map(
   Object.entries({
     Audio: "",
     Dailymotion: "https://www.dailymotion.com/favicon.ico",
@@ -32,7 +32,7 @@ const rt = 81, Ee = new Map(
   bottomBar: "BottomBarStore",
   playlistList: "PlaylistListStore",
   playlist: (t) => `PlaylistStore/${t}`
-}, nt = oe(void 0), F = () => re(nt), be = new vt({
+}, ot = oe(void 0), F = () => re(ot), be = new gt({
   coerceTypes: !0
 });
 function Ne(t, e) {
@@ -64,7 +64,7 @@ const _t = {
     }
   }
 };
-class st {
+class rt {
   constructor(e) {
     this.bottomBar = e, M(this);
   }
@@ -86,10 +86,10 @@ class st {
 }
 g([
   c.struct
-], st.prototype, "state", 1);
+], rt.prototype, "state", 1);
 class v {
   constructor(e, r) {
-    this.player = e, this.playQueue = r, M(this), this.localStorageState = new st(this);
+    this.player = e, this.playQueue = r, M(this), this.localStorageState = new rt(this);
   }
   localStorageState;
   repeat = b.Off;
@@ -267,34 +267,33 @@ g([
 g([
   i.bound
 ], v.prototype, "removeFromPlayQueue", 1);
-const it = oe(void 0), ce = () => re(it), lt = oe(void 0), at = () => re(lt), Lt = ({
+const nt = oe(void 0), ce = () => re(nt), st = oe(void 0), it = () => re(st), Lt = ({
   children: t
 }) => {
-  const e = at(), r = ce(), [s] = C(() => new v(e, r));
+  const e = it(), r = ce(), [s] = C(() => new v(e, r));
   return he(
     ve.bottomBar,
     s.localStorageState
-  ), /* @__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;
+  ), /* @__PURE__ */ o(ot.Provider, { value: s, children: t });
+}, lt = oe(void 0), jt = () => re(lt);
+var $t = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, j = (t, e, r, s) => {
+  for (var n = Vt(e, r), l = t.length - 1, a; l >= 0; l--)
+    (a = t[l]) && (n = a(e, r, n) || n);
+  return n && $t(e, r, n), n;
 };
-class N {
+class _ {
   constructor(e, r, s) {
     this.player = e, this.playQueue = r, this.bottomBar = s, M(this);
   }
-  interacted = !1;
+  get interacted() {
+    return this.playQueue.interacted;
+  }
   get controller() {
     return this.player.controller;
   }
   get currentItem() {
     return this.playQueue.currentItem;
   }
-  interact() {
-    this.interacted = !0;
-  }
   async onLoaded() {
     this.interacted && await this.controller.play();
   }
@@ -332,44 +331,41 @@ class N {
     this.player.onControllerChange(e);
   }
 }
-L([
-  R
-], N.prototype, "interacted", 2);
-L([
+j([
   c
-], N.prototype, "controller", 1);
-L([
+], _.prototype, "interacted");
+j([
   c
-], N.prototype, "currentItem", 1);
-L([
-  i.bound
-], N.prototype, "interact", 1);
-L([
+], _.prototype, "controller");
+j([
+  c
+], _.prototype, "currentItem");
+j([
   i.bound
-], N.prototype, "onLoaded", 1);
-L([
+], _.prototype, "onLoaded");
+j([
   i.bound
-], N.prototype, "onPlay", 1);
-L([
+], _.prototype, "onPlay");
+j([
   i.bound
-], N.prototype, "onPause", 1);
-L([
+], _.prototype, "onPause");
+j([
   i.bound
-], N.prototype, "onEnded", 1);
-L([
+], _.prototype, "onEnded");
+j([
   i.bound
-], N.prototype, "onTimeUpdate", 1);
-L([
+], _.prototype, "onTimeUpdate");
+j([
   i.bound
-], N.prototype, "onControllerChange", 1);
+], _.prototype, "onControllerChange");
 const Ht = ({
   children: t
 }) => {
-  const e = at(), r = ce(), s = F(), [n] = C(
-    () => new N(e, r, s)
+  const e = it(), r = ce(), s = F(), [n] = C(
+    () => new _(e, r, s)
   );
-  return /* @__PURE__ */ o(ct.Provider, { value: n, children: t });
-}, dt = {
+  return /* @__PURE__ */ o(lt.Provider, { value: n, children: t });
+}, at = {
   type: "object",
   properties: {
     url: {
@@ -405,7 +401,7 @@ const Ht = ({
     items: {
       type: "array",
       nullable: !0,
-      items: dt
+      items: at
     },
     currentIndex: {
       type: "integer",
@@ -573,7 +569,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 ut {
+class ct {
   constructor(e) {
     this.playQueue = e, M(this);
   }
@@ -595,13 +591,14 @@ class ut {
 }
 u([
   c.struct
-], ut.prototype, "state", 1);
+], ct.prototype, "state", 1);
 class p {
+  interacted = !1;
   localStorageState;
   items = [];
   currentId;
   constructor() {
-    M(this), this.localStorageState = new ut(this);
+    M(this), this.localStorageState = new ct(this);
   }
   createItemFromDto(e) {
     return Jt.fromDto(this, {
@@ -668,8 +665,11 @@ class p {
   setItems(e) {
     this.items = e;
   }
+  interact() {
+    this.interacted = !0;
+  }
   clear() {
-    this.currentIndex = void 0, this.items = [];
+    this.interact(), this.currentIndex = void 0, this.items = [];
   }
   unselectAll() {
     for (const e of this.items)
@@ -680,7 +680,7 @@ class p {
       e.select();
   }
   setCurrentItem(e) {
-    this.currentId = e?.id;
+    this.interact(), this.currentId = e?.id;
   }
   setNextItems(e) {
     this.currentIndex !== void 0 && this.items.splice(this.currentIndex + 1, 0, ...e);
@@ -718,7 +718,7 @@ class p {
       return;
     }
     const { currentIndex: r } = this;
-    r !== void 0 && (this.items.splice(r, 0, ...e), this.currentIndex = r);
+    r !== void 0 && (this.interact(), this.items.splice(r, 0, ...e), this.currentIndex = r);
   }
   moveItem(e, r) {
     const s = this.items.splice(this.items.indexOf(e), 1)[0];
@@ -734,7 +734,7 @@ class p {
     pe(
       this.items,
       e.find((l) => l === r)
-    ), this.currentItem !== r && (n ? await this.goToFirst() : this.currentIndex = s);
+    ), this.currentItem !== r && (this.interact(), n ? await this.goToFirst() : this.currentIndex = s);
   }
   async removeSelectedItems() {
     await this.removeItems(this.selectedItemsOrAllItems), this.unselectAll();
@@ -752,16 +752,19 @@ class p {
     );
   }
   async previous() {
-    this.currentIndex !== void 0 && this.hasPreviousItem && this.currentIndex--;
+    this.currentIndex !== void 0 && this.hasPreviousItem && (this.interact(), this.currentIndex--);
   }
   async next() {
-    this.currentIndex !== void 0 && this.hasNextItem && this.currentIndex++;
+    this.currentIndex !== void 0 && this.hasNextItem && (this.interact(), this.currentIndex++);
   }
   addItemFromDto(e) {
     const r = this.createItemFromDto(e);
     return this.addItems([r]);
   }
 }
+u([
+  R
+], p.prototype, "interacted", 2);
 u([
   R
 ], p.prototype, "items", 2);
@@ -822,6 +825,9 @@ u([
 u([
   i.bound
 ], p.prototype, "setItems", 1);
+u([
+  i.bound
+], p.prototype, "interact", 1);
 u([
   i.bound
 ], p.prototype, "clear", 1);
@@ -891,12 +897,12 @@ const Yt = ({
     e.localStorageState
   );
   const r = ne();
-  return Ve(() => He(
+  return ht(() => vt(
     () => 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(it.Provider, { value: e, children: t });
+  ), [e, r]), /* @__PURE__ */ o(nt.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 +982,10 @@ const eo = ({
   children: t
 }) => {
   const [e] = C(() => new Q());
-  return /* @__PURE__ */ o(lt.Provider, { value: e, children: t });
-}, pt = oe(
+  return /* @__PURE__ */ o(st.Provider, { value: e, children: t });
+}, dt = oe(
   void 0
-), to = () => re(pt);
+), to = () => re(dt);
 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 +1021,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 mt {
+class ut {
   constructor(e) {
     this.playlistList = e, M(this);
   }
@@ -1042,12 +1048,12 @@ class mt {
 }
 de([
   c.struct
-], mt.prototype, "state", 1);
+], ut.prototype, "state", 1);
 class ue {
   localStorageState;
   items = [];
   constructor() {
-    M(this), this.localStorageState = new mt(this);
+    M(this), this.localStorageState = new ut(this);
   }
   createItem(e) {
     return new X(this, crypto.randomUUID(), e);
@@ -1081,7 +1087,7 @@ const io = ({
   return he(
     ve.playlistList,
     e.localStorageState
-  ), /* @__PURE__ */ o(pt.Provider, { value: e, children: t });
+  ), /* @__PURE__ */ o(dt.Provider, { value: e, children: t });
 }, Qr = ({
   children: t,
   nostalgicDivaProps: e
@@ -1108,7 +1114,7 @@ const io = ({
       {
         panelled: !0,
         style: {
-          minBlockSize: `max(460px, 100vh - ${rt}px)`
+          minBlockSize: `max(460px, 100vh - ${tt}px)`
         },
         children: [
           t,
@@ -1124,7 +1130,7 @@ const io = ({
     {
       title: `Shuffle: ${t.shuffle ? "On" : "Off"}`,
       "aria-label": `Shuffle: ${t.shuffle ? "On" : "Off"}`,
-      iconType: t.shuffle ? We : Ye,
+      iconType: t.shuffle ? Je : Ke,
       size: "s",
       iconSize: "l",
       onClick: t.toggleShuffle,
@@ -1152,7 +1158,7 @@ const io = ({
     {
       title: "Skip back 10 seconds",
       "aria-label": "Skip back 10 seconds",
-      iconType: Xe,
+      iconType: We,
       size: "s",
       iconSize: "l",
       onClick: t.skipBack10,
@@ -1194,7 +1200,7 @@ const io = ({
     {
       title: "Skip forward 30 seconds",
       "aria-label": "Skip forward 30 seconds",
-      iconType: Ze,
+      iconType: Ye,
       size: "s",
       iconSize: "l",
       onClick: t.skipForward30,
@@ -1215,7 +1221,7 @@ const io = ({
       disabled: !t.canNext
     }
   );
-}), ht = {
+}), pt = {
   [b.Off]: Ft,
   [b.All]: At,
   [b.One]: Bt
@@ -1226,7 +1232,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: ht[t.repeat],
+      iconType: pt[t.repeat],
       size: "s",
       iconSize: "l",
       onClick: t.toggleRepeat,
@@ -1236,7 +1242,7 @@ const io = ({
 }), go = d(() => {
   const t = F();
   return /* @__PURE__ */ m(
-    _,
+    N,
     {
       responsive: !1,
       gutterSize: "s",
@@ -1337,7 +1343,7 @@ const io = ({
 ), bo = d(() => {
   const t = F();
   return /* @__PURE__ */ o(
-    _,
+    N,
     {
       responsive: !1,
       gutterSize: "s",
@@ -1353,7 +1359,7 @@ const io = ({
     {
       title: "Mute",
       "aria-label": "Mute",
-      iconType: et,
+      iconType: Xe,
       size: "s",
       iconSize: "l",
       disabled: !t.controller.supports("setMuted")
@@ -1362,7 +1368,7 @@ const io = ({
 }), So = d(
   ({ button: t, isOpen: e, closePopover: r }) => {
     const s = F(), [n, l] = C("0"), a = ne();
-    gt(() => {
+    yt(() => {
       e && a.getVolume().then((y) => {
         y !== void 0 && l(Math.floor(y * 100).toString());
       });
@@ -1381,7 +1387,7 @@ const io = ({
         closePopover: r,
         anchorPosition: "upRight",
         children: /* @__PURE__ */ o(te, { children: /* @__PURE__ */ m(
-          _,
+          N,
           {
             responsive: !1,
             gutterSize: "s",
@@ -1390,7 +1396,7 @@ const io = ({
             children: [
               /* @__PURE__ */ o(Io, {}),
               /* @__PURE__ */ o(
-                Ue,
+                Ve,
                 {
                   min: 0,
                   max: 100,
@@ -1417,7 +1423,7 @@ const io = ({
         {
           title: "Volume",
           "aria-label": "Volume",
-          iconType: et,
+          iconType: Xe,
           size: "s",
           iconSize: "l",
           onClick: () => r(!e),
@@ -1477,13 +1483,13 @@ const io = ({
             },
             a({
               name: "Skip back 10 seconds",
-              icon: /* @__PURE__ */ o(h, { type: Xe }),
+              icon: /* @__PURE__ */ o(h, { type: We }),
               onClick: e.skipBack10,
               disabled: !e.canSkipBack10
             }),
             a({
               name: "Skip forward 30 seconds",
-              icon: /* @__PURE__ */ o(h, { type: Ze }),
+              icon: /* @__PURE__ */ o(h, { type: Ye }),
               onClick: e.skipForward30,
               disabled: !e.canSkipForward30
             }),
@@ -1492,7 +1498,7 @@ const io = ({
               icon: /* @__PURE__ */ o(
                 h,
                 {
-                  type: e.shuffle ? We : Ye
+                  type: e.shuffle ? Je : Ke
                 }
               ),
               onClick: e.toggleShuffle,
@@ -1504,7 +1510,7 @@ const io = ({
               icon: /* @__PURE__ */ o(
                 h,
                 {
-                  type: ht[e.repeat]
+                  type: pt[e.repeat]
                 }
               ),
               onClick: e.toggleRepeat,
@@ -1516,7 +1522,7 @@ const io = ({
             },
             a({
               name: "Remove from play queue",
-              icon: /* @__PURE__ */ o(h, { type: j }),
+              icon: /* @__PURE__ */ o(h, { type: L }),
               onClick: e.removeFromPlayQueue,
               disabled: !e.canRemoveFromPlayQueue
             })
@@ -1579,7 +1585,7 @@ const io = ({
   );
 }), ko = D(
   ({ onClickPlayQueueButton: t }) => /* @__PURE__ */ m(
-    _,
+    N,
     {
       responsive: !1,
       gutterSize: "s",
@@ -1621,7 +1627,7 @@ const io = ({
     [t, e]
   );
   return /* @__PURE__ */ o(
-    Ue,
+    Ve,
     {
       min: 0,
       max: 100,
@@ -1637,9 +1643,9 @@ const io = ({
     }
   );
 }), zr = d(
-  ({ onClickPlayQueueButton: t }) => /* @__PURE__ */ o(Pt, { paddingSize: "s", children: /* @__PURE__ */ m(_, { direction: "column", gutterSize: "none", children: [
+  ({ onClickPlayQueueButton: t }) => /* @__PURE__ */ o(Pt, { paddingSize: "s", children: /* @__PURE__ */ m(N, { direction: "column", gutterSize: "none", children: [
     /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(Oo, {}) }),
-    /* @__PURE__ */ o(B, { children: /* @__PURE__ */ m(_, { responsive: !1, children: [
+    /* @__PURE__ */ o(B, { children: /* @__PURE__ */ m(N, { 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,13 +1667,13 @@ const io = ({
     }),
     [t]
   );
-  return Ve(() => He(() => t.currentItem, t.interact), [t]), /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(
     "div",
     {
       css: {
         position: "fixed",
         right: 0,
-        bottom: rt,
+        bottom: tt,
         width: Se.width,
         height: Se.height,
         zIndex: 998,
@@ -1814,7 +1820,7 @@ const Ao = H.create(
             }),
             r({
               name: "Remove",
-              icon: /* @__PURE__ */ o(h, { type: j }),
+              icon: /* @__PURE__ */ o(h, { type: L }),
               onClick: t.removeSelectedItems,
               disabled: !t.canRemoveSelectedItems
             }),
@@ -1862,7 +1868,7 @@ const Ao = H.create(
   ({ playQueue: t }) => {
     const { euiTheme: e } = ie();
     return /* @__PURE__ */ m(
-      _,
+      N,
       {
         alignItems: "center",
         gutterSize: "m",
@@ -1887,7 +1893,7 @@ const Ao = H.create(
             /* @__PURE__ */ o(B, { grow: !1, children: /* @__PURE__ */ o(
               O,
               {
-                iconType: j,
+                iconType: L,
                 onClick: t.removeSelectedItems,
                 disabled: !t.canRemoveSelectedItems,
                 children: "Remove"
@@ -1903,7 +1909,7 @@ const Ao = H.create(
               }
             ) })
           ] }),
-          /* @__PURE__ */ o(qe, { sizes: ["xs"], children: /* @__PURE__ */ o(Mo, { playQueue: t }) }),
+          /* @__PURE__ */ o(He, { sizes: ["xs"], children: /* @__PURE__ */ o(Mo, { playQueue: t }) }),
           /* @__PURE__ */ o(B, { grow: !0 }),
           /* @__PURE__ */ o(B, { grow: !1, children: /* @__PURE__ */ o(_e, { onFulfilled: t.addItemFromDto }) })
         ]
@@ -1914,8 +1920,8 @@ const Ao = H.create(
   ({ playQueue: t }) => {
     const { euiTheme: e } = ie();
     return /* @__PURE__ */ m(G, { children: [
-      /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
-        _,
+      /* @__PURE__ */ o(Ue, { children: /* @__PURE__ */ o(
+        N,
         {
           responsive: !1,
           justifyContent: "spaceBetween",
@@ -1942,7 +1948,7 @@ const Ao = H.create(
             background: e.colors.backgroundBasePlain
           },
           children: [
-            /* @__PURE__ */ o(Je, { children: /* @__PURE__ */ o(
+            /* @__PURE__ */ o(qe, { children: /* @__PURE__ */ o(
               W,
               {
                 id: "",
@@ -2013,13 +2019,13 @@ const Ao = H.create(
             },
             r({
               name: "Move to the top",
-              icon: /* @__PURE__ */ o(h, { type: tt }),
+              icon: /* @__PURE__ */ o(h, { type: Ze }),
               onClick: t.moveToTop,
               disabled: !t.canMoveToTop
             }),
             r({
               name: "Move to the bottom",
-              icon: /* @__PURE__ */ o(h, { type: ot }),
+              icon: /* @__PURE__ */ o(h, { type: et }),
               onClick: t.moveToBottom,
               disabled: !t.canMoveToBottom
             }),
@@ -2028,7 +2034,7 @@ const Ao = H.create(
             },
             r({
               name: "Remove",
-              icon: /* @__PURE__ */ o(h, { type: j }),
+              icon: /* @__PURE__ */ o(h, { type: L }),
               onClick: t.remove,
               className: "eui-showFor--xs--flex"
             }),
@@ -2101,7 +2107,7 @@ const Ao = H.create(
         /* @__PURE__ */ o(
           O,
           {
-            iconType: j,
+            iconType: L,
             size: "s",
             onClick: t.remove,
             children: "Remove"
@@ -2113,7 +2119,7 @@ const Ao = H.create(
   }
 ), _o = d(
   ({ item: t }) => /* @__PURE__ */ m(Fe, { isSelected: t.isCurrent, hasSelection: !0, hasActions: !0, children: [
-    /* @__PURE__ */ o(Ke, { children: /* @__PURE__ */ o(
+    /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
       W,
       {
         id: t.id.toString(),
@@ -2311,7 +2317,7 @@ const Ao = H.create(
             }),
             r({
               name: "Remove",
-              icon: /* @__PURE__ */ o(h, { type: j }),
+              icon: /* @__PURE__ */ o(h, { type: L }),
               onClick: t.removeSelectedItems,
               disabled: !t.canRemoveSelectedItems
             })
@@ -2347,7 +2353,7 @@ const Ao = H.create(
   ({ playlist: t }) => {
     const { euiTheme: e } = ie();
     return /* @__PURE__ */ m(
-      _,
+      N,
       {
         alignItems: "center",
         gutterSize: "m",
@@ -2372,14 +2378,14 @@ const Ao = H.create(
             /* @__PURE__ */ o(B, { grow: !1, children: /* @__PURE__ */ o(
               O,
               {
-                iconType: j,
+                iconType: L,
                 onClick: t.removeSelectedItems,
                 disabled: !t.canRemoveSelectedItems,
                 children: "Remove"
               }
             ) })
           ] }),
-          /* @__PURE__ */ o(qe, { sizes: ["xs"], children: /* @__PURE__ */ o(qo, { playlist: t }) }),
+          /* @__PURE__ */ o(He, { sizes: ["xs"], children: /* @__PURE__ */ o(qo, { playlist: t }) }),
           /* @__PURE__ */ o(B, { grow: !0 }),
           /* @__PURE__ */ o(B, { grow: !1, children: /* @__PURE__ */ o(_e, { onFulfilled: t.addItemFromDto }) })
         ]
@@ -2388,8 +2394,8 @@ const Ao = H.create(
   }
 ), Jo = d(
   ({ playlist: t }) => /* @__PURE__ */ m(G, { children: [
-    /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
-      _,
+    /* @__PURE__ */ o(Ue, { children: /* @__PURE__ */ o(
+      N,
       {
         responsive: !1,
         justifyContent: "spaceBetween",
@@ -2407,7 +2413,7 @@ const Ao = H.create(
       }
     ) }),
     /* @__PURE__ */ m(Ae, { children: [
-      /* @__PURE__ */ o(Je, { children: /* @__PURE__ */ o(
+      /* @__PURE__ */ o(qe, { children: /* @__PURE__ */ o(
         W,
         {
           id: "",
@@ -2475,13 +2481,13 @@ const Ao = H.create(
             },
             r({
               name: "Move to the top",
-              icon: /* @__PURE__ */ o(h, { type: tt }),
+              icon: /* @__PURE__ */ o(h, { type: Ze }),
               onClick: t.moveToTop,
               disabled: !t.canMoveToTop
             }),
             r({
               name: "Move to the bottom",
-              icon: /* @__PURE__ */ o(h, { type: ot }),
+              icon: /* @__PURE__ */ o(h, { type: et }),
               onClick: t.moveToBottom,
               disabled: !t.canMoveToBottom
             }),
@@ -2490,7 +2496,7 @@ const Ao = H.create(
             },
             r({
               name: "Remove",
-              icon: /* @__PURE__ */ o(h, { type: j }),
+              icon: /* @__PURE__ */ o(h, { type: L }),
               onClick: t.remove,
               className: "eui-showFor--xs--flex"
             }),
@@ -2559,7 +2565,7 @@ const Ao = H.create(
       /* @__PURE__ */ o(
         O,
         {
-          iconType: j,
+          iconType: L,
           size: "s",
           onClick: t.remove,
           children: "Remove"
@@ -2570,7 +2576,7 @@ const Ao = H.create(
   ] })
 ), Xo = d(
   ({ item: t }) => /* @__PURE__ */ m(Fe, { isSelected: t.isCurrent, hasSelection: !0, hasActions: !0, children: [
-    /* @__PURE__ */ o(Ke, { children: /* @__PURE__ */ o(
+    /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
       W,
       {
         id: t.id.toString(),
@@ -2859,11 +2865,11 @@ const ar = {
     items: {
       type: "array",
       nullable: !0,
-      items: dt
+      items: at
     }
   }
 };
-class yt {
+class mt {
   constructor(e) {
     this.playlist = e, M(this);
   }
@@ -2885,10 +2891,10 @@ class yt {
 }
 S([
   c.struct
-], yt.prototype, "state", 1);
+], mt.prototype, "state", 1);
 class P {
   constructor(e) {
-    this.playQueue = e, M(this), this.localStorageState = new yt(this);
+    this.playQueue = e, M(this), this.localStorageState = new mt(this);
   }
   localStorageState;
   items = [];
@@ -3249,14 +3255,14 @@ export {
   Qr as HydrangeanDivaProvider,
   Dr as MediaPlayerLayout,
   Er as MiniPlayer,
-  it as PlayQueueContext,
+  nt as PlayQueueContext,
   Nr as PlayQueuePage,
   $o as PlayQueueSection,
   _r as PlaylistDetailsPage,
-  pt as PlaylistListContext,
+  dt as PlaylistListContext,
   Lr as PlaylistListPage,
   b as RepeatMode,
-  rt as bottomBarHeight,
+  tt as bottomBarHeight,
   ce as usePlayQueue,
   to as usePlaylistList,
   Ee as videoServiceIcons