// cms-perf.jsx
// ─────────────────────────────────────────────────────────────────────────
// Media Performance — an admin-only diagnostic that measures how the site's
// real media (hero video, project covers, reel images/videos, headshots,
// service images) actually loads from R2, at whatever connection you open it on.
//
// It does ACTIVE measurement: each asset is fetched fresh with cache-busting +
// no-store, so you get a true COLD-load size and time (not a cached 0ms). It
// runs with small concurrency to mimic a browser, reports per-asset + totals,
// flags heavy/slow items, and can pop out to a standalone window for sharing.
//
// Exposes window.MediaPerf({ doc, onClose }). Load after React, before the app.
// ─────────────────────────────────────────────────────────────────────────
(function () {
const { useState, useRef, useEffect } = React;
// ── Collect every external media URL in the document, tagged by role ──
function collectMedia(doc) {
const out = [];
const seen = new Set();
const push = (url, role, label, kind) => {
if (!url || typeof url !== "string" || url.startsWith("data:")) return;
if (seen.has(url)) return;
seen.add(url);
out.push({ url, role, label: label || "—", kind });
};
(doc && doc.modules || []).forEach((m) => {
const c = m.content || {};
if (m.type === "hero") push(c.videoUrl, "Hero video", "Hero", "video");
if (m.type === "work") (c.projects || []).forEach((p) => {
push(p.cover && p.cover.url, "Cover", p.title, "image");
push(p.video, "Project video", p.title, "video");
(p.gallery || []).forEach((g, i) => push(g.url, g.type === "video" ? "Reel video" : "Reel image", (p.title || "Project") + " · " + (i + 1), g.type === "video" ? "video" : "image"));
});
if (m.type === "about") (c.team || []).forEach((t) => push(t.headshot && t.headshot.url, "Headshot", t.name, "image"));
if (m.type === "services") (c.items || []).forEach((s) => push(s.image && s.image.url, "Service image", s.label, "image"));
});
return out;
}
// ── Fetch one asset fresh; return real bytes + wall time ──────────
async function measureAsset(a) {
const bust = a.url + (a.url.includes("?") ? "&" : "?") + "_perf=" + Date.now();
const t0 = performance.now();
try {
const res = await fetch(bust, { cache: "no-store", mode: "cors" });
if (!res.ok) return { ...a, ok: false, bytes: 0, ms: performance.now() - t0, note: "HTTP " + res.status };
const buf = await res.arrayBuffer();
return { ...a, ok: true, bytes: buf.byteLength, ms: performance.now() - t0 };
} catch (e) {
// CORS or network failure — can't measure from the browser.
return { ...a, ok: false, bytes: 0, ms: performance.now() - t0, note: "blocked" };
}
}
// ── Small concurrency pool ────────────────────────────────────────
async function runPool(items, worker, concurrency, onProgress) {
const results = new Array(items.length);
let idx = 0, done = 0;
async function next() {
const i = idx++;
if (i >= items.length) return;
results[i] = await worker(items[i]);
done++; if (onProgress) onProgress(done);
return next();
}
await Promise.all(Array.from({ length: Math.min(concurrency, items.length) }, next));
return results;
}
// ── Formatting ────────────────────────────────────────────────────
const fmtBytes = (b) => {
if (!b) return "—";
if (b < 1024) return b + " B";
if (b < 1024 * 1024) return (b / 1024).toFixed(0) + " KB";
return (b / 1024 / 1024).toFixed(2) + " MB";
};
const fmtMs = (ms) => (ms >= 1000 ? (ms / 1000).toFixed(2) + " s" : Math.round(ms) + " ms");
const fmtMbps = (bytes, ms) => (!bytes || !ms ? "—" : ((bytes * 8) / (ms / 1000) / 1e6).toFixed(1) + " Mbps");
// Severity: images judged on weight; anything judged on time.
function severity(r) {
if (!r.ok) return "bad";
if (r.kind === "image" && r.bytes > 1.5 * 1024 * 1024) return "bad";
if (r.kind === "image" && r.bytes > 500 * 1024) return "warn";
if (r.kind === "video" && r.bytes > 25 * 1024 * 1024) return "bad";
if (r.kind === "video" && r.bytes > 10 * 1024 * 1024) return "warn";
if (r.ms > 2500) return "warn";
return "ok";
}
// ── Pop-out standalone report ─────────────────────────────────────
function popOut(rows, totals) {
const w = window.open("", "_blank", "width=820,height=900");
if (!w) { alert("Pop-out was blocked by the browser. Allow popups for this site."); return; }
const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ "&": "&", "<": "<", ">": ">" }[c]));
const tr = rows.map((r) => `| ${esc(r.role)} | ${esc(r.label)} | ${r.kind} | ${r.ok ? fmtBytes(r.bytes) : (r.note || "—")} | ${fmtMs(r.ms)} | ${r.ok ? fmtMbps(r.bytes, r.ms) : "—"} |
`).join("");
w.document.write(`Flairground — Media performance
Media performance
Flairground — cold-load measurement · ${new Date().toLocaleString()}
${totals.count}Assets
${fmtBytes(totals.bytes)}Total weight
${fmtMs(totals.wall)}Load time
${fmtMbps(totals.bytes, totals.wall)}Throughput
| Role | Label | Type | Size | Time | Speed |
|---|
${tr}
Measured from this device's connection. Times are cold (cache-busted). Cross-origin assets without CORS read as “blocked”.
`);
w.document.close();
}
// ── The panel ─────────────────────────────────────────────────────
function MediaPerf({ doc, onClose }) {
const assets = useRef(collectMedia(doc)).current;
const [rows, setRows] = useState(null);
const [running, setRunning] = useState(false);
const [progress, setProgress] = useState(0);
const [totals, setTotals] = useState(null);
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape" && !running) onClose(); };
window.addEventListener("keydown", onKey);
const prev = document.body.style.overflow; document.body.style.overflow = "hidden";
return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
}, [running, onClose]);
const run = async () => {
setRunning(true); setProgress(0); setRows(null); setTotals(null);
const wall0 = performance.now();
const res = await runPool(assets, measureAsset, 4, (d) => setProgress(d));
const wall = performance.now() - wall0;
res.sort((a, b) => (b.bytes || 0) - (a.bytes || 0));
const okRows = res.filter((r) => r.ok);
const bytes = okRows.reduce((s, r) => s + r.bytes, 0);
setRows(res);
setTotals({ count: res.length, ok: okRows.length, bytes, wall });
setRunning(false);
};
return (
{ if (!running) onClose(); }}>
e.stopPropagation()}>
Media performance
{assets.length} asset{assets.length === 1 ? "" : "s"} · cold-load test from this device
{totals && }
{totals && (
{totals.count}Assets
{fmtBytes(totals.bytes)}Total weight
{fmtMs(totals.wall)}Load time
{fmtMbps(totals.bytes, totals.wall)}Throughput
)}
{!rows && !running && (
Fetches every media file fresh (cache-busted) to measure its real size and load time at your current connection speed.
Each file is downloaded once — on a slow link a large hero video may take a moment.
)}
{running && (
Measuring… {progress} / {assets.length}
)}
{rows && (
| Role | Label | Size | Time | Speed |
|---|
{rows.map((r, i) => (
| {r.role} |
{r.label} |
{r.ok ? fmtBytes(r.bytes) : {r.note || "—"}} |
{fmtMs(r.ms)} |
{r.ok ? fmtMbps(r.bytes, r.ms) : "—"} |
))}
)}
{rows && totals && (
{totals.ok < totals.count ? `${totals.count - totals.ok} blocked · ` : ""}
Heaviest: {rows[0] && rows[0].ok ? `${rows[0].label} (${fmtBytes(rows[0].bytes)})` : "—"}
)}