tmg-media-player 0.0.1

package/dist/components/controls/volume/index.cjs

@@ -0,0 +1,767 @@
+"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/components/controls/volume/index.ts
+var volume_exports = {};
+__export(volume_exports, {
+  VolumeControl: () => VolumeControl
+});
+module.exports = __toCommonJS(volume_exports);
+
+// src/ts/core/controllable.ts
+var import_sia_reactor3 = require("sia-reactor");
+var import_utils11 = 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 VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
+function getWindow(el = window) {
+  return el?.ownerDocument?.defaultView ?? el?.defaultView ?? window;
+}
+function isNum(val) {
+  return "number" === typeof val;
+}
+function isFunc(val) {
+  return "function" === typeof val;
+}
+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_utils9 = 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_utils11.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/consts/config.ts
+var import_sia_reactor4 = 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_reactor4.CTX.isDevEnv,
+  noPlugList: []
+  // dev: "settings.persist"
+};
+
+// src/ts/core/registries.ts
+var import_utils15 = 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_utils15.setPath)(CONFIG_BUILD, Plug.fullName, Plug.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils15.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_utils15.setPath)(CONFIG_BUILD, Pin.Plug.fullName + "." + Pin.pinName, Pin.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils15.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/utils/dom.ts
+var import_sia_reactor5 = require("sia-reactor");
+var win = "undefined" !== typeof window ? window : void 0;
+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/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_reactor6 = require("sia-reactor");
+var import_utils20 = require("sia-reactor/utils");
+
+// 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 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_reactor6.reactive)((0, import_utils20.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/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);
+//# sourceMappingURL=index.cjs.map