chore: bump version to 1.6.0

feat: add AudioProvider for global audio state management
- Introduced `AudioProvider` with context for managing global mute state and active video. - Added `useAudio` hook to access AudioContext conveniently.
2026-01-28 16:30:34 +01:00 · 2026-01-28 16:30:28 +01:00 · 2026-01-28 16:29:56 +01:00 · 2026-01-28 15:39:56 +01:00 · 2026-01-28 15:39:44 +01:00 · 2026-01-28 15:00:02 +01:00
10 changed files with 169 additions and 115 deletions
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -4,22 +4,7 @@ ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable && corepack prepare pnpm@latest --activate

-ENV FFMPEG_VERSION=3.0.2
-
-WORKDIR /tmp/ffmpeg
-
-RUN apk add --update build-base curl nasm tar bzip2 \
-  zlib-dev openssl-dev yasm-dev lame-dev libogg-dev x264-dev libvpx-dev libvorbis-dev x265-dev freetype-dev libass-dev libwebp-dev rtmpdump-dev libtheora-dev opus-dev && \
-  DIR=$(mktemp -d) && cd ${DIR} && \
-  curl -L -s https://ffmpeg.org/releases/ffmpeg-${FFMPEG_VERSION}.tar.gz | tar zxvf - -C . && \
-  cd ffmpeg-${FFMPEG_VERSION} && \
-  ./configure \
-  --enable-version3 --enable-gpl --enable-nonfree --enable-small --enable-libmp3lame --enable-libx264 --enable-libx265 --enable-libvpx --enable-libtheora --enable-libvorbis --enable-libopus --enable-libass --enable-libwebp --enable-librtmp --enable-postproc --enable-avresample --enable-libfreetype --enable-openssl --disable-debug && \
-  make && \
-  make install && \
-  make distclean && \
-  rm -rf ${DIR} && \
-  apk del build-base curl tar bzip2 x264 openssl nasm && rm -rf /var/cache/apk/*
+RUN apk add --no-cache ffmpeg

 FROM base AS build
 WORKDIR /usr/src/app
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/backend",
-	"version": "1.5.2",
+	"version": "1.6.0",
 	"description": "",
 	"author": "",
 	"private": true,
--- a/backend/src/media/media.service.spec.ts
+++ b/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;
--- a/backend/src/media/strategies/video-processor.strategy.ts
+++ b/backend/src/media/strategies/video-processor.strategy.ts
@@ -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
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/frontend",
-	"version": "1.5.2",
+	"version": "1.6.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
--- a/frontend/src/app/layout.tsx
+++ b/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>
--- a/frontend/src/components/content-card.tsx
+++ b/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,20 @@ 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 aspectRatio =
+		content.width && content.height ? content.width / content.height : 1;

 	React.useEffect(() => {
 		setIsLiked(content.isLiked || false);
@@ -77,6 +88,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 +130,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 +141,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,14 +178,17 @@ 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">
+				<CardContent
+					className="p-0 relative bg-zinc-200 dark:bg-zinc-900 flex items-center justify-center overflow-hidden"
+					style={{ aspectRatio: `${aspectRatio}` }}
+				>
 					<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
 						{content.mimeType.startsWith("image/") ? (
 							<Image
 								src={content.url}
 								alt={content.title}
 								fill
-								className="object-contain"
+								className="object-cover"
 								sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
 								priority={false}
 							/>
@@ -174,99 +197,95 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 								src={content.url}
 								controls={false}
 								autoPlay
-								muted
+								muted={isMuted}
 								loop
 								playsInline
-								className="w-full h-full object-contain"
+								className="w-full h-full object-cover"
 							/>
 						)}
 					</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>
--- a/frontend/src/components/content-list.tsx
+++ b/frontend/src/components/content-list.tsx
@@ -68,11 +68,13 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 	});

 	return (
-		<div className="max-w-2xl mx-auto py-8 px-4 space-y-8">
+		<div className="max-w-7xl 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 className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-6">
 				{contents.map((content) => (
-					<ContentCard key={content.id} content={content} onUpdate={fetchInitial} />
+					<div key={content.id} className="break-inside-avoid mb-6">
+						<ContentCard content={content} onUpdate={fetchInitial} />
+					</div>
 				))}
 			</div>

--- a/frontend/src/providers/audio-provider.tsx
+++ b/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;
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@memegoat/source",
-  "version": "1.5.2",
+  "version": "1.6.0",
  "description": "",
  "scripts": {
    "version:get": "cmake -P version.cmake GET",
Author	SHA1	Message	Date
Mathis HERRIOT	60643f6aa8	chore: bump version to 1.6.0 All checks were successful CI/CD Pipeline / Valider backend (push) Successful in 1m39s Details CI/CD Pipeline / Valider frontend (push) Successful in 1m43s Details CI/CD Pipeline / Valider documentation (push) Successful in 1m47s Details CI/CD Pipeline / Déploiement en Production (push) Successful in 1m32s Details	2026-01-28 16:30:34 +01:00
Mathis HERRIOT	929dd74ec1	feat: add `AudioProvider` for global audio state management - Introduced `AudioProvider` with context for managing global mute state and active video. - Added `useAudio` hook to access AudioContext conveniently.	2026-01-28 16:30:28 +01:00
Mathis HERRIOT	87534c0596	refactor: enhance content card and layout with video handling and audio controls - Added mute toggle for video content in content card. - Integrated `AudioProvider` for global audio state management. - Improved content card layout with dynamic aspect ratio support. - Updated content list to use a masonry-style layout for better visual presentation.	2026-01-28 16:29:56 +01:00
Mathis HERRIOT	fa673d0f80	chore: bump version to 1.5.6 All checks were successful CI/CD Pipeline / Valider backend (push) Successful in 1m39s Details CI/CD Pipeline / Valider frontend (push) Successful in 1m45s Details CI/CD Pipeline / Valider documentation (push) Successful in 1m48s Details CI/CD Pipeline / Déploiement en Production (push) Successful in 1m32s Details	2026-01-28 15:39:56 +01:00
Mathis HERRIOT	8df6d15b19	refactor: update content card and list layout for better responsiveness - Removed unused aspect-video class from content card layout. - Improved content list layout by switching to a responsive grid system.	2026-01-28 15:39:44 +01:00
Mathis HERRIOT	0144421f03	chore: bump version to 1.5.5 All checks were successful CI/CD Pipeline / Valider backend (push) Successful in 1m38s Details CI/CD Pipeline / Valider frontend (push) Successful in 1m43s Details CI/CD Pipeline / Valider documentation (push) Successful in 1m47s Details CI/CD Pipeline / Déploiement en Production (push) Successful in 1m36s Details	2026-01-28 15:00:02 +01:00
Mathis HERRIOT	df9a6c6f36	refactor: update test mocks to use `addOutputOptions` for consistency - Replaced `outputOptions` with `addOutputOptions` in media service spec test to align with updated FFmpeg strategy.	2026-01-28 14:59:40 +01:00
Mathis HERRIOT	15426a9e18	chore: bump version to 1.5.4 Some checks failed CI/CD Pipeline / Valider backend (push) Failing after 1m10s Details CI/CD Pipeline / Valider frontend (push) Successful in 1m41s Details CI/CD Pipeline / Valider documentation (push) Successful in 1m45s Details CI/CD Pipeline / Déploiement en Production (push) Has been skipped Details	2026-01-28 14:45:48 +01:00
Mathis HERRIOT	a28844e9b7	refactor: replace `outputOptions` with `addOutputOptions` in video processor strategy - Updated FFmpeg command to use `addOutputOptions` for improved readability and consistency.	2026-01-28 14:45:41 +01:00
Mathis HERRIOT	ae916931f6	chore: bump version to 1.5.3 All checks were successful CI/CD Pipeline / Valider backend (push) Successful in 1m39s Details CI/CD Pipeline / Valider frontend (push) Successful in 1m43s Details CI/CD Pipeline / Valider documentation (push) Successful in 1m47s Details CI/CD Pipeline / Déploiement en Production (push) Successful in 1m33s Details	2026-01-28 14:39:43 +01:00
Mathis HERRIOT	e4dc5dd10b	chore: simplify FFmpeg installation in Dockerfile - Replaced custom FFmpeg build process with `apk add --no-cache ffmpeg` for reduced complexity and faster builds.	2026-01-28 14:39:33 +01:00