chore: bump version to 1.7.0

- Introduced `AudioProvider` with context for managing global mute state and active video.
- Added `useAudio` hook to access AudioContext conveniently.

backend/.migrations/0007_melodic_synch.sql

@@ -0,0 +1 @@
+ALTER TYPE "public"."content_type" ADD VALUE 'video';

backend/.migrations/meta/_journal.json

@@ -50,6 +50,13 @@
       "when": 1768423315172,
       "tag": "0006_friendly_adam_warlock",
       "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "7",
+      "when": 1769605995410,
+      "tag": "0007_melodic_synch",
+      "breakpoints": true
     }
   ]
 }

backend/Dockerfile

@@ -4,6 +4,8 @@ ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable && corepack prepare pnpm@latest --activate
 
+RUN apk add --no-cache ffmpeg
+
 FROM base AS build
 WORKDIR /usr/src/app
 COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./

backend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/backend",
-	"version": "1.4.1",
+	"version": "1.7.0",
 	"description": "",
 	"author": "",
 	"private": true,

backend/src/config/env.schema.ts

@@ -48,6 +48,7 @@ export const envSchema = z.object({
 	// Media Limits
 	MAX_IMAGE_SIZE_KB: z.coerce.number().default(512),
 	MAX_GIF_SIZE_KB: z.coerce.number().default(1024),
+	MAX_VIDEO_SIZE_KB: z.coerce.number().default(10240),
 });
 
 export type Env = z.infer<typeof envSchema>;

backend/src/contents/contents.service.ts

@@ -55,22 +55,31 @@ export class ContentsService {
 			"image/webp",
 			"image/gif",
 			"video/webm",
+			"video/mp4",
+			"video/quicktime",
 		];
 
 		if (!allowedMimeTypes.includes(file.mimetype)) {
 			throw new BadRequestException(
-				"Format de fichier non supporté. Formats acceptés: png, jpeg, jpg, webp, webm, gif.",
+				"Format de fichier non supporté. Formats acceptés: png, jpeg, jpg, webp, webm, mp4, mov, gif.",
 			);
 		}
 
 		const isGif = file.mimetype === "image/gif";
-		const maxSizeKb = isGif
-			? this.configService.get<number>("MAX_GIF_SIZE_KB", 1024)
-			: this.configService.get<number>("MAX_IMAGE_SIZE_KB", 512);
+		const isVideo = file.mimetype.startsWith("video/");
+		let maxSizeKb: number;
+
+		if (isGif) {
+			maxSizeKb = this.configService.get<number>("MAX_GIF_SIZE_KB", 1024);
+		} else if (isVideo) {
+			maxSizeKb = this.configService.get<number>("MAX_VIDEO_SIZE_KB", 10240);
+		} else {
+			maxSizeKb = this.configService.get<number>("MAX_IMAGE_SIZE_KB", 512);
+		}
 
 		if (file.size > maxSizeKb * 1024) {
 			throw new BadRequestException(
-				`Fichier trop volumineux. Limite pour ${isGif ? "GIF" : "image"}: ${maxSizeKb} Ko.`,
+				`Fichier trop volumineux. Limite pour ${isGif ? "GIF" : isVideo ? "vidéo" : "image"}: ${maxSizeKb} Ko.`,
 			);
 		}
 
