feat(reels): interrupteur « Afficher le logo sur la vidéo »

Le petit logo affiché pendant la vidéo devient optionnel (activé par
défaut), sur les 4 pages Reel (vidéo et images, bureau et mobile) ainsi que
dans l'aperçu. Le grand logo de l'effet de fin reste piloté par son propre
interrupteur. Pris en charge par le rendu Remotion et par le rendu FFmpeg de
secours (show_watermark).

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

client/src/pages/mobile/new-reel.tsx

@@ -84,6 +84,7 @@ export default function MobileNewReel() {
     // Désactivée par défaut : double le temps de rendu, utile seulement pour une vidéo tremblée
     const [stabilize, setStabilize] = useState(false);
     const [enableEndingEffect, setEnableEndingEffect] = useState(true);
+    const [showLogo, setShowLogo] = useState(true);
 
     // TTS Sync state
     const [syncInfo, setSyncInfo] = useState<{
@@ -280,6 +281,7 @@ export default function MobileNewReel() {
             ttsStyle,
             captionStyle,
             enableEndingEffect,
+            showLogo,
         });
     };
 
@@ -484,6 +486,16 @@ export default function MobileNewReel() {
                                 <Label className="text-xs font-medium">Style des sous-titres</Label>
                                 <CaptionStylePicker value={captionStyle} onChange={setCaptionStyle} compact />
                             </div>
+                            <div className="flex items-center space-x-2 mt-4">
+                                <Switch
+                                    id="show-logo"
+                                    checked={showLogo}
+                                    onCheckedChange={setShowLogo}
+                                />
+                                <Label htmlFor="show-logo" className="font-medium cursor-pointer">
+                                    Afficher le logo sur la vidéo
+                                </Label>
+                            </div>
                             <div className="flex items-center space-x-2 mt-4">
                                 <Switch
                                     id="enable-ending-effect"
@@ -572,6 +584,7 @@ export default function MobileNewReel() {
                                             musicUrl={selectedTrack?.previewUrl}
                                             musicVolume={musicVolume[0] / 100}
                                             logoUrl={reelConfig?.logoUrl}
+                                            showWatermark={showLogo}
                                             storeName={pages.find((p) => p.id === selectedPages[0])?.pageName}
                                             endingEffect={enableEndingEffect}
                                         />

client/src/pages/mobile/remotion-video.tsx

@@ -54,6 +54,7 @@ export default function MobileRemotionVideoPage() {
   const [publishDescription, setPublishDescription] = useState("");
   const [isPublishing, setIsPublishing] = useState(false);
   const [captionStyle, setCaptionStyle] = useState<CaptionStyle>(DEFAULT_CAPTION_STYLE);
+  const [showLogo, setShowLogo] = useState(true);
   const [voicePreview, setVoicePreview] = useState<VoicePreviewResult | null>(null);
   const [renderProgress, setRenderProgress] = useState(0);
   const currentVoice = isVoicePreviewCurrent(voicePreview, overlayText, voiceSettings) ? voicePreview : null;
@@ -169,6 +170,7 @@ export default function MobileRemotionVideoPage() {
       formData.append("ttsVoice", voiceSettings.voice);
       formData.append("ttsStyle", voiceSettings.style);
       formData.append("captionStyle", captionStyle);
+      formData.append("showLogo", String(showLogo));
       if (selectedPageIds[0]) formData.append("selectedPageId", selectedPageIds[0]);
       if (musicFile) { formData.append("music", musicFile); formData.append("musicVolume", String(musicVolume)); }
       else if (selectedTrack) { formData.append("musicTrackUrl", selectedTrack.url); formData.append("musicVolume", String(musicVolume)); }
@@ -350,6 +352,10 @@ export default function MobileRemotionVideoPage() {
               <Label className="text-xs font-medium">Style des sous-titres</Label>
               <CaptionStylePicker value={captionStyle} onChange={setCaptionStyle} compact />
             </div>
+            <div className="flex items-center gap-3">
+              <Switch id="show-logo-m" checked={showLogo} onCheckedChange={setShowLogo} />
+              <Label htmlFor="show-logo-m" className="text-sm">Afficher le logo sur la vidéo</Label>
+            </div>
             <div className="flex items-center gap-3">
               <Switch id="tts-m" checked={ttsEnabled} onCheckedChange={setTtsEnabled} />
               <Label htmlFor="tts-m" className="text-sm">Voix TTS</Label>
@@ -474,6 +480,7 @@ export default function MobileRemotionVideoPage() {
                   musicUrl={musicFileUrl ?? selectedTrack?.url}
                   musicVolume={musicVolume}
                   logoUrl={reelConfig?.logoUrl}
+                  showWatermark={showLogo}
                   storeName={socialPages.find((p) => p.id === selectedPageIds[0])?.pageName ?? socialPages[0]?.pageName}
                   endingEffect
                 />