chore(www): refresh marketing preview assets

.agents/skills/cliparr-www-assets/SKILL.md

@@ -13,15 +13,19 @@ controls the editor through its capture-only bridge; no mouse interaction is nee
 
 Expect **two original media assets**, one for the hero and one for the mobile
 workspace. Both must retain their original timelines through the out point. Do not
-pre-trim the sources to the selected clips. Supply embedded text subtitles or
-Jellyfin-compatible sidecars alongside the media, such as `hero.en.srt`.
+pre-trim the sources to the selected clips. Prefer an existing non-empty,
+language-tagged Jellyfin sidecar beside each source, such as `<media>.en.srt`.
+Only transcribe when the required sidecar is missing; capture-window-only SRTs are
+valid as long as their cues retain the original media timestamps. The disposable
+Jellyfin session prefers English text subtitles and falls back to the first
+supported text track only when no English track is available.
 
 The canonical configuration is `tools/www-assets/src/scenes.ts`:
 
-| Scene  | Cliparr in/out  | Selected duration | Browser/video size | Default recording duration |
-| ------ | --------------- | ----------------- | ------------------ | -------------------------- |
-| Hero   | 8:16.07–8:19.01 | 2.94 seconds      | 1600×886           | 82/30 seconds (~2.733)     |
-| Mobile | 23:22–23:32     | 10 seconds        | 402×874            | 3 seconds                  |
+| Scene  | Cliparr in/out  | Selected duration | Browser/video size | Caption size | Default recording duration |
+| ------ | --------------- | ----------------- | ------------------ | ------------ | -------------------------- |
+| Hero   | 8:16.07–8:19.01 | 2.94 seconds      | 1600×886           | 72 px        | 82/30 seconds (~2.733)     |
+| Mobile | 23:22–23:32     | 10 seconds        | 402×874            | 150 px       | 3 seconds                  |
 
 The fractional hero timecodes are **decimal seconds, not frame numbers**.
 Cliparr selection and website recording length are separate settings. Never infer
@@ -74,6 +78,8 @@ supported text track. Failure diagnostics include the available track keys.
 - Subtitles must be enabled, loaded, and overlap the selected range. Do not silently
   capture without them. Image-only subtitles are not a substitute for supported
   text subtitles.
+- Apply each scene's configured caption size through the capture bridge before
+  recording. Keep hero at 72 px and mobile at Cliparr's 150 px maximum.
 - Do not show a mouse cursor, pointer annotations, or Playwright overlays.
 - Use `window.cliparrAssetCapture` to configure selection, seek, fit the timeline,
   inspect readiness, and start/pause playback. It wraps existing Cliparr hooks and

apps/frontend/src/components/editor/EditorScreen.tsx

@@ -354,6 +354,7 @@ function EditorScreenContent({
       subtitleError,
       clippedSubtitleCues,
       setSubtitleEnabled,
+      setSubtitleStyleSettings,
       handleSelectedSubtitleTrackChange,
     },
   });

apps/frontend/src/components/editor/useEditorAssetCapture.ts

@@ -19,6 +19,7 @@ type CaptureSubtitles = Pick<
   | "subtitleError"
   | "clippedSubtitleCues"
   | "setSubtitleEnabled"
+  | "setSubtitleStyleSettings"
   | "handleSelectedSubtitleTrackChange"
 >;
 
@@ -70,7 +71,12 @@ export function useEditorAssetCapture(bindings: CaptureBindings) {
           error: media.error || subtitles.subtitleError || "",
         };
       },
