chore: update pnpm-lock.yaml to reflect lockfile v6, update dependencies versions, and remove redundant nested dependency details

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<HTMLVideoElement>(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) {
 						</DropdownMenu>
 					</div>
 				</CardHeader>
-				<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">
+				<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-cover"
-								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
+								autoPlay={isThisVideoActive}
 								muted={isMuted}
 								loop
 								playsInline
-								className="w-full h-full object-cover"
+								className="w-full h-full object-contain"
 							/>
 						)}
 					</Link>