tmg-media-player 0.0.1

package/dist/chunk-JZXJAJNW.js

@@ -0,0 +1,316 @@
+import {
+  tutorialOpts
+} from "./chunk-GDC7I2CJ.js";
+import {
+  CONTROL_PANEL_BUILD,
+  CONTROL_PANEL_DRAGGABLE_BUILD,
+  ROWS_ARR
+} from "./chunk-TSAEQFDM.js";
+import {
+  BasePin,
+  BasePlug
+} from "./chunk-TB3GE2MH.js";
+import {
+  ComponentRegistry,
+  PinRegistry
+} from "./chunk-2JW4RYM4.js";
+import {
+  getElSiblingAt,
+  initScrollAssist,
+  observeResize,
+  removeScrollAssist
+} from "./chunk-HCSCY6DU.js";
+import {
+  limited
+} from "./chunk-ZCQ5UWVE.js";
+import {
+  getPanelLocation,
+  getPanelSplitCtrls,
+  parsePanelBottomObj
+} from "./chunk-BROAUWON.js";
+import {
+  createEl,
+  createListRenderer,
+  inBoolArrOpt,
+  isBool,
+  mockAsync,
+  requestAnimationFrame,
+  setTimeout2
+} from "./chunk-ZJ6KVLUS.js";
+import {
+  __publicField
+} from "./chunk-UVKRO5ER.js";
+
+// src/ts/plugs/settings/controlPanel/index.ts
+import { fanout } from "sia-reactor/utils";
+var ControlPanelPlug = class extends BasePlug {
+  constructor(ctlr, config = ctlr.settings.controlPanel) {
+    super(ctlr, config);
+    __publicField(this, "controls", /* @__PURE__ */ new Map());
+    __publicField(this, "draggable");
+    __publicField(this, "zoneEls");
+    __publicField(this, "shells");
+    __publicField(this, "slots");
+    __publicField(this, "slotters", /* @__PURE__ */ new WeakMap());
+    __publicField(this, "wratters", /* @__PURE__ */ new WeakMap());
+    __publicField(this, "scrollers", []);
+    __publicField(this, "topWrapper");
+    __publicField(this, "bigWrapper");
+    __publicField(this, "bottomWrapper");
+    const Pin = PinRegistry.get("controlPanel.draggable");
+    if (Pin) this.draggable = new Pin(this.ctlr, this.config.draggable);
+  }
+  mount() {
+    this.ctlr.DOM.topControlsWrapper = this.topWrapper = createEl("div", { className: "tmg-media-top-controls-wrapper tmg-media-apt-controls-wrapper" }, { dropZone: "", dragId: "wrapper" });
+    this.ctlr.DOM.bigControlsWrapper = this.bigWrapper = createEl("div", { className: "tmg-media-big-controls-wrapper" }, { dropZone: "", dragId: "big" });
+    this.ctlr.DOM.bottomControlsWrapper = this.bottomWrapper = createEl("div", { className: "tmg-media-bottom-controls-wrapper" });
+    this.shells = { top: {}, center: {}, bottom: { 1: {}, 2: {}, 3: {} } };
+    this.shells.top = { left: this.buildShell("left"), center: this.buildShell("center"), right: this.buildShell("right") };
+    this.shells.center = { zone: this.bigWrapper, cover: createEl("div", { className: "tmg-media-big-controls-wrapper-cover" }) };
+    for (const i of ROWS_ARR) this.shells.bottom[i] = { left: this.buildShell("left"), center: this.buildShell("center"), right: this.buildShell("right") };
+    this.slots = { top: {}, center: this.shells.center, bottom: { 1: {}, 2: {}, 3: {} } };
+    this.zoneEls = [...Object.values(this.shells.top), ...Object.values(this.shells.bottom).map((v) => Object.values(v))].flat().map((w) => w.zone);
+    this.shells.center.cover.append(this.shells.center.zone);
+    for (const i of ROWS_ARR) this.bottomWrapper.append(createEl("div", { className: `tmg-media-bottom-sub-controls-wrapper tmg-media-bottom-${i}-sub-controls-wrapper tmg-media-apt-controls-wrapper` }, { dropZone: "", dragId: "wrapper" }));
+    this.ctlr.DOM.controlsContainer?.append(this.topWrapper, this.shells.center.cover, this.bottomWrapper);
+    this.ctlr.config.set("settings.controlPanel.bottom", (v) => parsePanelBottomObj(v), { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.top", this.handleTop, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.center", this.handleCenter, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.bottom", this.handleBottom, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.buffer.value", this.handleBuffer, { init: true, signal: this.signal });
+    this.draggable?.mount?.();
+  }
+  unmount() {
+    for (const w of [this.topWrapper, this.bigWrapper.parentElement, this.bottomWrapper]) w?.remove();
+  }
+  wire() {
+    this.ctlr.config.on("settings.controlPanel.timeline.thumb.value", ({ value }) => this.media.container.dataset.timelineThumb = String(value), { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.timeline", (e, comp = this.comp("timeline")) => comp && fanout(comp.config, e.currentTarget.value), { signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.progressBar", ({ value }) => this.media.container.classList.toggle("tmg-media-progress-bar", value), { init: true, signal: this.signal });
+    this.draggable?.wire();
+    this.initScrollAndResize(), super.wire();
+  }
+  handleTop({ currentTarget: { value } }) {
+    if (!value || isBool(value)) return;
+    const { left, center, right } = getPanelSplitCtrls(value);
+    this.fillWrapper(this.topWrapper, [this.slots.top.left = this.getSlot(left, this.shells.top.left), this.slots.top.center = this.getSlot(center, this.shells.top.center), this.slots.top.right = this.getSlot(right, this.shells.top.right)]);
+    this.fillSlot(this.slots.top.left, left), this.fillSlot(this.slots.top.center, center), this.fillSlot(this.slots.top.right, right), this.ctlr.payload.wired && this.config.draggable && this.draggable?.setEventListeners("add");
+  }
+  handleCenter({ currentTarget: { value } }) {
+    value && !isBool(value) && this.fillSlot(this.slots.center, value), this.ctlr.payload.wired && this.config.draggable && this.draggable?.setEventListeners("add");
+  }
+  handleBottom({ currentTarget: { value } }) {
+    if (!value || isBool(value)) return;
+    for (const i of ROWS_ARR) {
+      const { left, center, right } = getPanelSplitCtrls(value[i]);
+      this.fillWrapper(this.bottomWrapper.children[i - 1], [this.slots.bottom[i].left = this.getSlot(left, this.shells.bottom[i].left), this.slots.bottom[i].center = this.getSlot(center, this.shells.bottom[i].center), this.slots.bottom[i].right = this.getSlot(right, this.shells.bottom[i].right)]);
+      this.fillSlot(this.slots.bottom[i].left, left), this.fillSlot(this.slots.bottom[i].center, center), this.fillSlot(this.slots.bottom[i].right, right);
+    }
+    this.ctlr.payload.wired && this.config.draggable && this.draggable?.setEventListeners("add");
+  }
+  handleBuffer({ value }) {
+    if (value && !this.controls.has("buffer")) this.initComp("buffer");
+    this.media.container.dataset.buffer = String(value);
+  }
+  initComp(name, comp = ComponentRegistry.init(name, this.ctlr, this.config[name])) {
+    return comp ? (this.controls.set(name, comp), comp) : void 0;
+  }
+  comp(name) {
+    return this.controls.get(name);
+  }
+  compEl(name) {
+    return this.controls.get(name)?.element;
+  }
+  getSlot(comps, fallback) {
+    return comps.length === 1 ? comps.includes("meta") ? (this.comp("meta") ?? this.initComp("meta"))?.element ?? fallback : comps.includes("timeline") ? (this.comp("timeline") ?? this.initComp("timeline"))?.element ?? fallback : fallback : fallback;
+  }
+  fillSlot(slot, comps) {
+    if (slot instanceof HTMLElement || !slot.zone) return;
+    let render = this.slotters.get(slot.zone);
+    !render && this.slotters.set(slot.zone, render = createListRenderer({ container: slot.zone, getKey: (id) => id, createNode: (id) => (this.comp(id) ?? this.initComp(id))?.element }));
+    render(comps), this.handleCompsView(slot.zone);
+  }
+  fillWrapper(wrapper, slots) {
+    let render = this.wratters.get(wrapper);
+    !render && this.wratters.set(wrapper, render = createListRenderer({ container: wrapper, getKey: (slot) => "cover" in slot ? slot.cover.dataset.shellId : slot.dataset.controlId, createNode: (slot) => slot instanceof HTMLElement ? slot : slot.cover ?? slot.zone }));
+    render(slots, false);
+  }
+  buildShell(side) {
+    const zone = createEl("div", { className: `tmg-media-side-controls-wrapper tmg-media-${side}-side-controls-wrapper` }, { dropZone: "", shellId: side, scroller: side === "right" ? "reverse" : "" }), cover = createEl("div", { className: `tmg-media-side-controls-wrapper-cover tmg-media-${side}-side-controls-wrapper-cover` }, { shellId: side });
+    return cover.append(zone), { cover, zone };
+  }
+  initScrollAndResize() {
+    for (const el of [...this.zoneEls, this.shells.center.zone]) {
+      this.handleCompsView(el);
+      this.scrollers.push((initScrollAssist(el, { pxPerSecond: el.dataset.dragId === "big" ? 120 : 60 }), el));
+      observeResize(el, () => this.handleCompsView(el), this.signal);
+      el.addEventListener("scroll", this.handleDirtyScroll, { passive: true, signal: this.signal });
+    }
+  }
+  handleDirtyScroll(e) {
+    const el = e.currentTarget;
+    if (el.scrollLeft > 0) el.dataset.hasScrolled = "true";
+    el.dataset.resetScrolled = String(el.scrollLeft === (el.dataset.scroller === "reverse" ? el.scrollWidth - el.clientWidth : 0));
+  }
+  handleCompsView(w) {
+    if (!w.isConnected) return;
+    let spacer, c = w.firstElementChild;
+    do {
+      c?.setAttribute("data-displayed", getComputedStyle(c).display !== "none" ? "true" : "false");
+      c?.setAttribute("data-spacer", "false");
+      if (c?.dataset.displayed === "true" && !spacer) spacer = c;
+    } while (c = c?.nextElementSibling ?? null);
+    this.settings.css.currentTopWrapperHeight = `${this.topWrapper.offsetHeight}px`;
+    this.settings.css.currentBottomWrapperHeight = `${this.bottomWrapper.offsetHeight}px`;
+    if (w.dataset.scroller !== "reverse") return;
+    spacer?.setAttribute("data-spacer", "true");
+    if (w.dataset.resetScrolled === "true") w.dataset.hasScrolled = "false";
+    if (w.dataset.hasScrolled === "true" || w.scrollWidth <= w.clientWidth || w.scrollLeft === w.scrollWidth - w.clientWidth) return void (w.scrollWidth <= w.clientWidth && (w.dataset.hasScrolled = "false"));
+    w.addEventListener("scroll", () => w.dataset.hasScrolled = "false", { once: true, signal: this.signal });
+    w.scrollLeft = w.scrollWidth - w.clientWidth;
+  }
+  onDestroy() {
+    for (const scroller of this.scrollers) removeScrollAssist(scroller);
+    this.draggable?.destroy();
+    for (const control of this.controls.values()) control.destroy();
+    super.onDestroy();
+  }
+};
+__publicField(ControlPanelPlug, "plugName", "controlPanel");
+__publicField(ControlPanelPlug, "BUILD", CONTROL_PANEL_BUILD);
+
+// src/ts/plugs/settings/controlPanel/draggable.ts
+import { getPath, setPath } from "sia-reactor/utils";
+var ControlPanelDraggablePin = class extends BasePin {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "draggingEl", null);
+    __publicField(this, "replaced", null);
+    __publicField(this, "safeTimeoutId", -1);
+    __publicField(this, "teachBasics", limited(
+      async (id = "meta", toast = this.ctlr.plug("settings.toasts")?.toast) => {
+        if (!toast) return;
+        const el = this.ctlr.queryDOM(`[data-control-id="meta"]`, true)[0], loc = getPanelLocation(this.ctlr._build.settings.controlPanel, "meta"), pos = (p, z) => p === "center" ? "center-center" : `${p.startsWith("top") ? "top" : "bottom"}-${z === "left" ? "left" : z === "right" ? "right" : "center"}`, startPos = pos(loc.path, loc.zone), emptyZones = [], cleanup = () => (el?.classList.remove("tmg-media-control-dragging"), this.ctlr.media.container.classList.remove("tmg-media-control-dragging"), emptyZones.forEach((x) => x.zone.classList.remove("tmg-media-dragover")), this.setEventListeners()), highlightZone = (z) => toast.isActive(tId) && (emptyZones.forEach((x) => x.zone.classList.remove("tmg-media-dragover")), z?.classList.add("tmg-media-dragover"));
+        for (const r of ["top", "bottom.1", "bottom.2", "bottom.3"])
+          for (const z of ["left", "center", "right"]) {
+            const row = r === "top" ? this.plug.slots.top : this.plug.slots.bottom[Number(r.split(".")[1])], slot = row[z];
+            if (!(slot instanceof HTMLElement) && slot.zone && !slot.zone.querySelector('[data-control-id]:not([data-control-id="spacer"])') && pos(r, z) !== startPos) emptyZones.push({ pos: pos(r, z), zone: slot.zone });
+          }
+        this.setEventListeners("remove"), el?.classList.add("tmg-media-control-dragging"), this.ctlr.media.container.classList.add("tmg-media-control-dragging"), this.ctlr.plug("settings.overlay")?.show();
+        const tId = toast(`Did you know you can drag the <b>Title</b> around${id !== "meta" ? " too" : ""}?`, { ...tutorialOpts(() => (this.teachBasics.block(), toast.dismiss(tId))), autoClose: false, onClose: cleanup, signal: this.signal });
+        await mockAsync(3500);
+        if (!toast.isActive(tId)) return;
+        toast(`You can move it from here...`, { id: tId, position: startPos });
+        if (emptyZones.length) {
+          await mockAsync(2500);
+          if (!toast.isActive(tId)) return;
+          highlightZone(emptyZones[0].zone), toast(`...to an empty space like here!`, { id: tId, position: emptyZones[0].pos });
+          for (let i = 1; i < emptyZones.length; i++) await mockAsync(2e3), toast.isActive(tId) && (highlightZone(emptyZones[i].zone), toast(`...or here!`, { id: tId, position: emptyZones[i].pos }));
+        }
+        await mockAsync(emptyZones.length ? 2e3 : 2500);
+        if (toast.isActive(tId)) highlightZone(), toast(`Try dragging it to an empty space now!`, { id: tId, position: "center-center", autoClose: 3500 }), cleanup();
+      },
+      { key: "tmg_cp_tut_1", maxTimes: 5 }
+    ));
+  }
+  static get Plug() {
+    return ControlPanelPlug;
+  }
+  wire() {
+    this.ctlr.config.on("settings.controlPanel.draggable", ({ value }) => this.setEventListeners(value ? "add" : "remove"), { init: true, signal: this.signal });
+  }
+  setEventListeners(action = this.config ? "add" : "remove") {
+    for (const c of this.ctlr.queryDOM("[data-draggable-control]", true)) {
+      c.dataset.dragId = c.dataset.dragId ?? "";
+      const act = !inBoolArrOpt(this.config, c.dataset.dragId) ? "remove" : action;
+      c.dataset.draggableControl = String(c.draggable = act === "add");
+      c[`${act}EventListener`]("dragstart", this.handleDragStart, { signal: this.signal });
+      c[`${act}EventListener`]("drag", this.handleDrag, { signal: this.signal });
+      c[`${act}EventListener`]("dragend", this.handleDragEnd, { signal: this.signal });
+    }
+    for (const c of [...this.ctlr.queryDOM("[data-drop-zone][data-drag-id]", true), ...this.plug.zoneEls]) {
+      c.dataset.dragId = c.dataset.dragId ?? "";
+      const act = !inBoolArrOpt(this.config, c.dataset.dragId) ? "remove" : action;
+      c.dataset.dropZone = String(act === "add");
+      c[`${act}EventListener`]("dragenter", this.handleDragEnter, { signal: this.signal });
+      c[`${act}EventListener`]("dragover", this.handleDragOver, { signal: this.signal });
+      c[`${act}EventListener`]("drop", this.handleDragLeave, { signal: this.signal });
+      c[`${act}EventListener`]("dragleave", this.handleDragLeave, { signal: this.signal });
+    }
+  }
+  handleDragStart(e) {
+    const { target: t, dataTransfer } = e;
+    if (!t?.tagName || t.dataset.draggableControl !== "true") return;
+    if (t.matches(":has(:is(input,[role='slider']):is(:hover, :active))")) return e.preventDefault();
+    dataTransfer.effectAllowed = "move";
+    this.draggingEl = t;
+    requestAnimationFrame(() => (t.classList.add("tmg-media-control-dragging"), this.ctlr.media.container.classList.add("tmg-media-control-dragging")), this.signal);
+    this.safeTimeoutId = setTimeout2(() => (t.classList.remove("tmg-media-control-dragging"), this.ctlr.media.container.classList.remove("tmg-media-control-dragging")), 1e3, this.signal);
+    if (t.dataset.dragId !== "wrapper" || t.parentElement?.dataset.dragId !== "wrapper") return;
+    const { path, shell } = this.getShellPath(t, true);
+    setPath(this.plug.slots, path, shell);
+    this.replaced = { target: t.parentElement, child: shell.cover };
+  }
+  handleDrag() {
+    clearTimeout(this.safeTimeoutId);
+  }
+  handleDragEnd(e, t = e.target) {
+    if (!t?.tagName) return;
+    t.classList.remove("tmg-media-control-dragging"), this.ctlr.media.container.classList.remove("tmg-media-control-dragging");
+    this.replaced = this.draggingEl = null;
+    if (t.dataset.dragId === "wrapper" && t.parentElement?.dataset.dragId === "wrapper") setPath(this.plug.slots, this.getShellPath(t), t);
+    this.syncConfig(), this.teachBasics(t.dataset.controlId);
+  }
+  handleDragEnter(e) {
+    !this.noDropOff(e.target) && this.draggingEl && e.target.classList.add("tmg-media-dragover");
+  }
+  handleDragOver(e) {
+    const { target: t, clientX: x, dataTransfer } = e;
+    if (this.noDropOff(t)) return;
+    e.preventDefault();
+    if (dataTransfer) dataTransfer.dropEffect = "move";
+    this.ctlr.throttle(
+      "dragOver",
+      () => {
+        if (t.dataset.dragId === "wrapper") {
+          const atWrapper = getElSiblingAt(x, "x", t.querySelectorAll('.tmg-media-side-controls-wrapper-cover:has([data-drop-zone="true"][data-drag-id=""]:empty)'), "at");
+          if (!atWrapper) return;
+          this.replaced?.target.replaceChild(this.replaced.child, this.draggingEl);
+          this.replaced = { target: t, child: atWrapper };
+          return t.replaceChild(this.draggingEl, atWrapper);
+        }
+        const afterCtrl = getElSiblingAt(x, "x", t.querySelectorAll("[draggable=true]:not(.tmg-media-control-dragging)"));
+        afterCtrl ? t.insertBefore(this.draggingEl, afterCtrl) : t.append(this.draggingEl);
+        if (!t.dataset.dragId) for (const el of this.plug.zoneEls) this.plug.handleCompsView(el);
+      },
+      500,
+      false
+    );
+  }
+  handleDragLeave(e) {
+    !this.noDropOff(e.target) && e.target.classList.remove("tmg-media-dragover");
+  }
+  noDropOff(t, drop = this.draggingEl) {
+    return !drop?.tagName || t.dataset.dropZone !== "true" || t.dataset.dragId !== drop.dataset.dragId && (t.dataset.dragId === "wrapper" || drop.dataset.dragId === "wrapper");
+  }
+  getShellPath(target, both = false) {
+    let key = "";
+    const pos = { 0: "left", 1: "center", 2: "right" }[[...target.parentElement.children].indexOf(target)], cws = this.ctlr.queryDOM(".tmg-media-top-controls-wrapper, .tmg-media-bottom-sub-controls-wrapper", true);
+    cws.forEach((w, i) => w.contains(target) && (key = { 0: "top.", 1: "bottom.1.", 2: "bottom.2.", 3: "bottom.3." }[i]));
+    return both ? { path: key + pos, shell: getPath(this.plug.shells, key + pos) } : key + pos;
+  }
+  syncConfig() {
+    const id = (el) => el.dataset.controlId, derive = (slot, center = false) => [center ? "spacer" : "", ...slot instanceof HTMLElement ? [id(slot)] : Array.from(slot.zone.children, id), center && (slot instanceof HTMLElement || slot.zone.children.length) ? "spacer" : ""].filter(Boolean);
+    this.settings.controlPanel.top = [...derive(this.plug.slots.top.left), ...derive(this.plug.slots.top.center, true), ...derive(this.plug.slots.top.right)];
+    this.settings.controlPanel.center = derive(this.plug.shells.center);
+    this.settings.controlPanel.bottom = { 1: [...derive(this.plug.slots.bottom[1].left), ...derive(this.plug.slots.bottom[1].center, true), ...derive(this.plug.slots.bottom[1].right)], 2: [...derive(this.plug.slots.bottom[2].left), ...derive(this.plug.slots.bottom[2].center, true), ...derive(this.plug.slots.bottom[2].right)], 3: [...derive(this.plug.slots.bottom[3].left), ...derive(this.plug.slots.bottom[3].center, true), ...derive(this.plug.slots.bottom[3].right)] };
+  }
+};
+__publicField(ControlPanelDraggablePin, "pinName", "draggable");
+__publicField(ControlPanelDraggablePin, "BUILD", CONTROL_PANEL_DRAGGABLE_BUILD);
+
+export {
+  ControlPanelDraggablePin,
+  ControlPanelPlug
+};
+//# sourceMappingURL=chunk-JZXJAJNW.js.map

