import test from "node:test"; import assert from "node:assert/strict"; import { casparTemplatePage, collagePage, graphicPage, homePage, prepareEmbedHtml } from "../dist/src/templates.js"; test("adds autoplay parameters and permissions to iframe embeds", () => { const html = prepareEmbedHtml(''); 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("home page includes single graphic and collage forms", () => { const page = homePage({ providersCount: 12 }); assert.match(page, /

/); assert.match(page, //); assert.match(page, /

{
  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/);
  assert.doesNotMatch(page, /collage-card provider-example"[^>]*--embed-height/);
});

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\) =>/);
});

test("renders a CasparCG template shell", () => {
  const page = casparTemplatePage();

assert.match(page, /<body class="graphic transparent is-loading"/);
  assert.match(page, /<section class="embed provider-empty"/);
  assert.match(page, /<script type="module" src="\/caspar\.js"><\/script>/);
});

test("renders a vertical scrolling collage page with repeated embed cards", () => {
  const page = collagePage({
    items: [
      {
        targetUrl: "https://example.com/post/1",
        embed: {
          provider_name: "Example",
          type: "rich",
          width: 700,
          height: 480,
          html: '<iframe src="https://player.example.com/1"></iframe>',
        },
      },
      {
        targetUrl: "https://example.com/post/2",
        embed: {
          provider_name: "Example",
          type: "rich",
          width: 500,
          height: 480,
          html: '<iframe src="https://player.example.com/2"></iframe>',
        },
      },
    ],
    width: 1920,
    height: 1080,
    transparent: true,
    chroma: "#00ff00",
    spacing: 48,
    fade: 0,
    columns: 3,
    repeatDistance: 900,
    duration: 360,
    repeat: 3,
    shuffle: false,
  });

assert.match(page, /class="graphic collage-page transparent is-ready"/);
  assert.match(page, /--collage-spacing:48px/);
  assert.match(page, /--collage-fade:0px/);
  assert.match(page, /--collage-columns:3/);
  assert.match(page, /--collage-card-width:576px/);
  assert.match(page, /--collage-duration:360s/);
  assert.match(page, /<div class="collage-track"><\/div>/);
  assert.match(page, /<script id="collage-data" type="application\/json">/);
  assert.match(page, /"cardWidth":576/);
  assert.match(page, /"columns":3/);
  assert.match(page, /"repeatDistance":900/);
  assert.match(page, /"hydrateDelay":180/);
  assert.match(page, /"repeat":3/);
  assert.match(page, /"shuffle":false/);
  assert.match(page, /<script type="module" src="\/collage\.js"><\/script>/);
});

test("shrinks collage card width to fit the configured screen width", () => {
  const page = collagePage({
    items: [
      {
        targetUrl: "https://example.com/post/1",
        embed: {
          provider_name: "Example",
          type: "rich",
          width: 500,
          height: 480,
          html: '<iframe src="https://player.example.com/1"></iframe>',
        },
      },
    ],
    width: 1280,
    height: 720,
    transparent: true,
    chroma: "#00ff00",
    spacing: 48,
    columns: 4,
    duration: 360,
    repeat: 2,
    shuffle: false,
  });

assert.match(page, /--collage-card-width:260px/);
  assert.match(page, /"cardWidth":260/);
});