tmg-media-player 0.0.1

package/dist/super/components/index.cjs

@@ -0,0 +1,3111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/ts/super/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  AirPlayButton: () => AirPlayButton,
+  AirPlayNotifier: () => AirPlayNotifier,
+  AirPlayPlaceholder: () => AirPlayPlaceholder,
+  Backward10Button: () => Backward10Button,
+  BaseComponent: () => BaseComponent,
+  BaseNotifier: () => BaseNotifier,
+  BaseRegistry: () => BaseRegistry,
+  BigNextButton: () => BigNextButton,
+  BigPlayPauseButton: () => BigPlayPauseButton,
+  BigPrevButton: () => BigPrevButton,
+  BrightnessControl: () => BrightnessControl,
+  BrightnessNotifier: () => BrightnessNotifier,
+  Buffer: () => Buffer2,
+  CancelScrubNotifier: () => CancelScrubNotifier,
+  CaptionsButton: () => CaptionsButton,
+  CaptionsNotifier: () => CaptionsNotifier,
+  CaptionsView: () => CaptionsView,
+  CaptureButton: () => CaptureButton,
+  CaptureNotifier: () => CaptureNotifier,
+  CastButton: () => CastButton,
+  CastNotifier: () => CastNotifier,
+  CastPlaceholder: () => CastPlaceholder,
+  ChapterButton: () => ChapterButton,
+  ChapterNotifier: () => ChapterNotifier,
+  ComponentRegistry: () => ComponentRegistry,
+  DurationButton: () => DurationButton,
+  ExpandMiniplayerButton: () => ExpandMiniplayerButton,
+  FastPlayNotifier: () => FastPlayNotifier,
+  Forward10Button: () => Forward10Button,
+  FullscreenButton: () => FullscreenButton,
+  FullscreenLockButton: () => FullscreenLockButton,
+  FullscreenOrientationButton: () => FullscreenOrientationButton,
+  FwdBwdNotifier: () => FwdBwdNotifier,
+  IconRegistry: () => IconRegistry,
+  MenuRegistry: () => MenuRegistry,
+  Meta: () => Meta,
+  NextButton: () => NextButton,
+  ObjectFitButton: () => ObjectFitButton,
+  ObjectFitNotifier: () => ObjectFitNotifier,
+  OrderedRegistry: () => OrderedRegistry,
+  PiPPlaceholder: () => PiPPlaceholder,
+  PictureInPictureButton: () => PictureInPictureButton,
+  PinRegistry: () => PinRegistry,
+  PlayPauseButton: () => PlayPauseButton,
+  PlayPauseNotifier: () => PlayPauseNotifier,
+  PlaybackRateNotifier: () => PlaybackRateNotifier,
+  PlugRegistry: () => PlugRegistry,
+  PrevButton: () => PrevButton,
+  PrevNextNotifier: () => PrevNextNotifier,
+  RangeInput: () => RangeInput,
+  RemoveMiniplayerButton: () => RemoveMiniplayerButton,
+  ScreenLockButton: () => ScreenLockButton,
+  ScrubNotifier: () => ScrubNotifier,
+  SettingsButton: () => SettingsButton,
+  TechRegistry: () => TechRegistry,
+  TheaterButton: () => TheaterButton,
+  TimeAndDurationButton: () => TimeAndDurationButton,
+  TimeButton: () => TimeButton,
+  Timeline: () => Timeline,
+  TouchBrightnessNotifier: () => TouchBrightnessNotifier,
+  TouchTimelineNotifier: () => TouchTimelineNotifier,
+  TouchVolumeNotifier: () => TouchVolumeNotifier,
+  VolumeControl: () => VolumeControl,
+  VolumeNotifier: () => VolumeNotifier,
+  add: () => add,
+  airplay: () => airplay,
+  airplayplaceholder: () => airplayplaceholder,
+  ambience: () => ambience,
+  audiotrack: () => audiotrack,
+  autoplay: () => autoplay,
+  brightnessdark: () => brightnessdark,
+  brightnesshigh: () => brightnesshigh,
+  brightnesslow: () => brightnesslow,
+  bwd: () => bwd,
+  captions: () => captions,
+  capture: () => capture,
+  cast: () => cast,
+  castplaceholder: () => castplaceholder,
+  chapters: () => chapters,
+  deleteicon: () => deleteicon,
+  doubletriangleleft: () => doubletriangleleft,
+  doubletriangleright: () => doubletriangleright,
+  dragindicator: () => dragindicator,
+  enterfullscreen: () => enterfullscreen,
+  enterpip: () => enterpip,
+  entertheater: () => entertheater,
+  expandminiplayer: () => expandminiplayer,
+  fullscreenorientation: () => fullscreenorientation,
+  fwd: () => fwd,
+  leavefullscreen: () => leavefullscreen,
+  leavepip: () => leavepip,
+  leavetheater: () => leavetheater,
+  lock: () => lock,
+  loop: () => loop,
+  next: () => next,
+  objectfitcontain: () => objectfitcontain,
+  objectfitcover: () => objectfitcover,
+  objectfitfill: () => objectfitfill,
+  pause: () => pause,
+  pipplaceholder: () => pipplaceholder,
+  play: () => play,
+  playbackrate: () => playbackrate,
+  playlist: () => playlist,
+  prev: () => prev,
+  quality: () => quality,
+  removeminiplayer: () => removeminiplayer,
+  replay: () => replay,
+  returnback: () => returnback,
+  settings: () => settings,
+  shuffle: () => shuffle,
+  subtitles: () => subtitles,
+  timer: () => timer,
+  triangleleft: () => triangleleft,
+  unlock: () => unlock,
+  videotrack: () => videotrack,
+  volumehigh: () => volumehigh,
+  volumelow: () => volumelow,
+  volumemuted: () => volumemuted
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/ts/core/controllable.ts
+var import_sia_reactor3 = require("sia-reactor");
+var import_utils13 = require("sia-reactor/utils");
+
+// ../t007-tools/packages/utils/dist/chunk-ZALPHCSJ.js
+var import_utils = require("sia-reactor/utils");
+var import_utils2 = require("sia-reactor/utils");
+var import_sia_reactor = require("sia-reactor");
+var import_sia_reactor2 = require("sia-reactor");
+var import_utils3 = require("sia-reactor/utils");
+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 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_utils10 = 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_utils7.guardAllMethods)(this, ctlr.guard);
+    this.signal = AbortSignal.any([this.signal, ctlr.signal]);
+    this.ctlr = ctlr;
+    this.media = ctlr.media;
+    this.state = (0, import_utils3.isObj)(state) ? (0, import_sia_reactor3.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_utils13.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_utils6.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_utils6.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_reactor7 = require("sia-reactor");
+var import_utils21 = require("sia-reactor/utils");
+
+// src/ts/utils/dom.ts
+var import_sia_reactor6 = require("sia-reactor");
+
+// ../t007-tools/packages/utils/dist/hooks/vanilla.js
+var import_sia_reactor4 = require("sia-reactor");
+var import_sia_reactor5 = require("sia-reactor");
+function initScrollAssist(el, { pxPerSecond = 80, assistClassName = "t007-scroll-assist", vertical = true, horizontal = true } = import_sia_reactor4.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_utils.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_reactor6.NOOP, onDblClick = import_sia_reactor6.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_utils4.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_reactor7.reactive)((0, import_utils21.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_utils.createEl)("div", { className: "tmg-media-range-container", tabIndex: 0, role: "slider" });
+    this.barsWrapper = (0, import_utils.createEl)("div", { className: "tmg-media-range-bars-wrapper" });
+    this.marksWrapper = (0, import_utils.createEl)("div", { className: "tmg-media-range-marks-wrapper" });
+    this.thumbEl = (0, import_utils.createEl)("div", { className: "tmg-media-range-thumb" });
+    this.tooltipEl = (0, import_utils.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_utils5.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_utils4.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_utils4.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_utils4.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_utils4.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_utils4.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_utils.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_utils.createEl)("div", { className: "tmg-media-range-bar tmg-media-range-base-bar" }), preview: (0, import_utils.createEl)("div", { className: "tmg-media-range-bar tmg-media-range-preview-bar" }), value: (0, import_utils.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_utils.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_utils.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/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/media.ts
+var import_utils23 = 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_utils.createEl)("video");
+var DUMMY_AUD = (0, import_utils.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/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_utils.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_utils.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_utils3.isObj)(cue) ? cue : { text: cue } : this.prevCue);
+    clearTimeout(this.timeoutId);
+    this.timeoutId = (0, import_utils5.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_utils.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_utils.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_utils.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_utils4.clamp)(w / 2, this.lastPosX + (e.clientX - this.lastPtrX), ww - w / 2), posY = (0, import_utils4.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/consts/config.ts
+var import_sia_reactor8 = 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_reactor8.CTX.isDevEnv,
+  noPlugList: []
+  // dev: "settings.persist"
+};
+
+// src/ts/core/registries.ts
+var import_utils24 = 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_utils24.setPath)(CONFIG_BUILD, Plug.fullName, Plug.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils24.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_utils24.setPath)(CONFIG_BUILD, Pin.Plug.fullName + "." + Pin.pinName, Pin.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils24.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/components/screenlock.ts
+var ScreenLockButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.locked");
+  }
+  create() {
+    return this.element = (0, import_utils.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/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_utils.createEl)("div", { className: "tmg-media-brightness-container tmg-media-vb-container" }, { draggableControl: "", controlId: this.name });
+    this.button = (0, import_utils.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_utils.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_utils5.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/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/components/controls/timeline/index.ts
+var import_modules2 = 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_utils.createEl)("div", { className: "tmg-media-preview-container" });
+    this.previewImg = (0, import_utils.createEl)("div", { className: "tmg-media-preview" });
+    this.previewCanvas = (0, import_utils.createEl)("canvas", { className: "tmg-media-preview" });
+    this.previewContext = this.previewCanvas.getContext("2d", { alpha: false });
+    this.thumbnailImg = (0, import_utils.createEl)("div", { className: "tmg-media-thumbnail tmg-media-filtered tmg-media-object" });
+    this.thumbnailCanvas = (0, import_utils.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_utils5.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_modules2.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_utils5.requestAnimationFrame)(() => {
+        this.config.autopause && (0, import_modules2.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_utils.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_utils.createEl)("div", { className: "tmg-media-volume-container tmg-media-vb-container" }, { draggableControl: "", controlId: this.name });
+    this.button = (0, import_utils.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_utils.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_utils5.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/airplay.ts
+var AirPlayButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils.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/controls/backward10.ts
+var Backward10Button = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils.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/bignext.ts
+var BigNextButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("playlist");
+  }
+  create() {
+    this.element = (0, import_utils.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_utils.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_utils.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/captions.ts
+var CaptionsButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.captions");
+  }
+  create() {
+    return this.element = (0, import_utils.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/controls/capture.ts
+var CaptureButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.frame");
+  }
+  create() {
+    return this.element = (0, import_utils.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/cast.ts
+var CastButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils.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/chapter.ts
+var ChapterButton = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "textEl");
+    __publicField(this, "iconEl");
+  }
+  create() {
+    this.element = (0, import_utils.createEl)("button", { className: "tmg-media-chapter-btn tmg-media-control-text-btn", type: "button" }, { draggableControl: "", controlId: this.name });
+    this.iconEl = (0, import_utils.createEl)("span", { className: "tmg-media-chapter-icon" });
+    this.textEl = (0, import_utils.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, chapters2 = this.media.settings.metadata.chapterInfo;
+    if (idx === -1 || !chapters2 || !chapters2[idx]) return void (this.textEl.textContent = "", this.hide());
+    this.textEl.textContent = chapters2[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/duration.ts
+var import_modules3 = require("sia-reactor/modules");
+var DurationButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.time");
+  }
+  create() {
+    return this.element = (0, import_utils.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_modules3.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/expandminiplayer.ts
+var ExpandMiniplayerButton = class extends BaseComponent {
+  get pin() {
+    return this.ctlr.plug("settings.modes")?.miniplayer;
+  }
+  create() {
+    return this.element = (0, import_utils.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/components/controls/forward10.ts
+var Forward10Button = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils.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/fullscreen.ts
+var FullscreenButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils.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_utils.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_utils.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/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_utils.createEl)("div", { className: "tmg-media-meta-wrapper" }, { draggableControl: "", dragId: "wrapper", controlId: this.name });
+    const textsCover = (0, import_utils.createEl)("div", { className: "tmg-media-meta-text-wrapper-cover" }), profileLink = (0, import_utils.createEl)("a", { className: "tmg-media-profile-link" }), titleWrapper = (0, import_utils.createEl)("div", { className: "tmg-media-title-wrapper" }), artistWrapper = (0, import_utils.createEl)("div", { className: "tmg-media-artist-wrapper" });
+    this.ctlr.DOM.mediaProfile = this.profile = this.ctlr.syncImgLoadState((0, import_utils.createEl)("img", { alt: "Profile", className: "tmg-media-profile" }));
+    this.ctlr.DOM.mediaTitle = this.title = (0, import_utils.createEl)("a", { className: "tmg-media-title tmg-media-meta-text" });
+    this.ctlr.DOM.mediaArtist = this.artist = (0, import_utils.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/next.ts
+var NextButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("playlist");
+  }
+  create() {
+    this.element = (0, import_utils.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/objectfit.ts
+var ObjectFitButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.objectFit");
+  }
+  create() {
+    return this.element = (0, import_utils.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_utils.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/playpause.ts
+var PlayPauseButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils.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/prev.ts
+var PrevButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("playlist");
+  }
+  create() {
+    this.element = (0, import_utils.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/removeminiplayer.ts
+var RemoveMiniplayerButton = class extends BaseComponent {
+  get pin() {
+    return this.ctlr.plug("settings.modes")?.miniplayer;
+  }
+  create() {
+    return this.element = (0, import_utils.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/settings.ts
+var SettingsButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.settingsView");
+  }
+  create() {
+    return this.element = (0, import_utils.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/theater.ts
+var TheaterButton = class extends BaseComponent {
+  create() {
+    return this.element = (0, import_utils.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/time.ts
+var TimeButton = class extends BaseComponent {
+  get plug() {
+    return this.ctlr.plug("settings.time");
+  }
+  create() {
+    return this.element = (0, import_utils.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/timeandduration.ts
+var import_modules4 = 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_utils.createEl)("button", { className: "tmg-media-time-and-duration-btn tmg-media-control-text-btn" }, { draggableControl: "", controlId: this.name });
+    this.time = (0, import_utils.createEl)("span", { className: "tmg-media-current-time", textContent: "-:--" });
+    this.bridge = (0, import_utils.createEl)("span", { className: "tmg-media-time-bridge", textContent: "/" });
+    this.duration = (0, import_utils.createEl)("span", { className: "tmg-media-duration-time", textContent: "-:--" });
+    this.liveBadge = (0, import_utils.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_modules4.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/holders/airplayplaceholder.ts
+var AirPlayPlaceholder = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "iconBtn");
+  }
+  create() {
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-placeholder tmg-media-airplay-placeholder", innerHTML: `<p>Streaming to AirPlay Display</p>` });
+    this.iconBtn = (0, import_utils.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/holders/castplaceholder.ts
+var CastPlaceholder = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "iconBtn");
+  }
+  create() {
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-placeholder tmg-media-cast-placeholder", innerHTML: `<p>Casting to External Display</p>` });
+    this.iconBtn = (0, import_utils.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/pipplaceholder.ts
+var PiPPlaceholder = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "iconBtn");
+  }
+  create() {
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-placeholder tmg-media-picture-in-picture-placeholder", innerHTML: `<p>Playing in picture-in-picture</p>` });
+    this.iconBtn = (0, import_utils.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/notifiers/base.ts
+var BaseNotifier = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "nodes", []);
+  }
+  get plug() {
+    return this.ctlr.plug("settings.notifiers");
+  }
+  get events() {
+    return this.constructor.triggers;
+  }
+  mount() {
+    const nodes = this.nodes.length ? this.nodes : [this.element];
+    for (const node of nodes) node.classList.add("tmg-media-notifier");
+    this.ctlr.DOM.notifiersContainer?.append(...nodes);
+  }
+  unmount() {
+    for (const node of this.nodes.length ? this.nodes : [this.element]) node.remove();
+  }
+  wire() {
+    for (const node of this.nodes.length ? this.nodes : [this.element]) node.addEventListener("animationend", this.handleAnimationEnd, { signal: this.signal });
+    this.plug?.state.events.push(...this.events);
+  }
+  handleAnimationEnd() {
+    this.plug?.reset("", true);
+  }
+  bindNodes(nodes) {
+    return this.nodes = nodes, this.element = nodes[0];
+  }
+};
+__publicField(BaseNotifier, "componentName", "base");
+__publicField(BaseNotifier, "isNotifier", true);
+__publicField(BaseNotifier, "triggers", []);
+
+// src/ts/components/notifiers/playpause.ts
+var PlayPauseNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "playDiv");
+    __publicField(this, "pauseDiv");
+  }
+  create() {
+    this.playDiv = (0, import_utils.createEl)("div", { className: "tmg-media-play-notifier", innerHTML: IconRegistry.get("play", true) });
+    this.pauseDiv = (0, import_utils.createEl)("div", { className: "tmg-media-pause-notifier", innerHTML: IconRegistry.get("pause", true) });
+    return this.bindNodes([this.playDiv, this.pauseDiv]);
+  }
+};
+__publicField(PlayPauseNotifier, "componentName", "playpausenotifier");
+__publicField(PlayPauseNotifier, "triggers", ["mediaplay", "mediapause"]);
+
+// src/ts/components/notifiers/prevnext.ts
+var PrevNextNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "prevDiv");
+    __publicField(this, "nextDiv");
+  }
+  create() {
+    this.prevDiv = (0, import_utils.createEl)("div", { className: "tmg-media-prev-notifier", innerHTML: IconRegistry.get("prev", true) });
+    this.nextDiv = (0, import_utils.createEl)("div", { className: "tmg-media-next-notifier", innerHTML: IconRegistry.get("next", true) });
+    return this.bindNodes([this.prevDiv, this.nextDiv]);
+  }
+};
+__publicField(PrevNextNotifier, "componentName", "prevnextnotifier");
+__publicField(PrevNextNotifier, "triggers", ["mediaprev", "medianext"]);
+
+// src/ts/components/notifiers/captions.ts
+var CaptionsNotifier = class extends BaseNotifier {
+  create() {
+    return this.element = (0, import_utils.createEl)("div", { className: "tmg-media-captions-notifier", innerHTML: IconRegistry.get("subtitles") + IconRegistry.get("captions") });
+  }
+};
+__publicField(CaptionsNotifier, "componentName", "captionsnotifier");
+__publicField(CaptionsNotifier, "triggers", ["captions"]);
+
+// src/ts/components/notifiers/capture.ts
+var CaptureNotifier = class extends BaseNotifier {
+  create() {
+    return this.element = (0, import_utils.createEl)("div", { className: "tmg-media-capture-notifier", innerHTML: IconRegistry.get("capture") });
+  }
+};
+__publicField(CaptureNotifier, "componentName", "capturenotifier");
+__publicField(CaptureNotifier, "triggers", ["capture"]);
+
+// src/ts/components/notifiers/playbackrate.ts
+var PlaybackRateNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "content");
+    __publicField(this, "upDiv");
+    __publicField(this, "downDiv");
+  }
+  create() {
+    this.content = (0, import_utils.createEl)("div", { className: "tmg-media-playback-rate-notifier-content tmg-media-notifier-content" });
+    this.upDiv = (0, import_utils.createEl)("div", { className: "tmg-media-playback-rate-up-notifier", innerHTML: IconRegistry.get("doubletriangleright") });
+    this.downDiv = (0, import_utils.createEl)("div", { className: "tmg-media-playback-rate-down-notifier", innerHTML: IconRegistry.get("doubletriangleleft") });
+    return this.bindNodes([this.content, this.upDiv, this.downDiv]);
+  }
+  wire() {
+    super.wire();
+    this.media.on("state.playbackRate", this.handlePlaybackRateState, { init: this.ctlr.payload.wired, signal: this.signal });
+  }
+  handlePlaybackRateState({ value }) {
+    this.content.textContent = `${value}x`;
+  }
+};
+__publicField(PlaybackRateNotifier, "componentName", "playbackratenotifier");
+__publicField(PlaybackRateNotifier, "triggers", ["playbackrateup", "playbackratedown"]);
+
+// src/ts/components/notifiers/volume.ts
+var VolumeNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "content");
+    __publicField(this, "upDiv");
+    __publicField(this, "downDiv");
+    __publicField(this, "mutedDiv");
+  }
+  create() {
+    this.content = (0, import_utils.createEl)("div", { className: "tmg-media-volume-notifier-content tmg-media-notifier-content" });
+    this.upDiv = (0, import_utils.createEl)("div", { className: "tmg-media-volume-up-notifier", innerHTML: IconRegistry.get("volumehigh", true) });
+    this.downDiv = (0, import_utils.createEl)("div", { className: "tmg-media-volume-down-notifier", innerHTML: IconRegistry.get("volumelow", true) });
+    this.mutedDiv = (0, import_utils.createEl)("div", { className: "tmg-media-volume-muted-notifier", innerHTML: IconRegistry.get("volumemuted", true) });
+    return this.bindNodes([this.content, this.upDiv, this.downDiv, this.mutedDiv]);
+  }
+  wire() {
+    super.wire();
+    this.ctlr.plug("settings.volume")?.state.on("aptValue", this.handleVolumeState, { signal: this.signal });
+    this.media.on("state.volume", this.handleVolumeState, { init: this.ctlr.payload.wired, signal: this.signal });
+  }
+  handleVolumeState({ value }) {
+    this.content.innerHTML = `${value}% ${value > 100 ? `<strong style="color: var(--tmg-media-range-track-boost-color, red); vertical-align: 4%;">\u2191</strong>` : ""}`.trim();
+  }
+};
+__publicField(VolumeNotifier, "componentName", "volumenotifier");
+__publicField(VolumeNotifier, "triggers", ["volumeup", "volumedown", "volumemuted"]);
+
+// src/ts/components/notifiers/brightness.ts
+var BrightnessNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "content");
+    __publicField(this, "upDiv");
+    __publicField(this, "downDiv");
+    __publicField(this, "darkDiv");
+  }
+  create() {
+    this.content = (0, import_utils.createEl)("div", { className: "tmg-media-brightness-notifier-content tmg-media-notifier-content" });
+    this.upDiv = (0, import_utils.createEl)("div", { className: "tmg-media-brightness-up-notifier", innerHTML: IconRegistry.get("brightnesshigh", true) });
+    this.downDiv = (0, import_utils.createEl)("div", { className: "tmg-media-brightness-down-notifier", innerHTML: IconRegistry.get("brightnesslow", true) });
+    this.darkDiv = (0, import_utils.createEl)("div", { className: "tmg-media-brightness-dark-notifier", innerHTML: IconRegistry.get("brightnessdark", true) });
+    return this.bindNodes([this.content, this.upDiv, this.downDiv, this.darkDiv]);
+  }
+  wire() {
+    super.wire();
+    this.ctlr.plug("settings.brightness")?.state.on("aptValue", this.handleBrightnessState, { signal: this.signal });
+    this.media.on("state.brightness", this.handleBrightnessState, { init: this.ctlr.payload.wired, signal: this.signal });
+  }
+  handleBrightnessState({ value }) {
+    this.content.innerHTML = `${value}% ${value > 100 ? `<strong style="color: var(--tmg-media-range-track-boost-color, red); vertical-align: 4%;">\u2191</strong>` : ""}`.trim();
+  }
+};
+__publicField(BrightnessNotifier, "componentName", "brightnessnotifier");
+__publicField(BrightnessNotifier, "triggers", ["brightnessup", "brightnessdown", "brightnessdark"]);
+
+// src/ts/components/notifiers/objectfit.ts
+var ObjectFitNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "content");
+    __publicField(this, "containDiv");
+    __publicField(this, "coverDiv");
+    __publicField(this, "fillDiv");
+  }
+  create() {
+    this.content = (0, import_utils.createEl)("div", { className: "tmg-media-object-fit-notifier-content tmg-media-notifier-content" });
+    this.containDiv = (0, import_utils.createEl)("div", { className: "tmg-media-object-fit-contain-notifier", innerHTML: IconRegistry.get("objectfitcontain", true) });
+    this.coverDiv = (0, import_utils.createEl)("div", { className: "tmg-media-object-fit-cover-notifier", innerHTML: IconRegistry.get("objectfitcover", true) });
+    this.fillDiv = (0, import_utils.createEl)("div", { className: "tmg-media-object-fit-fill-notifier", innerHTML: IconRegistry.get("objectfitfill", true) });
+    return this.bindNodes([this.content, this.containDiv, this.coverDiv, this.fillDiv]);
+  }
+  wire() {
+    super.wire();
+    this.media.on("state.objectFit", this.handleObjectFitState, { init: this.ctlr.payload.wired, signal: this.signal });
+  }
+  handleObjectFitState({ value }) {
+    this.content.textContent = this.ctlr.plug("settings.objectFit")?.toLabel(value) || "";
+  }
+};
+__publicField(ObjectFitNotifier, "componentName", "objectfitnotifier");
+__publicField(ObjectFitNotifier, "triggers", ["objectfitcontain", "objectfitcover", "objectfitfill"]);
+
+// src/ts/components/notifiers/fwdbwd.ts
+var FwdBwdNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fwdDiv");
+    __publicField(this, "bwdDiv");
+  }
+  create() {
+    this.fwdDiv = (0, import_utils.createEl)("div", { className: "tmg-media-fwd-notifier", innerHTML: IconRegistry.get("fwd") });
+    this.bwdDiv = (0, import_utils.createEl)("div", { className: "tmg-media-bwd-notifier", innerHTML: IconRegistry.get("bwd") });
+    return this.bindNodes([this.fwdDiv, this.bwdDiv]);
+  }
+};
+__publicField(FwdBwdNotifier, "componentName", "fwdbwdnotifier");
+__publicField(FwdBwdNotifier, "triggers", ["fwd", "bwd"]);
+
+// src/ts/components/notifiers/scrub.ts
+var ScrubNotifier = class extends BaseNotifier {
+  create() {
+    return this.element = (0, import_utils.createEl)("div", { className: "tmg-media-scrub-notifier tmg-media-text-notifier tmg-media-top-text-notifier", innerHTML: `<span>${IconRegistry.get("tripletriangleleft")}</span><p class="tmg-media-scrub-notifier-text" tabindex="-1">Double tap left or right to skip</p><span>${IconRegistry.get("tripletriangleright")}</span>` });
+  }
+};
+__publicField(ScrubNotifier, "componentName", "scrubnotifier");
+
+// src/ts/components/notifiers/cancelscrub.ts
+var CancelScrubNotifier = class extends BaseNotifier {
+  create() {
+    return this.element = (0, import_utils.createEl)("div", { className: "tmg-media-cancel-scrub-notifier tmg-media-text-notifier tmg-media-top-text-notifier", innerHTML: "Release to cancel" });
+  }
+};
+__publicField(CancelScrubNotifier, "componentName", "cancelscrubnotifier");
+
+// src/ts/components/notifiers/touchvolume.ts
+var TouchVolumeNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "content");
+    __publicField(this, "slider");
+    __publicField(this, "upSpan");
+    __publicField(this, "lowSpan");
+    __publicField(this, "mutedSpan");
+  }
+  create() {
+    this.content = (0, import_utils.createEl)("span", { className: "tmg-media-touch-volume-content tmg-media-touch-vb-content", textContent: "0" });
+    this.slider = (0, import_utils.createEl)("div", { className: "tmg-media-touch-volume-slider tmg-media-touch-vb-slider" });
+    this.upSpan = (0, import_utils.createEl)("span", { innerHTML: IconRegistry.get("volumehigh") });
+    this.lowSpan = (0, import_utils.createEl)("span", { innerHTML: IconRegistry.get("volumelow") });
+    this.mutedSpan = (0, import_utils.createEl)("span", { innerHTML: IconRegistry.get("volumemuted") });
+    const spanWrapper = (0, import_utils.createEl)("span");
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-touch-volume-notifier tmg-media-touch-vb-notifier" });
+    this.el.append(this.content, this.slider, (spanWrapper.append(this.upSpan, this.lowSpan, this.mutedSpan), spanWrapper));
+    return this.element;
+  }
+  wire() {
+    super.wire();
+    this.ctlr.plug("settings.volume")?.state.on("aptValue", this.handleVolumeState, { init: true, signal: this.signal });
+    this.media.on("state.volume", this.handleVolumeState, { init: this.ctlr.payload.wired, signal: this.signal });
+  }
+  handleVolumeState({ value }) {
+    this.content.textContent = `${value}%`;
+  }
+};
+__publicField(TouchVolumeNotifier, "componentName", "touchvolumenotifier");
+__publicField(TouchVolumeNotifier, "triggers", ["volumeup", "volumedown", "volumemuted"]);
+
+// src/ts/components/notifiers/touchbrightness.ts
+var TouchBrightnessNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "content");
+    __publicField(this, "slider");
+    __publicField(this, "upSpan");
+    __publicField(this, "lowSpan");
+    __publicField(this, "darkSpan");
+  }
+  create() {
+    this.content = (0, import_utils.createEl)("span", { className: "tmg-media-touch-brightness-content tmg-media-touch-vb-content", textContent: "0" });
+    this.slider = (0, import_utils.createEl)("div", { className: "tmg-media-touch-brightness-slider tmg-media-touch-vb-slider" });
+    this.upSpan = (0, import_utils.createEl)("span", { innerHTML: IconRegistry.get("brightnesshigh") });
+    this.lowSpan = (0, import_utils.createEl)("span", { innerHTML: IconRegistry.get("brightnesslow") });
+    this.darkSpan = (0, import_utils.createEl)("span", { innerHTML: IconRegistry.get("brightnessdark") });
+    const spanWrapper = (0, import_utils.createEl)("span");
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-touch-brightness-notifier tmg-media-touch-vb-notifier" });
+    this.el.append(this.content, this.slider, (spanWrapper.append(this.upSpan, this.lowSpan, this.darkSpan), spanWrapper));
+    return this.element;
+  }
+  wire() {
+    super.wire();
+    this.ctlr.plug("settings.brightness")?.state.on("aptValue", this.handleBrightnessState, { init: true, signal: this.signal });
+    this.media.on("state.brightness", this.handleBrightnessState, { init: this.ctlr.payload.wired, signal: this.signal });
+  }
+  handleBrightnessState({ value }) {
+    this.content.textContent = `${value}%`;
+  }
+};
+__publicField(TouchBrightnessNotifier, "componentName", "touchbrightnessnotifier");
+__publicField(TouchBrightnessNotifier, "triggers", ["brightnessup", "brightnessdown", "brightnessdark"]);
+
+// src/ts/components/notifiers/fastplay.ts
+var FastPlayNotifier = class extends BaseNotifier {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "text");
+  }
+  create() {
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-fast-play-notifier tmg-media-text-notifier tmg-media-top-text-notifier", innerHTML: `${IconRegistry.get("doubletriangleleft")}${IconRegistry.get("doubletriangleright")}` });
+    this.text = (0, import_utils.createEl)("p", { className: "tmg-media-fast-play-notifier-text" });
+    return this.el.insertBefore(this.text, this.el.lastChild), this.el;
+  }
+  wire() {
+    super.wire();
+    this.media.on("state.playbackRate", this.handlePlaybackRateState, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("state.currentTime", this.handleCurrentTimeState, { init: this.ctlr.payload.wired, signal: this.signal });
+  }
+  handlePlaybackRateState({ value }) {
+    this.text.textContent = `${value}x`;
+  }
+  handleCurrentTimeState({ value }) {
+    this.el.setAttribute("data-current-time", this.ctlr.plug("settings.time")?.toTimeText(value, true) ?? "0:00");
+  }
+};
+__publicField(FastPlayNotifier, "componentName", "fastplaynotifier");
+__publicField(FastPlayNotifier, "triggers", ["fastplay"]);
+
+// src/ts/components/notifiers/touchtimeline.ts
+var TouchTimelineNotifier = class extends BaseNotifier {
+  create() {
+    return this.element = (0, import_utils.createEl)("div", { className: "tmg-media-touch-timeline-notifier tmg-media-text-notifier", innerHTML: "Current Time" });
+  }
+};
+__publicField(TouchTimelineNotifier, "componentName", "touchtimelinenotifier");
+
+// src/ts/components/notifiers/chapter.ts
+var ChapterNotifier = class extends BaseNotifier {
+  create() {
+    return this.element = (0, import_utils.createEl)("div", { className: "tmg-media-chapter-notifier tmg-media-text-notifier tmg-media-top-text-notifier", innerHTML: "Current Chapter" });
+  }
+  wire() {
+    super.wire();
+    this.media.on("state.currentChapter", this.handleChapterState, { init: this.ctlr.payload.wired, signal: this.signal });
+  }
+  handleChapterState(e) {
+    const chapter = this.media.settings.metadata.chapterInfo?.[e.value];
+    this.el.textContent = chapter?.title || `Chapter ${e.value + 1}`;
+  }
+};
+__publicField(ChapterNotifier, "componentName", "chapternotifier");
+__publicField(ChapterNotifier, "triggers", ["chapter"]);
+
+// src/ts/components/notifiers/cast.ts
+var CastNotifier = class extends BaseNotifier {
+  create() {
+    return this.element = (0, import_utils.createEl)("div", { className: "tmg-media-cast-notifier", innerHTML: IconRegistry.get("cast") });
+  }
+};
+__publicField(CastNotifier, "componentName", "castnotifier");
+__publicField(CastNotifier, "triggers", ["cast"]);
+
+// src/ts/components/notifiers/airplay.ts
+var AirPlayNotifier = class extends BaseNotifier {
+  create() {
+    return this.element = (0, import_utils.createEl)("div", { className: "tmg-media-airplay-notifier", innerHTML: IconRegistry.get("airplay") });
+  }
+};
+__publicField(AirPlayNotifier, "componentName", "airplaynotifier");
+__publicField(AirPlayNotifier, "triggers", ["airplay"]);
+
+// src/ts/components/icons/play.ts
+var play = `<svg viewBox="0 0 25 25" class="tmg-media-play-icon">
+  <path d="M8,5.14V19.14L19,12.14L8,5.14Z" />
+</svg>`;
+
+// src/ts/components/icons/pause.ts
+var pause = `<svg viewBox="0 0 25 25" class="tmg-media-pause-icon">
+  <path d="M14,19H18V5H14M6,19H10V5H6V19Z" />
+</svg>`;
+
+// src/ts/components/icons/replay.ts
+var replay = `<svg viewBox="0 -960 960 960" class="tmg-media-replay-icon">
+  <path d="M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62 62-56 58-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Z" />
+</svg>`;
+
+// src/ts/components/icons/prev.ts
+var prev = `<svg viewBox="0 0 25 25" class="tmg-media-prev-icon">
+  <rect x="4" y="5.14" width="2.5" height="14" transform="translate(2.1,0)" />
+  <path d="M17,5.14V19.14L6,12.14L17,5.14Z" transform="translate(2.5,0)" />
+</svg>`;
+
+// src/ts/components/icons/next.ts
+var next = `<svg viewBox="0 0 25 25" class="tmg-media-next-icon">
+  <path d="M8,5.14V19.14L19,12.14L8,5.14Z" transform="translate(-2.5,0)" />
+  <rect x="19" y="5.14" width="2.5" height="14" transform="translate(-2.5,0)" />
+</svg>`;
+
+// src/ts/components/icons/settings.ts
+var settings = `<svg class="tmg-media-settings-icon" viewBox="0 -960 960 960">
+  <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" />
+</svg>`;
+
+// src/ts/components/icons/lock.ts
+var lock = `<svg class="tmg-media-screen-locked-icon" viewBox="0 0 512 512" style="scale: 0.825;">
+  <path d="M390.234 171.594v-37.375c.016-36.969-15.078-70.719-39.328-94.906A133.88 133.88 0 0 0 256 0a133.88 133.88 0 0 0-94.906 39.313c-24.25 24.188-39.344 57.938-39.313 94.906v37.375H24.906V512h462.188V171.594zm-210.343-37.375c.016-21.094 8.469-39.938 22.297-53.813C216.047 66.594 234.891 58.125 256 58.125s39.953 8.469 53.813 22.281c13.828 13.875 22.281 32.719 22.297 53.813v37.375H179.891zm-96.86 95.5h345.938v224.156H83.031z"/>
+  <path d="M297.859 321.844c0-23.125-18.75-41.875-41.859-41.875-23.125 0-41.859 18.75-41.859 41.875 0 17.031 10.219 31.625 24.828 38.156l-9.25 60.094h52.562L273.016 360c14.609-6.531 24.843-21.125 24.843-38.156"/>
+</svg>`;
+
+// src/ts/components/icons/unlock.ts
+var unlock = `<svg class="tmg-media-screen-unlock-icon" viewBox="0 0 512 512" style="scale: 0.875; translate: 0 -1px;">
+  <path d="M186.984 203.297v-81.578c.016-19.141 7.688-36.219 20.219-48.813C219.766 60.391 236.859 52.719 256 52.703c19.141.016 36.234 7.688 48.813 20.203 12.531 12.594 20.203 29.672 20.219 48.813v43.406h52.703v-43.406c.016-33.531-13.672-64.125-35.656-86.063C320.125 13.656 289.531-.016 256 0c-33.531-.016-64.125 13.656-86.063 35.656-22 21.938-35.672 52.531-35.656 86.063v81.578H46.438V512h419.125V203.297zM99.141 256H412.86v203.297H99.141z"/>
+  <path d="M293.969 339.547c0-20.969-17-37.953-37.969-37.953s-37.953 16.984-37.953 37.953c0 15.453 9.266 28.703 22.516 34.609l-8.391 54.5h47.672l-8.406-54.5c13.25-5.906 22.531-19.156 22.531-34.609"/>
+</svg>`;
+
+// src/ts/components/icons/enterfullscreen.ts
+var enterfullscreen = `<svg class="tmg-media-enter-fullscreen-icon" viewBox="0 0 25 25" style="scale: 0.8;">
+  <path d="M4 1.5C2.61929 1.5 1.5 2.61929 1.5 4V8.5C1.5 9.05228 1.94772 9.5 2.5 9.5H3.5C4.05228 9.5 4.5 9.05228 4.5 8.5V4.5H8.5C9.05228 4.5 9.5 4.05228 9.5 3.5V2.5C9.5 1.94772 9.05228 1.5 8.5 1.5H4Z" />
+  <path d="M20 1.5C21.3807 1.5 22.5 2.61929 22.5 4V8.5C22.5 9.05228 22.0523 9.5 21.5 9.5H20.5C19.9477 9.5 19.5 9.05228 19.5 8.5V4.5H15.5C14.9477 4.5 14.5 4.05228 14.5 3.5V2.5C14.5 1.94772 14.9477 1.5 15.5 1.5H20Z" />
+  <path d="M20 22.5C21.3807 22.5 22.5 21.3807 22.5 20V15.5C22.5 14.9477 22.0523 14.5 21.5 14.5H20.5C19.9477 14.5 19.5 14.9477 19.5 15.5V19.5H15.5C14.9477 19.5 14.5 19.9477 14.5 20.5V21.5C14.5 22.0523 14.9477 22.5 15.5 22.5H20Z" />
+  <path d="M1.5 20C1.5 21.3807 2.61929 22.5 4 22.5H8.5C9.05228 22.5 9.5 22.0523 9.5 21.5V20.5C9.5 19.9477 9.05228 19.5 8.5 19.5H4.5V15.5C4.5 14.9477 4.05228 14.5 3.5 14.5H2.5C1.94772 14.5 1.5 14.9477 1.5 15.5V20Z" />
+</svg>`;
+
+// src/ts/components/icons/leavefullscreen.ts
+var leavefullscreen = `<svg class="tmg-media-leave-fullscreen-icon" viewBox="0 0 25 25" style="scale: 0.8;">
+  <path d="M7 9.5C8.38071 9.5 9.5 8.38071 9.5 7V2.5C9.5 1.94772 9.05228 1.5 8.5 1.5H7.5C6.94772 1.5 6.5 1.94772 6.5 2.5V6.5H2.5C1.94772 6.5 1.5 6.94772 1.5 7.5V8.5C1.5 9.05228 1.94772 9.5 2.5 9.5H7Z" />
+  <path d="M17 9.5C15.6193 9.5 14.5 8.38071 14.5 7V2.5C14.5 1.94772 14.9477 1.5 15.5 1.5H16.5C17.0523 1.5 17.5 1.94772 17.5 2.5V6.5H21.5C22.0523 6.5 22.5 6.94772 22.5 7.5V8.5C22.5 9.05228 22.0523 9.5 21.5 9.5H17Z" />
+  <path d="M17 14.5C15.6193 14.5 14.5 15.6193 14.5 17V21.5C14.5 22.0523 14.9477 22.5 15.5 22.5H16.5C17.0523 22.5 17.5 22.0523 17.5 21.5V17.5H21.5C22.0523 17.5 22.5 17.0523 22.5 16.5V15.5C22.5 14.9477 22.0523 14.5 21.5 14.5H17Z" />
+  <path d="M9.5 17C9.5 15.6193 8.38071 14.5 7 14.5H2.5C1.94772 14.5 1.5 14.9477 1.5 15.5V16.5C1.5 17.0523 1.94772 17.5 2.5 17.5H6.5V21.5C6.5 22.0523 6.94772 22.5 7.5 22.5H8.5C9.05228 22.5 9.5 22.0523 9.5 21.5V17Z" />
+</svg>`;
+
+// src/ts/components/icons/enterpip.ts
+var enterpip = `<svg class="tmg-media-enter-picture-in-picture-icon" viewBox="0 0 25 25">
+  <path fill-rule="nonzero" d="M21 3a1 1 0 0 1 1 1v7h-2V5H4v14h6v2H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zm0 10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h8zM6.707 6.293l2.25 2.25L11 6.5V12H5.5l2.043-2.043-2.25-2.25 1.414-1.414z" />
+</svg>`;
+
+// src/ts/components/icons/leavepip.ts
+var leavepip = `<svg class="tmg-media-leave-picture-in-picture-icon" viewBox="0 0 25 25">
+  <path fill-rule="nonzero" d="M21 3a1 1 0 0 1 1 1v7h-2V5H4v14h6v2H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zm0 10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h8zm-9.5-6L9.457 9.043l2.25 2.25-1.414 1.414-2.25-2.25L6 12.5V7h5.5z" />
+</svg>`;
+
+// src/ts/components/icons/expandminiplayer.ts
+var expandminiplayer = `<svg class="tmg-media-miniplayer-expand-icon" viewBox="0 -960 960 960" style="scale: 0.9; rotate: 90deg;">
+  <path d="M120-120v-320h80v184l504-504H520v-80h320v320h-80v-184L256-200h184v80H120Z" />
+</svg>`;
+
+// src/ts/components/icons/removeminiplayer.ts
+var removeminiplayer = `<svg class="tmg-media-miniplayer-remove-icon" viewBox="0 -960 960 960">
+  <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+</svg>`;
+
+// src/ts/components/icons/capture.ts
+var capture = `<svg class="tmg-media-capture-icon" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M6.937 5.845c.07-.098.15-.219.25-.381l.295-.486C8.31 3.622 8.913 3 10 3h4c1.087 0 1.69.622 2.518 1.978l.295.486c.1.162.18.283.25.381q.071.098.12.155H20a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h2.816q.05-.057.121-.155M4 8a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-3c-.664 0-1.112-.364-1.56-.987a8 8 0 0 1-.329-.499c-.062-.1-.27-.445-.3-.492C14.36 5.282 14.088 5 14 5h-4c-.087 0-.36.282-.812 1.022-.029.047-.237.391-.3.492a8 8 0 0 1-.327.5C8.112 7.635 7.664 8 7 8zm15 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-7 7a5 5 0 1 1 0-10 5 5 0 0 1 0 10m0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+</svg>`;
+
+// src/ts/components/icons/cast.ts
+var cast = `<svg class="tmg-media-cast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="scale: 0.9;">
+  <path fill="none" d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6M2 20h.01"/>
+</svg>`;
+
+// src/ts/components/icons/airplay.ts
+var airplay = `<svg class="tmg-media-airplay-icon" viewBox="0 0 24 24">
+  <path d="M12.8 13.4c-.1-.1-.1-.2-.2-.2-.5-.3-1.1-.2-1.5.2l-4 6c0 .2-.1.4-.1.6 0 .6.4 1 1 1h8c.2 0 .4-.1.6-.2.5-.3.6-.9.3-1.4zM19 3H5C3.3 3 2 4.3 2 6v9c0 1.7 1.3 3 3 3h.8c.6 0 1-.4 1-1s-.4-1-1-1H5c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h14c.6 0 1 .4 1 1v9c0 .6-.4 1-1 1h-.8c-.6 0-1 .4-1 1s.4 1 1 1h.8c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3"/>
+</svg>
+`;
+
+// src/ts/components/icons/objectfitcontain.ts
+var objectfitcontain = `<svg class="tmg-media-object-fit-contain-icon" viewBox="0 0 16 16" style="scale: 0.75;">
+  <rect width="16" height="16" rx="4" ry="4" fill="none" stroke-width="2.25" stroke="currentColor"/>
+  <g stroke-width="1" stroke="currentColor" transform="translate(3,3)">
+    <path style="scale: 0.6;" d="M521.667563,212.999001 L523.509521,212.999001 C523.784943,212.999001 524,213.222859 524,213.499001 C524,213.767068 523.780405,213.999001 523.509521,213.999001 L520.490479,213.999001 C520.354351,213.999001 520.232969,213.944316 520.145011,213.855661 C520.056625,213.763694 520,213.642369 520,213.508523 L520,210.48948 C520,210.214059 520.223858,209.999001 520.5,209.999001 C520.768066,209.999001 521,210.218596 521,210.48948 L521,212.252351 L525.779724,207.472627 C525.975228,207.277123 526.284966,207.283968 526.480228,207.47923 C526.66978,207.668781 526.678447,207.988118 526.486831,208.179734 L521.667563,212.999001 Z" transform="translate(-520 -198)"/><path style="scale: 0.6;" d="M534.251065,199 L532.488194,199 C532.212773,199 531.997715,198.776142 531.997715,198.5 C531.997715,198.231934 532.21731,198 532.488194,198 L535.507237,198 C535.643364,198 535.764746,198.054685 535.852704,198.14334 C535.94109,198.235308 535.997715,198.356632 535.997715,198.490479 L535.997715,201.509521 C535.997715,201.784943 535.773858,202 535.497715,202 C535.229649,202 534.997715,201.780405 534.997715,201.509521 L534.997715,199.667563 L530.178448,204.486831 C529.982944,204.682335 529.673206,204.67549 529.477943,204.480228 C529.288392,204.290677 529.279725,203.97134 529.471341,203.779724 L534.251065,199 Z" transform="translate(-520 -198)"/>
+  </g>
+</svg>`;
+
+// src/ts/components/icons/objectfitcover.ts
+var objectfitcover = `<svg class="tmg-media-object-fit-cover-icon" viewBox="0 0 16 16" style="scale: 0.75;">
+  <rect width="16" height="16" rx="4" ry="4" fill="none" stroke-width="2.25" stroke="currentColor"/>
+  <g stroke-width="1" stroke="currentColor" transform="translate(3,3)">
+    <path style="scale: 0.6;" d="M521.667563,212.999001 L523.509521,212.999001 C523.784943,212.999001 524,213.222859 524,213.499001 C524,213.767068 523.780405,213.999001 523.509521,213.999001 L520.490479,213.999001 C520.354351,213.999001 520.232969,213.944316 520.145011,213.855661 C520.056625,213.763694 520,213.642369 520,213.508523 L520,210.48948 C520,210.214059 520.223858,209.999001 520.5,209.999001 C520.768066,209.999001 521,210.218596 521,210.48948 L521,212.252351 L525.779724,207.472627 C525.975228,207.277123 526.284966,207.283968 526.480228,207.47923 C526.66978,207.668781 526.678447,207.988118 526.486831,208.179734 L521.667563,212.999001 Z" transform="translate(-520 -198)"/><path style="scale: 0.6;" d="M534.330152,212.999001 L532.488194,212.999001 C532.212773,212.999001 531.997715,213.222859 531.997715,213.499001 C531.997715,213.767068 532.21731,213.999001 532.488194,213.999001 L535.507237,213.999001 C535.643364,213.999001 535.764746,213.944316 535.852704,213.855661 C535.94109,213.763694 535.997715,213.642369 535.997715,213.508523 L535.997715,210.48948 C535.997715,210.214059 535.773858,209.999001 535.497715,209.999001 C535.229649,209.999001 534.997715,210.218596 534.997715,210.48948 L534.997715,212.252351 L530.217991,207.472627 C530.022487,207.277123 529.712749,207.283968 529.517487,207.47923 C529.327935,207.668781 529.319269,207.988118 529.510884,208.179734 L534.330152,212.999001 Z" transform="translate(-520 -198)"/><path style="scale: 0.6;" d="M521.667563,199 L523.509521,199 C523.784943,199 524,198.776142 524,198.5 C524,198.231934 523.780405,198 523.509521,198 L520.490479,198 C520.354351,198 520.232969,198.054685 520.145011,198.14334 C520.056625,198.235308 520,198.356632 520,198.490479 L520,201.509521 C520,201.784943 520.223858,202 520.5,202 C520.768066,202 521,201.780405 521,201.509521 L521,199.74665 L525.779724,204.526374 C525.975228,204.721878 526.284966,204.715034 526.480228,204.519772 C526.66978,204.33022 526.678447,204.010883 526.486831,203.819268 L521.667563,199 Z" transform="translate(-520 -198)"/><path style="scale: 0.6;" d="M534.251065,199 L532.488194,199 C532.212773,199 531.997715,198.776142 531.997715,198.5 C531.997715,198.231934 532.21731,198 532.488194,198 L535.507237,198 C535.643364,198 535.764746,198.054685 535.852704,198.14334 C535.94109,198.235308 535.997715,198.356632 535.997715,198.490479 L535.997715,201.509521 C535.997715,201.784943 535.773858,202 535.497715,202 C535.229649,202 534.997715,201.780405 534.997715,201.509521 L534.997715,199.667563 L530.178448,204.486831 C529.982944,204.682335 529.673206,204.67549 529.477943,204.480228 C529.288392,204.290677 529.279725,203.97134 529.471341,203.779724 L534.251065,199 Z" transform="translate(-520 -198)"/>
+  </g>
+</svg>`;
+
+// src/ts/components/icons/objectfitfill.ts
+var objectfitfill = `<svg class="tmg-media-object-fit-fill-icon" viewBox="0 0 16 16" style="scale: 0.75;">
+  <rect x="4" y="4" width="8" height="8" rx="1" ry="1" fill="none" stroke-width="1.5" stroke="currentColor"/>
+    <g stroke-width="1" stroke="currentColor" transform="translate(3, 3)">
+  <path style="scale: 0.65;" d="M521.667563,212.999001 L523.509521,212.999001 C523.784943,212.999001 524,213.222859 524,213.499001 C524,213.767068 523.780405,213.999001 523.509521,213.999001 L520.490479,213.999001 C520.354351,213.999001 520.232969,213.944316 520.145011,213.855661 C520.056625,213.763694 520,213.642369 520,213.508523 L520,210.48948 C520,210.214059 520.223858,209.999001 520.5,209.999001 C520.768066,209.999001 521,210.218596 521,210.48948 L521,212.252351 L525.779724,207.472627 C525.975228,207.277123 526.284966,207.283968 526.480228,207.47923 C526.66978,207.668781 526.678447,207.988118 526.486831,208.179734 L521.667563,212.999001 Z" transform="translate(-520, -198) translate(-3.25, 2.75)" /><path style="scale: 0.65;" d="M534.251065,199 L532.488194,199 C532.212773,199 531.997715,198.776142 531.997715,198.5 C531.997715,198.231934 532.21731,198 532.488194,198 L535.507237,198 C535.643364,198 535.764746,198.054685 535.852704,198.14334 C535.94109,198.235308 535.997715,198.356632 535.997715,198.490479 L535.997715,201.509521 C535.997715,201.784943 535.773858,202 535.497715,202 C535.229649,202 534.997715,201.780405 534.997715,201.509521 L534.997715,199.667563 L530.178448,204.486831 C529.982944,204.682335 529.673206,204.67549 529.477943,204.480228 C529.288392,204.290677 529.279725,203.97134 529.471341,203.779724 L534.251065,199 Z" transform="translate(-520, -198) translate(2.5, -3.25)" />
+  </g>
+</svg>`;
+
+// src/ts/components/icons/volumehigh.ts
+var volumehigh = `<svg class="tmg-media-volume-high-icon" viewBox="0 0 25 25">
+  <path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
+</svg>`;
+
+// src/ts/components/icons/volumelow.ts
+var volumelow = `<svg class="tmg-media-volume-low-icon" viewBox="0 0 25 25">
+  <path d="M5,9V15H9L14,20V4L9,9M18.5,12C18.5,10.23 17.5,8.71 16,7.97V16C17.5,15.29 18.5,13.76 18.5,12Z" />
+</svg>`;
+
+// src/ts/components/icons/volumemuted.ts
+var volumemuted = `<svg class="tmg-media-volume-muted-icon" viewBox="0 0 25 25">
+  <path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z" />
+</svg>`;
+
+// src/ts/components/icons/brightnesshigh.ts
+var brightnesshigh = `<svg class="tmg-media-brightness-high-icon" viewBox="0 0 25 25">
+  <path transform="translate(1.5, 1.5)" style="scale: 1.05;" d="M10 14.858a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6-5h3a1 1 0 0 1 0 2h-3a1 1 0 0 1 0-2zm-6 6a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1zm0-15a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1zm-9 9h3a1 1 0 1 1 0 2H1a1 1 0 0 1 0-2zm13.95 4.535l2.121 2.122a1 1 0 0 1-1.414 1.414l-2.121-2.121a1 1 0 0 1 1.414-1.415zm-8.486 0a1 1 0 0 1 0 1.415l-2.12 2.12a1 1 0 1 1-1.415-1.413l2.121-2.122a1 1 0 0 1 1.414 0zM17.071 3.787a1 1 0 0 1 0 1.414L14.95 7.322a1 1 0 0 1-1.414-1.414l2.12-2.121a1 1 0 0 1 1.415 0zm-12.728 0l2.121 2.121A1 1 0 1 1 5.05 7.322L2.93 5.201a1 1 0 0 1 1.414-1.414z" />
+</svg>`;
+
+// src/ts/components/icons/brightnesslow.ts
+var brightnesslow = `<svg class="tmg-media-brightness-low-icon" viewBox="0 0 25 25">
+  <path transform="translate(3.25, 3.25)" style="scale: 1.05;" d="M8 12.858a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6-5h1a1 1 0 0 1 0 2h-1a1 1 0 0 1 0-2zm-6 6a1 1 0 0 1 1 1v1a1 1 0 0 1-2 0v-1a1 1 0 0 1 1-1zm0-13a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1zm-7 7h1a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zm11.95 4.535l.707.708a1 1 0 1 1-1.414 1.414l-.707-.707a1 1 0 0 1 1.414-1.415zm-8.486 0a1 1 0 0 1 0 1.415l-.707.707A1 1 0 0 1 2.343 13.1l.707-.708a1 1 0 0 1 1.414 0zm9.193-9.192a1 1 0 0 1 0 1.414l-.707.707a1 1 0 0 1-1.414-1.414l.707-.707a1 1 0 0 1 1.414 0zm-9.9 0l.707.707A1 1 0 1 1 3.05 5.322l-.707-.707a1 1 0 0 1 1.414-1.414z" />
+</svg>`;
+
+// src/ts/components/icons/brightnessdark.ts
+var brightnessdark = `<svg class="tmg-media-brightness-dark-icon" viewBox="0 0 25 25">
+  <path transform="translate(2, 2.5)" style="scale: 1.2;" d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8.5 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707zM3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707z" />
+</svg>`;
+
+// src/ts/components/icons/entertheater.ts
+var entertheater = `<svg class="tmg-media-enter-theater-icon" viewBox="0 0 25 25">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M23 7C23 5.34315 21.6569 4 20 4H4C2.34315 4 1 5.34315 1 7V17C1 18.6569 2.34315 20 4 20H20C21.6569 20 23 18.6569 23 17V7ZM21 7C21 6.44772 20.5523 6 20 6H4C3.44772 6 3 6.44771 3 7V17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V7Z" />
+</svg>`;
+
+// src/ts/components/icons/leavetheater.ts
+var leavetheater = `<svg class="tmg-media-leave-theater-icon" viewBox="0 0 25 25">
+  <path d="M19 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8z" />
+</svg>`;
+
+// src/ts/components/icons/fullscreenorientation.ts
+var fullscreenorientation = `<svg class="tmg-media-fullscreen-orientation-icon" viewBox="0 0 512 512" style="scale: 0.925;">
+  <path d="M446.81,275.82H236.18V65.19c0-20.78-16.91-37.69-37.69-37.69H65.19c-20.78,0-37.69,16.91-37.69,37.69v255.32c0,20.78,16.91,37.68,37.69,37.68h88.62v88.62c0,20.78,16.9,37.69,37.68,37.69h255.32c20.78,0,37.69-16.91,37.69-37.69v-133.3C484.5,292.73,467.59,275.82,446.81,275.82zM65.19,326.19c-3.14,0-5.69-2.55-5.69-5.68V65.19c0-3.14,2.55-5.69,5.69-5.69h133.3c3.14,0,5.69,2.55,5.69,5.69v210.63h-12.69c-20.78,0-37.68,16.91-37.68,37.69v12.68H65.19zM452.5,446.81c0,3.14-2.55,5.69-5.69,5.69H191.49c-3.13,0-5.68-2.55-5.68-5.69V342.19v-28.68c0-2.94,2.24-5.37,5.1-5.66c0.19-0.02,0.38-0.03,0.58-0.03h28.69h226.63c3.14,0,5.69,2.55,5.69,5.69V446.81z" />
+  <path d="M369.92,181.53c-6.25-6.25-16.38-6.25-22.63,0c-6.25,6.25-6.25,16.38,0,22.63l44.39,44.39c3.12,3.13,7.22,4.69,11.31,4.69c0.21,0,0.42-0.02,0.63-0.03c0.2,0.01,0.4,0.03,0.6,0.03c6.31,0,11.74-3.66,14.35-8.96l37.86-37.86c6.25-6.25,6.25-16.38,0-22.63c-6.25-6.25-16.38-6.25-22.63,0l-13.59,13.59v-86.58c0-8.84-7.16-16-16-16h-86.29l15.95-15.95c6.25-6.25,6.25-16.38,0-22.63c-6.25-6.25-16.38-6.25-22.63,0l-40.33,40.33c-5.19,2.65-8.75,8.03-8.75,14.25c0,0.19,0.02,0.37,0.03,0.56c-0.01,0.19-0.03,0.38-0.03,0.57c0,4.24,1.69,8.31,4.69,11.31l42.14,42.14c3.12,3.12,7.22,4.69,11.31,4.69s8.19-1.56,11.31-4.69c6.25-6.25,6.25-16.38,0-22.63l-15.95-15.95h72.54v73.05L369.92,181.53z" />
+</svg>`;
+
+// src/ts/components/icons/returnback.ts
+var returnback = `<svg class="tmg-media-return-back-icon" viewBox="0 0 25 25">
+  <path transform="translate(5.5, 5.5)" d="M1.307,5.988 L6.616,1.343 C7.027,0.933 7.507,0.864 7.918,1.275 L7.918,4.407 C8.014,4.406 8.098,4.406 8.147,4.406 C13.163,4.406 16.885,7.969 16.885,12.816 C16.885,14.504 16.111,13.889 15.788,13.3 C14.266,10.52 11.591,8.623 8.107,8.623 C8.066,8.623 7.996,8.624 7.917,8.624 L7.917,11.689 C7.506,12.099 6.976,12.05 6.615,11.757 L1.306,7.474 C0.897,7.064 0.897,6.399 1.307,5.988 L1.307,5.988 Z" />
+</svg>
+`;
+
+// src/ts/components/icons/subtitles.ts
+var subtitles = `<svg viewBox="0 0 25 25" class="tmg-media-subtitles-icon">
+  <path style="scale: 0.5;" d="M44,6H4A2,2,0,0,0,2,8V40a2,2,0,0,0,2,2H44a2,2,0,0,0,2-2V8A2,2,0,0,0,44,6ZM12,26h4a2,2,0,0,1,0,4H12a2,2,0,0,1,0-4ZM26,36H12a2,2,0,0,1,0-4H26a2,2,0,0,1,0,4Zm10,0H32a2,2,0,0,1,0-4h4a2,2,0,0,1,0,4Zm0-6H22a2,2,0,0,1,0-4H36a2,2,0,0,1,0,4Z" />
+</svg>`;
+
+// src/ts/components/icons/captions.ts
+var captions = `<svg viewBox="0 0 25 25" class="tmg-media-captions-icon" style="scale: 1.15;">
+  <path d="M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z" />
+</svg>`;
+
+// src/ts/components/icons/triangleleft.ts
+var triangleleft = `<svg viewBox="0 0 25 25" class="tmg-media-triangle-left-icon">
+  <path d="M17,5.14V19.14L6,12.14L17,5.14Z" />
+</svg>`;
+
+// src/ts/components/icons/doubletriangleleft.ts
+var doubletriangleleft = `<svg viewBox="0 0 30 24"><path d="M22,5.14V19.14L11,12.14L22,5.14Z" /><path d="M11,5.14V19.14L0,12.14L11,5.14Z" /></svg>`;
+
+// src/ts/components/icons/doubletriangleright.ts
+var doubletriangleright = `<svg viewBox="0 0 30 24"><path d="M8,5.14V19.14L19,12.14L8,5.14Z" /><path d="M19,5.14V19.14L30,12.14L19,5.14Z" /></svg>`;
+
+// src/ts/components/icons/fwd.ts
+var fwd = `
+<svg viewBox="0 0 25 25" class="tmg-media-fwd-icon"><path d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>
+<svg viewBox="0 0 25 25" class="tmg-media-fwd-icon"><path d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>
+<svg viewBox="0 0 25 25" class="tmg-media-fwd-icon"><path d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>
+`;
+
+// src/ts/components/icons/bwd.ts
+var bwd = `
+<svg viewBox="0 0 25 25" class="tmg-media-bwd-icon"><path d="M17,5.14V19.14L6,12.14L17,5.14Z" /></svg>
+<svg viewBox="0 0 25 25" class="tmg-media-bwd-icon"><path d="M17,5.14V19.14L6,12.14L17,5.14Z" /></svg>
+<svg viewBox="0 0 25 25" class="tmg-media-bwd-icon"><path d="M17,5.14V19.14L6,12.14L17,5.14Z" /></svg>
+`;
+
+// src/ts/components/icons/pipplaceholder.ts
+var pipplaceholder = `<svg class="tmg-media-pip-placeholder-icon" viewBox="0 0 73 73">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(2, 2)" fill-rule="nonzero" stroke-width="2" class="tmg-media-pip-icon-background">
+      <rect x="-1" y="-1" width="71" height="71" rx="14" />
+    </g>
+    <g transform="translate(15, 15)" fill-rule="nonzero">
+      <g>
+        <polygon class="tmg-media-pip-icon-content-background" points="0 0 0 36 36 36 36 0" />
+        <rect class="tmg-media-pip-icon-content-backdrop" x="4.2890625" y="4.2890625" width="27.421875" height="13.2679687" />
+        <g transform="translate(4.289063, 27.492187)">
+          <rect x="0" y="0" width="3.1640625" height="2.109375" class="tmg-media-pip-icon-timeline-progress" />
+          <rect x="7.3828125" y="0" width="20.0390625" height="2.109375" class="tmg-media-pip-icon-timeline-base" />
+        </g>
+        <circle class="tmg-media-pip-icon-timeline-thumb" cx="9.5625" cy="28.546875" r="3.1640625" />
+        <polygon class="tmg-media-pip-icon-content" points="31.7109375 17.5569609 31.7109375 23.2734375 4.2890625 23.2734375 4.2890625 17.5569609 13.78125 8.06477344 20.109375 14.3928984 24.328125 10.1741484" />
+      </g>
+      <g transform="translate(21, 26)">
+        <polygon class="tmg-media-pip-icon-content-background" points="0 0 0 17.7727273 23 17.7727273 23 0" />
+        <rect class="tmg-media-pip-icon-content-backdrop" x="2.74023438" y="2.74023438" width="17.5195312" height="8.47675781" />
+        <polygon class="tmg-media-pip-icon-content" points="20.2597656 11.2169473 20.2597656 14.8691406 2.74023438 14.8691406 2.74023438 11.2169473 8.8046875 5.15249414 12.8476562 9.19546289 15.5429687 6.50015039" />
+      </g>
+    </g>
+  </g>
+</svg>`;
+
+// src/ts/components/icons/castplaceholder.ts
+var castplaceholder = `<svg class="tmg-media-cast-placeholder-icon" viewBox="0 0 73 73">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(2, 2)" fill-rule="nonzero" stroke-width="2" class="tmg-media-cast-icon-background">
+      <rect x="-1" y="-1" width="71" height="71" rx="14" />
+    </g>
+    <g transform="translate(11, 14)">
+      <rect class="tmg-media-cast-icon-content-background" fill="currentColor" x="0" y="0" width="51" height="36" rx="4" />
+      <rect class="tmg-media-cast-icon-content-backdrop" fill="currentColor" x="3" y="3" width="45" height="30" />
+      <polygon class="tmg-media-cast-icon-content" fill="currentColor" points="48 22 48 33 22 33 28 20 34 26 42 16" />
+      <polygon class="tmg-media-cast-icon-tv-base" fill="currentColor" points="19 36 32 36 36 42 15 42" />
+      <circle class="tmg-media-cast-icon-waves-fill" fill="currentColor" cx="6" cy="30" r="2.5" />
+      <path class="tmg-media-cast-icon-waves-stroke" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" d="M 3,21 A 12,12 0 0,1 15,33" />
+      <path class="tmg-media-cast-icon-waves-stroke" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" d="M 3,12 A 21,21 0 0,1 24,33" />
+    </g>
+  </g>
+</svg>`;
+
+// src/ts/components/icons/airplayplaceholder.ts
+var airplayplaceholder = `<svg class="tmg-media-airplay-placeholder-icon" viewBox="0 0 73 73">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(2, 2)" fill-rule="nonzero" stroke-width="2" class="tmg-media-airplay-icon-background">
+      <rect x="-1" y="-1" width="71" height="71" rx="14" />
+    </g>
+    <g transform="translate(11, 14)">
+      <rect class="tmg-media-airplay-icon-content-background" fill="currentColor" x="0" y="0" width="51" height="36" rx="4" />
+      <rect class="tmg-media-airplay-icon-content-backdrop" fill="currentColor" x="3" y="3" width="45" height="30" />
+      <polygon class="tmg-media-airplay-icon-content" fill="currentColor" points="48 22 48 33 22 33 28 20 34 26 42 16" />
+    </g>
+    <polygon class="tmg-media-airplay-icon-arrow" fill="currentColor" points="36.5 40 48 56 25 56" />
+  </g>
+</svg>`;
+
+// src/ts/components/icons/dragindicator.ts
+var dragindicator = `<svg fill="currentColor" height="20px" width="20px" viewBox="0 0 24 24" style="scale: 0.6"><path d="M10,6H6V2h4V6z M18,2h-4v4h4V2z M10,10H6v4h4V10z M18,10h-4v4h4V10z M10,18H6v4h4V18z M18,18h-4v4h4V18z"/></svg>`;
+
+// src/ts/components/icons/deleteicon.ts
+var deleteicon = `<svg viewBox="0 0 24 24" fill="none"><path d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1z" fill="currentColor"/></svg>`;
+
+// src/ts/components/icons/playlist.ts
+var playlist = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8h2v-6h4v-2h-6z"/></svg>`;
+
+// src/ts/components/icons/autoplay.ts
+var autoplay = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/><path d="M12 22C6.48 22 2 17.52 2 12S6.48 2 12 2s10 4.48 10 10-4.48 10-10 10zm0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8z"/></svg>`;
+
+// src/ts/components/icons/loop.ts
+var loop = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>`;
+
+// src/ts/components/icons/quality.ts
+var quality = `<svg viewBox="0 0 24 24" class="tmg-media-quality-icon" stroke-width="1" stroke="currentColor"><path d="M15 17h6v1h-6v-1zm-2 0H3v1h10v-1zm1-2h1v3h-1v-3zm3-4h4v1h-4v-1zm-5 0H3v1h9v-1zm1-2h1v3h-1V9zm-5-4h11v1H8V5zM3 5h3v1H3V5zm2-2h1v3H5V3z"/></svg>`;
+
+// src/ts/components/icons/audiotrack.ts
+var audiotrack = `<svg viewBox="0 0 24 24" class="tmg-media-audiotrack-icon" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path fill="none" d="M9 18V5l12-2v13"></path><circle fill="none" cx="6" cy="18" r="3"></circle><circle fill="none" cx="18" cy="16" r="3"></circle></svg>`;
+
+// src/ts/components/icons/videotrack.ts
+var videotrack = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>`;
+
+// src/ts/components/icons/chapters.ts
+var chapters = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>`;
+
+// src/ts/components/icons/ambience.ts
+var ambience = `<svg viewBox="0 0 24 24" class="tmg-media-ambience-icon" stroke-width="1" stroke="currentColor"><path d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM9 14.47L8.03 12.3l-2.17-.97 2.17-.97L9 8.2l.97 2.17 2.17.97-2.17.97L9 14.47zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z"/></svg>`;
+
+// src/ts/components/icons/playbackrate.ts
+var playbackrate = `<svg viewBox="0 0 24 24" class="tmg-media-playback-rate-icon" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path fill="none" d="m12 14 4-4"></path><path fill="none" d="M3.34 16A10 10 0 1 1 20.66 16"></path></svg>`;
+
+// src/ts/components/icons/timer.ts
+var timer = `<svg viewBox="0 0 24 24" class="tmg-media-timer-icon" stroke-width="0.2" stroke="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>`;
+
+// src/ts/components/icons/add.ts
+var add = `<svg viewBox="0 0 24 24" class="tmg-media-add-icon" stroke-width="1" stroke="currentColor"><path d="M20 12h-8v8h-1v-8H3v-1h8V3h1v8h8v1z"/></svg>`;
+
+// src/ts/components/icons/shuffle.ts
+var shuffle = `<svg viewBox="0 0 24 24" class="tmg-media-shuffle-icon"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>`;
+//# sourceMappingURL=index.cjs.map