Merge pull request #121 from R0m1k3/claude/dreamy-feynman-jxb0g3

Reels : programmer la publication d'une vidéo déjà montée

client/src/App.tsx

@@ -81,6 +81,12 @@ const NewReel = createResponsiveRoute(
   () => import("@/pages/mobile/new-reel") // Uses same component for now
 );
 
+// Reel déjà monté : même page responsive sur mobile et desktop
+const ScheduleReel = createResponsiveRoute(
+  () => import("@/pages/schedule-reel"),
+  () => import("@/pages/schedule-reel")
+);
+
 const RemotionVideo = createResponsiveRoute(
   () => import("@/pages/remotion-video"),
   () => import("@/pages/mobile/remotion-video")
@@ -136,6 +142,7 @@ function Router() {
       <Route path="/">{() => <ProtectedRoute component={Dashboard} />}</Route>
       <Route path="/new">{() => <ProtectedRoute component={NewPost} />}</Route>
       <Route path="/reel">{() => <ProtectedRoute component={NewReel} />}</Route>
+      <Route path="/reel/schedule">{() => <ProtectedRoute component={ScheduleReel} />}</Route>
       <Route path="/remotion">{() => <ProtectedRoute component={RemotionVideo} />}</Route>
       <Route path="/calendar">{() => <ProtectedRoute component={Calendar} />}</Route>
       <Route path="/media">{() => <ProtectedRoute component={Media} />}</Route>

client/src/components/sidebar.tsx

@@ -1,4 +1,4 @@
-import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight, ChevronDown, Wand2, BarChart3, Video, Music, Shield } from "lucide-react";
+import { Home, PlusCircle, CalendarClock, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight, ChevronDown, Wand2, BarChart3, Video, Music, Shield } from "lucide-react";
 import { Link, useLocation } from "wouter";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { apiRequest, AUTH_MUTATION, queryClient } from "@/lib/queryClient";
@@ -71,6 +71,7 @@ export default function Sidebar({ onLinkClick }: SidebarProps = {}) {
     { icon: Home, label: "Tableau de bord", href: "/", badge: null },
     { icon: PlusCircle, label: "Nouvelle publication", href: "/new", badge: null },
     { icon: Video, label: "Nouveau Reel", href: "/reel", badge: "New" },
+    { icon: CalendarClock, label: "Programmer un Reel", href: "/reel/schedule", badge: "New" },
     { icon: Video, label: "Générateur Vidéo", href: "/remotion", badge: "New" },
     { icon: Calendar, label: "Calendrier", href: "/calendar", badge: null },
     { icon: Images, label: "Médiathèque", href: "/media", badge: null },

client/src/pages/mobile/dashboard.tsx

@@ -13,7 +13,8 @@ import {
   Users,
   ChevronRight,
   Sparkles,
-  Film
+  Film,
+  CalendarClock
 } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -29,6 +30,7 @@ export default function DashboardMobile() {
   ];
 
   const secondaryMenu = [
+    { icon: CalendarClock, label: "Programmer un Reel", href: "/reel/schedule" },
     { icon: Film, label: "Générateur Vidéo", href: "/remotion" },
     { icon: Images, label: "Médiathèque", href: "/media" },
     { icon: Wand2, label: "Éditeur d'images", href: "/image-editor" },

client/src/pages/schedule-reel.tsx

@@ -0,0 +1,296 @@
+import { useState, useCallback } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useLocation } from "wouter";
+import { CalendarClock, Upload, Loader2, Check, Video } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+import Sidebar from "@/components/sidebar";
+import TopBar from "@/components/topbar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient, handleUnauthorized, getErrorMessage } from "@/lib/queryClient";
+import type { SocialPage, Media } from "@shared/schema";
+import { SiFacebook, SiTiktok } from "react-icons/si";
+import { MediaThumbnail } from "@/components/media-thumbnail";
+import { DateTimePicker } from "@/components/datetime-picker";
+
+/**
+ * Programmation d'un Reel déjà monté : pas de rendu, la vidéo envoyée est
+ * publiée telle quelle par le planificateur à la date choisie.
+ */
+export default function ScheduleReel() {
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [, navigate] = useLocation();
+    const { toast } = useToast();
+
+    const [selectedVideo, setSelectedVideo] = useState<Media | null>(null);
+    const [description, setDescription] = useState("");
+    const [selectedPages, setSelectedPages] = useState<string[]>([]);
+    const [scheduledDate, setScheduledDate] = useState<Date | undefined>(undefined);
+
+    const { data: pages = [] } = useQuery<SocialPage[]>({ queryKey: ["/api/pages"] });
+    const { data: allMedia = [] } = useQuery<Media[]>({ queryKey: ["/api/media"] });
+
+    // Destinations acceptant un Reel
+    const facebookPages = pages.filter((p) => p.platform === "facebook");
+    const tiktokAccounts = pages.filter((p) => p.platform === "tiktok");
+    const videoList = allMedia.filter((m) => m.type === "video").slice(0, 12);
+
+    const uploadMutation = useMutation({
+        mutationFn: async (file: File) => {
+            const formData = new FormData();
+            formData.append("file", file);
+            const response = await fetch("/api/media/upload", {
+                method: "POST",
+                body: formData,
+                credentials: "include",
+            });
+            if (!response.ok) {
+                if (response.status === 401) handleUnauthorized("/api/media/upload");
+                throw new Error("Upload failed");
+            }
+            return response.json() as Promise<Media>;
+        },
+        onSuccess: (media) => {
+            queryClient.invalidateQueries({ queryKey: ["/api/media"] });
+            setSelectedVideo(media);
+            toast({ title: "Vidéo envoyée", description: media.fileName });
+        },
+        onError: () => {
+            toast({ title: "Erreur", description: "Impossible d'envoyer la vidéo", variant: "destructive" });
+        },
+    });
+
+    const onDrop = useCallback((files: File[]) => {
+        if (files[0]) uploadMutation.mutate(files[0]);
+    }, [uploadMutation]);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        accept: { "video/*": [".mp4", ".mov", ".webm"] },
+        maxFiles: 1,
+        disabled: uploadMutation.isPending,
+    });
+
+    const scheduleMutation = useMutation({
+        mutationFn: async () => {
+            const response = await apiRequest("POST", "/api/posts", {
+                content: description,
+                postType: "reel",
+                mediaIds: [selectedVideo!.id],
+                pageIds: selectedPages,
+                scheduledFor: scheduledDate!.toISOString(),
+            });
+            return response.json();
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["/api/scheduled-posts"], refetchType: "all" });
+            await queryClient.invalidateQueries({ queryKey: ["/api/posts"] });
+            toast({ title: "Reel programmé", description: "Il sera publié à la date choisie." });
+            navigate("/calendar");
+        },
+        onError: (error: unknown) => {
+            toast({
+                title: "Erreur",
+                description: getErrorMessage(error, "Impossible de programmer le Reel"),
+                variant: "destructive",
+            });
+        },
+    });
+
+    const isPast = !!scheduledDate && scheduledDate.getTime() <= Date.now();
+    const canSchedule = !!selectedVideo && selectedPages.length > 0 && !!scheduledDate && !isPast;
+
+    const togglePage = (id: string, checked: boolean) => {
+        setSelectedPages((prev) => (checked ? [...prev, id] : prev.filter((p) => p !== id)));
+    };
+
+    const renderTargetCheckbox = (page: SocialPage) => (
+        <div key={page.id} className="flex items-center space-x-2">
+            <Checkbox
+                id={`schedule-reel-page-${page.id}`}
+                checked={selectedPages.includes(page.id)}
+                onCheckedChange={(checked) => togglePage(page.id, checked === true)}
+            />
+            <label htmlFor={`schedule-reel-page-${page.id}`} className="text-sm font-medium leading-none flex-1">
+                {page.pageName}
+            </label>
+        </div>
+    );
+
+    return (
+        <div className="flex h-screen overflow-hidden bg-background">
+            {sidebarOpen && (
+                <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setSidebarOpen(false)} />
+            )}
+
+            <div className={`
+        fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
+        ${sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}
+      `}>
+                <Sidebar onLinkClick={() => setSidebarOpen(false)} />
+            </div>
+
+            <main className="flex-1 overflow-y-auto">
+                <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
+
+                <div className="p-4 sm:p-6 lg:p-8 max-w-4xl mx-auto space-y-6">
+                    <div>
+                        <h1 className="text-2xl sm:text-3xl font-bold text-foreground flex items-center gap-2">
+                            <CalendarClock className="w-8 h-8 text-primary" />
+                            Programmer un Reel
+                        </h1>
+                        <p className="text-muted-foreground mt-2">
+                            Publiez une vidéo déjà montée, telle quelle, à la date et l'heure choisies
+                        </p>
+                    </div>
+
+                    {/* 1. Vidéo */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2">
+                                <Video className="w-5 h-5" /> Vidéo
+                            </CardTitle>
+                            <CardDescription>Format vertical 9:16 recommandé</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div
+                                {...getRootProps()}
+                                className={`border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-colors ${
+                                    isDragActive ? "border-primary bg-primary/5" : "border-border hover:border-primary/50"
+                                }`}
+                                data-testid="dropzone-schedule-reel"
+                            >
+                                <input {...getInputProps()} />
+                                {uploadMutation.isPending ? (
+                                    <div className="flex items-center justify-center gap-2 text-muted-foreground">
+                                        <Loader2 className="w-5 h-5 animate-spin" /> Envoi en cours...
+                                    </div>
+                                ) : (
+                                    <div className="space-y-1">
+                                        <Upload className="w-8 h-8 mx-auto text-muted-foreground" />
+                                        <p className="font-medium">Déposez votre Reel ici ou cliquez pour choisir</p>
+                                        <p className="text-xs text-muted-foreground">MP4, MOV ou WebM</p>
+                                    </div>
+                                )}
+                            </div>
+
+                            {videoList.length > 0 && (
+                                <div className="space-y-2">
+                                    <Label>Ou choisissez une vidéo de la médiathèque</Label>
+                                    <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
+                                        {videoList.map((media) => {
+                                            const selected = selectedVideo?.id === media.id;
+                                            return (
+                                                <button
+                                                    key={media.id}
+                                                    type="button"
+                                                    onClick={() => setSelectedVideo(media)}
+                                                    className={`relative aspect-[9/16] rounded-lg overflow-hidden border-2 ${
+                                                        selected ? "border-primary" : "border-transparent"
+                                                    }`}
+                                                >
+                                                    <MediaThumbnail
+                                                        src={media.originalUrl}
+                                                        alt={media.fileName}
+                                                        thumbnailUrl={media.thumbnailUrl ?? undefined}
+                                                        type="video"
+                                                    />
+                                                    {selected && (
+                                                        <div className="absolute inset-0 bg-primary/30 flex items-center justify-center">
+                                                            <Check className="w-6 h-6 text-white" />
+                                                        </div>
+                                                    )}
+                                                </button>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            )}
+
+                            {selectedVideo && (
+                                <p className="text-sm text-muted-foreground">
+                                    Sélectionnée : <span className="font-medium text-foreground">{selectedVideo.fileName}</span>
+                                </p>
+                            )}
+                        </CardContent>
+                    </Card>
+
+                    {/* 2. Description */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Description</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <Textarea
+                                value={description}
+                                onChange={(e) => setDescription(e.target.value)}
+                                placeholder="Texte publié avec le Reel (optionnel)"
+                                rows={4}
+                                data-testid="textarea-schedule-reel-description"
+                            />
+                        </CardContent>
+                    </Card>
+
+                    {/* 3. Destinations et date */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Publication</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            {facebookPages.length === 0 && tiktokAccounts.length === 0 && (
+                                <p className="text-sm text-muted-foreground">Aucune page Facebook ou compte TikTok connecté.</p>
+                            )}
+                            {facebookPages.length > 0 && (
+                                <div className="space-y-2">
+                                    <Label className="flex items-center gap-2">
+                                        <SiFacebook className="w-4 h-4 text-[#1877F2]" /> Pages Facebook
+                                    </Label>
+                                    {facebookPages.map(renderTargetCheckbox)}
+                                </div>
+                            )}
+                            {tiktokAccounts.length > 0 && (
+                                <div className="space-y-2">
+                                    <Label className="flex items-center gap-2">
+                                        <SiTiktok className="w-4 h-4" /> Comptes TikTok
+                                    </Label>
+                                    {tiktokAccounts.map(renderTargetCheckbox)}
+                                </div>
+                            )}
+
+                            <div className="space-y-2">
+                                <Label>Date et heure de parution</Label>
+                                <DateTimePicker
+                                    value={scheduledDate}
+                                    onChange={setScheduledDate}
+                                    placeholder="Choisir la date et l'heure"
+                                />
+                                {isPast && (
+                                    <p className="text-sm text-destructive">La date doit être dans le futur.</p>
+                                )}
+                            </div>
+
+                            <Button
+                                className="w-full"
+                                size="lg"
+                                disabled={!canSchedule || scheduleMutation.isPending}
+                                onClick={() => scheduleMutation.mutate()}
+                                data-testid="button-schedule-reel"
+                            >
+                                {scheduleMutation.isPending ? (
+                                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                ) : (
+                                    <CalendarClock className="w-4 h-4 mr-2" />
+                                )}
+                                Programmer le Reel
+                            </Button>
+                        </CardContent>
+                    </Card>
+                </div>
+            </main>
+        </div>
+    );
+}

server/routes.ts

@@ -21,6 +21,7 @@ import { externalRouter } from "./routes/external";
 import { tiktokRouter } from "./routes/tiktok";
 import { facebookRouter } from "./routes/facebook";
 import { legalRouter } from "./routes/legal";
+import { createVideoThumbnail } from "./services/thumbnail";
 import { insertAudioTrackSchema } from "@shared/schema";
 import * as musicMetadata from "music-metadata";
 
@@ -721,13 +722,20 @@ export async function registerRoutes(app: Express): Promise<Server> {
         req.file.mimetype
       );
 
+      // Détection basique basée sur le mimetype ou l'extension
+      const isVideo = req.file.mimetype.startsWith("video/") || /\.(mp4|mov|avi|mkv|webm)$/i.test(req.file.originalname);
+
+      // Vignette extraite tant que la vidéo est sur le disque : elle survit à la
+      // suppression du fichier après publication (historique illustré)
+      const thumbnailUrl = isVideo ? await createVideoThumbnail(req.file.path) : null;
+
       // Clean up temp file immediately after upload to free disk space
       await fs.promises.unlink(req.file.path).catch(err => console.error("Failed to cleanup temp file:", err));
 
       const mediaItem = await storage.createMedia({
         userId,
-        // Détection basique basée sur le mimetype ou le résultat Cloudinary
-        type: req.file.mimetype.startsWith("video/") || req.file.originalname.match(/\.(mp4|mov|avi|mkv)$/i) ? "video" : "image",
+        type: isVideo ? "video" : "image",
+        thumbnailUrl,
         cloudinaryPublicId: uploadResult.publicId,
         originalUrl: uploadResult.originalUrl,
         facebookFeedUrl: uploadResult.facebookFeedUrl,
@@ -1297,6 +1305,23 @@ export async function registerRoutes(app: Express): Promise<Server> {
         return res.status(400).json({ error: "Les stories nécessitent au moins un média (image ou vidéo)" });
       }
 
+      // Reel déjà monté : une seule vidéo, publiée telle quelle sur Facebook ou TikTok
+      if (postType === 'reel') {
+        if (finalMediaItems.length !== 1) {
+          return res.status(400).json({ error: "Un Reel nécessite exactement une vidéo" });
+        }
+        const reelMedia = await storage.getMediaById(finalMediaItems[0].mediaId);
+        if (!reelMedia || reelMedia.type !== 'video' || (user.role !== 'admin' && reelMedia.userId !== userId)) {
+          return res.status(400).json({ error: "Le média d'un Reel doit être une de vos vidéos" });
+        }
+        for (const pageId of Array.isArray(pageIds) ? pageIds : []) {
+          const page = await storage.getSocialPage(pageId);
+          if (!page || (page.platform !== 'facebook' && page.platform !== 'tiktok')) {
+            return res.status(400).json({ error: "Les Reels ne peuvent être publiés que sur Facebook ou TikTok" });
+          }
+        }
+      }
+
       // Security: Verify user has access to all specified pages (unless admin)
       if (user.role !== 'admin' && pageIds && Array.isArray(pageIds) && pageIds.length > 0) {
         const accessiblePages = await storage.getUserAccessiblePages(userId);