tmg-media-player 0.0.1

package/dist/components/z-register.cjs

@@ -0,0 +1,2345 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/ts/consts/config.ts
+var import_sia_reactor = require("sia-reactor");
+
+// src/ts/consts/actions.ts
+var ACTIONS_BUILD = {
+  // --- Keyboard-only actions (no default voice triggers; path router covers voice) ---
+  playPause: { label: "Play / Pause" },
+  skipFwd: { label: "Skip Forward", notify: "fwd" },
+  skipBwd: { label: "Skip Back", notify: "bwd" },
+  volumeUp: { label: "Volume Up", notify: "volumeup" },
+  volumeDown: { label: "Volume Down", notify: "volumedown" },
+  brightnessUp: { label: "Brightness Up", notify: "brightnessup" },
+  brightnessDown: { label: "Brightness Down", notify: "brightnessdown" },
+  playbackRateUp: { label: "Playback Rate Up", notify: "playbackrateup" },
+  playbackRateDown: { label: "Playback Rate Down", notify: "playbackratedown" },
+  stepFwd: { label: "Step Forward", notify: "fwd" },
+  stepBwd: { label: "Step Back", notify: "bwd" },
+  prev: { label: "Previous", notify: "mediaprev" },
+  next: { label: "Next", notify: "medianext" },
+  captions: { label: "Captions", notify: "captions" },
+  captionsFontSizeUp: { label: "Captions: Font Size Up" },
+  captionsFontSizeDown: { label: "Captions: Font Size Down" },
+  captionsFontFamily: { label: "Captions: Font Family" },
+  captionsFontWeight: { label: "Captions: Font Weight" },
+  captionsFontVariant: { label: "Captions: Font Variant" },
+  captionsFontOpacity: { label: "Captions: Font Opacity" },
+  captionsBackgroundOpacity: { label: "Captions: Background Opacity" },
+  captionsWindowOpacity: { label: "Captions: Window Opacity" },
+  captionsCharacterEdgeStyle: { label: "Captions: Character Edge" },
+  captionsTextAlignment: { label: "Captions: Text Alignment" },
+  objectFit: { label: "Object Fit" },
+  capture: { label: "Capture Frame", notify: "capture" },
+  cast: { label: "Cast", notify: "cast" },
+  airplay: { label: "AirPlay", notify: "airplay" },
+  dark: { label: "Dark Mode" },
+  settings: { label: "Settings", zen: true },
+  // --- Logic-expressible actions (logic[] + keyboard, no default voice triggers) ---
+  mute: { label: "Mute", notify: "volumemuted" },
+  fullscreen: { label: "Fullscreen", notify: "fullscreen", logic: [{ path: "media.intent.fullscreen", op: "toggle" }] },
+  theater: { label: "Theater", notify: "theater", logic: [{ path: "media.intent.theater", op: "toggle" }] },
+  pictureInPicture: { label: "Picture in Picture", notify: "pictureinpicture", logic: [{ path: "media.intent.pictureInPicture", op: "toggle" }] },
+  timeFormat: { label: "Time Format" },
+  timeMode: { label: "Time Mode" },
+  // --- Compound (voice|time)-only actions (voice engine meta, path router can't reach these) ---
+  timeTravelUndo: { label: "Time Travel: Undo", zen: true },
+  timeTravelRedo: { label: "Time Travel: Redo", zen: true },
+  voiceQuit: { label: "Voice: Quit", zen: true },
+  voiceSleep: { label: "Voice: Sleep", zen: true },
+  voiceSubmit: { label: "Voice: Submit", zen: true },
+  voiceHistoryFirst: { label: "Voice: Go to Root", zen: true },
+  voiceHistoryPrev: { label: "Voice: Go Back", zen: true },
+  voiceHistoryNext: { label: "Voice: Go Forward", zen: true },
+  voiceHistoryLast: { label: "Voice: Go to Leaf", zen: true },
+  voiceHistoryClear: { label: "Voice: Clear History", zen: true },
+  voiceToggleOn: { label: "Voice: Toggle On", zen: true },
+  voiceToggleOff: { label: "Voice: Toggle Off", zen: true }
+};
+
+// src/ts/consts/config.ts
+var CONFIG_BUILD = {
+  mediaType: "video",
+  mediaPlayer: "TMG",
+  media: { intent: { playsInline: true, textVisible: true, brightness: 100 } },
+  actions: Object.fromEntries(Object.entries(ACTIONS_BUILD).map(([k, v]) => [k, { id: k, ...v }])),
+  logicPathBlacklist: ["media.state", "media.status", "media.tech", "media.features", "media.type", "media.element", "media.pseudoElement", "media.container", "media.pseudoContainer"],
+  settings: {
+    // techOrder: [
+    //   "youtube", // 1. Black-box (Regex must catch these URLs instantly)
+    //   "vimeo", // 2. Black-box (Regex must catch these URLs instantly)
+    //   "shaka", // 3. THE APEX PREDATOR (Catches .mpd and .m3u8 first)
+    //   "hls", // 4. Fallback (Catches .m3u8 ONLY if Shaka is disabled/fails)
+    //   "dash", // 5. Fallback (Catches .mpd ONLY if Shaka is disabled/fails)
+    //   "html5", // 6. The Native Floor (Catches raw .mp4, .webm, .mp3, etc.)
+    // ],
+  },
+  debug: true,
+  devMode: import_sia_reactor.CTX.isDevEnv,
+  noPlugList: []
+  // dev: "settings.persist"
+};
+
+// src/ts/core/registries.ts
+var import_utils = require("sia-reactor/utils");
+var BaseRegistry = class {
+  constructor() {
+    __publicField(this, "items", []);
+  }
+  register(name, value, config) {
+    return this.unregister(name), this.items.push({ name, value, config }), this;
+  }
+  unregister(name, idx = this.items.findIndex((i) => i.name === name)) {
+    return idx !== -1 && this.items.splice(idx, 1), this;
+  }
+  get(name) {
+    return this.items.find((i) => i.name === name)?.value;
+  }
+  getAll(order) {
+    if (!order) return this.items.map((i) => i.value);
+    return this.items.sort((a, b, ai = order.indexOf(a.name), bi = order.indexOf(b.name)) => ai === -1 && bi === -1 ? 0 : ai === -1 ? 1 : bi === -1 ? -1 : ai - bi).map((i) => i.value);
+  }
+  clear() {
+    return this.items = [], this;
+  }
+};
+var OrderedRegistry = class extends BaseRegistry {
+  registerFirst(name, value, config) {
+    return this.unregister(name), this.items.unshift({ name, value, config }), this;
+  }
+  registerBefore(key, name, value, config) {
+    this.unregister(name);
+    const idx = this.items.findIndex((i) => i.name === key);
+    return idx !== -1 ? (this.items.splice(idx, 0, { name, value, config }), this) : this.register(name, value, config);
+  }
+  registerAfter(key, name, value, config) {
+    this.unregister(name);
+    const idx = this.items.findIndex((i) => i.name === key);
+    return idx !== -1 ? (this.items.splice(idx + 1, 0, { name, value, config }), this) : this.register(name, value, config);
+  }
+};
+var _TechRegistry = class _TechRegistry extends OrderedRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(Tech) {
+    this.instance.register(Tech.techName, Tech);
+  }
+  static unregister(name) {
+    this.instance.unregister(name);
+  }
+  static registerBefore(key, Tech) {
+    this.instance.registerBefore(key, Tech.techName, Tech);
+  }
+  static registerAfter(key, Tech) {
+    this.instance.registerAfter(key, Tech.techName, Tech);
+  }
+  static pick(src, techOrder) {
+    return this.instance.getAll(techOrder).find((Tech) => Tech.canPlaySource(src)) || null;
+  }
+};
+__publicField(_TechRegistry, "instance", new _TechRegistry());
+var TechRegistry = _TechRegistry;
+var _PlugRegistry = class _PlugRegistry extends OrderedRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(Plug, editBuild = Plug.BUILD !== void 0) {
+    this.instance.register(Plug.fullName, Plug);
+    editBuild && (0, import_utils.setPath)(CONFIG_BUILD, Plug.fullName, Plug.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils.deletePath)(CONFIG_BUILD, fullName);
+  }
+  static registerBefore(key, Plug) {
+    this.instance.registerBefore(key, Plug.fullName, Plug);
+  }
+  static registerAfter(key, Plug) {
+    this.instance.registerAfter(key, Plug.fullName, Plug);
+  }
+  static getOrdered() {
+    return this.instance.getAll();
+  }
+};
+__publicField(_PlugRegistry, "instance", new _PlugRegistry());
+var PlugRegistry = _PlugRegistry;
+var _PinRegistry = class _PinRegistry extends BaseRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(Pin, editBuild = Pin.BUILD !== void 0) {
+    this.instance.register(Pin.fullName, Pin);
+    editBuild && (0, import_utils.setPath)(CONFIG_BUILD, Pin.Plug.fullName + "." + Pin.pinName, Pin.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils.deletePath)(fullName.slice(0, fullName.indexOf(".")) in CONFIG_BUILD ? CONFIG_BUILD : CONFIG_BUILD.settings, fullName);
+  }
+};
+__publicField(_PinRegistry, "instance", new _PinRegistry());
+var PinRegistry = _PinRegistry;
+var _MenuRegistry = class _MenuRegistry extends BaseRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(name, factory) {
+    this.instance.register(name, factory);
+  }
+  static unregister(name) {
+    this.instance.unregister(name);
+  }
+};
+__publicField(_MenuRegistry, "instance", new _MenuRegistry());
+var MenuRegistry = _MenuRegistry;
+var _ComponentRegistry = class _ComponentRegistry extends BaseRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(Comp) {
+    this.instance.register(Comp.componentName, Comp);
+  }
+  static unregister(name) {
+    this.instance.unregister(name);
+  }
+  static init(name, ctlr, config = {}) {
+    const Comp = this.instance.get(name);
+    if (!Comp) return null;
+    const instance = new Comp(ctlr, config);
+    return instance.create(), instance.setup();
+  }
+  static getAll() {
+    return this.instance.getAll();
+  }
+};
+__publicField(_ComponentRegistry, "instance", new _ComponentRegistry());
+var ComponentRegistry = _ComponentRegistry;
+var _IconRegistry = class _IconRegistry extends BaseRegistry {
+  static get(name, raw = false, token = /\btmg-media-[^\s"']+\s*/g) {
+    return (raw ? this.instance.get(name)?.replace(token, "") : this.instance.get(name)) || `<svg></svg>`;
+  }
+  static register(name, svg) {
+    this.instance.register(name, svg);
+  }
+  static unregister(name) {
+    this.instance.unregister(name);
+  }
+  // Bulk register a map of icons { play: "<svg...>", pause: "<svg...>" }
+  static registerAll(icons) {
+    for (const k of Object.keys(icons)) this.instance.register(k, icons[k]);
+  }
+};
+__publicField(_IconRegistry, "instance", new _IconRegistry());
+var IconRegistry = _IconRegistry;
+
+// src/ts/core/controllable.ts
+var import_sia_reactor4 = require("sia-reactor");
+var import_utils14 = require("sia-reactor/utils");
+
+// ../t007-tools/packages/utils/dist/chunk-ZALPHCSJ.js
+var import_utils2 = require("sia-reactor/utils");
+var import_utils3 = require("sia-reactor/utils");
+var import_sia_reactor2 = require("sia-reactor");
+var import_sia_reactor3 = require("sia-reactor");
+var import_utils4 = require("sia-reactor/utils");
+var import_utils5 = require("sia-reactor/utils");
+var import_utils6 = require("sia-reactor/utils");
+var import_utils7 = require("sia-reactor/utils");
+var import_utils8 = require("sia-reactor/utils");
+var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
+var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
+function getWindow(el = window) {
+  return el?.ownerDocument?.defaultView ?? el?.defaultView ?? window;
+}
+function isDef(val) {
+  return "undefined" !== typeof val;
+}
+function isBool(val) {
+  return "boolean" === typeof val;
+}
+function isNum(val) {
+  return "number" === typeof val;
+}
+function isStr(val) {
+  return "string" === typeof val;
+}
+function isFunc(val) {
+  return "function" === typeof val;
+}
+function capitalize(word = "") {
+  return word.replace(/^(\s*)([a-z])/i, (_, s, l) => s + l.toUpperCase());
+}
+function bindCleanupToSignal(cleanup, signal) {
+  signal?.aborted ? cleanup() : signal?.addEventListener("abort", cleanup, { once: true });
+  if (signal && !signal.aborted) cleanup = (() => (signal.removeEventListener("abort", cleanup), cleanup()));
+  return cleanup;
+}
+if ("undefined" !== typeof window) {
+  (window.t007 ?? (window.t007 = {})).VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
+  window.T007_TOAST_JS_SRC ?? (window.T007_TOAST_JS_SRC = `https://cdn.jsdelivr.net/npm/@t007/toast@latest`);
+  window.T007_INPUT_JS_SRC ?? (window.T007_INPUT_JS_SRC = `https://cdn.jsdelivr.net/npm/@t007/input@latest`);
+  window.T007_DIALOG_JS_SRC ?? (window.T007_DIALOG_JS_SRC = `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`);
+  window.T007_TOAST_CSS_SRC ?? (window.T007_TOAST_CSS_SRC = `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.min.css`);
+  window.T007_INPUT_CSS_SRC ?? (window.T007_INPUT_CSS_SRC = `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.min.css`);
+  window.T007_DIALOG_CSS_SRC ?? (window.T007_DIALOG_CSS_SRC = `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`);
+}
+
+// src/ts/utils/obj.ts
+var import_utils11 = require("sia-reactor/utils");
+
+// src/ts/core/controllable.ts
+var Controllable = class {
+  // for easy reach, better devx
+  constructor(ctlr, config, state) {
+    __publicField(this, "ac", new AbortController());
+    __publicField(this, "signal", this.ac.signal);
+    __publicField(this, "ctlr");
+    __publicField(this, "media");
+    __publicField(this, "state");
+    // for reactivity needs of those who pass it up
+    __publicField(this, "config");
+    (0, import_utils8.guardAllMethods)(this, ctlr.guard);
+    this.signal = AbortSignal.any([this.signal, ctlr.signal]);
+    this.ctlr = ctlr;
+    this.media = ctlr.media;
+    this.state = (0, import_utils4.isObj)(state) ? (0, import_sia_reactor4.reactive)(state) : state;
+    this.config = config;
+  }
+  // may be a reactive obj node or the obj itself
+  get settings() {
+    return this.ctlr.settings;
+  }
+  setup() {
+    return this.onSetup(), this;
+  }
+  destroy() {
+    !this.signal.aborted && this.ac.abort(`[TMG Controllable] Instance is being destroyed`);
+    this.onDestroy(), this.state?.destroy?.(), this.config !== this.media && isFunc(this.config?.destroy) && this.config?.destroy?.();
+    (0, import_utils14.nuke)(this);
+  }
+  onDestroy() {
+  }
+};
+
+// src/ts/utils/keys.ts
+function formatActionForDisplay(keyShortcut, voiceCmd) {
+  const kArr = Array.isArray(keyShortcut) ? keyShortcut : keyShortcut ? [keyShortcut] : [];
+  return [kArr.length ? `\u2328\uFE0F ${kArr.map((c) => (0, import_utils7.cleanKeyCombo)(c).replace(" ", "space")).join(" or ")}` : "", voiceCmd?.length ? `\u{1F399}\uFE0F "${voiceCmd[0]}"` : ""].filter(Boolean).join(" \xB7 ");
+}
+function formatKeyForDisplay2(keyShortcut, voiceCmd) {
+  const combined = formatActionForDisplay(keyShortcut, voiceCmd);
+  return combined ? ` ( ${combined} )` : "";
+}
+
+// src/ts/components/base/index.ts
+var BaseComponent = class extends Controllable {
+  constructor(ctlr, config, state) {
+    super(ctlr, config, { label: "", cmd: "", active: false, disabled: false, hidden: false, ...state });
+    __publicField(this, "element");
+  }
+  get name() {
+    return this.constructor.componentName;
+  }
+  get el() {
+    return this.element;
+  }
+  onSetup() {
+    this.mount?.();
+    this.ctlr.state.readyState ? this.wire?.() : this.wire && this.ctlr.state.wonce("readyState", this.wire, { signal: this.signal });
+  }
+  onDestroy() {
+    this.unmount();
+  }
+  // Must assign to this.element before returning
+  mount() {
+  }
+  unmount() {
+    this.el.remove();
+  }
+  wire() {
+  }
+  // auto unwiring
+  active() {
+    this.el.classList.toggle("tmg-media-control-active", this.state.active = true);
+  }
+  inactive() {
+    this.el.classList.toggle("tmg-media-control-active", this.state.active = false);
+  }
+  disable() {
+    this.el.classList.toggle("tmg-media-control-disabled", this.state.disabled = true);
+  }
+  enable() {
+    this.el.classList.toggle("tmg-media-control-disabled", this.state.disabled = false);
+  }
+  hide() {
+    this.el.classList.toggle("tmg-media-control-hidden", this.state.hidden = true);
+  }
+  show() {
+    this.el.classList.toggle("tmg-media-control-hidden", this.state.hidden = false);
+  }
+  gate(e) {
+    !e.value ? this.hide() : this.canShow && this.show();
+  }
+  get canShow() {
+    return true;
+  }
+  // override to make gating smarter
+  setBtnARIA(dblAction, target = this.el) {
+    this.state.label && target.setAttribute("aria-label", this.state.label);
+    this.state.cmd && target.setAttribute("aria-keyshortcuts", (0, import_utils7.parseForARIAKS)(this.state.cmd));
+    if (dblAction) target.setAttribute("aria-description", `Double-press to ${dblAction}`);
+    else if (target.hasAttribute("aria-description")) target.removeAttribute("aria-description");
+  }
+};
+__publicField(BaseComponent, "componentName");
+__publicField(BaseComponent, "isControl", false);
+
+// src/ts/components/rangeinput/build.ts
+var RANGE_INPUT_BUILD = {
+  label: "Range Slider",
+  min: 0,
+  max: 100,
+  value: 0,
+  previewValue: 50,
+  step: 1,
+  scrub: {
+    sync: true,
+    relative: true,
+    cancel: {
+      delta: 5,
+      timeout: 1500
+    }
+  },
+  wheel: {
+    disabled: false,
+    axisRatio: 6
+  },
+  preview: true,
+  tooltip: true,
+  readonly: false,
+  disabled: false,
+  divs: [],
+  marks: []
+};
+
+// src/ts/components/rangeinput/index.ts
+var import_sia_reactor8 = require("sia-reactor");
+var import_utils22 = require("sia-reactor/utils");
+
+// src/ts/utils/dom.ts
+var import_sia_reactor7 = require("sia-reactor");
+
+// ../t007-tools/packages/utils/dist/hooks/vanilla.js
+var import_sia_reactor5 = require("sia-reactor");
+var import_sia_reactor6 = require("sia-reactor");
+function initScrollAssist(el, { pxPerSecond = 80, assistClassName = "t007-scroll-assist", vertical = true, horizontal = true } = import_sia_reactor5.NIL) {
+  const parent = el?.parentElement, existing = (t007._scrollers ?? (t007._scrollers = /* @__PURE__ */ new WeakMap())).get(el);
+  if (!parent || existing) return existing ? existing : void 0;
+  t007._scrollers_r_observer ?? (t007._scrollers_r_observer = new ResizeObserver((entries) => {
+    for (const { target } of entries) t007._scrollers.get(target)?.update();
+  }));
+  t007._scrollers_m_observer ?? (t007._scrollers_m_observer = new MutationObserver((entries) => {
+    const els = /* @__PURE__ */ new Set();
+    for (const entry of entries) {
+      let node = entry.target instanceof Element ? entry.target : null;
+      while (node && !t007._scrollers.has(node)) node = node.parentElement;
+      if (node) els.add(node);
+    }
+    for (const el2 of els) t007._scrollers.get(el2)?.update();
+  }));
+  const assist = {};
+  let scrollId = null, last = performance.now(), assistWidth = 20, assistHeight = 20;
+  const update = () => {
+    const hasInteractive = !!parent.querySelector(INTERACTIVE_SELECTOR);
+    if (horizontal) {
+      const w = assist.left?.offsetWidth || assistWidth, check = hasInteractive ? el.clientWidth < w * 2 : false;
+      assist.left.style.display = check ? "none" : el.scrollLeft > 0 ? "block" : "none";
+      assist.right.style.display = check ? "none" : el.scrollLeft + el.clientWidth < el.scrollWidth - 1 ? "block" : "none";
+      assistWidth = w;
+    }
+    if (vertical) {
+      const h = assist.up?.offsetHeight || assistHeight, check = hasInteractive ? el.clientHeight < h * 2 : false;
+      assist.up.style.display = check ? "none" : el.scrollTop > 0 ? "block" : "none";
+      assist.down.style.display = check ? "none" : el.scrollTop + el.clientHeight < el.scrollHeight - 1 ? "block" : "none";
+      assistHeight = h;
+    }
+  };
+  const scroll = (dir) => {
+    const frame = () => {
+      const now = performance.now(), dt = now - last;
+      last = now;
+      const d = pxPerSecond * dt / 1e3;
+      if (dir === "left") el.scrollLeft = Math.max(0, el.scrollLeft - d);
+      if (dir === "right") el.scrollLeft = Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + d);
+      if (dir === "up") el.scrollTop = Math.max(0, el.scrollTop - d);
+      if (dir === "down") el.scrollTop = Math.min(el.scrollHeight - el.clientHeight, el.scrollTop + d);
+      scrollId = requestAnimationFrame(frame);
+    };
+    last = performance.now();
+    frame();
+  };
+  const stop = () => (cancelAnimationFrame(scrollId ?? 0), scrollId = null);
+  const addAssist = (dir) => {
+    const div = (0, import_utils2.createEl)("div", { className: assistClassName }, { scrollDirection: dir }, { display: "none" });
+    if (!div) return;
+    for (const evt of ["pointerenter", "dragenter"]) div.addEventListener(evt, () => scroll(dir));
+    for (const evt of ["pointerleave", "pointerup", "pointercancel", "dragleave", "dragend"]) div.addEventListener(evt, stop);
+    dir === "left" || dir === "up" ? parent.insertBefore(div, el) : parent.append(div);
+    assist[dir] = div;
+  };
+  if (horizontal) for (const dir of ["left", "right"]) addAssist(dir);
+  if (vertical) for (const dir of ["up", "down"]) addAssist(dir);
+  const handle = {
+    update,
+    destroy() {
+      stop(), el.removeEventListener("scroll", update);
+      t007._scrollers_r_observer.unobserve(el), t007._scrollers.delete(el);
+      for (const a of Object.values(assist)) a.remove();
+    }
+  };
+  update(), el.addEventListener("scroll", update);
+  t007._scrollers_r_observer.observe(el), t007._scrollers_m_observer.observe(el, { childList: true, subtree: true, characterData: true });
+  return t007._scrollers.set(el, handle), handle;
+}
+var removeScrollAssist = (el) => t007._scrollers.get(el)?.destroy();
+
+// src/ts/utils/dom.ts
+var win = "undefined" !== typeof window ? window : void 0;
+function addSafeClicks(el, onClick = import_sia_reactor7.NOOP, onDblClick = import_sia_reactor7.NOOP, options) {
+  el && removeSafeClicks(el);
+  el?.addEventListener("click", el._clickHandler = (e) => (clearTimeout(el._clickTimeoutId), el._clickTimeoutId = setTimeout(() => onClick(e), 300)), options);
+  el?.addEventListener("dblclick", el._dblClickHandler = (e) => (clearTimeout(el._clickTimeoutId), onDblClick(e)), options);
+}
+function removeSafeClicks(el) {
+  el?.removeEventListener("click", el._clickHandler);
+  el?.removeEventListener("dblclick", el._dblClickHandler);
+}
+var intersectionObserver = win ? new IntersectionObserver(
+  (entries) => {
+    for (const entry of entries) if (entry.target._intersectCbs) for (const cb of entry.target._intersectCbs) cb(entry);
+  },
+  { root: null, rootMargin: "0px", threshold: 0.3 }
+) : null;
+var resizeObserver = win ? new ResizeObserver((entries) => {
+  for (const entry of entries) if (entry.target._resizeCbs) for (const cb of entry.target._resizeCbs) cb(entry);
+}) : null;
+var mutationObserver = win ? new MutationObserver((mutations) => {
+  const target = mutations[0].target;
+  if (target._mutationCbs) for (const cb of target._mutationCbs) cb(mutations);
+}) : null;
+function observeResize(el, cb, sig) {
+  (el._resizeCbs ?? (el._resizeCbs = /* @__PURE__ */ new Set())).add(cb);
+  resizeObserver?.observe(el);
+  return bindCleanupToSignal(() => (el._resizeCbs?.delete(cb), !el._resizeCbs?.size && resizeObserver?.unobserve(el)), sig);
+}
+
+// src/ts/utils/num.ts
+function isSafeNum(val) {
+  return isNum(val) && !isNaN(val ?? NaN) && val !== Infinity;
+}
+function safeNum(number, fallback = 0) {
+  return isSafeNum(number) ? number : fallback;
+}
+function parseIfPercent(percent, amount, autocap = 0.25) {
+  const val = percent?.endsWith?.("%") ? safeNum(parseFloat(percent) / 100 * amount) : percent;
+  return val && amount && autocap && amount <= val ? amount * autocap : val;
+}
+function stepNum(v = 0, { min, max, step }) {
+  const s = step ? Math.round((safeNum(v) - (min || 0)) / step) * step + (min || 0) : safeNum(v);
+  return (0, import_utils5.clamp)(min, +s.toFixed(10), max);
+}
+
+// src/ts/components/rangeinput/index.ts
+var import_modules = require("sia-reactor/modules");
+var RangeInput = class extends BaseComponent {
+  constructor(ctlr, config, state) {
+    super(ctlr, (0, import_sia_reactor8.reactive)((0, import_utils22.mergeObjs)(structuredClone(RANGE_INPUT_BUILD), config), { scrubbing: false, previewing: false, cancelScrub: false, ...state }));
+    __publicField(this, "barsWrapper");
+    __publicField(this, "marksWrapper");
+    __publicField(this, "chunks", []);
+    __publicField(this, "thumbEl");
+    __publicField(this, "tooltipEl");
+    __publicField(this, "isVertical", false);
+    __publicField(this, "isRTL", false);
+    __publicField(this, "rect");
+    __publicField(this, "lastPtrPos", 0);
+    __publicField(this, "lastThumbPos", 0);
+    __publicField(this, "currentThumbPos", 0);
+    __publicField(this, "stallCancelScrub", false);
+    __publicField(this, "cancelScrubTimeoutId", null);
+    __publicField(this, "tx", null);
+    __publicField(this, "prevEX");
+    __publicField(this, "prevEY");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("div", { className: "tmg-media-range-container", tabIndex: 0, role: "slider" });
+    this.barsWrapper = (0, import_utils2.createEl)("div", { className: "tmg-media-range-bars-wrapper" });
+    this.marksWrapper = (0, import_utils2.createEl)("div", { className: "tmg-media-range-marks-wrapper" });
+    this.thumbEl = (0, import_utils2.createEl)("div", { className: "tmg-media-range-thumb" });
+    this.tooltipEl = (0, import_utils2.createEl)("div", { className: "tmg-media-range-tooltip" });
+    return this.el.append(this.barsWrapper, this.marksWrapper, this.thumbEl, this.tooltipEl), this.el;
+  }
+  wire() {
+    this.rect = this.el.getBoundingClientRect();
+    this.el.addEventListener("pointerdown", this.handlePointerDown, { signal: this.signal });
+    this.el.addEventListener("keydown", this.handleKeyDown, { signal: this.signal });
+    this.el.addEventListener("wheel", this.handleWheel, { passive: false, signal: this.signal });
+    this.el.addEventListener("mouseover", () => this.rect = this.el.getBoundingClientRect(), { signal: this.signal });
+    this.el.addEventListener("mousemove", this.handleInput, { signal: this.signal });
+    for (const e of ["mouseleave", "touchend", "touchcancel"]) this.el.addEventListener(e, this.stopPreviewing, { signal: this.signal });
+    this.state.watch("scrubbing", (value) => value ? this.tx = (0, import_modules.startTx)(`${this.config.label} Scrub`) : this.tx && this.config.stall(() => ((0, import_modules.endTx)(this.tx), this.tx = null)), { signal: this.signal });
+    this.state.on("previewing", ({ value }) => this.el.classList.toggle("tmg-media-control-previewing", !!value), { signal: this.signal });
+    this.state.on("scrubbing", ({ value }) => this.el.classList.toggle("tmg-media-control-scrubbing", !!value), { signal: this.signal });
+    this.state.on("cancelScrub", ({ value }) => this.el.classList.toggle("tmg-media-control-cancel-scrub", !!value), { signal: this.signal });
+    this.config.set("value", (value) => stepNum(value, this.config), { signal: this.signal });
+    this.config.on("label", ({ value }) => this.el.ariaLabel = value, { init: true, signal: this.signal });
+    this.config.on("min", ({ value }) => this.el.ariaValueMin = String(value), { init: true, signal: this.signal });
+    this.config.on("max", ({ value }) => this.el.ariaValueMax = String(value), { init: true, signal: this.signal });
+    this.config.watch("value", this.onValue, { init: true, signal: this.signal });
+    this.config.watch("previewValue", this.onPreviewValue, { init: true, signal: this.signal });
+    this.config.on("tooltip", ({ value }) => this.el.toggleAttribute("data-tooltip", !!value), { init: true, signal: this.signal });
+    this.config.on("readonly", ({ value }) => this.el.toggleAttribute("readonly", !!value), { init: true, signal: this.signal });
+    this.config.on("disabled", ({ value }) => this.el.toggleAttribute("disabled", !!value), { init: true, signal: this.signal });
+    this.config.on("divs", ({ currentTarget: { value } }) => this.syncDivs(value), { init: true, signal: this.signal });
+    this.config.on("marks", ({ currentTarget: { value } }) => this.syncMarks(value), { init: true, signal: this.signal });
+    observeResize(this.el, () => this.ctlr.throttle(`${this.config.label}Resizing`, this.handleResize, 30, false), this.signal);
+  }
+  scrub(value, bypass = false) {
+    return this.canScrub ? (!bypass ? this.config.value = value : this.onValue(value), true) : false;
+  }
+  get canScrub() {
+    return !this.config.readonly && !this.config.disabled;
+  }
+  onValue(value) {
+    this.syncElPos(this.thumbEl, this.getValuePos(value), false, "auto"), this.syncChunks("value", value);
+    if (!this.state.scrubbing) this.el.ariaValueNow = String(value);
+  }
+  onPreviewValue(value) {
+    this.syncChunks("preview", value), this.config.tooltip && (this.syncElPos(this.tooltipEl, this.getValuePos(value), false, !(this.state.previewing && !this.state.scrubbing) ? "auto" : false, this.thumbEl), this.tooltipEl.innerHTML = (this.config.formatTooltip ? String(this.config.formatTooltip(value)) : `${Math.round(value)}`) + ` ${this.getValueChunk(value)?.label || ""}`.trim());
+  }
+  handlePointerDown(e) {
+    if (this.state.scrubbing || this.config.readonly || this.config.disabled) return;
+    this.state.scrubbing = true;
+    this.el.setPointerCapture(e.pointerId);
+    const s = getWindow(this.el).getComputedStyle(this.el);
+    this.isVertical = s.writingMode.includes("vertical"), this.isRTL = s.direction === "rtl";
+    this.rect = this.el.getBoundingClientRect(), this.lastPtrPos = this.getPos(e), this.lastThumbPos = this.currentThumbPos = this.getValuePos();
+    getWindow(this.el).addEventListener("pointermove", this.handleInput, { signal: this.signal }), this.handleInput(e);
+    getWindow(this.el).addEventListener("pointerup", this.stopScrubbing, { signal: this.signal }), getWindow(this.el).addEventListener("pointercancel", this.stopScrubbing, { signal: this.signal });
+  }
+  stopScrubbing() {
+    if (!this.state.scrubbing) return;
+    this.state.scrubbing = this.state.previewing = false;
+    this.ctlr.cancelRAFLoop(`${this.config.label}Inputing`);
+    this.scrub(this.getPosValue(this.state.cancelScrub ? this.lastThumbPos : this.currentThumbPos), this.state.cancelScrub);
+    this.allowScrubbing(), this.stopPreviewing();
+    this.stallCancelScrub = true;
+    getWindow(this.el).removeEventListener("pointermove", this.handleInput);
+    getWindow(this.el).removeEventListener("pointerup", this.stopScrubbing), getWindow(this.el).removeEventListener("pointercancel", this.stopScrubbing);
+  }
+  stopPreviewing() {
+    if (!this.state.previewing) return;
+    this.state.previewing = false;
+    !this.state.scrubbing && this.ctlr.cancelRAFLoop(`${this.config.label}Inputing`);
+  }
+  cancelScrubbing() {
+    if (this.stallCancelScrub || this.state.cancelScrub || this.cancelScrubTimeoutId) return;
+    this.state.cancelScrub = true;
+    this.cancelScrubTimeoutId = (0, import_utils6.setTimeout)(() => this.allowScrubbing(false), this.config.scrub.cancel.timeout, this.signal);
+  }
+  allowScrubbing(reset = true) {
+    this.stallCancelScrub = this.state.cancelScrub = false;
+    clearTimeout(this.cancelScrubTimeoutId);
+    if (reset) this.cancelScrubTimeoutId = null;
+  }
+  handleInput(e) {
+    if (this.config.readonly || this.config.disabled) return;
+    this.ctlr.RAFLoop(`${this.config.label}Inputing`, () => {
+      var _a;
+      if (this.prevEX === e.clientX && this.prevEY === e.clientY) return;
+      this.prevEX = e.clientX, this.prevEY = e.clientY;
+      (_a = this.state).previewing || (_a.previewing = true);
+      const dimension = this.isVertical ? this.rect.height : this.rect.width, progress = this.getPos(e), pos = this.currentThumbPos = (0, import_utils5.clamp)(0, !this.state.scrubbing || this.config.scrub.relative ? progress : this.lastThumbPos + progress - this.lastPtrPos, 1), value = this.getPosValue(pos);
+      this.config.previewValue = value;
+      if (this.state.scrubbing) {
+        !this.config.scrub.sync ? this.syncElPos(this.thumbEl, pos, false, "auto") : this.scrub(value);
+        Math.abs(pos - this.lastThumbPos) < this.config.scrub.cancel.delta / dimension ? this.cancelScrubbing() : this.allowScrubbing();
+      }
+      this.onInput(e, pos);
+    });
+  }
+  onInput(_e, _pos) {
+  }
+  // override to safely add preview logic (timeline preview image, etc.)
+  handleWheel(e) {
+    if (this.config.wheel.disabled) return;
+    e.preventDefault(), e.stopImmediatePropagation();
+    const dimension = this.isVertical ? getWindow(this.el).innerHeight : getWindow(this.el).innerWidth, pos = (0, import_utils5.clamp)(0, Math.abs(-e.deltaY), dimension * this.config.wheel.axisRatio) / (dimension * this.config.wheel.axisRatio), value = this.config.value + (-e.deltaY >= 0 ? pos : -pos) * (this.config.max - this.config.min);
+    this.scrub(value);
+  }
+  handleKeyDown(e) {
+    const key = e.key?.toLowerCase();
+    if (["arrowleft", "arrowdown", "arrowright", "arrowup"].includes(key)) {
+      e.preventDefault(), e.stopImmediatePropagation();
+      const delta = e.shiftKey ? 2 : 1, direction = ["arrowleft", "arrowdown"].includes(key) ? -1 : 1;
+      this.scrub(this.config.value + direction * delta * this.config.step);
+    }
+  }
+  handleResize() {
+    this.rect = this.el.getBoundingClientRect();
+    const pos = this.getValuePos();
+    this.syncElPos(this.thumbEl, pos, false, "auto"), this.syncChunks("value", this.config.value), this.config.tooltip && this.syncElPos(this.tooltipEl, pos, false, "auto", this.thumbEl);
+  }
+  getValuePos(value = this.config.value, range = this.config.max - this.config.min) {
+    return range ? (value - this.config.min) / range : 0;
+  }
+  getPosValue(pos) {
+    return pos * (this.config.max - this.config.min) + this.config.min;
+  }
+  getValueChunk(value = this.config.value) {
+    for (let i = 0, len = this.chunks.length; i < len; i++) {
+      const c = this.chunks[i];
+      if (value >= c.start && value <= c.end) return c;
+    }
+  }
+  getPos(e) {
+    const p = this.isVertical ? (e.clientY - this.rect.top) / this.rect.height : (e.clientX - this.rect.left) / this.rect.width;
+    return (0, import_utils5.clamp)(0, this.isRTL ? 1 - p : p, 1);
+  }
+  syncElPos(el, pos, isSize = false, inBounds = false, bounds = el) {
+    const dim = this.isVertical ? this.rect?.height : this.rect?.width, min = inBounds && dim ? (this.isVertical ? bounds.offsetHeight : bounds.offsetWidth) / 2 / dim : 0;
+    pos = inBounds === "auto" ? min + pos * (1 - min * 2) : pos;
+    const value = pos || !isSize && pos === 0 ? `${(0, import_utils5.clamp)(min, pos, 1 - min) * 100}%` : "";
+    if (isSize) this.isVertical ? (el.style.blockSize = value, el.style.inlineSize = "") : (el.style.inlineSize = value, el.style.blockSize = "");
+    else this.isVertical ? (el.style.insetBlockEnd = value, el.style.insetInlineStart = "") : (el.style.insetInlineStart = value, el.style.insetBlockEnd = "");
+  }
+  syncChunks(key, value) {
+    for (let i = 0, len = this.chunks.length; i < len; i++) {
+      const c = this.chunks[i];
+      this.syncElPos(c[key], (0, import_utils5.clamp)(0, (value - c.start) / c.size, 1) || 0, true), c[key].style.setProperty("--tmg-media-current-range-pos", String(this.getValuePos(value)));
+      c.el.classList.toggle(`tmg-media-chunk-${key}-active`, value >= c.start && value <= c.end);
+    }
+  }
+  syncDivs(divs = this.config.divs) {
+    this.barsWrapper.innerHTML = "";
+    this.chunks = [];
+    const range = this.config.max - this.config.min, stops = divs.toSorted((a, b) => a.value - b.value);
+    if (stops.length && stops[0].value > this.config.min && stops[0].value <= this.config.min + Math.min(0.02 * range, range * 0.25)) stops[0].value = this.config.min;
+    else if (!stops.length || stops[0].value > this.config.min) stops.unshift({ value: this.config.min, label: "" });
+    if (stops[stops.length - 1].value < this.config.max) stops.push({ value: this.config.max, label: "" });
+    const fragment = document.createDocumentFragment();
+    for (let i = 0, len = stops.length; i < len - 1; i++) {
+      const start = stops[i], end = stops[i + 1], size = end.value - start.value;
+      if (size <= 0) continue;
+      const el = (0, import_utils2.createEl)("div", { className: "tmg-media-range-chunk" }, void 0, { cssText: `--tmg-media-current-chunk-st: ${(start.value - this.config.min) / range};` }), chunk = { base: (0, import_utils2.createEl)("div", { className: "tmg-media-range-bar tmg-media-range-base-bar" }), preview: (0, import_utils2.createEl)("div", { className: "tmg-media-range-bar tmg-media-range-preview-bar" }), value: (0, import_utils2.createEl)("div", { className: "tmg-media-range-bar tmg-media-range-value-bar" }) };
+      this.syncElPos(el, size / range, true), fragment.append((el.append(chunk.base, chunk.preview, chunk.value), el)), this.chunks.push({ start: start.value, end: end.value, label: start.label, size, el, ...chunk });
+    }
+    this.barsWrapper.append(fragment), this.onValue(this.config.value), this.onPreviewValue(this.config.previewValue);
+  }
+  syncMarks(marks = this.config.marks) {
+    this.marksWrapper.innerHTML = "";
+    const els = [], range = this.config.max - this.config.min;
+    if (range <= 0) return;
+    for (let i = 0, len = marks.length; i < len; i++) {
+      const m = marks[i], el = (0, import_utils2.createEl)("div", { className: `tmg-media-range-mark tmg-media-range-${marks[i].type || "base"}-mark`, title: marks[i].label || `${m.start}${m.end && m.end > m.start + 1 ? ` - ${m.end}` : ""}  Mark` }, void 0);
+      this.syncElPos(el, (m.start - this.config.min) / range, false), this.syncElPos(el, m.end ? (m.end - m.start) / range : 0, true), els.push(el);
+    }
+    this.marksWrapper.append(...els);
+  }
+};
+__publicField(RangeInput, "componentName", "rangeinput");
+
+// src/ts/components/buffer.ts
+var Buffer2 = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.createEl)("div", { className: "tmg-media-buffer", innerHTML: `<div class="tmg-media-buffer-accent"></div><div class="tmg-media-buffer-eclipse"><div class="tmg-media-buffer-left"><div class="tmg-media-buffer-circle"></div></div><div class="tmg-media-buffer-right"><div class="tmg-media-buffer-circle"></div></div></div>` });
+  }
+  mount() {
+    this.ctlr.DOM.controlsContainer?.prepend(this.element);
+  }
+};
+__publicField(Buffer2, "componentName", "buffer");
+
+// src/ts/components/controls/meta.ts
+var Meta = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "profile");
+    __publicField(this, "title");
+    __publicField(this, "artist");
+    __publicField(this, "scrollers", []);
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("div", { className: "tmg-media-meta-wrapper" }, { draggableControl: "", dragId: "wrapper", controlId: this.name });
+    const textsCover = (0, import_utils2.createEl)("div", { className: "tmg-media-meta-text-wrapper-cover" }), profileLink = (0, import_utils2.createEl)("a", { className: "tmg-media-profile-link" }), titleWrapper = (0, import_utils2.createEl)("div", { className: "tmg-media-title-wrapper" }), artistWrapper = (0, import_utils2.createEl)("div", { className: "tmg-media-artist-wrapper" });
+    this.ctlr.DOM.mediaProfile = this.profile = this.ctlr.syncImgLoadState((0, import_utils2.createEl)("img", { alt: "Profile", className: "tmg-media-profile" }));
+    this.ctlr.DOM.mediaTitle = this.title = (0, import_utils2.createEl)("a", { className: "tmg-media-title tmg-media-meta-text" });
+    this.ctlr.DOM.mediaArtist = this.artist = (0, import_utils2.createEl)("a", { className: "tmg-media-artist tmg-media-meta-text" });
+    profileLink.append(this.profile), titleWrapper.append(this.title), artistWrapper.append(this.artist), textsCover.append(titleWrapper, artistWrapper);
+    return this.el.append(profileLink, textsCover), this.element;
+  }
+  wire() {
+    this.ctlr.config.on("settings.controlPanel.profile", this.syncProfile, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.title", this.syncTitle, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.artist", this.syncArtist, { init: true, signal: this.signal });
+    this.scrollers.push((initScrollAssist(this.title, { pxPerSecond: 60 }), this.title));
+    this.scrollers.push((initScrollAssist(this.artist, { pxPerSecond: 30 }), this.artist));
+  }
+  syncUI() {
+    this.syncProfile(), this.syncTitle(), this.syncArtist();
+  }
+  syncProfile() {
+    const profile = this.settings.controlPanel.profile;
+    if (profile !== true) this.profile.dataset.loaded = "false", this.profile.dataset.mediaProfile = this.profile.src = profile || "";
+  }
+  syncTitle() {
+    const title = this.settings.controlPanel.title;
+    if (title !== true) this.title.dataset.mediaTitle = this.title.textContent = title || "";
+  }
+  syncArtist() {
+    const artist = this.settings.controlPanel.artist;
+    if (artist !== true) this.artist.dataset.mediaArtist = this.artist.textContent = artist || "";
+  }
+  onDestroy() {
+    for (const el of this.scrollers) removeScrollAssist(el);
+    super.onDestroy();
+  }
+};
+__publicField(Meta, "componentName", "meta");
+__publicField(Meta, "isControl", true);
+
+// src/ts/components/controls/bignext.ts
+var BigNextButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("playlist");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-big-next-btn", type: "button", innerHTML: IconRegistry.get("next") }, { draggableControl: "", dragId: "big", controlId: this.name });
+    return this.disable(), this.element;
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.plug?.state.on("currentIndex", () => this[this.plug.atLast ? "disable" : "enable"](), { init: true, signal: this.signal });
+    this.ctlr.config.on("playlist", this.syncUI, { signal: this.signal, init: true, depth: 1 });
+    this.ctlr.config.on("settings.keys.shortcuts.next", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.next", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.next();
+  }
+  syncUI() {
+    this[this.ctlr.config.playlist.content && this.ctlr.config.playlist.content.length > 1 ? "show" : "hide"]();
+  }
+  syncARIA() {
+    this.state.label = "Next";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.next, this.settings.voice.commands.next);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(BigNextButton, "componentName", "bignext");
+__publicField(BigNextButton, "isControl", true);
+
+// src/ts/components/controls/bigplaypause.ts
+var BigPlayPauseButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-big-play-pause-btn", type: "button", innerHTML: IconRegistry.get("play") + IconRegistry.get("pause") + IconRegistry.get("replay") }, { draggableControl: "", dragId: "big", controlId: this.name });
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.paused", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("status.ended", this.syncARIA, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.playPause", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.media.intent.paused = !this.media.state.paused;
+  }
+  syncARIA() {
+    this.state.label = this.media.status.ended ? "Replay" : this.media.state.paused ? "Play" : "Pause";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.playPause, this.settings.voice.commands.playPause);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(BigPlayPauseButton, "componentName", "bigplaypause");
+__publicField(BigPlayPauseButton, "isControl", true);
+
+// src/ts/components/controls/bigprev.ts
+var BigPrevButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("playlist");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-big-prev-btn", type: "button", innerHTML: IconRegistry.get("prev") }, { draggableControl: "", dragId: "big", controlId: this.name });
+    return this.disable(), this.element;
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.plug?.state.on("currentIndex", () => this[this.plug.atFirst ? "disable" : "enable"](), { init: true, signal: this.signal });
+    this.ctlr.config.on("playlist", this.syncUI, { signal: this.signal, init: true, depth: 1 });
+    this.ctlr.config.on("settings.keys.shortcuts.prev", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.prev", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.previous();
+  }
+  syncUI() {
+    this[this.ctlr.config.playlist.content && this.ctlr.config.playlist.content.length > 1 ? "show" : "hide"]();
+  }
+  syncARIA() {
+    this.state.label = "Previous";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.prev, this.settings.voice.commands.prev);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(BigPrevButton, "componentName", "bigprev");
+__publicField(BigPrevButton, "isControl", true);
+
+// src/ts/components/controls/prev.ts
+var PrevButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("playlist");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-prev-btn", type: "button", innerHTML: IconRegistry.get("prev") }, { draggableControl: "", controlId: this.name });
+    return this.hide(), this.element;
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.plug?.state.on("currentIndex", () => this[this.plug.atFirst ? "hide" : "show"](), { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.prev", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.prev", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.previous();
+  }
+  syncARIA() {
+    this.state.label = "Previous";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.prev, this.settings.voice.commands.prev);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(PrevButton, "componentName", "prev");
+__publicField(PrevButton, "isControl", true);
+
+// src/ts/components/controls/playpause.ts
+var PlayPauseButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-play-pause-btn", innerHTML: IconRegistry.get("play") + IconRegistry.get("pause") + IconRegistry.get("replay") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.paused", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("status.ended", this.syncARIA, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.playPause", this.syncARIA, { signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.playPause", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.media.intent.paused = !this.media.state.paused;
+  }
+  syncARIA() {
+    this.state.label = this.media.status.ended ? "Replay" : this.media.state.paused ? "Play" : "Pause";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.playPause, this.settings.voice.commands.playPause);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(PlayPauseButton, "componentName", "playpause");
+__publicField(PlayPauseButton, "isControl", true);
+
+// src/ts/components/controls/next.ts
+var NextButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("playlist");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-next-btn", type: "button", innerHTML: IconRegistry.get("next") }, { draggableControl: "", controlId: this.name });
+    return this.hide(), this.element;
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.plug?.state.on("currentIndex", () => this[this.plug.atLast ? "hide" : "show"](), { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.next", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.next", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.next();
+  }
+  syncARIA() {
+    this.state.label = "Next";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.next, this.settings.voice.commands.next);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(NextButton, "componentName", "next");
+__publicField(NextButton, "isControl", true);
+
+// src/ts/components/controls/forward10.ts
+var Forward10Button = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-forward10-btn", type: "button", innerHTML: IconRegistry.get("forward10") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.syncARIA();
+  }
+  handleClick() {
+    this.media.intent.currentTime += 10;
+  }
+  syncARIA() {
+    this.state.label = "Forward 10s";
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(Forward10Button, "componentName", "forward10");
+__publicField(Forward10Button, "isControl", true);
+
+// src/ts/components/controls/backward10.ts
+var Backward10Button = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-backward10-btn", type: "button", innerHTML: IconRegistry.get("backward10") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.syncARIA();
+  }
+  handleClick() {
+    this.media.intent.currentTime -= 10;
+  }
+  syncARIA() {
+    this.state.label = "Backward 10s";
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(Backward10Button, "componentName", "backward10");
+__publicField(Backward10Button, "isControl", true);
+
+// src/ts/components/controls/time.ts
+var TimeButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.time");
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-time-btn tmg-media-control-text-btn", textContent: "-:--" }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.live", (e) => this[e.value ? "hide" : "show"](), { init: this.ctlr.payload.wired, signal: this.signal });
+    addSafeClicks(this.element, this.handleClick, this.handleDblClick, { signal: this.signal });
+    this.media.on("state.currentTime", this.syncUI, { signal: this.signal });
+    this.ctlr.config.on("settings.time.mode", this.syncUI, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.time.format", this.syncUI, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.timeMode", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.timeMode", this.syncARIA, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.timeFormat", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.toggleMode();
+  }
+  handleDblClick() {
+    this.plug?.rotateFormat();
+  }
+  syncUI() {
+    this.el.textContent = this.plug?.toTimeText(this.media.state.currentTime, true) || "-:--";
+    this.syncARIA();
+  }
+  syncARIA() {
+    this.state.label = `Show ${this.plug?.nextMode} time`;
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.timeMode, this.settings.voice.commands.timeMode);
+    this.el.title = `Switch (mode${this.state.cmd} / DblClick\u2192format${formatKeyForDisplay2(this.settings.keys.shortcuts.timeFormat, this.settings.voice.commands.timeFormat)})`;
+    this.setBtnARIA("Switch time format");
+  }
+};
+__publicField(TimeButton, "componentName", "time");
+__publicField(TimeButton, "isControl", true);
+
+// src/ts/components/controls/duration.ts
+var import_modules2 = require("sia-reactor/modules");
+var DurationButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.time");
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-duration-btn tmg-media-control-text-btn", textContent: "-:--" }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("status.duration", this.syncUI, { signal: this.signal });
+    this.media.on("state.live", (e) => (this.el.classList.toggle("tmg-media-control-live", e.value), this.el.classList.toggle("tmg-media-live-badge", e.value), this.syncARIA()), { signal: this.signal });
+    this.media.on("status.isLive", (e) => (this.media.container.classList.toggle("tmg-media-is-live", e.value), this.syncARIA()), { signal: this.signal });
+    this.ctlr.config.on("settings.time.format", this.syncUI, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.timeFormat", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.timeFormat", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    !this.media.status.isLive || this.media.state.live ? this.plug?.rotateFormat() : (0, import_modules2.silence)(() => this.media.intent.live = true);
+  }
+  syncUI() {
+    this.el.textContent = !this.media.status.isLive ? this.plug?.toTimeText(this.media.status.duration) || "-:--" : "Live";
+  }
+  syncARIA() {
+    this.state.label = "Switch time format";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.timeFormat, this.settings.voice.commands.timeFormat);
+    this.el.title = !this.media.status.isLive || this.media.state.live ? this.state.label + this.state.cmd : "Skip ahead to live broadcast";
+    this.setBtnARIA();
+  }
+};
+__publicField(DurationButton, "componentName", "duration");
+__publicField(DurationButton, "isControl", true);
+
+// src/ts/components/controls/timeandduration.ts
+var import_modules3 = require("sia-reactor/modules");
+var TimeAndDurationButton = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "time");
+    __publicField(this, "bridge");
+    __publicField(this, "duration");
+    __publicField(this, "liveBadge");
+  }
+  get plug() {
+    return this.ctlr.plug("settings.time");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-time-and-duration-btn tmg-media-control-text-btn" }, { draggableControl: "", controlId: this.name });
+    this.time = (0, import_utils2.createEl)("span", { className: "tmg-media-current-time", textContent: "-:--" });
+    this.bridge = (0, import_utils2.createEl)("span", { className: "tmg-media-time-bridge", textContent: "/" });
+    this.duration = (0, import_utils2.createEl)("span", { className: "tmg-media-duration-time", textContent: "-:--" });
+    this.liveBadge = (0, import_utils2.createEl)("span", { className: "tmg-media-live-badge", textContent: "Live" });
+    return this.el.append(this.time, this.bridge, this.duration, this.liveBadge), this.element;
+  }
+  wire() {
+    addSafeClicks(this.element, this.handleClick, this.handleDblClick, { signal: this.signal });
+    this.media.on("state.currentTime", this.syncTime, { signal: this.signal });
+    this.media.on("state.live", (e) => (this.liveBadge.classList.toggle("tmg-media-control-live", e.value), this.syncARIA()), { signal: this.signal });
+    this.media.on("status.duration", this.syncDuration, { signal: this.signal });
+    this.media.on("status.isLive", (e) => (this.media.container.classList.toggle("tmg-media-is-live", e.value), this.syncARIA()), { signal: this.signal });
+    this.ctlr.config.on("settings.time.format", this.syncUI, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.time.mode", this.syncTime, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.timeMode", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.timeMode", this.syncARIA, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.timeFormat", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    !this.media.status.isLive || this.media.state.live ? this.plug?.toggleMode() : (0, import_modules3.silence)(() => this.media.intent.live = true);
+  }
+  handleDblClick() {
+    this.plug?.rotateFormat();
+  }
+  syncUI() {
+    this.bridge.textContent = { digital: "/", human: "of", "human-long": "out of" }[this.settings.time.format] || "/";
+    this.syncTime(), this.syncDuration();
+  }
+  syncTime() {
+    this.time.textContent = this.plug?.toTimeText(this.media.state.currentTime, true) || "-:--";
+  }
+  syncDuration() {
+    this.duration.textContent = this.plug?.toTimeText(this.media.status.duration) || "-:--";
+  }
+  syncARIA() {
+    this.state.label = `Show ${this.plug?.nextMode} time`;
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.timeMode, this.settings.voice.commands.timeMode);
+    this.el.title = !this.media.status.isLive || this.media.state.live ? `Switch (mode${this.state.cmd} / DblClick\u2192format${formatKeyForDisplay2(this.settings.keys.shortcuts.timeFormat, this.settings.voice.commands.timeFormat)})` : "Skip ahead to live broadcast";
+    this.setBtnARIA("Switch time format");
+  }
+};
+__publicField(TimeAndDurationButton, "componentName", "timeandduration");
+__publicField(TimeAndDurationButton, "isControl", true);
+
+// src/ts/components/controls/settings.ts
+var SettingsButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.settingsView");
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-settings-btn", type: "button", innerHTML: IconRegistry.get("settings") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.settings", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.settings", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    const menu = this.plug?.menu;
+    menu ? menu.toggle(this.el) : this.plug?.toggleView();
+  }
+  syncARIA() {
+    this.state.label = "Settings";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.settings, this.settings.voice.commands.settings);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(SettingsButton, "componentName", "settings");
+__publicField(SettingsButton, "isControl", true);
+
+// src/ts/components/controls/objectfit.ts
+var ObjectFitButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.objectFit");
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-object-fit-btn", type: "button", innerHTML: IconRegistry.get("objectfitcontain") + IconRegistry.get("objectfitcover") + IconRegistry.get("objectfitfill") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.objectFit", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.objectFit", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.objectFit", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.objectFit", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.rotateFit();
+  }
+  syncARIA() {
+    this.state.label = this.plug?.toLabel(this.plug?.nextFit) || "";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.objectFit, this.settings.voice.commands.objectFit);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(ObjectFitButton, "componentName", "objectfit");
+__publicField(ObjectFitButton, "isControl", true);
+
+// src/ts/components/controls/pictureinpicture.ts
+var PictureInPictureButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-picture-in-picture-btn", type: "button", innerHTML: IconRegistry.get("enterpip") + IconRegistry.get("leavepip") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.pictureInPicture", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.pictureInPicture", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.pictureInPicture", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.pictureInPicture", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.media.intent.pictureInPicture = !this.media.state.pictureInPicture;
+  }
+  syncARIA() {
+    this.state.label = this.media.state.pictureInPicture ? "Exit picture in picture" : "Picture in picture";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.pictureInPicture, this.settings.voice.commands.pictureInPicture);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(PictureInPictureButton, "componentName", "pictureinpicture");
+__publicField(PictureInPictureButton, "isControl", true);
+
+// src/ts/components/controls/theater.ts
+var TheaterButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-theater-btn", type: "button", innerHTML: IconRegistry.get("entertheater") + IconRegistry.get("leavetheater") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.theater", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.theater", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.theater", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.theater", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.media.intent.theater = !this.media.state.theater;
+  }
+  syncARIA() {
+    this.state.label = this.media.state.theater ? "Default view" : "Cinema mode";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.theater, this.settings.voice.commands.theater);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(TheaterButton, "componentName", "theater");
+__publicField(TheaterButton, "isControl", true);
+
+// src/ts/components/controls/capture.ts
+var CaptureButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.frame");
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-capture-btn", type: "button", innerHTML: IconRegistry.get("capture") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.frameCapture", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    addSafeClicks(this.el, this.handleClick, this.handleDblClick, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.capture", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.capture", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.capture();
+  }
+  handleDblClick() {
+    this.plug?.capture("monochrome");
+  }
+  syncARIA() {
+    this.state.label = "Capture frame";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.capture, this.settings.voice.commands.capture);
+    this.el.title = `Capture${this.state.cmd} \u2194 DblClick\u2192B&W (+alt)`;
+    this.setBtnARIA("Capture monochrome frame");
+  }
+};
+__publicField(CaptureButton, "componentName", "capture");
+__publicField(CaptureButton, "isControl", true);
+
+// src/ts/components/controls/fullscreen.ts
+var FullscreenButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-fullscreen-btn", type: "button", innerHTML: IconRegistry.get("enterfullscreen") + IconRegistry.get("leavefullscreen") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.fullscreen", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.fullscreen", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.fullscreen", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.fullscreen", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.media.intent.fullscreen = !this.media.state.fullscreen;
+  }
+  syncARIA() {
+    this.state.label = this.media.state.fullscreen ? "Exit full screen" : "Full screen";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.fullscreen, this.settings.voice.commands.fullscreen);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(FullscreenButton, "componentName", "fullscreen");
+__publicField(FullscreenButton, "isControl", true);
+
+// src/ts/components/controls/fullscreenlock.ts
+var FullscreenLockButton = class extends BaseComponent {
+  create() {
+    this.element = (0, import_utils2.createEl)("button", { type: "button", className: "tmg-media-fullscreen-locked-btn", innerHTML: IconRegistry.get("lock") }, { draggableControl: "", controlId: this.name });
+    return this.hide(), this.element;
+  }
+  wire() {
+    this.media.on("features.fullscreen", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("features.locked", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.fullscreen", () => this[this.canShow ? "show" : "hide"](), { init: this.ctlr.payload.wired, signal: this.signal });
+    this.syncARIA();
+  }
+  handleClick() {
+    this.media.intent.locked = true;
+  }
+  syncARIA() {
+    this.el.title = this.state.label = "Lock Screen";
+    this.setBtnARIA();
+  }
+  get canShow() {
+    return this.media.state.fullscreen && !!this.media.features.fullscreen && !!this.media.features.locked;
+  }
+};
+__publicField(FullscreenLockButton, "componentName", "fullscreenlock");
+__publicField(FullscreenLockButton, "isControl", true);
+
+// src/ts/components/controls/fullscreenorientation.ts
+var FullscreenOrientationButton = class extends BaseComponent {
+  get pin() {
+    return this.ctlr.plug("settings.modes")?.fullscreen;
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-fullscreen-orientation-btn", type: "button", innerHTML: IconRegistry.get("fullscreenorientation") }, { draggableControl: "", controlId: this.name });
+    return this.hide(), this.element;
+  }
+  wire() {
+    this.media.on("features.fullscreen", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("features.fullscreenOrientation", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.fullscreen", () => this[this.canShow ? "show" : "hide"](), { init: this.ctlr.payload.wired, signal: this.signal });
+    this.syncARIA();
+  }
+  handleClick() {
+    this.pin?.changeScreenOrientation();
+  }
+  syncARIA() {
+    this.el.title = this.state.label = "Change orientation";
+    this.setBtnARIA();
+  }
+  get canShow() {
+    return this.media.state.fullscreen && !!this.media.features.fullscreen && !!this.media.features.fullscreenOrientation;
+  }
+};
+__publicField(FullscreenOrientationButton, "componentName", "fullscreenorientation");
+__publicField(FullscreenOrientationButton, "isControl", true);
+
+// src/ts/components/controls/removeminiplayer.ts
+var RemoveMiniplayerButton = class extends BaseComponent {
+  get pin() {
+    return this.ctlr.plug("settings.modes")?.miniplayer;
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-miniplayer-remove-btn", type: "button", innerHTML: IconRegistry.get("removeminiplayer") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.miniplayer", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.syncARIA();
+  }
+  handleClick() {
+    this.pin?.remove();
+  }
+  syncARIA() {
+    this.state.label = "Remove miniplayer";
+    this.state.cmd = " (Escape)";
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(RemoveMiniplayerButton, "componentName", "removeminiplayer");
+__publicField(RemoveMiniplayerButton, "isControl", true);
+
+// src/ts/components/controls/expandminiplayer.ts
+var ExpandMiniplayerButton = class extends BaseComponent {
+  get pin() {
+    return this.ctlr.plug("settings.modes")?.miniplayer;
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-miniplayer-expand-btn", type: "button", innerHTML: IconRegistry.get("expandminiplayer") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.miniplayer", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.syncARIA();
+  }
+  handleClick() {
+    this.pin?.expand();
+  }
+  syncARIA() {
+    this.el.title = this.state.label = "Expand miniplayer";
+    this.setBtnARIA();
+  }
+};
+__publicField(ExpandMiniplayerButton, "componentName", "expandminiplayer");
+__publicField(ExpandMiniplayerButton, "isControl", true);
+
+// src/ts/utils/time.ts
+function formatMediaTime({ time, format = "digital", elapsed = true, showMs = false, casing = "normal" } = { time: 0 }) {
+  const long = format.endsWith("long"), sx = (n = 0) => n == 1 ? "" : "s", cs = (str) => casing === "upper" ? str.toUpperCase() : casing === "title" ? str.replace(/^([a-z])/i, (m2) => m2.toUpperCase()) : str.toLowerCase(), wrd = (n = 0) => ({ d: cs(long ? " day" + sx(n) + " " : "d"), h: cs(long ? " hour" + sx(n) + " " : "h"), m: cs(long ? " minute" + sx(n) + " " : "m"), s: cs(long ? " second" + sx(n) + " " : "s"), ms: cs(long ? " millisecond" + sx(n) + " " : "ms") }), pad = (v, n = 2, f) => long && !f ? v : String(v).padStart(n, isNum(+n) ? "0" : "-");
+  if (isNaN(time ?? NaN) || time === Infinity) return format !== "digital" ? ("-" + wrd().h + pad("-") + wrd().m + (!elapsed ? "left" : "")).trim() : !elapsed ? "-:--" : "-:--";
+  const s = Math.floor(Math.abs(time) % 60), m = Math.floor(Math.abs(time) / 60) % 60, h = Math.floor(Math.abs(time) / 3600) % 24, d = Math.floor(Math.abs(time) / 86400), ms = Math.floor(Math.abs(time) % 1 * 1e3);
+  if (format === "digital") {
+    const base2 = d ? d + ":" + pad(h, 2, true) + ":" + pad(m, 2, true) + ":" + pad(s, 2, true) : h ? h + ":" + pad(m, 2, true) + ":" + pad(s, 2, true) : m + ":" + pad(s, 2, true);
+    return !elapsed ? "-" + base2 : base2;
+  }
+  const base = d ? d + wrd(d).d + pad(h) + wrd(h).h + pad(m) + wrd(m).m + pad(s) + wrd(s).s : h ? h + wrd(h).h + pad(m) + wrd(m).m + pad(s) + wrd(s).s : m + wrd(m).m + pad(s) + wrd(s).s, msPart = showMs && ms ? pad(ms, 3) + wrd(ms).ms : "";
+  return (base + msPart + (!long ? " " : "") + (!elapsed ? "left" : "")).trim();
+}
+
+// src/ts/utils/env.ts
+var win2 = "undefined" !== typeof window ? window : void 0;
+var nav = win2?.navigator;
+var ua = nav?.userAgent || "";
+var uaData = nav?.userAgentData;
+var IS_ANDROID = false;
+var IS_WINDOWS = false;
+var IS_FIREFOX = false;
+var IS_EDGE = false;
+var IS_CHROME = false;
+var IS_CHROMIUM = false;
+var IS_SAFARI = false;
+var IS_IE = false;
+var IS_TIZEN = false;
+var IS_WEBOS = false;
+var IS_IPOD = false;
+var IS_IPAD = false;
+var IS_IPHONE = false;
+var IOS_VERSION = null;
+var ANDROID_VERSION = null;
+var CHROME_VERSION = null;
+var CHROMIUM_VERSION = null;
+var IE_VERSION = null;
+var IS_IOS = false;
+var IS_MOBILE = false;
+var IS_SMART_TV = false;
+var IS_CHROMECAST_RECEIVER = Boolean(win2?.cast?.framework?.CastReceiverContext);
+var MSE_ENABLED = Boolean(win2 && ("MediaSource" in win2 || "webkitMediaSource" in win2));
+var TOUCH_ENABLED = Boolean(win2 && ("ontouchstart" in win2 || nav?.maxTouchPoints || win2.DocumentTouch && win2.document instanceof win2.DocumentTouch));
+if (uaData?.platform && uaData?.brands) {
+  const pickVersion = (brands, needle) => brands.find((b) => b.brand === needle && b.version)?.version || null;
+  IS_ANDROID = uaData.platform === "Android";
+  IS_WINDOWS = uaData.platform === "Windows";
+  IS_EDGE = uaData.brands.some((b) => b.brand === "Microsoft Edge");
+  IS_CHROMIUM = uaData.brands.some((b) => b.brand === "Chromium" || b.brand === "Google Chrome");
+  IS_CHROME = IS_CHROMIUM && !IS_EDGE;
+  CHROMIUM_VERSION = CHROME_VERSION = pickVersion(uaData.brands, "Chromium") || pickVersion(uaData.brands, "Google Chrome");
+}
+if (true) {
+  IS_ANDROID || (IS_ANDROID = /Android/i.test(ua));
+  IS_WINDOWS || (IS_WINDOWS = /Windows/i.test(ua));
+  IS_FIREFOX = /Firefox|FxiOS/i.test(ua);
+  IS_EDGE || (IS_EDGE = /Edg|EdgiOS/i.test(ua));
+  IS_CHROMIUM || (IS_CHROMIUM = /Chrome|CriOS/i.test(ua));
+  IS_CHROME = IS_CHROMIUM && !IS_EDGE;
+  IS_SAFARI = /Safari/i.test(ua) && !IS_CHROME && !IS_FIREFOX && !IS_EDGE;
+  IS_IE = /MSIE|(Trident\/7.0)|(rv:11.0)/i.test(ua);
+  IS_TIZEN = /Tizen/i.test(ua);
+  IS_WEBOS = /Web0S/i.test(ua);
+  IS_IPOD = /iPod/i.test(ua);
+  IS_IPAD = /iPad/i.test(ua) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(ua);
+  IS_IPHONE = /iPhone/i.test(ua) && !IS_IPAD;
+  IOS_VERSION = ua.match(/OS (\d+)_/i)?.[1] ?? null;
+  ANDROID_VERSION = ua.match(/Android\s(\d+(?:\.\d+)+)/i)?.[1] ?? null;
+  CHROMIUM_VERSION = CHROME_VERSION = ua.match(/(?:Chrome|CriOS)\/(\d+)/)?.[1] ?? CHROMIUM_VERSION;
+  IE_VERSION = ua.match(/MSIE\s(\d+)\.\d/)?.[1] || (/Trident\/7.0/i.test(ua) && /rv:11.0/.test(ua) ? "11.0" : null);
+}
+IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
+IS_MOBILE = Boolean(IS_ANDROID || IS_IPHONE || IS_IPOD || IS_IPAD);
+IS_SMART_TV = IS_TIZEN || IS_WEBOS;
+
+// src/ts/utils/media.ts
+var import_utils24 = require("sia-reactor/utils");
+function getMediaProgress({ state: s, status: st }, time = s.currentTime) {
+  if (st.isLive) {
+    if (!st.seekable.length || s.live) return 1;
+    const min = st.seekable.start(0), dvr = st.seekable.end(st.seekable.length - 1) - min;
+    return dvr > 0 ? (time - min) / dvr : 1;
+  } else return time / st.duration;
+}
+var getMediaTime = (media, percent, _min = getMediaMin(media)) => media.status.isLive ? _min + percent * (getMediaMax(media) - _min) : percent * media.status.duration;
+var getMediaMin = ({ status: st, state: s }) => st.isLive ? st.seekable.length ? st.canSeekLive ? st.seekable.start(0) : st.seekable.end(st.seekable.length - 1) : s.currentTime : 0;
+var getMediaMax = ({ status: st, state: s }) => st.isLive ? st.seekable.length ? st.seekable.end(st.seekable.length - 1) : s.currentTime : st.duration;
+var DUMMY_VID = (0, import_utils2.createEl)("video");
+var DUMMY_AUD = (0, import_utils2.createEl)("audio");
+var stripTags = (text) => text.replace(/<(\/)?([a-z0-9.:]+)([^>]*)>/gi, "");
+function parseVttText(text) {
+  const state = { tag: /<(\/)?([a-z0-9.:]+)([^>]*)>/gi, o: "", l: 0, p: null, c: "" }, esc = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+  let m;
+  while (m = state.tag.exec(text)) {
+    const chunk = text.slice(state.l, m.index);
+    if (chunk) state.c += esc(chunk);
+    const [_, cls, tag_n, rest] = m, low = tag_n.toLowerCase();
+    if (/^[0-9]/.test(tag_n)) {
+      state.o += state.p ? `<span data-part="timed" data-time="${state.p}">${state.c}</span>` : state.c;
+      state.p = tag_n;
+      state.c = "";
+    } else if (cls) state.c += ["c", "v", "lang"].includes(low) ? "</span>" : `</${low}>`;
+    else if (["b", "i", "u", "ruby", "rt"].includes(low)) state.c += `<${low}>`;
+    else if (low === "c") state.c += `<span class="vtt-c ${rest.replace(/\.([a-z0-9_-]+)/gi, "$1 ").trim()}">`;
+    else if (low === "v") state.c += `<span data-part="voice"${rest.trim() ? ` title="${esc(rest.trim())}"` : ""}>`;
+    else if (low === "lang") state.c += `<span lang="${esc(rest.trim())}">`;
+    state.l = state.tag.lastIndex;
+  }
+  const lChunk = text.slice(state.l);
+  if (lChunk) state.c += esc(lChunk);
+  return state.o + (state.p ? `<span data-part="timed" data-time="${state.p}">${state.c}</span>` : state.c);
+}
+function formatVttLine(p, maxChars) {
+  const state = { tokens: p.match(/<[^>]+>|\S+/g) || [], stack: [], parts: [], line: "", len: 0, openStr: "", closeStr: "", timeTag: "", lastWasTag: false }, updateTags = () => (state.openStr = state.stack.map((n) => `<${n}>`).join(""), state.closeStr = state.stack.reduceRight((a, n) => a + `</${n}>`, "")), flush = () => state.line && (state.parts.push(state.line + state.closeStr), state.line = (state.timeTag || "") + state.openStr, state.len = 0, state.lastWasTag = true);
+  for (const tok of state.tokens) {
+    const tag = tok[0] === "<", closeTag = tag && tok[1] === "/";
+    if (tag) {
+      if (state.line && !state.lastWasTag && !closeTag) state.line += " ";
+      const m = tok.match(/^<\/?\s*([a-z0-9._:-]+)/i), n = m?.[1] || "", timing = /^\d/.test(n);
+      if (timing) {
+        state.timeTag = tok, state.line += tok, state.lastWasTag = true;
+        continue;
+      }
+      if (!closeTag && !tok.endsWith("/>") && n) state.stack.push(n), updateTags();
+      if (closeTag && state.stack.length) state.stack.pop(), updateTags();
+      state.lastWasTag = true, state.line += tok;
+      continue;
+    }
+    const len = stripTags(tok).length, needSpace = state.line && !state.lastWasTag;
+    if (state.len + (needSpace ? 1 : 0) + len > maxChars) flush();
+    if (needSpace) state.line += " ", state.len += 1;
+    state.line += tok, state.len += len, state.lastWasTag = false;
+  }
+  return flush(), state.parts;
+}
+
+// src/ts/components/controls/timeline/index.ts
+var import_modules4 = require("sia-reactor/modules");
+var Timeline = class extends RangeInput {
+  constructor(ctlr, config) {
+    super(ctlr, config);
+    __publicField(this, "chaptersWrapper");
+    __publicField(this, "previewContainer");
+    __publicField(this, "previewImg");
+    __publicField(this, "previewCanvas");
+    __publicField(this, "thumbnailImg");
+    __publicField(this, "thumbnailCanvas");
+    __publicField(this, "previewContext", null);
+    __publicField(this, "thumbnailContext", null);
+    __publicField(this, "wasPaused", false);
+    __publicField(this, "scrubbingId", -1);
+  }
+  get plug() {
+    return this.ctlr.plug("settings.time");
+  }
+  getProgress(time) {
+    return getMediaProgress(this.media, time);
+  }
+  getTime(percent) {
+    return getMediaTime(this.media, percent);
+  }
+  create() {
+    this.element = super.create();
+    this.el.dataset.controlId = this.name;
+    this.previewContainer = (0, import_utils2.createEl)("div", { className: "tmg-media-preview-container" });
+    this.previewImg = (0, import_utils2.createEl)("div", { className: "tmg-media-preview" });
+    this.previewCanvas = (0, import_utils2.createEl)("canvas", { className: "tmg-media-preview" });
+    this.previewContext = this.previewCanvas.getContext("2d", { alpha: false });
+    this.thumbnailImg = (0, import_utils2.createEl)("div", { className: "tmg-media-thumbnail tmg-media-filtered tmg-media-object" });
+    this.thumbnailCanvas = (0, import_utils2.createEl)("canvas", { className: "tmg-media-thumbnail tmg-media-filtered tmg-media-object" });
+    this.thumbnailContext = this.thumbnailCanvas.getContext("2d", { alpha: false });
+    this.el.classList.add("tmg-media-timeline-container"), this.barsWrapper.classList.add("tmg-media-timeline-bars-wrapper", "tmg-media-timeline"), this.thumbEl.classList.add("tmg-media-timeline-thumb");
+    this.previewContainer.append(this.previewImg, this.previewCanvas);
+    return this.el.append(this.previewContainer), this.el;
+  }
+  mount() {
+    this.ctlr.DOM.controlsContainer?.prepend(this.thumbnailImg, this.thumbnailCanvas);
+  }
+  wire() {
+    super.wire();
+    this.media.pseudoElement.addEventListener("timeupdate", this.syncCanvasPreviews, { signal: this.signal });
+    this.state.on("scrubbing", this.handleScrubbing, { signal: this.signal });
+    this.state.on("previewing", ({ value }) => value ? (this.media.container.classList.add("tmg-media-previewing"), this.clearCanvasPreviews()) : (0, import_utils6.setTimeout)(() => this.media.container.classList.remove("tmg-media-previewing"), 0, this.signal), { signal: this.signal });
+    this.state.on("cancelScrub", ({ value }) => this.ctlr.plug("settings.notifiers")?.comp("cancelscrubnotifier")?.el.classList.toggle("tmg-media-control-active", value), { signal: this.signal });
+    this.config.on("previewValue", this.syncPreviewText, { init: true, signal: this.signal });
+    this.config.on("previews", this.handlePreviews, { init: true, signal: this.signal });
+    this.config.on("autopause", ({ value }) => [this.thumbnailCanvas, this.thumbnailImg].forEach((el) => el.classList.toggle("tmg-media-control-hidden", !value)), { init: true, signal: this.signal });
+    this.config.on("compact", ({ value }) => this.el.classList.toggle("tmg-media-control-compact", value), { init: true, signal: this.signal });
+    this.config.on("bufferMarks", () => this.syncMarks(this.config.marks, true), { init: true, signal: this.signal });
+    this.config.on("playedMarks", () => this.syncMarks(this.config.marks, true), { init: true, signal: this.signal });
+    this.media.on("state.paused", ({ value }) => !value ? this.ctlr.RAFLoop(`${this.config.label}Updating`, this.syncValue, this.signal) : this.ctlr.cancelRAFLoop(`${this.config.label}Updating`), { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("state.currentTime", this.handleCurrentTime, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("intent.currentTime", this.handleCurrentTime, { signal: this.signal });
+    this.media.on("status.buffered", this.handleBufferedStatus, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("status.played", () => this.config.playedMarks && this.syncMarks(this.config.marks, true), { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("status.duration", ({ value }) => this.el.ariaValueMax = String(Math.floor(value)), { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("status.error", ({ value }) => value && this.syncChunks("buffer", 0), { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("status.isLive", ({ value }) => this.config.readonly = value && !this.media.status.canSeekLive, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("status.canSeekLive", ({ value }) => this.config.readonly = !value && !!this.media.status.isLive, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("settings.metadata.chapterInfo", this.handleMetadataChapterInfoSetting, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.config.on("settings.time.format", this.syncPreviewText, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.time.mode", this.syncPreviewText, { signal: this.signal });
+    this.ctlr.config.on("settings.css.currentObjectWidth", ({ value }) => this.thumbnailCanvas.width = parseInt(value), { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.css.currentObjectHeight", ({ value }) => this.thumbnailCanvas.height = parseInt(value), { init: true, signal: this.signal });
+  }
+  scrub(value, bypass) {
+    return super.scrub(value, bypass) ? (!bypass && (this.media.intent.currentTime = safeNum(this.getTime(value / 100))), true) : false;
+  }
+  handleCurrentTime({ target, rejectable, resolved }) {
+    if (this.state.scrubbing || rejectable && !resolved) return;
+    if (this.media.state.paused) this.syncValue(false, target.value);
+    this.el.ariaValueText = `${formatMediaTime({ time: target.value, format: "human-long" })} of ${formatMediaTime({ time: this.media.status.duration, format: "human-long" })}`;
+  }
+  // !a full embodiment for near native range perf but close enough
+  handleBufferedStatus({ value }) {
+    this.config.bufferMarks && this.syncMarks(this.config.marks, true);
+    for (let i = 0; i < value.length; i++) if (value.start(value.length - 1 - i) < this.media.state.currentTime) return void this.syncChunks("buffer", this.getPosValue(safeNum(value.end(value.length - 1 - i) / getMediaMax(this.media))));
+  }
+  syncValue(auto = true, value = this.media.state.currentTime) {
+    if (auto && !this.ctlr.state.mediaIntersecting) return;
+    if (!this.state.scrubbing) this.config.value = safeNum(this.getProgress(value)) * 100;
+  }
+  handleScrubbing({ value }) {
+    this.media.container.classList.toggle("tmg-media-scrubbing", value);
+    if (!value) {
+      this.config.autopause && (0, import_modules4.silence)(() => this.media.intent.paused = this.wasPaused);
+      cancelAnimationFrame(this.scrubbingId);
+      this.ctlr.plug("settings.notifiers")?.comp("scrubnotifier")?.inactive();
+    } else {
+      this.wasPaused = this.media.state.paused;
+      this.scrubbingId = (0, import_utils6.requestAnimationFrame)(() => {
+        this.config.autopause && (0, import_modules4.silence)(() => this.media.intent.paused = true);
+        IS_MOBILE && this.ctlr.plug("settings.notifiers")?.comp("scrubnotifier")?.active();
+      }, this.signal);
+      this.clearCanvasPreviews();
+    }
+  }
+  handlePreviews({ target }) {
+    const value = target.value === true ? {} : target.value;
+    this.media.container.classList.toggle("tmg-media-no-previews", !value || this.media.type !== "video");
+    if (!value || this.media.type !== "video") return void (this.media.container.dataset.previewType = "none");
+    const manual = value.address && (value.spf || value.cols && value.rows), type = manual ? value.cols && value.rows ? "sprite" : "image" : "canvas";
+    this.media.container.dataset.previewType = type;
+    if (type === "sprite" && value.address) this.settings.css.currentPreviewUrl = this.settings.css.currentThumbnailUrl = `url(${value.address})`;
+    else this.settings.css.currentPreviewPosition = this.settings.css.currentThumbnailPosition = "center";
+  }
+  handleMetadataChapterInfoSetting({ value }) {
+    if (!value || value.length < 2) return void (this.config.divs = []);
+    const divs = [];
+    for (let i = 0, len = value.length; i < len; i++) divs.push({ value: value[i].startTime / getMediaMax(this.media) * 100, label: value[i].title });
+    this.config.divs = divs;
+  }
+  stopScrubbing() {
+    if (!this.state.scrubbing) return;
+    if (!this.state.cancelScrub) this.media.intent.currentTime = this.getTime(this.config.value / 100);
+    super.stopScrubbing();
+  }
+  onInput(_e, pos) {
+    this.ctlr.throttle(
+      `${this.config.label}Previewing`,
+      () => {
+        this.syncElPos(this.previewContainer, !this.config.compact ? pos : 0.5, false, true);
+        const previews = this.config.previews, type = this.media.container.dataset.previewType;
+        if (type === "sprite" && previews && !isBool(previews) && previews.cols && previews.rows) {
+          const frameIndex = Math.floor(pos * getMediaMax(this.media) / (previews.spf || 1)) || 1, { cols, rows } = previews, clampedI = Math.min(frameIndex, cols * rows - 1), xPercent = clampedI % cols * 100 / (cols - 1 || 1), yPercent = Math.floor(clampedI / cols) * 100 / (rows - 1 || 1);
+          if (!this.config.compact) this.settings.css.currentPreviewPosition = `${xPercent}% ${yPercent}%`;
+          if (this.state.scrubbing && this.config.autopause) this.settings.css.currentThumbnailPosition = `${xPercent}% ${yPercent}%`;
+        } else if (type === "image" && previews && !isBool(previews) && previews.address) {
+          const frameIndex = Math.floor(pos * getMediaMax(this.media) / (previews.spf || 1)) || 1, url = `url(${previews.address.replace("$", String(frameIndex))})`;
+          if (!this.config.compact) this.settings.css.currentPreviewUrl = url;
+          if (this.state.scrubbing && this.config.autopause) this.settings.css.currentThumbnailUrl = url;
+        } else if (previews && !this.ctlr.state.frameReadyPromise) this.media.pseudoElement.currentTime = safeNum(this.getTime(pos));
+      },
+      30
+    );
+  }
+  syncPreviewText() {
+    if (this.plug) this.previewContainer.dataset.previewText = `${this.plug.toTimeText(this.getTime(this.config.previewValue / 100), true)}  ${this.getValueChunk(this.config.previewValue)?.label || ""}`.trim();
+  }
+  syncCanvasPreviews() {
+    if (!this.previewContext || !this.thumbnailContext || !this.media.status.loadedData || this.ctlr.state.frameReadyPromise || this.media.pseudoElement.readyState < 2) return;
+    this.ctlr.throttle(
+      "canvasPreviewSync",
+      () => {
+        this.previewCanvas.width = this.previewCanvas.clientWidth || this.previewCanvas.width;
+        this.previewCanvas.height = this.previewCanvas.clientHeight || this.previewCanvas.height;
+        if (!this.config.compact) this.previewContext.drawImage(this.media.pseudoElement, 0, 0, this.previewCanvas.width, this.previewCanvas.height);
+        if (this.state.scrubbing && this.config.autopause) this.thumbnailContext.drawImage(this.media.pseudoElement, 0, 0, this.thumbnailCanvas.width, this.thumbnailCanvas.height);
+      },
+      33
+    );
+  }
+  clearCanvasPreviews(bool = this.media.container.dataset.previewType === "canvas" && this.media.pseudoElement.readyState < 2) {
+    bool && (this.ctlr.setCanvasFallback(this.previewCanvas, this.previewContext), this.ctlr.setCanvasFallback(this.thumbnailCanvas, this.thumbnailContext));
+  }
+  syncDivs(divs = this.config.divs) {
+    super.syncDivs(divs);
+    for (let i = 0, len = this.chunks.length; i < len; i++) {
+      const c = this.chunks[i];
+      c.el.classList.add("tmg-media-timeline-chapter"), c.base.classList.add("tmg-media-timeline-base-bar", "tmg-media-timeline-bar"), c.preview.classList.add("tmg-media-timeline-preview-bar", "tmg-media-timeline-bar"), c.value.classList.add("tmg-media-timeline-played-bar", "tmg-media-timeline-bar");
+      c.el.insertBefore(c.buffer = (0, import_utils2.createEl)("div", { className: "tmg-media-range-bar tmg-media-buffered-bar tmg-media-timeline-buffered-bar tmg-media-timeline-bar" }), c.value);
+    }
+    this.handleBufferedStatus({ value: this.media.status.buffered });
+  }
+  syncMarks(marks = this.config.marks, extras = false) {
+    if (extras && !this.ctlr.payload.wired) return;
+    const agg = [...marks], buf = this.media.status.buffered, ply = this.media.status.played, max = getMediaMax(this.media) || 1;
+    if (this.config.bufferMarks)
+      for (let i = 0, len = buf.length; i < len; i++) {
+        const start = buf.start(i), end = buf.end(i);
+        agg.push({ start: start / max * 100, end: end / max * 100, label: `${formatMediaTime({ time: start })}${end > start + 1 ? ` - ${formatMediaTime({ time: end })}` : ""}  Loaded`, type: "buffered" });
+      }
+    if (this.config.playedMarks)
+      for (let i = 0, len = ply.length; i < len; i++) {
+        const start = ply.start(i), end = ply.end(i);
+        agg.push({ start: start / max * 100, end: end / max * 100, label: `${formatMediaTime({ time: start })}${end > start + 1 ? ` - ${formatMediaTime({ time: end })}` : ""}  Played`, type: "played" });
+      }
+    super.syncMarks(agg);
+  }
+};
+__publicField(Timeline, "componentName", "timeline");
+// enforced name
+__publicField(Timeline, "isControl", true);
+
+// src/ts/components/controls/volume/slider.ts
+var VolumeSlider = class extends RangeInput {
+  get plug() {
+    return this.ctlr.plug("settings.volume");
+  }
+  constructor(ctlr, config) {
+    super(ctlr, { label: "Volume Slider", ...config });
+  }
+  wire() {
+    super.wire();
+    this.config.set("value", (v) => Math.max(this.plug?.shouldToggle ? 0 : this.settings.volume.min, v), { signal: this.signal });
+    this.config.set("previewValue", (v) => Math.max(this.plug?.shouldToggle ? 0 : this.settings.volume.min, v), { signal: this.signal });
+    this.media.on("state.volume", this.handleVolumeState, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.config.on("settings.volume.max", this.handleVolumeMax, { init: true, signal: this.signal });
+  }
+  scrub(value, bypass) {
+    return super.scrub(value, bypass) ? (this.plug?.handleSliderInput(value), true) : false;
+  }
+  handleVolumeState({ value }) {
+    if (!this.state.scrubbing) this.config.previewValue = this.config.value = value;
+  }
+  handleVolumeMax({ value }) {
+    this.config.max = value;
+    this.config.divs = value > 100 ? [{ value: 0, label: "" }, { value: 100, label: `<strong style="color: var(--tmg-media-range-track-boost-color, red); vertical-align: 4%;">\u2191</strong>` }] : [];
+  }
+};
+
+// src/ts/components/controls/volume/index.ts
+var VolumeControl = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "slider");
+    __publicField(this, "button");
+    __publicField(this, "sliderWrapper");
+    __publicField(this, "delayActiveId");
+  }
+  get plug() {
+    return this.ctlr.plug("settings.volume");
+  }
+  create() {
+    this.slider = new VolumeSlider(this.ctlr, this.config);
+    this.element = (0, import_utils2.createEl)("div", { className: "tmg-media-volume-container tmg-media-vb-container" }, { draggableControl: "", controlId: this.name });
+    this.button = (0, import_utils2.createEl)("button", { className: "tmg-media-mute-btn tmg-media-vb-btn", type: "button", innerHTML: IconRegistry.get("volumehigh") + IconRegistry.get("volumelow") + IconRegistry.get("volumemuted") });
+    this.sliderWrapper = (0, import_utils2.createEl)("span", { className: "tmg-media-volume-slider-wrapper tmg-media-vb-slider-wrapper" });
+    const sliderEl = this.slider.create();
+    sliderEl.classList.add("tmg-media-vb-slider", "tmg-media-volume-slider");
+    this.sliderWrapper.append(sliderEl);
+    return this.el.append(this.button, this.sliderWrapper), this.el;
+  }
+  mount() {
+    this.slider.setup();
+  }
+  wire() {
+    this.media.on("features.volume", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.button.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.el.addEventListener("mousemove", this.startActive, { signal: this.signal });
+    this.el.addEventListener("mouseleave", this.stopActive, { signal: this.signal });
+    this.slider.config.on("value", this.delayActive, { signal: this.signal });
+    this.media.on("state.volume", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("state.muted", this.syncARIA, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.mute", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.toggle("auto");
+  }
+  startActive() {
+    this.slider.active(), this.delayActive();
+  }
+  delayActive() {
+    this.ctlr.plug("settings.overlay")?.delay();
+    clearTimeout(this.delayActiveId);
+    this.delayActiveId = (0, import_utils6.setTimeout)(() => this.stopActive(), this.settings.overlay.delay, this.signal);
+  }
+  stopActive() {
+    if (this.slider.el.matches(":active")) return this.delayActive();
+    clearTimeout(this.delayActiveId), this.slider.inactive();
+    this.slider.config.previewValue = this.slider.config.value;
+  }
+  syncARIA() {
+    this.state.label = this.media.state.muted || this.media.state.volume === 0 ? "Unmute" : "Mute";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.mute, this.settings.voice.commands.mute);
+    this.button.title = this.state.label + this.state.cmd;
+    this.setBtnARIA(void 0, this.button);
+  }
+  onDestroy() {
+    this.slider.destroy(), super.onDestroy();
+  }
+};
+__publicField(VolumeControl, "componentName", "volume");
+__publicField(VolumeControl, "isControl", true);
+
+// src/ts/components/controls/brightness/slider.ts
+var BrightnessSlider = class extends RangeInput {
+  get plug() {
+    return this.ctlr.plug("settings.brightness");
+  }
+  constructor(ctlr, config) {
+    super(ctlr, { label: "Brightness Slider", ...config });
+  }
+  wire() {
+    super.wire();
+    this.config.set("value", (v) => Math.max(this.plug?.shouldToggle ? 0 : this.settings.brightness.min, v), { signal: this.signal });
+    this.config.set("previewValue", (v) => Math.max(this.plug?.shouldToggle ? 0 : this.settings.brightness.min, v), { signal: this.signal });
+    this.media.on("state.brightness", this.handleBrightnessState, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.config.on("settings.brightness.max", this.handleBrightnessMax, { init: true, signal: this.signal });
+  }
+  scrub(value, bypass) {
+    return super.scrub(value, bypass) ? (this.plug?.handleSliderInput(value), true) : false;
+  }
+  handleBrightnessState({ value }) {
+    if (!this.state.scrubbing) this.config.previewValue = this.config.value = value;
+  }
+  handleBrightnessMax({ value }) {
+    this.config.max = value;
+    this.config.divs = value > 100 ? [{ value: 0, label: "" }, { value: 100, label: `<strong style="color: var(--tmg-media-range-track-boost-color, red); vertical-align: 4%;">\u2191</strong>` }] : [];
+  }
+};
+
+// src/ts/components/controls/brightness/index.ts
+var BrightnessControl = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "slider");
+    __publicField(this, "button");
+    __publicField(this, "sliderWrapper");
+    __publicField(this, "delayActiveId");
+    __publicField(this, "stopActive", () => {
+      if (this.slider.el.matches(":active")) return this.delayActive();
+      clearTimeout(this.delayActiveId), this.slider.inactive();
+      this.slider.config.previewValue = this.slider.config.value;
+    });
+  }
+  get plug() {
+    return this.ctlr.plug("settings.brightness");
+  }
+  create() {
+    this.slider = new BrightnessSlider(this.ctlr, this.config);
+    this.element = (0, import_utils2.createEl)("div", { className: "tmg-media-brightness-container tmg-media-vb-container" }, { draggableControl: "", controlId: this.name });
+    this.button = (0, import_utils2.createEl)("button", { className: "tmg-media-dark-btn tmg-media-vb-btn", type: "button", innerHTML: IconRegistry.get("brightnesshigh") + IconRegistry.get("brightnesslow") + IconRegistry.get("brightnessdark") });
+    this.sliderWrapper = (0, import_utils2.createEl)("span", { className: "tmg-media-brightness-slider-wrapper tmg-media-vb-slider-wrapper" });
+    const sliderEl = this.slider.create();
+    sliderEl.classList.add("tmg-media-vb-slider", "tmg-media-brightness-slider");
+    this.sliderWrapper.append(sliderEl);
+    return this.el.append(this.button, this.sliderWrapper), this.el;
+  }
+  mount() {
+    this.slider.setup();
+  }
+  wire() {
+    this.button.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.el.addEventListener("mousemove", this.startActive, { signal: this.signal });
+    this.el.addEventListener("mouseleave", this.stopActive, { signal: this.signal });
+    this.slider.config.on("value", this.delayActive, { signal: this.signal });
+    this.media.on("state.brightness", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("state.dark", this.syncARIA, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.dark", this.syncARIA, { signal: this.signal });
+    this.media.on("features.brightness", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.toggle("auto");
+  }
+  startActive() {
+    this.slider.active(), this.delayActive();
+  }
+  delayActive() {
+    this.ctlr.plug("settings.overlay")?.delay();
+    clearTimeout(this.delayActiveId);
+    this.delayActiveId = (0, import_utils6.setTimeout)(() => this.stopActive(), this.settings.overlay.delay, this.signal);
+  }
+  syncARIA() {
+    this.state.label = this.media.state.dark || this.media.state.brightness === 0 ? "Brighten" : "Darken";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.dark, this.settings.voice.commands.dark);
+    this.button.title = this.state.label + this.state.cmd;
+    this.setBtnARIA(void 0, this.button);
+  }
+  onDestroy() {
+    this.slider.destroy(), super.onDestroy();
+  }
+};
+__publicField(BrightnessControl, "componentName", "brightness");
+__publicField(BrightnessControl, "isControl", true);
+
+// src/ts/components/captionsview.ts
+var CaptionsView = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isMain", false);
+    __publicField(this, "prevCue", null);
+    __publicField(this, "karaokeNodes", null);
+    __publicField(this, "lastPreview", "");
+    __publicField(this, "timeoutId", -1);
+    __publicField(this, "charW", 0);
+    __publicField(this, "lineHPx", 0);
+    __publicField(this, "lastPosX", 0);
+    __publicField(this, "lastPosY", 0);
+    __publicField(this, "lastPtrX", 0);
+    __publicField(this, "lastPtrY", 0);
+    __publicField(this, "dragX");
+    __publicField(this, "dragY");
+    __publicField(this, "prevEX");
+    __publicField(this, "prevEY");
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("div", { className: "tmg-media-captions-container" }, { part: "region" });
+  }
+  mount() {
+    this.ctlr.DOM.controlsContainer?.prepend(this.element);
+  }
+  wire() {
+    if (!(this.isMain = this.element === this.ctlr.DOM.captionsContainer)) this.dragY = `calc((var(--tmg-media-current-captions-container-height) * ${this.config.secondaryOrder ?? 1}) + (var(--tmg-media-current-captions-container-height) / 2) + (var(--tmg-media-current-unit) / 2))`;
+    this.el.addEventListener("pointerdown", this.handleDragStart, { signal: this.signal });
+    this.ctlr.state.watch("dimensions.container.width", () => (this.syncSize(), this.preview("")), { init: true, signal: this.signal });
+  }
+  syncSize() {
+    this.el.style.setProperty("display", "block", "important");
+    const measurer = (0, import_utils2.createEl)("span", { className: "tmg-media-captions-text", innerHTML: "abcdefghijklmnopqrstuvwxyz".repeat(2) }, {}, { visibility: "hidden" });
+    this.el.append(measurer);
+    this.charW = measurer.offsetWidth / 52;
+    const { lineHeight, fontSize } = getComputedStyle(measurer);
+    this.lineHPx = !safeNum(parseFloat(lineHeight), 0) ? safeNum(parseFloat(fontSize), 16) * 1.2 : parseFloat(lineHeight);
+    measurer.remove(), this.el.style.removeProperty("display");
+  }
+  preview(cue = `${capitalize(this.media.container.dataset.trackKind || "captions")} look like this`, flush = this.isPreviewing()) {
+    const text = isStr(cue) ? cue : cue.text || "", should = flush || !this.ctlr.isUIActive("captions") || !this.el.textContent;
+    should && this.media.container.classList.add("tmg-media-captions-preview");
+    this.render(should ? (0, import_utils4.isObj)(cue) ? cue : { text: cue } : this.prevCue);
+    clearTimeout(this.timeoutId);
+    this.timeoutId = (0, import_utils6.setTimeout)((flush2 = this.isPreviewing(text)) => (this.media.container.classList.remove("tmg-media-captions-preview"), flush2 && (this.el.innerHTML = "")), this.settings.captions.previewTimeout, this.signal);
+    this.lastPreview = text;
+  }
+  isPreviewing(text = this.lastPreview) {
+    return !!this.el.innerHTML && this.el.textContent.replace(/\s/g, "") === text?.replace(/\s/g, "");
+  }
+  render(cue) {
+    const existing = this.el.querySelector(".tmg-media-captions-wrapper");
+    if (!cue) return existing?.remove();
+    const wrapper = existing ?? (0, import_utils2.createEl)("div", { className: "tmg-media-captions-wrapper", ariaLive: "Off", ariaAtomic: "true" }, { part: "cue-display" }), { offsetWidth: vCWidth, offsetHeight: vCHeight } = this.media.container, allowOverride = this.settings.captions.allowOverride || !this.isMain;
+    for (const attr of ["style", "data-active", "data-scroll"]) this.el.removeAttribute(attr);
+    if (!this.isMain) this.dragX && this.el.style.setProperty("--tmg-media-current-captions-x", this.dragX), this.dragY && this.el.style.setProperty("--tmg-media-current-captions-y", this.dragY);
+    wrapper.innerHTML = "", cue.text || (cue.text = ""), this.prevCue = cue;
+    const lines = cue.text.replace(/(<br\s*\/>)|\\N/gi, "\n").split(/\n/);
+    for (const p of lines) for (const l of formatVttLine(p, Math.floor(vCWidth / this.charW))) wrapper.append((0, import_utils2.createEl)("div", { className: "tmg-media-captions-line" }, cue.id ? { part: "cue", id: cue.id } : { part: "cue" }, allowOverride && cue.align ? { textAlign: cue.align } : void 0).appendChild((0, import_utils2.createEl)("span", { className: "tmg-media-captions-text", innerHTML: parseVttText(l) })).parentElement);
+    !existing && this.el.append(wrapper);
+    const { offsetWidth: cWidth, offsetHeight: cHeight } = this.element;
+    this.isMain ? this.settings.css.currentCaptionsContainerHeight = `${cHeight}px` : this.el.style.setProperty("--tmg-media-current-captions-container-height", `${cHeight}px`);
+    this.isMain ? this.settings.css.currentCaptionsContainerWidth = `${cWidth}px` : this.el.style.setProperty("--tmg-media-current-captions-container-width", `${cWidth}px`);
+    if (allowOverride) {
+      if (cue.region) {
+        this.el.setAttribute("data-active", "");
+        const { width, lines: regionLines, viewportAnchorX: vpAnX, viewportAnchorY: vpAnY, scroll } = cue.region;
+        if (isDef(vpAnX)) this.el.style.setProperty("--tmg-media-current-captions-x", `${vpAnX}%`);
+        if (isDef(vpAnY)) this.el.style.setProperty("--tmg-media-current-captions-y", `${100 - Number(vpAnY)}%`);
+        if (isDef(width)) this.el.style.maxWidth = `${width}%`;
+        if (isDef(regionLines)) this.el.style.maxHeight = `${Number(regionLines) * (this.lineHPx / vCHeight * 100)}%`;
+        if (scroll === "up") {
+          this.el.style.maxHeight = `${regionLines * (this.lineHPx / vCHeight * 100)}%`;
+          this.el.dataset.scroll = scroll;
+          this.ctlr.config.stall(() => this.el.scrollTop = wrapper.scrollHeight);
+        }
+      } else {
+        if (isDef(cue.position) && cue.position !== "auto") {
+          const elHalfWPct = cWidth / vCWidth * 100 / 2, posOffset = cue.positionAlign === "line-left" ? 0 : cue.positionAlign === "line-right" ? -2 * elHalfWPct : -elHalfWPct;
+          this.el.style.setProperty("--tmg-media-current-captions-x", `calc(${cue.position}% + ${posOffset}% + ${elHalfWPct}%)`);
+        }
+        if (isDef(cue.line) && cue.line !== "auto") {
+          const line = parseIfPercent(cue.line, 100), lhPct = this.lineHPx / vCHeight * 100, elHalfHPct = cHeight / vCHeight * 100 / 2, lAlign = cue.lineAlign && cue.lineAlign !== "auto" ? cue.lineAlign : line < 0 ? "end" : "start", lineOffset = lAlign === "start" ? -2 * elHalfHPct : lAlign === "end" ? 0 : -elHalfHPct, bottomVal = cue.snapToLines ? line < 0 ? (Math.abs(line) - 1) * lhPct : 100 - line * lhPct : 100 - line;
+          this.el.style.setProperty("--tmg-media-current-captions-y", `calc(${bottomVal}% + ${lineOffset}% + ${elHalfHPct}%)`);
+        }
+        if (isDef(cue.size) && cue.size !== 100) this.el.style.maxWidth = `${cue.size}%`;
+      }
+      if (cue.vertical) this.el.style.writingMode = cue.vertical === "lr" ? "vertical-lr" : "vertical-rl";
+    }
+    this.karaokeNodes = Array.from(wrapper.querySelectorAll("[data-part='timed']")).map((el) => {
+      const [, m, s, ms] = (el.dataset.time || "").match(/(\d+):(\d+)\.(\d+)/) || [];
+      return { el, time: m ? +m * 60 + +s + +ms / 1e3 : 0 };
+    });
+    this.syncKaraoke();
+  }
+  syncKaraoke() {
+    if (!this.karaokeNodes) return;
+    for (const { el, time } of this.karaokeNodes) {
+      const isPast = safeNum(this.media.state.currentTime) > time;
+      el.toggleAttribute("data-past", isPast), el.toggleAttribute("data-future", !isPast);
+    }
+  }
+  handleDragStart(e) {
+    this.el.setPointerCapture(e.pointerId);
+    const { left, bottom } = getComputedStyle(this.element);
+    this.lastPosX = parseFloat(left), this.lastPosY = parseFloat(bottom);
+    this.lastPtrX = e.clientX, this.lastPtrY = e.clientY;
+    this.el.addEventListener("pointermove", this.handleDragging, { signal: this.signal });
+    this.el.addEventListener("pointerup", this.handleDragEnd, { signal: this.signal });
+  }
+  handleDragging(e) {
+    this.media.container.classList.add("tmg-media-captions-dragging");
+    this.ctlr.RAFLoop("captionsDragging", () => {
+      if (e.clientX === this.prevEX && e.clientY === this.prevEY) return;
+      this.prevEX = e.clientX, this.prevEY = e.clientY;
+      const { offsetWidth: ww, offsetHeight: hh } = this.media.container, { offsetWidth: w, offsetHeight: h } = this.element, posX = (0, import_utils5.clamp)(w / 2, this.lastPosX + (e.clientX - this.lastPtrX), ww - w / 2), posY = (0, import_utils5.clamp)(h / 2, this.lastPosY - (e.clientY - this.lastPtrY), hh - h / 2);
+      if (this.isMain) this.settings.css.currentCaptionsX = `${posX / ww * 100}%`, this.settings.css.currentCaptionsY = `${posY / hh * 100}%`;
+      else this.el.style.setProperty("--tmg-media-current-captions-x", this.dragX = `${posX / ww * 100}%`), this.el.style.setProperty("--tmg-media-current-captions-y", this.dragY = `${posY / hh * 100}%`);
+    });
+  }
+  handleDragEnd() {
+    this.ctlr.cancelRAFLoop("captionsDragging");
+    this.media.container.classList.remove("tmg-media-captions-dragging");
+    this.el.removeEventListener("pointermove", this.handleDragging);
+    this.el.removeEventListener("pointerup", this.handleDragEnd);
+  }
+};
+__publicField(CaptionsView, "componentName", "captionsview");
+
+// src/ts/components/controls/captions.ts
+var CaptionsButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.captions");
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-captions-btn", type: "button", innerHTML: IconRegistry.get("subtitles") + IconRegistry.get("captions") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.textVisible", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.currentTextTrack", this.syncUI, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("status.textTracks", this.syncUI, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.captions", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.captions", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    this.plug?.toggleVisible();
+  }
+  syncUI() {
+    this[!this.plug?.canVisible ? "disable" : "enable"]();
+    this.syncARIA();
+  }
+  syncARIA() {
+    this.state.label = capitalize(this.plug?.getTrackKind()) || "Captions";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.captions, this.settings.voice.commands.captions);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(CaptionsButton, "componentName", "captions");
+__publicField(CaptionsButton, "isControl", true);
+
+// src/ts/components/screenlock.ts
+var ScreenLockButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.locked");
+  }
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { type: "button", className: "tmg-media-screen-locked-btn", tabIndex: -1, innerHTML: `${IconRegistry.get("lock")}${IconRegistry.get("unlock")}<p>Unlock controls?</p>` });
+  }
+  mount() {
+    this.plug?.wrapper.prepend(this.el);
+  }
+  wire() {
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.plug?.state.on("visible", this.syncUI, { init: true, signal: this.signal });
+    this.syncARIA();
+  }
+  handleClick(e) {
+    e.stopPropagation();
+    this.plug?.delayOverlay();
+    if (this.el.classList.contains("tmg-media-control-unlock")) this.media.intent.locked = false;
+    else this.el.classList.add("tmg-media-control-unlock");
+  }
+  syncUI() {
+    !this.plug?.state.visible && this.el.classList.remove("tmg-media-control-unlock");
+  }
+  syncARIA() {
+    this.el.title = this.state.label = "Unlock Screen";
+    this.setBtnARIA();
+  }
+};
+__publicField(ScreenLockButton, "componentName", "screenlock");
+
+// src/ts/components/controls/chapter.ts
+var ChapterButton = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "textEl");
+    __publicField(this, "iconEl");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-chapter-btn tmg-media-control-text-btn", type: "button" }, { draggableControl: "", controlId: this.name });
+    this.iconEl = (0, import_utils2.createEl)("span", { className: "tmg-media-chapter-icon" });
+    this.textEl = (0, import_utils2.createEl)("span", { className: "tmg-media-chapter-text" });
+    return this.element.append(this.textEl, this.iconEl), this.el;
+  }
+  wire() {
+    this.media.on("features.currentChapter", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.currentChapter", this.syncUI, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("settings.metadata.chapterInfo", this.syncUI, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.syncARIA();
+  }
+  async handleClick() {
+    const view = this.ctlr.plug("settings.settingsView");
+    if (view) {
+      view.menu.open(this.el);
+      view.menu.goTo("chapters");
+    }
+  }
+  syncUI() {
+    const idx = this.media.state.currentChapter, chapters = this.media.settings.metadata.chapterInfo;
+    if (idx === -1 || !chapters || !chapters[idx]) return void (this.textEl.textContent = "", this.hide());
+    this.textEl.textContent = chapters[idx].title || `Chapter ${idx + 1}`, this.show();
+  }
+  syncARIA() {
+    this.el.title = this.state.label = "View Chapter";
+    this.setBtnARIA();
+  }
+};
+__publicField(ChapterButton, "componentName", "chapter");
+__publicField(ChapterButton, "isControl", true);
+
+// src/ts/components/controls/cast.ts
+var CastButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.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 = formatKeyForDisplay2(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);
+
+// src/ts/components/controls/airplay.ts
+var AirPlayButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils2.createEl)("button", { className: "tmg-media-airplay-btn", type: "button", innerHTML: IconRegistry.get("airplay") }, { draggableControl: "", controlId: this.name });
+  }
+  wire() {
+    this.media.on("features.airplay", this.gate, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.el.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.media.on("state.airplay", this.syncARIA, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.airplay", this.syncARIA, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.voice.commands.airplay", this.syncARIA, { signal: this.signal });
+  }
+  handleClick() {
+    if (!this.media.state.airplay) this.media.intent.airplay = true;
+  }
+  syncARIA() {
+    this.state.label = this.media.state.airplay ? "AirPlay Active" : "AirPlay";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.airplay, this.settings.voice.commands.airplay);
+    this.el.title = this.state.label + this.state.cmd;
+    this.setBtnARIA();
+  }
+};
+__publicField(AirPlayButton, "componentName", "airplay");
+__publicField(AirPlayButton, "isControl", true);
+
+// src/ts/components/holders/pipplaceholder.ts
+var PiPPlaceholder = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "iconBtn");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("div", { className: "tmg-media-placeholder tmg-media-picture-in-picture-placeholder", innerHTML: `<p>Playing in picture-in-picture</p>` });
+    this.iconBtn = (0, import_utils2.createEl)("button", { className: "tmg-media-placeholder-icon-btn tmg-media-picture-in-picture-icon-btn", innerHTML: IconRegistry.get("pipplaceholder") });
+    return this.el.prepend(this.iconBtn), this.el;
+  }
+  mount() {
+    this.ctlr.DOM.controlsContainer?.prepend(this.el);
+  }
+  wire() {
+    this.iconBtn.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.pictureInPicture", this.syncARIA, { init: true, signal: this.signal });
+  }
+  handleClick() {
+    this.media.intent.pictureInPicture = !this.media.state.pictureInPicture;
+  }
+  syncARIA() {
+    this.state.label = this.media.state.pictureInPicture ? "Exit picture in picture" : "Picture in picture";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.pictureInPicture);
+    this.iconBtn.title = this.state.label + this.state.cmd;
+    this.setBtnARIA("", this.iconBtn);
+  }
+};
+__publicField(PiPPlaceholder, "componentName", "pipplaceholder");
+
+// src/ts/components/holders/castplaceholder.ts
+var CastPlaceholder = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "iconBtn");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("div", { className: "tmg-media-placeholder tmg-media-cast-placeholder", innerHTML: `<p>Casting to External Display</p>` });
+    this.iconBtn = (0, import_utils2.createEl)("button", { className: "tmg-media-placeholder-icon-btn tmg-media-cast-icon-btn", innerHTML: IconRegistry.get("castplaceholder") });
+    return this.el.prepend(this.iconBtn), this.el;
+  }
+  mount() {
+    this.ctlr.DOM.controlsContainer?.prepend(this.el);
+  }
+  wire() {
+    this.iconBtn.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.cast", this.syncARIA, { init: true, signal: this.signal });
+  }
+  handleClick() {
+    this.media.intent.cast = !this.media.state.cast;
+  }
+  syncARIA() {
+    this.state.label = this.media.state.cast ? "Stop casting" : "Cast to Display";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.cast);
+    this.iconBtn.title = this.state.label + this.state.cmd;
+    this.setBtnARIA("", this.iconBtn);
+  }
+};
+__publicField(CastPlaceholder, "componentName", "castplaceholder");
+
+// src/ts/components/holders/airplayplaceholder.ts
+var AirPlayPlaceholder = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "iconBtn");
+  }
+  create() {
+    this.element = (0, import_utils2.createEl)("div", { className: "tmg-media-placeholder tmg-media-airplay-placeholder", innerHTML: `<p>Streaming to AirPlay Display</p>` });
+    this.iconBtn = (0, import_utils2.createEl)("button", { className: "tmg-media-placeholder-icon-btn tmg-media-airplay-icon-btn", innerHTML: IconRegistry.get("airplayplaceholder") });
+    return this.el.prepend(this.iconBtn), this.el;
+  }
+  mount() {
+    this.ctlr.DOM.controlsContainer?.prepend(this.el);
+  }
+  wire() {
+    this.iconBtn.addEventListener("click", this.handleClick, { signal: this.signal });
+    this.ctlr.config.on("settings.keys.shortcuts.airplay", this.syncARIA, { init: true, signal: this.signal });
+  }
+  handleClick() {
+    this.media.intent.airplay = !this.media.state.airplay;
+  }
+  syncARIA() {
+    this.state.label = this.media.state.airplay ? "Stop airplaying" : "AirPlay to Display";
+    this.state.cmd = formatKeyForDisplay2(this.settings.keys.shortcuts.airplay);
+    this.iconBtn.title = this.state.label + this.state.cmd;
+    this.setBtnARIA("", this.iconBtn);
+  }
+};
+__publicField(AirPlayPlaceholder, "componentName", "airplayplaceholder");
+
+// src/ts/components/z-register.ts
+for (const Comp of [
+  // Random Order
+  RangeInput,
+  Buffer2,
+  Meta,
+  BigNextButton,
+  BigPlayPauseButton,
+  BigPrevButton,
+  PrevButton,
+  PlayPauseButton,
+  NextButton,
+  Forward10Button,
+  Backward10Button,
+  TimeButton,
+  DurationButton,
+  TimeAndDurationButton,
+  SettingsButton,
+  ObjectFitButton,
+  PictureInPictureButton,
+  TheaterButton,
+  CaptureButton,
+  FullscreenButton,
+  FullscreenLockButton,
+  FullscreenOrientationButton,
+  RemoveMiniplayerButton,
+  ExpandMiniplayerButton,
+  Timeline,
+  VolumeControl,
+  BrightnessControl,
+  CaptionsView,
+  CaptionsButton,
+  ScreenLockButton,
+  ChapterButton,
+  CastButton,
+  AirPlayButton,
+  PiPPlaceholder,
+  CastPlaceholder,
+  AirPlayPlaceholder
+])
+  ComponentRegistry.register(Comp);
+//# sourceMappingURL=z-register.cjs.map