@aigamo/hydrangean-diva
Version:
An open-source online media player that can be deployed to and hosted on GitHub pages.
1,752 lines • 65.5 kB
JavaScript
import { Fragment as e, jsx as t, jsxs as n } from "@emotion/react/jsx-runtime";
import { createContext as r, memo as i, useCallback as a, useContext as o, useEffect as s, useLayoutEffect as c, useMemo as l, useState as u } from "react";
import d from "ajv";
import { action as f, computed as p, makeObservable as m, observable as h, reaction as ee } from "mobx";
import { useLocalStorageState as g } from "@aigamo/route-sphere";
import { pull as te } from "lodash-es";
import { NostalgicDiva as ne, NostalgicDivaProvider as re, findVideoService as ie, nullPlayerController as ae, useNostalgicDiva as _ } from "@aigamo/nostalgic-diva";
import { EuiBottomBar as oe, EuiButton as v, EuiButtonEmpty as y, EuiButtonIcon as b, EuiCheckbox as x, EuiConfirmModal as se, EuiContextMenu as S, EuiEmptyPrompt as ce, EuiFieldText as le, EuiFlexGroup as C, EuiFlexItem as w, EuiForm as ue, EuiFormRow as T, EuiHideFor as E, EuiIcon as D, EuiLink as de, EuiModal as fe, EuiModalBody as pe, EuiModalFooter as me, EuiModalHeader as he, EuiModalHeaderTitle as ge, EuiPageTemplate as O, EuiPopover as k, EuiRange as _e, EuiShowFor as ve, EuiSpacer as ye, EuiTable as be, EuiTableHeader as xe, EuiTableHeaderCell as A, EuiTableHeaderCellCheckbox as Se, EuiTableHeaderMobile as Ce, EuiTableRow as we, EuiTableRowCell as j, EuiTableRowCellCheckbox as Te, useEuiTheme as M, useGeneratedHtmlId as Ee } from "@elastic/eui";
import { observer as N } from "mobx-react-lite";
import { AddRegular as P, ArrowDownloadRegular as De, ArrowRepeat1Filled as Oe, ArrowRepeatAllFilled as ke, ArrowRepeatAllOffFilled as Ae, ArrowShuffleFilled as je, ArrowShuffleOffFilled as Me, ArrowUploadRegular as Ne, DeleteRegular as Pe, DismissRegular as F, MoreHorizontalFilled as I, NavigationPlayRegular as Fe, NextFilled as Ie, OpenRegular as Le, PauseFilled as Re, PlayFilled as ze, PlayRegular as L, PreviousFilled as Be, RenameRegular as Ve, SkipBack10Regular as He, SkipForward30Regular as Ue, Speaker2Regular as We, TopSpeedRegular as Ge } from "@fluentui/react-icons";
import R from "ez-modal-react";
import { ReactSortable as Ke } from "react-sortablejs";
import { useRouter as qe } from "@tanstack/react-router";
//#region src/features/common/helpers/bottomBarHeight.ts
var Je = 81, z = new Map(Object.entries({
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"
})), Ye = ({ components: n = [], children: r }) => /* @__PURE__ */ t(e, { children: n.reduceRight((e, n) => /* @__PURE__ */ t(n, { children: e }), r) }), B = {
playQueue: "PlayQueueStore",
bottomBar: "BottomBarStore",
playlistList: "PlaylistListStore",
playlist: (e) => `PlaylistStore/${e}`
}, Xe = r(void 0), V = () => o(Xe), Ze = new d({ coerceTypes: !0 });
function Qe(e, t) {
let n;
if (n = Ze.getSchema(t), n === void 0 && (Ze.addSchema(e, t), n = Ze.getSchema(t)), n === void 0 || n.schema !== e) throw Error(`Invalid schema. Expected: '${JSON.stringify(e)}', but got '${JSON.stringify(n?.schema)}'.`);
return n;
}
//#endregion
//#region src/features/media-player.play-queue.abstractions/interfaces/RepeatMode.ts
var H = /* @__PURE__ */ function(e) {
return e.Off = "Off", e.All = "All", e.One = "One", e;
}({});
//#endregion
//#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
function U(e, t, n, r) {
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
return i > 3 && a && Object.defineProperty(t, n, a), a;
}
//#endregion
//#region src/features/media-player.bottom-bar/stores/BottomBarStore.ts
var $e = {
type: "object",
properties: {
repeat: {
type: "string",
enum: Object.values(H),
nullable: !0
},
shuffle: {
type: "boolean",
nullable: !0
}
}
}, et = class {
bottomBar;
constructor(e) {
this.bottomBar = e, m(this);
}
get state() {
return {
repeat: this.bottomBar.repeat,
shuffle: this.bottomBar.shuffle
};
}
set state(e) {
this.bottomBar.repeat = e.repeat ?? H.Off, this.bottomBar.shuffle = e.shuffle ?? !1;
}
validateState(e) {
return Qe($e, "BottomBarLocalStorageState")(e);
}
};
U([p.struct], et.prototype, "state", null);
var W = class {
player;
playQueue;
localStorageState;
repeat = H.Off;
shuffle = !1;
constructor(e, t) {
this.player = e, this.playQueue = t, m(this), this.localStorageState = new et(this);
}
get controller() {
return this.player.controller;
}
get playing() {
return this.player.playing;
}
get percent() {
return this.player.percent;
}
get canSeek() {
return !this.playQueue.isEmpty && this.controller.supports("setCurrentTime");
}
get currentItem() {
return this.playQueue.currentItem;
}
get canToggleRepeat() {
return !0;
}
get canToggleShuffle() {
return !1;
}
get canPlay() {
return this.playQueue.canPlay && this.controller.supports("play");
}
get canPause() {
return this.playQueue.canPause && this.controller.supports("pause");
}
get canPrevious() {
return !this.playQueue.isEmpty;
}
get canNext() {
return this.playQueue.hasNextItem;
}
get canSkipBack10() {
return this.canSeek;
}
get canSkipForward30() {
return this.canSeek;
}
get canRemoveFromPlayQueue() {
return !this.playQueue.isEmpty;
}
setPercent(e) {
this.player.setPercent(e);
}
setSeeking(e) {
this.player.setSeeking(e);
}
toggleRepeat() {
switch (this.repeat) {
case H.Off:
this.repeat = H.All;
break;
case H.All:
this.repeat = H.One;
break;
case H.One:
this.repeat = H.Off;
break;
}
}
toggleShuffle() {
this.shuffle = !this.shuffle;
}
play() {
return this.controller.play();
}
pause() {
return this.controller.pause();
}
async previous() {
if (this.playQueue.hasPreviousItem) {
let e = await this.controller.getCurrentTime();
e === void 0 || e < 5 ? await this.playQueue.previous() : await this.controller.setCurrentTime(0);
} else await this.controller.setCurrentTime(0);
}
next() {
return this.playQueue.next();
}
async skipBack10() {
let e = await this.controller.getCurrentTime();
e !== void 0 && await this.controller.setCurrentTime(e - 10);
}
async skipForward30() {
let e = await this.controller.getCurrentTime();
e !== void 0 && await this.controller.setCurrentTime(e + 30);
}
async removeFromPlayQueue() {
this.currentItem !== void 0 && await this.playQueue.removeItems([this.currentItem]);
}
};
U([h], W.prototype, "repeat", void 0), U([h], W.prototype, "shuffle", void 0), U([p], W.prototype, "controller", null), U([p], W.prototype, "playing", null), U([p], W.prototype, "percent", null), U([p], W.prototype, "canSeek", null), U([p], W.prototype, "currentItem", null), U([p], W.prototype, "canToggleRepeat", null), U([p], W.prototype, "canToggleShuffle", null), U([p], W.prototype, "canPlay", null), U([p], W.prototype, "canPause", null), U([p], W.prototype, "canPrevious", null), U([p], W.prototype, "canNext", null), U([p], W.prototype, "canSkipBack10", null), U([p], W.prototype, "canSkipForward30", null), U([p], W.prototype, "canRemoveFromPlayQueue", null), U([f.bound], W.prototype, "setPercent", null), U([f.bound], W.prototype, "setSeeking", null), U([f.bound], W.prototype, "toggleRepeat", null), U([f.bound], W.prototype, "toggleShuffle", null), U([f.bound], W.prototype, "play", null), U([f.bound], W.prototype, "pause", null), U([f.bound], W.prototype, "previous", null), U([f.bound], W.prototype, "next", null), U([f.bound], W.prototype, "skipBack10", null), U([f.bound], W.prototype, "skipForward30", null), U([f.bound], W.prototype, "removeFromPlayQueue", null);
//#endregion
//#region src/features/media-player.play-queue.abstractions/contexts/PlayQueueContext.ts
var tt = r(void 0), G = () => o(tt), nt = r(void 0), rt = () => o(nt), it = ({ children: e }) => {
let n = rt(), r = G(), [i] = u(() => new W(n, r));
return g(B.bottomBar, i.localStorageState), /* @__PURE__ */ t(Xe.Provider, {
value: i,
children: e
});
}, at = r(void 0), ot = () => o(at), K = class {
player;
playQueue;
bottomBar;
constructor(e, t, n) {
this.player = e, this.playQueue = t, this.bottomBar = n, m(this);
}
get interacted() {
return this.playQueue.interacted;
}
get controller() {
return this.player.controller;
}
get currentItem() {
return this.playQueue.currentItem;
}
async onLoaded() {
this.interacted && await this.controller.play();
}
onPlay() {
this.player.onPlay();
}
onPause() {
this.player.onPause();
}
async onEnded() {
switch (this.bottomBar.repeat) {
case H.One:
await this.controller.setCurrentTime(0);
break;
case H.Off:
case H.All:
if (this.playQueue.isLastItem) switch (this.bottomBar.repeat) {
case H.Off:
this.player.onEnded();
break;
case H.All:
this.playQueue.hasMultipleItems ? await this.playQueue.goToFirst() : await this.controller.setCurrentTime(0);
break;
}
else await this.playQueue.next();
break;
}
}
onTimeUpdate(e) {
this.player.onTimeUpdate(e);
}
onControllerChange(e) {
this.player.onControllerChange(e);
}
};
U([p], K.prototype, "interacted", null), U([p], K.prototype, "controller", null), U([p], K.prototype, "currentItem", null), U([f.bound], K.prototype, "onLoaded", null), U([f.bound], K.prototype, "onPlay", null), U([f.bound], K.prototype, "onPause", null), U([f.bound], K.prototype, "onEnded", null), U([f.bound], K.prototype, "onTimeUpdate", null), U([f.bound], K.prototype, "onControllerChange", null);
//#endregion
//#region src/features/media-player.mini-player/components/MiniPlayerProvider.tsx
var st = ({ children: e }) => {
let n = rt(), r = G(), i = V(), [a] = u(() => new K(n, r, i));
return /* @__PURE__ */ t(at.Provider, {
value: a,
children: e
});
}, ct = {
type: "object",
properties: {
url: { type: "string" },
type: { type: "string" },
videoId: { type: "string" },
title: { type: "string" }
},
required: [
"url",
"type",
"videoId",
"title"
]
}, lt = {
type: "object",
properties: {
version: {
type: "string",
nullable: !0
},
repeat: {
type: "string",
enum: Object.values(H),
nullable: !0
},
shuffle: {
type: "boolean",
nullable: !0
},
items: {
type: "array",
nullable: !0,
items: ct
},
currentIndex: {
type: "integer",
nullable: !0
}
}
}, q = class e {
playQueue;
dto;
static nextId = 1;
id;
isSelected = !1;
constructor(t, n) {
this.playQueue = t, this.dto = n, m(this), this.id = e.nextId++;
}
static fromDto(t, n) {
return new e(t, n);
}
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.playQueue.currentItem === this;
}
get index() {
return this.playQueue.items.indexOf(this);
}
get isFirst() {
return this.index === 0;
}
get isLast() {
return this.index === this.playQueue.items.length - 1;
}
get canMoveToTop() {
return !this.isFirst;
}
get canMoveToBottom() {
return !this.isLast;
}
get canRemoveToTop() {
return !this.isFirst;
}
get canRemoveOthers() {
return this.playQueue.hasMultipleItems;
}
clone() {
return this.playQueue.createItemFromDto(this.dto);
}
unselect() {
this.isSelected = !1;
}
select() {
this.isSelected = !0;
}
toggleSelected() {
this.isSelected = !this.isSelected;
}
play() {
return this.playQueue.setCurrentItem(this), Promise.resolve();
}
remove() {
return this.playQueue.removeItems([this]);
}
playFirst() {
return this.playQueue.playFirst([this.clone()]);
}
playNext() {
return this.playQueue.playNext([this.clone()]);
}
addToPlayQueue() {
return this.playQueue.addItems([this.clone()]);
}
moveToTop() {
this.playQueue.moveItem(this, 0);
}
moveToBottom() {
this.playQueue.moveItem(this, this.playQueue.items.length - 1);
}
removeToTop() {
return this.playQueue.removeItemsAbove(this);
}
removeOthers() {
return this.playQueue.removeOtherItems(this);
}
};
U([h], q.prototype, "isSelected", void 0), U([p], q.prototype, "isCurrent", null), U([p], q.prototype, "index", null), U([p], q.prototype, "isFirst", null), U([p], q.prototype, "isLast", null), U([p], q.prototype, "canMoveToTop", null), U([p], q.prototype, "canMoveToBottom", null), U([p], q.prototype, "canRemoveToTop", null), U([p], q.prototype, "canRemoveOthers", null), U([f.bound], q.prototype, "unselect", null), U([f.bound], q.prototype, "select", null), U([f.bound], q.prototype, "toggleSelected", null), U([f.bound], q.prototype, "play", null), U([f.bound], q.prototype, "remove", null), U([f.bound], q.prototype, "playFirst", null), U([f.bound], q.prototype, "playNext", null), U([f.bound], q.prototype, "addToPlayQueue", null), U([f.bound], q.prototype, "moveToTop", null), U([f.bound], q.prototype, "moveToBottom", null), U([f.bound], q.prototype, "removeToTop", null), U([f.bound], q.prototype, "removeOthers", null);
//#endregion
//#region src/features/media-player.play-queue/stores/PlayQueueStore.ts
var ut = class {
playQueue;
constructor(e) {
this.playQueue = e, m(this);
}
get state() {
return {
version: "1.0",
items: this.playQueue.items.map((e) => e.dto),
currentIndex: this.playQueue.currentIndex
};
}
set state(e) {
this.playQueue.items = e.items?.map((e) => this.playQueue.createItemFromDto(e)) ?? [], this.playQueue.currentIndex = e.currentIndex;
}
validateState(e) {
return Qe(lt, "PlayQueueDto")(e);
}
};
U([p.struct], ut.prototype, "state", null);
var J = class {
interacted = !1;
localStorageState;
items = [];
currentId;
constructor() {
m(this), this.localStorageState = new ut(this);
}
createItemFromDto(e) {
return q.fromDto(this, {
url: e.url,
type: e.type,
videoId: e.videoId,
title: e.title
});
}
get isEmpty() {
return this.items.length === 0;
}
get canClear() {
return !this.isEmpty;
}
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 ? void 0 : this.items.findIndex((e) => e.id === this.currentId);
}
set currentIndex(e) {
this.currentId = e === void 0 ? void 0 : this.items.at(e)?.id;
}
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;
}
get hasSelectedItems() {
return this.selectedItems.length > 0;
}
get selectedItemsOrAllItems() {
return this.hasSelectedItems ? this.selectedItems : this.items;
}
get canAddSelectedItems() {
return !this.isEmpty && this.hasSelectedItems;
}
get canPlaySelectedItemsNext() {
return !this.isEmpty && this.hasSelectedItems;
}
get canRemoveSelectedItems() {
return !this.isEmpty && this.hasSelectedItems;
}
setItems(e) {
this.items = e;
}
interact() {
this.interacted = !0;
}
clear() {
this.interact(), this.currentIndex = void 0, this.items = [];
}
unselectAll() {
for (let e of this.items) e.unselect();
}
selectAll() {
for (let e of this.items) e.select();
}
setCurrentItem(e) {
this.interact(), this.currentId = 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;
}
let { currentIndex: t } = this;
t !== void 0 && (this.interact(), this.items.splice(t, 0, ...e), this.currentIndex = t);
}
moveItem(e, t) {
let n = this.items.splice(this.items.indexOf(e), 1)[0];
this.items.splice(t, 0, n);
}
async goToFirst() {
this.currentIndex !== void 0 && (this.currentIndex = 0);
}
async removeItems(e) {
let { currentItem: t } = this;
te(this.items, ...e.filter((e) => e !== t));
let { currentIndex: n, isLastItem: r } = this;
te(this.items, e.find((e) => e === t)), this.currentItem !== t && (this.interact(), r ? await this.goToFirst() : this.currentIndex = n);
}
async removeSelectedItems() {
await this.removeItems(this.selectedItemsOrAllItems), this.unselectAll();
}
async removeOtherItems(e) {
let t = e.id;
return this.removeItems(this.items.filter((e) => e.id !== t));
}
async removeItemsAbove(e) {
let t = this.items.indexOf(e);
return this.removeItems(this.items.filter((e, n) => n < t));
}
async previous() {
this.currentIndex !== void 0 && this.hasPreviousItem && (this.interact(), this.currentIndex--);
}
async next() {
this.currentIndex !== void 0 && this.hasNextItem && (this.interact(), this.currentIndex++);
}
addItemFromDto(e) {
let t = this.createItemFromDto(e);
return this.addItems([t]);
}
};
U([h], J.prototype, "interacted", void 0), U([h], J.prototype, "items", void 0), U([h], J.prototype, "currentId", void 0), U([p], J.prototype, "isEmpty", null), U([p], J.prototype, "canClear", null), U([p], J.prototype, "currentItem", null), U([p], J.prototype, "canPlay", null), U([p], J.prototype, "canPause", null), U([p], J.prototype, "hasMultipleItems", null), U([p], J.prototype, "currentIndex", null), U([p], J.prototype, "hasPreviousItem", null), U([p], J.prototype, "hasNextItem", null), U([p], J.prototype, "isLastItem", null), U([p], J.prototype, "selectedItems", null), U([p], J.prototype, "allItemsSelected", null), U([p], J.prototype, "hasSelectedItems", null), U([p], J.prototype, "selectedItemsOrAllItems", null), U([p], J.prototype, "canAddSelectedItems", null), U([p], J.prototype, "canPlaySelectedItemsNext", null), U([p], J.prototype, "canRemoveSelectedItems", null), U([f.bound], J.prototype, "setItems", null), U([f.bound], J.prototype, "interact", null), U([f.bound], J.prototype, "clear", null), U([f.bound], J.prototype, "unselectAll", null), U([f.bound], J.prototype, "selectAll", null), U([f.bound], J.prototype, "setCurrentItem", null), U([f.bound], J.prototype, "setNextItems", null), U([f.bound], J.prototype, "clearAndSetItems", null), U([f.bound], J.prototype, "playNext", null), U([f.bound], J.prototype, "playSelectedItemsNext", null), U([f.bound], J.prototype, "addItems", null), U([f.bound], J.prototype, "addSelectedItems", null), U([f.bound], J.prototype, "playFirst", null), U([f.bound], J.prototype, "moveItem", null), U([f.bound], J.prototype, "goToFirst", null), U([f.bound], J.prototype, "removeItems", null), U([f.bound], J.prototype, "removeSelectedItems", null), U([f.bound], J.prototype, "removeOtherItems", null), U([f.bound], J.prototype, "removeItemsAbove", null), U([f.bound], J.prototype, "previous", null), U([f.bound], J.prototype, "next", null), U([f.bound], J.prototype, "addItemFromDto", null);
//#endregion
//#region src/features/media-player.play-queue/components/PlayQueueProvider.tsx
var dt = ({ children: e }) => {
let [n] = u(() => new J());
g(B.playQueue, n.localStorageState);
let r = _();
return s(() => ee(() => n.currentItem, async (e, t) => {
e === void 0 || t === void 0 || e.type === t.type && e.videoId === t.videoId && await r.setCurrentTime(0);
}), [n, r]), /* @__PURE__ */ t(tt.Provider, {
value: n,
children: e
});
}, Y = class {
controller = ae;
playing = !1;
percent = 0;
seeking = !1;
constructor() {
m(this);
}
setPlaying(e) {
this.playing = e;
}
setPercent(e) {
this.percent = e;
}
setSeeking(e) {
this.seeking = e;
}
onControllerChange(e) {
this.controller = e;
}
onPlay() {
this.playing = !0;
}
onPause() {
this.playing = !1;
}
onEnded() {
this.playing = !1;
}
onTimeUpdate({ percent: e }) {
e !== void 0 && (this.seeking || (this.percent = e));
}
};
U([h], Y.prototype, "controller", void 0), U([h], Y.prototype, "playing", void 0), U([h], Y.prototype, "percent", void 0), U([h], Y.prototype, "seeking", void 0), U([f.bound], Y.prototype, "setPlaying", null), U([f.bound], Y.prototype, "setPercent", null), U([f.bound], Y.prototype, "setSeeking", null), U([f.bound], Y.prototype, "onControllerChange", null), U([f.bound], Y.prototype, "onPlay", null), U([f.bound], Y.prototype, "onPause", null), U([f.bound], Y.prototype, "onEnded", null), U([f.bound], Y.prototype, "onTimeUpdate", null);
//#endregion
//#region src/features/media-player.player/components/PlayerProvider.tsx
var ft = ({ children: e }) => {
let [n] = u(() => new Y());
return /* @__PURE__ */ t(nt.Provider, {
value: n,
children: e
});
}, pt = r(void 0), mt = () => o(pt), X = class {
playlistList;
id;
name;
constructor(e, t, n) {
this.playlistList = e, m(this), this.id = t, this.name = n;
}
async rename(e) {
this.name = e;
}
remove() {
return this.playlistList.removeItem(this);
}
};
U([h], X.prototype, "id", void 0), U([h], X.prototype, "name", void 0), U([f.bound], X.prototype, "rename", null), U([f.bound], X.prototype, "remove", null);
//#endregion
//#region src/features/media-player.playlists/stores/PlaylistListStore.ts
var ht = class {
playlistList;
constructor(e) {
this.playlistList = e, m(this);
}
get state() {
return { items: this.playlistList.items.map((e) => ({
id: e.id,
name: e.name
})) };
}
set state(e) {
this.playlistList.items = e.items?.map((e) => new X(this.playlistList, e.id, e.name)) ?? [];
}
validateState(e) {
return !0;
}
};
U([p.struct], ht.prototype, "state", null);
var Z = class {
localStorageState;
items = [];
constructor() {
m(this), this.localStorageState = new ht(this);
}
createItem(e) {
return new X(this, crypto.randomUUID(), e);
}
setItems(e) {
this.items = e;
}
async addItem(e) {
this.items.push(e);
}
async removeItem(e) {
te(this.items, e);
}
};
U([h], Z.prototype, "items", void 0), U([f.bound], Z.prototype, "setItems", null), U([f.bound], Z.prototype, "addItem", null), U([f.bound], Z.prototype, "removeItem", null);
//#endregion
//#region src/features/media-player.playlists/components/PlaylistListProvider.tsx
var gt = ({ children: e }) => {
let [n] = u(() => new Z());
return g(B.playlistList, n.localStorageState), /* @__PURE__ */ t(pt.Provider, {
value: n,
children: e
});
}, _t = ({ children: e, nostalgicDivaProps: n }) => /* @__PURE__ */ t(re, {
...n,
children: /* @__PURE__ */ t(Ye, {
components: [
ft,
dt,
it,
st,
gt
],
children: e
})
}), vt = {
width: 400,
height: 225
}, yt = N(({ children: e }) => /* @__PURE__ */ n(O, {
panelled: !0,
style: { minBlockSize: "max(460px, 100vh - 81px)" },
children: [e, !G().isEmpty && /* @__PURE__ */ t(ye, { style: { blockSize: vt.height } })]
})), bt = N(() => {
let e = V();
return /* @__PURE__ */ t(b, {
title: `Shuffle: ${e.shuffle ? "On" : "Off"}`,
"aria-label": `Shuffle: ${e.shuffle ? "On" : "Off"}`,
iconType: e.shuffle ? je : Me,
size: "s",
iconSize: "l",
onClick: e.toggleShuffle,
disabled: !e.canToggleShuffle
});
}), xt = N(() => {
let e = V();
return /* @__PURE__ */ t(b, {
title: "Previous",
"aria-label": "Previous",
iconType: Be,
size: "s",
iconSize: "l",
onClick: e.previous,
disabled: !e.canPrevious
});
}), St = N(() => {
let e = V();
return /* @__PURE__ */ t(b, {
title: "Skip back 10 seconds",
"aria-label": "Skip back 10 seconds",
iconType: He,
size: "s",
iconSize: "l",
onClick: e.skipBack10,
disabled: !e.canSkipBack10
});
}), Ct = N(() => {
let e = V();
return /* @__PURE__ */ t(b, {
title: "Pause",
"aria-label": "Pause",
iconType: Re,
size: "s",
iconSize: "l",
onClick: e.pause,
disabled: !e.canPause
});
}), wt = N(() => {
let e = V();
return /* @__PURE__ */ t(b, {
title: "Play",
"aria-label": "Play",
iconType: ze,
size: "s",
iconSize: "l",
onClick: e.play,
disabled: !e.canPlay
});
}), Tt = N(() => {
let e = V();
return /* @__PURE__ */ t(b, {
title: "Skip forward 30 seconds",
"aria-label": "Skip forward 30 seconds",
iconType: Ue,
size: "s",
iconSize: "l",
onClick: e.skipForward30,
disabled: !e.canSkipForward30
});
}), Et = N(() => {
let e = V();
return /* @__PURE__ */ t(b, {
title: "Next",
"aria-label": "Next",
iconType: Ie,
size: "s",
iconSize: "l",
onClick: e.next,
disabled: !e.canNext
});
}), Dt = {
[H.Off]: Ae,
[H.All]: ke,
[H.One]: Oe
}, Ot = N(() => {
let e = V();
return /* @__PURE__ */ t(b, {
title: `Repeat: ${e.repeat === H.All ? "All" : e.repeat === H.One ? "One" : "Off"}`,
"aria-label": `Repeat: ${e.repeat === H.All ? "All" : e.repeat === H.One ? "One" : "Off"}`,
iconType: Dt[e.repeat],
size: "s",
iconSize: "l",
onClick: e.toggleRepeat,
disabled: !e.canToggleRepeat
});
}), kt = N(() => {
let e = V();
return /* @__PURE__ */ n(C, {
responsive: !1,
gutterSize: "s",
justifyContent: "center",
alignItems: "center",
children: [
/* @__PURE__ */ t(E, {
sizes: ["xs"],
children: /* @__PURE__ */ t(bt, {})
}),
/* @__PURE__ */ t(xt, {}),
/* @__PURE__ */ t(E, {
sizes: ["xs"],
children: /* @__PURE__ */ t(St, {})
}),
e.playing ? /* @__PURE__ */ t(Ct, {}) : /* @__PURE__ */ t(wt, {}),
/* @__PURE__ */ t(E, {
sizes: ["xs"],
children: /* @__PURE__ */ t(Tt, {})
}),
/* @__PURE__ */ t(Et, {}),
/* @__PURE__ */ t(E, {
sizes: ["xs"],
children: /* @__PURE__ */ t(Ot, {})
})
]
});
}), At = i(({ item: e, closePopover: n }) => {
let r = a(({ name: e, icon: t, onClick: r }) => ({
name: e,
icon: t,
onClick: async (e) => {
n(), r(e);
}
}), [n]);
return /* @__PURE__ */ t(S, {
initialPanelId: 0,
panels: l(() => [{
id: 0,
items: [
r({
name: "Open in new tab",
icon: /* @__PURE__ */ t(D, { type: Le }),
onClick: async () => {
window.open(e.dto.url, "_blank");
}
}),
r({
name: "Copy link address",
icon: /* @__PURE__ */ t(D, { type: "" }),
onClick: async () => {
await navigator.clipboard.writeText(e.dto.url);
}
}),
r({
name: "Copy link text",
icon: /* @__PURE__ */ t(D, { type: "" }),
onClick: async () => {
await navigator.clipboard.writeText(e.dto.title);
}
})
]
}], [r, e])
});
}), jt = i(({ item: e }) => {
let [n, r] = u(!1), i = a(() => r(!n), [n]), o = a(() => r(!1), []);
return /* @__PURE__ */ t(k, {
button: /* @__PURE__ */ t(y, {
iconType: z.get(e.type),
size: "s",
onClick: i,
children: e.title
}),
isOpen: n,
closePopover: o,
panelPaddingSize: "none",
anchorPosition: "upLeft",
children: /* @__PURE__ */ t(At, {
item: e,
closePopover: o
})
});
}), Mt = N(() => {
let e = V();
return /* @__PURE__ */ t(C, {
responsive: !1,
gutterSize: "s",
justifyContent: "flexStart",
alignItems: "center",
children: e.currentItem && /* @__PURE__ */ t(jt, { item: e.currentItem })
});
}), Nt = N(() => /* @__PURE__ */ t(b, {
title: "Mute",
"aria-label": "Mute",
iconType: We,
size: "s",
iconSize: "l",
disabled: !V().controller.supports("setMuted")
})), Pt = N(({ button: e, isOpen: r, closePopover: i }) => {
let o = V(), [s, l] = u("0"), d = _();
c(() => {
r && d.getVolume().then((e) => {
e !== void 0 && l(Math.floor(e * 100).toString());
});
}, [r, d]);
let f = a(async (e) => {
l(e.currentTarget.value), await d.setVolume(Number(e.currentTarget.value) / 100);
}, [d]);
return /* @__PURE__ */ t(k, {
button: e,
isOpen: r,
closePopover: i,
anchorPosition: "upRight",
children: /* @__PURE__ */ t(T, { children: /* @__PURE__ */ n(C, {
responsive: !1,
gutterSize: "s",
justifyContent: "center",
alignItems: "center",
children: [/* @__PURE__ */ t(Nt, {}), /* @__PURE__ */ t(_e, {
min: 0,
max: 100,
step: 1,
value: s,
onChange: f,
css: { blockSize: 32 },
disabled: !o.controller.supports("setVolume")
})]
}) })
});
}), Ft = N(() => {
let e = V(), [n, r] = u(!1);
return /* @__PURE__ */ t(Pt, {
button: /* @__PURE__ */ t(b, {
title: "Volume",
"aria-label": "Volume",
iconType: We,
size: "s",
iconSize: "l",
onClick: () => r(!n),
disabled: !e.controller.supports("getVolume")
}),
isOpen: n,
closePopover: () => r(!1)
});
}), It = ({ onClickPlayQueueButton: e }) => /* @__PURE__ */ t(b, {
title: "Play queue",
"aria-label": "Play queue",
iconType: Fe,
size: "s",
iconSize: "l",
onClick: e
}), Lt = N(({ closePopover: e }) => {
let n = V(), r = _(), [i, o] = u(), s = a(async () => {
await n.controller.getPlaybackRate().then((e) => o(e));
}, [n]), c = a(({ name: t, icon: n, onClick: r, disabled: i, className: a }) => ({
name: t,
icon: n,
onClick: async () => {
e(), r();
},
disabled: i,
className: a
}), [e]);
return /* @__PURE__ */ t(S, {
initialPanelId: 0,
panels: l(() => [{
id: 0,
items: [
{
name: "Speed",
icon: /* @__PURE__ */ t(D, { type: Ge }),
panel: 1,
onClick: s,
disabled: !n.controller.supports("getPlaybackRate")
},
c({
name: "Skip back 10 seconds",
icon: /* @__PURE__ */ t(D, { type: He }),
onClick: n.skipBack10,
disabled: !n.canSkipBack10
}),
c({
name: "Skip forward 30 seconds",
icon: /* @__PURE__ */ t(D, { type: Ue }),
onClick: n.skipForward30,
disabled: !n.canSkipForward30
}),
c({
name: `Shuffle: ${n.shuffle ? "On" : "Off"}`,
icon: /* @__PURE__ */ t(D, { type: n.shuffle ? je : Me }),
onClick: n.toggleShuffle,
disabled: !n.canToggleShuffle,
className: "eui-showFor--xs--flex"
}),
c({
name: `Repeat: ${n.repeat === H.All ? "All" : n.repeat === H.One ? "One" : "Off"}`,
icon: /* @__PURE__ */ t(D, { type: Dt[n.repeat] }),
onClick: n.toggleRepeat,
disabled: !n.canToggleRepeat,
className: "eui-showFor--xs--flex"
}),
{ isSeparator: !0 },
c({
name: "Remove from play queue",
icon: /* @__PURE__ */ t(D, { type: F }),
onClick: n.removeFromPlayQueue,
disabled: !n.canRemoveFromPlayQueue
})
]
}, {
id: 1,
title: "Speed",
items: [
.25,
.5,
.75,
1,
1.25,
1.5,
1.75,
2
].map((e) => c({
name: e.toString(),
onClick: () => r.setPlaybackRate(e),
icon: e === i ? "check" : "empty",
disabled: !n.controller.supports("setPlaybackRate")
}))
}], [
n,
c,
s,
r,
i
])
});
}), Rt = i(({ button: e, isOpen: n, closePopover: r }) => /* @__PURE__ */ t(k, {
button: e,
isOpen: n,
closePopover: r,
panelPaddingSize: "none",
anchorPosition: "upRight",
children: /* @__PURE__ */ t(Lt, { closePopover: r })
})), zt = i(() => {
let [e, n] = u(!1);
return /* @__PURE__ */ t(Rt, {
button: /* @__PURE__ */ t(b, {
title: "More options",
"aria-label": "More options",
iconType: I,
size: "s",
iconSize: "l",
onClick: () => n(!e)
}),
isOpen: e,
closePopover: () => n(!1)
});
}), Bt = i(({ onClickPlayQueueButton: e }) => /* @__PURE__ */ n(C, {
responsive: !1,
gutterSize: "s",
justifyContent: "flexEnd",
alignItems: "center",
children: [
/* @__PURE__ */ t(Ft, {}),
e && /* @__PURE__ */ t(It, { onClickPlayQueueButton: e }),
/* @__PURE__ */ t(zt, {})
]
})), Vt = N(() => {
let e = V(), n = _(), r = a((t) => {
let n = Number(t.currentTarget.value) / 100;
e.setPercent(n);
}, [e]), i = a((t) => {
t.button === 0 && e.setSeeking(!0);
}, [e]), o = a(async (t) => {
if (t.button === 0) {
let r = Number(t.currentTarget.value) / 100;
e.setSeeking(!1);
let i = await n.getDuration();
i !== void 0 && await n.setCurrentTime(i * r);
}
}, [e, n]);
return /* @__PURE__ */ t(_e, {
min: 0,
max: 100,
step: 1e-7,
value: e.percent * 100,
onChange: r,
onMouseDown: i,
onMouseUp: o,
fullWidth: !0,
showRange: !0,
css: { blockSize: 32 },
disabled: !e.canSeek
});
}), Ht = N(({ onClickPlayQueueButton: e }) => /* @__PURE__ */ t(oe, {
paddingSize: "s",
children: /* @__PURE__ */ n(C, {
direction: "column",
gutterSize: "none",
children: [/* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(Vt, {}) }), /* @__PURE__ */ t(w, { children: /* @__PURE__ */ n(C, {
responsive: !1,
children: [
/* @__PURE__ */ t(w, {
css: { width: "calc(100% / 3)" },
children: /* @__PURE__ */ t(Mt, {})
}),
/* @__PURE__ */ t(w, {
css: { width: "calc(100% / 3)" },
children: /* @__PURE__ */ t(kt, {})
}),
/* @__PURE__ */ t(w, {
css: { width: "calc(100% / 3)" },
children: /* @__PURE__ */ t(Bt, { onClickPlayQueueButton: e })
})
]
}) })]
})
})), Ut = N(() => {
let e = ot(), n = l(() => ({
onLoaded: e.onLoaded,
onPlay: e.onPlay,
onPause: e.onPause,
onEnded: e.onEnded,
onTimeUpdate: e.onTimeUpdate
}), [e]);
return /* @__PURE__ */ t("div", {
css: {
position: "fixed",
right: 0,
bottom: 81,
width: vt.width,
height: vt.height,
zIndex: 998,
backgroundColor: "rgb(39, 39, 39)",
display: "flex",
flexDirection: "column"
},
children: /* @__PURE__ */ t("div", {
css: {
flexGrow: 1,
backgroundColor: "black"
},
children: e.currentItem && /* @__PURE__ */ t(ne, {
src: e.currentItem.url,
options: n,
onControllerChange: e.onControllerChange
})
})
});
});
//#endregion
//#region src/features/media-player.play-queue/helpers/isNoembedResult.ts
function Wt(e) {
return typeof e == "object" && !!e && "title" in e && typeof e.title == "string";
}
//#endregion
//#region src/features/media-player.play-queue/components/AddVideoModal.tsx
var Gt = R.create(({ remove: e, resolve: r }) => {
let i = Ee({ prefix: "modalForm" }), [a, o] = u(""), [s, c] = u(""), [l, d] = u(!1);
return /* @__PURE__ */ n(fe, {
onClose: e,
initialFocus: "[name=url]",
children: [
/* @__PURE__ */ t(he, { children: /* @__PURE__ */ t(ge, { children: "Add video" }) }),
/* @__PURE__ */ t(pe, { children: /* @__PURE__ */ n(ue, {
id: i,
component: "form",
onSubmit: async (t) => {
t.preventDefault();
try {
d(!0);
let t = ie(a);
if (t === void 0) return;
let n = t.extractVideoId(a);
if (n === void 0) return;
let i = await (await fetch(`https://noembed.com/embed?url=${encodeURIComponent(a)}`)).json();
r({
url: a,
type: t.type,
videoId: n,
title: s || (Wt(i) ? i.title : n)
}), e();
} finally {
d(!1);
}
},
children: [/* @__PURE__ */ t(T, {
label: "URL",
children: /* @__PURE__ */ t(le, {
name: "url",
value: a,
onChange: (e) => o(e.target.value)
})
}), /* @__PURE__ */ t(T, {
label: "Title",
children: /* @__PURE__ */ t(le, {
name: "title",
value: s,
onChange: (e) => c(e.target.value)
})
})]
}) }),
/* @__PURE__ */ n(me, { children: [/* @__PURE__ */ t(y, {
onClick: e,
children: "Cancel"
}), /* @__PURE__ */ t(v, {
type: "submit",
form: i,
fill: !0,
disabled: a.trim().length === 0,
isLoading: l,
children: "Add video"
})] })
]
});
}), Kt = i(({ onFulfilled: e }) => /* @__PURE__ */ t(v, {
onClick: () => R.show(Gt).then(e),
iconType: P,
color: "primary",
children: "Add video"
})), qt = N(({ playQueue: e }) => /* @__PURE__ */ t(v, {
iconType: P,
onClick: e.addSelectedItems,
disabled: !e.canAddSelectedItems,
children: "Add to play queue"
})), Jt = N(({ playQueue: e, closePopover: n }) => {
let r = a(({ name: e, icon: t, disabled: r, onClick: i }) => ({
name: e,
icon: t,
disabled: r,
onClick: async (e) => {
n(), i(e);
}
}), [n]);
return /* @__PURE__ */ t(S, {
initialPanelId: 0,
panels: l(() => [{
id: 0,
items: [
r({
name: "Play next",
icon: /* @__PURE__ */ t(D, { type: "" }),
disabled: !e.canPlaySelectedItemsNext,
onClick: e.playSelectedItemsNext
}),
r({
name: "Add to play queue",
icon: /* @__PURE__ */ t(D, { type: P }),
onClick: e.addSelectedItems,
disabled: !e.canAddSelectedItems
}),
r({
name: "Remove",
icon: /* @__PURE__ */ t(D, { type: F }),
onClick: e.removeSelectedItems,
disabled: !e.canRemoveSelectedItems
}),
r({
name: "Clear",
icon: /* @__PURE__ */ t(D, { type: Pe }),
onClick: e.clear,
disabled: !e.canClear
})
]
}], [r, e])
});
}), Yt = i(({ playQueue: e }) => {
let [n, r] = u(!1), i = a(() => r(!n), [n]), o = a(() => r(!1), []);
return /* @__PURE__ */ t(k, {
button: /* @__PURE__ */ t(b, {
display: "base",
size: "m",
iconType: I,
onClick: i
}),
isOpen: n,
closePopover: o,
panelPaddingSize: "none",
anchorPosition: "downLeft",
children: /* @__PURE__ */ t(Jt, {
playQueue: e,
closePopover: o
})
});
}), Xt = N(({ playQueue: e }) => {
let { euiTheme: r } = M();
return /* @__PURE__ */ n(C, {
alignItems: "center",
gutterSize: "m",
responsive: !1,
style: {
position: "sticky",
top: 48,
zIndex: 998,
background: r.colors.backgroundBasePlain
},
children: [
/* @__PURE__ */ n(E, {
sizes: ["xs"],
children: [
/* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(v, {
disabled: !e.canPlaySelectedItemsNext,
onClick: e.playSelectedItemsNext,
children: "Play next"
})
}),
/* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(qt, { playQueue: e })
}),
/* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(v, {
iconType: F,
onClick: e.removeSelectedItems,
disabled: !e.canRemoveSelectedItems,
children: "Remove"
})
}),
/* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(v, {
iconType: Pe,
onClick: e.clear,
disabled: !e.canClear,
children: "Clear"
})
})
]
}),
/* @__PURE__ */ t(ve, {
sizes: ["xs"],
children: /* @__PURE__ */ t(Yt, { playQueue: e })
}),
/* @__PURE__ */ t(w, { grow: !0 }),
/* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(Kt, { onFulfilled: e.addItemFromDto })
})
]
});
}), Zt = N(({ playQueue: r }) => {
let { euiTheme: i } = M();
return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(Ce, { children: /* @__PURE__ */ t(C, {
responsive: !1,
justifyContent: "spaceBetween",
alignItems: "baseline",
children: /* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(x, {
id: "",
checked: r.allItemsSelected,
onChange: (e) => {
e.target.checked ? r.selectAll() : r.unselectAll();
}
})
})
}) }), /* @__PURE__ */ n(xe, {
style: {
position: "sticky",
top: 112,
zIndex: 998,
background: i.colors.backgroundBasePlain
},
children: [
/* @__PURE__ */ t(Se, { children: /* @__PURE__ */ t(x, {
id: "",
checked: r.allItemsSelected,
onChange: (e) => {
e.target.checked ? r.selectAll() : r.unselectAll();
}
}) }),
/* @__PURE__ */ t(A, { width: 24 }),
/* @__PURE__ */ t(A, { children: "Title" }),
/* @__PURE__ */ t(A, {})
]
})] });
}), Qt = N(({ item: e, closePopover: n }) => {
let r = a(({ name: e, icon: t, disabled: r, onClick: i, className: a }) => ({
name: e,
icon: t,
disabled: r,
onClick: async (e) => {
n(), i(e);
},
className: a
}), [n]);
return /* @__PURE__ */ t(S, {
initialPanelId: 0,
panels: l(() => [{
id: 0,
items: [
r({
name: "Play",
icon: /* @__PURE__ */ t(D, { type: L }),
onClick: e.play,
className: "eui-showFor--xs--flex"
}),
r({
name: "Play first",
icon: /* @__PURE__ */ t(D, { type: "" }),
onClick: e.playFirst
}),
r({
name: "Play next",
icon: /* @__PURE__ */ t(D, { type: "" }),
onClick: e.playNext
}),
r({
name: "Add to play queue",
icon: /* @__PURE__ */ t(D, { type: P }),
onClick: e.addToPlayQueue
}),
{ isSeparator: !0 },
r({
name: "Move to the top",
icon: /* @__PURE__ */ t(D, { type: Ne }),
onClick: e.moveToTop,
disabled: !e.canMoveToTop
}),
r({
name: "Move to the bottom",
icon: /* @__PURE__ */ t(D, { type: De }),
onClick: e.moveToBottom,
disabled: !e.canMoveToBottom
}),
{ isSeparator: !0 },
r({
name: "Remove",
icon: /* @__PURE__ */ t(D, { type: F }),
onClick: e.remove,
className: "eui-showFor--xs--flex"
}),
r({
name: "Remove to the top",
icon: /* @__PURE__ */ t(D, { type: "" }),
onClick: e.removeToTop,
disabled: !e.canRemoveToTop
}),
r({
name: "Remove others",
icon: /* @__PURE__ */ t(D, { type: "" }),
onClick: e.removeOthers,
disabled: !e.canRemoveOthers
})
]
}], [r, e])
});
}), $t = i(({ item: e }) => {
let [n, r] = u(!1), i = a(() => r(!n), [n]), o = a(() => r(!1), []);
return /* @__PURE__ */ t(k, {
button: /* @__PURE__ */ t(b, {
title: "More options",
"aria-label": "More options",
iconType: I,
size: "s",
color: "text",
onClick: i
}),
isOpen: n,
closePopover: o,
panelPaddingSize: "none",
anchorPosition: "leftCenter",
children: /* @__PURE__ */ t(Qt, {
item: e,
closePopover: o
})
});
}), en = N(({ item: e }) => {
let r = _();
return /* @__PURE__ */ n(j, {
textOnly: !1,
hasActions: !0,
align: "right",
children: [/* @__PURE__ */ n(E, {
sizes: ["xs"],
children: [/* @__PURE__ */ t(v, {
iconType: L,
size: "s",
onClick: async () => {
e.isCurrent ? await r.setCurrentTime(0) : await e.play();
},
children: "Play"
}), /* @__PURE__ */ t(v, {
iconType: F,
size: "s",
onClick: e.remove,
children: "Remove"
})]
}), /* @__PURE__ */ t($t, { item: e })]
});
}), tn = N(({ item: e }) => /* @__PURE__ */ n(we, {
isSelected: e.isCurrent,
hasSelection: !0,
hasActions: !0,
children: [
/* @__PURE__ */ t(Te, { children: /* @__PURE__ */ t(x, {
id: e.id.toString(),
checked: e.isSelected,
onChange: e.toggleSelected
}) }),
/* @__PURE__ */ t(j, {
textOnly: !1,
children: /* @__PURE__ */ t("img", {
src: z.get(e.type),
width: 16,
height: 16,
alt: e.type
})
}),
/* @__PURE__ */ t(j, {
mobileOptions: {
header: !1,
enlarge: !0,
width: "100%"
},
children: /* @__PURE__ */ t(de, {
href: e.url,
target: "_blank",
external: !0,
children: e.title
})
}),
/* @__PURE__ */ t(en, { item: e })
]
})), nn = N(({ playQueue: e }) => /* @__PURE__ */ t(Ke, {
tag: "tbody",
list: e.items,
setList: (t) => e.setItems(t),
children: e.items.map((e) => /* @__PURE__ */ t(tn, { item: e }, e.id))
})), rn = N(({ playQueue: e }) => /* @__PURE__ */ n(be, { children: [/* @__PURE__ */ t(Zt, { playQueue: e }), /* @__PURE__ */ t(nn, { playQueue: e })] })), an = N(({ playQueue: e }) => {
let { euiTheme: r } = M();
return /* @__PURE__ */ n(O.Section, { children: [
/* @__PURE__ */ t(Xt, { playQueue: e }),
/* @__PURE__ */ t(ye, {
size: "l",
style: {
position: "sticky",
top: 88,
zIndex: 998,
background: r.colors.backgroundBasePlain
}
}),
e.isEmpty ? /* @__PURE__ */ t(ce, {
title: /* @__PURE__ */ t("h2", { children: "We couldn't find any videos" }),
body: /* @__PURE__ */ t("p", { children: "Your video library doesn't contain any video content." }),
actions: /* @__PURE__ */ t(Kt, { onFulfilled: e.addItemFromDto })
}) : /* @__PURE__ */ t(rn, { playQueue: e })
] });
}), on = ({ breadcrumbs: e, tabs: n, ...r }) => {
let i = qe();
return /* @__PURE__ */ t(O.Header, {
...r,
breadcrumbs: e?.map(({ linkProps: e, ...t }) => ({
...t,
href: e === void 0 ? void 0 : i.buildLocation(e).href,
onClick: e === void 0 ? void 0 : async (t) => {
t.preventDefault(), await i.navigate(e);
}
})),
tabs: n?.map(({ linkProps: e, ...t }) => ({
...t,
href: e === void 0 ? void 0 : i.buildLocation(e).href,
onClick: e === void 0 ? void 0 : async (t) => {
t.preventDefault(), await i.navigate(e);
}
}))
});
}, sn = () => {
let r = G();
return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(on, {
pageTitle: "Play queue",
rightSideItems: []
}), /* @__PURE__ */ t(an, { playQueue: r })] });
}, cn = R.create(({ remove: e, resolve: r, playlistListItem: i }) => {
let [o, s] = u(!1);
return /* @__PURE__ */ t(se, {
title: "Delete playlist permanently?",
onCancel: e,
onConfirm: a(async () => {
try {
s(!0), r(), e();
} finally {
s(!1);
}
}, [r, e]),
cancelButtonText: "Cancel",
confirmButtonText: "Delete",
buttonColor: "danger",
isLoading: o,
children: /* @__PURE__ */ n("p", { children: [
"Are you sure you want to delete this playlist? If you delete '",
i.name,
"', you won't be able to recover it."
] })
});
}), ln = N(({ playlist: e }) => /* @__PURE__ */ t(v, {
iconType: P,
onClick: e.addSelectedItems,
disabled: !e.canAddSelectedItems,
children: "Add to play queue"
})), un = N(({ playlist: e, closePopover: n }) => {
let r = a(({ name: e, icon: t, disabled: r, onClick: i }) => ({
name: e,
icon: t,
disabled: r,
onClick: async (e) => {
n(), i(e);
}
}), [n]);
return /* @__PURE__ */ t(S, {
initialPanelId: 0,
panels: l(() => [{
id: 0,
items: [
r({
name: "Play next",
icon: /* @__PURE__ */ t(D, { type: "" }),
disabled: !e.canPlaySelectedItemsNext,
onClick: e.playSelectedItemsNext
}),
r({
name: "Add to play queue",
icon: /* @__PURE__ */ t(D, { type: P }),
onClick: e.addSelectedItems,
disabled: !e.canAddSelectedItems
}),
r({
name: "Remove",
icon: /* @__PURE__ */ t(D, { type: F }),
onClick: e.removeSelectedItems,
disabled: !e.canRemoveSelectedItems
})
]
}], [r, e])
});
}), dn = i(({ playlist: e }) => {
let [n, r] = u(!1), i = a(() => r(!n), [n]), o = a(() => r(!1), []);
return /* @__PURE__ */ t(k, {
button: /* @__PURE__ */ t(b, {
display: "base",
size: "m",
iconType: I,
onClick: i
}),
isOpen: n,
closePopover: o,
panelPaddingSize: "none",
anchorPosition: "downLeft",
children: /* @__PURE__ */ t(un, {
playlist: e,
closePopover: o
})
});
}), fn = N(({ playlist: e }) => {
let { euiTheme: r } = M();
return /* @__PURE__ */ n(C, {
alignItems: "center",
gutterSize: "m",
responsive: !1,
style: {
position: "sticky",
top: 48,
zIndex: 998,
background: r.colors.backgroundBasePlain
},
children: [
/* @__PURE__ */ n(E, {
sizes: ["xs"],
children: [
/* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(v, {
disabled: !e.canPlaySelectedItemsNext,
onClick: e.playSelectedItemsNext,
children: "Play next"
})
}),
/* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(ln, { playlist: e })
}),
/* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(v, {
iconType: F,
onClick: e.removeSelectedItems,
disabled: !e.canRemoveSelectedItems,
children: "Remove"
})
})
]
}),
/* @__PURE__ */ t(ve, {
sizes: ["xs"],
children: /* @__PURE__ */ t(dn, { playlist: e })
}),
/* @__PURE__ */ t(w, { grow: !0 }),
/* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(Kt, { onFulfilled: e.addItemFromDto })
})
]
});
}), pn = N(({ playlist: r }) => /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(Ce, { children: /* @__PURE__ */ t(C, {
responsive: !1,
justifyContent: "spaceBetween",
alignItems: "baseline",
children: /* @__PURE__ */ t(w, {
grow: !1,
children: /* @__PURE__ */ t(x, {
id: "",
checked: r.allItemsSelected,
onChange: (e) => {
e.target.checked ? r.selectAll() : r.unselectAll();
}
})
})
}) }), /* @__PURE__ */ n(xe, { children: [
/* @__PURE__ */ t(Se, { children: /* @__PURE__ */ t(x, {
id: "",
checked: r.allItemsSelected,
onChange: (e) => {
e.target.checked ? r.selectAll() : r.unselectAll();
}
}) }),
/* @__PURE__ */ t(A, { width: 24 }),
/* @__PURE__ */ t(A, { children: "Title" }),
/* @__PURE__ */ t(A, {})
] })] })), mn = i(({ item: e, closePopover: n }) => {
let r = a(({ name: e, icon: t, disabled: r, onClick: i, className: a }) => ({
name: e,
icon: t,
disabled: r,
onClick: async (e) => {
n(), i(e);
},
className: a
}), [n]);
return /* @__PURE__ */ t(S, {
initialPanelId: 0,
panels: l(() => [{
id: 0,
items: [
r({
name: "Play",
icon: /* @__PURE__ */ t(D, { type: L }),
onClick: e.play,
className: "eui-showFor--xs--flex"
}),
r({
name: "Play first",
icon: /* @__PURE__ */ t(D, { type: "" }),
onClick: e.playFirst
}),
r({
name: "Play next",
icon: /* @__PURE__ */ t(D, { type: "" }),
onClick: e.playNext
}),
r({
name: "A