package/dist/chunk-JZXJAJNW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ts/plugs/settings/controlPanel/index.ts","../src/ts/plugs/settings/controlPanel/draggable.ts"],"sourcesContent":["import { BasePlug } from \"../../base\";\r\nimport { CONTROL_PANEL_BUILD } from \"./build\";\r\nimport type { ControlPanelConfig, ControlPanelBottomTuple, ControlPanelSlots, ControlPanelShells, AnyControl, PanelSlot, PanelShell } from \"./types\";\r\nimport { ControlPanelDraggablePin } from \"./draggable\";\r\nimport { ROWS_ARR } from \"./build\";\r\nimport type { Controller } from \"@core/controller\";\r\nimport type { CtlrConfig } from \"@defs/config\";\r\nimport type { ComponentRegistryMap } from \"@defs/registries\";\r\nimport { type REvent } from \"sia-reactor\";\r\nimport { BaseComponent } from \"@components/base\";\r\nimport { ComponentRegistry, PinRegistry } from \"@core/registries\";\r\nimport { createEl, createListRenderer, observeResize } from \"@utils/dom\";\r\nimport { getPanelSplitCtrls, isBool, parsePanelBottomObj } from \"@utils/obj\";\r\nimport { initScrollAssist, removeScrollAssist } from \"@t007/utils/hooks/vanilla\";\r\nimport { fanout } from \"sia-reactor/utils\";\r\n\r\nexport class ControlPanelPlug extends BasePlug<ControlPanelConfig> {\r\n  public static readonly plugName = \"controlPanel\";\r\n  public static readonly BUILD = CONTROL_PANEL_BUILD;\r\n  public controls = new Map<string, BaseComponent<any, any>>();\r\n  public draggable?: ControlPanelDraggablePin;\r\n  public zoneEls!: HTMLElement[];\r\n  public shells!: ControlPanelShells;\r\n  public slots!: ControlPanelSlots;\r\n  protected slotters = new WeakMap<HTMLElement, ReturnType<typeof createListRenderer<string>>>();\r\n  protected wratters = new WeakMap<HTMLElement, ReturnType<typeof createListRenderer<PanelSlot>>>();\r\n  protected scrollers: HTMLElement[] = [];\r\n  protected topWrapper!: HTMLElement;\r\n  protected bigWrapper!: HTMLElement;\r\n  protected bottomWrapper!: HTMLElement;\r\n\r\n  constructor(ctlr: Controller, config = ctlr.settings.controlPanel) {\r\n    super(ctlr, config);\r\n    const Pin = PinRegistry.get(\"controlPanel.draggable\");\r\n    if (Pin) this.draggable = new Pin(this.ctlr, this.config.draggable);\r\n  }\r\n\r\n  public override mount(): void {\r\n    // Variables Assignment\r\n    this.ctlr.DOM.topControlsWrapper = this.topWrapper = createEl(\"div\", { className: \"tmg-media-top-controls-wrapper tmg-media-apt-controls-wrapper\" }, { dropZone: \"\", dragId: \"wrapper\" });\r\n    this.ctlr.DOM.bigControlsWrapper = this.bigWrapper = createEl(\"div\", { className: \"tmg-media-big-controls-wrapper\" }, { dropZone: \"\", dragId: \"big\" });\r\n    this.ctlr.DOM.bottomControlsWrapper = this.bottomWrapper = createEl(\"div\", { className: \"tmg-media-bottom-controls-wrapper\" });\r\n    this.shells = { top: {}, center: {}, bottom: { 1: {}, 2: {}, 3: {} } } as ControlPanelShells;\r\n    this.shells.top = { left: this.buildShell(\"left\"), center: this.buildShell(\"center\"), right: this.buildShell(\"right\") };\r\n    this.shells.center = { zone: this.bigWrapper, cover: createEl(\"div\", { className: \"tmg-media-big-controls-wrapper-cover\" }) };\r\n    for (const i of ROWS_ARR) this.shells.bottom[i] = { left: this.buildShell(\"left\"), center: this.buildShell(\"center\"), right: this.buildShell(\"right\") };\r\n    this.slots = { top: {}, center: this.shells.center, bottom: { 1: {}, 2: {}, 3: {} } } as ControlPanelSlots;\r\n    this.zoneEls = [...Object.values(this.shells.top), ...Object.values(this.shells.bottom).map((v) => Object.values(v))].flat().map((w) => w.zone);\r\n    // DOM Injection\r\n    this.shells.center.cover.append(this.shells.center.zone);\r\n    for (const i of ROWS_ARR) this.bottomWrapper.append(createEl(\"div\", { className: `tmg-media-bottom-sub-controls-wrapper tmg-media-bottom-${i}-sub-controls-wrapper tmg-media-apt-controls-wrapper` }, { dropZone: \"\", dragId: \"wrapper\" }));\r\n    this.ctlr.DOM.controlsContainer?.append(this.topWrapper, this.shells.center.cover, this.bottomWrapper);\r\n    // DOM! -> Ctlr Config Setters\r\n    this.ctlr.config.set(\"settings.controlPanel.bottom\", (v) => parsePanelBottomObj(v), { init: true, signal: this.signal });\r\n    // DOM! -> Ctlr Config Listeners\r\n    this.ctlr.config.on(\"settings.controlPanel.top\", this.handleTop, { init: true, signal: this.signal });\r\n    this.ctlr.config.on(\"settings.controlPanel.center\", this.handleCenter, { init: true, signal: this.signal });\r\n    this.ctlr.config.on(\"settings.controlPanel.bottom\", this.handleBottom, { init: true, signal: this.signal });\r\n    this.ctlr.config.on(\"settings.controlPanel.buffer.value\", this.handleBuffer, { init: true, signal: this.signal });\r\n    // Utility Injection\r\n    this.draggable?.mount?.();\r\n  }\r\n  public override unmount(): void {\r\n    for (const w of [this.topWrapper, this.bigWrapper.parentElement, this.bottomWrapper]) w?.remove();\r\n  }\r\n\r\n  public override wire(): void {\r\n    // Ctlr Config Listeners\r\n    this.ctlr.config.on(\"settings.controlPanel.timeline.thumb.value\", ({ value }) => (this.media.container.dataset.timelineThumb = String(value)), { init: true, signal: this.signal });\r\n    this.ctlr.config.on(\"settings.controlPanel.timeline\", (e, comp = this.comp(\"timeline\")) => comp && fanout(comp.config, e.currentTarget.value), { signal: this.signal }); // #STABLE: snubs unchanged writes\r\n    this.ctlr.config.on(\"settings.controlPanel.progressBar\", ({ value }) => this.media.container.classList.toggle(\"tmg-media-progress-bar\", value), { init: true, signal: this.signal });\r\n    // Utility Injection\r\n    this.draggable?.wire();\r\n    // Post Wiring\r\n    this.initScrollAndResize(), super.wire();\r\n  }\r\n\r\n  protected handleTop({ currentTarget: { value } }: REvent<CtlrConfig, \"settings.controlPanel.top\">): void {\r\n    if (!value || isBool(value)) return;\r\n    const { left, center, right } = getPanelSplitCtrls(value as AnyControl[]);\r\n    this.fillWrapper(this.topWrapper, [(this.slots.top.left = this.getSlot(left, this.shells.top.left)), (this.slots.top.center = this.getSlot(center, this.shells.top.center)), (this.slots.top.right = this.getSlot(right, this.shells.top.right))]);\r\n    this.fillSlot(this.slots.top.left, left), this.fillSlot(this.slots.top.center, center), this.fillSlot(this.slots.top.right, right), this.ctlr.payload.wired && this.config.draggable && this.draggable?.setEventListeners(\"add\");\r\n  }\r\n\r\n  protected handleCenter({ currentTarget: { value } }: REvent<CtlrConfig, \"settings.controlPanel.center\">): void {\r\n    value && !isBool(value) && this.fillSlot(this.slots.center, value), this.ctlr.payload.wired && this.config.draggable && this.draggable?.setEventListeners(\"add\");\r\n  }\r\n\r\n  protected handleBottom({ currentTarget: { value } }: REvent<CtlrConfig, \"settings.controlPanel.bottom\">): void {\r\n    if (!value || isBool(value)) return;\r\n    for (const i of ROWS_ARR) {\r\n      const { left, center, right } = getPanelSplitCtrls((value as ControlPanelBottomTuple)[i]);\r\n      this.fillWrapper(this.bottomWrapper.children[i - 1] as HTMLElement, [(this.slots.bottom[i].left = this.getSlot(left, this.shells.bottom[i].left)), (this.slots.bottom[i].center = this.getSlot(center, this.shells.bottom[i].center)), (this.slots.bottom[i].right = this.getSlot(right, this.shells.bottom[i].right))]);\r\n      this.fillSlot(this.slots.bottom[i].left, left), this.fillSlot(this.slots.bottom[i].center, center), this.fillSlot(this.slots.bottom[i].right, right);\r\n    }\r\n    this.ctlr.payload.wired && this.config.draggable && this.draggable?.setEventListeners(\"add\");\r\n  }\r\n\r\n  protected handleBuffer({ value }: REvent<CtlrConfig, \"settings.controlPanel.buffer.value\">): void {\r\n    if (value && !this.controls.has(\"buffer\")) this.initComp(\"buffer\");\r\n    this.media.container.dataset.buffer = String(value);\r\n  }\r\n\r\n  public initComp<K extends keyof ComponentRegistryMap>(name: K, comp?: InstanceType<ComponentRegistryMap[K]>): InstanceType<ComponentRegistryMap[K]> | undefined;\r\n  public initComp<T extends BaseComponent = BaseComponent>(name: string, comp?: T): T | undefined;\r\n  public initComp(name: string, comp = ComponentRegistry.init(name, this.ctlr, (this.config as any)[name])) {\r\n    return comp ? (this.controls.set(name, comp), comp) : undefined;\r\n  }\r\n\r\n  public comp<K extends keyof ComponentRegistryMap>(name: K): InstanceType<ComponentRegistryMap[K]> | undefined;\r\n  public comp<T extends BaseComponent = BaseComponent>(name: string): T | undefined;\r\n  public comp(name: string): BaseComponent | undefined {\r\n    return this.controls.get(name);\r\n  }\r\n  public compEl<K extends keyof ComponentRegistryMap>(name: K): InstanceType<ComponentRegistryMap[K]>[\"element\"] | undefined;\r\n  public compEl<T extends BaseComponent = BaseComponent>(name: string): T[\"element\"] | undefined;\r\n  public compEl(name: string): HTMLElement | undefined {\r\n    return this.controls.get(name)?.element;\r\n  }\r\n\r\n  public getSlot(comps: AnyControl[], fallback: PanelShell): PanelSlot {\r\n    return comps.length === 1 ? (comps.includes(\"meta\") ? (this.comp(\"meta\") ?? this.initComp(\"meta\"))?.element ?? fallback : comps.includes(\"timeline\") ? (this.comp(\"timeline\") ?? this.initComp(\"timeline\"))?.element ?? fallback : fallback) : fallback;\r\n  }\r\n\r\n  public fillSlot(slot: PanelSlot, comps: AnyControl[]): void {\r\n    if (slot instanceof HTMLElement || !slot.zone) return;\r\n    let render = this.slotters.get(slot.zone); // slot.zone.innerHTML = \"\"; for (const id of comps) slot.zone.append((this.comp(id) ?? this.initComp(id))?.element ?? \"\");\r\n    !render && this.slotters.set(slot.zone, (render = createListRenderer({ container: slot.zone, getKey: (id) => id, createNode: (id) => (this.comp(id) ?? this.initComp(id))?.element })));\r\n    render(comps), this.handleCompsView(slot.zone);\r\n  }\r\n\r\n  public fillWrapper(wrapper: HTMLElement, slots: PanelSlot[]): void {\r\n    let render = this.wratters.get(wrapper); // wrapper.innerHTML = \"\"; wrapper.append(...slots.map((slot) => (slot instanceof HTMLElement ? slot : slot.cover ?? slot.zone)));\r\n    !render && this.wratters.set(wrapper, (render = createListRenderer({ container: wrapper, getKey: (slot) => (\"cover\" in slot ? slot.cover.dataset.shellId! : slot.dataset.controlId!), createNode: (slot) => (slot instanceof HTMLElement ? slot : slot.cover ?? slot.zone) })));\r\n    render(slots, false);\r\n  }\r\n\r\n  public buildShell(side: string): PanelShell {\r\n    const zone = createEl(\"div\", { className: `tmg-media-side-controls-wrapper tmg-media-${side}-side-controls-wrapper` }, { dropZone: \"\", shellId: side, scroller: side === \"right\" ? \"reverse\" : \"\" }),\r\n      cover = createEl(\"div\", { className: `tmg-media-side-controls-wrapper-cover tmg-media-${side}-side-controls-wrapper-cover` }, { shellId: side });\r\n    return cover.append(zone), { cover, zone };\r\n  }\r\n\r\n  protected initScrollAndResize(): void {\r\n    for (const el of [...this.zoneEls, this.shells.center.zone]) {\r\n      this.handleCompsView(el);\r\n      this.scrollers.push((initScrollAssist(el, { pxPerSecond: el.dataset.dragId === \"big\" ? 120 : 60 }), el));\r\n      observeResize(el, () => this.handleCompsView(el), this.signal);\r\n      el.addEventListener(\"scroll\", this.handleDirtyScroll, { passive: true, signal: this.signal });\r\n    }\r\n  }\r\n  public handleDirtyScroll(e: globalThis.Event): void {\r\n    const el = e.currentTarget as HTMLElement;\r\n    if (el.scrollLeft > 0) el.dataset.hasScrolled = \"true\";\r\n    el.dataset.resetScrolled = String(el.scrollLeft === (el.dataset.scroller === \"reverse\" ? el.scrollWidth - el.clientWidth : 0));\r\n  }\r\n\r\n  public handleCompsView(w: HTMLElement): void {\r\n    if (!w.isConnected) return;\r\n    let spacer: HTMLElement | undefined,\r\n      c: HTMLElement | null = w.firstElementChild as HTMLElement | null;\r\n    do {\r\n      c?.setAttribute(\"data-displayed\", getComputedStyle(c).display !== \"none\" ? \"true\" : \"false\");\r\n      c?.setAttribute(\"data-spacer\", \"false\");\r\n      if (c?.dataset.displayed === \"true\" && !spacer) spacer = c;\r\n    } while ((c = (c?.nextElementSibling ?? null) as HTMLElement | null));\r\n    this.settings.css.currentTopWrapperHeight = `${this.topWrapper.offsetHeight}px`;\r\n    this.settings.css.currentBottomWrapperHeight = `${this.bottomWrapper.offsetHeight}px`;\r\n    if (w.dataset.scroller !== \"reverse\") return;\r\n    spacer?.setAttribute(\"data-spacer\", \"true\");\r\n    if (w.dataset.resetScrolled === \"true\") w.dataset.hasScrolled = \"false\";\r\n    if (w.dataset.hasScrolled === \"true\" || w.scrollWidth <= w.clientWidth || w.scrollLeft === w.scrollWidth - w.clientWidth) return void (w.scrollWidth <= w.clientWidth && (w.dataset.hasScrolled = \"false\"));\r\n    w.addEventListener(\"scroll\", () => (w.dataset.hasScrolled = \"false\"), { once: true, signal: this.signal });\r\n    w.scrollLeft = w.scrollWidth - w.clientWidth;\r\n  }\r\n\r\n  protected override onDestroy(): void {\r\n    for (const scroller of this.scrollers) removeScrollAssist(scroller);\r\n    this.draggable?.destroy();\r\n    for (const control of this.controls.values()) control.destroy();\r\n    super.onDestroy();\r\n  }\r\n}\r\n\r\nexport type * from \"./types\";\r\nexport * from \"./build\";\r\nexport * from \"./draggable\";\r\n\r\ndeclare module \"@defs/registries\" {\r\n  interface PlugRegistryMap {\r\n    \"settings.controlPanel\": typeof ControlPanelPlug;\r\n  }\r\n  interface ControllerDOMMap {\r\n    topControlsWrapper?: HTMLDivElement;\r\n    bigControlsWrapper?: HTMLDivElement;\r\n    bottomControlsWrapper?: HTMLDivElement;\r\n  }\r\n}\r\n\r\ndeclare module \"@defs/config\" {\r\n  interface Settings {\r\n    controlPanel: ControlPanelConfig;\r\n  }\r\n}\r\n","import { BasePin } from \"../../base\";\r\nimport { CONTROL_PANEL_DRAGGABLE_BUILD } from \"./build\";\r\nimport { ControlPanelPlug } from \"./index\";\r\nimport { getPath, setPath } from \"sia-reactor/utils\";\r\nimport { getElSiblingAt } from \"@utils/dom\";\r\nimport { limited, setTimeout, requestAnimationFrame, mockAsync } from \"@utils/fn\";\r\nimport { inBoolArrOpt, getPanelLocation } from \"@utils/obj\";\r\nimport type { ControlPanelDraggable, PanelShell, PanelSlot, AnyControl, ControlPanelShells } from \"./types\";\r\nimport { Paths } from \"sia-reactor\";\r\nimport { tutorialOpts } from \"../toasts\";\r\n\r\nexport class ControlPanelDraggablePin extends BasePin<ControlPanelPlug, ControlPanelDraggable> {\r\n  public static readonly pinName = \"draggable\";\r\n  public static get Plug() {\r\n    return ControlPanelPlug;\r\n  }\r\n  public static readonly BUILD = CONTROL_PANEL_DRAGGABLE_BUILD;\r\n  protected draggingEl: HTMLElement | null = null;\r\n  protected replaced: { target: HTMLElement; child: HTMLElement } | null = null;\r\n  protected safeTimeoutId = -1;\r\n\r\n  public override wire(): void {\r\n    this.ctlr.config.on(\"settings.controlPanel.draggable\", ({ value }) => this.setEventListeners(value ? \"add\" : \"remove\"), { init: true, signal: this.signal });\r\n  }\r\n\r\n  public setEventListeners(action: \"add\" | \"remove\" = this.config ? \"add\" : \"remove\"): void {\r\n    for (const c of this.ctlr.queryDOM(\"[data-draggable-control]\", true)) {\r\n      c.dataset.dragId = c.dataset.dragId ?? \"\";\r\n      const act = !inBoolArrOpt(this.config, c.dataset.dragId) ? \"remove\" : action;\r\n      c.dataset.draggableControl = String((c.draggable = act === \"add\"));\r\n      c[`${act as \"add\"}EventListener`](\"dragstart\", this.handleDragStart, { signal: this.signal });\r\n      c[`${act as \"add\"}EventListener`](\"drag\", this.handleDrag, { signal: this.signal });\r\n      c[`${act as \"add\"}EventListener`](\"dragend\", this.handleDragEnd, { signal: this.signal });\r\n    }\r\n    for (const c of [...this.ctlr.queryDOM(\"[data-drop-zone][data-drag-id]\", true), ...this.plug.zoneEls]) {\r\n      c.dataset.dragId = c.dataset.dragId ?? \"\";\r\n      const act = !inBoolArrOpt(this.config, c.dataset.dragId) ? \"remove\" : action;\r\n      c.dataset.dropZone = String(act === \"add\");\r\n      c[`${act as \"add\"}EventListener`](\"dragenter\", this.handleDragEnter, { signal: this.signal });\r\n      c[`${act as \"add\"}EventListener`](\"dragover\", this.handleDragOver, { signal: this.signal });\r\n      c[`${act as \"add\"}EventListener`](\"drop\", this.handleDragLeave, { signal: this.signal });\r\n      c[`${act as \"add\"}EventListener`](\"dragleave\", this.handleDragLeave, { signal: this.signal });\r\n    }\r\n  }\r\n\r\n  protected handleDragStart(e: DragEvent): void {\r\n    const { target: t, dataTransfer } = e as DragEvent & { target: HTMLElement };\r\n    if (!t?.tagName || t.dataset.draggableControl !== \"true\") return;\r\n    if (t.matches(\":has(:is(input,[role='slider']):is(:hover, :active))\")) return e.preventDefault();\r\n    dataTransfer!.effectAllowed = \"move\";\r\n    this.draggingEl = t;\r\n    requestAnimationFrame(() => (t.classList.add(\"tmg-media-control-dragging\"), this.ctlr.media.container.classList.add(\"tmg-media-control-dragging\")), this.signal);\r\n    this.safeTimeoutId = setTimeout(() => (t.classList.remove(\"tmg-media-control-dragging\"), this.ctlr.media.container.classList.remove(\"tmg-media-control-dragging\")), 1000, this.signal);\r\n    if (t.dataset.dragId !== \"wrapper\" || t.parentElement?.dataset.dragId !== \"wrapper\") return;\r\n    const { path, shell } = this.getShellPath(t, true);\r\n    setPath(this.plug.slots, path, shell);\r\n    this.replaced = { target: t.parentElement!, child: shell.cover };\r\n  }\r\n\r\n  protected handleDrag(): void {\r\n    clearTimeout(this.safeTimeoutId);\r\n  }\r\n\r\n  protected handleDragEnd(e: DragEvent, t = e.target as HTMLElement): void {\r\n    if (!t?.tagName) return;\r\n    t.classList.remove(\"tmg-media-control-dragging\"), this.ctlr.media.container.classList.remove(\"tmg-media-control-dragging\");\r\n    this.replaced = this.draggingEl = null;\r\n    if (t.dataset.dragId === \"wrapper\" && t.parentElement?.dataset.dragId === \"wrapper\") setPath(this.plug.slots, this.getShellPath(t), t);\r\n    this.syncConfig(), this.teachBasics(t.dataset.controlId as any);\r\n  }\r\n\r\n  protected handleDragEnter(e: DragEvent): void {\r\n    !this.noDropOff(e.target as HTMLElement) && this.draggingEl && (e.target as HTMLElement).classList.add(\"tmg-media-dragover\");\r\n  }\r\n\r\n  protected handleDragOver(e: DragEvent): void {\r\n    const { target: t, clientX: x, dataTransfer } = e as DragEvent & { target: HTMLElement };\r\n    if (this.noDropOff(t)) return;\r\n    e.preventDefault();\r\n    if (dataTransfer) dataTransfer.dropEffect = \"move\";\r\n    this.ctlr.throttle(\r\n      \"dragOver\",\r\n      () => {\r\n        if (t.dataset.dragId === \"wrapper\") {\r\n          const atWrapper = getElSiblingAt(x, \"x\", t.querySelectorAll<HTMLElement>('.tmg-media-side-controls-wrapper-cover:has([data-drop-zone=\"true\"][data-drag-id=\"\"]:empty)'), \"at\");\r\n          if (!atWrapper) return;\r\n          this.replaced?.target.replaceChild(this.replaced.child, this.draggingEl!);\r\n          this.replaced = { target: t, child: atWrapper };\r\n          return t.replaceChild(this.draggingEl!, atWrapper);\r\n        }\r\n        const afterCtrl = getElSiblingAt(x, \"x\", t.querySelectorAll<HTMLElement>(\"[draggable=true]:not(.tmg-media-control-dragging)\"));\r\n        afterCtrl ? t.insertBefore(this.draggingEl!, afterCtrl) : t.append(this.draggingEl!);\r\n        if (!t.dataset.dragId) for (const el of this.plug.zoneEls) this.plug.handleCompsView(el);\r\n      },\r\n      500,\r\n      false\r\n    );\r\n  }\r\n\r\n  protected handleDragLeave(e: DragEvent): void {\r\n    !this.noDropOff(e.target as HTMLElement) && (e.target as HTMLElement).classList.remove(\"tmg-media-dragover\");\r\n  }\r\n\r\n  protected noDropOff(t: HTMLElement, drop = this.draggingEl): boolean {\r\n    return !drop?.tagName || t.dataset.dropZone !== \"true\" || (t.dataset.dragId !== drop.dataset.dragId && (t.dataset.dragId === \"wrapper\" || drop.dataset.dragId === \"wrapper\"));\r\n  }\r\n\r\n  protected getShellPath(target: HTMLElement, both?: false): Paths<ControlPanelShells>;\r\n  protected getShellPath(target: HTMLElement, both?: true): { path: Paths<ControlPanelShells>; shell: PanelShell };\r\n  protected getShellPath(target: HTMLElement, both = false): string | { path: string; shell: PanelShell } {\r\n    let key = \"\";\r\n    const pos = ({ 0: \"left\", 1: \"center\", 2: \"right\" } as const)[[...target.parentElement!.children].indexOf(target) as 0 | 1 | 2],\r\n      cws = this.ctlr.queryDOM(\".tmg-media-top-controls-wrapper, .tmg-media-bottom-sub-controls-wrapper\", true);\r\n    cws.forEach((w, i) => w.contains(target) && (key = ({ 0: \"top.\", 1: \"bottom.1.\", 2: \"bottom.2.\", 3: \"bottom.3.\" } as const)[i as 0 | 1 | 2 | 3]));\r\n    return both ? { path: key + pos, shell: getPath(this.plug.shells as any, key + pos) } : key + pos;\r\n  }\r\n\r\n  public syncConfig(): void {\r\n    const id = (el: HTMLElement) => el.dataset.controlId,\r\n      derive = (slot: PanelSlot, center = false) => [center ? \"spacer\" : \"\", ...(slot instanceof HTMLElement ? [id(slot)] : Array.from(slot.zone.children as HTMLCollectionOf<HTMLElement>, id)), center && (slot instanceof HTMLElement || slot.zone.children.length) ? \"spacer\" : \"\"].filter(Boolean) as AnyControl[];\r\n    this.settings.controlPanel.top = [...derive(this.plug.slots.top.left), ...derive(this.plug.slots.top.center, true), ...derive(this.plug.slots.top.right)];\r\n    this.settings.controlPanel.center = derive(this.plug.shells.center);\r\n    this.settings.controlPanel.bottom = { 1: [...derive(this.plug.slots.bottom[1].left), ...derive(this.plug.slots.bottom[1].center, true), ...derive(this.plug.slots.bottom[1].right)], 2: [...derive(this.plug.slots.bottom[2].left), ...derive(this.plug.slots.bottom[2].center, true), ...derive(this.plug.slots.bottom[2].right)], 3: [...derive(this.plug.slots.bottom[3].left), ...derive(this.plug.slots.bottom[3].center, true), ...derive(this.plug.slots.bottom[3].right)] };\r\n  }\r\n\r\n  protected teachBasics = limited(\r\n    async (id: AnyControl = \"meta\", toast = this.ctlr.plug(\"settings.toasts\")?.toast) => {\r\n      if (!toast) return;\r\n      const el = this.ctlr.queryDOM(`[data-control-id=\"meta\"]`, true)[0] as HTMLElement,\r\n        loc = getPanelLocation(this.ctlr._build.settings.controlPanel, \"meta\"),\r\n        pos = (p: string, z: string) => (p === \"center\" ? \"center-center\" : (`${p.startsWith(\"top\") ? \"top\" : \"bottom\"}-${z === \"left\" ? \"left\" : z === \"right\" ? \"right\" : \"center\"}` as any)),\r\n        startPos = pos(loc.path, loc.zone),\r\n        emptyZones: { pos: string; zone: HTMLElement }[] = [],\r\n        cleanup = () => (el?.classList.remove(\"tmg-media-control-dragging\"), this.ctlr.media.container.classList.remove(\"tmg-media-control-dragging\"), emptyZones.forEach((x) => x.zone.classList.remove(\"tmg-media-dragover\")), this.setEventListeners()),\r\n        highlightZone = (z?: HTMLElement) => toast.isActive(tId) && (emptyZones.forEach((x) => x.zone.classList.remove(\"tmg-media-dragover\")), z?.classList.add(\"tmg-media-dragover\"));\r\n      for (const r of [\"top\", \"bottom.1\", \"bottom.2\", \"bottom.3\"])\r\n        for (const z of [\"left\", \"center\", \"right\"]) {\r\n          const row = r === \"top\" ? this.plug.slots.top : this.plug.slots.bottom[Number(r.split(\".\")[1]) as 1 | 2 | 3],\r\n            slot = row[z as \"left\" | \"center\" | \"right\"];\r\n          if (!(slot instanceof HTMLElement) && slot.zone && !slot.zone.querySelector('[data-control-id]:not([data-control-id=\"spacer\"])') && pos(r, z) !== startPos) emptyZones.push({ pos: pos(r, z), zone: slot.zone });\r\n        }\r\n      this.setEventListeners(\"remove\"), el?.classList.add(\"tmg-media-control-dragging\"), this.ctlr.media.container.classList.add(\"tmg-media-control-dragging\"), this.ctlr.plug(\"settings.overlay\")?.show();\r\n      const tId = toast(`Did you know you can drag the <b>Title</b> around${id !== \"meta\" ? \" too\" : \"\"}?`, { ...tutorialOpts(() => (this.teachBasics.block(), toast.dismiss(tId))), autoClose: false, onClose: cleanup, signal: this.signal });\r\n      await mockAsync(3500);\r\n      if (!toast.isActive(tId)) return;\r\n      toast(`You can move it from here...`, { id: tId, position: startPos });\r\n      if (emptyZones.length) {\r\n        await mockAsync(2500);\r\n        if (!toast.isActive(tId)) return;\r\n        highlightZone(emptyZones[0].zone), toast(`...to an empty space like here!`, { id: tId, position: emptyZones[0].pos });\r\n        for (let i = 1; i < emptyZones.length; i++) await mockAsync(2000), toast.isActive(tId) && (highlightZone(emptyZones[i].zone), toast(`...or here!`, { id: tId, position: emptyZones[i].pos }));\r\n      }\r\n      await mockAsync(emptyZones.length ? 2000 : 2500);\r\n      if (toast.isActive(tId)) highlightZone(), toast(`Try dragging it to an empty space now!`, { id: tId, position: \"center-center\", autoClose: 3500 }), cleanup();\r\n    },\r\n    { key: \"tmg_cp_tut_1\", maxTimes: 5 }\r\n  );\r\n}\r\n\r\ndeclare module \"@defs/registries\" {\r\n  interface PinRegistryMap {\r\n    \"controlPanel.draggable\": typeof ControlPanelDraggablePin;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-K4UHBEDT.js

