Cap review videos at seventeen seconds

src/app/c/[slug]/record/GuidedRecordingClient.tsx

@@ -487,7 +487,11 @@ function BrowserMediaRecorder({
         <div className="flex-1" />
 
         <div className="flex flex-col items-center gap-4 pb-[max(env(safe-area-inset-bottom),24px)]">
-          <RecordingBadge elapsedMs={elapsedMs} visible={state === 'recording'} />
+          <RecordingBadge
+            elapsedMs={elapsedMs}
+            maxMs={prompt.maxSeconds * 1000}
+            visible={state === 'recording'}
+          />
 
           {error ? (
             <div className="mx-4 rounded-2xl bg-red-500/90 px-4 py-2 text-sm">

src/components/RecordingBadge.tsx

@@ -1,19 +1,24 @@
-type Props = {
-  elapsedMs: number;
-  visible: boolean;
-};
-
-export function RecordingBadge({ elapsedMs, visible }: Props) {
-  if (!visible) return null;
-
-  const totalSeconds = Math.floor(elapsedMs / 1000);
-  const min = Math.floor(totalSeconds / 60);
-  const sec = totalSeconds % 60;
-  const time = `${min}:${String(sec).padStart(2, '0')}`;
-
-  return (
-    <div className="flex items-center gap-2 rounded-full bg-[rgba(238,64,64,0.95)] px-3.5 py-2 font-mono text-xs text-white">
-      <span className="block h-2 w-2 animate-blink rounded-full bg-white" />
+type Props = {
+  elapsedMs: number;
+  maxMs?: number;
+  visible: boolean;
+};
+
+function formatTime(ms: number) {
+  const totalSeconds = Math.floor(ms / 1000);
+  const min = Math.floor(totalSeconds / 60);
+  const sec = totalSeconds % 60;
+  return `${min}:${String(sec).padStart(2, '0')}`;
+}
+
+export function RecordingBadge({ elapsedMs, maxMs, visible }: Props) {
+  if (!visible) return null;
+
+  const time = maxMs ? `${formatTime(elapsedMs)} / ${formatTime(maxMs)}` : formatTime(elapsedMs);
+
+  return (
+    <div className="flex items-center gap-2 rounded-full bg-[rgba(238,64,64,0.95)] px-3.5 py-2 font-mono text-xs text-white">
+      <span className="block h-2 w-2 animate-blink rounded-full bg-white" />
       <span>REC {time}</span>
     </div>
   );

src/lib/server/reviewStore.ts

@@ -125,7 +125,7 @@ const SAGE_AND_STONE: PublicReviewCampaign = {
       tip: 'Voice only. Say the dish name and describe what is on the plate.',
       mediaType: 'audio',
       camera: 'front',
-      maxSeconds: 8,
+      maxSeconds: 7,
       optional: false,
     },
     {
@@ -134,7 +134,7 @@ const SAGE_AND_STONE: PublicReviewCampaign = {
       tip: 'Voice only. Mention the flavor, texture, portion, or what stood out.',
       mediaType: 'audio',
       camera: 'front',
-      maxSeconds: 12,
+      maxSeconds: 10,
       optional: false,
     },
     {

src/lib/server/serverClipRenderer.ts

@@ -26,7 +26,7 @@ const VIDEO_FPS = 24;
 const MIN_VIDEO_CLIP_SECONDS = 5;
 const MAX_VIDEO_CLIP_SECONDS = 7;
 const MAX_AUDIO_CLIP_SECONDS = 12;
-const AUDIO_VIDEO_SAFETY_SECONDS = 0.2;
+const FINAL_VIDEO_MAX_SECONDS = 17;
 
 function safeExt(ext: string) {
   const normalized = ext.toLowerCase().replace(/[^a-z0-9]/g, '');
@@ -159,21 +159,25 @@ export async function renderClipsOnServer(input: ServerRenderInput): Promise<Ser
       Promise.all(audioPaths.map(probeDuration)),
     ]);
 
+    const hasVoiceover = audioPaths.length > 0;
     const audioDurationSeconds = audioDurations.reduce((total, duration) => total + duration, 0);
     const videoClipSeconds =
-      audioDurationSeconds > 0
-        ? clamp(Math.ceil(audioDurationSeconds / videoPaths.length), MIN_VIDEO_CLIP_SECONDS, MAX_VIDEO_CLIP_SECONDS)
-        : MIN_VIDEO_CLIP_SECONDS;
+      hasVoiceover
+        ? MAX_VIDEO_CLIP_SECONDS
+        : audioDurationSeconds > 0
+          ? clamp(
+              Math.ceil(audioDurationSeconds / videoPaths.length),
+              MIN_VIDEO_CLIP_SECONDS,
+              MAX_VIDEO_CLIP_SECONDS,
+            )
+          : MIN_VIDEO_CLIP_SECONDS;
     const cappedVideoDurations = videoDurations.map((duration) =>
       duration > 0 ? Math.min(duration, videoClipSeconds) : videoClipSeconds,
     );
     const baseVideoDurationSeconds = cappedVideoDurations.reduce((total, duration) => total + duration, 0);
     const renderTargetSeconds =
-      audioDurationSeconds > 0
-        ? Math.max(1, audioDurationSeconds + AUDIO_VIDEO_SAFETY_SECONDS)
-        : Math.max(1, baseVideoDurationSeconds);
+      hasVoiceover ? FINAL_VIDEO_MAX_SECONDS : Math.max(1, baseVideoDurationSeconds);
     const loopFrameCount = Math.max(1, Math.ceil(baseVideoDurationSeconds * VIDEO_FPS));
-    const needsVideoLoop = audioDurationSeconds > 0 && baseVideoDurationSeconds + 0.1 < renderTargetSeconds;
 
     const inputArgs = [
       ...videoPaths.flatMap((filePath) => [
@@ -202,7 +206,7 @@ export async function renderClipsOnServer(input: ServerRenderInput): Promise<Ser
       .join(';');
     const videoInputs = videoPaths.map((_, i) => `[v${i}]`).join('');
     const videoConcat = `${videoInputs}concat=n=${videoPaths.length}:v=1:a=0[vcat]`;
-    const videoFinalize = needsVideoLoop
+    const videoFinalize = hasVoiceover
       ? `[vcat]loop=loop=-1:size=${loopFrameCount}:start=0,trim=duration=${formatDuration(
           renderTargetSeconds,
         )},setpts=PTS-STARTPTS[v]`
@@ -219,12 +223,15 @@ export async function renderClipsOnServer(input: ServerRenderInput): Promise<Ser
       .join(';');
     const audioInputs = audioPaths.map((_, i) => `[a${i}]`).join('');
     const audioConcat = audioPaths.length
-      ? `${audioInputs}concat=n=${audioPaths.length}:v=0:a=1[a]`
+      ? `${audioInputs}concat=n=${audioPaths.length}:v=0:a=1[acat]`
+      : '';
+    const audioFinalize = audioPaths.length
+      ? `[acat]atrim=duration=${FINAL_VIDEO_MAX_SECONDS},asetpts=PTS-STARTPTS[a]`
       : '';
 
-    // Native phone clips are often shorter than the voiceover. Loop the b-roll
-    // sequence to avoid the browser freezing on the last frame while audio plays.
-    const filterComplex = [videoFilters, videoConcat, videoFinalize, audioFilters, audioConcat]
+    // Cap every voiceover render to a short-form 17 seconds. The b-roll loops
+    // only to that cap, and -shortest ends the file with the actual audio.
+    const filterComplex = [videoFilters, videoConcat, videoFinalize, audioFilters, audioConcat, audioFinalize]
       .filter(Boolean)
       .join(';');
 
@@ -250,7 +257,7 @@ export async function renderClipsOnServer(input: ServerRenderInput): Promise<Ser
         '30',
         '-r',
         String(VIDEO_FPS),
-        ...(audioPaths.length ? ['-c:a', 'aac', '-b:a', '96k'] : ['-an']),
+        ...(audioPaths.length ? ['-shortest', '-c:a', 'aac', '-b:a', '96k'] : ['-an']),
         '-movflags',
         '+faststart',
         '-avoid_negative_ts',

src/lib/voiceover.ts

@@ -12,6 +12,8 @@ export type VoiceoverResult = {
   filename: string;
 };
 
+const FINAL_VIDEO_MAX_SECONDS = 17;
+
 async function createFFmpeg(): Promise<FFmpeg> {
   const ffmpeg = new FFmpeg();
   const coreBaseUrl = 'https://unpkg.com/@ffmpeg/core@0.12.9/dist/umd';
@@ -84,7 +86,10 @@ export async function addVoiceoverToVideo(
       .map((_, i) => `[${i}:a]aresample=48000,asetpts=PTS-STARTPTS[a${i}]`)
       .join(';');
     const concatInputs = audioFiles.map((_, i) => `[a${i}]`).join('');
-    const filterComplex = `${normalizedAudio};${concatInputs}concat=n=${audioFiles.length}:v=0:a=1[a]`;
+    const filterComplex =
+      `${normalizedAudio};` +
+      `${concatInputs}concat=n=${audioFiles.length}:v=0:a=1,` +
+      `atrim=duration=${FINAL_VIDEO_MAX_SECONDS},asetpts=PTS-STARTPTS[a]`;
 
     await runOrThrow([
       '-y',
@@ -110,6 +115,9 @@ export async function addVoiceoverToVideo(
       '0:v:0',
       '-map',
       '1:a:0',
+      '-t',
+      String(FINAL_VIDEO_MAX_SECONDS),
+      '-shortest',
       '-c:v',
       'copy',
       '-c:a',