every.channel/apps/web/app.js

// every.channel web watcher
//
// This uses the upstream moq watch web component (WebTransport + WebCodecs).
// It is intentionally dependency-light: no framework, no bundler.

const DEFAULT_RELAY_URL = "https://cdn.moq.dev/anon";
const MOQ_WATCH_MODULE_URL = "https://esm.sh/@moq/watch@0.1.1/element";
let moqWatchModulePromise = null;
let disposePlayerSignals = null;

function $(id) {
  const el = document.getElementById(id);
  if (!el) throw new Error(`missing element: ${id}`);
  return el;
}

function normalizeRelayUrl(s) {
  const trimmed = (s || "").trim();
  if (!trimmed) return DEFAULT_RELAY_URL;
  // Ensure trailing slash so relative fetches behave consistently.
  return trimmed.endsWith("/") ? trimmed : `${trimmed}/`;
}

function normalizeName(s) {
  return (s || "").trim();
}

function currentShareLink(relayUrl, name) {
  const u = new URL(window.location.href);
  u.pathname = "/watch";
  u.searchParams.set("url", relayUrl);
  u.searchParams.set("name", name);
  // Avoid leaking other params.
  for (const k of [...u.searchParams.keys()]) {
    if (k !== "url" && k !== "name") u.searchParams.delete(k);
  }
  return u.toString();
}

function setHint(text, kind) {
  const el = $("hint");
  el.textContent = text || "";
  el.dataset.kind = kind || "";
}

function setShareLink(text) {
  const el = $("shareLink");
  el.textContent = text || "";
}

function clearPlayerSignals() {
  if (typeof disposePlayerSignals === "function") {
    disposePlayerSignals();
  }
  disposePlayerSignals = null;
}

function bindPlayerSignals(watch, name) {
  const cleanup = [];
  let offlineTimer = null;

  const clearOfflineTimer = () => {
    if (offlineTimer) {
      window.clearTimeout(offlineTimer);
      offlineTimer = null;
    }
  };

  const maybeWatch = (signal, onValue) => {
    if (!signal || typeof signal.watch !== "function") return;
    const dispose = signal.watch(onValue);
    if (typeof dispose === "function") cleanup.push(dispose);
  };

  let sawLoading = false;
  maybeWatch(watch?.broadcast?.status, (status) => {
    if (status === "loading") {
      clearOfflineTimer();
      sawLoading = true;
      setHint(`Connecting to relay and subscribing: ${name}`, "ok");
      return;
    }
    if (status === "live") {
      clearOfflineTimer();
      setHint(`Live: subscribed to ${name}`, "ok");
      return;
    }
    if (status === "offline" && sawLoading) {
      clearOfflineTimer();
      // Avoid flashing a false negative during short reconnect windows.
      offlineTimer = window.setTimeout(() => {
        setHint(`Connection interrupted, retrying: ${name}`, "warn");
        offlineTimer = null;
      }, 8000);
    }
  });

  maybeWatch(watch?.broadcast?.catalog, (catalog) => {
    if (!catalog) return;
    const hasVideo = Boolean(catalog.video && catalog.video.renditions);
    const hasAudio = Boolean(catalog.audio && catalog.audio.renditions);
    if (hasVideo || hasAudio) {
      setHint(`Live: subscribed to ${name}`, "ok");
    }
  });

  if (cleanup.length) {
    disposePlayerSignals = () => {
      clearOfflineTimer();
      for (const fn of cleanup) {
        try {
          fn();
        } catch (_) {
          // Best-effort cleanup only.
        }
      }
    };
  }
}

function mountPlayer(relayUrl, name) {
  clearPlayerSignals();

  const mount = $("playerMount");
  mount.textContent = "";

  const watch = document.createElement("moq-watch");
  watch.setAttribute("url", relayUrl);
  watch.setAttribute("path", name);
  watch.setAttribute("reload", "");

  // A canvas enables video rendering. Without it, only audio is played.
  const canvas = document.createElement("canvas");
  canvas.className = "canvas";
  watch.appendChild(canvas);

  mount.appendChild(watch);
  bindPlayerSignals(watch, name);
}

