every-channel/every.channel
1
0
Fork 0
Code Releases Activity Actions 2

web: lazy-load hang element so query params still initialize

Browse source
This commit is contained in:
every.channel 2026-02-20 22:43:32 -08:00
parent 6d39ecb3bf
commit 88dc52dd69
No known key found for this signature in database
1 changed files with 29 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

36
apps/web/app.js
View file

@ -3,10 +3,9 @@
// This uses the upstream hang web component (WebTransport + WebCodecs). // This uses the upstream hang web component (WebTransport + WebCodecs).
// It is intentionally dependency-light: no framework, no bundler. // It is intentionally dependency-light: no framework, no bundler.
// Use an ESM CDN that rewrites bare module specifiers.
import "https://esm.sh/@kixelated/hang@0.7.4/watch/element.js";
const DEFAULT_RELAY_URL = "https://interop-relay.cloudflare.mediaoverquic.com/"; const DEFAULT_RELAY_URL = "https://interop-relay.cloudflare.mediaoverquic.com/";
const HANG_WATCH_MODULE_URL = "https://esm.sh/@kixelated/hang@0.7.4/watch/element.js";
let hangWatchModulePromise = null;
function $(id) { function $(id) {
const el = document.getElementById(id); const el = document.getElementById(id);
@ -65,6 +64,17 @@ function mountPlayer(relayUrl, name) {
mount.appendChild(watch); mount.appendChild(watch);
} }
async function ensureHangWatchElement() {
if (window.customElements && window.customElements.get("hang-watch")) return;
if (!hangWatchModulePromise) {
hangWatchModulePromise = import(HANG_WATCH_MODULE_URL);
}
await hangWatchModulePromise;
if (!(window.customElements && window.customElements.get("hang-watch"))) {
throw new Error("hang-watch custom element is unavailable");
}
}
async function copyToClipboard(text) { async function copyToClipboard(text) {
if (!text) return; if (!text) return;
if (navigator.clipboard && navigator.clipboard.writeText) { if (navigator.clipboard && navigator.clipboard.writeText) {
@ -122,7 +132,7 @@ function main() {
setShareLink(currentShareLink(relayUrl, name)); setShareLink(currentShareLink(relayUrl, name));
} }
function start() { async function start() {
const relayUrl = normalizeRelayUrl(relayInput.value); const relayUrl = normalizeRelayUrl(relayInput.value);
const name = normalizeName(nameInput.value); const name = normalizeName(nameInput.value);
@ -141,6 +151,16 @@ function main() {
return; return;
} }
try {
await ensureHangWatchElement();
} catch (e) {
setHint(
`Failed to load web player dependency: ${String(e)}. Disable script blockers for esm.sh and retry.`,
"warn",
);
return;
}
writeParams(relayUrl, name); writeParams(relayUrl, name);
setHint(`Connecting to relay and subscribing: ${name}`, "ok"); setHint(`Connecting to relay and subscribing: ${name}`, "ok");
mountPlayer(relayUrl, name); mountPlayer(relayUrl, name);
@ -149,9 +169,11 @@ function main() {
relayInput.addEventListener("input", updateSharePreview); relayInput.addEventListener("input", updateSharePreview);
nameInput.addEventListener("input", updateSharePreview); nameInput.addEventListener("input", updateSharePreview);
watchBtn.addEventListener("click", start); watchBtn.addEventListener("click", () => {
void start();
});
nameInput.addEventListener("keydown", (e) => { nameInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") start(); if (e.key === "Enter") void start();
}); });
copyBtn.addEventListener("click", async () => { copyBtn.addEventListener("click", async () => {
@ -175,7 +197,7 @@ function main() {
updateSharePreview(); updateSharePreview();
// Auto-start if a name was provided. // Auto-start if a name was provided.
if (initial.name) start(); if (initial.name) void start();
} }
main(); main();