@@ -0,0 +1,9 @@
+// src/ts/components/icons/play.ts
+var play = `<svg viewBox="0 0 25 25" class="tmg-media-play-icon">
+  <path d="M8,5.14V19.14L19,12.14L8,5.14Z" />
+</svg>`;
+
+export {
+  play
+};
+//# sourceMappingURL=chunk-K4UHBEDT.js.map

package/dist/chunk-K4UHBEDT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ts/components/icons/play.ts"],"sourcesContent":["export const play = `<svg viewBox=\"0 0 25 25\" class=\"tmg-media-play-icon\">\r\n  <path d=\"M8,5.14V19.14L19,12.14L8,5.14Z\" />\r\n</svg>`;\r\n\r\ndeclare module \"@defs/registries\" {\r\n  interface IconRegistryMap {\r\n    play: typeof play;\r\n  }\r\n}\r\n"],"mappings":";AAAO,IAAM,OAAO;AAAA;AAAA;","names":[]}

package/dist/chunk-K7AAKFQF.js

@@ -0,0 +1,12 @@
+// src/ts/plugs/settings/playbackRate/build.ts
+var PLAYBACK_RATE_BUILD = {
+  min: 0.1,
+  max: 8,
+  skip: 0.25,
+  options: [1, 1.25, 1.5, 2, 3]
+};
+
+export {
+  PLAYBACK_RATE_BUILD
+};
+//# sourceMappingURL=chunk-K7AAKFQF.js.map

