@anthusai/papyrus 1.0.0-next.4 → 1.0.0-next.6

package/amplify/data/resource.js

@@ -493,6 +493,12 @@ const schema = a.schema({
         .returns(a.json())
         .authorization((allow) => [allow.groups(contentWriteGroups)])
         .handler(a.handler.function(contentActions)),
+    requestStagingBuild: a
+        .mutation()
+        .arguments({ input: a.json().required() })
+        .returns(a.json())
+        .authorization((allow) => [allow.groups(contentWriteGroups)])
+        .handler(a.handler.function(contentActions)),
     knowledgeQuery: a
         .query()
         .arguments({

package/amplify/data/resource.ts

@@ -537,6 +537,13 @@ const schema = a.schema({
     .authorization((allow) => [allow.groups(contentWriteGroups)])
     .handler(a.handler.function(contentActions)),
 
+  requestStagingBuild: a
+    .mutation()
+    .arguments({ input: a.json().required() })
+    .returns(a.json())
+    .authorization((allow) => [allow.groups(contentWriteGroups)])
+    .handler(a.handler.function(contentActions)),
+
   knowledgeQuery: a
     .query()
     .arguments({

package/amplify/data/schema.js

@@ -393,6 +393,12 @@ export const schema = a.schema({
         .returns(a.json())
         .authorization((allow) => [allow.groups(contentWriteGroups)])
         .handler(a.handler.function(contentActions)),
+    requestStagingBuild: a
+        .mutation()
+        .arguments({ input: a.json().required() })
+        .returns(a.json())
+        .authorization((allow) => [allow.groups(contentWriteGroups)])
+        .handler(a.handler.function(contentActions)),
     knowledgeQuery: a
         .query()
         .arguments({

package/amplify/data/schema.ts

@@ -431,6 +431,13 @@ export const schema = a.schema({
     .authorization((allow) => [allow.groups(contentWriteGroups)])
     .handler(a.handler.function(contentActions)),
 
+  requestStagingBuild: a
+    .mutation()
+    .arguments({ input: a.json().required() })
+    .returns(a.json())
+    .authorization((allow) => [allow.groups(contentWriteGroups)])
+    .handler(a.handler.function(contentActions)),
+
   knowledgeQuery: a
     .query()
     .arguments({

package/amplify/functions/content-actions/handler.py

@@ -1,10 +1,18 @@
 from __future__ import annotations
 
 import json
+import os
 from typing import Any
 
 from papyrus_content.graphql_authoring import create_authoring_client
 from papyrus_content.markus_renderer.derive import derive_body
+from papyrus_content.rebuild_trigger import (
+    DEFAULT_STAGING_BRANCH,
+    reader_target_from_environment,
+    trigger_pretext_revalidation,
+    trigger_rebuild,
+    trigger_staging_build,
+)
 from papyrus_content.publishing import (
     ItemFields,
     PublishError,
@@ -72,21 +80,53 @@ def save_item_draft_action(arguments: dict, actor: str) -> dict:
     }
 
 
+def site_triggers_for(client, item_id: str) -> dict:
+    triggers: dict = {}
+    reader_app_id, reader_branch = reader_target_from_environment()
+    revalidate_base_url = (os.environ.get("PAPYRUS_REVALIDATE_BASE_URL") or "").strip()
+    if revalidate_base_url:
+        try:
+            item = client.get_record("Item", item_id) or {}
+            slugs = [item["slug"]] if item.get("slug") else []
+            revalidated = trigger_pretext_revalidation(slugs, None, base_url=revalidate_base_url)
+            triggers["revalidated"] = revalidated if revalidated is not None else {"ok": False, "reason": "not-configured"}
+        except Exception as error:  # noqa: BLE001 - a trigger failure never fails the publish
+            triggers["revalidated"] = {"ok": False, "error": f"{type(error).__name__}: {error}"}
+    if reader_app_id:
+        triggers["rebuild"] = trigger_rebuild(reader_app_id=reader_app_id, reader_branch=reader_branch)
+    return triggers
+
+
 def publish_item_action(arguments: dict, actor: str) -> dict:
     client, _claims = create_authoring_client()
     result = publish_item(client, arguments["id"], actor=actor)
-    return {
+    response = {
         "ok": True,
         "changed": result.changed,
         "publishedId": result.published_item_id,
         "versionNumber": result.version_number,
     }
+    if result.changed:
+        response.update(site_triggers_for(client, arguments["id"]))
+    return response
 
 
 def unpublish_item_action(arguments: dict, actor: str) -> dict:
     client, _claims = create_authoring_client()
     result = unpublish_item(client, arguments["id"], actor=actor)
-    return {"ok": True, "changed": result.changed}
+    response = {"ok": True, "changed": result.changed}
+    if result.changed:
+        response.update(site_triggers_for(client, arguments["id"]))
+    return response
+
+
+def request_staging_build_action() -> dict:
+    cms_app_id = (os.environ.get("PAPYRUS_CMS_AMPLIFY_APP_ID") or "").strip()
+    if not cms_app_id:
+        return {"ok": False, "errors": [{"code": "staging-build-not-configured", "message": "This site has no staging build configured.", "line": None}]}
+    staging_branch = (os.environ.get("PAPYRUS_STAGING_BRANCH") or "").strip() or DEFAULT_STAGING_BRANCH
+    build = trigger_staging_build(cms_app_id=cms_app_id, staging_branch=staging_branch)
+    return {"ok": True, "build": build}
 
 
 def handler(event, context):
@@ -102,6 +142,8 @@ def handler(event, context):
             return publish_item_action(arguments, actor)
         if field == "unpublishItem":
             return unpublish_item_action(arguments, actor)
+        if field == "requestStagingBuild":
+            return request_staging_build_action()
     except PublishError as error:
         return failure_response(error)
     raise ValueError(f"Unsupported field {field}")

package/amplify/rebuild-trigger-settings.js

@@ -0,0 +1,22 @@
+export const REBUILD_TRIGGER_ACTIONS = ["amplify:StartJob", "amplify:ListJobs"];
+function branchJobsArn(input, appId, branch) {
+    return `arn:aws:amplify:${input.region}:${input.account}:apps/${appId}/branches/${branch}/jobs/*`;
+}
+export function rebuildTriggerSettings(input) {
+    const environment = {};
+    const resources = [];
+    const readerAppId = (input.reader?.amplifyAppId ?? "").trim();
+    if (readerAppId !== "") {
+        const readerBranch = (input.reader?.branchName ?? "").trim() || "main";
+        environment.PAPYRUS_READER_AMPLIFY_APP_ID = readerAppId;
+        environment.PAPYRUS_READER_BRANCH = readerBranch;
+        resources.push(branchJobsArn(input, readerAppId, readerBranch));
+    }
+    const cmsAppId = input.cmsAppId.trim();
+    if (input.stagingBuildEnabled && cmsAppId !== "") {
+        environment.PAPYRUS_CMS_AMPLIFY_APP_ID = cmsAppId;
+        environment.PAPYRUS_STAGING_BRANCH = "staging";
+        resources.push(branchJobsArn(input, cmsAppId, "staging"));
+    }
+    return { environment, actions: REBUILD_TRIGGER_ACTIONS, resources };
+}

package/amplify/rebuild-trigger-settings.ts

@@ -0,0 +1,42 @@
+/**
+ * Environment and IAM policy for the content-actions Lambda's site triggers.
+ * Pure (no CDK imports) so the policy can be tested without synthesizing.
+ */
+export type RebuildTriggerInput = {
+  reader?: { amplifyAppId: string; branchName?: string };
+  stagingBuildEnabled: boolean;
+  cmsAppId: string;
+  region: string;
+  account: string;
+};
+
+export type RebuildTriggerSettings = {
+  environment: Record<string, string>;
+  actions: string[];
+  resources: string[];
+};
+
+export const REBUILD_TRIGGER_ACTIONS = ["amplify:StartJob", "amplify:ListJobs"];
+
+function branchJobsArn(input: RebuildTriggerInput, appId: string, branch: string): string {
+  return `arn:aws:amplify:${input.region}:${input.account}:apps/${appId}/branches/${branch}/jobs/*`;
+}
+
+export function rebuildTriggerSettings(input: RebuildTriggerInput): RebuildTriggerSettings {
+  const environment: Record<string, string> = {};
+  const resources: string[] = [];
+  const readerAppId = (input.reader?.amplifyAppId ?? "").trim();
+  if (readerAppId !== "") {
+    const readerBranch = (input.reader?.branchName ?? "").trim() || "main";
+    environment.PAPYRUS_READER_AMPLIFY_APP_ID = readerAppId;
+    environment.PAPYRUS_READER_BRANCH = readerBranch;
+    resources.push(branchJobsArn(input, readerAppId, readerBranch));
+  }
+  const cmsAppId = input.cmsAppId.trim();
+  if (input.stagingBuildEnabled && cmsAppId !== "") {
+    environment.PAPYRUS_CMS_AMPLIFY_APP_ID = cmsAppId;
+    environment.PAPYRUS_STAGING_BRANCH = "staging";
+    resources.push(branchJobsArn(input, cmsAppId, "staging"));
+  }
+  return { environment, actions: REBUILD_TRIGGER_ACTIONS, resources };
+}

package/amplify/site-backend-config.ts

@@ -21,6 +21,12 @@ export type PapyrusSiteBackendConfig = {
    */
   productionAppId?: string;
   auth?: PapyrusAuthConfig;
+  /** Static reader app (Markus-static sites) that a publish rebuilds through IAM `amplify:StartJob`. */
+  reader?: { amplifyAppId: string; branchName?: string };
+  /** Lets the newsroom start the `staging` branch build of this CMS app. */
+  stagingBuild?: { enabled: boolean };
+  /** Base URL of a Pretext reader whose `/api/revalidate` a publish calls (secret `PAPYRUS_REVALIDATE_SECRET`). */
+  revalidateBaseUrl?: string;
   features?: {
     consoleResponder?: boolean;
     inboundEmail?: boolean;

package/amplify/site-backend.js

@@ -12,6 +12,7 @@ import { CfnEventSourceMapping, FunctionUrlAuthType } from "aws-cdk-lib/aws-lamb
 import { CfnIndex, CfnVectorBucket, CfnVectorBucketPolicy } from "aws-cdk-lib/aws-s3vectors";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { rebuildTriggerSettings } from "./rebuild-trigger-settings.js";
 import { authConfigFromEnv, defineSiteAuth } from "./auth/resource.js";
 import { data } from "./data/resource.js";
 import { assignmentAction } from "./functions/assignment-action/resource.js";
@@ -333,6 +334,23 @@ export function defineSiteBackend(papyrusSite) {
         actions: ["appsync:GraphQL"],
         resources: ["*"],
     }));
+    const rebuildSettings = rebuildTriggerSettings({
+        reader: site.reader,
+        stagingBuildEnabled: site.stagingBuild?.enabled === true,
+        cmsAppId: amplifyAppId,
+        region: Stack.of(contentActionsLambda).region,
+        account: Stack.of(contentActionsLambda).account,
+    });
+    for (const [name, value] of Object.entries(rebuildSettings.environment)) {
+        contentActionsLambda.addEnvironment(name, value);
+    }
+    if (rebuildSettings.resources.length > 0) {
+        contentActionsLambda.addToRolePolicy(new PolicyStatement({ actions: rebuildSettings.actions, resources: rebuildSettings.resources }));
+    }
+    if ((site.revalidateBaseUrl ?? "").trim() !== "") {
+        backend.contentActions.addEnvironment("PAPYRUS_REVALIDATE_BASE_URL", (site.revalidateBaseUrl ?? "").trim());
+        backend.contentActions.addEnvironment("PAPYRUS_REVALIDATE_SECRET", secret("PAPYRUS_REVALIDATE_SECRET"));
+    }
     grantNewsroomReadWriteDelete(backend.modelAttachmentUpload.resources.lambda);
     grantMediaReadWriteDelete(backend.modelAttachmentUpload.resources.lambda);
     if (backend.sesInboundReceive) {

package/amplify/site-backend.ts

@@ -13,6 +13,7 @@ import * as s3 from "aws-cdk-lib/aws-s3";
 import { CfnIndex, CfnVectorBucket, CfnVectorBucketPolicy } from "aws-cdk-lib/aws-s3vectors";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { rebuildTriggerSettings } from "./rebuild-trigger-settings";
 import { authConfigFromEnv, defineSiteAuth } from "./auth/resource";
 import { data } from "./data/resource";
 import { assignmentAction } from "./functions/assignment-action/resource";
@@ -414,6 +415,25 @@ export function defineSiteBackend(papyrusSite: PapyrusSite) {
       resources: ["*"],
     }),
   );
+  const rebuildSettings = rebuildTriggerSettings({
+    reader: site.reader,
+    stagingBuildEnabled: site.stagingBuild?.enabled === true,
+    cmsAppId: amplifyAppId,
+    region: Stack.of(contentActionsLambda).region,
+    account: Stack.of(contentActionsLambda).account,
+  });
+  for (const [name, value] of Object.entries(rebuildSettings.environment)) {
+    contentActionsLambda.addEnvironment(name, value);
+  }
+  if (rebuildSettings.resources.length > 0) {
+    contentActionsLambda.addToRolePolicy(
+      new PolicyStatement({ actions: rebuildSettings.actions, resources: rebuildSettings.resources }),
+    );
+  }
+  if ((site.revalidateBaseUrl ?? "").trim() !== "") {
+    backend.contentActions.addEnvironment("PAPYRUS_REVALIDATE_BASE_URL", (site.revalidateBaseUrl ?? "").trim());
+    backend.contentActions.addEnvironment("PAPYRUS_REVALIDATE_SECRET", secret("PAPYRUS_REVALIDATE_SECRET"));
+  }
   grantNewsroomReadWriteDelete(backend.modelAttachmentUpload.resources.lambda as LambdaFunction);
   grantMediaReadWriteDelete(backend.modelAttachmentUpload.resources.lambda as LambdaFunction);
   if (backend.sesInboundReceive) {

package/amplify/storage/resource.js

@@ -11,6 +11,9 @@ export const storage = defineStorage({
         "corpora/*": [
             allow.groups(["editor", "admin"]).to(["read"]),
         ],
+        "preview/*": [
+            allow.groups(["editor", "admin"]).to(["read"]),
+        ],
         "newsroom/*": [
             allow.groups(["editor", "admin"]).to(["read", "write", "delete"]),
         ],

package/amplify/storage/resource.ts

@@ -12,6 +12,9 @@ export const storage = defineStorage({
     "corpora/*": [
       allow.groups(["editor", "admin"]).to(["read"]),
     ],
+    "preview/*": [
+      allow.groups(["editor", "admin"]).to(["read"]),
+    ],
     "newsroom/*": [
       allow.groups(["editor", "admin"]).to(["read", "write", "delete"]),
     ],

package/app/%5F_preview/[[...path]]/route.ts

@@ -0,0 +1,8 @@
+import type { NextRequest } from "next/server";
+import { streamPreviewObject } from "../../../lib/staging-preview-object";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: NextRequest): Promise<Response> {
+  return streamPreviewObject(request.nextUrl.pathname);
+}

package/app/globals.css

@@ -2282,6 +2282,25 @@ img {
   width: 100%;
 }
 
+.article-video__preview-frame {
+  aspect-ratio: 16 / 9;
+  background: #000;
+  border: 0;
+  display: block;
+  width: 100%;
+}
+
+.article-video__preview-controls {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.article-video__preview-controls input[type="range"] {
+  flex: 1;
+}
+
 .article-video__credit {
   color: rgb(var(--ink-solid-rgb) / 0.62);
   font-size: 0.82rem;

package/app/newsroom/articles/[id]/page.tsx

@@ -0,0 +1,15 @@
+import { NewsroomArticleEditor } from "../../../../components/newsroom-article-editor";
+
+export const dynamic = "force-dynamic";
+
+type NewsroomArticleEditorPageProps = {
+  params: Promise<{ id: string }>;
+  searchParams?: Promise<{ demo?: string | string[] }>;
+};
+
+export default async function NewsroomArticleEditorPage({ params, searchParams }: NewsroomArticleEditorPageProps) {
+  const { id } = await params;
+  const resolved = await searchParams;
+  const demoValue = Array.isArray(resolved?.demo) ? resolved?.demo[0] : resolved?.demo;
+  return <NewsroomArticleEditor articleId={decodeURIComponent(id)} demo={demoValue === "1"} />;
+}

package/app/newsroom/articles/page.tsx

@@ -0,0 +1,13 @@
+import { NewsroomArticlesView } from "../../../components/newsroom-articles-view";
+
+export const dynamic = "force-dynamic";
+
+type NewsroomArticlesPageProps = {
+  searchParams?: Promise<{ demo?: string | string[] }>;
+};
+
+export default async function NewsroomArticlesPage({ searchParams }: NewsroomArticlesPageProps) {
+  const resolved = await searchParams;
+  const demoValue = Array.isArray(resolved?.demo) ? resolved?.demo[0] : resolved?.demo;
+  return <NewsroomArticlesView demo={demoValue === "1"} />;
+}

package/bin/papyrus-app.mjs

@@ -1,10 +1,20 @@
 #!/usr/bin/env node
 import { sync } from "../src/sync.mjs";
 
-const [command] = process.argv.slice(2);
+const [command, ...rest] = process.argv.slice(2);
 if (command === "sync") {
   sync();
+} else if (command === "videoml-bundle") {
+  const preview = rest.includes("--preview");
+  const { buildBrowserBundle } = await import("../scripts/videoml/build-browser-bundle.mjs");
+  const { buildPreviewBundle } = await import("../scripts/videoml/build-preview-bundle.mjs");
+  try {
+    await (preview ? buildPreviewBundle() : buildBrowserBundle());
+  } catch (error) {
+    console.error(error.message);
+    process.exit(1);
+  }
 } else {
-  console.error("Usage: papyrus-app sync");
+  console.error("Usage: papyrus-app sync | papyrus-app videoml-bundle [--preview]");
   process.exit(command ? 1 : 0);
 }

package/bin/papyrus-infra.mjs

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 /**
  * papyrus-infra synth --site infra/site.json [--out cdk.out] [--account A] [--region R]
+ * papyrus-infra synth --account-stack github-oidc [--out cdk.out] [--account A] [--region R]
  * papyrus-infra print-buildspec --site infra/site.json --app cms-production|cms-staging|reader
  * Synthesizes the app-shell stack for a publication from its own site.json, or
  * prints one of the generated Amplify build specs. Synth only: deploying is a
@@ -14,6 +15,7 @@ import { parseSiteConfig } from "../infra/site-config.js";
 
 const USAGE = [
   "Usage: papyrus-infra synth --site infra/site.json [--out cdk.out] [--account A] [--region R]",
+  "       papyrus-infra synth --account-stack github-oidc [--out cdk.out] [--account A] [--region R]",
   "       papyrus-infra print-buildspec --site infra/site.json --app cms-production|cms-staging|reader",
 ].join("\n");
 
@@ -28,6 +30,30 @@ if (command !== "synth" && command !== "print-buildspec") {
   process.exit(command ? 1 : 0);
 }
 
+const accountStack = opt("account-stack");
+if (accountStack !== undefined) {
+  if (command !== "synth" || accountStack !== "github-oidc") {
+    console.error(USAGE);
+    process.exit(1);
+  }
+  let GithubOidcProviderStack;
+  try {
+    ({ GithubOidcProviderStack } = await import("../infra/index.js"));
+  } catch (error) {
+    console.error(`papyrus-infra: ${error instanceof Error ? error.message : error}`);
+    process.exit(1);
+  }
+  const { App } = createRequire(path.join(process.cwd(), "noop.js"))("aws-cdk-lib");
+  const app = new App({ outdir: path.resolve(opt("out", "cdk.out")) });
+  new GithubOidcProviderStack(app, "GithubOidcProviderStack", {
+    env: { account: opt("account", "335163751677"), region: opt("region", "us-east-1") },
+    stackName: "github-oidc-provider",
+  });
+  app.synth();
+  console.log(`synthesized github-oidc-provider -> ${path.resolve(opt("out", "cdk.out"))}`);
+  process.exit(0);
+}
+
 let config;
 try {
   config = parseSiteConfig(JSON.parse(fs.readFileSync(path.resolve(opt("site", "infra/site.json")), "utf8")));

package/components/article-video.tsx

@@ -1,31 +1,140 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { ArticleVideoAsset } from "../lib/articles";
 import { resolveThemedVideoSrc } from "../lib/themed-image";
 import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
+import { getSiteBrand } from "../lib/site-brand";
+import { normalizeDevPreviewDsl, type VideoScriptRef } from "../lib/video-script";
+import { resolveVideoMode, resolveVideoModeFromEnv, type VideoMode } from "../lib/video-mode";
 
 type ArticleVideoFigureProps = {
   video: ArticleVideoAsset;
   slug: string;
   figureClassName?: string;
   priority?: boolean;
+  videoScript?: VideoScriptRef | null;
 };
 
-export function ArticleVideoFigure({ video, slug, figureClassName = "article-photo article-video" }: ArticleVideoFigureProps) {
+const PREVIEW_STORAGE_PREFIX = "papyrus-video-preview:";
+
+export function ArticleVideoFigure({
+  video,
+  slug,
+  figureClassName = "article-photo article-video",
+  videoScript = null,
+}: ArticleVideoFigureProps) {
   const theme = useResolvedPapyrusTheme();
   const [hasHydrated, setHasHydrated] = useState(false);
+  const [videoMode, setVideoMode] = useState<VideoMode>(() => resolveVideoModeFromEnv());
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [previewReady, setPreviewReady] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
 
   useEffect(() => {
     setHasHydrated(true);
+    setVideoMode(resolveVideoMode());
   }, []);
 
   // Match SSR to the default dark MP4 in `video.src` until after hydration.
   const resolvedTheme = hasHydrated ? theme : "dark";
   const src = resolveThemedVideoSrc(video.src, video.themeVariants, resolvedTheme);
+  const usePreview = videoMode === "preview" && Boolean(videoScript?.dsl);
+  const previewDsl = videoScript?.dsl
+    ? normalizeDevPreviewDsl(videoScript.dsl, getSiteBrand().video?.sceneComponents)
+    : null;
+  const previewSrc = `/videoml/preview.html?target=${encodeURIComponent(slug)}&theme=${resolvedTheme}${
+    src ? `&audio=${encodeURIComponent(src)}` : ""
+  }`;
+
+  if (usePreview && previewDsl && typeof window !== "undefined") {
+    sessionStorage.setItem(`${PREVIEW_STORAGE_PREFIX}${slug}`, previewDsl);
+  }
+
+  useEffect(() => {
+    setPreviewReady(false);
+    setIsPlaying(false);
+    setCurrentTime(0);
+    setDuration(0);
+  }, [previewSrc, usePreview]);
+
+  useEffect(() => {
+    if (!usePreview || !previewReady) return;
+    iframeRef.current?.contentWindow?.postMessage(
+      { kind: "papyrus-video-refresh", target: slug, theme: resolvedTheme, audio: src || undefined },
+      "*",
+    );
+  }, [previewReady, resolvedTheme, slug, src, usePreview]);
+
+  useEffect(() => {
+    if (!usePreview) return;
+    const onMessage = (event: MessageEvent) => {
+      const payload = event.data;
+      if (!payload || typeof payload !== "object" || payload.kind !== "papyrus-video-time") return;
+      if (typeof payload.currentTime === "number") setCurrentTime(payload.currentTime);
+      if (typeof payload.duration === "number") setDuration(payload.duration);
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [usePreview]);
+
+  const togglePreviewPlayback = useCallback(() => {
+    iframeRef.current?.contentWindow?.postMessage({ kind: isPlaying ? "papyrus-video-pause" : "papyrus-video-play" }, "*");
+    setIsPlaying(!isPlaying);
+  }, [isPlaying]);
+
+  const seekPreview = useCallback((nextTime: number) => {
+    const clamped = Math.max(0, Number.isFinite(nextTime) ? nextTime : 0);
+    iframeRef.current?.contentWindow?.postMessage({ kind: "papyrus-video-seek", time: clamped }, "*");
+    setCurrentTime(clamped);
+  }, []);
+
+  if (usePreview) {
+    return (
+      <figure
+        className={`${figureClassName} article-video--preview`}
+        data-media-type="videoml-preview"
+        data-video-theme={resolvedTheme}
+        data-video-mode={videoMode}
+      >
+        {hasHydrated ? (
+          <iframe
+            key={`${slug}-${resolvedTheme}-${src}`}
+            ref={iframeRef}
+            className="article-video__preview-frame"
+            src={previewSrc}
+            title={video.alt}
+            onLoad={() => setPreviewReady(true)}
+          />
+        ) : null}
+        <div className="article-video__preview-controls">
+          <button type="button" onClick={togglePreviewPlayback} aria-pressed={isPlaying}>
+            {isPlaying ? "Pause video" : "Play video"}
+          </button>
+          <input
+            type="range"
+            min={0}
+            max={duration || 0}
+            step={0.1}
+            value={Math.min(currentTime, duration || 0)}
+            onChange={(event) => seekPreview(Number(event.target.value))}
+            aria-label="Seek video"
+            disabled={!duration}
+          />
+        </div>
+        {video.caption ? <figcaption>{video.caption}</figcaption> : null}
+        {video.credit ? <p className="article-video__credit">{video.credit}</p> : null}
+        <span className="sr-only" data-video-slug={slug}>
+          {video.alt}
+        </span>
+      </figure>
+    );
+  }
 
   return (
-    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme}>
+    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme} data-video-mode={videoMode}>
       <video
         controls
         playsInline