@anthusai/papyrus 1.0.0-next.20 → 1.0.0-next.21

package/app/articles/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
 import { getSiteRenderer } from "../../../lib/site-renderer";
-import { getCachedArticle } from "../../../lib/cached-content-repository";
+import { getCachedArticle, getCachedVideoScript } from "../../../lib/cached-content-repository";
 import { generateArticleStaticParams, siteServesNextReaderRoutes } from "../../../lib/reader-static-params";
 import { SITE_BRAND } from "../../../lib/site-brand";
 
@@ -29,9 +29,9 @@ export async function generateMetadata({ params }: ArticlePageProps) {
 export default async function ArticlePage({ params }: ArticlePageProps) {
   if (!siteServesNextReaderRoutes()) notFound();
   const { slug } = await params;
-  const article = await getCachedArticle(slug);
+  const [article, videoScript] = await Promise.all([getCachedArticle(slug), getCachedVideoScript(slug)]);
   if (!article) notFound();
 
   const siteRenderer = getSiteRenderer();
-  return <siteRenderer.renderArticle article={article} backHref="/" />;
+  return <siteRenderer.renderArticle article={article} videoScript={videoScript} backHref="/" />;
 }

package/components/newspaper.tsx

@@ -12,6 +12,7 @@ import { ARCHIVE_PREVIEW_HEIGHT, ARCHIVE_PREVIEW_WIDTH } from "../lib/archive-ty
 import type { EditionContent, NewsDeskAppendix, NewsDeskCategoryTreeNode } from "../lib/content-types";
 import { shouldBypassImageOptimization } from "../lib/image-url";
 import type { PublicationItem } from "../lib/publication-items";
+import { clearPretextMeasurementCache } from "../lib/pretext-layout";
 import { toPublicReaderPath } from "../lib/reader-base-path";
 import { SITE_BRAND } from "../lib/site-brand";
 import { resolveThemedImageSrc, type ResolvedTheme } from "../lib/themed-image";
@@ -131,7 +132,9 @@ export function Newspaper({
     if (!fonts) return;
     let cancelled = false;
     const refreshAfterFontLoad = () => {
-      if (!cancelled) setFontRevision((revision) => revision + 1);
+      if (cancelled) return;
+      clearPretextMeasurementCache();
+      setFontRevision((revision) => revision + 1);
     };
     fonts.ready.then(refreshAfterFontLoad).catch(() => undefined);
     fonts.addEventListener("loadingdone", refreshAfterFontLoad);

package/components/use-brand-fonts-ready.ts

@@ -2,29 +2,26 @@
 
 import { useEffect, useState } from "react";
 import { listBrandFontFamilies } from "../lib/brand-fonts";
+import { watchBrandFontsLoaded } from "../lib/brand-fonts-watch";
+import { clearPretextMeasurementCache } from "../lib/pretext-layout";
 import { SITE_BRAND } from "../lib/site-brand";
 
 /**
- * Returns a number that increments once the brand's declared font families
- * have loaded, so Pretext measurements taken with fallback metrics are
- * re-run with the real glyph widths. Stays 0 for brands without a font slot.
+ * Returns a number that increments each time the brand's declared font
+ * families finish loading. Pretext's width cache is cleared first, so
+ * measurements taken with fallback metrics are re-run with the real glyph
+ * widths. Stays 0 for brands without a font slot, and on the server.
  */
 export function useBrandFontsReadyVersion(): number {
   const [version, setVersion] = useState(0);
 
   useEffect(() => {
-    const families = listBrandFontFamilies(SITE_BRAND.fonts);
-    if (families.length === 0 || !document.fonts) return;
-    let isCancelled = false;
-    void Promise.all(families.map((family) => document.fonts.load(`16px ${JSON.stringify(family)}`)))
-      .then(() => document.fonts.ready)
-      .then(() => {
-        if (!isCancelled) setVersion((current) => current + 1);
-      })
-      .catch(() => undefined);
-    return () => {
-      isCancelled = true;
-    };
+    return watchBrandFontsLoaded({
+      fontFaceSet: typeof document === "undefined" ? undefined : document.fonts,
+      families: listBrandFontFamilies(SITE_BRAND.fonts),
+      clearMeasurementCaches: clearPretextMeasurementCache,
+      onFontsSettled: () => setVersion((current) => current + 1),
+    });
   }, []);
 
   return version;

package/lib/brand-fonts-watch.ts

@@ -0,0 +1,43 @@
+export type FontFaceSetLike = {
+  load(font: string): Promise<unknown>;
+  ready: Promise<unknown>;
+  addEventListener(type: string, listener: () => void): void;
+  removeEventListener(type: string, listener: () => void): void;
+};
+
+export type WatchBrandFontsOptions = {
+  fontFaceSet: FontFaceSetLike | undefined;
+  families: string[];
+  clearMeasurementCaches: () => void;
+  onFontsSettled: () => void;
+};
+
+/**
+ * Clears Pretext measurement caches and then notifies the caller every time
+ * the declared families finish loading, so layout never reuses widths that
+ * were measured with fallback metrics. Clearing always happens before the
+ * notification, which makes the re-layout order deterministic.
+ */
+export function watchBrandFontsLoaded({
+  fontFaceSet,
+  families,
+  clearMeasurementCaches,
+  onFontsSettled,
+}: WatchBrandFontsOptions): () => void {
+  if (families.length === 0 || !fontFaceSet) return () => undefined;
+  let isCancelled = false;
+  const settle = () => {
+    if (isCancelled) return;
+    clearMeasurementCaches();
+    onFontsSettled();
+  };
+  fontFaceSet.addEventListener("loadingdone", settle);
+  void Promise.all(families.map((family) => fontFaceSet.load(`16px ${JSON.stringify(family)}`)))
+    .then(() => fontFaceSet.ready)
+    .then(settle)
+    .catch(() => undefined);
+  return () => {
+    isCancelled = true;
+    fontFaceSet.removeEventListener("loadingdone", settle);
+  };
+}

package/lib/cached-content-repository.ts

@@ -10,6 +10,7 @@ import type {
 } from "./content-types";
 import { graphqlContentRepository } from "./graphql-content-repository";
 import { READER_REVALIDATE_SECONDS } from "./reader-route-config";
+import type { VideoScriptRef } from "./video-script";
 import { getContentSource } from "./site-env";
 
 const bypassReaderCacheInDevelopment = process.env.NODE_ENV === "development";
@@ -88,3 +89,14 @@ export function getCachedLatestPublishedEdition(): Promise<EditionRouteSummary |
     async () => graphqlContentRepository.getLatestPublishedEdition(),
   );
 }
+
+export function getCachedVideoScript(targetSlug: string): Promise<VideoScriptRef | null> {
+  if (bypassReaderCacheInDevelopment) {
+    return Promise.resolve(graphqlContentRepository.loadVideoScript(targetSlug)).then((result) => result ?? null);
+  }
+  return withReaderCache(
+    ["reader-video-script", targetSlug],
+    [articleCacheTag(targetSlug), ARTICLES_CACHE_TAG],
+    async () => graphqlContentRepository.loadVideoScript(targetSlug),
+  );
+}

package/lib/content-repository.ts

@@ -31,6 +31,9 @@ export const contentRepository: ContentRepository = {
   listArticleSlugs() {
     return graphqlContentRepository.listArticleSlugs();
   },
+  loadVideoScript(targetSlug: string) {
+    return graphqlContentRepository.loadVideoScript(targetSlug);
+  },
 };
 
 export function getScenarioIdParam(scenario: string | string[] | null | undefined): string | null {

package/lib/content-types.ts

@@ -104,4 +104,5 @@ export type ContentRepository = {
   getEditionArticle(options: GetEditionArticleOptions): Article | undefined | Promise<Article | undefined>;
   getEditionItem(options: GetEditionItemOptions): PublicationItem | undefined | Promise<PublicationItem | undefined>;
   listArticleSlugs(): string[] | Promise<string[]>;
+  loadVideoScript(targetSlug: string): VideoScriptRef | null | Promise<VideoScriptRef | null>;
 };

package/lib/graphql-content-repository.ts

@@ -18,6 +18,8 @@ import {
 } from "./publication-items";
 import { BodyIrError, matchBodyImages, projectBodyIr, type BodyProjection, type BodyProjectionImage } from "./markus-body";
 import { SITE_BRAND } from "./site-brand";
+import { shouldFetchVideoScripts } from "./video-mode";
+import { collectVideoScriptTargets, parseVideoScriptRef, videomlItemSlug, type VideoScriptRef } from "./video-script";
 import { currentContentSource, currentRequestClient, runWithContentSource } from "./content-source-context";
 import { getContentSource } from "./site-env";
 
@@ -236,6 +238,10 @@ export const graphqlContentRepository: ContentRepository = {
     return withReaderGraphQLContext(() => loadEditionItem(editionDate, itemSlug));
   },
 
+  loadVideoScript(targetSlug) {
+    return withReaderGraphQLContext(() => loadVideoScriptForTarget(targetSlug));
+  },
+
   listArticleSlugs() {
     return withReaderGraphQLContext(async () => {
       const items = await listItemsByTypeStatus(`${ARTICLE_TYPE}#${PUBLISHED_STATUS}`);
@@ -379,6 +385,9 @@ async function loadEditionContentFromEdition(edition: GraphQLEdition): Promise<E
   const sanitizedLayoutPlan = pruneLayoutPlanUnavailableItems(layoutPlan, availableItemSlugs, edition.id);
   validateEditionLayoutPlanForItems(sanitizedLayoutPlan, items, `PublishedEdition(${edition.id}).layoutPlan`);
 
+  const editionVideo = await normalizeEditionVideoAsset(editionMetadata?.editionVideo);
+  const videoScripts = await loadEditionVideoScripts(items, editionVideo);
+
   return {
     id: edition.id,
     source: "graphql",
@@ -389,10 +398,38 @@ async function loadEditionContentFromEdition(edition: GraphQLEdition): Promise<E
     items,
     sections: createEditionSectionPlan(items, edition.metadata),
     suppressNewsDeskAppendix: editionMetadata?.suppressNewsDeskAppendix === true,
-    editionVideo: await normalizeEditionVideoAsset(editionMetadata?.editionVideo),
+    editionVideo,
+    videoScripts,
   };
 }
 
+function videoScriptsEnabled(): boolean {
+  return Boolean(SITE_BRAND.videoPlayer) && shouldFetchVideoScripts();
+}
+
+async function loadVideoScriptForTarget(targetSlug: string): Promise<VideoScriptRef | null> {
+  if (!videoScriptsEnabled()) return null;
+  const item = await getItemBySlug(videomlItemSlug(targetSlug));
+  if (!item || item.type !== "videoml" || !isVisibleItemStatus(item.status)) return null;
+  return parseVideoScriptRef(item);
+}
+
+async function loadEditionVideoScripts(
+  items: PublicationItem[],
+  editionVideo: ArticleVideoAsset | null,
+): Promise<Record<string, VideoScriptRef> | undefined> {
+  if (!videoScriptsEnabled()) return undefined;
+  const targets = collectVideoScriptTargets(items, editionVideo !== null);
+  const entries = await Promise.all(
+    targets.map(async (targetSlug) => {
+      const script = await loadVideoScriptForTarget(targetSlug);
+      return script ? ([targetSlug, script] as const) : null;
+    }),
+  );
+  const videoScripts = Object.fromEntries(entries.filter((entry): entry is [string, VideoScriptRef] => entry !== null));
+  return Object.keys(videoScripts).length > 0 ? videoScripts : undefined;
+}
+
 async function normalizeEditionVideoAsset(value: unknown): Promise<ArticleVideoAsset | null> {
   if (!value || typeof value !== "object" || Array.isArray(value)) return null;
   const record = value as Record<string, unknown>;

package/lib/pretext-layout.ts

@@ -1,4 +1,5 @@
 import {
+  clearCache,
   layoutNextLine,
   prepareWithSegments,
   type LayoutCursor,
@@ -181,3 +182,7 @@ function toTextLine(line: LayoutLine, x: number, y: number, fontSize: number, fo
 function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
+
+export function clearPretextMeasurementCache(): void {
+  clearCache();
+}

package/lib/video-script.ts

@@ -21,6 +21,20 @@ export type VideoScriptRef = {
   targetKind: VideoScriptTargetKind;
 };
 
+export const EDITION_OVERVIEW_VIDEO_KEY = "edition-overview";
+
+export function collectVideoScriptTargets(
+  items: ReadonlyArray<{ slug: string; video?: unknown }>,
+  hasEditionVideo: boolean,
+): string[] {
+  const targets = new Set<string>();
+  if (hasEditionVideo) targets.add(EDITION_OVERVIEW_VIDEO_KEY);
+  for (const item of items) {
+    if (item.video) targets.add(item.slug);
+  }
+  return [...targets];
+}
+
 export function videomlItemSlug(targetSlug: string): string {
   return `${targetSlug}--videoml`;
 }

package/package.json

@@ -133,6 +133,7 @@
     "./lib/articles": "./lib/articles.ts",
     "./lib/blog-feature-solver": "./lib/blog-feature-solver.ts",
     "./lib/blog-rhythm": "./lib/blog-rhythm.ts",
+    "./lib/brand-fonts-watch": "./lib/brand-fonts-watch.ts",
     "./lib/brand-fonts": "./lib/brand-fonts.ts",
     "./lib/cached-content-repository": "./lib/cached-content-repository.ts",
     "./lib/category-dashboard": "./lib/category-dashboard.ts",
@@ -292,7 +293,7 @@
       "optional": true
     }
   },
-  "version": "1.0.0-next.20",
+  "version": "1.0.0-next.21",
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.7.3",
     "@aws-sdk/client-cognito-identity-provider": "3.1045.0",

package/renderers/pretext/rhythm-blog-presentation.tsx

@@ -15,7 +15,7 @@ import {
   type PublicationItem,
 } from "../../lib/publication-items";
 import { SITE_BRAND } from "../../lib/site-brand";
-import type { VideoScriptRef } from "../../lib/video-script";
+import { EDITION_OVERVIEW_VIDEO_KEY, type VideoScriptRef } from "../../lib/video-script";
 import { ArticleVideoFigure } from "../../components/article-video";
 import { BlogPageBackground as GenericBlogPageBackground } from "../../components/blog-page-background";
 import { PictogramFigure as GenericPictogramFigure } from "../../components/pictogram-figure";
@@ -40,7 +40,6 @@ import { BLOG_RHYTHM, getFeaturedLayoutStyle, getRhythmShellStyle } from "./rhyt
 const BlogPageBackground = SITE_BRAND.components?.BlogPageBackground ?? GenericBlogPageBackground;
 const PictogramFigure = SITE_BRAND.components?.PictogramFigure ?? GenericPictogramFigure;
 const BLOG_TEXT_STYLE = createDefaultBlogTextStyle(SITE_BRAND.textFont);
-const EDITION_OVERVIEW_VIDEO_KEY = "edition-overview";
 const SECONDARY_PAIR_ITEM_INDEX = 2;
 
 type PapyrusTestWindow = Window & typeof globalThis & {

package/routes.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-next.20",
+  "version": "1.0.0-next.21",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",