@gentbajko/slopify 3.0.0 → 3.0.2

package/dist/slices/settings/readiness.js

@@ -1,6 +1,7 @@
+import { detectSpeechCached } from "../../kernel/ports/system-speech.js";
 import { cliPathStatus } from "./cli-paths.js";
 import { cliProbeTimeoutMs, readinessFromProbe } from "./cli-status.js";
-import { isLocalCliProvider, providers } from "./model.js";
+import { isLocalCliProvider, providers, sharedKeyOf } from "./model.js";
 import { keyedProviders } from "./repo.js";
 // Every supported provider is listed, keyed or not, found or not, so Play can grey one out with
 // a reason instead of hiding it. A keyed provider is ready when a key is stored; a CLI provider
@@ -10,6 +11,16 @@ export async function providerStatuses(deps) {
     const probes = new Map();
     return await Promise.all(providers.map(async (provider) => {
         const base = { id: provider.id, family: provider.family, displayName: provider.displayName };
+        if (provider.auth === "local") {
+            const found = await detectSpeechCached(deps.probe, deps.host ?? process);
+            const engine = found.engines[0];
+            return {
+                ...base,
+                readiness: engine === undefined
+                    ? { kind: "local", available: false, ...(found.issue ? { issue: found.issue } : {}) }
+                    : { kind: "local", available: true, engine: engine.name },
+            };
+        }
         if (provider.auth !== "cli")
             return { ...base, readiness: keyedReadiness(keyed, provider.id) };
         if (deps.hostCliStatus && isLocalCliProvider(provider.id)) {
@@ -41,5 +52,6 @@ export async function providerStatuses(deps) {
     }));
 }
 function keyedReadiness(keyed, id) {
-    return { kind: "keyed", hasKey: keyed.has(id) };
+    const shared = sharedKeyOf[id];
+    return { kind: "keyed", hasKey: keyed.has(id) || (shared !== undefined && keyed.has(shared)) };
 }

package/dist/slices/settings/tutorial-schema.js

@@ -24,6 +24,11 @@ export const tutorialSessionSchema = z
         "play-start",
         "project",
         "download",
+        "run-cost",
+        "studio-prep",
+        "home",
+        "channels",
+        "calendar",
     ]),
     articleId: z.string().optional(),
     imageId: z.string().optional(),

package/dist/slices/shorts/render.js

@@ -177,26 +177,27 @@ export async function renderShort(run) {
         }), { mode: 0o600 });
         mkdirSync(join(workspace, "fonts"), { mode: 0o700 });
         copyFileSync(run.font.path, join(workspace, "fonts", `selected${run.font.extension}`));
