feat(reels): montage Remotion unifié, aperçu en direct, tests et CI

Montage (étape 3) :
- Nouvelle composition ReelVideo : sous-titres animés mot à mot (3 styles :
  Impact, Surligné, Épuré), logo, effet de fin et fondu, en React
- Le service Python prépare l'image (recadrage, HDR, stabilisation, dernière
  image figée) et la piste son finale (/prepare-reel) ; Remotion compose
- Reels d'images sur les mêmes composants, avec le vrai minutage de la voix
- Police Montserrat embarquée (plus de dépendance à Google Fonts)
- REEL_RENDERER=ffmpeg conserve le rendu FFmpeg, plus rapide, en secours
- Script de pré-bundle réparé (échouait en silence : require en ESM)

Interface (étape 4) :
- Aperçu en direct avec @remotion/player, identique au rendu final ; la voix
  testée cale les sous-titres, sinon minutage estimé
- Choix du style de sous-titres sur les 4 pages Reel
- Vraie progression : étape réelle du rendu, échecs visibles 24 h avec leur
  cause ; fin de la barre simulée et du faux « publié avec succès »

Outillage (étape 5) :
- Tests vitest (minutage identique à Python, validation, sécurité) et
  pytest ; CI GitHub Actions (tsc, tests, build, ruff)
- Captures d'écran, out.mp4 et scripts de test retirés de la racine

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Ze4bs7tpF1KGWUk6ZZSZ4

client/src/components/ongoing-reels.tsx

@@ -4,16 +4,20 @@ import { Progress } from "@/components/ui/progress";
 import { Clapperboard, Loader2, CheckCircle2, XCircle } from "lucide-react";
 import type { Post } from "@shared/schema";
 