async function ensureMoqWatchElement() {
  if (window.customElements && window.customElements.get("moq-watch")) return;
  if (!moqWatchModulePromise) {
    moqWatchModulePromise = import(MOQ_WATCH_MODULE_URL);
  }
  await moqWatchModulePromise;
  if (!(window.customElements && window.customElements.get("moq-watch"))) {
    throw new Error("moq-watch custom element is unavailable");
  }
}

async function copyToClipboard(text) {
  if (!text) return;
  if (navigator.clipboard && navigator.clipboard.writeText) {
    await navigator.clipboard.writeText(text);
    return;
  }
  // Fallback: best-effort.
  const ta = document.createElement("textarea");
  ta.value = text;
  document.body.appendChild(ta);
  ta.select();
  document.execCommand("copy");
  document.body.removeChild(ta);
}

function readParams() {
  const u = new URL(window.location.href);
  // Accept legacy/share-link aliases for compatibility.
  const relay =
    u.searchParams.get("url") ||
    u.searchParams.get("relay") ||
    u.searchParams.get("relayUrl");
  const name =
    u.searchParams.get("name") ||
    u.searchParams.get("broadcast");
  return {
    relayUrl: normalizeRelayUrl(relay || DEFAULT_RELAY_URL),
    name: normalizeName(name || ""),
  };
}

function writeParams(relayUrl, name) {
  const u = new URL(window.location.href);
  u.pathname = "/watch";
  u.searchParams.set("url", relayUrl);
  u.searchParams.set("name", name);
  // Canonicalize by dropping stale aliases/extra params.
  for (const k of [...u.searchParams.keys()]) {
    if (k !== "url" && k !== "name") u.searchParams.delete(k);
  }
  window.history.replaceState({}, "", u.toString());
}

function hasWebTransport() {
  return typeof window.WebTransport !== "undefined";
}

function main() {
  const relayInput = $("relayUrl");
  const nameInput = $("broadcastName");
  const watchBtn = $("watchBtn");
  const copyBtn = $("copyLinkBtn");

  const initial = readParams();
  relayInput.value = initial.relayUrl;
  nameInput.value = initial.name;

  function updateSharePreview() {
    const relayUrl = normalizeRelayUrl(relayInput.value);
    const name = normalizeName(nameInput.value);
    if (!name) {
      setShareLink("");
      return;
    }
    setShareLink(currentShareLink(relayUrl, name));
  }

  async function start() {
    const relayUrl = normalizeRelayUrl(relayInput.value);
    const name = normalizeName(nameInput.value);

    updateSharePreview();

    if (!name) {
      setHint("Enter a broadcast name to watch.", "warn");
      return;
    }

    if (!hasWebTransport()) {
      setHint(
        "WebTransport is not available in this browser. Try Chrome or Firefox Nightly. Safari support is still incomplete.",
        "warn",
      );
      return;
    }

    try {
      await ensureMoqWatchElement();
    } catch (e) {
      setHint(
        `Failed to load MoQ web player dependency: ${String(e)}. Disable script blockers for esm.sh and retry.`,
        "warn",
      );
      return;
    }

    writeParams(relayUrl, name);
    setHint(`Connecting to relay and subscribing: ${name}`, "ok");
    mountPlayer(relayUrl, name);
  }

  relayInput.addEventListener("input", updateSharePreview);
  nameInput.addEventListener("input", updateSharePreview);

  watchBtn.addEventListener("click", () => {
    void start();
  });
  nameInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") void start();
  });

  copyBtn.addEventListener("click", async () => {
    const relayUrl = normalizeRelayUrl(relayInput.value);
    const name = normalizeName(nameInput.value);
    if (!name) {
      setHint("Enter a broadcast name first.", "warn");
      return;
    }
    const link = currentShareLink(relayUrl, name);
    try {
      await copyToClipboard(link);
      setHint("Link copied.", "ok");
      setShareLink(link);
    } catch (e) {
      setHint(`Copy failed: ${String(e)}`, "warn");
      setShareLink(link);
    }
  });

  updateSharePreview();

  // Auto-start if a name was provided.
  if (initial.name) void start();
}

main();