width cap

2026-05-29 22:46:56 +10:00
parent 4595e782c8
commit a88306aec7
7 changed files with 575 additions and 20 deletions
--- a/test/providers.test.js
+++ b/test/providers.test.js
@@ -32,9 +32,16 @@ test("flattens providers and finds a matching provider", () => {
 });

 test("builds oEmbed provider request URLs", () => {
-  const url = buildOembedUrl("https://example.com/oembed", "https://video.example.com/watch?id=1", 1280);
+  const url = buildOembedUrl("https://example.com/oembed", "https://video.example.com/watch?id=1", 500, 480);

  assert.equal(url.searchParams.get("url"), "https://video.example.com/watch?id=1");
  assert.equal(url.searchParams.get("format"), "json");
-  assert.equal(url.searchParams.get("maxwidth"), "1280");
+  assert.equal(url.searchParams.get("maxwidth"), "500");
+  assert.equal(url.searchParams.get("maxheight"), "480");
+});
+
+test("caps all oEmbed maxwidth values to 500", () => {
+  const url = buildOembedUrl("https://example.com/oembed", "https://video.example.com/watch?id=1", 1280);
+
+  assert.equal(url.searchParams.get("maxwidth"), "500");
 });
--- a/test/templates.test.js
+++ b/test/templates.test.js
@@ -0,0 +1,186 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { graphicPage, prepareEmbedHtml } from "../src/templates.js";
+
+test("adds autoplay parameters and permissions to iframe embeds", () => {
+  const html = prepareEmbedHtml('<iframe src="https://player.example.com/video?id=1"></iframe>');
+
+  assert.match(html, /allow="autoplay; fullscreen; picture-in-picture"/);
+  assert.match(html, /autoplay=1/);
+  assert.match(html, /playsinline=1/);
+  assert.match(html, /mute=1/);
+  assert.match(html, /muted=1/);
+});
+
+test("adds autoplay attributes to video tags", () => {
+  const html = prepareEmbedHtml('<video src="https://cdn.example.com/video.mp4"></video>');
+
+  assert.match(html, /<video\b[^>]*playsinline/);
+  assert.match(html, /<video\b[^>]*autoplay/);
+  assert.match(html, /<video\b[^>]*muted/);
+});
+
+test("marks transparent graphic documents at the html and body level", () => {
+  const page = graphicPage({
+    targetUrl: "https://example.com/video",
+    embed: {
+      type: "video",
+      html: '<iframe src="https://player.example.com/video"></iframe>',
+    },
+    width: 1920,
+    height: 1080,
+    fit: "contain",
+    transparent: true,
+    scale: 1,
+    chroma: "#00ff00",
+  });
+
+  assert.match(page, /<html lang="en" class="graphic-document transparent">/);
+  assert.match(page, /<body class="graphic transparent is-loading"/);
+});
+
+test("includes readiness script when wait mode is enabled", () => {
+  const page = graphicPage({
+    targetUrl: "https://example.com/video",
+    embed: {
+      type: "video",
+      html: '<iframe src="https://player.example.com/video"></iframe>',
+    },
+    width: 1920,
+    height: 1080,
+    fit: "contain",
+    transparent: true,
+    scale: 1,
+    chroma: "#00ff00",
+    wait: true,
+  });
+
+  assert.match(page, /new MutationObserver/);
+  assert.match(page, /node\.querySelectorAll\("iframe, img, video"\)/);
+  assert.match(page, /body\.classList\.add\("is-ready"\)/);
+});
+
+test("includes configurable reveal delay values", () => {
+  const page = graphicPage({
+    targetUrl: "https://example.com/video",
+    embed: {
+      type: "video",
+      html: '<iframe src="https://player.example.com/video"></iframe>',
+    },
+    width: 1920,
+    height: 1080,
+    fit: "contain",
+    transparent: true,
+    scale: 1,
+    chroma: "#00ff00",
+    wait: true,
+    readyDelay: 2500,
+    maxWait: 15000,
+  });
+
+  assert.match(page, /const readyDelay = 2500;/);
+  assert.match(page, /const maxWait = 15000;/);
+});
+
+test("can render immediately when wait mode is disabled", () => {
+  const page = graphicPage({
+    targetUrl: "https://example.com/video",
+    embed: {
+      type: "video",
+      html: '<iframe src="https://player.example.com/video"></iframe>',
+    },
+    width: 1920,
+    height: 1080,
+    fit: "contain",
+    transparent: true,
+    scale: 1,
+    chroma: "#00ff00",
+    wait: false,
+  });
+
+  assert.match(page, /<body class="graphic transparent is-ready"/);
+  assert.doesNotMatch(page, /document\.querySelectorAll/);
+});
+
+test("includes autoplay assist when autoplay is enabled", () => {
+  const page = graphicPage({
+    targetUrl: "https://example.com/video",
+    embed: {
+      type: "video",
+      html: '<blockquote class="twitter-tweet"></blockquote>',
+    },
+    width: 1920,
+    height: 1080,
+    fit: "contain",
+    transparent: true,
+    scale: 1,
+    chroma: "#00ff00",
+    autoplay: true,
+  });
+
+  assert.match(page, /const playVideo = \(video\) =>/);
+  assert.match(page, /iframe\.contentDocument\.querySelectorAll\("video"\)/);
+  assert.match(page, /Cross-origin provider frames cannot be inspected/);
+});
+
+test("adds a provider class for Bluesky embeds", () => {
+  const page = graphicPage({
+    targetUrl: "https://bsky.app/profile/example.com/post/abc",
+    embed: {
+      provider_name: "Bluesky",
+      type: "rich",
+      width: 600,
+      height: 480,
+      html: '<blockquote class="bluesky-embed"></blockquote>',
+    },
+    width: 1920,
+    height: 1080,
+    fit: "contain",
+    transparent: true,
+    scale: 1,
+    chroma: "#00ff00",
+  });
+
+  assert.match(page, /<section class="embed provider-bluesky"/);
+  assert.match(page, /--embed-width:500px;--embed-height:480px/);
+});
+
+test("caps rendered embed width at 500px", () => {
+  const page = graphicPage({
+    targetUrl: "https://example.com/video",
+    embed: {
+      provider_name: "Example",
+      type: "rich",
+      width: 1200,
+      html: '<iframe src="https://player.example.com/video"></iframe>',
+    },
+    width: 1920,
+    height: 1080,
+    fit: "contain",
+    transparent: true,
+    scale: 1,
+    chroma: "#00ff00",
+  });
+
+  assert.match(page, /--embed-width:500px/);
+});
+
+test("omits autoplay assist when autoplay is disabled", () => {
+  const page = graphicPage({
+    targetUrl: "https://example.com/video",
+    embed: {
+      type: "video",
+      html: '<video src="https://cdn.example.com/video.mp4"></video>',
+    },
+    width: 1920,
+    height: 1080,
+    fit: "contain",
+    transparent: true,
+    scale: 1,
+    chroma: "#00ff00",
+    autoplay: false,
+  });
+
+  assert.doesNotMatch(page, /const playVideo = \(video\) =>/);
+});