package/dist/chunk-K7AAKFQF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ts/plugs/settings/playbackRate/build.ts"],"sourcesContent":["import { PlaybackRateConfig } from \"./types\";\r\n\r\nexport const PLAYBACK_RATE_BUILD: Partial<PlaybackRateConfig> = {\r\n  min: 0.1,\r\n  max: 8,\r\n  skip: 0.25,\r\n  options: [1, 1.25, 1.5, 2, 3],\r\n};\r\n"],"mappings":";AAEO,IAAM,sBAAmD;AAAA,EAC9D,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,SAAS,CAAC,GAAG,MAAM,KAAK,GAAG,CAAC;AAC9B;","names":[]}

package/dist/chunk-KD3OBG25.js

@@ -0,0 +1,15 @@
+// src/ts/plugs/settings/objectFit/build.ts
+var objectFits = ["contain", "cover", "fill"];
+var OBJECT_FIT_BUILD = {
+  options: [
+    { value: "contain", display: "Crop to fit" },
+    { value: "cover", display: "Fit to screen" },
+    { value: "fill", display: "Stretch" }
+  ]
+};
+
+export {
+  objectFits,
+  OBJECT_FIT_BUILD
+};
+//# sourceMappingURL=chunk-KD3OBG25.js.map

package/dist/chunk-KD3OBG25.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ts/plugs/settings/objectFit/build.ts"],"sourcesContent":["import { DeepPartial } from \"sia-reactor\";\r\nimport type { ObjectFitConfig } from \"./types\";\r\n\r\nexport const objectFits = [\"contain\", \"cover\", \"fill\"] as const;\r\n\r\nexport const OBJECT_FIT_BUILD: DeepPartial<ObjectFitConfig> = {\r\n  options: [\r\n    { value: \"contain\", display: \"Crop to fit\" },\r\n    { value: \"cover\", display: \"Fit to screen\" },\r\n    { value: \"fill\", display: \"Stretch\" },\r\n  ]\r\n};\r\n"],"mappings":";AAGO,IAAM,aAAa,CAAC,WAAW,SAAS,MAAM;AAE9C,IAAM,mBAAiD;AAAA,EAC5D,SAAS;AAAA,IACP,EAAE,OAAO,WAAW,SAAS,cAAc;AAAA,IAC3C,EAAE,OAAO,SAAS,SAAS,gBAAgB;AAAA,IAC3C,EAAE,OAAO,QAAQ,SAAS,UAAU;AAAA,EACtC;AACF;","names":[]}

