@aigamo/hydrangean-diva 0.0.1-alpha.4

package/dist/index.es.js

@@ -0,0 +1,1322 @@
+var Q = Object.defineProperty;
+var ee = (t, e, n) => e in t ? Q(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var p = (t, e, n) => ee(t, typeof e != "symbol" ? e + "" : e, n);
+import { useNostalgicDiva as R, findVideoService as te, NostalgicDiva as ne } from "@aigamo/nostalgic-diva";
+import { EuiRange as j, EuiPopover as F, EuiFormRow as S, EuiFlexGroup as C, EuiButtonIcon as I, EuiIcon as E, EuiContextMenu as ie, EuiBottomBar as se, EuiFlexItem as v, EuiButton as x, EuiModal as re, EuiModalHeader as ae, EuiModalHeaderTitle as le, EuiModalBody as oe, EuiForm as ce, EuiFieldText as V, EuiModalFooter as me, EuiButtonEmpty as de, useEuiTheme as H, EuiTableHeader as ue, EuiTableHeaderCellCheckbox as he, EuiCheckbox as U, EuiTableHeaderCell as w, EuiContextMenuItem as pe, EuiContextMenuPanel as ge, EuiHorizontalRule as L, EuiTableRowCell as O, EuiTableRow as fe, EuiTableRowCellCheckbox as Ee, EuiLink as ve, EuiTable as Ie, EuiFlyout as ye, EuiCodeBlock as be, EuiSpacer as $, EuiPageTemplate as A } from "@elastic/eui";
+import { Speaker2Regular as q, TopSpeedRegular as Te, SkipBack10Regular as xe, SkipForward30Regular as Re, DismissRegular as B, ArrowRepeat1Filled as Ce, ArrowRepeatAllFilled as ke, ArrowRepeatAllOffFilled as we, ArrowShuffleFilled as Pe, ArrowShuffleOffFilled as Se, PreviousFilled as Oe, PauseFilled as Ae, PlayFilled as ze, NextFilled as Me, MoreHorizontalFilled as J, AddRegular as N, ArrowUploadRegular as Fe, ArrowDownloadRegular as Be, PlayRegular as Ne, DeleteRegular as Ve } from "@fluentui/react-icons";
+import { observer as h } from "mobx-react-lite";
+import i, { useCallback as u, memo as y, useState as g, useLayoutEffect as Le, useMemo as G, createContext as W, useContext as X, useEffect as De } from "react";
+import { ReactSortable as je } from "react-sortablejs";
+import { makeObservable as He, action as r, computed as c, observable as b, reaction as Ue } from "mobx";
+import { pull as D } from "lodash-es";
+import $e from "ajv";
+var o = /* @__PURE__ */ ((t) => (t.Off = "Off", t.All = "All", t.One = "One", t))(o || {});
+const Y = 80, qe = h(({ playerStore: t }) => {
+  const e = R(), n = u(
+    (l) => {
+      const m = Number(l.currentTarget.value) / 100;
+      t.setPercent(m);
+    },
+    [t]
+  ), s = u(
+    (l) => {
+      l.button === 0 && t.setSeeking(!0);
+    },
+    [t]
+  ), a = u(
+    async (l) => {
+      if (l.button === 0) {
+        const m = Number(l.currentTarget.value) / 100;
+        t.setSeeking(!1);
+        const d = await e.getDuration();
+        d !== void 0 && await e.setCurrentTime(d * m);
+      }
+    },
+    [t, e]
+  );
+  return /* @__PURE__ */ i.createElement(
+    j,
+    {
+      min: 0,
+      max: 100,
+      step: 1e-7,
+      value: t.percent * 100,
+      onChange: n,
+      onMouseDown: s,
+      onMouseUp: a,
+      fullWidth: !0,
+      showRange: !0,
+      css: { blockSize: 32 }
+    }
+  );
+}), Je = y(
+  ({ button: t, isOpen: e, closePopover: n }) => {
+    const [s, a] = g("0"), l = R();
+    Le(() => {
+      e && l.getVolume().then((d) => {
+        d !== void 0 && a(Math.floor(d * 100).toString());
+      });
+    }, [e, l]);
+    const m = u(
+      async (d) => {
+        a(d.currentTarget.value), await l.setVolume(Number(d.currentTarget.value) / 100);
+      },
+      [l]
+    );
+    return /* @__PURE__ */ i.createElement(
+      F,
+      {
+        button: t,
+        isOpen: e,
+        closePopover: n,
+        anchorPosition: "upRight"
+      },
+      /* @__PURE__ */ i.createElement(S, null, /* @__PURE__ */ i.createElement(
+        C,
+        {
+          responsive: !1,
+          gutterSize: "s",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        /* @__PURE__ */ i.createElement(
+          I,
+          {
+            title: "Mute",
+            "aria-label": "Mute",
+            iconType: q,
+            size: "s",
+            iconSize: "l"
+          }
+        ),
+        /* @__PURE__ */ i.createElement(
+          j,
+          {
+            min: 0,
+            max: 100,
+            step: 1,
+            value: s,
+            onChange: m,
+            css: { blockSize: 32 }
+          }
+        )
+      ))
+    );
+  }
+), Ge = y(
+  ({
+    playQueueStore: t,
+    closePopover: e
+  }) => {
+    const n = R(), s = u(async () => {
+      const f = await n.getCurrentTime();
+      f !== void 0 && await n.setCurrentTime(f - 10), e();
+    }, [n, e]), a = u(async () => {
+      const f = await n.getCurrentTime();
+      f !== void 0 && await n.setCurrentTime(f + 30), e();
+    }, [n, e]), l = u(
+      async (f) => {
+        await n.setPlaybackRate(f), e();
+      },
+      [n, e]
+    ), m = u(async () => {
+      t.currentItem !== void 0 && await t.removeItems([
+        t.currentItem
+      ]), e();
+    }, [t, e]), [d] = g(), T = G(
+      () => [
+        {
+          id: 0,
+          items: [
+            {
+              name: "Speed",
+              icon: /* @__PURE__ */ i.createElement(E, { type: Te, size: "m" }),
+              panel: 1
+            },
+            {
+              name: "Skip back 10 seconds",
+              icon: /* @__PURE__ */ i.createElement(E, { type: xe, size: "m" }),
+              onClick: s,
+              disabled: t.isEmpty
+            },
+            {
+              name: "Skip forward 30 seconds",
+              icon: /* @__PURE__ */ i.createElement(E, { type: Re, size: "m" }),
+              onClick: a,
+              disabled: t.isEmpty
+            },
+            {
+              isSeparator: !0
+            },
+            {
+              name: "Remove from play queue",
+              icon: /* @__PURE__ */ i.createElement(E, { type: B, size: "m" }),
+              onClick: m,
+              disabled: t.isEmpty
+            }
+          ]
+        },
+        {
+          id: 1,
+          title: "Speed",
+          items: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
+            (f) => ({
+              name: f.toString(),
+              onClick: () => l(f),
+              icon: f === d ? "check" : "empty"
+            })
+          )
+        }
+      ],
+      [
+        t,
+        s,
+        a,
+        m,
+        l,
+        d
+      ]
+    );
+    return /* @__PURE__ */ i.createElement(ie, { initialPanelId: 0, panels: T });
+  }
+), We = y(
+  ({
+    playQueueStore: t,
+    button: e,
+    isOpen: n,
+    closePopover: s
+  }) => /* @__PURE__ */ i.createElement(
+    F,
+    {
+      button: e,
+      isOpen: n,
+      closePopover: s,
+      panelPaddingSize: "none",
+      anchorPosition: "upRight"
+    },
+    /* @__PURE__ */ i.createElement(
+      Ge,
+      {
+        playQueueStore: t,
+        closePopover: s
+      }
+    )
+  )
+), Xe = {
+  [o.Off]: we,
+  [o.All]: ke,
+  [o.One]: Ce
+}, Ye = h(
+  ({
+    playerStore: t,
+    playQueueStore: e
+  }) => {
+    const n = R(), s = u(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__ */ i.createElement(
+      C,
+      {
+        responsive: !1,
+        gutterSize: "s",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ i.createElement(
+        I,
+        {
+          title: `Shuffle: ${e.shuffle ? "On" : "Off"}`,
+          "aria-label": `Shuffle: ${e.shuffle ? "On" : "Off"}`,
+          iconType: e.shuffle ? Pe : Se,
+          size: "s",
+          iconSize: "l",
+          onClick: e.toggleShuffle,
+          disabled: !0
+        }
+      ),
+      /* @__PURE__ */ i.createElement(
+        I,
+        {
+          title: "Previous",
+          "aria-label": "Previous",
+          iconType: Oe,
+          size: "s",
+          iconSize: "l",
+          onClick: s,
+          disabled: e.isEmpty
+        }
+      ),
+      t.playing ? /* @__PURE__ */ i.createElement(
+        I,
+        {
+          title: "Pause",
+          "aria-label": "Pause",
+          iconType: Ae,
+          size: "s",
+          iconSize: "l",
+          onClick: () => n.pause(),
+          disabled: !e.canPlay
+        }
+      ) : /* @__PURE__ */ i.createElement(
+        I,
+        {
+          title: "Play",
+          "aria-label": "Play",
+          iconType: ze,
+          size: "s",
+          iconSize: "l",
+          onClick: () => n.play(),
+          disabled: !e.canPlay
+        }
+      ),
+      /* @__PURE__ */ i.createElement(
+        I,
+        {
+          title: "Next",
+          "aria-label": "Next",
+          iconType: Me,
+          size: "s",
+          iconSize: "l",
+          onClick: e.next,
+          disabled: !e.hasNextItem
+        }
+      ),
+      /* @__PURE__ */ i.createElement(
+        I,
+        {
+          title: `Repeat: ${e.repeat === o.All ? "All" : e.repeat === o.One ? "One" : "Off"}`,
+          "aria-label": `Repeat: ${e.repeat === o.All ? "All" : e.repeat === o.One ? "One" : "Off"}`,
+          iconType: Xe[e.repeat],
+          size: "s",
+          iconSize: "l",
+          onClick: e.toggleRepeat
+        }
+      )
+    );
+  }
+), Ke = y(() => {
+  const [t, e] = g(!1), n = () => e(!t);
+  return /* @__PURE__ */ i.createElement(
+    Je,
+    {
+      button: /* @__PURE__ */ i.createElement(
+        I,
+        {
+          title: "Volume",
+          "aria-label": "Volume",
+          iconType: q,
+          size: "s",
+          iconSize: "l",
+          onClick: n
+        }
+      ),
+      isOpen: t,
+      closePopover: () => e(!1)
+    }
+  );
+}), Ze = y(
+  ({ playQueueStore: t }) => {
+    const [e, n] = g(!1), s = () => n(!e);
+    return /* @__PURE__ */ i.createElement(
+      We,
+      {
+        playQueueStore: t,
+        button: /* @__PURE__ */ i.createElement(
+          I,
+          {
+            title: "More options",
+            "aria-label": "More options",
+            iconType: J,
+            size: "s",
+            iconSize: "l",
+            onClick: s
+          }
+        ),
+        isOpen: e,
+        closePopover: () => n(!1)
+      }
+    );
+  }
+), _e = y(
+  ({ playQueueStore: t }) => /* @__PURE__ */ i.createElement(
+    C,
+    {
+      responsive: !1,
+      gutterSize: "s",
+      justifyContent: "flexEnd",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ i.createElement(Ke, null),
+    /* @__PURE__ */ i.createElement(Ze, { playQueueStore: t })
+  )
+), Pt = h(
+  ({ playerStore: t, playQueueStore: e }) => /* @__PURE__ */ i.createElement(se, { paddingSize: "s" }, /* @__PURE__ */ i.createElement(C, { direction: "column", gutterSize: "none" }, /* @__PURE__ */ i.createElement(v, null, /* @__PURE__ */ i.createElement(qe, { playerStore: t })), /* @__PURE__ */ i.createElement(v, null, /* @__PURE__ */ i.createElement(C, { responsive: !1 }, /* @__PURE__ */ i.createElement(v, { css: { width: "calc(100% / 3)" } }), /* @__PURE__ */ i.createElement(v, { css: { width: "calc(100% / 3)" } }, /* @__PURE__ */ i.createElement(
+    Ye,
+    {
+      playerStore: t,
+      playQueueStore: e
+    }
+  )), /* @__PURE__ */ i.createElement(v, { css: { width: "calc(100% / 3)" } }, /* @__PURE__ */ i.createElement(
+    _e,
+    {
+      playQueueStore: e
+    }
+  ))))))
+), Qe = ({
+  onCancel: t,
+  onSave: e
+}) => {
+  const [n, s] = g(""), [a, l] = g(""), [m, d] = g(!1);
+  return /* @__PURE__ */ React.createElement(re, { onClose: t, initialFocus: "[name=url]" }, /* @__PURE__ */ React.createElement(ae, null, /* @__PURE__ */ React.createElement(le, null, "Add video")), /* @__PURE__ */ React.createElement(oe, null, /* @__PURE__ */ React.createElement(ce, { component: "form" }, /* @__PURE__ */ React.createElement(S, { label: "URL" }, /* @__PURE__ */ React.createElement(
+    V,
+    {
+      name: "url",
+      value: n,
+      onChange: (T) => s(T.target.value)
+    }
+  )), /* @__PURE__ */ React.createElement(S, { label: "Title" }, /* @__PURE__ */ React.createElement(
+    V,
+    {
+      name: "title",
+      value: a,
+      onChange: (T) => l(T.target.value)
+    }
+  )))), /* @__PURE__ */ React.createElement(me, null, /* @__PURE__ */ React.createElement(de, { onClick: t }, "Cancel"), /* @__PURE__ */ React.createElement(
+    x,
+    {
+      type: "submit",
+      onClick: async () => {
+        try {
+          d(!0), await e({ url: n, title: a });
+        } finally {
+          d(!1);
+        }
+      },
+      fill: !0,
+      disabled: n.trim().length === 0,
+      isLoading: m
+    },
+    "Save"
+  )));
+};
+function et(t) {
+  return t !== null && typeof t == "object" && "title" in t && typeof t.title == "string";
+}
+const tt = y(
+  ({ playQueueStore: t }) => {
+    const [e, n] = g(!1), s = u(
+      async (a) => {
+        const l = te(a.url);
+        if (l !== void 0) {
+          const m = l.extractVideoId(a.url);
+          if (m !== void 0) {
+            const T = await (await fetch(
+              `https://noembed.com/embed?url=${encodeURIComponent(
+                a.url
+              )}`
+            )).json();
+            await t.addItems([
+              t.createItem({
+                url: a.url,
+                type: l.type,
+                videoId: m,
+                title: a.title || (et(T) ? T.title : m)
+              })
+            ]);
+          }
+        }
+        n(!1);
+      },
+      [t]
+    );
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      x,
+      {
+        onClick: () => n(!0),
+        iconType: N,
+        color: "primary"
+      },
+      "Add video"
+    ), e && /* @__PURE__ */ React.createElement(
+      Qe,
+      {
+        onCancel: () => n(!1),
+        onSave: s
+      }
+    ));
+  }
+), nt = h(
+  ({ playQueueStore: t }) => {
+    const { euiTheme: e } = H();
+    return /* @__PURE__ */ i.createElement(
+      ue,
+      {
+        style: {
+          position: "sticky",
+          top: 112,
+          zIndex: 998,
+          background: e.colors.backgroundBasePlain
+        }
+      },
+      /* @__PURE__ */ i.createElement(he, null, /* @__PURE__ */ i.createElement(
+        U,
+        {
+          id: "",
+          checked: t.allItemsSelected,
+          onChange: (n) => {
+            t.allItemsSelected = n.target.checked;
+          }
+        }
+      )),
+      /* @__PURE__ */ i.createElement(w, { width: 24 }),
+      /* @__PURE__ */ i.createElement(w, null, "Title"),
+      /* @__PURE__ */ i.createElement(w, null)
+    );
+  }
+), it = y(
+  ({
+    item: t,
+    closePopover: e
+  }) => {
+    const n = y(
+      ({
+        onClick: s,
+        ...a
+      }) => {
+        const l = u(
+          (m) => {
+            e(), s == null || s(m);
+          },
+          [s]
+        );
+        return /* @__PURE__ */ i.createElement(pe, { ...a, onClick: l });
+      }
+    );
+    return /* @__PURE__ */ i.createElement(ge, null, /* @__PURE__ */ i.createElement(
+      n,
+      {
+        icon: /* @__PURE__ */ i.createElement(E, { type: "" }),
+        onClick: t.playFirst
+      },
+      "Play first"
+    ), /* @__PURE__ */ i.createElement(
+      n,
+      {
+        icon: /* @__PURE__ */ i.createElement(E, { type: "" }),
+        onClick: t.playNext
+      },
+      "Play next"
+    ), /* @__PURE__ */ i.createElement(
+      n,
+      {
+        icon: /* @__PURE__ */ i.createElement(E, { type: N }),
+        onClick: t.addToPlayQueue
+      },
+      "Add to play queue"
+    ), /* @__PURE__ */ i.createElement(L, { margin: "none" }), /* @__PURE__ */ i.createElement(
+      n,
+      {
+        icon: /* @__PURE__ */ i.createElement(E, { type: Fe }),
+        onClick: t.moveToTop,
+        disabled: !t.canMoveToTop
+      },
+      "Move to the top"
+    ), /* @__PURE__ */ i.createElement(
+      n,
+      {
+        icon: /* @__PURE__ */ i.createElement(E, { type: Be }),
+        onClick: t.moveToBottom,
+        disabled: !t.canMoveToBottom
+      },
+      "Move to the bottom"
+    ), /* @__PURE__ */ i.createElement(L, { margin: "none" }), /* @__PURE__ */ i.createElement(
+      n,
+      {
+        icon: /* @__PURE__ */ i.createElement(E, { type: "" }),
+        onClick: t.removeToTop,
+        disabled: !t.canRemoveToTop
+      },
+      "Remove to the top"
+    ), /* @__PURE__ */ i.createElement(
+      n,
+      {
+        icon: /* @__PURE__ */ i.createElement(E, { type: "" }),
+        onClick: t.removeOthers,
+        disabled: !t.canRemoveOthers
+      },
+      "Remove others"
+    ));
+  }
+), st = y(
+  ({ item: t }) => {
+    const [e, n] = g(!1), s = u(() => n(!e), [e]), a = u(() => n(!1), []);
+    return /* @__PURE__ */ i.createElement(
+      F,
+      {
+        button: /* @__PURE__ */ i.createElement(
+          I,
+          {
+            title: "More options",
+            "aria-label": "More options",
+            iconType: J,
+            size: "s",
+            color: "text",
+            onClick: s
+          }
+        ),
+        isOpen: e,
+        closePopover: a,
+        panelPaddingSize: "none",
+        anchorPosition: "leftCenter"
+      },
+      /* @__PURE__ */ i.createElement(
+        it,
+        {
+          item: t,
+          closePopover: a
+        }
+      )
+    );
+  }
+), rt = h(
+  ({ item: t }) => {
+    const e = R();
+    return /* @__PURE__ */ i.createElement(O, { textOnly: !1, hasActions: !0, align: "right" }, /* @__PURE__ */ i.createElement(
+      x,
+      {
+        iconType: Ne,
+        size: "s",
+        onClick: async () => {
+          t.isCurrent ? await e.setCurrentTime(0) : t.play();
+        }
+      },
+      "Play"
+    ), /* @__PURE__ */ i.createElement(
+      x,
+      {
+        iconType: B,
+        size: "s",
+        onClick: t.remove
+      },
+      "Remove"
+    ), /* @__PURE__ */ i.createElement(st, { item: t }));
+  }
+), at = {
+  Audio: "",
+  Dailymotion: "https://www.dailymotion.com/favicon.ico",
+  Niconico: "https://www.nicovideo.jp/favicon.ico",
+  SoundCloud: "https://soundcloud.com/favicon.ico",
+  Twitch: "https://www.twitch.tv/favicon.ico",
+  Vimeo: "https://vimeo.com/favicon.ico",
+  YouTube: "https://www.youtube.com/favicon.ico"
+}, lt = h(
+  ({ item: t }) => {
+    const e = R();
+    return /* @__PURE__ */ i.createElement(fe, { key: t.id, isSelected: t.isCurrent }, /* @__PURE__ */ i.createElement(Ee, null, /* @__PURE__ */ i.createElement(
+      U,
+      {
+        id: t.id.toString(),
+        checked: t.isSelected,
+        onChange: t.toggleSelected
+      }
+    )), /* @__PURE__ */ i.createElement(O, { textOnly: !1 }, /* @__PURE__ */ i.createElement(
+      "img",
+      {
+        src: at[t.type],
+        width: 16,
+        height: 16,
+        alt: t.type
+      }
+    )), /* @__PURE__ */ i.createElement(O, null, /* @__PURE__ */ i.createElement(
+      ve,
+      {
+        href: t.url,
+        target: "_blank",
+        external: !0,
+        onClick: () => e.pause()
+      },
+      t.title
+    )), /* @__PURE__ */ i.createElement(rt, { item: t }));
+  }
+), ot = h(
+  ({ playQueueStore: t }) => /* @__PURE__ */ i.createElement(
+    je,
+    {
+      tag: "tbody",
+      list: t.items,
+      setList: (e) => t.setItems(e)
+    },
+    t.items.map((e) => /* @__PURE__ */ i.createElement(lt, { key: e.id, item: e }))
+  )
+), ct = h(
+  ({ playQueueStore: t }) => /* @__PURE__ */ i.createElement(Ie, null, /* @__PURE__ */ i.createElement(nt, { playQueueStore: t }), /* @__PURE__ */ i.createElement(ot, { playQueueStore: t }))
+), mt = h(
+  ({ playQueueStore: t }) => {
+    const [e, n] = g(!1);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, e && /* @__PURE__ */ React.createElement(
+      ye,
+      {
+        type: "push",
+        size: "s",
+        onClose: () => n(!1)
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { blockSize: "100%" } }, /* @__PURE__ */ React.createElement(
+        be,
+        {
+          language: "json",
+          overflowHeight: "100%",
+          isCopyable: !0,
+          isVirtualized: !0
+        },
+        JSON.stringify(
+          t.localStorageState,
+          void 0,
+          2
+        )
+      ))
+    ), /* @__PURE__ */ React.createElement(tt, { playQueueStore: t }));
+  }
+), dt = h(
+  ({ playerStore: t, playQueueStore: e }) => {
+    const { euiTheme: n } = H();
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      C,
+      {
+        alignItems: "center",
+        gutterSize: "m",
+        style: {
+          position: "sticky",
+          top: 48,
+          zIndex: 998,
+          background: n.colors.backgroundBasePlain
+        }
+      },
+      /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(
+        x,
+        {
+          disabled: e.isEmpty || e.selectedItems.length === 0,
+          onClick: e.playSelectedItemsNext
+        },
+        "Play next"
+      )),
+      /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(
+        x,
+        {
+          iconType: N,
+          onClick: e.addSelectedItems,
+          disabled: e.isEmpty || e.selectedItems.length === 0
+        },
+        "Add to play queue"
+      )),
+      /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(
+        x,
+        {
+          iconType: B,
+          onClick: e.removeSelectedItems,
+          disabled: e.isEmpty || e.selectedItems.length === 0
+        },
+        "Remove"
+      )),
+      /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(
+        x,
+        {
+          iconType: Ve,
+          onClick: e.clear,
+          disabled: e.isEmpty
+        },
+        "Clear"
+      )),
+      /* @__PURE__ */ React.createElement(v, { grow: !0 }),
+      /* @__PURE__ */ React.createElement(v, { grow: !1 }, /* @__PURE__ */ React.createElement(mt, { playQueueStore: e }))
+    ), !e.isEmpty && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      $,
+      {
+        size: "l",
+        style: {
+          position: "sticky",
+          top: 88,
+          zIndex: 998,
+          background: n.colors.backgroundBasePlain
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(ct, { playQueueStore: e })));
+  }
+), St = h(
+  ({ playerStore: t, playQueueStore: e }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    A.Header,
+    {
+      pageTitle: "Play queue",
+      rightSideItems: []
+    }
+  ), /* @__PURE__ */ React.createElement(A.Section, null, /* @__PURE__ */ React.createElement(
+    dt,
+    {
+      playerStore: t,
+      playQueueStore: e
+    }
+  )))
+), z = {
+  width: 16 * 25,
+  height: 9 * 25
+}, Ot = h(
+  ({ playerStore: t, playQueueStore: e }) => {
+    const n = R(), s = u(async () => {
+      e.interacted && await n.play();
+    }, [e, n]), a = u(async () => {
+      switch (e.repeat) {
+        case o.One:
+          await n.setCurrentTime(0);
+          break;
+        case o.Off:
+        case o.All:
+          if (e.isLastItem)
+            switch (e.repeat) {
+              case o.Off:
+                t.onEnded();
+                break;
+              case o.All:
+                e.hasMultipleItems ? await e.goToFirst() : await n.setCurrentTime(0);
+                break;
+            }
+          else
+            await e.next();
+          break;
+      }
+    }, [e, t, n]), l = G(
+      () => ({
+        onLoaded: s,
+        onPlay: t.onPlay,
+        onPause: t.onPause,
+        onEnded: a,
+        onTimeUpdate: t.onTimeUpdate
+      }),
+      [t, s, a]
+    );
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        css: {
+          position: "fixed",
+          right: 0,
+          bottom: Y,
+          width: z.width,
+          height: z.height,
+          zIndex: 998,
+          backgroundColor: "rgb(39, 39, 39)",
+          display: "flex",
+          flexDirection: "column"
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { css: { flexGrow: 1, backgroundColor: "black" } }, e.currentItem && /* @__PURE__ */ React.createElement(
+        ne,
+        {
+          src: e.currentItem.url,
+          options: l
+        }
+      ))
+    );
+  }
+);
+class K {
+  makeObservable(e, n) {
+    return He(e, n);
+  }
+}
+const k = class k {
+  constructor(e, n, s) {
+    p(this, "id");
+    p(this, "isSelected", !1);
+    this.observableStateProvider = e, this.playQueueStore = n, this.dto = s, this.id = k.nextId++, e.makeObservable(this, {
+      isSelected: b,
+      isCurrent: c,
+      index: c,
+      isFirst: c,
+      isLast: c,
+      canMoveToTop: c,
+      canMoveToBottom: c,
+      canRemoveToTop: c,
+      canRemoveOthers: c,
+      unselect: r,
+      toggleSelected: r.bound,
+      play: r,
+      remove: r.bound,
+      playFirst: r.bound,
+      playNext: r.bound,
+      addToPlayQueue: r.bound,
+      moveToTop: r.bound,
+      moveToBottom: r.bound,
+      removeToTop: r.bound,
+      removeOthers: r.bound
+    });
+  }
+  static fromDto(e, n, s) {
+    return new k(
+      e,
+      n,
+      s
+    );
+  }
+  get url() {
+    return this.dto.url;
+  }
+  get type() {
+    return this.dto.type;
+  }
+  get videoId() {
+    return this.dto.videoId;
+  }
+  get title() {
+    return this.dto.title;
+  }
+  get isCurrent() {
+    return this.playQueueStore.currentItem === this;
+  }
+  get index() {
+    return this.playQueueStore.items.indexOf(this);
+  }
+  get isFirst() {
+    return this.index === 0;
+  }
+  get isLast() {
+    return this.index === this.playQueueStore.items.length - 1;
+  }
+  get canMoveToTop() {
+    return !this.isFirst;
+  }
+  get canMoveToBottom() {
+    return !this.isLast;
+  }
+  get canRemoveToTop() {
+    return !this.isFirst;
+  }
+  get canRemoveOthers() {
+    return this.playQueueStore.hasMultipleItems;
+  }
+  clone() {
+    return this.playQueueStore.createItem(this.dto);
+  }
+  unselect() {
+    this.isSelected = !1;
+  }
+  toggleSelected() {
+    this.isSelected = !this.isSelected;
+  }
+  play() {
+    this.playQueueStore.setCurrentItem(this);
+  }
+  remove() {
+    return this.playQueueStore.removeItems([this]);
+  }
+  async playFirst() {
+    await this.playQueueStore.playFirst([this.clone()]);
+  }
+  async playNext() {
+    await this.playQueueStore.playNext([this.clone()]);
+  }
+  async addToPlayQueue() {
+    await this.playQueueStore.addItems([this.clone()]);
+  }
+  moveToTop() {
+    this.playQueueStore.moveItem(this, 0);
+  }
+  moveToBottom() {
+    this.playQueueStore.moveItem(
+      this,
+      this.playQueueStore.items.length - 1
+    );
+  }
+  removeToTop() {
+    return this.playQueueStore.removeItemsAbove(this);
+  }
+  removeOthers() {
+    return this.playQueueStore.removeOtherItems(this);
+  }
+};
+p(k, "nextId", 1);
+let M = k;
+const P = new $e({
+  coerceTypes: !0
+});
+function ut(t, e) {
+  let n;
+  if (n = P.getSchema(e), n === void 0 && (P.addSchema(t, e), n = P.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 ht = {
+  type: "object",
+  properties: {
+    version: {
+      type: "string",
+      nullable: !0
+    },
+    repeat: {
+      type: "string",
+      enum: Object.values(o),
+      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
+    }
+  }
+}, pt = ut(
+  ht,
+  "PlayQueueStore"
+);
+class gt {
+  constructor(e) {
+    p(this, "interacted", !1);
+    p(this, "items", []);
+    p(this, "currentId");
+    p(this, "repeat", o.Off);
+    p(this, "shuffle", !1);
+    this.observableStateProvider = e, e.makeObservable(this, {
+      interacted: b,
+      items: b,
+      currentId: b,
+      repeat: b,
+      shuffle: b,
+      localStorageState: c.struct,
+      isEmpty: c,
+      currentItem: c,
+      canPlay: c,
+      canPause: c,
+      hasMultipleItems: c,
+      currentIndex: c,
+      hasPreviousItem: c,
+      hasNextItem: c,
+      isLastItem: c,
+      selectedItems: c,
+      allItemsSelected: c,
+      selectedItemsOrAllItems: c,
+      setItems: r,
+      interact: r,
+      clear: r.bound,
+      unselectAll: r,
+      setCurrentItem: r,
+      setNextItems: r,
+      clearAndSetItems: r,
+      playNext: r,
+      playSelectedItemsNext: r.bound,
+      addItems: r,
+      addSelectedItems: r.bound,
+      playFirst: r,
+      moveItem: r,
+      removeItems: r,
+      removeSelectedItems: r.bound,
+      removeOtherItems: r,
+      removeItemsAbove: r,
+      toggleRepeat: r.bound,
+      toggleShuffle: r.bound,
+      previous: r,
+      next: r.bound,
+      goToFirst: r
+    });
+  }
+  createItem(e) {
+    return M.fromDto(
+      this.observableStateProvider,
+      this,
+      e
+    );
+  }
+  get localStorageState() {
+    return {
+      version: "1.0",
+      repeat: this.repeat,
+      shuffle: this.shuffle,
+      items: this.items.map((e) => e.dto),
+      currentIndex: this.currentIndex
+    };
+  }
+  set localStorageState(e) {
+    var n;
+    this.repeat = e.repeat ?? o.Off, this.shuffle = e.shuffle ?? !1, this.items = ((n = e.items) == null ? void 0 : n.map((s) => this.createItem(s))) ?? [], this.currentIndex = e.currentIndex;
+  }
+  validateLocalStorageState(e) {
+    return pt(e);
+  }
+  get isEmpty() {
+    return this.items.length === 0;
+  }
+  get currentItem() {
+    return this.items.find((e) => e.id === this.currentId);
+  }
+  get canPlay() {
+    return this.currentItem !== void 0;
+  }
+  get canPause() {
+    return this.currentItem !== void 0;
+  }
+  get hasMultipleItems() {
+    return this.items.length > 1;
+  }
+  get currentIndex() {
+    return this.currentId !== void 0 ? this.items.findIndex((e) => e.id === this.currentId) : void 0;
+  }
+  set currentIndex(e) {
+    var n;
+    this.currentId = e !== void 0 ? (n = this.items.at(e)) == null ? void 0 : n.id : void 0;
+  }
+  get hasPreviousItem() {
+    return this.hasMultipleItems && this.currentIndex !== void 0 && this.currentIndex > 0;
+  }
+  get hasNextItem() {
+    return this.hasMultipleItems && this.currentIndex !== void 0 && this.currentIndex < this.items.length - 1;
+  }
+  get isLastItem() {
+    return this.currentIndex !== void 0 && this.currentIndex === this.items.length - 1;
+  }
+  get selectedItems() {
+    return this.items.filter((e) => e.isSelected);
+  }
+  get allItemsSelected() {
+    return this.selectedItems.length === this.items.length;
+  }
+  set allItemsSelected(e) {
+    for (const n of this.items)
+      n.isSelected = e;
+  }
+  get selectedItemsOrAllItems() {
+    return this.selectedItems.length > 0 ? this.selectedItems : this.items;
+  }
+  setItems(e) {
+    this.items = e;
+  }
+  interact() {
+    this.interacted = !0;
+  }
+  clear() {
+    this.interact(), this.currentIndex = void 0, this.items = [];
+  }
+  unselectAll() {
+    for (const e of this.items)
+      e.unselect();
+  }
+  setCurrentItem(e) {
+    this.interact(), this.currentId = e == null ? void 0 : e.id;
+  }
+  setNextItems(e) {
+    this.currentIndex !== void 0 && this.items.splice(this.currentIndex + 1, 0, ...e);
+  }
+  clearAndSetItems(e) {
+    this.clear(), this.setCurrentItem(e[0]), this.setNextItems(e);
+  }
+  async playNext(e) {
+    if (this.isEmpty) {
+      this.clearAndSetItems(e);
+      return;
+    }
+    this.setNextItems(e);
+  }
+  async playSelectedItemsNext() {
+    await this.playNext(
+      this.selectedItemsOrAllItems.map((e) => e.clone())
+    ), this.unselectAll();
+  }
+  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 s = this.items.splice(this.items.indexOf(e), 1)[0];
+    this.items.splice(n, 0, s);
+  }
+  async removeItems(e) {
+    const { currentItem: n } = this;
+    D(this.items, ...e.filter((l) => l !== n));
+    const { currentIndex: s, isLastItem: a } = this;
+    D(
+      this.items,
+      e.find((l) => l === n)
+    ), this.currentItem !== n && (this.interact(), a ? await this.goToFirst() : this.currentIndex = s);
+  }
+  async removeSelectedItems() {
+    await this.removeItems(this.selectedItemsOrAllItems), this.unselectAll();
+  }
+  async removeOtherItems(e) {
+    const n = e.id;
+    return this.removeItems(
+      this.items.filter((s) => s.id !== n)
+    );
+  }
+  async removeItemsAbove(e) {
+    const n = this.items.indexOf(e);
+    return this.removeItems(
+      this.items.filter((s, a) => a < n)
+    );
+  }
+  toggleRepeat() {
+    switch (this.repeat) {
+      case o.Off:
+        this.repeat = o.All;
+        break;
+      case o.All:
+        this.repeat = o.One;
+        break;
+      case o.One:
+        this.repeat = o.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 Z = W(void 0), At = ({
+  children: t
+}) => {
+  const [e] = g(
+    () => new gt(new K())
+  ), n = R();
+  return De(() => Ue(
+    () => e.currentItem,
+    async (s, a) => {
+      s === void 0 || a === void 0 || s.type === a.type && s.videoId === a.videoId && await n.setCurrentTime(0);
+    }
+  ), [e, n]), /* @__PURE__ */ React.createElement(Z.Provider, { value: e }, t);
+}, ft = () => X(Z), zt = h(
+  ({ children: t }) => {
+    const e = ft();
+    return /* @__PURE__ */ React.createElement(
+      A,
+      {
+        panelled: !0,
+        style: {
+          minBlockSize: `max(460px, 100vh - ${Y}px)`
+        }
+      },
+      t,
+      !e.isEmpty && /* @__PURE__ */ React.createElement($, { style: { blockSize: z.height } })
+    );
+  }
+);
+class Et {
+  constructor(e) {
+    p(this, "playing", !1);
+    p(this, "percent", 0);
+    p(this, "seeking", !1);
+    e.makeObservable(this, {
+      playing: b,
+      percent: b,
+      seeking: b,
+      setPlaying: r,
+      setPercent: r,
+      setSeeking: r,
+      onPlay: r.bound,
+      onPause: r.bound,
+      onEnded: r.bound,
+      onTimeUpdate: r.bound
+    });
+  }
+  setPlaying(e) {
+    this.playing = e;
+  }
+  setPercent(e) {
+    this.percent = e;
+  }
+  setSeeking(e) {
+    this.seeking = e;
+  }
+  onPlay() {
+    this.playing = !0;
+  }
+  onPause() {
+    this.playing = !1;
+  }
+  onEnded() {
+    this.playing = !1;
+  }
+  onTimeUpdate({ percent: e }) {
+    e !== void 0 && (this.seeking || (this.percent = e));
+  }
+}
+const _ = W(void 0), Mt = ({
+  children: t
+}) => {
+  const [e] = g(
+    () => new Et(new K())
+  );
+  return /* @__PURE__ */ React.createElement(_.Provider, { value: e }, t);
+}, Ft = () => X(_);
+class Bt {
+  makeObservable(e, n) {
+    return e;
+  }
+}
+export {
+  Pt as BottomBar,
+  St as HydrangeanDiva,
+  zt as MediaPlayerLayout,
+  Ot as MiniPlayer,
+  K as MobXObservableStateProvider,
+  Bt as ObservableStateProvider,
+  At as PlayQueueStoreProvider,
+  Mt as PlayerStoreProvider,
+  o as RepeatMode,
+  Y as bottomBarHeight,
+  z as miniPlayerSize,
+  ft as usePlayQueueStore,
+  Ft as usePlayerStore
+};
+//# sourceMappingURL=index.es.js.map