From 8f7f580b2fad1d77e9f298268b7754158ee77fce Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Wed, 25 Mar 2026 08:14:17 +0100
Subject: [PATCH] feat: Implement Facebook Reels API, including Jamendo music
 management, AI text generation, and MinIO storage integration.

---
 client/src/pages/mobile/dashboard.tsx      |  4 +-
 client/src/pages/mobile/image-editor.tsx   |  4 +-
 client/src/pages/mobile/new-post.tsx       | 43 ++++++----------------
 client/src/pages/mobile/remotion-video.tsx |  3 +-
 4 files changed, 19 insertions(+), 35 deletions(-)

diff --git a/client/src/pages/mobile/dashboard.tsx b/client/src/pages/mobile/dashboard.tsx
index be85bc0..9059e0c 100644
--- a/client/src/pages/mobile/dashboard.tsx
+++ b/client/src/pages/mobile/dashboard.tsx
@@ -12,7 +12,8 @@ import {
   Settings,
   Users,
   ChevronRight,
-  Sparkles
+  Sparkles,
+  Film
 } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -28,6 +29,7 @@ export default function DashboardMobile() {
   ];
 
   const secondaryMenu = [
+    { 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" },
     { icon: Clock, label: "Historique", href: "/history" },
diff --git a/client/src/pages/mobile/image-editor.tsx b/client/src/pages/mobile/image-editor.tsx
index 2f18fea..228ed3c 100644
--- a/client/src/pages/mobile/image-editor.tsx
+++ b/client/src/pages/mobile/image-editor.tsx
@@ -13,6 +13,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Slider } from "@/components/ui/slider";
 import { Badge } from "@/components/ui/badge";
 import { Wand2, Save, Image as ImageIcon, X } from "lucide-react";
+import { MediaThumbnail } from "@/components/media-thumbnail";
 import { useToast } from "@/hooks/use-toast";
 
 interface Ribbon {
@@ -387,9 +388,10 @@ export default function ImageEditorMobile() {
                         onClick={() => setSelectedMedia(media)}
                         data-testid={`select-image-${media.id}`}
                       >
-                        <img
+                        <MediaThumbnail
                           src={media.instagramFeedUrl || media.originalUrl}
                           alt=""
+                          type="image"
                           className="w-full h-28 object-cover"
                         />
                       </div>
diff --git a/client/src/pages/mobile/new-post.tsx b/client/src/pages/mobile/new-post.tsx
index 5b298b1..5ab88ae 100644
--- a/client/src/pages/mobile/new-post.tsx
+++ b/client/src/pages/mobile/new-post.tsx
@@ -2,6 +2,7 @@ import { useState, useCallback, useRef, useMemo } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { useLocation } from "wouter";
 import { Send, Sparkles, Image as ImageIcon, Calendar, Upload, Camera, GripVertical, Loader2 } from "lucide-react";
+import { MediaThumbnail } from "@/components/media-thumbnail";
 import { useDropzone } from "react-dropzone";
 import {
   DndContext,
@@ -77,22 +78,11 @@ function SortableMediaItem({
         className="w-full h-full min-h-[44px]"
         data-testid={`button-select-media-${media.id}`}
       >
-        {isVideo ? (
-          <video
-            src={media.originalUrl}
-            className="w-full h-full object-cover"
-            muted
-            playsInline
-            preload="metadata"
-          />
-        ) : (
-          <img
-            src={media.facebookFeedUrl || media.originalUrl}
-            alt={media.fileName}
-            className="w-full h-full object-cover"
-            loading="lazy"
-          />
-        )}
+        <MediaThumbnail
+          src={media.facebookFeedUrl || media.originalUrl}
+          alt={media.fileName}
+          type={isVideo ? 'video' : 'image'}
+        />
       </button>
       {isSelected && (
         <>
@@ -528,22 +518,11 @@ export default function NewPostMobile() {
                                 }`}
                                 data-testid={`button-select-media-${media.id}`}
                               >
-                                {isVideo ? (
-                                  <video
-                                    src={media.originalUrl}
-                                    className="w-full h-full object-cover"
-                                    muted
-                                    playsInline
-                                    preload="metadata"
-                                  />
-                                ) : (
-                                  <img
-                                    src={media.facebookFeedUrl || media.originalUrl}
-                                    alt={media.fileName}
-                                    className="w-full h-full object-cover"
-                                    loading="lazy"
-                                  />
-                                )}
+                                <MediaThumbnail
+                                  src={media.facebookFeedUrl || media.originalUrl}
+                                  alt={media.fileName}
+                                  type={isVideo ? 'video' : 'image'}
+                                />
                                 {isSelected && (
                                   <div className="absolute inset-0 bg-primary/10 flex items-center justify-center">
                                     <div className="text-xs font-semibold text-primary bg-white px-2 py-1 rounded">Sélectionnée</div>
diff --git a/client/src/pages/mobile/remotion-video.tsx b/client/src/pages/mobile/remotion-video.tsx
index c84444f..9a1c9fd 100644
--- a/client/src/pages/mobile/remotion-video.tsx
+++ b/client/src/pages/mobile/remotion-video.tsx
@@ -7,6 +7,7 @@ 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 { MediaThumbnail } from "@/components/media-thumbnail";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import Sidebar from "@/components/sidebar";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -174,7 +175,7 @@ export default function MobileRemotionVideoPage() {
                   return (
                     <div key={media.id} onClick={() => toggleLibraryImage(media)}
                       className={`flex-shrink-0 w-16 h-16 relative rounded overflow-hidden border-2 cursor-pointer ${isSelected ? 'border-primary' : 'border-transparent'}`}>
-                      <img src={media.originalUrl} className="w-full h-full object-cover" />
+                      <MediaThumbnail src={media.originalUrl} alt="" type="image" />
                       {isSelected && <div className="absolute top-0.5 right-0.5 bg-primary text-white p-0.5 rounded-full"><Check className="w-2.5 h-2.5" /></div>}
                     </div>
                   );