@aigamo/hydrangean-diva 0.0.1-alpha.64 → 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 yt, memo as D, useCallback as I, useMemo as J, useLayoutEffect as Ve } from "react";
+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 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 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 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 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 ot = 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 ot = 81, Ee = new Map(
   bottomBar: "BottomBarStore",
   playlistList: "PlaylistListStore",
   playlist: (t) => `PlaylistStore/${t}`
-}, rt = oe(void 0), F = () => re(rt), be = new gt({
+}, ot = oe(void 0), F = () => re(ot), be = new gt({
   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 rt {
   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);
+], rt.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 rt(this);
   }
   localStorageState;
   repeat = b.Off;
@@ -267,34 +267,33 @@ 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 nt = oe(void 0), ce = () => re(nt), st = oe(void 0), it = () => re(st), Lt = ({
   children: t
 }) => {
-  const e = lt(), 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(rt.Provider, { value: s, children: t });
-}, at = oe(void 0), jt = () => re(at);
-var $t = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, _ = (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);
   }
 }
-_([
-  R
-], N.prototype, "interacted", 2);
-_([
+j([
   c
-], N.prototype, "controller", 1);
-_([
+], _.prototype, "interacted");
+j([
   c
-], N.prototype, "currentItem", 1);
-_([
-  i.bound
-], N.prototype, "interact", 1);
-_([
+], _.prototype, "controller");
+j([
+  c
+], _.prototype, "currentItem");
+j([
   i.bound
-], N.prototype, "onLoaded", 1);
-_([
+], _.prototype, "onLoaded");
+j([
   i.bound
-], N.prototype, "onPlay", 1);
-_([
+], _.prototype, "onPlay");
+j([
   i.bound
-], N.prototype, "onPause", 1);
-_([
+], _.prototype, "onPause");
+j([
   i.bound
-], N.prototype, "onEnded", 1);
-_([
+], _.prototype, "onEnded");
+j([
   i.bound
-], N.prototype, "onTimeUpdate", 1);
-_([
+], _.prototype, "onTimeUpdate");
+j([
   i.bound
-], N.prototype, "onControllerChange", 1);
+], _.prototype, "onControllerChange");
 const Ht = ({
   children: t
 }) => {
-  const e = lt(), 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(at.Provider, { value: n, children: t });
-}, ct = {
+  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: ct
+      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 dt {
+class ct {
   constructor(e) {
     this.playQueue = e, M(this);
   }
@@ -595,13 +591,14 @@ class dt {
 }
 u([
   c.struct
-], dt.prototype, "state", 1);
+], ct.prototype, "state", 1);
 class p {
+  interacted = !1;
   localStorageState;
   items = [];
   currentId;
   constructor() {
-    M(this), this.localStorageState = new dt(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 yt(() => vt(
+  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(st.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(it.Provider, { value: e, children: t });
-}, ut = oe(
+  return /* @__PURE__ */ o(st.Provider, { value: e, children: t });
+}, dt = oe(
   void 0
-), to = () => re(ut);
+), 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 pt {
+class ut {
   constructor(e) {
     this.playlistList = e, M(this);
   }
@@ -1042,12 +1048,12 @@ class pt {
 }
 de([
   c.struct
-], pt.prototype, "state", 1);
+], ut.prototype, "state", 1);
 class ue {
   localStorageState;
   items = [];
   constructor() {
-    M(this), this.localStorageState = new pt(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(ut.Provider, { value: e, children: t });
+  ), /* @__PURE__ */ o(dt.Provider, { value: e, children: t });
 }, Qr = ({
   children: t,
   nostalgicDivaProps: e
@@ -1091,7 +1097,7 @@ const io = ({
     components: [
       eo,
       Yt,
-      _t,
+      Lt,
       Ht,
       io
     ],
@@ -1108,7 +1114,7 @@ const io = ({
       {
         panelled: !0,
         style: {
-          minBlockSize: `max(460px, 100vh - ${ot}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 ? Ke : We,
+      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: Ye,
+      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: Xe,
+      iconType: Ye,
       size: "s",
       iconSize: "l",
       onClick: t.skipForward30,
@@ -1215,7 +1221,7 @@ const io = ({
       disabled: !t.canNext
     }
   );
-}), mt = {
+}), 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: mt[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(
-    L,
+    N,
     {
       responsive: !1,
       gutterSize: "s",
@@ -1337,7 +1343,7 @@ const io = ({
 ), bo = d(() => {
   const t = F();
   return /* @__PURE__ */ o(
-    L,
+    N,
     {
       responsive: !1,
       gutterSize: "s",
@@ -1353,7 +1359,7 @@ const io = ({
     {
       title: "Mute",
       "aria-label": "Mute",
-      iconType: Ze,
+      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();
-    Ve(() => {
+    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(
-          L,
+          N,
           {
             responsive: !1,
             gutterSize: "s",
@@ -1390,7 +1396,7 @@ const io = ({
             children: [
               /* @__PURE__ */ o(Io, {}),
               /* @__PURE__ */ o(
-                He,
+                Ve,
                 {
                   min: 0,
                   max: 100,
@@ -1417,7 +1423,7 @@ const io = ({
         {
           title: "Volume",
           "aria-label": "Volume",
-          iconType: Ze,
+          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: Ye }),
+              icon: /* @__PURE__ */ o(h, { type: We }),
               onClick: e.skipBack10,
               disabled: !e.canSkipBack10
             }),
             a({
               name: "Skip forward 30 seconds",
-              icon: /* @__PURE__ */ o(h, { type: Xe }),
+              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 ? Ke : We
+                  type: e.shuffle ? Je : Ke
                 }
               ),
               onClick: e.toggleShuffle,
@@ -1504,7 +1510,7 @@ const io = ({
               icon: /* @__PURE__ */ o(
                 h,
                 {
-                  type: mt[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(
-    L,
+    N,
     {
       responsive: !1,
       gutterSize: "s",
@@ -1621,7 +1627,7 @@ const io = ({
     [t, e]
   );
   return /* @__PURE__ */ o(
-    He,
+    Ve,
     {
       min: 0,
       max: 100,
@@ -1637,9 +1643,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(N, { 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(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,15 +1667,13 @@ const io = ({
     }),
     [t]
   );
-  return Ve(() => (window.addEventListener("click", t.interact, { once: !0 }), () => {
-    window.removeEventListener("click", t.interact);
-  }), [t]), /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(
     "div",
     {
       css: {
         position: "fixed",
         right: 0,
-        bottom: ot,
+        bottom: tt,
         width: Se.width,
         height: Se.height,
         zIndex: 998,
@@ -1760,7 +1764,7 @@ const Ao = H.create(
       ] })
     ] });
   }
-), Le = D(
+), _e = D(
   ({ onFulfilled: t }) => /* @__PURE__ */ o(
     O,
     {
@@ -1816,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
             }),
@@ -1864,7 +1868,7 @@ const Ao = H.create(
   ({ playQueue: t }) => {
     const { euiTheme: e } = ie();
     return /* @__PURE__ */ m(
-      L,
+      N,
       {
         alignItems: "center",
         gutterSize: "m",
@@ -1889,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"
@@ -1905,9 +1909,9 @@ const Ao = H.create(
               }
             ) })
           ] }),
-          /* @__PURE__ */ o(Ue, { 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(Le, { onFulfilled: t.addItemFromDto }) })
+          /* @__PURE__ */ o(B, { grow: !1, children: /* @__PURE__ */ o(_e, { onFulfilled: t.addItemFromDto }) })
         ]
       }
     );
@@ -1916,8 +1920,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(Ue, { children: /* @__PURE__ */ o(
+        N,
         {
           responsive: !1,
           justifyContent: "spaceBetween",
@@ -1944,7 +1948,7 @@ const Ao = H.create(
             background: e.colors.backgroundBasePlain
           },
           children: [
-            /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
+            /* @__PURE__ */ o(qe, { children: /* @__PURE__ */ o(
               W,
               {
                 id: "",
@@ -2015,13 +2019,13 @@ const Ao = H.create(
             },
             r({
               name: "Move to the top",
-              icon: /* @__PURE__ */ o(h, { type: et }),
+              icon: /* @__PURE__ */ o(h, { type: Ze }),
               onClick: t.moveToTop,
               disabled: !t.canMoveToTop
             }),
             r({
               name: "Move to the bottom",
-              icon: /* @__PURE__ */ o(h, { type: tt }),
+              icon: /* @__PURE__ */ o(h, { type: et }),
               onClick: t.moveToBottom,
               disabled: !t.canMoveToBottom
             }),
@@ -2030,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"
             }),
@@ -2103,7 +2107,7 @@ const Ao = H.create(
         /* @__PURE__ */ o(
           O,
           {
-            iconType: j,
+            iconType: L,
             size: "s",
             onClick: t.remove,
             children: "Remove"
@@ -2113,9 +2117,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(Ge, { children: /* @__PURE__ */ o(
       W,
       {
         id: t.id.toString(),
@@ -2145,20 +2149,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 +2187,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 +2196,7 @@ const Ao = H.create(
       ) : /* @__PURE__ */ o(jo, { playQueue: t })
     ] });
   }
-), _e = ({
+), Le = ({
   breadcrumbs: t,
   tabs: e,
   ...r
@@ -2228,7 +2232,7 @@ const Ao = H.create(
   const t = ce();
   return /* @__PURE__ */ m(G, { children: [
     /* @__PURE__ */ o(
-      _e,
+      Le,
       {
         pageTitle: "Play queue",
         rightSideItems: []
@@ -2313,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
             })
@@ -2349,7 +2353,7 @@ const Ao = H.create(
   ({ playlist: t }) => {
     const { euiTheme: e } = ie();
     return /* @__PURE__ */ m(
-      L,
+      N,
       {
         alignItems: "center",
         gutterSize: "m",
@@ -2374,24 +2378,24 @@ 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(Ue, { 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(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(Ue, { children: /* @__PURE__ */ o(
+      N,
       {
         responsive: !1,
         justifyContent: "spaceBetween",
@@ -2409,7 +2413,7 @@ const Ao = H.create(
       }
     ) }),
     /* @__PURE__ */ m(Ae, { children: [
-      /* @__PURE__ */ o(Ge, { children: /* @__PURE__ */ o(
+      /* @__PURE__ */ o(qe, { children: /* @__PURE__ */ o(
         W,
         {
           id: "",
@@ -2477,13 +2481,13 @@ const Ao = H.create(
             },
             r({
               name: "Move to the top",
-              icon: /* @__PURE__ */ o(h, { type: et }),
+              icon: /* @__PURE__ */ o(h, { type: Ze }),
               onClick: t.moveToTop,
               disabled: !t.canMoveToTop
             }),
             r({
               name: "Move to the bottom",
-              icon: /* @__PURE__ */ o(h, { type: tt }),
+              icon: /* @__PURE__ */ o(h, { type: et }),
               onClick: t.moveToBottom,
               disabled: !t.canMoveToBottom
             }),
@@ -2492,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"
             }),
@@ -2561,7 +2565,7 @@ const Ao = H.create(
       /* @__PURE__ */ o(
         O,
         {
-          iconType: j,
+          iconType: L,
           size: "s",
           onClick: t.remove,
           children: "Remove"
@@ -2572,7 +2576,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(Ge, { children: /* @__PURE__ */ o(
       W,
       {
         id: t.id.toString(),
@@ -2861,11 +2865,11 @@ const ar = {
     items: {
       type: "array",
       nullable: !0,
-      items: ct
+      items: at
     }
   }
 };
-class ht {
+class mt {
   constructor(e) {
     this.playlist = e, M(this);
   }
@@ -2887,10 +2891,10 @@ class ht {
 }
 S([
   c.struct
-], ht.prototype, "state", 1);
+], mt.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 mt(this);
   }
   localStorageState;
   items = [];
@@ -3070,7 +3074,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 +3090,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 +3220,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 +3243,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 +3255,14 @@ export {
   Qr as HydrangeanDivaProvider,
   Dr as MediaPlayerLayout,
   Er as MiniPlayer,
-  st as PlayQueueContext,
+  nt as PlayQueueContext,
   Nr as PlayQueuePage,
   $o as PlayQueueSection,
-  Lr as PlaylistDetailsPage,
-  ut as PlaylistListContext,
-  _r as PlaylistListPage,
+  _r as PlaylistDetailsPage,
+  dt as PlaylistListContext,
+  Lr as PlaylistListPage,
   b as RepeatMode,
-  ot as bottomBarHeight,
+  tt as bottomBarHeight,
   ce as usePlayQueue,
   to as usePlaylistList,
   Ee as videoServiceIcons