Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-23 06:58:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(reels): add stabilization to desktop, improve mobile UX with Switch, and remove desktop camera

Browse Source
This commit is contained in:
Michael committed 2026-01-23 17:39:50 +01:00
1 parent 230a30b339
commit 027b0f7e73
2 files changed
+30 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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