// ─────────────────────────────────────────────────────────────
const ENVS = [
{
key: "yori",
label: "Yori",
src: "https://yori.thumpn.dev/embed.js",
eventId: "evt-YQNCWN",
token: "DdYeSKJ_n6rzcPcvKRRYzHYkqzw1T1nrDC9A_73RX3M",
},
{
key: "curtains",
label: "Curtains",
src: "", // e.g. https://curtains.thumpn.dev/embed.js
eventId: "",
token: "",
},
{
key: "preprod",
label: "Preprod",
src: "", // e.g. https://preprod.thumpn.com/embed.js
eventId: "",
token: "",
},
{
key: "prod",
label: "Prod",
src: "", // e.g. https://thumpn.com/embed.js
eventId: "",
token: "",
},
];
const isConfigured = (e) => Boolean(e.src && e.eventId && e.token);
const tabsEl = document.getElementById("tabs");
const mountEl = document.getElementById("mount");
const metaEl = document.getElementById("meta");
function mount(env) {
// Tear down whatever was mounted (iframe + any injected script).
mountEl.innerHTML = "";
if (!isConfigured(env)) {
metaEl.innerHTML = "";
const empty = document.createElement("div");
empty.className = "empty";
empty.innerHTML =
"No embed configured for " + env.label + " yet
" +
"Add this env's src, eventId, and " +
"token to the ENVS config in this page.
";
mountEl.appendChild(empty);
return;
}
metaEl.innerHTML =
"" + env.label + " · " + env.src +
" · event " + env.eventId + "";
// Re-inject the embed script fresh so embed.js mounts its iframe
// into this container (same pattern the demo pages use).
const s = document.createElement("script");
s.src = env.src;
s.setAttribute("data-event-id", env.eventId);
s.setAttribute("data-embed-token", env.token);
s.defer = true;
mountEl.appendChild(s);
}
function selectTab(key) {
const env = ENVS.find((e) => e.key === key) || ENVS[0];
[...tabsEl.children].forEach((btn) => {
btn.setAttribute("aria-selected", String(btn.dataset.key === env.key));
});
mount(env);
}
// Build the tab bar.
ENVS.forEach((env, i) => {
const btn = document.createElement("button");
btn.className = "tab";
btn.setAttribute("role", "tab");
btn.dataset.key = env.key;
btn.dataset.configured = String(isConfigured(env));
btn.setAttribute("aria-selected", String(i === 0));
btn.innerHTML = env.label + '';
btn.addEventListener("click", () => selectTab(env.key));
tabsEl.appendChild(btn);
});
// Mount the first env on load.
selectTab(ENVS[0].key);