tmg-media-player 0.0.1

package/dist/plugs/settings/captions/index.cjs

@@ -0,0 +1,793 @@
+"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/plugs/settings/captions/index.ts
+var captions_exports = {};
+__export(captions_exports, {
+  CAPTIONS_BUILD: () => CAPTIONS_BUILD,
+  CaptionsPlug: () => CaptionsPlug,
+  ROTATE_PATHS: () => ROTATE_PATHS,
+  STYLE_PATHS: () => STYLE_PATHS
+});
+module.exports = __toCommonJS(captions_exports);
+
+// src/ts/core/controllable.ts
+var import_sia_reactor3 = require("sia-reactor");
+var import_utils12 = 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 isNum(val) {
+  return "number" === typeof val;
+}
+function isStr(val) {
+  return "string" === typeof val;
+}
+function isArr(obj) {
+  return Array.isArray(obj);
+}
+function isFunc(val) {
+  return "function" === typeof val;
+}
+function camelize(str = "", { source } = /[\s_-]+/, { preserveInnerCase: pIC = true, upperFirst: uF = false } = {}) {
+  return (pIC ? str : str.toLowerCase()).replace(new RegExp(source + "(\\w)", "g"), (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c[uF ? "toUpperCase" : "toLowerCase"]());
+}
+function cleanURL(url) {
+  try {
+    const u = new URL(url, window.location.href);
+    return decodeURIComponent(u.origin + u.pathname);
+  } catch {
+    return url.replace(/\\/g, "/").split("?")[0].trim();
+  }
+}
+function isSameURL(url1, url2) {
+  if (url1 === url2) return true;
+  if (!isStr(url1) || !isStr(url2) || !url1 || !url2) return false;
+  return cleanURL(url1) === cleanURL(url2);
+}
+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");
+function isUISetting(obj) {
+  return (0, import_utils3.isObj)(obj) && "options" in obj && isArr(obj.options);
+}
+function isUIOption(opt) {
+  return (0, import_utils3.isObj)(opt) && "value" in opt;
+}
+function parseUIOpt(opt) {
+  return isUIOption(opt) ? { value: opt.value, display: String(opt.display ?? opt.value), infoText: opt.infoText } : { value: opt, display: String(opt) };
+}
+function parseUIObj(obj) {
+  const result = {}, keys = Object.keys(obj);
+  for (let i = 0; i < keys.length; i++) {
+    const entry = obj[keys[i]];
+    if (!(0, import_utils3.isObj)(entry)) continue;
+    if (isUISetting(entry))
+      result[keys[i]] = {
+        values: entry.options.map((opt) => parseUIOpt(opt).value),
+        displays: entry.options.map((opt) => parseUIOpt(opt).display)
+      };
+    else result[keys[i]] = parseUIObj(entry);
+  }
+  return result;
+}
+
+// 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_utils12.nuke)(this);
+  }
+  onDestroy() {
+  }
+};
+
+// src/ts/plugs/base/index.ts
+var import_utils15 = require("sia-reactor/utils");
+
+// 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_utils14 = 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_utils14.setPath)(CONFIG_BUILD, Plug.fullName, Plug.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils14.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_utils14.setPath)(CONFIG_BUILD, Pin.Plug.fullName + "." + Pin.pinName, Pin.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils14.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/plugs/base/index.ts
+var BasePlug = class extends Controllable {
+  static get surname() {
+    return this.isMain ? "" : "settings.";
+  }
+  static get fullName() {
+    return this.surname + this.plugName;
+  }
+  get name() {
+    return this.constructor.plugName;
+  }
+  constructor(ctlr, config = (0, import_utils15.getPath)(ctlr.config, new.target.fullName), state) {
+    ctlr.plug(new.target.fullName)?.destroy();
+    super(ctlr, config, state);
+    const path = new.target.fullName;
+    this.ctlr.config.watch(path, () => this.config = (0, import_utils15.getPath)(this.ctlr.config, path), { signal: this.signal });
+    ctlr.plugs.set(new.target.fullName, this);
+  }
+  onSetup() {
+    this.mount?.();
+    this.ctlr.state.readyState ? this.wire?.() : this.wire && this.ctlr.state.wonce("readyState", this.wire, { signal: this.signal });
+  }
+  onDestroy() {
+    this.unmount?.();
+    this.ctlr.plugs.delete(this.constructor.fullName);
+  }
+  mount() {
+  }
+  unmount() {
+  }
+  wire() {
+    this.registerMenu();
+  }
+  registerMenu() {
+    this.ctlr.plug("settings.settingsView")?.menu.register(MenuRegistry.get(this.constructor.fullName)?.(this));
+  }
+  // override to configure positioning
+};
+__publicField(BasePlug, "plugName");
+__publicField(BasePlug, "isCore", false);
+__publicField(BasePlug, "isMain", false);
+__publicField(BasePlug, "BUILD");
+
+// src/ts/plugs/settings/captions/build.ts
+var STYLE_PATHS = ["captions.font.family.value", "captions.font.size.value", "captions.font.color.value", "captions.font.opacity.value", "captions.font.weight.value", "captions.font.variant.value", "captions.background.color.value", "captions.background.opacity.value", "captions.window.color.value", "captions.window.opacity.value", "captions.characterEdgeStyle.value", "captions.textAlignment.value"];
+var ROTATE_PATHS = ["captions.font.family.value", "captions.font.weight.value", "captions.font.variant.value", "captions.font.opacity.value", "captions.background.opacity.value", "captions.window.opacity.value", "captions.characterEdgeStyle.value", "captions.textAlignment.value"];
+var CAPTIONS_BUILD = {
+  multiple: false,
+  allowOverride: true,
+  font: {
+    family: {
+      value: "",
+      options: [
+        { value: "", display: "Default" },
+        { value: "monospace", display: "Monospace" },
+        { value: "sans-serif", display: "Sans Serif" },
+        { value: "serif", display: "Serif" },
+        { value: "cursive", display: "Cursive" },
+        { value: "fantasy", display: "Fantasy" },
+        { value: "system-ui", display: "System UI" },
+        { value: "arial", display: "Arial" },
+        { value: "verdana", display: "Verdana" },
+        { value: "tahoma", display: "Tahoma" },
+        { value: "times new roman", display: "Times New Roman" },
+        { value: "georgia", display: "Georgia" },
+        { value: "impact", display: "Impact" },
+        { value: "comic sans ms", display: "Comic Sans MS" }
+      ]
+    },
+    size: {
+      min: 100,
+      max: 400,
+      value: 100,
+      skip: 100,
+      options: [
+        { value: 25, display: "25%" },
+        { value: 50, display: "50%" },
+        { value: 75, display: "75%" },
+        { value: 100, display: "100%" },
+        { value: 150, display: "150%" },
+        { value: 200, display: "200%" },
+        { value: 300, display: "300%" },
+        { value: 400, display: "400%" }
+      ]
+    },
+    color: {
+      value: "#ffffff",
+      options: [
+        { value: "#ffffff", display: "White" },
+        { value: "#ffff00", display: "Yellow" },
+        { value: "#00ff00", display: "Green" },
+        { value: "#00ffff", display: "Cyan" },
+        { value: "#0000ff", display: "Blue" },
+        { value: "#ff00ff", display: "Magenta" },
+        { value: "#ff0000", display: "Red" },
+        { value: "#000000", display: "Black" }
+      ]
+    },
+    opacity: {
+      value: 100,
+      options: [
+        { value: 25, display: "25%" },
+        { value: 50, display: "50%" },
+        { value: 75, display: "75%" },
+        { value: 100, display: "100%" }
+      ]
+    },
+    weight: {
+      value: "400",
+      options: [
+        { value: "100", display: "Thin" },
+        { value: "200", display: "Extra Light" },
+        { value: "300", display: "Light" },
+        { value: "400", display: "Normal" },
+        { value: "500", display: "Medium" },
+        { value: "600", display: "Semi Bold" },
+        { value: "700", display: "Bold" },
+        { value: "800", display: "Extra Bold" },
+        { value: "900", display: "Black" }
+      ]
+    },
+    variant: {
+      value: "normal",
+      options: [
+        { value: "normal", display: "Normal" },
+        { value: "small-caps", display: "Small Caps" },
+        { value: "all-small-caps", display: "All Small Caps" }
+      ]
+    }
+  },
+  background: {
+    color: {
+      value: "#000000",
+      options: [
+        { value: "#ffffff", display: "White" },
+        { value: "#ffff00", display: "Yellow" },
+        { value: "#00ff00", display: "Green" },
+        { value: "#00ffff", display: "Cyan" },
+        { value: "#0000ff", display: "Blue" },
+        { value: "#ff00ff", display: "Magenta" },
+        { value: "#ff0000", display: "Red" },
+        { value: "#000000", display: "Black" }
+      ]
+    },
+    opacity: {
+      value: 75,
+      options: [
+        { value: 0, display: "0%" },
+        { value: 25, display: "25%" },
+        { value: 50, display: "50%" },
+        { value: 75, display: "75%" },
+        { value: 100, display: "100%" }
+      ]
+    }
+  },
+  window: {
+    color: {
+      value: "#000000",
+      options: [
+        { value: "#ffffff", display: "White" },
+        { value: "#ffff00", display: "Yellow" },
+        { value: "#00ff00", display: "Green" },
+        { value: "#00ffff", display: "Cyan" },
+        { value: "#0000ff", display: "Blue" },
+        { value: "#ff00ff", display: "Magenta" },
+        { value: "#ff0000", display: "Red" },
+        { value: "#000000", display: "Black" }
+      ]
+    },
+    opacity: {
+      value: 0,
+      options: [
+        { value: 0, display: "0%" },
+        { value: 25, display: "25%" },
+        { value: 50, display: "50%" },
+        { value: 75, display: "75%" },
+        { value: 100, display: "100%" }
+      ]
+    }
+  },
+  characterEdgeStyle: {
+    value: "none",
+    options: [
+      { value: "none", display: "None" },
+      { value: "drop-shadow", display: "Drop Shadow" },
+      { value: "raised", display: "Raised" },
+      { value: "depressed", display: "Depressed" },
+      { value: "outline", display: "Outline" }
+    ]
+  },
+  textAlignment: {
+    value: "left",
+    options: [
+      { value: "left", display: "Left" },
+      { value: "center", display: "Center" },
+      { value: "right", display: "Right" }
+    ]
+  },
+  previewTimeout: 1500
+};
+
+// src/ts/plugs/settings/captions/index.ts
+var import_sia_reactor6 = require("sia-reactor");
+var import_utils20 = require("sia-reactor/utils");
+
+// src/ts/utils/num.ts
+var _stepsCache = /* @__PURE__ */ new Map();
+function rotateAny(cur, steps, dir = "forwards", wrap = true) {
+  let list;
+  if (Array.isArray(steps)) list = steps;
+  else {
+    const key = `${steps.min}|${steps.max}|${steps.step}`;
+    if (_stepsCache.has(key)) list = _stepsCache.get(key);
+    else _stepsCache.set(key, list = Array.from({ length: Math.floor((steps.max - steps.min) / steps.step) + 1 }, (_, i) => steps.min + i * steps.step));
+  }
+  let idx = isNum(cur) ? list.reduce((p, c, x) => Math.abs(c - cur) < Math.abs(list[p] - cur) ? x : p, 0) : list.indexOf(cur);
+  idx = idx + (dir === "forwards" ? 1 : -1);
+  return list[wrap ? (idx + list.length) % list.length : (0, import_utils4.clamp)(0, idx, list.length - 1)];
+}
+
+// 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;
+
+// src/ts/utils/media.ts
+var import_utils19 = require("sia-reactor/utils");
+var isTrack = (type, term) => `${type}Track` in window && term instanceof window[`${type}Track`];
+function getTrackIdx(medium, type = "Text", term = "active", list = medium[`${type.toLowerCase()}Tracks`]) {
+  if (isNum(term)) return term;
+  if (list && term === "active") {
+    if (type === "Text") {
+      for (let i = 0; i < +list.length; i++) if (list[i].mode === "showing") return i;
+    }
+    if (type === "Audio") {
+      for (let i = 0; i < +list.length; i++) if (list[i].enabled) return i;
+    }
+    if (type === "Video") return list.selectedIndex ?? -1;
+  }
+  if (list && isTrack(type, term)) return Array.prototype.indexOf.call(list, term);
+  if (list && isStr(term)) {
+    term = term.toLowerCase();
+    return !isNaN(+term) ? +term : Array.prototype.findIndex.call(list, (t) => t.id.toLowerCase() === term || t.label.toLowerCase() === term || t.srclang?.toLowerCase() === term || t.language.toLowerCase() === term || isSameURL(t.src, term));
+  }
+  return -1;
+}
+var DUMMY_VID = (0, import_utils.createEl)("video");
+var DUMMY_AUD = (0, import_utils.createEl)("audio");
+
+// src/ts/plugs/settings/captions/index.ts
+var import_modules = require("sia-reactor/modules");
+var CaptionsPlug = class extends BasePlug {
+  constructor(ctlr, config = ctlr.settings.captions) {
+    super(ctlr, config, { secondaryTracks: [] });
+    __publicField(this, "view", null);
+    __publicField(this, "iView", null);
+    // info view
+    __publicField(this, "shadowCurrentIndex");
+    __publicField(this, "secondaryViews", /* @__PURE__ */ new Map());
+  }
+  mount() {
+    if (this.view = ComponentRegistry.init("captionsview", this.ctlr)) this.ctlr.DOM.captionsContainer = this.view.element;
+    this.iView = ComponentRegistry.init("captionsview", this.ctlr);
+  }
+  wire() {
+    var _a;
+    (_a = this.config).multiple ?? (_a.multiple = false);
+    this.settings.css.currentCaptionsX, this.settings.css.currentCaptionsY;
+    this.state.watch("secondaryTracks", this.syncTracks, { signal: this.signal });
+    this.media.set("state.currentTextTrack", (v) => this.ctlr.isNativeEl && v !== this.shadowCurrentIndex ? import_sia_reactor6.TERMINATOR : v, { signal: this.signal });
+    this.media.watch("tech", () => {
+      var _a2, _b, _c, _d;
+      return (_a2 = this.media.features).textTracks || (_a2.textTracks = this.ctlr.isNativeEl), (_b = this.media.features).currentTextTrack || (_b.currentTextTrack = this.ctlr.isNativeEl && this.media.features.textTracks), (_c = this.media.features).textVisible || (_c.textVisible = this.media.features.activeCue), (_d = this.media.features).multipleCaptions || (_d.multipleCaptions = this.media.features.currentTextTrack);
+    }, { init: true, signal: this.signal });
+    this.ctlr.config.watch("settings.captions.multiple", this.syncTracks, { signal: this.signal });
+    for (const p of STYLE_PATHS) this.ctlr.config.watch(`settings.${p}`, (value) => (this.settings.css[camelize(p.replace(".value", ""), /\./)] = p.includes("opacity") ? +value / 100 : value, this.view?.syncSize()), { init: true, signal: this.signal });
+    this.media.on("intent.currentTextTrack", this.handleCurrentTextTrackIntent, { capture: true, init: this.ctlr.payload.wired, initType: "set", signal: this.signal });
+    this.media.on("intent.textVisible", this.handleTextVisibleIntent, { capture: true, init: this.ctlr.payload.wired, initType: "set", signal: this.signal });
+    this.media.on("state.currentTextTrack", this.syncUI, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("state.textVisible", this.handleTextVisibleState, { init: true, signal: this.signal });
+    this.media.on("state.currentTime", () => (this.view?.syncKaraoke(), this.secondaryViews.forEach((view) => view.syncKaraoke())), { init: this.ctlr.payload.wired, signal: this.signal });
+    this.media.on("state.src", () => (this.state.secondaryTracks = [], this.config.multiple = false), { signal: this.signal });
+    this.media.on("status.textTracks", () => (this.syncTracks(), this.syncUI()), { signal: this.signal });
+    this.media.on("status.activeCue", this.handleActiveCueStatus, { init: this.ctlr.payload.wired, signal: this.signal });
+    this.ctlr.registerAction("captions", { fn: () => (this.toggleVisible(), this.media.features.textVisible && this.ctlr.plug("settings.notifiers")?.notify("captions")), keyboard: { phase: "keyup" } });
+    this.ctlr.registerAction("captionsFontSizeUp", { fn: () => this.changeFontSize(this.ctlr.plug("settings.keys")?.getModded("captionsFontSize", "", this.config.font.size.skip) ?? this.config.font.size.skip), keyboard: { phase: "keydown" } });
+    this.ctlr.registerAction("captionsFontSizeDown", { fn: () => this.changeFontSize(-(this.ctlr.plug("settings.keys")?.getModded("captionsFontSize", "", this.config.font.size.skip) ?? this.config.font.size.skip)), keyboard: { phase: "keydown" } });
+    this.ctlr.registerAction("captionsFontFamily", { fn: () => this.rotateProp(parseUIObj(this.config).font.family.values, "captions.font.family.value", false, true), keyboard: { phase: "keydown" } });
+    this.ctlr.registerAction("captionsFontWeight", { fn: () => this.rotateProp(parseUIObj(this.config).font.weight.values, "captions.font.weight.value", false, true), keyboard: { phase: "keydown" } });
+    this.ctlr.registerAction("captionsFontVariant", { fn: () => this.rotateProp(parseUIObj(this.config).font.variant.values, "captions.font.variant.value", false, true), keyboard: { phase: "keydown" } });
+    this.ctlr.registerAction("captionsFontOpacity", { fn: () => this.rotateProp(parseUIObj(this.config).font.opacity.values, "captions.font.opacity.value"), keyboard: { phase: "keydown" } });
+    this.ctlr.registerAction("captionsBackgroundOpacity", { fn: () => this.rotateProp(parseUIObj(this.config).background.opacity.values, "captions.background.opacity.value"), keyboard: { phase: "keydown" } });
+    this.ctlr.registerAction("captionsWindowOpacity", { fn: () => this.rotateProp(parseUIObj(this.config).window.opacity.values, "captions.window.opacity.value"), keyboard: { phase: "keydown" } });
+    this.ctlr.registerAction("captionsCharacterEdgeStyle", { fn: () => this.rotateProp(parseUIObj(this.config).characterEdgeStyle.values, "captions.characterEdgeStyle.value", false), keyboard: { phase: "keydown" } });
+    this.ctlr.registerAction("captionsTextAlignment", { fn: () => this.rotateProp(parseUIObj(this.config).textAlignment.values, "captions.textAlignment.value", false), keyboard: { phase: "keydown" } });
+    super.wire();
+  }
+  handleCurrentTextTrackIntent(e) {
+    if (!this.ctlr.isNativeEl) return e.reject(this.name);
+    this.media.tech.when("loadedMetadata", e, () => {
+      this.media.state.currentTextTrack = this.shadowCurrentIndex = e.value;
+      this.syncTracks();
+    });
+    e.resolve(this.name);
+  }
+  handleTextVisibleIntent(e) {
+    if (e.resolved) return;
+    if (!this.media.features.activeCue) return e.reject(this.name);
+    this.media.tech.when("loadedMetadata", e, () => {
+      if (e.value && this.media.status.textTracks.length && this.media.state.currentTextTrack === -1) (0, import_modules.silence)(() => this.media.intent.currentTextTrack = Math.max(0, getTrackIdx(this.media.element, "Text", this.media.state.tracks.find((t) => t.default)?.id, this.media.status.textTracks)));
+      const cssPlug = this.ctlr.plug("settings.css");
+      if (cssPlug) this.settings.css.currentCaptionsX = cssPlug._cache.currentCaptionsX, this.settings.css.currentCaptionsY = cssPlug._cache.currentCaptionsY;
+      this.media.state.textVisible = e.value;
+    });
+    e.resolve(this.name);
+  }
+  handleTextVisibleState({ value }) {
+    this.media.container.classList.toggle("tmg-media-captions", this.canVisible && value);
+    const track = this.media.status.textTracks[this.media.state.currentTextTrack];
+    value && track && this.iView?.preview(this.getPreviewTip(track));
+  }
+  handleActiveCueStatus({ value }) {
+    !(!this.ctlr.isUIActive("captions") && this.view?.isPreviewing()) && this.view?.render(value);
+  }
+  handleCueChange(e, track = e?.target) {
+    const idx = Array.prototype.indexOf.call(this.media.status.textTracks, track);
+    track && idx !== -1 && idx !== this.media.state.currentTextTrack && this.secondaryViews.get(idx)?.render(track.activeCues?.[0] || null);
+  }
+  toggleVisible() {
+    if (!this.canVisible) return this.view?.preview(this.media.features.textTracks ? `No captions available for this ${this.media.type}` : `Captions not supported for this ${this.media.type}`);
+    this.media.intent.textVisible = !this.media.state.textVisible;
+  }
+  changeFontSize(value) {
+    const sign = value >= 0 ? "+" : "-";
+    value = Math.abs(value);
+    const size = Number(this.settings.css.captionsFontSize);
+    switch (sign) {
+      case "-":
+        if (size > this.config.font.size.min) this.config.font.size.value = size - (size % value || value);
+        break;
+      default:
+        if (size < this.config.font.size.max) this.config.font.size.value = size + (size % value ? size % value : value);
+    }
+    this.media.features.activeCue && this.view && this.ctlr.config.stall(this.view.preview), this.iView && this.ctlr.config.stall(() => this.iView.isPreviewing() && this.iView.preview(this.getPreviewTip()));
+  }
+  rotateProp(steps, prop, numeric = true, rerender = false) {
+    if (!steps.length) return;
+    const cssVal = this.settings.css[camelize(prop.replace(".value", ""), /\./)];
+    (0, import_utils20.setPath)(this.settings, prop, rotateAny((numeric ? Number : String)(prop.includes("opacity") ? Number(cssVal) * 100 : cssVal), steps));
+    rerender && this.media.features.activeCue && this.view && this.ctlr.config.stall(this.view.preview);
+  }
+  syncUI() {
+    this.media.container.classList.toggle("tmg-media-captions", this.canVisible && this.media.state.textVisible);
+    this.media.container.dataset.trackKind = this.getTrackKind();
+  }
+  get canVisible() {
+    return (this.media.features.textTracks && this.media.features.activeCue ? !!this.media.status.textTracks.length : !this.media.features.activeCue) && !!this.media.features.textVisible;
+  }
+  getTrackKind(track = this.media.status.textTracks[this.media.state.currentTextTrack]) {
+    return (track?.kind ?? track?.type) || "captions";
+  }
+  getPreviewTip(track = this.media.status.textTracks[this.media.state.currentTextTrack]) {
+    return { text: `${track?.label ?? track?.name} ${this.getTrackKind(track)} 
+ Click \u2699 for settings`, region: { viewportAnchorX: 10, viewportAnchorY: 20 } };
+  }
+  syncTracks() {
+    const list = this.media.status.textTracks;
+    if (!list) return;
+    for (const [idx, view] of this.secondaryViews) {
+      if (!this.config.multiple || !this.state.secondaryTracks.includes(idx)) {
+        view.destroy(), this.secondaryViews.delete(idx);
+        const track = list[idx];
+        this.ctlr.isNativeEl && idx !== this.media.state.currentTextTrack && track && (track.mode = "disabled", track.removeEventListener("cuechange", this.handleCueChange));
+      }
+    }
+    if (!this.ctlr.isNativeEl) return;
+    for (let i = 0, len = list.length; i < len; i++) {
+      const isSecondary = this.config.multiple && this.state.secondaryTracks.includes(i);
+      list[i].mode = i === this.media.state.currentTextTrack || isSecondary ? "hidden" : "disabled";
+      if (isSecondary && !this.secondaryViews.has(i)) {
+        const view = ComponentRegistry.init("captionsview", this.ctlr, { secondaryOrder: this.secondaryViews.size + 1 });
+        if (view) this.secondaryViews.set(i, view), list[i].addEventListener("cuechange", this.handleCueChange, { signal: this.signal }), this.handleCueChange({ target: list[i] });
+      }
+    }
+  }
+  registerMenu(items = MenuRegistry.get("settings.captions")?.(this), menu = this.ctlr.plug("settings.settingsView")?.menu) {
+    if (items && menu) menu.unregister("captions"), Array.isArray(items) ? items.forEach((item) => menu.registerBefore("chapters", item)) : menu.registerBefore("chapters", items);
+  }
+  onDestroy() {
+    this.view?.destroy(), this.iView?.destroy();
+    for (const view of this.secondaryViews.values()) view.destroy();
+    this.secondaryViews.clear();
+    const list = this.media.status.textTracks;
+    if (list) for (let i = 0; i < list.length; i++) list[i].removeEventListener("cuechange", this.handleCueChange);
+    if (this.ctlr.DOM.captionsContainer === this.view?.element) this.ctlr.DOM.captionsContainer = null;
+    super.onDestroy();
+  }
+};
+__publicField(CaptionsPlug, "plugName", "captions");
+__publicField(CaptionsPlug, "BUILD", CAPTIONS_BUILD);
+//# sourceMappingURL=index.cjs.map