@@ -87,11 +96,14 @@ export class ContentsService {
 
 		// 2. Transcodage
 		let processed: MediaProcessingResult;
-		if (file.mimetype.startsWith("image/")) {
-			// Image ou GIF -> WebP (format moderne, bien supporté)
+		if (file.mimetype.startsWith("image/") && file.mimetype !== "image/gif") {
+			// Image -> WebP (format moderne, bien supporté)
 			processed = await this.mediaService.processImage(file.buffer, "webp");
-		} else if (file.mimetype.startsWith("video/")) {
-			// Vidéo -> WebM
+		} else if (
+			file.mimetype.startsWith("video/") ||
+			file.mimetype === "image/gif"
+		) {
+			// Vidéo ou GIF -> WebM
 			processed = await this.mediaService.processVideo(file.buffer, "webm");
 		} else {
 			throw new BadRequestException("Format de fichier non supporté");

backend/src/contents/dto/create-content.dto.ts

@@ -12,11 +12,12 @@ import {
 export enum ContentType {
 	MEME = "meme",
 	GIF = "gif",
+	VIDEO = "video",
 }
 
 export class CreateContentDto {
 	@IsEnum(ContentType)
-	type!: "meme" | "gif";
+	type!: "meme" | "gif" | "video";
 
 	@IsString()
 	@IsNotEmpty()

backend/src/contents/dto/upload-content.dto.ts

@@ -11,7 +11,7 @@ import { ContentType } from "./create-content.dto";
 
 export class UploadContentDto {
 	@IsEnum(ContentType)
-	type!: "meme" | "gif";
+	type!: "meme" | "gif" | "video";
 
 	@IsString()
 	@IsNotEmpty()

backend/src/database/schemas/content.ts

@@ -12,7 +12,7 @@ import { categories } from "./categories";
 import { tags } from "./tags";
 import { users } from "./users";
 
-export const contentType = pgEnum("content_type", ["meme", "gif"]);
+export const contentType = pgEnum("content_type", ["meme", "gif", "video"]);
 
 export const contents = pgTable(
 	"contents",

backend/src/media/media.service.spec.ts

@@ -75,7 +75,7 @@ describe("MediaService", () => {
 				toFormat: jest.fn().mockReturnThis(),
 				videoCodec: jest.fn().mockReturnThis(),
 				audioCodec: jest.fn().mockReturnThis(),
-				outputOptions: jest.fn().mockReturnThis(),
+				addOutputOptions: jest.fn().mockReturnThis(),
 				on: jest.fn().mockImplementation(function (event, cb) {
 					if (event === "end") setTimeout(cb, 0);
 					return this;

backend/src/media/strategies/video-processor.strategy.ts

@@ -12,7 +12,7 @@ export class VideoProcessorStrategy implements IMediaProcessorStrategy {
 	private readonly logger = new Logger(VideoProcessorStrategy.name);
 
 	canHandle(mimeType: string): boolean {
-		return mimeType.startsWith("video/");
+		return mimeType.startsWith("video/") || mimeType === "image/gif";
 	}
 
 	async process(
@@ -37,13 +37,13 @@ export class VideoProcessorStrategy implements IMediaProcessorStrategy {
 						.toFormat("webm")
 						.videoCodec("libvpx-vp9")
 						.audioCodec("libopus")
-						.outputOptions("-crf 30", "-b:v 0");
+						.addOutputOptions("-crf", "30", "-b:v", "0");
 				} else {
 					command = command
 						.toFormat("mp4")
 						.videoCodec("libaom-av1")
 						.audioCodec("libopus")
-						.outputOptions("-crf 34", "-b:v 0", "-strict experimental");
+						.addOutputOptions("-crf", "34", "-b:v", "0", "-strict", "experimental");
 				}
 
 				command

frontend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/frontend",
-	"version": "1.4.1",
+	"version": "1.7.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",

frontend/src/app/(dashboard)/meme/[slug]/page.tsx

@@ -50,7 +50,7 @@ export default async function MemePage({
 					Retour au flux
 				</Link>
 
-				<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+				<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
 					<div className="lg:col-span-2">
 						<ContentCard content={content} />
 					</div>

frontend/src/app/(dashboard)/upload/page.tsx

@@ -42,7 +42,7 @@ import type { Category } from "@/types/content";
 
 const uploadSchema = z.object({
 	title: z.string().min(3, "Le titre doit faire au moins 3 caractères"),
-	type: z.enum(["meme", "gif"]),
+	type: z.enum(["meme", "gif", "video"]),
 	categoryId: z.string().optional(),
 	tags: z.string().optional(),
 });
@@ -112,6 +112,16 @@ export default function UploadPage() {
 				return;
 			}
 			setFile(selectedFile);
+
+			// Auto-détection du type
+			if (selectedFile.type === "image/gif") {
+				form.setValue("type", "gif");
+			} else if (selectedFile.type.startsWith("video/")) {
+				form.setValue("type", "video");
+			} else {
+				form.setValue("type", "meme");
+			}
+
 			const reader = new FileReader();
 			reader.onloadend = () => {
 				setPreview(reader.result as string);
@@ -182,7 +192,7 @@ export default function UploadPage() {
 					<Form {...form}>
 						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
 							<div className="space-y-4">
-								<FormLabel>Fichier (Image ou GIF)</FormLabel>
+								<FormLabel>Fichier (Image, GIF ou Vidéo)</FormLabel>
 								{!preview ? (
 									<button
 										type="button"
@@ -194,25 +204,31 @@ export default function UploadPage() {
 										</div>
 										<p className="font-medium">Cliquez pour choisir un fichier</p>
 										<p className="text-xs text-muted-foreground mt-1">
-											PNG, JPG ou GIF jusqu'à 10Mo
+											PNG, JPG, GIF, MP4 ou MOV jusqu'à 10Mo
 										</p>
 										<input
 											id="file-upload"
 											type="file"
 											className="hidden"
-											accept="image/*,.gif"
+											accept="image/*,video/mp4,video/webm,video/quicktime,.gif"
 											onChange={handleFileChange}
 										/>
 									</button>
 								) : (
 									<div className="relative rounded-lg overflow-hidden border bg-zinc-100 dark:bg-zinc-800">
-										<div className="relative h-[400px] w-full">
-											<NextImage
-												src={preview}
-												alt="Preview"
-												fill
-												className="object-contain"
-											/>
+										<div className="relative h-[400px] w-full flex items-center justify-center">
+											{file?.type.startsWith("video/") ? (
+												<video src={preview} controls className="max-h-full max-w-full">
+													<track kind="captions" />
+												</video>
+											) : (
+												<NextImage
+													src={preview}
+													alt="Preview"
+													fill
+													className="object-contain"
+												/>
+											)}
 										</div>
 										<Button
 											type="button"
@@ -260,6 +276,7 @@ export default function UploadPage() {
 												<SelectContent>
 													<SelectItem value="meme">Image fixe</SelectItem>
 													<SelectItem value="gif">GIF Animé</SelectItem>
+													<SelectItem value="video">Vidéo</SelectItem>
 												</SelectContent>
 											</Select>
 											<FormMessage />

frontend/src/app/globals.css

@@ -74,6 +74,16 @@
 	--color-destructive-foreground: var(--destructive-foreground);
 }
 
+@layer utilities {
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+	.no-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+}
+
 :root {
 	--radius: 0.5rem;
 	--background: oklch(0.9821 0 0);

frontend/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Ubuntu_Mono, Ubuntu_Sans } from "next/font/google";
 import { Toaster } from "@/components/ui/sonner";
+import { AudioProvider } from "@/providers/audio-provider";
 import { AuthProvider } from "@/providers/auth-provider";
 import { ThemeProvider } from "@/providers/theme-provider";
 import "./globals.css";
@@ -71,8 +72,10 @@ export default function RootLayout({
 					disableTransitionOnChange
 				>
 					<AuthProvider>
-						{children}
-						<Toaster />
+						<AudioProvider>
+							{children}
+							<Toaster />
+						</AudioProvider>
 					</AuthProvider>
 				</ThemeProvider>
 			</body>

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<Category[]>([]);
+	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 (
 		<Sidebar collapsible="icon">
-			<SidebarHeader className="flex items-center justify-center py-4">
-				<Link href="/" className="flex items-center gap-2 font-bold text-xl">
-					<div className="bg-primary text-primary-foreground p-1 rounded">🐐</div>
-					<span className="group-data-[collapsible=icon]:hidden">MemeGoat</span>
+			<SidebarHeader className="flex flex-row items-center justify-between py-4 group-data-[collapsible=icon]:justify-center">
+				<Link
+					href="/"
+					className="flex items-center gap-2 font-bold text-xl overflow-hidden"
+				>
+					<div className="p-1 rounded shrink-0">
+						<Image
+							src={logoSrc}
+							alt="MemeGoat Logo"
+							width={32}
+							height={32}
+							className="w-8 h-8"
+						/>
+					</div>
+					<span className="group-data-[collapsible=icon]:hidden whitespace-nowrap">
+						MemeGoat
+					</span>
 				</Link>
+				<SidebarTrigger className="hidden md:flex group-data-[collapsible=icon]:hidden" />
 			</SidebarHeader>
 			<SidebarContent>
 				<SidebarGroup>
@@ -305,6 +333,7 @@ export function AppSidebar() {
 					</SidebarMenuItem>
 				</SidebarMenu>
 			</SidebarFooter>
+			<SidebarRail />
 		</Sidebar>
 	);
 }

frontend/src/components/content-card.tsx

@@ -1,13 +1,21 @@
 "use client";
 
-import { Edit, Eye, Heart, MoreHorizontal, Share2, Trash2 } from "lucide-react";
+import {
+	Edit,
+	Eye,
+	Heart,
+	MoreHorizontal,
+	Share2,
+	Trash2,
+	Volume2,
+	VolumeX,
+} from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import * as React from "react";
 import { toast } from "sonner";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -21,12 +29,7 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { useAudio } from "@/providers/audio-provider";
 import { useAuth } from "@/providers/auth-provider";
 import { ContentService } from "@/services/content.service";
 import { FavoriteService } from "@/services/favorite.service";
@@ -40,12 +43,34 @@ interface ContentCardProps {
 
 export function ContentCard({ content, onUpdate }: ContentCardProps) {
 	const { isAuthenticated, user } = useAuth();
+	const { isGlobalMuted, activeVideoId, toggleGlobalMute, setActiveVideo } =
+		useAudio();
 	const router = useRouter();
 	const [isLiked, setIsLiked] = React.useState(content.isLiked || false);
 	const [likesCount, setLikesCount] = React.useState(content.favoritesCount);
 	const [editDialogOpen, setEditDialogOpen] = React.useState(false);
 
 	const isAuthor = user?.uuid === content.authorId;
+	const isVideo = !content.mimeType.startsWith("image/");
+	const isThisVideoActive = activeVideoId === content.id;
+	const isMuted = isGlobalMuted || (isVideo && !isThisVideoActive);
+	const videoRef = React.useRef<HTMLVideoElement>(null);
+
+	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);
@@ -77,6 +102,18 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 		}
 	};
 
+	const handleToggleMute = (e: React.MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (isGlobalMuted) {
+			setActiveVideo(content.id);
+		} else if (isThisVideoActive) {
+			toggleGlobalMute();
+		} else {
+			setActiveVideo(content.id);
+		}
+	};
+
 	const handleUse = async (e: React.MouseEvent) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -107,9 +144,9 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 
 	return (
 		<>
-			<Card className="overflow-hidden border-none shadow-sm hover:shadow-md transition-shadow">
-				<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
-					<Avatar className="h-8 w-8">
+			<Card className="overflow-hidden border-none gap-0 shadow-none bg-transparent">
+				<CardHeader className="p-3 flex flex-row items-center space-y-0 gap-3">
+					<Avatar className="h-8 w-8 border">
 						<AvatarImage src={content.author.avatarUrl} />
 						<AvatarFallback>
 							{content.author.username[0].toUpperCase()}
@@ -118,13 +155,10 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 					<div className="flex flex-col">
 						<Link
 							href={`/user/${content.author.username}`}
-							className="text-sm font-semibold hover:underline"
+							className="text-sm font-bold hover:underline"
 						>
-							{content.author.displayName || content.author.username}
+							{content.author.username}
 						</Link>
-						<span className="text-xs text-muted-foreground">
-							{new Date(content.createdAt).toLocaleDateString("fr-FR")}
-						</span>
 					</div>
 
 					<div className="ml-auto flex items-center gap-1">
@@ -158,115 +192,115 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 						</DropdownMenu>
 					</div>
 				</CardHeader>
-				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square sm:aspect-video md:aspect-square flex items-center justify-center">
-					<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
+				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 flex items-center justify-center overflow-hidden aspect-square w-full">
+					<Link
+						href={`/meme/${content.slug}`}
+						className="w-full h-full block relative"
+					>
 						{content.mimeType.startsWith("image/") ? (
 							<Image
 								src={content.url}
 								alt={content.title}
-								fill
-								className="object-contain"
-								sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+								width={content.width || 1000}
+								height={content.height || 1000}
+								className="w-full h-full object-contain"
 								priority={false}
 							/>
 						) : (
 							<video
+								ref={videoRef}
 								src={content.url}
 								controls={false}
-								autoPlay
-								muted
+								autoPlay={isThisVideoActive}
+								muted={isMuted}
 								loop
 								playsInline
 								className="w-full h-full object-contain"
 							/>
 						)}
 					</Link>
+					{isVideo && (
+						<Button
+							variant="ghost"
+							size="icon"
+							className="absolute bottom-2 right-2 h-8 w-8 rounded-full bg-black/50 text-white hover:bg-black/70 hover:text-white"
+							onClick={handleToggleMute}
+						>
+							{isMuted ? (
+								<VolumeX className="h-4 w-4" />
+							) : (
+								<Volume2 className="h-4 w-4" />
+							)}
+						</Button>
+					)}
 				</CardContent>
-				<CardFooter className="p-4 flex flex-col gap-4">
+				<CardFooter className="p-3 flex flex-col items-start gap-2">
 					<div className="w-full flex items-center justify-between">
-						<div className="flex items-center gap-2">
-							<TooltipProvider>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="sm"
-											className={`gap-1.5 h-8 px-2 ${isLiked ? "text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20" : ""}`}
-											onClick={handleLike}
-										>
-											<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
-											<span className="text-xs font-medium">{likesCount}</span>
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>Liker</TooltipContent>
-								</Tooltip>
-
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="sm"
-											className="gap-1.5 h-8 px-2 cursor-default"
-										>
-											<Eye className="h-4 w-4 text-muted-foreground" />
-											<span className="text-xs font-medium">{content.views}</span>
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>Vues</TooltipContent>
-								</Tooltip>
-
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="sm"
-											className="h-8 w-8 p-0"
-											onClick={() => {
-												navigator.clipboard.writeText(
-													`${window.location.origin}/meme/${content.slug}`,
-												);
-												toast.success("Lien copié !");
-											}}
-										>
-											<Share2 className="h-4 w-4" />
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>Partager</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
+						<div className="flex items-center gap-4">
+							<button
+								type="button"
+								onClick={handleLike}
+								className={`transition-transform active:scale-125 ${isLiked ? "text-red-500" : "hover:text-muted-foreground"}`}
+							>
+								<Heart className={`h-6 w-6 ${isLiked ? "fill-current" : ""}`} />
+							</button>
+							<div className="flex items-center gap-1.5 text-muted-foreground">
+								<Eye className="h-6 w-6" />
+								<span className="text-sm font-medium">{content.views}</span>
+							</div>
+							<button
+								type="button"
+								onClick={() => {
+									navigator.clipboard.writeText(
+										`${window.location.origin}/meme/${content.slug}`,
+									);
+									toast.success("Lien copié !");
+								}}
+								className="hover:text-muted-foreground"
+							>
+								<Share2 className="h-6 w-6" />
+							</button>
 						</div>
 						<Button
 							size="sm"
 							variant="secondary"
-							className="text-xs h-8 font-semibold"
+							className="text-xs h-8 font-semibold rounded-full px-4"
 							onClick={handleUse}
 						>
 							Utiliser
 						</Button>
 					</div>
 
-					<div className="w-full space-y-2">
-						<Link href={`/meme/${content.slug}`}>
-							<h3 className="font-semibold text-base line-clamp-2 hover:text-primary transition-colors">
+					<div className="space-y-1">
+						<p className="text-sm font-bold">{likesCount} J'aime</p>
+						<div className="text-sm leading-snug">
+							<Link
+								href={`/user/${content.author.username}`}
+								className="font-bold mr-2 hover:underline"
+							>
+								{content.author.username}
+							</Link>
+							<Link href={`/meme/${content.slug}`} className="break-words">
 								{content.title}
-							</h3>
-						</Link>
-						<div className="flex flex-wrap gap-1.5">
-							{content.category && (
-								<Badge variant="outline" className="text-[10px] py-0 px-2 bg-muted/50">
-									{content.category.name}
-								</Badge>
-							)}
-							{content.tags.slice(0, 3).map((tag, _i) => (
-								<Badge
+							</Link>
+						</div>
+						<div className="flex flex-wrap gap-1 mt-1">
+							{content.tags.slice(0, 5).map((tag, _i) => (
+								<Link
 									key={typeof tag === "string" ? tag : tag.id}
-									variant="secondary"
-									className="text-[10px] py-0 px-2"
+									href={`/?tag=${typeof tag === "string" ? tag : tag.slug}`}
+									className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
 								>
 									#{typeof tag === "string" ? tag : tag.name}
-								</Badge>
+								</Link>
 							))}
 						</div>
+						<p className="text-[10px] text-muted-foreground uppercase mt-1">
+							{new Date(content.createdAt).toLocaleDateString("fr-FR", {
+								day: "numeric",
+								month: "long",
+							})}
+						</p>
 					</div>
 				</CardFooter>
 			</Card>

frontend/src/components/content-list.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useInfiniteScroll } from "@/app/(dashboard)/_hooks/use-infinite-scroll";
 import { ContentCard } from "@/components/content-card";
 import { Spinner } from "@/components/ui/spinner";
+import { useAudio } from "@/providers/audio-provider";
 import type { Content, PaginatedResponse } from "@/types/content";
 
 interface ContentListProps {
@@ -15,10 +16,48 @@ interface ContentListProps {
 }
 
 export function ContentList({ fetchFn, title }: ContentListProps) {
+	const { setActiveVideo } = useAudio();
 	const [contents, setContents] = React.useState<Content[]>([]);
 	const [loading, setLoading] = React.useState(true);
 	const [offset, setOffset] = React.useState(0);
 	const [hasMore, setHasMore] = React.useState(true);
+	const containerRef = React.useRef<HTMLDivElement>(null);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: On a besoin de contents pour ré-attacher l'observer quand la liste change
+	React.useEffect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				// On cherche l'entrée avec le plus grand ratio d'intersection parmi celles qui dépassent le seuil
+				let bestEntry: IntersectionObserverEntry | null = null;
+				let maxRatio = 0;
+
+				for (const entry of entries) {
+					if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
+						maxRatio = entry.intersectionRatio;
+						bestEntry = entry;
+					}
+				}
+
+				if (bestEntry && maxRatio >= 0.6) {
+					const contentId = bestEntry.target.getAttribute("data-content-id");
+					if (contentId) {
+						setActiveVideo(contentId);
+					}
+				}
+			},
+			{
+				threshold: [0, 0.2, 0.4, 0.6, 0.8, 1.0], // Plusieurs seuils pour une détection plus fine du "meilleur"
+				root: containerRef.current,
+			},
+		);
+
+		const elements = containerRef.current?.querySelectorAll("[data-content-id]");
+		elements?.forEach((el) => {
+			observer.observe(el);
+		});
+
+		return () => observer.disconnect();
+	}, [setActiveVideo, contents]);
 
 	const fetchInitial = React.useCallback(async () => {
 		setLoading(true);
@@ -51,7 +90,11 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 				offset: offset + 10,
 			});
 
-			setContents((prev) => [...prev, ...response.data]);
+			setContents((prev) => {
+				const newIds = new Set(response.data.map((item) => item.id));
+				const filteredPrev = prev.filter((item) => !newIds.has(item.id));
+				return [...filteredPrev, ...response.data];
+			});
 			setOffset((prev) => prev + 10);
 			setHasMore(response.data.length === 10);
 		} catch (error) {
@@ -68,11 +111,20 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 	});
 
 	return (
-		<div className="max-w-2xl mx-auto py-8 px-4 space-y-8">
-			{title && <h1 className="text-2xl font-bold">{title}</h1>}
-			<div className="flex flex-col gap-6">
+		<div
+			ref={containerRef}
+			className="mx-auto px-4 h-screen flex flex-col justify-start items-center overflow-y-auto snap-y snap-mandatory no-scrollbar"
+		>
+			{title && <h1 className="text-2xl font-bold py-8">{title}</h1>}
+			<div className="max-w-xl flex flex-col justify-start items-center">
 				{contents.map((content) => (
-					<ContentCard key={content.id} content={content} onUpdate={fetchInitial} />
+					<div
+						key={content.id}
+						data-content-id={content.id}
+						className="w-full snap-start snap-always py-4"
+					>
+						<ContentCard content={content} onUpdate={fetchInitial} />
+					</div>
 				))}
 			</div>
 

frontend/src/components/search-sidebar.tsx

@@ -1,12 +1,18 @@
 "use client";
 
-import { Filter, Search } from "lucide-react";
+import { ChevronLeft, ChevronRight, Filter, Search } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import * as React from "react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { CategoryService } from "@/services/category.service";
 import { TagService } from "@/services/tag.service";
 import type { Category, Tag } from "@/types/content";
@@ -16,10 +22,24 @@ export function SearchSidebar() {
 	const searchParams = useSearchParams();
 	const pathname = usePathname();
 
+	const [isCollapsed, setIsCollapsed] = React.useState(true);
 	const [categories, setCategories] = React.useState<Category[]>([]);
 	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
 	const [query, setQuery] = React.useState(searchParams.get("query") || "");
 
+	// Ouvrir automatiquement si des filtres sont actifs
+	React.useEffect(() => {
+		const hasFilters =
+			searchParams.has("query") ||
+			searchParams.has("category") ||
+			searchParams.has("tag") ||
+			searchParams.get("sort") !== "trend";
+
+		if (hasFilters) {
+			setIsCollapsed(false);
+		}
+	}, [searchParams]);
+
 	React.useEffect(() => {
 		CategoryService.getAll().then(setCategories).catch(console.error);
 		TagService.getAll({ limit: 10, sort: "popular" })
@@ -51,98 +71,149 @@ export function SearchSidebar() {
 	const currentCategory = searchParams.get("category");
 
 	return (
-		<aside className="hidden lg:flex flex-col w-80 border-l bg-background">
-			<div className="p-4 border-b">
-				<h2 className="font-semibold mb-4">Rechercher</h2>
-				<form onSubmit={handleSearch} className="relative">
-					<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-					<Input
-						type="search"
-						placeholder="Rechercher des mèmes..."
-						className="pl-8"
-						value={query}
-						onChange={(e) => setQuery(e.target.value)}
-					/>
-				</form>
-			</div>
-			<ScrollArea className="flex-1 p-4">
-				<div className="space-y-6">
-					<div>
-						<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
-							<Filter className="h-4 w-4" />
-							Filtres
-						</h3>
-						<div className="space-y-4">
+		<aside
+			className={`hidden lg:flex flex-col border-l bg-background transition-all duration-300 relative ${
+				isCollapsed ? "w-12" : "w-80"
+			}`}
+		>
+			<Button
+				variant="outline"
+				size="icon"
+				className="absolute -left-4 top-20 h-8 w-8 rounded-full bg-background shadow-md z-50 hover:bg-accent"
+				onClick={() => setIsCollapsed(!isCollapsed)}
+			>
+				{isCollapsed ? (
+					<ChevronLeft className="h-4 w-4" />
+				) : (
+					<ChevronRight className="h-4 w-4" />
+				)}
+			</Button>
+
+			{isCollapsed ? (
+				<div className="flex flex-col items-center py-4 gap-4 overflow-hidden">
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={() => setIsCollapsed(false)}
+							>
+								<Search className="h-5 w-5" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="left">Rechercher</TooltipContent>
+					</Tooltip>
+					<Separator />
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={() => setIsCollapsed(false)}
+							>
+								<Filter className="h-5 w-5" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="left">Filtres</TooltipContent>
+					</Tooltip>
+				</div>
+			) : (
+				<>
+					<div className="p-4 border-b">
+						<h2 className="font-semibold mb-4">Rechercher</h2>
+						<form onSubmit={handleSearch} className="relative">
+							<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+							<Input
+								type="search"
+								placeholder="Rechercher des mèmes..."
+								className="pl-8"
+								value={query}
+								onChange={(e) => setQuery(e.target.value)}
+							/>
+						</form>
+					</div>
+					<ScrollArea className="flex-1 p-4">
+						<div className="space-y-6">
 							<div>
-								<p className="text-xs text-muted-foreground mb-2">Trier par</p>
-								<div className="flex flex-wrap gap-2">
-									<Badge
-										variant={currentSort === "trend" ? "default" : "outline"}
-										className="cursor-pointer"
-										onClick={() => updateSearch("sort", "trend")}
-									>
-										Tendances
-									</Badge>
-									<Badge
-										variant={currentSort === "recent" ? "default" : "outline"}
-										className="cursor-pointer"
-										onClick={() => updateSearch("sort", "recent")}
-									>
-										Récent
-									</Badge>
+								<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
+									<Filter className="h-4 w-4" />
+									Filtres
+								</h3>
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs text-muted-foreground mb-2">Trier par</p>
+										<div className="flex flex-wrap gap-2">
+											<Badge
+												variant={currentSort === "trend" ? "default" : "outline"}
+												className="cursor-pointer"
+												onClick={() => updateSearch("sort", "trend")}
+											>
+												Tendances
+											</Badge>
+											<Badge
+												variant={currentSort === "recent" ? "default" : "outline"}
+												className="cursor-pointer"
+												onClick={() => updateSearch("sort", "recent")}
+											>
+												Récent
+											</Badge>
+										</div>
+									</div>
+									<Separator />
+									<div>
+										<p className="text-xs text-muted-foreground mb-2">Catégories</p>
+										<div className="flex flex-wrap gap-2">
+											<Badge
+												variant={!currentCategory ? "default" : "outline"}
+												className="cursor-pointer"
+												onClick={() => updateSearch("category", null)}
+											>
+												Tout
+											</Badge>
+											{categories.map((cat) => (
+												<Badge
+													key={cat.id}
+													variant={currentCategory === cat.slug ? "default" : "outline"}
+													className="cursor-pointer"
+													onClick={() => updateSearch("category", cat.slug)}
+												>
+													{cat.name}
+												</Badge>
+											))}
+										</div>
+									</div>
 								</div>
 							</div>
-							<Separator />
+
 							<div>
-								<p className="text-xs text-muted-foreground mb-2">Catégories</p>
+								<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
 								<div className="flex flex-wrap gap-2">
-									<Badge
-										variant={!currentCategory ? "default" : "outline"}
-										className="cursor-pointer"
-										onClick={() => updateSearch("category", null)}
-									>
-										Tout
-									</Badge>
-									{categories.map((cat) => (
+									{popularTags.map((tag) => (
 										<Badge
-											key={cat.id}
-											variant={currentCategory === cat.slug ? "default" : "outline"}
-											className="cursor-pointer"
-											onClick={() => updateSearch("category", cat.slug)}
+											key={tag.id}
+											variant={
+												searchParams.get("tag") === tag.name ? "default" : "outline"
+											}
+											className="cursor-pointer hover:bg-secondary"
+											onClick={() =>
+												updateSearch(
+													"tag",
+													searchParams.get("tag") === tag.name ? null : tag.name,
+												)
+											}
 										>
-											{cat.name}
+											#{tag.name}
 										</Badge>
 									))}
+									{popularTags.length === 0 && (
+										<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
+									)}
 								</div>
 							</div>
 						</div>
-					</div>
-
-					<div>
-						<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
-						<div className="flex flex-wrap gap-2">
-							{popularTags.map((tag) => (
-								<Badge
-									key={tag.id}
-									variant={searchParams.get("tag") === tag.name ? "default" : "outline"}
-									className="cursor-pointer hover:bg-secondary"
-									onClick={() =>
-										updateSearch(
-											"tag",
-											searchParams.get("tag") === tag.name ? null : tag.name,
-										)
-									}
-								>
-									#{tag.name}
-								</Badge>
-							))}
-							{popularTags.length === 0 && (
-								<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
-							)}
-						</div>
-					</div>
-				</div>
-			</ScrollArea>
+					</ScrollArea>
+				</>
+			)}
 		</aside>
 	);
 }

frontend/src/providers/audio-provider.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type React from "react";
+import { createContext, useCallback, useContext, useState } from "react";
+
+interface AudioContextType {
+	isGlobalMuted: boolean;
+	activeVideoId: string | null;
+	toggleGlobalMute: () => void;
+	setActiveVideo: (id: string | null) => void;
+}
+
+const AudioContext = createContext<AudioContextType | undefined>(undefined);
+
+export function AudioProvider({ children }: { children: React.ReactNode }) {
+	const [isGlobalMuted, setIsGlobalMuted] = useState(true);
+	const [activeVideoId, setActiveVideoId] = useState<string | null>(null);
+
+	const toggleGlobalMute = useCallback(() => {
+		setIsGlobalMuted((prev) => !prev);
+	}, []);
+
+	const setActiveVideo = useCallback((id: string | null) => {
+		setActiveVideoId(id);
+		if (id !== null) {
+			setIsGlobalMuted(false);
+		}
+	}, []);
+
+	return (
+		<AudioContext.Provider
+			value={{ isGlobalMuted, activeVideoId, toggleGlobalMute, setActiveVideo }}
+		>
+			{children}
+		</AudioContext.Provider>
+	);
+}
+
+export function useAudio() {
+	const context = useContext(AudioContext);
+	if (context === undefined) {
+		throw new Error("useAudio must be used within an AudioProvider");
+	}
+	return context;
+}

frontend/src/types/content.ts

@@ -7,7 +7,7 @@ export interface Content {
 	description?: string;
 	url: string;
 	thumbnailUrl?: string;
-	type: "meme" | "gif";
+	type: "meme" | "gif" | "video";
 	mimeType: string;
 	size: number;
 	width?: number;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memegoat/source",
-  "version": "1.4.1",
+  "version": "1.7.0",
   "description": "",
   "scripts": {
     "version:get": "cmake -P version.cmake GET",