diff --git a/frontend/src/components/app-sidebar.tsx b/frontend/src/components/app-sidebar.tsx index 30d5fbb..1e6604b 100644 --- a/frontend/src/components/app-sidebar.tsx +++ b/frontend/src/components/app-sidebar.tsx @@ -16,8 +16,10 @@ import { TrendingUp, User as UserIcon, } from "lucide-react"; +import Image from "next/image"; import Link from "next/link"; import { usePathname, useSearchParams } from "next/navigation"; +import { useTheme } from "next-themes"; import * as React from "react"; import { ModeToggle } from "@/components/mode-toggle"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; @@ -47,6 +49,8 @@ import { SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, + SidebarRail, + SidebarTrigger, } from "@/components/ui/sidebar"; import { useAuth } from "@/providers/auth-provider"; import { CategoryService } from "@/services/category.service"; @@ -74,19 +78,43 @@ export function AppSidebar() { const pathname = usePathname(); const searchParams = useSearchParams(); const { user, logout, isAuthenticated } = useAuth(); + const { resolvedTheme } = useTheme(); const [categories, setCategories] = React.useState([]); + const [mounted, setMounted] = React.useState(false); React.useEffect(() => { + setMounted(true); CategoryService.getAll().then(setCategories).catch(console.error); }, []); + const logoSrc = React.useMemo(() => { + if (!mounted) return "/memegoat-color.svg"; + return resolvedTheme === "dark" + ? "/memegoat-white.svg" + : "/memegoat-black.svg"; + }, [resolvedTheme, mounted]); + return ( - - -
🐐
- MemeGoat + + +
+ MemeGoat Logo +
+ + MemeGoat + +
@@ -305,6 +333,7 @@ export function AppSidebar() { +
); } diff --git a/frontend/src/components/content-card.tsx b/frontend/src/components/content-card.tsx index 50479b7..c250cff 100644 --- a/frontend/src/components/content-card.tsx +++ b/frontend/src/components/content-card.tsx @@ -54,9 +54,23 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) { const isVideo = !content.mimeType.startsWith("image/"); const isThisVideoActive = activeVideoId === content.id; const isMuted = isGlobalMuted || (isVideo && !isThisVideoActive); + const videoRef = React.useRef(null); - const aspectRatio = - content.width && content.height ? content.width / content.height : 1; + React.useEffect(() => { + if (videoRef.current) { + if (isThisVideoActive) { + const playPromise = videoRef.current.play(); + if (playPromise !== undefined) { + playPromise.catch((_error) => { + // L'auto-lecture peut échouer si l'utilisateur n'a pas interagi avec la page + // On peut tenter de mettre en sourdine pour forcer la lecture si nécessaire + }); + } + } else { + videoRef.current.pause(); + } + } + }, [isThisVideoActive]); React.useEffect(() => { setIsLiked(content.isLiked || false); @@ -178,29 +192,30 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) { - - + + {content.mimeType.startsWith("image/") ? ( {content.title} ) : (