-/** Labels for each progress stage */
-function getStageLabel(progress: number, status?: string): string {
-    if (status === 'pending') return "En attente de traitement...";
-    if (progress <= 5) return "Démarrage du traitement…";
-    if (progress <= 15) return "Traitement vidéo (FFmpeg)…";
-    if (progress <= 65) return "Encodage en cours…";
-    if (progress <= 85) return "Upload vers le cloud…";
-    if (progress <= 90) return "Liaison du média…";
-    if (progress <= 95) return "Publication en cours…";
-    return "Finalisation…";
+type OngoingReel = Post & { generationStep?: string | null };
+
+/** Libellé de l'étape en cours, telle que rapportée par la file de rendu. */
+const STEP_LABELS: Record<string, string> = {
+    prepare: "Préparation…",
+    voice: "Voix et préparation de la vidéo…",
+    render: "Montage : sous-titres, logo, effets…",
+    store: "Enregistrement dans la médiathèque…",
+    publish: "Publication…",
+};
+
+function getStageLabel(post: OngoingReel): string {
+    if (post.generationStatus === "pending") return "En attente : un autre Reel est en cours…";
+    return (post.generationStep && STEP_LABELS[post.generationStep]) || "Démarrage du traitement…";
 }
 
 interface OngoingReelsProps {
@@ -22,12 +26,13 @@ interface OngoingReelsProps {
 }
 
 export default function OngoingReels({ compact = false }: OngoingReelsProps) {
-    const { data: ongoingPosts = [] } = useQuery<Post[]>({
+    const { data: ongoingPosts = [] } = useQuery<OngoingReel[]>({
         queryKey: ["/api/reels/ongoing"],
         // Cette route ne renvoie que les générations en cours : tant qu'elle est
         // vide il n'y a pas de barre de progression à animer. On garde une veille
         // lente, qui suffit à détecter une génération lancée depuis un autre écran.
-        refetchInterval: (query) => ((query.state.data?.length ?? 0) > 0 ? 3000 : 30000),
+        refetchInterval: (query) =>
+            (query.state.data ?? []).some((p) => p.generationStatus !== "failed") ? 3000 : 30000,
     });
 
     // Nothing to show — render nothing (not even a card)
@@ -43,8 +48,12 @@ export default function OngoingReels({ compact = false }: OngoingReelsProps) {
         >
             <CardHeader className={compact ? "pb-2 px-4 pt-4" : ""}>
                 <CardTitle className={`flex items-center gap-2 ${compact ? "text-base" : ""}`}>
-                    <Loader2 className="w-5 h-5 animate-spin text-primary" />
-                    Génération en cours
+                    {ongoingPosts.some((p) => p.generationStatus !== "failed") ? (
+                        <Loader2 className="w-5 h-5 animate-spin text-primary" />
+                    ) : (
+                        <XCircle className="w-5 h-5 text-destructive" />
+                    )}
+                    Reels en cours
                 </CardTitle>
             </CardHeader>
             <CardContent className={compact ? "px-4 pb-4 pt-0" : ""}>
@@ -73,8 +82,8 @@ export default function OngoingReels({ compact = false }: OngoingReelsProps) {
                                     {isFailed ? (
                                         <div className="flex items-center gap-1.5 mt-2 text-destructive">
                                             <XCircle className="w-4 h-4" />
-                                            <span className="text-xs">
-                                                {post.generationError || "Erreur lors du traitement"}
+                                            <span className="text-xs break-words">
+                                                Échec : {post.generationError || "erreur lors du traitement"}
                                             </span>
                                         </div>
                                     ) : (
@@ -87,7 +96,7 @@ export default function OngoingReels({ compact = false }: OngoingReelsProps) {
                                             </div>
                                             <div className="flex items-center justify-between mt-1.5">
                                                 <span className="text-xs text-muted-foreground">
-                                                    {getStageLabel(progress)}
+                                                    {getStageLabel(post)}
                                                 </span>
                                                 <span className="text-xs font-medium text-primary">
                                                     {progress}%

client/src/components/reels/caption-style-picker.tsx

@@ -0,0 +1,63 @@
+import { CAPTION_STYLE_OPTIONS, type CaptionStyle } from "@shared/captions";
+import { cn } from "@/lib/utils";
+
+/** Aperçu miniature de chaque style de sous-titres. */
+const SAMPLE: Record<CaptionStyle, React.ReactNode> = {
+  bold: (
+    <span className="font-black uppercase tracking-tight" style={{ WebkitTextStroke: "1px #000", paintOrder: "stroke fill" }}>
+      <span className="text-white">Nos </span>
+      <span className="text-yellow-300">promos</span>
+    </span>
+  ),
+  neon: (
+    <span className="font-extrabold">
+      <span className="rounded px-1 bg-black/50 text-white">Nos</span>{" "}
+      <span className="rounded px-1 bg-violet-600 text-white">promos</span>
+    </span>
+  ),
+  minimal: (
+    <span className="font-bold">
+      <span className="text-white">Nos </span>
+      <span className="text-white/45">promos</span>
+    </span>
+  ),
+};
+
+export function CaptionStylePicker({
+  value,
+  onChange,
+  compact = false,
+}: {
+  value: CaptionStyle;
+  onChange: (style: CaptionStyle) => void;
+  compact?: boolean;
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-2" role="radiogroup" aria-label="Style des sous-titres">
+      {CAPTION_STYLE_OPTIONS.map((option) => (
+        <button
+          key={option.id}
+          type="button"
+          role="radio"
+          aria-checked={value === option.id}
+          title={option.description}
+          onClick={() => onChange(option.id)}
+          className={cn(
+            "rounded-lg border p-2 text-left transition-colors",
+            value === option.id ? "border-primary ring-2 ring-primary/30" : "border-border hover:border-primary/50",
+          )}
+        >
+          <div
+            className={cn(
+              "flex items-center justify-center rounded-md bg-gradient-to-br from-slate-700 to-slate-900",
+              compact ? "h-9 text-[11px]" : "h-12 text-sm",
+            )}
+          >
+            {SAMPLE[option.id]}
+          </div>
+          <p className={cn("mt-1 font-medium", compact ? "text-[11px]" : "text-xs")}>{option.label}</p>
+        </button>
+      ))}
+    </div>
+  );
+}

client/src/components/reels/reel-preview.tsx

@@ -0,0 +1,180 @@
+import { useEffect, useMemo, useState } from "react";
+import { Player } from "@remotion/player";
+import { Loader2, Info } from "lucide-react";
+import {
+  REEL_FPS,
+  REEL_HEIGHT,
+  REEL_WIDTH,
+  VOICE_DELAY,
+  cleanCaptionText,
+  computeImagesTiming,
+  computeReelTiming,
+  offsetWords,
+  spreadWords,
+  type CaptionStyle,
+  type TimedWord,
+} from "@shared/captions";
+import { ReelVideo, type ReelVideoProps } from "@/remotion/ReelVideo";
+import { ImageComposition, type ImageCompositionProps } from "@/remotion/ImageComposition";
+import type { VoicePreviewResult } from "./voice-picker";
+
+/** Débit moyen d'une voix de synthèse française (estimation avant génération). */
+const WORDS_PER_SECOND = 2.6;
+
+interface CommonProps {
+  text: string;
+  showCaptions: boolean;
+  captionStyle: CaptionStyle;
+  ttsEnabled: boolean;
+  /** Voix générée pour ce texte et ces réglages, sinon null (minutage estimé). */
+  voice: VoicePreviewResult | null;
+  musicUrl?: string;
+  musicVolume: number;
+  logoUrl?: string | null;
+  storeName?: string;
+  endingEffect: boolean;
+}
+
+type ReelPreviewProps =
+  | (CommonProps & { kind: "video"; videoUrl: string })
+  | (CommonProps & { kind: "images"; images: string[] });
+
+/** Durée d'un média lue dans ses métadonnées (vidéo de la médiathèque). */
+function useVideoDuration(url: string | undefined): number | null {
+  const [duration, setDuration] = useState<number | null>(null);
+  useEffect(() => {
+    setDuration(null);
+    if (!url) return;
+    const video = document.createElement("video");
+    video.preload = "metadata";
+    video.onloadedmetadata = () => setDuration(Number.isFinite(video.duration) ? video.duration : 15);
+    video.onerror = () => setDuration(15);
+    video.src = url;
+    return () => {
+      video.onloadedmetadata = null;
+      video.onerror = null;
+      video.src = "";
+    };
+  }, [url]);
+  return duration;
+}
+
+function estimatedVoiceDuration(text: string): number {
+  const words = cleanCaptionText(text).split(" ").filter(Boolean).length;
+  return words ? words / WORDS_PER_SECOND + 0.4 : 0;
+}
+
+/**
+ * Aperçu du Reel dans le navigateur, avec les mêmes compositions Remotion que
+ * le rendu final : sous-titres, logo, effet de fin et durée identiques.
+ * Sans voix générée, le minutage des mots est estimé.
+ */
+export function ReelPreview(props: ReelPreviewProps) {
+  const videoDuration = useVideoDuration(props.kind === "video" ? props.videoUrl : undefined);
+  const { text, showCaptions, captionStyle, ttsEnabled, voice, musicUrl, musicVolume, endingEffect } = props;
+  const logoUrl = props.logoUrl ?? undefined;
+  const storeName = endingEffect ? props.storeName || undefined : undefined;
+  const cleanText = cleanCaptionText(text);
+  const voiceDuration = ttsEnabled && cleanText ? voice?.duration ?? estimatedVoiceDuration(text) : 0;
+  const estimated = ttsEnabled && Boolean(cleanText) && !voice;
+
+  const composition = useMemo(() => {
+    if (props.kind === "images") {
+      if (props.images.length === 0) return null;
+      const { total, endingSeconds } = computeImagesTiming({
+        imageCount: props.images.length,
+        voiceDuration,
+        hasEnding: Boolean(logoUrl || storeName),
+      });
+      const contentEnd = total - endingSeconds;
+      let words: TimedWord[] = [];
+      if (showCaptions && cleanText) {
+        words = voice ? voice.words : spreadWords(text, 0, voiceDuration || Math.min(contentEnd - 0.5, 8));
+      }
+      const inputProps: ImageCompositionProps = {
+        images: props.images,
+        totalDuration: total,
+        words,
+        captionStyle,
+        audioUrl: voice?.audioUrl,
+        musicUrl,
+        musicVolume,
+        logoUrl,
+        storeName,
+        endingSeconds,
+      };
+      return { component: ImageComposition, inputProps, total };
+    }
+
+    if (videoDuration == null) return null;
+    const timing = computeReelTiming({
+      videoDuration,
+      voiceDuration: voiceDuration || undefined,
+      hasOutro: Boolean(logoUrl),
+      endingEffect,
+    });
+    let words: TimedWord[] = [];
+    if (showCaptions && cleanText) {
+      if (voice) words = offsetWords(voice.words, VOICE_DELAY);
+      else if (ttsEnabled) words = spreadWords(text, VOICE_DELAY, VOICE_DELAY + voiceDuration);
+      else words = spreadWords(text, 0.5, (timing.logoStart ?? timing.total) - 0.5);
+    }
+    const inputProps: ReelVideoProps = {
+      videoUrl: props.videoUrl,
+      videoDuration,
+      totalDuration: timing.total,
+      words,
+      captionStyle,
+      logoUrl,
+      storeName,
+      logoStart: timing.logoStart,
+      fadeStart: timing.fadeStart,
+      voiceUrl: voice?.audioUrl,
+      voiceDelay: VOICE_DELAY,
+      musicUrl,
+      musicVolume,
+    };
+    return { component: ReelVideo, inputProps, total: timing.total };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    props.kind,
+    props.kind === "video" ? props.videoUrl : props.images.join("|"),
+    videoDuration, text, cleanText, showCaptions, captionStyle, ttsEnabled, voice, voiceDuration,
+    musicUrl, musicVolume, logoUrl, storeName, endingEffect,
+  ]);
+
+  if (!composition) {
+    return (
+      <div className="aspect-[9/16] w-full rounded-lg bg-black flex items-center justify-center">
+        <Loader2 className="w-6 h-6 animate-spin text-white/70" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="overflow-hidden rounded-lg bg-black">
+        <Player
+          // Nouvelle instance quand la durée change : le lecteur repart du début
+          key={`${props.kind}-${composition.total}`}
+          component={composition.component as React.ComponentType<Record<string, unknown>>}
+          inputProps={composition.inputProps as unknown as Record<string, unknown>}
+          durationInFrames={Math.max(1, Math.round(composition.total * REEL_FPS))}
+          fps={REEL_FPS}
+          compositionWidth={REEL_WIDTH}
+          compositionHeight={REEL_HEIGHT}
+          style={{ width: "100%", aspectRatio: "9 / 16" }}
+          controls
+          loop
+          acknowledgeRemotionLicense
+        />
+      </div>
+      <p className="text-xs text-muted-foreground flex items-start gap-1.5">
+        <Info className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+        {estimated
+          ? "Minutage estimé : cliquez sur « Tester la voix » pour caler les sous-titres sur la vraie voix."
+          : `Aperçu fidèle au rendu final · ${composition.total.toFixed(1)} s`}
+      </p>
+    </div>
+  );
+}

client/src/components/reels/voice-picker.tsx

@@ -20,6 +20,7 @@ import {
   type TtsEngine,
   type TtsStyle,
 } from "@shared/voices";
+import type { TimedWord } from "@shared/captions";
 
 export interface VoiceSettings {
   engine: TtsEngine;
@@ -27,12 +28,38 @@ export interface VoiceSettings {
   style: TtsStyle;
 }
 
+/** Voix générée par « Tester la voix », réutilisée par l'aperçu vidéo. */
+export interface VoicePreviewResult {
+  audioUrl: string;
+  duration: number;
+  words: TimedWord[];
+  /** Texte et réglages ayant servi : l'aperçu n'est valable que s'ils n'ont pas changé. */
+  text: string;
+  settings: VoiceSettings;
+}
+
+export function isVoicePreviewCurrent(
+  preview: VoicePreviewResult | null,
+  text: string,
+  settings: VoiceSettings,
+): preview is VoicePreviewResult {
+  return (
+    !!preview &&
+    preview.text === text.trim() &&
+    preview.settings.engine === settings.engine &&
+    preview.settings.voice === settings.voice &&
+    preview.settings.style === settings.style
+  );
+}
+
 interface VoicePickerProps {
   value: VoiceSettings;
   onChange: (value: VoiceSettings) => void;
   /** Texte lu par le bouton « Tester la voix ». */
   sampleText?: string;
   compact?: boolean;
+  /** Appelé avec la voix générée (audio et minutage des mots). */
+  onPreview?: (result: VoicePreviewResult) => void;
 }
 
 const FALLBACK_SAMPLE = "Découvrez nos nouveautés en magasin, on vous attend !";
@@ -41,7 +68,7 @@ const FALLBACK_SAMPLE = "Découvrez nos nouveautés en magasin, on vous attend !
  * Choix du moteur, de la voix et du ton, avec écoute de l'aperçu.
  * Partagé par les pages Reel (vidéo et images, bureau et mobile).
  */
-export function VoicePicker({ value, onChange, sampleText, compact = false }: VoicePickerProps) {
+export function VoicePicker({ value, onChange, sampleText, compact = false, onPreview }: VoicePickerProps) {
   const { toast } = useToast();
   const [loading, setLoading] = useState(false);
   const [playing, setPlaying] = useState(false);
@@ -68,8 +95,9 @@ export function VoicePicker({ value, onChange, sampleText, compact = false }: Vo
     if (playing) return stop();
     setLoading(true);
     try {
+      const text = sampleText?.trim() || FALLBACK_SAMPLE;
       const response = await apiRequest("POST", "/api/reels/tts-preview", {
-        text: sampleText?.trim() || FALLBACK_SAMPLE,
+        text,
         ttsEngine: value.engine,
         ttsVoice: value.voice,
         ttsStyle: value.style,
@@ -78,7 +106,11 @@ export function VoicePicker({ value, onChange, sampleText, compact = false }: Vo
       for (const warning of data.warnings ?? []) {
         toast({ title: "Voix de secours utilisée", description: warning });
       }
-      const audio = new Audio(`data:audio/mpeg;base64,${data.audioBase64}`);
+      const audioUrl = `data:audio/mpeg;base64,${data.audioBase64}`;
+      if (sampleText?.trim()) {
+        onPreview?.({ audioUrl, duration: data.duration, words: data.words ?? [], text, settings: value });
+      }
+      const audio = new Audio(audioUrl);
       audioRef.current?.pause();
       audioRef.current = audio;
       audio.onended = () => setPlaying(false);