tmg-media-player 0.0.1

package/dist/super/components/notifiers.cjs

@@ -0,0 +1,784 @@
+"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/notifiers.ts
+var notifiers_exports = {};
+__export(notifiers_exports, {
+  AirPlayNotifier: () => AirPlayNotifier,
+  BaseNotifier: () => BaseNotifier,
+  BrightnessNotifier: () => BrightnessNotifier,
+  CancelScrubNotifier: () => CancelScrubNotifier,
+  CaptionsNotifier: () => CaptionsNotifier,
+  CaptureNotifier: () => CaptureNotifier,
+  CastNotifier: () => CastNotifier,
+  ChapterNotifier: () => ChapterNotifier,
+  FastPlayNotifier: () => FastPlayNotifier,
+  FwdBwdNotifier: () => FwdBwdNotifier,
+  ObjectFitNotifier: () => ObjectFitNotifier,
+  PlayPauseNotifier: () => PlayPauseNotifier,
+  PlaybackRateNotifier: () => PlaybackRateNotifier,
+  PrevNextNotifier: () => PrevNextNotifier,
+  ScrubNotifier: () => ScrubNotifier,
+  TouchBrightnessNotifier: () => TouchBrightnessNotifier,
+  TouchTimelineNotifier: () => TouchTimelineNotifier,
+  TouchVolumeNotifier: () => TouchVolumeNotifier,
+  VolumeNotifier: () => VolumeNotifier
+});
+module.exports = __toCommonJS(notifiers_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 isFunc(val) {
+  return "function" === typeof val;
+}
+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/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/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/utils/dom.ts
+var import_sia_reactor4 = 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;
+
+// src/ts/consts/config.ts
+var import_sia_reactor5 = 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_reactor5.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/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"]);
+//# sourceMappingURL=notifiers.cjs.map