package/dist/chunk-KJ74PGBI.js

@@ -0,0 +1,45 @@
+import {
+  BaseComponent
+} from "./chunk-SWYNIQHD.js";
+import {
+  formatKeyForDisplay
+} from "./chunk-LYKZAKVN.js";
+import {
+  IconRegistry
+} from "./chunk-2JW4RYM4.js";
+import {
+  createEl
+} from "./chunk-ZJ6KVLUS.js";
+import {
+  __publicField
+} from "./chunk-UVKRO5ER.js";
+
+// src/ts/components/controls/cast.ts
+var CastButton = class extends BaseComponent {
+  create() {
+    return this.element = createEl("button", { className: "tmg-media-cast-btn", type: "button", innerHTML: IconRegistry.get("cast") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.cast", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.cast", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.cast", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.cast", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.media.intent.cast = !this.media.state.cast;
+  }
+  syncARIA() {
+    this.state.label = this.media.state.cast ? "Stop casting" : "Cast to TV";
+    this.state.cmd = formatKeyForDisplay(this.settings.keys.shortcuts.cast, this.settings.voice.commands.cast);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(CastButton, "componentName", "cast");
+__publicField(CastButton, "isControl", true);
+
+export {
+  CastButton
+};
+//# sourceMappingURL=chunk-KJ74PGBI.js.map

package/dist/chunk-KJ74PGBI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ts/components/controls/cast.ts"],"sourcesContent":["import { BaseComponent, ComponentState } from \"@components/base\";\r\nimport { IconRegistry } from \"@core/registries\";\r\nimport { createEl } from \"@utils/dom\";\r\nimport { formatKeyForDisplay } from \"@utils/keys\";\r\n\r\nexport type CastConfig = undefined;\r\n\r\nexport class CastButton extends BaseComponent<CastConfig, ComponentState, HTMLButtonElement> {\r\n  public static readonly componentName: string = \"cast\";\r\n  public static readonly isControl: boolean = true;\r\n\r\n  public override create() {\r\n    return (this.element = createEl(\"button\", { className: \"tmg-media-cast-btn\", type: \"button\", innerHTML: IconRegistry.get(\"cast\") }, { draggableControl: \"\", controlId: this.name }));\r\n  }\r\n\r\n  public override wire(): void {\r\n    // Features Gating\r\n    this.media.on(\"features.cast\", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });\r\n    // Event Listeners\r\n    this.el.addEventListener(\"click\", this.handleClick, { signal: this.signal });\r\n    // Ctlr Media Listeners\r\n    this.media.on(\"state.cast\", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });\r\n    // ---- Config --------\r\n    this.ctlr.config.on(\"settings.keys.shortcuts.cast\", this.syncARIA, { init: true, signal: this.signal });\n    this.ctlr.config.on(\"settings.voice.commands.cast\", this.syncARIA, { signal: this.signal });\r\n  }\r\n\r\n  protected handleClick(): void {\r\n    this.media.intent.cast = !this.media.state.cast;\r\n  }\r\n\r\n  public syncARIA(): void {\r\n    this.state.label = this.media.state.cast ? \"Stop casting\" : \"Cast to TV\";\r\n    this.state.cmd = formatKeyForDisplay(this.settings.keys.shortcuts.cast, this.settings.voice.commands.cast);\r\n    this.el.title = this.state.label + this.state.cmd;\r\n    this.setBtnARIA();\r\n  }\r\n}\r\n\r\ndeclare module \"@defs/registries\" {\r\n  interface ComponentRegistryMap {\r\n    cast: typeof CastButton;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;AAOO,IAAM,aAAN,cAAyB,cAA6D;AAAA,EAI3E,SAAS;AACvB,WAAQ,KAAK,UAAU,SAAS,UAAU,EAAE,WAAW,sBAAsB,MAAM,UAAU,WAAW,aAAa,IAAI,MAAM,EAAE,GAAG,EAAE,kBAAkB,IAAI,WAAW,KAAK,KAAK,CAAC;AAAA,EACpL;AAAA,EAEgB,OAAa;AAE3B,SAAK,MAAM,GAAG,iBAAiB,KAAK,MAAM,EAAE,MAAM,KAAK,KAAK,QAAQ,OAAO,QAAQ,KAAK,OAAO,CAAC;AAEhG,SAAK,GAAG,iBAAiB,SAAS,KAAK,aAAa,EAAE,QAAQ,KAAK,OAAO,CAAC;AAE3E,SAAK,MAAM,GAAG,cAAc,KAAK,UAAU,EAAE,MAAM,KAAK,KAAK,QAAQ,OAAO,QAAQ,KAAK,OAAO,CAAC;AAEjG,SAAK,KAAK,OAAO,GAAG,gCAAgC,KAAK,UAAU,EAAE,MAAM,MAAM,QAAQ,KAAK,OAAO,CAAC;AACtG,SAAK,KAAK,OAAO,GAAG,gCAAgC,KAAK,UAAU,EAAE,QAAQ,KAAK,OAAO,CAAC;AAAA,EAC5F;AAAA,EAEU,cAAoB;AAC5B,SAAK,MAAM,OAAO,OAAO,CAAC,KAAK,MAAM,MAAM;AAAA,EAC7C;AAAA,EAEO,WAAiB;AACtB,SAAK,MAAM,QAAQ,KAAK,MAAM,MAAM,OAAO,iBAAiB;AAC5D,SAAK,MAAM,MAAM,oBAAoB,KAAK,SAAS,KAAK,UAAU,MAAM,KAAK,SAAS,MAAM,SAAS,IAAI;AACzG,SAAK,GAAG,QAAQ,KAAK,MAAM,QAAQ,KAAK,MAAM;AAC9C,SAAK,WAAW;AAAA,EAClB;AACF;AA7BE,cADW,YACY,iBAAwB;AAC/C,cAFW,YAEY,aAAqB;","names":[]}

package/dist/chunk-KLAI7YSD.js

@@ -0,0 +1,7 @@
+// src/ts/components/icons/playlist.ts
+var playlist = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8h2v-6h4v-2h-6z"/></svg>`;
+
+export {
+  playlist
+};
+//# sourceMappingURL=chunk-KLAI7YSD.js.map

package/dist/chunk-KLAI7YSD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ts/components/icons/playlist.ts"],"sourcesContent":["export const playlist = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8h2v-6h4v-2h-6z\"/></svg>`;\r\n\r\ndeclare module \"@defs/registries\" {\r\n  interface IconRegistryMap {\r\n    playlist: typeof playlist;\r\n  }\r\n}\r\n"],"mappings":";AAAO,IAAM,WAAW;","names":[]}