+        const edit = shortEditList({
+            audioPath: audio,
+            seconds,
+            images: run.images,
+            imageSeconds: run.imageSeconds / speed,
+            motionStyle: run.motionStyle,
+            zoomPercent: run.zoomPercent,
+            ...(run.figures === undefined
+                ? {}
+                : {
+                    figures: run.figures.map((figure) => ({
+                        ...figure,
+                        start: figure.start / speed,
+                        end: figure.end / speed,
+                    })),
+                }),
+        });
         return await renderSlideshow({
             bin: run.bin,
             master: run.master,
-            edit: shortEditList({
-                audioPath: audio,
-                seconds,
-                images: run.images,
-                imageSeconds: run.imageSeconds / speed,
-                motionStyle: run.motionStyle,
-                zoomPercent: run.zoomPercent,
-                ...(run.figures === undefined
-                    ? {}
-                    : {
-                        figures: run.figures.map((figure) => ({
-                            ...figure,
-                            start: figure.start / speed,
-                            end: figure.end / speed,
-                        })),
-                    }),
-            }),
+            edit: run.frame === undefined ? edit : { ...edit, ...run.frame },
             output: run.output,
             burnSubtitles: true,
             cwd: workspace,

package/dist/slices/storage/documents.js

@@ -4,15 +4,23 @@ import { homedir } from "node:os";
 import { isAbsolute, join, posix, relative, resolve, win32 } from "node:path";
 import { promisify } from "node:util";
 const execute = promisify(execFile);
-export function nodeDocumentsHost() {
+const execBytes = async (command, args) => (await execute(command, [...args], { timeout: 10_000, windowsHide: true, encoding: "buffer" }))
+    .stdout;
+// Output is always decoded as UTF-8: the PowerShell command below switches its own output to
+// UTF-8 first, so a Documents folder named with non-ASCII letters (a Cyrillic or accented
+// OneDrive path) survives instead of arriving in the console codepage.
+export function nodeDocumentsHost(exec = execBytes) {
     return {
         platform: process.platform,
         env: process.env,
         home: homedir(),
-        run: async (command, args) => (await execute(command, [...args], { timeout: 10_000, windowsHide: true })).stdout,
+        run: async (command, args) => new TextDecoder("utf-8").decode(await exec(command, args)),
         read: (path) => readFile(path, "utf8").catch(() => undefined),
     };
 }
+// Forces PowerShell's stdout to UTF-8 before printing: by default it writes in the console's
+// codepage (437, 850, 1252...), which mangles every non-ASCII letter in the path.
+export const WINDOWS_DOCUMENTS_COMMAND = "[Console]::OutputEncoding = [Text.Encoding]::UTF8; [Environment]::GetFolderPath('MyDocuments')";
 // The user's own Documents folder, the way the system itself names it: Windows asks for the
 // known folder (which follows OneDrive and a folder moved in its Properties), Linux asks
 // xdg-user-dir and then reads user-dirs.dirs, macOS has no setting for it. Never throws: the
@@ -24,7 +32,7 @@ export async function documentsDir(host) {
             "-NoProfile",
             "-NonInteractive",
             "-Command",
-            "[Environment]::GetFolderPath('MyDocuments')",
+            WINDOWS_DOCUMENTS_COMMAND,
         ])
             .then((out) => out.trim())
             .catch(() => "");

package/dist/slices/storage/downloads.js

@@ -1,6 +1,7 @@
 import { readFileSync, statSync } from "node:fs";
 import { extname } from "node:path";
 import { zipSync } from "fflate";
+import { effectiveDescription } from "../youtube/edits-repo.js";
 import { assetOf } from "./asset-name.js";
 import { outputPath } from "./layout.js";
 import { outputsOf, projectTitle } from "./repo.js";
@@ -57,16 +58,47 @@ export function findDownload(deps, projectId, asset) {
     if (stats === undefined) {
         return { ok: false, reason: "missing-file" };
     }
+    const shown = output.role === "youtube_description" || output.role === "youtube_tags"
+        ? shownYoutubeText(deps, projectId, output.role)
+        : undefined;
     return {
         ok: true,
         download: {
             path,
             filename: downloadName(slugOf(title), output),
-            bytes: stats,
+            bytes: shown?.byteLength ?? stats,
             contentType: contentTypeOf(path),
+            ...(shown === undefined ? {} : { text: shown }),
         },
     };
 }
+// The description and tags download as the project page shows and copies them, and as Prepare
+// upload hands them on: the user's hand edits over the written text, chapters fitted, and the
+// channel's and project's links filled in (`youtube/edits-repo.ts`). The file on disk stays
+// the generated text, so regeneration can tell the user's edits from its own.
+function shownYoutubeText(deps, projectId, role) {
+    const outputs = outputsOf(deps.db, projectId);
+    const read = (wanted) => {
+        const output = outputs.find((candidate) => candidate.role === wanted);
+        if (output === undefined)
+            return undefined;
+        const path = outputPath(deps.paths, projectId, output.path);
+        return sizeOf(path) === undefined ? undefined : readFileSync(path, "utf8").trim();
+    };
+    const description = read("youtube_description");
+    if (description === undefined)
+        return undefined;
+    const video = outputs.find((output) => output.role === "video");
+    const shown = effectiveDescription(deps.db, projectId, {
+        description,
+        tags: read("youtube_tags") ?? "",
+        durationSeconds: video?.durationMs === null || video?.durationMs === undefined
+            ? undefined
+            : video.durationMs / 1000,
+    });
+    const text = role === "youtube_description" ? shown.description : shown.tags;
+    return new TextEncoder().encode(`${text}\n`);
+}
 // "download all" images as `<title-slug>-images.zip`, thumbnail included.
 export function imagesZip(deps, projectId) {
     const title = projectTitle(deps.db, projectId);

package/dist/slices/storage/portable.js

@@ -24,7 +24,7 @@ import { listVoices } from "../settings/repo.js";
 import { realPersonVoicesKey, voiceIdMax, voiceNameMax } from "../settings/voices.js";
 import { whatsNewSeenKey } from "../settings/whats-new.js";
 import { studioPlaylistMax } from "../studio/model.js";
-import { studioPairingKey, studioPlaylistKey, studioRealFootageKey } from "../studio/settings.js";
+import { studioChannelPlaylistPrefix, studioFillQueuePrefix, studioPairingKey, studioPlaylistKey, studioRealFootageKey, } from "../studio/settings.js";
 import { channelLinksKey } from "../youtube/edits-repo.js";
 import { defaultBackupsDir, projectDir, stagingPath } from "./layout.js";
 import { stageKinds } from "./model.js";
@@ -376,6 +376,8 @@ function portableSettings(settings) {
             key === "first-run.done" ||
             key === notificationUrlKey ||
             key === studioPairingKey ||
+            // What waits to be filled in Studio belongs to this install's pairing.
+            key.startsWith(studioFillQueuePrefix) ||
             key === whatsNewSeenKey ||
             key === patchNotesSeenKey)
             continue;
@@ -386,7 +388,7 @@ function portableSettings(settings) {
             storedAppearance.parse(parsed);
         else if (key === "loudness")
             storedLoudness.parse(parsed);
-        else if (key === studioPlaylistKey)
+        else if (key === studioPlaylistKey || key.startsWith(studioChannelPlaylistPrefix))
             storedPlaylist.parse(parsed);
         else if (key === channelLinksKey)
             storedChannelLinks.parse(parsed);

package/dist/slices/studio/model.js

@@ -26,3 +26,5 @@ export const studioSteps = [
 export function tagsLine(tags) {
     return tags.join(", ");
 }
+// The browsers the extension is built for, as its download names them.
+export const studioExtensionBrowsers = ["chrome", "firefox"];

package/dist/slices/studio/pack.js

@@ -49,10 +49,12 @@ export function uploadPack(deps, projectId) {
     const text = (output) => output === undefined
         ? undefined
         : readFileSync(outputPath(deps.paths, projectId, output.path), "utf8").trim();
-    const playlist = readStudioPlaylist(deps.db);
+    const channelId = projectChannelId(deps.db, projectId);
+    // The channel's own playlist, else the default (Settings → YouTube Studio).
+    const playlist = readStudioPlaylist(deps.db, channelId);
     const missing = [];
     // The channel's setting, then what the project narrates and shows (`disclosure.ts`).
-    const setting = channelById(deps.db, projectChannelId(deps.db, projectId))?.aiDisclosure ?? "auto";
+    const setting = channelById(deps.db, channelId)?.aiDisclosure ?? "auto";
     const realPersonVoices = realPersonVoicesOf(deps, config);
     const uploadedClips = config.sources.images === "provide"
         ? outputs.filter((output) => output.role === "image" && isClipPath(output.path)).length
@@ -92,7 +94,7 @@ export function uploadPack(deps, projectId) {
     if (description === undefined)
         missing.push(config.youtubeDescription === true
             ? "The YouTube description isn't written yet. It is written after the video's subtitle timing; wait for the Video stage to finish."
-            : "No YouTube description is written for this project. Turn on YouTube description in Edit project → Video to have one written with chapters and tags.");
+            : "No YouTube description is written for this project. Turn on YouTube description in Edit project → Prompts to have one written with chapters and tags.");
     const count = thumbnailCountOf(config);
     // The first thumbnail, then the second and third, and never one left from when the project
     // made three and now makes one.
@@ -106,7 +108,7 @@ export function uploadPack(deps, projectId) {
     else if (thumbnails.length < count)
         missing.push(`Only ${String(thumbnails.length)} of the ${String(count)} thumbnails are made. Regenerate the missing ones in the project's Images section.`);
     if (playlist === null)
-        missing.push("No playlist is set, so the playlist step is left to you. Set one in Settings → YouTube Studio.");
+        missing.push("No playlist is set for this project's channel, so the playlist step is left to you. Set one in Settings → YouTube Studio → Playlist.");
     const items = [
         {
             kind: "video",

package/dist/slices/studio/queue.js

@@ -0,0 +1,69 @@
+import { createHash } from "node:crypto";
+import { z } from "zod";
+import { readSetting, writeSetting } from "../settings/repo.js";
+import { studioFillQueuePrefix, studioPairing } from "./settings.js";
+// What Fill in YouTube Studio chose, waiting for the extension: one entry per video or short,
+// oldest first. Each new upload dialog in Studio is filled from the first entry, which then
+// leaves the queue, so preparing several shorts in a row fills them one upload at a time.
+// Kept in the settings table under the current pairing (`studio.fillQueue.<token hash>`), so a
+// restart keeps it and a new pairing token starts with nothing waiting. An entry older than
+// `fillQueueMs` is dropped as stale.
+export const fillQueueMs = 24 * 60 * 60 * 1000;
+// More would be a list nobody works through; the oldest leave first.
+export const fillQueueMax = 50;
+const entrySchema = z.object({
+    projectId: z.string().min(1).max(64),
+    short: z.number().int().min(1).max(99).nullable(),
+    at: z.string(),
+});
+function queueKey(db) {
+    const hash = createHash("sha256").update(studioPairing(db).token).digest("hex").slice(0, 16);
+    return `${studioFillQueuePrefix}${hash}`;
+}
+function write(db, key, entries) {
+    if (entries.length === 0)
+        db.prepare("DELETE FROM settings WHERE key = ?").run(key);
+    else
+        writeSetting(db, key, JSON.stringify(entries));
+}
+// The waiting entries, oldest first, without the stale ones.
+export function readFillQueue(db, now) {
+    const stored = readSetting(db, queueKey(db));
+    if (stored === undefined)
+        return [];
+    let raw;
+    try {
+        raw = JSON.parse(stored);
+    }
+    catch {
+        return [];
+    }
+    if (!Array.isArray(raw))
+        return [];
+    return raw.flatMap((one) => {
+        const parsed = entrySchema.safeParse(one);
+        if (!parsed.success)
+            return [];
+        const age = now.getTime() - Date.parse(parsed.data.at);
+        return Number.isFinite(age) && age <= fillQueueMs ? [parsed.data] : [];
+    });
+}
+const same = (entry, projectId, short) => entry.projectId === projectId && entry.short === short;
+// Adds an item at the end; one already waiting keeps its place.
+export function enqueueFill(db, projectId, short, now) {
+    const key = queueKey(db);
+    const current = readFillQueue(db, now);
+    if (current.some((entry) => same(entry, projectId, short))) {
+        write(db, key, current);
+        return current;
+    }
+    const next = [...current, { projectId, short, at: now.toISOString() }].slice(-fillQueueMax);
+    write(db, key, next);
+    return next;
+}
+// Takes an item out: filled by the extension, or removed by the person.
+export function removeFill(db, projectId, short, now) {
+    const next = readFillQueue(db, now).filter((entry) => !same(entry, projectId, short));
+    write(db, queueKey(db), next);
+    return next;
+}

package/dist/slices/studio/settings.js

@@ -12,8 +12,38 @@ const pairingSchema = z.object({
     origin: z.string().nullable(),
     pairedAt: z.string().nullable(),
 });
-export function readStudioPlaylist(db) {
-    const stored = readSetting(db, studioPlaylistKey);
+// A channel's own playlist is a row of its own, `studio.playlist.<channelId>`; a channel
+// without one uses the default above.
+export const studioChannelPlaylistPrefix = `${studioPlaylistKey}.`;
+function playlistKey(channelId) {
+    return channelId === undefined ? studioPlaylistKey : `${studioChannelPlaylistPrefix}${channelId}`;
+}
+// The playlist an upload pack names: the channel's own, else the default. Without a channel,
+// the default alone.
+export function readStudioPlaylist(db, channelId) {
+    if (channelId !== undefined) {
+        const own = storedPlaylist(db, playlistKey(channelId));
+        if (own !== null)
+            return own;
+    }
+    return storedPlaylist(db, studioPlaylistKey);
+}
+// Every channel's own playlist, by channel id.
+export function readChannelPlaylists(db) {
+    const prefix = studioChannelPlaylistPrefix;
+    const rows = db
+        .prepare("SELECT key FROM settings WHERE substr(key, 1, ?) = ? ORDER BY key")
+        .all(prefix.length, prefix);
+    const out = {};
+    for (const { key } of rows) {
+        const value = storedPlaylist(db, key);
+        if (value !== null)
+            out[key.slice(prefix.length)] = value;
+    }
+    return out;
+}
+function storedPlaylist(db, key) {
+    const stored = readSetting(db, key);
     if (stored === undefined)
         return null;
     try {
@@ -29,13 +59,16 @@ export function studioPlaylistProblem(raw) {
         ? `The playlist name is longer than YouTube allows (${String(studioPlaylistMax)} characters). Shorten it in Settings → YouTube Studio.`
         : undefined;
 }
-export function saveStudioPlaylist(db, raw) {
+// Saves the default playlist, or a channel's own; empty clears it (the channel then uses the
+// default again).
+export function saveStudioPlaylist(db, raw, channelId) {
     const value = raw.trim();
+    const key = playlistKey(channelId);
     if (value === "") {
-        db.prepare("DELETE FROM settings WHERE key = ?").run(studioPlaylistKey);
+        db.prepare("DELETE FROM settings WHERE key = ?").run(key);
         return null;
     }
-    writeSetting(db, studioPlaylistKey, JSON.stringify(value));
+    writeSetting(db, key, JSON.stringify(value));
     return value;
 }
 // The projects whose uploaded clips are real footage (filmed, not generated): ticked in the
@@ -83,12 +116,16 @@ export function studioPairing(db) {
     }
     return resetStudioPairing(db);
 }
+// What is waiting to be filled in Studio is kept per pairing (`queue.ts`): one row,
+// `studio.fillQueue.<token hash>`, so a new token starts with nothing waiting.
+export const studioFillQueuePrefix = "studio.fillQueue.";
 export function resetStudioPairing(db) {
     const pairing = {
         token: randomBytes(24).toString("base64url"),
         origin: null,
         pairedAt: null,
     };
+    db.prepare("DELETE FROM settings WHERE substr(key, 1, ?) = ?").run(studioFillQueuePrefix.length, studioFillQueuePrefix);
     writeSetting(db, studioPairingKey, JSON.stringify(pairing));
     return pairing;
 }

package/dist/slices/style-preview/narration.js

@@ -0,0 +1,33 @@
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+// The sample a preview is made of: six seconds of the bundled sample project's narration
+// ("The Library of Alexandria", `assets/sample/sample-project.tar`) with the word timing its
+// alignment found, and three of its images in each shape. Taken once, offline, from the body
+// narration at 3.4 s (the video's 4.4 s, after its one second of edge silence); the words are
+// on the clip's own timeline. Nothing here is generated at preview time.
+export const sampleNarrationSeconds = 6;
+export const sampleNarrationWords = [
+    { text: "Around", start: 0.5, end: 0.88 },
+    { text: "three", start: 1.14, end: 1.36 },
+    { text: "hundred", start: 1.46, end: 1.78 },
+    { text: "years", start: 1.88, end: 2.26 },
+    { text: "before", start: 2.4, end: 2.78 },
+    { text: "our", start: 2.92, end: 3.02 },
+    { text: "era,", start: 3.22, end: 3.4 },
+    { text: "on", start: 4.18, end: 4.22 },
+    { text: "the", start: 4.3, end: 4.36 },
+    { text: "coast", start: 4.44, end: 4.72 },
+    { text: "of", start: 4.84, end: 4.88 },
+    { text: "Egypt,", start: 5.06, end: 5.4 },
+];
+export const sampleNarrationText = sampleNarrationWords.map((word) => word.text).join(" ");
+// The sample project's title, the headline a Shorts preview shows when none is given.
+export const sampleShortTitle = "The Library of Alexandria";
+export function bundledSampleAssets(dir = fileURLToPath(new URL("../../assets/style-preview/", import.meta.url))) {
+    const at = (name) => join(dir, name);
+    return {
+        narration: at("narration.mp3"),
+        wide: [1, 2, 3].map((n) => at(`wide-${String(n)}.jpg`)),
+        tall: [1, 2, 3].map((n) => at(`tall-${String(n)}.jpg`)),
+    };
+}

package/dist/slices/style-preview/render.js

@@ -1,14 +1,15 @@
-import { copyFileSync, existsSync, mkdirSync, mkdtempSync, renameSync, rmSync, writeFileSync, } from "node:fs";
+import { copyFileSync, mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 import { defaultMotionStyle, defaultZoomPercent } from "../admission/rules.js";
-import { isMissingFont, resolveFont } from "../fonts/index.js";
+import { isMissingFont, resolveBoldFont, resolveFont } from "../fonts/index.js";
+import { renderShort } from "../shorts/render.js";
 import { serializeAss } from "../subtitles/captions.js";
 import { subtitleFrame } from "../subtitles/layout.js";
-import { runFfmpeg } from "../video/ffmpeg.js";
 import { planRender } from "../video/plan.js";
 import { renderSlideshow } from "../video/slideshow.js";
+import { bundledSampleAssets, sampleNarrationSeconds } from "./narration.js";
 import { stylePreviewSeconds } from "./schema.js";
-import { sampleCues } from "./settings.js";
+import { previewCues, previewWords } from "./settings.js";
 export class StylePreviewError extends Error {
     reason;
     constructor(reason, message) {
@@ -23,69 +24,30 @@ const previewFrame = {
     "16:9": { width: 480, height: 270 },
     "9:16": { width: 270, height: 480 },
 };
-const stillSize = 1280;
 const shotSeconds = stylePreviewSeconds / 3;
 const chapterTitle = "Chapter one";
-// Three stills, each a different colour story with a horizon and a light, so motion, grade
-// and transitions all read. Square, so either format crops them to cover.
-const stills = [
-    `gradients=s=${stillSize}x${stillSize}:c0=0x1d2b53:c1=0xe07a5f:x0=0:y0=0:x1=0:y1=${stillSize}:d=1,` +
-        "drawbox=x=820:y=300:w=140:h=140:color=0xfff1c1@0.9:t=fill," +
-        "drawbox=x=0:y=880:w=iw:h=400:color=0x14213d@0.85:t=fill",
-    `gradients=s=${stillSize}x${stillSize}:c0=0x0b3d2e:c1=0x88c9a1:x0=0:y0=${stillSize}:x1=${stillSize}:y1=0:d=1,` +
-        "drawbox=x=200:y=380:w=260:h=260:color=0xf4f1de@0.8:t=fill," +
-        "drawbox=x=0:y=840:w=iw:h=440:color=0x081c15@0.9:t=fill",
-    `gradients=s=${stillSize}x${stillSize}:c0=0x3d1e6d:c1=0xf2a65a:x0=${stillSize}:y0=0:x1=0:y1=${stillSize}:d=1,` +
-        "drawbox=x=540:y=330:w=200:h=200:color=0xffd166@0.9:t=fill," +
-        "drawbox=x=0:y=820:w=iw:h=460:color=0x1b0f2e@0.85:t=fill",
-];
 export function ffmpegStylePreview(deps) {
-    let samples;
-    const ensureSamples = (signal) => {
-        samples ??= makeSamples(deps, signal).catch((error) => {
-            samples = undefined;
-            throw error;
-        });
-        return samples;
-    };
+    const assets = deps.assets ?? bundledSampleAssets();
     return async (settings, output, signal, picture) => {
         try {
             // A real picture is shown for all three shots: the motion, the Look and the captions read
             // on it, and the transition and chapter card still show at the cuts.
-            const images = picture === undefined ? await ensureSamples(signal) : [picture, picture, picture];
-            await renderPreview(deps, settings, images, output, signal);
+            const images = picture !== undefined
+                ? [picture, picture, picture]
+                : settings.format === "9:16"
+                    ? assets.tall
+                    : assets.wide;
+            if (settings.short !== undefined)
+                await renderShortPreview(deps, settings, settings.short, assets, images, output, signal);
+            else
+                await renderPreview(deps, settings, assets, images, output, signal);
         }
         catch (error) {
             throw explained(deps.log, error);
         }
     };
 }
-async function makeSamples(deps, signal) {
-    const folder = join(deps.dir, "samples");
-    mkdirSync(folder, { recursive: true, mode: 0o700 });
-    const paths = [];
-    for (const [at, source] of stills.entries()) {
-        const path = join(folder, `still-${String(at + 1)}.png`);
-        paths.push(path);
-        if (existsSync(path))
-            continue;
-        const part = join(folder, `still-${String(at + 1)}.part.png`);
-        await runFfmpeg({
-            bin: deps.ffmpeg,
-            args: [
-                ...["-hide_banner", "-nostdin", "-loglevel", "error", "-y"],
-                ...["-f", "lavfi", "-i", source, "-frames:v", "1", part],
-            ],
-            signal,
-            log: deps.log,
-            onProgress: () => { },
-        });
-        renameSync(part, path);
-    }
-    return paths;
-}
-async function renderPreview(deps, settings, images, output, signal) {
-    // A render on a given picture never made the stills, which is what created the folder.
+async function renderPreview(deps, settings, assets, images, output, signal) {
     mkdirSync(deps.dir, { recursive: true, mode: 0o700 });
     const workspace = mkdtempSync(join(deps.dir, "work-"));
     try {
@@ -118,14 +80,14 @@ async function renderPreview(deps, settings, images, output, signal) {
         const edit = {
             ...plan.editList,
             ...previewFrame[settings.format],
-            audio: [{ kind: "gap", path: null, seconds: plan.totalSeconds }],
+            audio: [{ kind: "body", path: assets.narration, seconds: plan.totalSeconds }],
         };
         const captions = settings.captions;
         if (captions !== null) {
             const font = await resolveFont(deps.paths, captions.fontId);
             mkdirSync(join(workspace, "fonts"), { mode: 0o700 });
             copyFileSync(font.path, join(workspace, "fonts", `selected${font.extension}`));
-            writeFileSync(join(workspace, "subtitles.ass"), serializeAss(sampleCues(captions.text, plan.totalSeconds), {
+            writeFileSync(join(workspace, "subtitles.ass"), serializeAss(previewCues(captions.text), {
                 ...subtitleFrame(settings.format),
                 fontName: font.assName,
                 fontSize: captions.fontSize,
@@ -148,6 +110,31 @@ async function renderPreview(deps, settings, images, output, signal) {
         rmSync(workspace, { recursive: true, force: true });
     }
 }
+// The Shorts layout, drawn at the preview's size: the same audio cut, image timing, captions
+// and headline a short gets, from the sample narration.
+async function renderShortPreview(deps, settings, short, assets, images, output, signal) {
+    mkdirSync(deps.dir, { recursive: true, mode: 0o700 });
+    await renderShort({
+        bin: deps.ffmpeg,
+        timeline: [{ kind: "body", path: assets.narration, seconds: sampleNarrationSeconds }],
+        start: 0,
+        end: sampleNarrationSeconds,
+        images,
+        imageSeconds: shotSeconds,
+        motionStyle: defaultMotionStyle,
+        zoomPercent: defaultZoomPercent,
+        words: previewWords(short.text),
+        font: await resolveBoldFont(deps.paths, short.fontId),
+        ...(short.title === null ? {} : { title: short.title }),
+        speed: short.speed,
+        frame: previewFrame[settings.format],
+        output,
+        scratch: deps.dir,
+        signal,
+        log: deps.log,
+        onProgress: () => { },
+    });
+}
 function explained(log, error) {
     if (error instanceof StylePreviewError)
         return error;

package/dist/slices/style-preview/schema.js

@@ -3,13 +3,16 @@ import { formats } from "../../kernel/pipeline.js";
 import { videoEditSchema } from "../admission/schema.js";
 import { subtitleModes, subtitlePositions } from "../subtitles/model.js";
 // "See it before you make it": a few seconds rendered by the real renderer with a project's
-// caption and Look settings, on stills and silence Slopify makes itself. Browser-safe, so
+// caption and Look settings, on the bundled sample's images and narration. Browser-safe, so
 // Play and Edit project read the same request and reply shapes the server checks.
-// How long the preview runs: three stills of two seconds, so a transition and a chapter
-// card both show.
+// How long the preview runs: three images of two seconds, so a transition and a chapter
+// card both show, under six seconds of the sample narration.
 export const stylePreviewSeconds = 6;
 export const stylePreviewTextMax = 200;
+// The sample text Play starts with. It, or no text, captions the sample narration with its own
+// words; any other text is spread over the stretches the narration speaks.
 export const defaultPreviewText = "Every story begins with a word.";
+export const shortTitlePreviewMax = 100;
 // A picture the preview is drawn on instead of the sample stills: the establishing image a
 // draft uploaded (its staged file), one a project already has (its output), or a channel cast
 // member's picture (by content hash). One the server can no longer find falls back to the
@@ -33,6 +36,17 @@ export const stylePreviewRequestSchema = z.object({
     videoEdit: videoEditSchema.optional(),
     previewText: z.string().max(stylePreviewTextMax).optional(),
     image: stylePreviewImageSchema.optional(),
+    // The Shorts layout instead of the video's: 9:16 through the Shorts renderer, with its
+    // big word-by-word captions in the caption font, the title as a headline when it is on,
+    // and the clips' speed. The caption size, position and the Look don't apply to a short.
+    shorts: z
+        .object({
+        titleOnScreen: z.boolean(),
+        speed: z.number().finite().min(1).max(1.25).optional(),
+        // The headline; absent or blank shows the sample's title.
+        title: z.string().max(shortTitlePreviewMax).optional(),
+    })
+        .optional(),
     // Render again even when this exact preview is already saved.
     force: z.boolean().optional(),
 });

package/dist/slices/style-preview/service.js

@@ -1,8 +1,7 @@
 import { randomUUID } from "node:crypto";
 import { mkdirSync, readdirSync, renameSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
-import { stylePreviewSeconds } from "./schema.js";
-import { normalizeStylePreview, stylePreviewHash } from "./settings.js";
+import { normalizeStylePreview, previewSeconds, stylePreviewHash } from "./settings.js";
 // Rendered previews are kept in the data folder by the hash of their settings, so a setting
 // changed back, or the same style in another project, plays at once. `force` renders again
 // anyway. Requests for a preview already being rendered wait for that render instead of
@@ -49,7 +48,7 @@ export function createStylePreviews(deps) {
         const saved = file(hash);
         if (saved === undefined)
             throw new Error("The style preview render finished without writing its video.");
-        return { hash, cached: false, seconds: stylePreviewSeconds, version: saved.version };
+        return { hash, cached: false, seconds: previewSeconds(settings), version: saved.version };
     };
     return {
         file,
@@ -65,7 +64,7 @@ export function createStylePreviews(deps) {
                 return Promise.resolve({
                     hash,
                     cached: true,
-                    seconds: stylePreviewSeconds,
+                    seconds: previewSeconds(settings),
                     version: saved.version,
                 });
             const started = run(hash, settings, picture).finally(() => {