initial commit

2026-05-29 22:24:09 +10:00
parent b667f143ab
commit 4595e782c8
13 changed files with 823 additions and 1 deletions
--- a/src/templates.js
+++ b/src/templates.js
@@ -0,0 +1,90 @@
+function escapeHtml(value = "") {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function commonHead({ title = "oEmbed Graphics" } = {}) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(title)}</title>
+  <link rel="stylesheet" href="/styles.css">
+</head>`;
+}
+
+export function homePage({ providersCount = 0 } = {}) {
+  return `${commonHead()}
+<body class="app">
+  <main class="shell">
+    <section class="panel">
+      <h1>oEmbed Graphics</h1>
+      <form action="/graphic" method="get">
+        <label for="url">Source URL</label>
+        <div class="row">
+          <input id="url" name="url" type="url" required placeholder="https://www.youtube.com/watch?v=..." autocomplete="off">
+          <button type="submit">Load</button>
+        </div>
+        <div class="controls">
+          <label>Width <input name="width" type="number" value="1920" min="320" max="3840"></label>
+          <label>Height <input name="height" type="number" value="1080" min="240" max="2160"></label>
+          <label>Fit
+            <select name="fit">
+              <option value="contain">contain</option>
+              <option value="cover">cover</option>
+            </select>
+          </label>
+          <label><input name="transparent" value="1" type="checkbox" checked> transparent</label>
+        </div>
+      </form>
+      <p>${providersCount} provider URL patterns loaded. Use <code>/graphic?url=...</code> from CasparCG, OBS Browser Source, or OGraf.</p>
+    </section>
+  </main>
+</body>
+</html>`;
+}
+
+export function graphicPage({
+  targetUrl,
+  embed,
+  width,
+  height,
+  fit,
+  transparent,
+  scale,
+  chroma,
+}) {
+  const title = embed.title || embed.provider_name || "oEmbed Graphic";
+  const html = embed.html || "";
+  const media = embed.type === "photo" && embed.url
+    ? `<img src="${escapeHtml(embed.url)}" alt="${escapeHtml(title)}">`
+    : html;
+
+  return `${commonHead({ title })}
+<body class="graphic ${transparent ? "transparent" : ""}" style="--stage-width:${width}px; --stage-height:${height}px; --scale:${scale}; --chroma:${escapeHtml(chroma)};">
+  <main class="stage fit-${escapeHtml(fit)}">
+    <section class="embed" data-source="${escapeHtml(targetUrl)}">
+      ${media}
+    </section>
+  </main>
+</body>
+</html>`;
+}
+
+export function errorPage(message, status = 500) {
+  return `${commonHead({ title: `Error ${status}` })}
+<body class="app">
+  <main class="shell">
+    <section class="panel error">
+      <h1>Error ${status}</h1>
+      <p>${escapeHtml(message)}</p>
+    </section>
+  </main>
+</body>
+</html>`;
+}