-      configure({ inSeconds, outSeconds, subtitleTrackKey: trackKey }) {
+      configure({
+        inSeconds,
+        outSeconds,
+        subtitleTrackKey: trackKey,
+        subtitleFontSize,
+      }) {
         const { engine, media, subtitles } = current.current;
         if (
           !media.metadataReady ||
@@ -84,6 +90,14 @@ export function useEditorAssetCapture(bindings: CaptureBindings) {
             "Capture selection is outside the loaded media duration.",
           );
         }
+        if (
+          subtitleFontSize !== undefined &&
+          (!Number.isFinite(subtitleFontSize) ||
+            subtitleFontSize < 16 ||
+            subtitleFontSize > 150)
+        ) {
+          throw new Error("Capture subtitle font size must be from 16 to 150.");
+        }
         if (
           trackKey &&
           !subtitles.subtitleTracks.some(
@@ -106,6 +120,12 @@ export function useEditorAssetCapture(bindings: CaptureBindings) {
         if (trackKey) {
           subtitles.handleSelectedSubtitleTrackChange(trackKey);
         }
+        if (subtitleFontSize !== undefined) {
+          subtitles.setSubtitleStyleSettings((settings) => ({
+            ...settings,
+            fontSize: subtitleFontSize,
+          }));
+        }
         subtitles.setSubtitleEnabled(true);
         media.seekToTime(inSeconds);
       },

packages/shared/src/assetCapture.ts

@@ -3,6 +3,7 @@ export interface AssetCaptureSelection {
   inSeconds: number;
   outSeconds: number;
   subtitleTrackKey?: string;
+  subtitleFontSize?: number;
 }
 
 export interface AssetCaptureState {

tools/www-assets/src/jellyfin.ts

@@ -55,9 +55,15 @@ export async function startJellyfinScene(
       `${scene.name}: source must include the original timeline through ${scene.selection.outSeconds} seconds.`,
     );
   }
-  const subtitle = mediaSource.MediaStreams?.find(
-    (stream) => stream.Type === "Subtitle" && stream.IsTextSubtitleStream,
-  );
+  const textSubtitles =
+    mediaSource.MediaStreams?.filter(
+      (stream) => stream.Type === "Subtitle" && stream.IsTextSubtitleStream,
+    ) ?? [];
+  const subtitle =
+    textSubtitles.find((stream) => {
+      const language = stream.Language?.trim().toLowerCase();
+      return language === "en" || language === "eng";
+    }) ?? textSubtitles[0];
   if (subtitle?.Index === undefined || subtitle.Index === null) {
     throw new Error(
       `${scene.name}: provide an embedded text subtitle track or matching subtitle sidecar.`,

tools/www-assets/src/scenes.test.ts

@@ -9,8 +9,16 @@ void test("keeps source selection separate from website recording length", () =>
     mobile: "mobile.mkv",
   });
   assert.ok(hero && mobile);
-  assert.deepEqual(hero.selection, { inSeconds: 496.07, outSeconds: 499.01 });
-  assert.deepEqual(mobile.selection, { inSeconds: 1402, outSeconds: 1412 });
+  assert.deepEqual(hero.selection, {
+    inSeconds: 496.07,
+    outSeconds: 499.01,
+    subtitleFontSize: 72,
+  });
+  assert.deepEqual(mobile.selection, {
+    inSeconds: 1402,
+    outSeconds: 1412,
+    subtitleFontSize: 150,
+  });
   assert.equal(hero.recordingSeconds, 82 / 30);
   assert.equal(mobile.recordingSeconds, 3);
   const changed = buildScenes({

tools/www-assets/src/scenes.ts

@@ -49,6 +49,7 @@ export function buildScenes(options: {
       selection: {
         inSeconds: 496.07,
         outSeconds: 499.01,
+        subtitleFontSize: 72,
         ...(options.heroSubtitle
           ? { subtitleTrackKey: options.heroSubtitle }
           : {}),
@@ -65,6 +66,7 @@ export function buildScenes(options: {
       selection: {
         inSeconds: 1402,
         outSeconds: 1412,
+        subtitleFontSize: 150,
         ...(options.mobileSubtitle
           ? { subtitleTrackKey: options.mobileSubtitle }
           : {}),