diff --git a/client/src/pages/mobile/remotion-video.tsx b/client/src/pages/mobile/remotion-video.tsx index 9a1c9fd..8e2c09b 100644 --- a/client/src/pages/mobile/remotion-video.tsx +++ b/client/src/pages/mobile/remotion-video.tsx @@ -6,7 +6,7 @@ import { Textarea } from "@/components/ui/textarea"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; import { Slider } from "@/components/ui/slider"; -import { UploadCloud, Video, Loader2, Menu, Check, Sparkles, Mic, Volume2, Music, Play, Pause, Send } from "lucide-react"; +import { UploadCloud, Video, Loader2, Menu, Check, Sparkles, Mic, Volume2, Music, Play, Pause, Send, Camera } from "lucide-react"; import { MediaThumbnail } from "@/components/media-thumbnail"; import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; import Sidebar from "@/components/sidebar"; @@ -50,6 +50,7 @@ export default function MobileRemotionVideoPage() { const [publishDescription, setPublishDescription] = useState(""); const [isPublishing, setIsPublishing] = useState(false); const audioRef = useRef(null); + const cameraInputRef = useRef(null); const { toast } = useToast(); const { data: allMedia = [] } = useQuery({ queryKey: ['/api/media'] }); @@ -69,6 +70,24 @@ export default function MobileRemotionVideoPage() { if (e.target.files) setImages(Array.from(e.target.files).slice(0, 4 - selectedLibraryImages.length)); }; + const handleCameraCapture = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + const remaining = 4 - selectedLibraryImages.length - images.length; + if (remaining <= 0) { + toast({ title: "4 images max.", variant: "destructive" }); + e.target.value = ''; + return; + } + let fileToAdd = file; + if (!file.name || file.name === 'blob' || file.name === '') { + const ext = file.type.split('/')[1] || 'jpg'; + fileToAdd = new File([file], `camera-${Date.now()}.${ext}`, { type: file.type }); + } + setImages(prev => [...prev, fileToAdd].slice(0, 4 - selectedLibraryImages.length)); + e.target.value = ''; + }; + const toggleLibraryImage = (media: Media) => { setSelectedLibraryImages(prev => { if (prev.find(m => m.id === media.id)) return prev.filter(m => m.id !== media.id); @@ -161,12 +180,31 @@ export default function MobileRemotionVideoPage() { 1. Images -
- - -

Appuyez pour choisir

-

{images.length} uploadée(s)

+ +
+
+ + +

Galerie

+

{images.length} choisie(s)

+
+
{imageMediaList.length > 0 && (