@pixl-app/sdk 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,875 @@
+// src/chat.ts
+function emoteUrl(emote, size = 1) {
+  const id = encodeURIComponent(emote.id);
+  switch (emote.provider) {
+    case "twitch":
+      return `https://static-cdn.jtvnw.net/emoticons/v2/${id}/${emote.animated ? "default" : "static"}/dark/${size === 4 ? 3 : size}.0`;
+    case "7tv":
+      return `https://cdn.7tv.app/emote/${id}/${size}x.webp`;
+    case "bttv":
+      return `https://cdn.betterttv.net/emote/${id}/${size === 4 ? 3 : size}x.webp`;
+    case "ffz":
+      return `https://cdn.frankerfacez.com/emote/${id}/${size}`;
+  }
+}
+var ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+function escapeHtml(text) {
+  return text.replace(/[&<>"']/g, (c) => ESCAPES[c]);
+}
+function emoteImg(e, size) {
+  const name = escapeHtml(e.name);
+  return `<img class="pixl-emote" src="${escapeHtml(emoteUrl(e, size))}" alt="${name}" data-provider="${e.provider}" data-emote="${escapeHtml(e.id)}">`;
+}
+function chatHtml(text, emotes = {}, options = {}) {
+  const size = options.size ?? 2;
+  const parts = text.split(/(\s+)/);
+  const out = [];
+  let lastEmote = -1;
+  for (const part of parts) {
+    if (!part)
+      continue;
+    if (/^\s+$/.test(part)) {
+      out.push(escapeHtml(part));
+      continue;
+    }
+    const emote = Object.prototype.hasOwnProperty.call(emotes, part) ? emotes[part] : undefined;
+    if (!emote) {
+      out.push(escapeHtml(part));
+      lastEmote = -1;
+      continue;
+    }
+    if (emote.zeroWidth && lastEmote >= 0) {
+      out.length = lastEmote + 1;
+      const base = out[lastEmote];
+      const inner = base.startsWith('<span class="pixl-emote-stack">') ? base.slice(31, -7) : base;
+      out[lastEmote] = `<span class="pixl-emote-stack">${inner}${emoteImg(emote, size)}</span>`;
+      continue;
+    }
+    out.push(emoteImg(emote, size));
+    lastEmote = out.length - 1;
+  }
+  return out.join("");
+}
+function badgesHtml(badges = []) {
+  return badges.map((b) => `<img class="pixl-badge" src="${escapeHtml(b.url)}" alt="${escapeHtml(b.title)}" data-provider="${b.provider}">`).join("");
+}
+var CHAT_CSS = `.pixl-emote{height:1.75em;vertical-align:middle;margin:-.25em 0}
+.pixl-emote-stack{display:inline-grid;vertical-align:middle}
+.pixl-emote-stack>.pixl-emote{grid-area:1/1;justify-self:center;align-self:center;margin:0}
+.pixl-badge{height:1.1em;vertical-align:middle;margin-right:.25em}`;
+function layerCss(l) {
+  switch (l.type) {
+    case "linear-gradient":
+    case "radial-gradient": {
+      const stops = l.stops.map((s) => `${s.color} ${Math.round(s.at * 1000) / 10}%`).join(", ");
+      const fn = `${l.repeating ? "repeating-" : ""}${l.type}`;
+      return l.type === "linear-gradient" ? `${fn}(${l.angle}deg, ${stops})` : `${fn}(${l.shape}, ${stops})`;
+    }
+    case "color":
+      return `linear-gradient(${l.color}, ${l.color})`;
+    case "image":
+      return `url("${l.url.replace(/"/g, "%22")}")`;
+  }
+}
+function paintCss(paint, fallback = "inherit") {
+  const layers = paint.layers.filter((l) => l.opacity > 0);
+  if (!layers.length)
+    return `color:${fallback}`;
+  const shadows = paint.shadows.map((s) => `drop-shadow(${s.x}px ${s.y}px ${s.blur}px ${s.color})`).join(" ");
+  return [
+    `color:${fallback}`,
+    `background-image:${layers.map(layerCss).join(", ")}`,
+    "background-size:cover",
+    "-webkit-background-clip:text",
+    "background-clip:text",
+    "-webkit-text-fill-color:transparent",
+    shadows ? `filter:${shadows}` : ""
+  ].filter(Boolean).join(";");
+}
+
+class PixlChat {
+  pixl;
+  paints = new Map;
+  queue = new Map;
+  timer = null;
+  constructor(pixl) {
+    this.pixl = pixl;
+  }
+  css = CHAT_CSS;
+  emoteUrl(emote, size = 1) {
+    return emoteUrl(emote, size);
+  }
+  badgesHtml(badges) {
+    return badgesHtml(badges);
+  }
+  paintCss(paint, fallback) {
+    return paintCss(paint, fallback);
+  }
+  html(text, emotes, options) {
+    return chatHtml(text, emotes, options);
+  }
+  async emotes() {
+    const res = await this.pixl.request("/emotes");
+    return res.emotes;
+  }
+  paint(id) {
+    let p = this.paints.get(id);
+    if (!p) {
+      p = new Promise((resolve) => {
+        this.queue.set(id, resolve);
+        this.timer ??= setTimeout(() => this.flush(), 20);
+      });
+      this.paints.set(id, p);
+    }
+    return p;
+  }
+  async paintStyle(id, fallback = "inherit") {
+    const paint = id ? await this.paint(id) : null;
+    return paint ? paintCss(paint, fallback) : `color:${fallback}`;
+  }
+  async flush() {
+    this.timer = null;
+    const batch = this.queue;
+    this.queue = new Map;
+    const ids = [...batch.keys()];
+    const found = new Map;
+    try {
+      for (let i = 0;i < ids.length; i += 100) {
+        const res = await this.pixl.request("/7tv/paints", {
+          ids: ids.slice(i, i + 100).join(",")
+        });
+        for (const p of res.paints)
+          found.set(p.id, p);
+      }
+    } catch (e) {
+      console.warn("[pixl] 7TV-Paints nicht geladen:", e);
+      for (const id of ids)
+        this.paints.delete(id);
+    }
+    for (const [id, resolve] of batch)
+      resolve(found.get(id) ?? null);
+  }
+}
+
+// src/feed.ts
+var HISTORY_OVERLAP_MS = 5 * 60000;
+var HISTORY_RETRY_DELAYS_MS = [2000, 5000, 1e4, 30000];
+
+class EventFeed {
+  ready = false;
+  error = null;
+  pixl;
+  since;
+  types;
+  handler;
+  delivered = new Set;
+  errorListeners = new Set;
+  buffer = null;
+  loadSeq = 0;
+  stopped = false;
+  latestAt = null;
+  retryTimer = null;
+  retryAttempt = 0;
+  unsubscribeStatus;
+  onEvent = (_, event) => this.handleLive(event);
+  constructor(pixl, options, handler) {
+    if (options?.since === undefined)
+      throw new Error("pixl.feed: `since` fehlt");
+    this.pixl = pixl;
+    this.since = options.since instanceof Date ? options.since.toISOString() : String(options.since);
+    this.types = options.types?.length ? new Set(options.types) : null;
+    this.handler = handler;
+    pixl.on("*", this.onEvent);
+    this.unsubscribeStatus = pixl.onStatus((status) => {
+      if (status === "connected") {
+        this.retryAttempt = 0;
+        this.load();
+      }
+    });
+  }
+  onError(listener) {
+    this.errorListeners.add(listener);
+    if (this.error)
+      listener(this.error);
+    return () => this.errorListeners.delete(listener);
+  }
+  stop() {
+    this.stopped = true;
+    this.clearRetry();
+    this.pixl.off("*", this.onEvent);
+    this.unsubscribeStatus();
+    this.errorListeners.clear();
+    this.buffer = null;
+  }
+  async load() {
+    const seq = ++this.loadSeq;
+    this.clearRetry();
+    this.buffer = [];
+    let failed = null;
+    try {
+      const history = await this.fetchHistory();
+      if (seq !== this.loadSeq || this.stopped)
+        return;
+      this.error = null;
+      this.retryAttempt = 0;
+      for (const e of history) {
+        this.deliver({
+          event: e.event,
+          data: e.data,
+          replay: !!(e.data?.replay || e.data?.test),
+          id: e.id,
+          at: e.at,
+          history: true
+        });
+      }
+    } catch (e) {
+      if (seq !== this.loadSeq || this.stopped)
+        return;
+      failed = e instanceof Error ? e : new Error(String(e));
+      this.error = failed;
+      for (const l of this.errorListeners)
+        l(failed);
+    }
+    const pending = this.buffer ?? [];
+    this.buffer = null;
+    this.ready = true;
+    for (const event of pending)
+      this.deliver(event);
+    if (failed)
+      this.scheduleRetry(failed);
+  }
+  async fetchHistory() {
+    const stopBefore = this.latestAt === null ? null : this.latestAt - HISTORY_OVERLAP_MS;
+    const all = [];
+    let cursor;
+    do {
+      const page = await this.pixl.events({
+        since: this.since,
+        types: this.types ? [...this.types] : undefined,
+        limit: 200,
+        cursor
+      });
+      all.push(...page.events);
+      cursor = page.nextCursor ?? undefined;
+      const oldest = page.events[page.events.length - 1];
+      if (stopBefore !== null && oldest && Date.parse(oldest.at) < stopBefore)
+        break;
+    } while (cursor);
+    return all.reverse();
+  }
+  scheduleRetry(error) {
+    const status = error.status;
+    if (status !== undefined && status >= 400 && status < 500 && status !== 429 && status !== 408)
+      return;
+    if (this.pixl.status !== "connected")
+      return;
+    const base = HISTORY_RETRY_DELAYS_MS[Math.min(this.retryAttempt, HISTORY_RETRY_DELAYS_MS.length - 1)];
+    this.retryAttempt += 1;
+    this.retryTimer = setTimeout(() => {
+      this.retryTimer = null;
+      if (!this.stopped && this.pixl.status === "connected")
+        this.load();
+    }, base + Math.random() * base * 0.3);
+  }
+  clearRetry() {
+    if (this.retryTimer)
+      clearTimeout(this.retryTimer);
+    this.retryTimer = null;
+  }
+  handleLive(event) {
+    if (this.stopped)
+      return;
+    if (this.types && !this.types.has(event.event))
+      return;
+    if (this.buffer) {
+      this.buffer.push(event);
+      return;
+    }
+    this.deliver(event);
+  }
+  deliver(event) {
+    if (event.id) {
+      if (this.delivered.has(event.id))
+        return;
+      this.delivered.add(event.id);
+    }
+    if (event.at) {
+      const at = Date.parse(event.at);
+      if (!Number.isNaN(at) && (this.latestAt === null || at > this.latestAt))
+        this.latestAt = at;
+    }
+    try {
+      this.handler(event.data, event);
+    } catch (e) {
+      console.error("[pixl] Fehler im feed()-Handler:", e);
+    }
+  }
+}
+
+// src/tts.ts
+class PixlTts {
+  pixl;
+  constructor(pixl) {
+    this.pixl = pixl;
+  }
+  async speak(text, options = {}) {
+    const res = await this.pixl._fetch("/tts", {
+      method: "POST",
+      json: { text, voice: options.voice, filters: options.filters }
+    });
+    return await res.json();
+  }
+  async voices() {
+    const res = await this.pixl._fetch("/tts/voices");
+    return await res.json();
+  }
+  async audio(id) {
+    const res = await this.pixl._fetch(`/tts/${encodeURIComponent(id)}/audio`);
+    return res.blob();
+  }
+  async marks(id) {
+    const res = await this.pixl._fetch(`/tts/${encodeURIComponent(id)}/marks`);
+    return (await res.json()).marks;
+  }
+  player(options = {}) {
+    return new TtsPlayer(this.pixl, this, options);
+  }
+}
+
+class TtsPlayer {
+  pixl;
+  tts;
+  options;
+  queue = [];
+  current = null;
+  wordFrame = null;
+  volume;
+  destroyed = false;
+  warnedAutoplay = false;
+  onReady;
+  onSkip;
+  onClear;
+  constructor(pixl, tts, options) {
+    this.pixl = pixl;
+    this.tts = tts;
+    this.options = options;
+    this.volume = clampVolume(options.volume ?? 1);
+    this.onReady = (data, event) => {
+      const item = toItem(data, event);
+      if (!item || event.replay && this.options.ignoreReplays)
+        return;
+      if (this.current?.item.id === item.id || this.queue.some((q) => q.id === item.id))
+        return;
+      this.queue.push(item);
+      const max = this.options.maxQueue ?? 20;
+      if (this.queue.length > max)
+        this.queue.splice(0, this.queue.length - max);
+      this.next();
+    };
+    this.onSkip = (data) => {
+      const id = typeof data.id === "string" ? data.id : undefined;
+      if (!id || this.current?.item.id === id)
+        this.skip();
+      else
+        this.queue = this.queue.filter((q) => q.id !== id);
+    };
+    this.onClear = () => this.clear();
+    pixl.on("tts.ready", this.onReady);
+    pixl.on("tts.skip", this.onSkip);
+    pixl.on("tts.clear", this.onClear);
+  }
+  skip() {
+    if (!this.current)
+      return;
+    this.current.skipped = true;
+    this.current.finish();
+  }
+  clear() {
+    this.queue = [];
+    this.skip();
+  }
+  setVolume(volume) {
+    this.volume = clampVolume(volume);
+    if (this.current?.audio)
+      this.current.audio.volume = this.volume;
+  }
+  get pending() {
+    return this.queue;
+  }
+  destroy() {
+    this.destroyed = true;
+    this.pixl.off("tts.ready", this.onReady);
+    this.pixl.off("tts.skip", this.onSkip);
+    this.pixl.off("tts.clear", this.onClear);
+    this.clear();
+  }
+  followWords(audio, item, marks) {
+    this.stopWords();
+    let next = 0;
+    const endOf = (i) => marks[i].end ?? marks[i + 1]?.start ?? (Number.isFinite(audio.duration) ? Math.round(audio.duration * 1000) : marks[i].start);
+    const tick = () => {
+      const now = audio.currentTime * 1000;
+      while (next < marks.length && marks[next].start <= now) {
+        const i = next++;
+        const word = { word: marks[i].word, index: i, start: marks[i].start, end: endOf(i) };
+        safeCall(() => this.options.onWord?.(word, item));
+      }
+      this.wordFrame = next < marks.length && !audio.ended ? schedule(tick) : null;
+    };
+    this.wordFrame = schedule(tick);
+  }
+  stopWords() {
+    if (this.wordFrame !== null)
+      cancel(this.wordFrame);
+    this.wordFrame = null;
+  }
+  async next() {
+    if (this.current || this.destroyed)
+      return;
+    const item = this.queue.shift();
+    if (!item)
+      return;
+    let done = false;
+    let resolveDone;
+    const finished = new Promise((r) => resolveDone = r);
+    const slot = {
+      item,
+      audio: null,
+      url: null,
+      skipped: false,
+      finish: () => {
+        if (done)
+          return;
+        done = true;
+        this.stopWords();
+        slot.audio?.pause();
+        if (slot.url)
+          URL.revokeObjectURL(slot.url);
+        resolveDone();
+      }
+    };
+    this.current = slot;
+    try {
+      const [blob, marks] = await Promise.all([
+        this.tts.audio(item.id),
+        this.options.onWord ? this.tts.marks(item.id).catch((e) => {
+          console.warn("[pixl] Zeitmarken nicht verfügbar, onWord bleibt für diesen Eintrag stumm:", e);
+          return;
+        }) : Promise.resolve(undefined)
+      ]);
+      if (marks)
+        item.marks = marks;
+      if (!done) {
+        slot.url = URL.createObjectURL(blob);
+        const audio = new Audio(slot.url);
+        audio.volume = this.volume;
+        audio.addEventListener("ended", slot.finish);
+        audio.addEventListener("error", slot.finish);
+        slot.audio = audio;
+        safeCall(() => this.options.onStart?.(item));
+        if (marks?.length)
+          this.followWords(audio, item, marks);
+        await audio.play().catch((e) => {
+          if (!this.warnedAutoplay && e instanceof DOMException && e.name === "NotAllowedError") {
+            this.warnedAutoplay = true;
+            console.warn("[pixl] Der Browser blockiert die Wiedergabe ohne Klick. In OBS und StreamElements passiert das nicht, im normalen Browser einmal auf die Seite klicken.");
+          }
+          slot.finish();
+        });
+      }
+    } catch (e) {
+      console.error("[pixl] TTS-Audio konnte nicht geladen werden:", e);
+      slot.finish();
+    }
+    await finished;
+    safeCall(() => this.options.onEnd?.(item, { skipped: slot.skipped }));
+    this.current = null;
+    if (this.queue.length && !this.destroyed) {
+      setTimeout(() => void this.next(), this.options.gapMs ?? 500);
+    }
+  }
+}
+function schedule(fn) {
+  return typeof requestAnimationFrame === "function" ? requestAnimationFrame(fn) : setTimeout(fn, 30);
+}
+function cancel(handle) {
+  if (typeof cancelAnimationFrame === "function")
+    cancelAnimationFrame(handle);
+  else
+    clearTimeout(handle);
+}
+function toItem(data, event) {
+  if (typeof data.id !== "string")
+    return null;
+  return {
+    id: data.id,
+    text: typeof data.text === "string" ? data.text : "",
+    voice: typeof data.voice === "string" ? data.voice : "",
+    source: typeof data.source === "string" ? data.source : "",
+    ...typeof data.eventId === "string" ? { eventId: data.eventId } : {},
+    ...data.textTruncated === true ? { textTruncated: true } : {},
+    replay: event.replay
+  };
+}
+function clampVolume(v) {
+  return Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : 1;
+}
+function safeCall(fn) {
+  try {
+    fn();
+  } catch (e) {
+    console.error("[pixl] Fehler in einem TTS-Handler:", e);
+  }
+}
+
+// src/client.ts
+class PixlApiError extends Error {
+  status;
+  problem;
+  constructor(status, message, problem) {
+    super(message);
+    this.name = "PixlApiError";
+    this.status = status;
+    this.problem = problem;
+  }
+}
+var DEFAULT_BASE_URL = "https://pixl.lennox.zip";
+var RECONNECT_DELAYS_MS = [500, 1000, 2000, 3000, 5000, 1e4];
+var WATCHDOG_MS = 45000;
+var CONNECT_TIMEOUT_MS = 15000;
+function toQueryDate(value) {
+  if (value instanceof Date)
+    return value.toISOString();
+  return String(value);
+}
+
+class Pixl {
+  static defaultBaseUrl;
+  baseUrl;
+  key;
+  tts;
+  chat;
+  handlers = new Map;
+  stateHandlers = new Map;
+  statusHandlers = new Set;
+  states = new Map;
+  _status = "closed";
+  abort = null;
+  reconnectTimer = null;
+  watchdog = null;
+  attempt = 0;
+  stopped = false;
+  logs;
+  everConnected = false;
+  lostAt = null;
+  constructor(options) {
+    if (!options?.key)
+      throw new Error("pixl: `key` fehlt (API-Schlüssel aus den Einstellungen)");
+    this.key = options.key;
+    this.logs = options.logs !== false;
+    this.baseUrl = (options.baseUrl ?? Pixl.defaultBaseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+    this.tts = new PixlTts(this);
+    this.chat = new PixlChat(this);
+    if (options.autoConnect !== false)
+      queueMicrotask(() => this.connect());
+  }
+  on(event, handler) {
+    let set = this.handlers.get(event);
+    if (!set)
+      this.handlers.set(event, set = new Set);
+    set.add(handler);
+    return this;
+  }
+  off(event, handler) {
+    this.handlers.get(event)?.delete(handler);
+    return this;
+  }
+  state(key, handler) {
+    let set = this.stateHandlers.get(key);
+    if (!set)
+      this.stateHandlers.set(key, set = new Set);
+    set.add(handler);
+    if (this.states.has(key))
+      handler(this.states.get(key), key);
+    return this;
+  }
+  offState(key, handler) {
+    this.stateHandlers.get(key)?.delete(handler);
+    return this;
+  }
+  getState(key) {
+    return this.states.get(key);
+  }
+  get status() {
+    return this._status;
+  }
+  onStatus(handler) {
+    this.statusHandlers.add(handler);
+    handler(this._status);
+    return () => this.statusHandlers.delete(handler);
+  }
+  setStatus(status) {
+    if (status === this._status)
+      return;
+    this._status = status;
+    for (const h of this.statusHandlers)
+      safeCall2(() => h(status));
+  }
+  async request(path, params = {}) {
+    const url = new URL(`${this.baseUrl}/api/v1${path}`);
+    for (const [k, v] of Object.entries(params))
+      if (v !== undefined && v !== "")
+        url.searchParams.set(k, v);
+    const res = await fetch(url, { headers: { Authorization: `Bearer ${this.key}` } });
+    if (!res.ok) {
+      const body = await res.json().catch(() => null);
+      throw new PixlApiError(res.status, body?.error ?? `HTTP ${res.status}`);
+    }
+    return await res.json();
+  }
+  async _fetch(path, init = {}) {
+    const headers = { Authorization: `Bearer ${this.key}` };
+    if (init.json !== undefined)
+      headers["Content-Type"] = "application/json";
+    const res = await fetch(`${this.baseUrl}/api/v1${path}`, {
+      method: init.method ?? "GET",
+      headers,
+      body: init.json !== undefined ? JSON.stringify(init.json) : undefined
+    });
+    if (!res.ok) {
+      const body = await res.json().catch(() => null);
+      throw new PixlApiError(res.status, body?.error ?? `HTTP ${res.status}`, body?.problem);
+    }
+    return res;
+  }
+  events(query = {}) {
+    return this.request("/events", {
+      since: query.since !== undefined ? toQueryDate(query.since) : undefined,
+      until: query.until !== undefined ? toQueryDate(query.until) : undefined,
+      types: query.types?.join(","),
+      limit: query.limit !== undefined ? String(query.limit) : undefined,
+      cursor: query.cursor
+    });
+  }
+  org() {
+    return this.request("/org");
+  }
+  subs() {
+    return this.request("/subs");
+  }
+  nowPlaying() {
+    return this.request("/spotify/now-playing");
+  }
+  static progress(nowPlaying, now = Date.now()) {
+    if (!nowPlaying.track)
+      return 0;
+    const ms = nowPlaying.playing ? nowPlaying.progressMs + (now - Date.parse(nowPlaying.at)) : nowPlaying.progressMs;
+    return Math.max(0, Math.min(ms, nowPlaying.track.durationMs));
+  }
+  streamElements(path, params = {}) {
+    const query = {};
+    for (const [k, v] of Object.entries(params))
+      query[k] = v === undefined ? undefined : String(v);
+    return this.request(`/streamelements/${path}`, query);
+  }
+  async fetchStates() {
+    const res = await this.request("/states");
+    return res.states;
+  }
+  async fetchAllEvents(query = {}) {
+    const all = [];
+    let cursor;
+    do {
+      const page = await this.events({ ...query, limit: 200, cursor });
+      all.push(...page.events);
+      cursor = page.nextCursor ?? undefined;
+    } while (cursor);
+    return all.reverse();
+  }
+  feed(options, handler) {
+    return new EventFeed(this, options, handler);
+  }
+  connect() {
+    if (this.abort)
+      return;
+    this.stopped = false;
+    this.run();
+  }
+  disconnect() {
+    this.stopped = true;
+    if (this.reconnectTimer)
+      clearTimeout(this.reconnectTimer);
+    this.reconnectTimer = null;
+    this.abort?.abort();
+    this.abort = null;
+    this.setStatus("closed");
+  }
+  async run() {
+    const abort = new AbortController;
+    this.abort = abort;
+    this.setStatus("connecting");
+    let fatal = false;
+    try {
+      this.watchdog = setTimeout(() => abort.abort(), CONNECT_TIMEOUT_MS);
+      const res = await fetch(`${this.baseUrl}/api/v1/stream`, {
+        headers: { Authorization: `Bearer ${this.key}`, Accept: "text/event-stream" },
+        signal: abort.signal,
+        cache: "no-store"
+      });
+      this.clearWatchdog();
+      if (res.status === 401 || res.status === 403) {
+        fatal = true;
+        return;
+      }
+      if (!res.ok || !res.body)
+        throw new Error(`HTTP ${res.status}`);
+      this.attempt = 0;
+      if (this.lostAt !== null)
+        this.log(`Live-Verbindung wieder da nach ${((Date.now() - this.lostAt) / 1000).toFixed(1)} s`);
+      this.lostAt = null;
+      this.everConnected = true;
+      this.setStatus("connected");
+      await this.readStream(res.body, abort, () => {
+        fatal = true;
+      });
+    } catch {} finally {
+      this.clearWatchdog();
+      if (this.abort === abort)
+        this.abort = null;
+      if (fatal) {
+        this.log("Live-Verbindung abgelehnt (Schlüssel ungültig oder widerrufen), kein neuer Versuch");
+        this.stopped = true;
+        this.setStatus("unauthorized");
+      } else if (!this.stopped) {
+        if (this.lostAt === null) {
+          this.lostAt = Date.now();
+          this.log(this.everConnected ? "Live-Verbindung getrennt, verbinde neu" : "Live-Verbindung nicht erreichbar, versuche es weiter");
+        }
+        this.setStatus("disconnected");
+        this.scheduleReconnect();
+      }
+    }
+  }
+  log(message) {
+    if (this.logs)
+      console.info(`[pixl] ${message}`);
+  }
+  scheduleReconnect() {
+    const base = RECONNECT_DELAYS_MS[Math.min(this.attempt, RECONNECT_DELAYS_MS.length - 1)];
+    this.attempt += 1;
+    const delay = base + Math.random() * base * 0.3;
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      if (!this.stopped)
+        this.connect();
+    }, delay);
+  }
+  armWatchdog(abort) {
+    this.clearWatchdog();
+    this.watchdog = setTimeout(() => abort.abort(), WATCHDOG_MS);
+  }
+  clearWatchdog() {
+    if (this.watchdog)
+      clearTimeout(this.watchdog);
+    this.watchdog = null;
+  }
+  async readStream(body, abort, onRevoked) {
+    const reader = body.getReader();
+    const decoder = new TextDecoder;
+    let buffer = "";
+    let dataLines = [];
+    this.armWatchdog(abort);
+    for (;; ) {
+      const { value, done } = await reader.read();
+      if (done)
+        return;
+      this.armWatchdog(abort);
+      buffer += decoder.decode(value, { stream: true });
+      let newline;
+      while ((newline = buffer.indexOf(`
+`)) >= 0) {
+        const line = buffer.slice(0, newline).replace(/\r$/, "");
+        buffer = buffer.slice(newline + 1);
+        if (line === "") {
+          if (dataLines.length) {
+            const message = dataLines.join(`
+`);
+            dataLines = [];
+            if (this.dispatch(message) === "revoked") {
+              onRevoked();
+              await reader.cancel().catch(() => {});
+              return;
+            }
+          }
+        } else if (line.startsWith("data:")) {
+          dataLines.push(line.slice(5).replace(/^ /, ""));
+        }
+      }
+    }
+  }
+  dispatch(raw) {
+    let msg;
+    try {
+      msg = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    if (msg.event === "api_key.revoked")
+      return "revoked";
+    if (msg.event === "state.snapshot") {
+      const list = msg.data?.states ?? [];
+      for (const { key, value } of list)
+        this.setState(key, value);
+      return;
+    }
+    if (msg.event === "state.updated") {
+      const { key, value } = msg.data;
+      if (typeof key === "string")
+        this.setState(key, value);
+      return;
+    }
+    const event = {
+      event: msg.event,
+      data: msg.data ?? {},
+      replay: !!msg.replay,
+      id: msg.id,
+      at: msg.at
+    };
+    this.emit(event);
+  }
+  emit(event) {
+    if (event.event === "twitch.chat_message" && typeof event.data.text === "string" && event.data.html === undefined) {
+      event.data.html = chatHtml(event.data.text, event.data.emotes);
+    }
+    for (const h of this.handlers.get(event.event) ?? [])
+      safeCall2(() => h(event.data, event));
+    for (const h of this.handlers.get("*") ?? [])
+      safeCall2(() => h(event.data, event));
+  }
+  setState(key, value) {
+    this.states.set(key, value);
+    for (const h of this.stateHandlers.get(key) ?? [])
+      safeCall2(() => h(value, key));
+  }
+}
+function safeCall2(fn) {
+  try {
+    fn();
+  } catch (e) {
+    console.error("[pixl] Fehler in einem Handler:", e);
+  }
+}
+export {
+  CHAT_CSS,
+  EventFeed,
+  Pixl,
+  PixlApiError,
+  PixlChat,
+  PixlTts,
+  TtsPlayer,
+  badgesHtml,
+  chatHtml,
+  emoteUrl,
+  escapeHtml,
+  paintCss
+};