From 027b0f7e73da630bdf7166d9fb26cafe002a106a Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Fri, 23 Jan 2026 17:39:50 +0100
Subject: [PATCH] feat(reels): add stabilization to desktop, improve mobile UX
 with Switch, and remove desktop camera

---
 client/src/pages/mobile/new-reel.tsx |  4 +--
 client/src/pages/new-reel.tsx        | 47 +++++++++++++++++-----------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/client/src/pages/mobile/new-reel.tsx b/client/src/pages/mobile/new-reel.tsx
index 5bb89bd..fde5b11 100644
--- a/client/src/pages/mobile/new-reel.tsx
+++ b/client/src/pages/mobile/new-reel.tsx
@@ -13,7 +13,7 @@ import Sidebar from "@/components/sidebar";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
 import { Slider } from "@/components/ui/slider";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
@@ -307,7 +307,7 @@ export default function MobileNewReel() {
                                                 </div>
                                                 <div className="text-xs text-muted-foreground">Recommandé pour Facebook Reels</div>
                                             </div>
-                                            <Checkbox
+                                            <Switch
                                                 checked={stabilize}
                                                 onCheckedChange={(checked) => setStabilize(!!checked)}
                                             />
diff --git a/client/src/pages/new-reel.tsx b/client/src/pages/new-reel.tsx
index 505dcf0..a4d820c 100644
--- a/client/src/pages/new-reel.tsx
+++ b/client/src/pages/new-reel.tsx
@@ -68,7 +68,8 @@ export default function NewReel() {
     const [ttsEnabled, setTtsEnabled] = useState(true);
     const [ttsVoice, setTtsVoice] = useState("fr-FR-VivienneMultilingualNeural");
     const [drawText, setDrawText] = useState(true);
-    const [shouldStabilize, setShouldStabilize] = useState(false);
+    const [stabilize, setStabilize] = useState(true); // default to true
+
 
     // État audio preview
     const [isPlaying, setIsPlaying] = useState<string | null>(null);
@@ -339,7 +340,7 @@ export default function NewReel() {
             ttsEnabled,
             ttsVoice,
             drawText,
-            stabilize: shouldStabilize,
+            stabilize: stabilize,
         });
     };
 
@@ -361,13 +362,13 @@ export default function NewReel() {
                 <CameraRecorder
                     onCapture={(file, options) => {
                         if (options?.stabilize) {
-                            setShouldStabilize(true);
+                            setStabilize(true);
                             toast({
                                 title: "Stabilisation activée",
                                 description: "La vidéo sera stabilisée lors de la création du Reel (ceci peut prendre plus de temps)",
                             });
                         } else {
-                            setShouldStabilize(false);
+                            setStabilize(false);
                         }
                         uploadMutation.mutate(file);
                         setShowCamera(false);
@@ -467,15 +468,6 @@ export default function NewReel() {
                                             <input {...getInputProps()} />
 
                                             <div className="flex gap-2 mb-4">
-                                                <Button
-                                                    onClick={() => cameraInputRef.current?.click()}
-                                                    disabled={uploadMutation.isPending}
-                                                    variant="outline"
-                                                    className="lg:hidden"
-                                                >
-                                                    <Camera className="w-4 h-4 mr-2" />
-                                                    Filmer (Qualité Max)
-                                                </Button>
                                                 <Button
                                                     onClick={open}
                                                     disabled={uploadMutation.isPending}
@@ -523,11 +515,28 @@ export default function NewReel() {
                                         </div>
 
                                         {selectedVideo && (
-                                            <div className="mt-4 flex justify-end">
-                                                <Button onClick={() => setCurrentStep('music')}>
-                                                    Continuer
-                                                    <ChevronRight className="w-4 h-4 ml-2" />
-                                                </Button>
+                                            <div className="mt-6 p-4 border rounded-xl bg-accent/30 space-y-4">
+                                                <div className="flex items-center justify-between">
+                                                    <div className="space-y-0.5">
+                                                        <Label className="text-base font-semibold flex items-center gap-2">
+                                                            <Sparkles className="w-5 h-5 text-primary" />
+                                                            Stabilisation & Qualité 1080p
+                                                        </Label>
+                                                        <p className="text-sm text-muted-foreground">
+                                                            Recommandé pour un rendu professionnel sur Facebook Reels
+                                                        </p>
+                                                    </div>
+                                                    <Switch
+                                                        checked={stabilize}
+                                                        onCheckedChange={setStabilize}
+                                                    />
+                                                </div>
+                                                <div className="flex justify-end">
+                                                    <Button onClick={() => setCurrentStep('music')}>
+                                                        Continuer
+                                                        <ChevronRight className="w-4 h-4 ml-2" />
+                                                    </Button>
+                                                </div>
                                             </div>
                                         )}
                                     </CardContent>
@@ -1024,7 +1033,7 @@ export default function NewReel() {
             {/* Overlay de progression */}
             <ProcessingOverlay
                 isVisible={createReelMutation.isPending}
-                stabilize={shouldStabilize}
+                stabilize={stabilize}
                 ttsEnabled={ttsEnabled}
             />
         </div >