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

Merge branch 'main' of https://github.com/R0m1k3/Socialflow

Browse Source
This commit is contained in:
Michael committed 2026-03-04 14:25:06 +01:00
2 parents 82befb2264 7c88527501
commit f6376cb470
917 files changed
+28420 -93723
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/App.tsx
+6
View File
@@ -60,6 +60,11 @@ const SqlAdmin = createResponsiveRoute(
() => import("@/pages/mobile/sql")
);
const AudioAdmin = createResponsiveRoute(
() => import("@/pages/audio-admin"),
() => import("@/pages/mobile/audio-admin")
);
const UsersAdmin = createResponsiveRoute(
() => import("@/pages/users-admin"),
() => import("@/pages/mobile/users-admin")
@@ -134,6 +139,7 @@ function Router() {
<Route path="/history">{() => <ProtectedRoute component={History} />}</Route>
<Route path="/settings">{() => <ProtectedRoute component={Settings} adminOnly />}</Route>
<Route path="/sql">{() => <ProtectedRoute component={SqlAdmin} adminOnly />}</Route>
<Route path="/audio-admin">{() => <ProtectedRoute component={AudioAdmin} adminOnly />}</Route>
<Route path="/users">{() => <ProtectedRoute component={UsersAdmin} adminOnly />}</Route>
<Route path="/analytics">{() => <ProtectedRoute component={Analytics} />}</Route>
<Route path="/test-camera" component={TestCamera} />
client/src/components/calendar-view.tsx
+182 -178
View File
@@ -18,7 +18,7 @@ export default function CalendarView() {
const [editDialogOpen, setEditDialogOpen] = useState(false);
const [selectedPost, setSelectedPost] = useState<any>(null);
const [previewModalOpen, setPreviewModalOpen] = useState(false);
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] });
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[]; generationStatus?: string; generationProgress?: number }>({ postText: '', mediaIds: [], allMedia: [] });
const { toast } = useToast();
const isDesktop = useMediaQuery("(min-width: 768px)");
@@ -28,7 +28,7 @@ export default function CalendarView() {
});
const deletePostMutation = useMutation({
mutationFn: (postId: string) =>
mutationFn: (postId: string) =>
apiRequest('DELETE', `/api/scheduled-posts/${postId}`, {}),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['/api/scheduled-posts'] });
@@ -61,26 +61,28 @@ export default function CalendarView() {
const handlePreviewPost = async (scheduledPost: any, e?: React.MouseEvent) => {
if (e) e.stopPropagation();
try {
const response = await fetch(`/api/posts/${scheduledPost.postId}`, {
credentials: "include",
});
if (!response.ok) {
throw new Error("Failed to fetch post");
}
const postWithMedia = await response.json();
const mediaIds = postWithMedia.media?.map((m: Media) => m.id) || [];
const allMedia = postWithMedia.media || [];
setPreviewData({
postText: postWithMedia.post.content || '',
mediaIds: mediaIds,
allMedia: allMedia,
generationStatus: postWithMedia.post.generationStatus,
generationProgress: postWithMedia.post.generationProgress,
});
setPreviewModalOpen(true);
} catch (error) {
toast({
@@ -111,11 +113,11 @@ export default function CalendarView() {
return (scheduledPosts || []).filter(post => {
if (!post.scheduledAt) return false;
const postDate = new Date(post.scheduledAt);
// Compare using local date components to avoid timezone issues
return postDate.getFullYear() === date.getFullYear() &&
postDate.getMonth() === date.getMonth() &&
postDate.getDate() === date.getDate();
postDate.getMonth() === date.getMonth() &&
postDate.getDate() === date.getDate();
});
};
@@ -181,9 +183,9 @@ export default function CalendarView() {
</div>
</div>
<div className="flex items-center gap-3">
<Button
variant="outline"
size="sm"
<Button
variant="outline"
size="sm"
onClick={goToPreviousMonth}
className="rounded-xl"
data-testid="button-prev-month"
@@ -194,9 +196,9 @@ export default function CalendarView() {
<span className="text-sm font-semibold text-foreground min-w-[140px] text-center px-4 py-2 bg-muted/30 rounded-xl">
{monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
</span>
<Button
variant="outline"
size="sm"
<Button
variant="outline"
size="sm"
onClick={goToNextMonth}
className="rounded-xl"
data-testid="button-next-month"
@@ -219,192 +221,192 @@ export default function CalendarView() {
</div>
<div className="grid grid-cols-7 gap-2">
{days.map((day, index) => (
<div
key={index}
className={`
{days.map((day, index) => (
<div
key={index}
className={`
bg-card border border-border/50 rounded-xl p-4 min-h-[140px] transition-all hover:shadow-md
${isToday(day.date) ? "ring-2 ring-primary shadow-lg" : ""}
${!day.isCurrentMonth ? "opacity-40" : ""}
`}
data-testid={`calendar-day-${index}`}
>
<div className="flex items-center justify-between mb-3">
<span
className={`
data-testid={`calendar-day-${index}`}
>
<div className="flex items-center justify-between mb-3">
<span
className={`
text-sm font-semibold
${!day.isCurrentMonth ? "text-muted-foreground" : "text-foreground"}
${isToday(day.date) ? "text-primary" : ""}
`}
>
{day.date.getDate()}
</span>
{isToday(day.date) && (
<span className="text-[10px] bg-gradient-to-r from-primary to-secondary text-white px-2 py-0.5 rounded-full font-semibold">
Aujourd'hui
>
{day.date.getDate()}
</span>
)}
</div>
{(() => {
if (!day.isCurrentMonth) return null;
const postsForDay = getPostsForDate(day.date);
if (postsForDay.length === 0) return null;
return (
<div className="space-y-2">
{postsForDay.slice(0, 2).map((post: any, idx) => {
const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
const isPending = !post.publishedAt;
const isPublished = !!post.publishedAt;
const pageName = post.page?.pageName || 'Page inconnue';
const platform = post.page?.platform || 'facebook';
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return (
<div
key={idx}
className={`
{isToday(day.date) && (
<span className="text-[10px] bg-gradient-to-r from-primary to-secondary text-white px-2 py-0.5 rounded-full font-semibold">
Aujourd'hui
</span>
)}
</div>
{(() => {
if (!day.isCurrentMonth) return null;
const postsForDay = getPostsForDate(day.date);
if (postsForDay.length === 0) return null;
return (
<div className="space-y-2">
{postsForDay.slice(0, 2).map((post: any, idx) => {
const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
const isPending = !post.publishedAt;
const isPublished = !!post.publishedAt;
const pageName = post.page?.pageName || 'Page inconnue';
const platform = post.page?.platform || 'facebook';
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return (
<div
key={idx}
className={`
px-3 py-2 rounded-lg text-xs transition-all font-medium shadow-sm group relative
${isPending ? 'bg-blue-500/20 text-blue-600 hover:bg-blue-500/30' : ''}
${isPublished ? 'bg-green-500/20 text-green-600 hover:bg-green-500/30' : ''}
`}
data-testid={`calendar-post-${post.id}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)}
<span>{time}</span>
data-testid={`calendar-post-${post.id}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)}
<span>{time}</span>
</div>
<div className="flex items-center gap-1 truncate opacity-90">
<PlatformIcon className="w-3 h-3 flex-shrink-0" />
<span className="truncate">{pageName}</span>
</div>
</div>
<div className="flex items-center gap-1 truncate opacity-90">
<PlatformIcon className="w-3 h-3 flex-shrink-0" />
<span className="truncate">{pageName}</span>
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={(e) => handlePreviewPost(post, e)}
className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
data-testid={`button-preview-post-${post.id}`}
title="Prévisualiser"
>
<Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
</button>
{isPending && (
<>
<button
onClick={(e) => handleEditPost(post, e)}
className="p-1 hover:bg-blue-500/20 rounded"
data-testid={`button-edit-post-${post.id}`}
title="Modifier"
>
<Edit className="w-3 h-3 text-blue-500" />
</button>
<button
onClick={(e) => handleDeletePost(post.id, e)}
className="p-1 hover:bg-red-500/20 rounded"
data-testid={`button-delete-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-3 h-3 text-red-500" />
</button>
</>
)}
</div>
</div>
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={(e) => handlePreviewPost(post, e)}
className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
data-testid={`button-preview-post-${post.id}`}
title="Prévisualiser"
>
<Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
</button>
{isPending && (
<>
<button
onClick={(e) => handleEditPost(post, e)}
className="p-1 hover:bg-blue-500/20 rounded"
data-testid={`button-edit-post-${post.id}`}
title="Modifier"
>
<Edit className="w-3 h-3 text-blue-500" />
</button>
<button
onClick={(e) => handleDeletePost(post.id, e)}
className="p-1 hover:bg-red-500/20 rounded"
data-testid={`button-delete-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-3 h-3 text-red-500" />
</button>
</>
)}
</div>
</div>
</div>
);
})}
{postsForDay.length > 2 && (
<Popover>
<PopoverTrigger asChild>
<button
className="w-full text-left text-[11px] text-primary hover:text-primary/80 pl-2 font-medium transition-colors flex items-center gap-1"
data-testid="button-show-more-posts"
>
<MoreHorizontal className="w-3 h-3" />
+{postsForDay.length - 2} autre(s)
</button>
</PopoverTrigger>
<PopoverContent className="w-80 p-3" align="start">
<div className="space-y-2">
<h4 className="font-semibold text-sm mb-3">
Tous les posts du {day.date.getDate()} {monthNames[day.date.getMonth()]}
</h4>
{postsForDay.slice(2).map((post: any, idx) => {
const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
const isPending = !post.publishedAt;
const isPublished = !!post.publishedAt;
const pageName = post.page?.pageName || 'Page inconnue';
const platform = post.page?.platform || 'facebook';
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return (
<div
key={idx}
className={`
);
})}
{postsForDay.length > 2 && (
<Popover>
<PopoverTrigger asChild>
<button
className="w-full text-left text-[11px] text-primary hover:text-primary/80 pl-2 font-medium transition-colors flex items-center gap-1"
data-testid="button-show-more-posts"
>
<MoreHorizontal className="w-3 h-3" />
+{postsForDay.length - 2} autre(s)
</button>
</PopoverTrigger>
<PopoverContent className="w-80 p-3" align="start">
<div className="space-y-2">
<h4 className="font-semibold text-sm mb-3">
Tous les posts du {day.date.getDate()} {monthNames[day.date.getMonth()]}
</h4>
{postsForDay.slice(2).map((post: any, idx) => {
const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
const isPending = !post.publishedAt;
const isPublished = !!post.publishedAt;
const pageName = post.page?.pageName || 'Page inconnue';
const platform = post.page?.platform || 'facebook';
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return (
<div
key={idx}
className={`
px-3 py-2 rounded-lg text-xs transition-all font-medium shadow-sm group relative
${isPending ? 'bg-blue-500/20 text-blue-600 hover:bg-blue-500/30' : ''}
${isPublished ? 'bg-green-500/20 text-green-600 hover:bg-green-500/30' : ''}
`}
data-testid={`popover-post-${post.id}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)}
<span>{time}</span>
data-testid={`popover-post-${post.id}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)}
<span>{time}</span>
</div>
<div className="flex items-center gap-1 truncate opacity-90">
<PlatformIcon className="w-3 h-3 flex-shrink-0" />
<span className="truncate">{pageName}</span>
</div>
</div>
<div className="flex items-center gap-1 truncate opacity-90">
<PlatformIcon className="w-3 h-3 flex-shrink-0" />
<span className="truncate">{pageName}</span>
<div className="flex gap-1">
<button
onClick={(e) => handlePreviewPost(post, e)}
className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
data-testid={`button-preview-popover-post-${post.id}`}
title="Prévisualiser"
>
<Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
</button>
{isPending && (
<>
<button
onClick={(e) => handleEditPost(post, e)}
className="p-1 hover:bg-blue-500/20 rounded"
data-testid={`button-edit-popover-post-${post.id}`}
title="Modifier"
>
<Edit className="w-3 h-3 text-blue-500" />
</button>
<button
onClick={(e) => handleDeletePost(post.id, e)}
className="p-1 hover:bg-red-500/20 rounded"
data-testid={`button-delete-popover-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-3 h-3 text-red-500" />
</button>
</>
)}
</div>
</div>
<div className="flex gap-1">
<button
onClick={(e) => handlePreviewPost(post, e)}
className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
data-testid={`button-preview-popover-post-${post.id}`}
title="Prévisualiser"
>
<Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
</button>
{isPending && (
<>
<button
onClick={(e) => handleEditPost(post, e)}
className="p-1 hover:bg-blue-500/20 rounded"
data-testid={`button-edit-popover-post-${post.id}`}
title="Modifier"
>
<Edit className="w-3 h-3 text-blue-500" />
</button>
<button
onClick={(e) => handleDeletePost(post.id, e)}
className="p-1 hover:bg-red-500/20 rounded"
data-testid={`button-delete-popover-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-3 h-3 text-red-500" />
</button>
</>
)}
</div>
</div>
</div>
);
})}
</div>
</PopoverContent>
</Popover>
)}
</div>
);
})()}
</div>
))}
</div>
);
})}
</div>
</PopoverContent>
</Popover>
)}
</div>
);
})()}
</div>
))}
</div>
<div className="mt-8 flex items-center justify-center gap-8 flex-wrap">
<div className="flex items-center gap-3">
@@ -438,9 +440,11 @@ export default function CalendarView() {
postText={previewData.postText}
selectedMedia={previewData.mediaIds}
mediaList={previewData.allMedia}
onPublish={() => {}}
onPublish={() => { }}
isPublishing={false}
readOnly={true}
generationStatus={previewData.generationStatus}
generationProgress={previewData.generationProgress}
/>
</div>
);
client/src/components/ongoing-reels.tsx
+2 -1
View File
@@ -5,7 +5,8 @@ import { Clapperboard, Loader2, CheckCircle2, XCircle } from "lucide-react";
import type { Post } from "@shared/schema";
/** Labels for each progress stage */
function getStageLabel(progress: number): string {
function getStageLabel(progress: number, status?: string): string {
if (status === 'pending') return "En attente de traitement...";
if (progress <= 5) return "Démarrage du traitement…";
if (progress <= 15) return "Traitement vidéo (FFmpeg)…";
if (progress <= 65) return "Encodage en cours…";
client/src/components/preview-modal.tsx
+89 -32
View File
@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ChevronLeft, ChevronRight, Send, Facebook, Instagram, Heart, MessageCircle, Share2, Bookmark } from 'lucide-react';
import { ChevronLeft, ChevronRight, Send, Facebook, Instagram, Heart, MessageCircle, Share2, Bookmark, Loader2, Video } from 'lucide-react';
import type { Media } from '@shared/schema';
import { removeHashtags } from '@shared/emoji';
import { EmojiText } from '@/components/emoji-text';
@@ -16,6 +16,8 @@ interface PreviewModalProps {
onPublish: () => void;
isPublishing: boolean;
readOnly?: boolean;
generationStatus?: string;
generationProgress?: number;
}
type PreviewFormat = 'facebook-feed' | 'facebook-story' | 'instagram-feed' | 'instagram-story';
@@ -28,7 +30,9 @@ export function PreviewModal({
mediaList,
onPublish,
isPublishing,
readOnly = false
readOnly = false,
generationStatus,
generationProgress
}: PreviewModalProps) {
const [previewFormat, setPreviewFormat] = useState<PreviewFormat>('facebook-feed');
const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
@@ -68,7 +72,7 @@ export function PreviewModal({
const renderMedia = (media: Media, className: string = "w-full h-auto") => {
const url = getMediaUrl(media);
if (media.type === 'video') {
return (
<video
@@ -80,7 +84,7 @@ export function PreviewModal({
/>
);
}
return (
<img
src={url}
@@ -110,6 +114,25 @@ export function PreviewModal({
</div>
)}
{/* Is Generating Status Overlay */}
{orderedMedia.length === 0 && (generationStatus === 'processing' || generationStatus === 'pending') && (
<div className="relative bg-black aspect-video flex flex-col items-center justify-center text-white">
<Loader2 className="w-10 h-10 animate-spin text-primary mb-4" />
<h3 className="text-lg font-semibold">Génération vidéo en cours...</h3>
<p className="text-sm text-gray-300 mt-2 text-center px-4">
FFmpeg assemble votre vidéo. <br /> Elle s'affichera ici une fois terminée.
</p>
{generationProgress !== undefined && (
<div className="w-64 h-2 bg-gray-800 rounded-full mt-4 overflow-hidden">
<div
className="h-full bg-primary transition-all duration-500 ease-out"
style={{ width: `${generationProgress}%` }}
/>
</div>
)}
</div>
)}
{/* Media Carousel */}
{orderedMedia.length > 0 && (
<div className="relative bg-black">
@@ -135,9 +158,8 @@ export function PreviewModal({
<button
key={idx}
onClick={() => goToPhoto(idx)}
className={`w-2 h-2 rounded-full transition-colors ${
idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
className={`w-2 h-2 rounded-full transition-colors ${idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
data-testid={`button-photo-indicator-${idx}`}
/>
))}
@@ -168,6 +190,23 @@ export function PreviewModal({
</div>
</div>
{/* Is Generating Status Overlay */}
{orderedMedia.length === 0 && (generationStatus === 'processing' || generationStatus === 'pending') && (
<div className="relative bg-black aspect-square flex flex-col items-center justify-center text-white">
<Loader2 className="w-10 h-10 animate-spin text-primary mb-4" />
<h3 className="text-lg font-semibold">Génération en cours...</h3>
<p className="text-sm text-gray-300 mt-2">Veuillez patienter.</p>
{generationProgress !== undefined && (
<div className="w-48 h-2 bg-gray-800 rounded-full mt-4 overflow-hidden">
<div
className="h-full bg-primary transition-all duration-500 ease-out"
style={{ width: `${generationProgress}%` }}
/>
</div>
)}
</div>
)}
{/* Media Carousel */}
{orderedMedia.length > 0 && (
<div className="relative bg-black aspect-square">
@@ -193,9 +232,8 @@ export function PreviewModal({
<button
key={idx}
onClick={() => goToPhoto(idx)}
className={`h-1 flex-1 transition-colors rounded ${
idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
className={`h-1 flex-1 transition-colors rounded ${idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
style={{ width: '40px' }}
data-testid={`button-photo-indicator-${idx}`}
/>
@@ -239,12 +277,12 @@ export function PreviewModal({
for (const word of words) {
const testLine = currentLine ? `${currentLine} ${word}` : word;
const metrics = ctx.measureText(testLine);
if (metrics.width > maxWidth && currentLine) {
// Current line would exceed width, push it and start new line
lines.push(currentLine);
currentLine = word;
// Check if the word itself is too long for a single line
const wordMetrics = ctx.measureText(word);
if (wordMetrics.width > maxWidth) {
@@ -266,7 +304,7 @@ export function PreviewModal({
currentLine = testLine;
}
}
if (currentLine) {
lines.push(currentLine);
}
@@ -280,12 +318,12 @@ export function PreviewModal({
const breakLongWord = (ctx: CanvasRenderingContext2D, word: string, maxWidth: number): string[] => {
const chunks: string[] = [];
let currentChunk = '';
for (let i = 0; i < word.length; i++) {
const char = word[i];
const testChunk = currentChunk + char;
const metrics = ctx.measureText(testChunk);
if (metrics.width > maxWidth && currentChunk) {
chunks.push(currentChunk);
currentChunk = char;
@@ -293,11 +331,11 @@ export function PreviewModal({
currentChunk = testChunk;
}
}
if (currentChunk) {
chunks.push(currentChunk);
}
return chunks.length > 0 ? chunks : [word];
};
@@ -305,31 +343,31 @@ export function PreviewModal({
const MIN_FONT_SIZE = 12;
const MAX_FONT_SIZE = 72;
const LINE_HEIGHT_MULTIPLIER = 1.2;
let fontSize = MAX_FONT_SIZE;
let lines: string[] = [];
let totalTextHeight = 0;
while (fontSize >= MIN_FONT_SIZE) {
lines = wrapText(text, containerWidth, fontSize);
const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
totalTextHeight = lines.length * lineHeight;
if (totalTextHeight <= containerHeight) {
break;
}
fontSize -= 2;
}
let isTruncated = false;
if (fontSize < MIN_FONT_SIZE) {
fontSize = MIN_FONT_SIZE;
lines = wrapText(text, containerWidth, fontSize);
const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
totalTextHeight = lines.length * lineHeight;
const maxLines = Math.floor(containerHeight / lineHeight);
if (lines.length > maxLines) {
lines = lines.slice(0, maxLines);
@@ -348,12 +386,12 @@ export function PreviewModal({
const STORY_HEIGHT = 640;
const TEXT_BOX_HEIGHT_RATIO = 0.25;
const PADDING = 16;
const textBoxHeight = STORY_HEIGHT * TEXT_BOX_HEIGHT_RATIO;
const maxTextWidth = STORY_WIDTH - (PADDING * 2);
const maxTextHeight = textBoxHeight - (PADDING * 2);
const { fontSize, lines } = postText
const { fontSize, lines } = postText
? calculateAdaptiveFontSize(postText, maxTextWidth, maxTextHeight)
: { fontSize: 24, lines: [] };
@@ -375,6 +413,26 @@ export function PreviewModal({
</div>
</div>
{/* Is Generating Status Overlay */}
{orderedMedia.length === 0 && (generationStatus === 'processing' || generationStatus === 'pending') && (
<div className="relative w-full h-full flex flex-col items-center justify-center text-white bg-black">
<Loader2 className="w-12 h-12 animate-spin text-primary mb-6" />
<h3 className="text-2xl font-semibold px-8 text-center drop-shadow-md">Création de votre Reel...</h3>
<p className="text-base text-gray-300 mt-4 text-center px-10 drop-shadow-md">
Montage vidéo en cours via FFmpeg. Le résultat apparaîtra ici lorsqu'il sera prêt (environ 1-2 min).
</p>
{generationProgress !== undefined && (
<div className="w-64 h-3 bg-gray-800 rounded-full mt-8 overflow-hidden shadow-inner">
<div
className="h-full bg-primary transition-all duration-500 ease-out"
style={{ width: `${generationProgress}%` }}
/>
</div>
)}
<div className="mt-2 text-primary font-medium">{generationProgress || 0}%</div>
</div>
)}
{/* Media */}
{orderedMedia.length > 0 && (
<div className="relative w-full h-full">
@@ -386,9 +444,8 @@ export function PreviewModal({
<button
key={idx}
onClick={() => goToPhoto(idx)}
className={`h-1 flex-1 transition-colors rounded-full ${
idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
className={`h-1 flex-1 transition-colors rounded-full ${idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
data-testid={`button-photo-indicator-${idx}`}
/>
))}
@@ -409,17 +466,17 @@ export function PreviewModal({
</button>
</>
)}
{/* Text overlay box - matching exact server rendering */}
{postText && (
<div
<div
className="absolute bottom-0 left-0 right-0 flex items-center justify-center z-10"
style={{ height: `${TEXT_BOX_HEIGHT_RATIO * 100}%` }}
>
<div className="absolute inset-0 bg-black/60" />
<div
<div
className="relative text-white text-center font-bold leading-tight"
style={{
style={{
fontSize: `${fontSize}px`,
padding: `${PADDING}px`,
lineHeight: '1.2'
client/src/components/recent-publications.tsx
+89 -2
View File
@@ -14,10 +14,27 @@ type ScheduledPostWithRelations = ScheduledPost & {
page?: SocialPage;
};
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Trash2 } from "lucide-react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
export default function RecentPublications() {
const [previewModalOpen, setPreviewModalOpen] = useState(false);
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] });
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [postToDelete, setPostToDelete] = useState<string | null>(null);
const { toast } = useToast();
const queryClient = useQueryClient();
const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({
queryKey: ['/api/scheduled-posts'],
@@ -60,6 +77,42 @@ export default function RecentPublications() {
}
};
const deleteReelMutation = useMutation({
mutationFn: async (postId: string) => {
// Pour les Reels/Posts, l'ID est le même. La route DELETE /api/reels/:id
// gère la suppression du Post sous-jacent.
const res = await apiRequest("DELETE", `/api/reels/${postId}`);
return await res.json();
},
onSuccess: () => {
toast({
title: "Succès",
description: "Publication supprimée avec succès",
});
queryClient.invalidateQueries({ queryKey: ['/api/scheduled-posts'] });
setDeleteDialogOpen(false);
setPostToDelete(null);
},
onError: (error: Error) => {
toast({
title: "Erreur",
description: error.message || "Impossible de supprimer la publication",
variant: "destructive",
});
},
});
const handleDeleteClick = (postId: string) => {
setPostToDelete(postId);
setDeleteDialogOpen(true);
};
const confirmDelete = () => {
if (postToDelete) {
deleteReelMutation.mutate(postToDelete);
}
};
const getPostTypeIcon = (postType: string) => {
if (postType === 'feed') {
return <ImageIcon className="w-3.5 h-3.5" />;
@@ -108,8 +161,8 @@ export default function RecentPublications() {
>
{/* Platform icon */}
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${scheduledPost.page?.platform === 'facebook'
? 'bg-blue-500'
: 'bg-gradient-to-br from-purple-500 to-pink-500'
? 'bg-blue-500'
: 'bg-gradient-to-br from-purple-500 to-pink-500'
}`}>
{scheduledPost.page?.platform === 'facebook' ? (
<Facebook className="w-5 h-5 text-white" />
@@ -144,6 +197,16 @@ export default function RecentPublications() {
>
<Eye className="w-4 h-4 text-muted-foreground hover:text-foreground" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => handleDeleteClick(scheduledPost.postId)}
className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive transition-colors"
data-testid={`button-delete-post-${scheduledPost.id}`}
title="Supprimer"
>
<Trash2 className="w-4 h-4" />
</Button>
{scheduledPost.error ? (
<XCircle className="w-4 h-4 text-destructive" />
) : (
@@ -187,6 +250,30 @@ export default function RecentPublications() {
isPublishing={false}
readOnly={true}
/>
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Êtes-vous sûr ?</AlertDialogTitle>
<AlertDialogDescription>
Cette action est irréversible. Cela supprimera définitivement cette publication de votre historique et des statistiques associées.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deleteReelMutation.isPending}>Annuler</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.preventDefault();
confirmDelete();
}}
disabled={deleteReelMutation.isPending}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
{deleteReelMutation.isPending ? "Suppression..." : "Supprimer"}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</Card>
);
}
client/src/components/sidebar.tsx
+25 -1
View File
@@ -1,4 +1,4 @@
import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight, Wand2, BarChart3, Video } from "lucide-react";
import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight, Wand2, BarChart3, Video, Music } from "lucide-react";
import { Link, useLocation } from "wouter";
import { useQuery, useMutation } from "@tanstack/react-query";
import { apiRequest, queryClient } from "@/lib/queryClient";
@@ -286,6 +286,30 @@ export default function Sidebar({ onLinkClick }: SidebarProps = {}) {
</div>
)}
</a>
<a
href="/audio-admin"
onClick={(e) => handleLinkClick("/audio-admin", e)}
className={`
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
${location === "/audio-admin"
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
}
${isCollapsed ? 'justify-center' : ''}
`}
data-testid="link-audio-admin"
>
{location === "/audio-admin" && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
)}
<Music className="w-5 h-5" />
{!isCollapsed && <span>Bibliothèque Audio</span>}
{isCollapsed && (
<div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
Bibliothèque Audio
</div>
)}
</a>
<a
href="/settings"
onClick={(e) => handleLinkClick("/settings", e)}
client/src/components/topbar.tsx
+31 -13
View File
@@ -1,28 +1,46 @@
import { Menu, Search } from "lucide-react";
import { Menu, Search, ChevronLeft } from "lucide-react";
import { Input } from "@/components/ui/input";
import { useLocation, Link } from "wouter";
import { Button } from "@/components/ui/button";
interface TopBarProps {
onMenuClick: () => void;
onMenuClick?: () => void;
hideMenuButton?: boolean;
}
export default function TopBar({ onMenuClick }: TopBarProps) {
export default function TopBar({ onMenuClick, hideMenuButton = false }: TopBarProps) {
const [location] = useLocation();
const showBackButton = location !== "/";
return (
<header className="bg-card/50 backdrop-blur-xl border-b border-border/50 sticky top-0 z-10">
<div className="flex items-center justify-between px-4 sm:px-6 lg:px-8 py-4 sm:py-5">
<div className="flex items-center gap-3 sm:gap-6 flex-1">
<button
className="lg:hidden text-foreground hover:text-primary transition-all hover:scale-110 active:scale-95 p-2 hover:bg-primary/10 rounded-xl"
onClick={onMenuClick}
data-testid="button-menu"
aria-label="Toggle menu"
>
<Menu className="w-6 h-6" />
</button>
<div className="lg:hidden flex items-center gap-2">
{showBackButton ? (
<Link href="/">
<Button variant="ghost" size="icon" className="text-foreground hover:text-primary transition-all">
<ChevronLeft className="w-6 h-6" />
</Button>
</Link>
) : (
!hideMenuButton && (
<button
className="text-foreground hover:text-primary transition-all hover:scale-110 active:scale-95 p-2 hover:bg-primary/10 rounded-xl"
onClick={onMenuClick}
data-testid="button-menu"
aria-label="Toggle menu"
>
<Menu className="w-6 h-6" />
</button>
)
)}
</div>
<div className="flex-1 max-w-md hidden md:block">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<Input
placeholder="Rechercher des publications, pages, médias..."
<Input
placeholder="Rechercher des publications, pages, médias..."
className="pl-10 bg-muted/30 border-muted focus:border-primary/50 rounded-xl"
/>
</div>
client/src/pages/audio-admin.tsx
+283
View File
@@ -0,0 +1,283 @@
import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import Sidebar from "@/components/sidebar";
import TopBar from "@/components/topbar";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useToast } from "@/hooks/use-toast";
import { Trash2, Music, Upload, Loader2, Play, Pause } from "lucide-react";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
interface AudioTrack {
id: number;
userId: number;
title: string;
url: string;
duration: number | null;
createdAt: string;
}
export default function AudioAdmin() {
const [sidebarOpen, setSidebarOpen] = useState(false);
const [isUploading, setIsUploading] = useState(false);
const [playingTrackId, setPlayingTrackId] = useState<number | null>(null);
const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
const { toast } = useToast();
const queryClient = useQueryClient();
const { data: tracks = [], isLoading } = useQuery<AudioTrack[]>({
queryKey: ["/api/audio-tracks"],
});
const uploadMutation = useMutation({
mutationFn: async (files: File[]) => {
const formData = new FormData();
for (const file of files) {
formData.append("files", file);
}
const res = await fetch("/api/audio-tracks", {
method: "POST",
body: formData,
});
if (!res.ok) {
const error = await res.json();
throw new Error(error.error || "Erreur lors de l'upload");
}
return res.json();
},
onSuccess: (data) => {
queryClient.invalidateQueries({ queryKey: ["/api/audio-tracks"] });
const successCount = data.results?.filter((r: any) => r.success).length ?? 0;
const failCount = data.results?.filter((r: any) => !r.success).length ?? 0;
toast({
title: "Upload terminé",
description: failCount > 0
? `${successCount} fichier(s) ajouté(s), ${failCount} échec(s)`
: `${successCount} fichier(s) ajouté(s) à la bibliothèque`,
});
},
onError: (error: Error) => {
toast({
title: "Erreur",
description: error.message,
variant: "destructive",
});
},
onSettled: () => {
setIsUploading(false);
}
});
const deleteMutation = useMutation({
mutationFn: async (id: number) => {
const res = await fetch(`/api/audio-tracks/${id}`, {
method: "DELETE",
});
if (!res.ok) {
throw new Error("Erreur lors de la suppression");
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["/api/audio-tracks"] });
toast({
title: "Succès",
description: "La piste audio a été supprimée",
});
},
onError: (error: Error) => {
toast({
title: "Erreur",
description: error.message,
variant: "destructive",
});
}
});
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
const files = Array.from(e.target.files || []);
if (files.length === 0) return;
const invalidFiles = files.filter(f => !f.type.startsWith("audio/"));
if (invalidFiles.length > 0) {
toast({
title: "Format invalide",
description: "Certains fichiers ne sont pas des fichiers audio (MP3, WAV, etc.)",
variant: "destructive",
});
return;
}
setIsUploading(true);
uploadMutation.mutate(files);
// Reset input
if (e.target) {
e.target.value = "";
}
};
const togglePlay = (track: AudioTrack) => {
if (playingTrackId === track.id) {
audioElement?.pause();
setPlayingTrackId(null);
} else {
if (audioElement) {
audioElement.pause();
}
const newAudio = new Audio(track.url);
newAudio.play();
newAudio.onended = () => {
setPlayingTrackId(null);
};
setAudioElement(newAudio);
setPlayingTrackId(track.id);
}
};
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 w-full">
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
<div className="p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto space-y-8">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div>
<h1 className="text-3xl font-bold flex items-center gap-3">
<Music className="w-8 h-8 text-primary" />
Bibliothèque Audio
</h1>
<p className="text-muted-foreground mt-2">
Gérez les musiques disponibles pour la création de Reels
</p>
</div>
<div>
<input
type="file"
id="audio-upload"
className="hidden"
accept="audio/*"
multiple
onChange={handleFileUpload}
disabled={isUploading}
/>
<label htmlFor="audio-upload">
<Button
asChild
disabled={isUploading}
className="cursor-pointer"
>
<span>
{isUploading ? (
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
) : (
<Upload className="w-4 h-4 mr-2" />
)}
{isUploading ? "Upload en cours..." : "Ajouter un fichier audio"}
</span>
</Button>
</label>
</div>
</div>
<Card className="border-border/50 shadow-sm">
<CardHeader>
<CardTitle>Musiques ({tracks.length})</CardTitle>
<CardDescription>
Ces pistes pourront être sélectionnées par les utilisateurs lors de la création d'un nouveau Reel.
</CardDescription>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="flex justify-center p-8">
<Loader2 className="w-8 h-8 animate-spin text-primary" />
</div>
) : tracks.length === 0 ? (
<div className="text-center p-12 border-2 border-dashed border-border rounded-xl">
<Music className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
<h3 className="text-lg font-medium mb-1">Aucune musique</h3>
<p className="text-muted-foreground">
Vous n'avez pas encore ajouté de piste audio. Les musiques ajoutées ici seront utilisables pour les Reels.
</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{tracks.map((track) => (
<div
key={track.id}
className="bg-card border border-border/50 rounded-xl p-4 flex flex-col gap-4 hover:border-primary/30 transition-colors shadow-sm"
>
<div className="flex items-start justify-between gap-3">
<div className="p-3 bg-primary/10 rounded-lg shrink-0">
<Music className="w-6 h-6 text-primary" />
</div>
<div className="flex-1 min-w-0">
<p className="font-semibold text-sm truncate" title={track.title}>{track.title}</p>
<p className="text-xs text-muted-foreground mt-1">
{format(new Date(track.createdAt), "dd MMM yyyy", { locale: fr })}
</p>
</div>
</div>
<div className="flex items-center justify-between pt-2 border-t border-border/50">
<Button
variant="ghost"
size="sm"
className={playingTrackId === track.id ? "text-primary bg-primary/10" : ""}
onClick={() => togglePlay(track)}
>
{playingTrackId === track.id ? (
<><Pause className="w-4 h-4 mr-2" /> Pause</>
) : (
<><Play className="w-4 h-4 mr-2" /> Écouter</>
)}
</Button>
<Button
variant="ghost"
size="icon"
className="text-destructive hover:text-destructive hover:bg-destructive/10"
onClick={() => {
if (confirm("Voulez-vous vraiment supprimer cette musique ?")) {
deleteMutation.mutate(track.id);
}
}}
disabled={deleteMutation.isPending}
>
<Trash2 className="w-4 h-4" />
</Button>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
</div>
</main>
</div>
);
}
client/src/pages/history.tsx
+5 -1
View File
@@ -20,7 +20,7 @@ type ScheduledPostWithRelations = ScheduledPost & {
export default function History() {
const [sidebarOpen, setSidebarOpen] = useState(false);
const [previewModalOpen, setPreviewModalOpen] = useState(false);
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] });
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[]; generationStatus?: string; generationProgress?: number }>({ postText: '', mediaIds: [], allMedia: [] });
const { toast } = useToast();
const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({
@@ -52,6 +52,8 @@ export default function History() {
postText: postWithMedia.post.content || '',
mediaIds: mediaIds,
allMedia: allMedia,
generationStatus: postWithMedia.post.generationStatus,
generationProgress: postWithMedia.post.generationProgress,
});
setPreviewModalOpen(true);
@@ -241,6 +243,8 @@ export default function History() {
onPublish={() => { }}
isPublishing={false}
readOnly={true}
generationStatus={previewData.generationStatus}
generationProgress={previewData.generationProgress}
/>
</main>
</div>
client/src/pages/mobile/audio-admin.tsx
+2
View File
@@ -0,0 +1,2 @@
import AudioAdmin from "../audio-admin";
export default AudioAdmin;
client/src/pages/mobile/dashboard.tsx
+99 -26
View File
@@ -1,42 +1,115 @@
import Sidebar from "@/components/sidebar";
import TopBar from "@/components/topbar";
import StatsCards from "@/components/stats-cards";
import OngoingReels from "@/components/ongoing-reels";
import RecentPublications from "@/components/recent-publications";
import ManagedPages from "@/components/managed-pages";
import { useState } from "react";
import { Link, useLocation } from "wouter";
import {
PlusCircle,
Video,
Calendar,
BarChart3,
Images,
Wand2,
Clock,
Settings,
Users,
ChevronRight,
Sparkles
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
export default function DashboardMobile() {
const [sidebarOpen, setSidebarOpen] = useState(false);
const [, setLocation] = useLocation();
const mainActions = [
{ icon: PlusCircle, label: "Nv. Post", href: "/new", color: "text-blue-500", bg: "bg-blue-500/10", border: "border-blue-500/20", description: "Créer une publication" },
{ icon: Video, label: "Nv. Reel", href: "/reel", color: "text-purple-500", bg: "bg-purple-500/10", border: "border-purple-500/20", description: "Générer une vidéo IA" },
{ icon: Calendar, label: "Calendrier", href: "/calendar", color: "text-amber-500", bg: "bg-amber-500/10", border: "border-amber-500/20", description: "Voir le planning" },
{ icon: BarChart3, label: "Analytics", href: "/analytics", color: "text-emerald-500", bg: "bg-emerald-500/10", border: "border-emerald-500/20", description: "Statistiques" },
];
const secondaryMenu = [
{ icon: Images, label: "Médiathèque", href: "/media" },
{ icon: Wand2, label: "Éditeur d'images", href: "/image-editor" },
{ icon: Clock, label: "Historique", href: "/history" },
{ icon: Users, label: "Pages connectées", href: "/pages" },
{ icon: Settings, label: "Paramètres", href: "/settings" },
];
return (
<div className="flex h-screen overflow-hidden bg-background">
{sidebarOpen && (
<div
className="fixed inset-0 bg-black/50 z-40"
onClick={() => setSidebarOpen(false)}
/>
)}
<div className={`
fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
`}>
<Sidebar onLinkClick={() => setSidebarOpen(false)} />
</div>
<main className="flex-1 overflow-y-auto">
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
<TopBar onMenuClick={() => { }} hideMenuButton={true} />
{/* MOBILE: Reduced padding, single column layout with better spacing */}
<div className="p-4 space-y-6">
<StatsCards />
<div className="p-4 space-y-6 pb-20">
{/* Header Section */}
<div className="flex items-center gap-3 mb-2">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
<Sparkles className="w-6 h-6 text-white" />
</div>
<div>
<h1 className="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
Social Flow
</h1>
<p className="text-xs text-muted-foreground">Tableau de bord</p>
</div>
</div>
{/* 1. Status Section */}
<OngoingReels compact />
<RecentPublications />
{/* 2. Main Action Grid */}
<Card className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
<CardHeader className="p-4 pb-2">
<CardTitle className="text-base font-semibold">Actions Rapides</CardTitle>
</CardHeader>
<CardContent className="p-4">
<div className="grid grid-cols-2 gap-3">
{mainActions.map((item) => {
const Icon = item.icon;
return (
<Link key={item.href} href={item.href}>
<div className={`
flex flex-col items-center justify-center p-4 rounded-xl border cursor-pointer transition-all active:scale-95 hover:opacity-80
${item.bg} ${item.border}
`}>
<div className={`p-2 rounded-full bg-background/80 shadow-sm mb-2`}>
<Icon className={`w-6 h-6 ${item.color}`} />
</div>
<span className="font-semibold text-sm text-foreground">{item.label}</span>
<span className="text-[10px] text-muted-foreground mt-1 text-center">{item.description}</span>
</div>
</Link>
);
})}
</div>
</CardContent>
</Card>
<ManagedPages />
{/* 3. Secondary Menu List */}
<Card className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
<CardHeader className="p-4 pb-2">
<CardTitle className="text-base font-semibold">Menu</CardTitle>
</CardHeader>
<CardContent className="p-0">
<div className="divide-y divide-border/50">
{secondaryMenu.map((item) => {
const Icon = item.icon;
return (
<Link key={item.href} href={item.href}>
<div className="flex items-center gap-4 p-4 hover:bg-muted/50 transition-colors cursor-pointer active:bg-muted">
<div className="p-2 rounded-lg bg-muted text-foreground">
<Icon className="w-5 h-5" />
</div>
<span className="flex-1 font-medium text-sm">{item.label}</span>
<ChevronRight className="w-4 h-4 text-muted-foreground" />
</div>
</Link>
);
})}
</div>
</CardContent>
</Card>
</div>
</main>
</div>
client/src/pages/mobile/new-reel.tsx
+41 -31
View File
@@ -62,7 +62,6 @@ export default function MobileNewReel() {
// État audio preview
const [isPlaying, setIsPlaying] = useState<string | null>(null);
const [musicOffset, setMusicOffset] = useState(0);
const [stabilize, setStabilize] = useState(true); // Activé par défaut pour les Reels
@@ -75,27 +74,24 @@ export default function MobileNewReel() {
});
const videoList = allMedia.filter(m => m.type === 'video').slice(0, 12);
const [loadedTracks, setLoadedTracks] = useState<MusicTrack[]>([]);
const { data: musicData, isLoading: musicLoading, refetch: refetchMusic } = useQuery<{ tracks: MusicTrack[] }>({
queryKey: ['/api/music/search', selectedVideo?.id, musicOffset],
queryFn: async () => {
const minDuration = 10;
const maxDuration = 120;
const response = await fetch(
`/api/music/search?minDuration=${minDuration}&maxDuration=${maxDuration}&limit=10&offset=${musicOffset}`
);
const data = await response.json();
setLoadedTracks(data.tracks || []);
return data;
},
enabled: currentStep === 'music' && !!selectedVideo,
// --- Added for Internal Audio Tracks ---
const { data: internalTracksResponse = [], isLoading: internalTracksLoading } = useQuery<any[]>({
queryKey: ['/api/audio-tracks'],
});
const handleLoadNewMusic = () => {
setMusicOffset(prev => prev + 10);
refetchMusic();
};
const internalTracks: MusicTrack[] = (internalTracksResponse || []).map(t => ({
id: `internal_${t.id}`,
title: t.title,
artist: t.fileName || t.title,
albumName: "Bibliothèque Interne",
duration: t.duration || 0,
previewUrl: t.url,
downloadUrl: t.url,
imageUrl: "",
license: "Internal"
}));
// --- End Internal Tracks ---
const uploadMutation = useMutation({
mutationFn: async (file: File) => {
@@ -269,7 +265,7 @@ export default function MobileNewReel() {
) : (
<div className="grid grid-cols-2 gap-3 mt-4">
{videoList.map((media) => (
<div key={media.id} onClick={() => setSelectedVideoId(media.id) || setSelectedVideo(media)} className={`relative aspect-[9/16] bg-black rounded-lg overflow-hidden border-2 transition-all ${selectedVideoId === media.id ? 'border-primary' : 'border-transparent'}`}>
<div key={media.id} onClick={() => { setSelectedVideoId(media.id); setSelectedVideo(media); }} className={`relative aspect-[9/16] bg-black rounded-lg overflow-hidden border-2 transition-all ${selectedVideoId === media.id ? 'border-primary' : 'border-transparent'}`}>
<video src={media.originalUrl} className="w-full h-full object-cover" muted />
</div>
))}
@@ -314,18 +310,32 @@ export default function MobileNewReel() {
)}
<div className="space-y-2">
{musicData?.tracks?.map((track) => (
<div key={track.id} onClick={() => setSelectedTrack(track)} className={`flex items-center gap-3 p-3 rounded-xl border ${selectedTrack?.id === track.id ? 'border-primary bg-primary/5' : 'border-border bg-card'}`}>
<Button size="icon" variant="ghost" className="h-10 w-10 rounded-full bg-primary/10" onClick={(e) => { e.stopPropagation(); togglePlayPreview(track); }}>
{isPlaying === track.id ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5 ml-0.5" />}
</Button>
<div className="flex-1 min-w-0">
<p className="font-medium truncate">{track.title}</p>
<p className="text-xs text-muted-foreground truncate">{track.artist}</p>
</div>
{selectedTrack?.id === track.id && <Check className="h-5 w-5 text-primary" />}
{internalTracksLoading ? (
<div className="flex items-center justify-center py-8">
<Loader2 className="w-8 h-8 animate-spin text-primary" />
</div>
))}
) : internalTracks.length === 0 ? (
<div className="text-center py-10 border-2 border-dashed border-border rounded-xl">
<Music className="w-12 h-12 mx-auto text-muted-foreground mb-4 opacity-40" />
<p className="text-muted-foreground font-medium">Aucune musique disponible</p>
<p className="text-sm text-muted-foreground mt-1">Un administrateur peut ajouter des MP3 via la Bibliothèque Audio.</p>
</div>
) : (
internalTracks.map((track) => (
<div key={track.id} onClick={() => setSelectedTrack(track)} className={`flex items-center gap-3 p-3 rounded-xl border ${selectedTrack?.id === track.id ? 'border-primary bg-primary/5' : 'border-border bg-card'}`}>
<Button size="icon" variant="ghost" className="h-10 w-10 rounded-full bg-primary/10" onClick={(e) => { e.stopPropagation(); togglePlayPreview(track); }}>
{isPlaying === track.id ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5 ml-0.5" />}
</Button>
<div className="flex-1 min-w-0">
<p className="font-medium truncate">{track.title}</p>
<p className="text-xs text-muted-foreground truncate">
{Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')}
</p>
</div>
{selectedTrack?.id === track.id && <Check className="h-5 w-5 text-primary" />}
</div>
))
)}
</div>
{selectedTrack && (
client/src/pages/new-reel.tsx
+100 -130
View File
@@ -69,10 +69,17 @@ export default function NewReel() {
const [drawText, setDrawText] = useState(true);
const [stabilize, setStabilize] = useState(true); // default to true
// Enable TTS by default on mobile
useEffect(() => {
const isMobile = window.innerWidth < 768;
if (isMobile) {
setTtsEnabled(true);
}
}, []);
// État audio preview
const [isPlaying, setIsPlaying] = useState<string | null>(null);
const [musicOffset, setMusicOffset] = useState(0);
// Récupérer les pages disponibles
const { data: pages = [] } = useQuery<SocialPage[]>({
@@ -86,31 +93,23 @@ export default function NewReel() {
const videoList = allMedia.filter(m => m.type === 'video').slice(0, 12);
// État pour stocker les musiques chargées manuellement
const [loadedTracks, setLoadedTracks] = useState<MusicTrack[]>([]);
// Recherche de musiques par durée
const { data: musicData, isLoading: musicLoading, refetch: refetchMusic } = useQuery<{ tracks: MusicTrack[] }>({
queryKey: ['/api/music/search', selectedVideo?.id, musicOffset],
queryFn: async () => {
// Estimer la durée vidéo (on prend une marge de ±10 secondes)
const minDuration = 10;
const maxDuration = 120; // On prend toutes les musiques courtes
const response = await fetch(
`/api/music/search?minDuration=${minDuration}&maxDuration=${maxDuration}&limit=10&offset=${musicOffset}`
);
const data = await response.json();
setLoadedTracks(data.tracks || []);
return data;
},
enabled: currentStep === 'music' && !!selectedVideo,
// --- Added for Internal Audio Tracks ---
const { data: internalTracksResponse = [], isLoading: internalTracksLoading } = useQuery<any[]>({
queryKey: ['/api/audio-tracks'],
});
// Charger 10 nouvelles musiques
const handleLoadNewMusic = () => {
setMusicOffset(prev => prev + 10);
refetchMusic();
};
const internalTracks: MusicTrack[] = (internalTracksResponse || []).map(t => ({
id: `internal_${t.id}`,
title: t.title,
artist: t.fileName || t.title,
albumName: "Bibliothèque Interne",
duration: t.duration || 0,
previewUrl: t.url,
downloadUrl: t.url,
imageUrl: "",
license: "Internal"
}));
// --- End Internal Tracks ---
// Upload vidéo
const uploadMutation = useMutation({
@@ -531,118 +530,89 @@ export default function NewReel() {
<CardContent>
<audio ref={audioRef} onEnded={() => setIsPlaying(null)} />
{musicLoading ? (
<div className="flex items-center justify-center py-8">
<Loader2 className="w-8 h-8 animate-spin text-primary" />
</div>
) : (
<>
<div className="space-y-2">
{(!musicData?.tracks || musicData.tracks.length === 0) && (
<div className="text-center py-8 border-2 border-dashed border-border rounded-lg">
<Music className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
<p className="text-muted-foreground mb-2">
Aucune musique disponible
</p>
<p className="text-xs text-muted-foreground mb-4">
Service FreeSound non configuré ou aucun résultat trouvé
</p>
<a
href="https://freesound.org/apiv2/apply/"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-primary hover:underline"
>
Obtenir des credentials FreeSound →
</a>
</div>
)}
{musicData?.tracks?.map((track) => (
<div
key={track.id}
onClick={() => handleSelectTrack(track)}
className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all ${selectedTrack?.id === track.id
? 'bg-primary/10 border border-primary'
: 'bg-muted/50 hover:bg-muted'
}`}
{/* BIBLIOTHÈQUE INTERNE */}
<div className="space-y-2">
{internalTracksLoading ? (
<div className="flex items-center justify-center py-8">
<Loader2 className="w-8 h-8 animate-spin text-primary" />
</div>
) : internalTracks.length === 0 ? (
<div className="text-center py-10 border-2 border-dashed border-border rounded-xl">
<Music className="w-12 h-12 mx-auto text-muted-foreground mb-4 opacity-40" />
<p className="text-muted-foreground font-medium">Aucune musique disponible</p>
<p className="text-sm text-muted-foreground mt-1">Un administrateur peut ajouter des MP3 via la Bibliothèque Audio.</p>
</div>
) : (
internalTracks.map((track) => (
<div
key={track.id}
onClick={() => handleSelectTrack(track)}
className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all ${selectedTrack?.id === track.id
? 'bg-primary/10 border border-primary'
: 'bg-muted/50 hover:bg-muted'
}`}
>
<button
onClick={(e) => {
e.stopPropagation();
togglePlayPreview(track);
}}
className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/30 shrink-0"
>
<button
onClick={(e) => {
e.stopPropagation();
togglePlayPreview(track);
}}
className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/30"
>
{isPlaying === track.id ? (
<Pause className="w-5 h-5" />
) : (
<Play className="w-5 h-5 ml-0.5" />
)}
</button>
<div className="flex-1 min-w-0">
<p className="font-medium truncate">{track.title}</p>
<p className="text-sm text-muted-foreground truncate">{track.artist}</p>
</div>
<span className="text-sm text-muted-foreground">
{formatDuration(track.duration)}
</span>
{selectedTrack?.id === track.id && (
<Check className="w-5 h-5 text-primary" />
{isPlaying === track.id ? (
<Pause className="w-5 h-5" />
) : (
<Play className="w-5 h-5 ml-0.5" />
)}
</button>
<div className="flex-1 min-w-0">
<p className="font-medium truncate">{track.title}</p>
<p className="text-xs text-muted-foreground truncate">
{Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')}
</p>
</div>
))}
{/* Bouton pour charger 10 nouvelles musiques */}
{musicData?.tracks && musicData.tracks.length > 0 && (
<Button
variant="outline"
className="w-full mt-4"
onClick={handleLoadNewMusic}
disabled={musicLoading}
>
<RefreshCw className={`w-4 h-4 mr-2 ${musicLoading ? 'animate-spin' : ''}`} />
10 nouvelles musiques
</Button>
)}
</div>
{selectedTrack && (
<div className="mt-4 space-y-4">
<div>
<Label className="flex items-center gap-2">
<Volume2 className="w-4 h-4" />
Volume musique: {musicVolume[0]}%
</Label>
<Slider
value={musicVolume}
onValueChange={setMusicVolume}
max={100}
step={5}
className="mt-2"
/>
</div>
{selectedTrack?.id === track.id && (
<Check className="w-5 h-5 text-primary shrink-0" />
)}
</div>
)}
))
)}
</div>
<div className="mt-4 flex justify-between">
<Button variant="outline" onClick={() => setCurrentStep('video')}>
Retour
</Button>
<div className="flex gap-2">
<Button variant="ghost" onClick={() => {
setSelectedTrack(null);
setCurrentStep('text');
}}>
Passer
</Button>
<Button onClick={() => setCurrentStep('text')}>
Continuer
<ChevronRight className="w-4 h-4 ml-2" />
</Button>
</div>
</div>
</>
{/* Slider volume + navigation */}
{selectedTrack && (
<div className="mt-4">
<Label className="flex items-center gap-2">
<Volume2 className="w-4 h-4" />
Volume musique: {musicVolume[0]}%
</Label>
<Slider
value={musicVolume}
onValueChange={setMusicVolume}
max={100}
step={5}
className="mt-2"
/>
</div>
)}
<div className="mt-4 flex justify-between">
<Button variant="outline" onClick={() => setCurrentStep('video')}>
Retour
</Button>
<div className="flex gap-2">
<Button variant="ghost" onClick={() => {
setSelectedTrack(null);
setCurrentStep('text');
}}>
Passer
</Button>
<Button onClick={() => setCurrentStep('text')}>
Continuer
<ChevronRight className="w-4 h-4 ml-2" />
</Button>
</div>
</div>
</CardContent>
</Card>
)}