feat: add video upload feature with support for validation and processing

- Introduced "video" as a new content type across backend and frontend.
- Updated validation schemas and MIME-type handling for video files.
- Implemented file size limits for videos (10 MB max) in configuration.
- Enhanced upload flow with auto-detection of file types (image, GIF, video).
- Expanded media processing to handle video files and convert them to WebM format.

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
+		const isVideo = file.mimetype.startsWith("video/");
-			? this.configService.get<number>("MAX_GIF_SIZE_KB", 1024)
+		let maxSizeKb: number;
-			: this.configService.get<number>("MAX_IMAGE_SIZE_KB", 512);
+
+		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/")) {
+		if (file.mimetype.startsWith("image/") && file.mimetype !== "image/gif") {
-			// Image ou GIF -> WebP (format moderne, bien supporté)
+			// Image -> WebP (format moderne, bien supporté)
 			processed = await this.mediaService.processImage(file.buffer, "webp");
-		} else if (file.mimetype.startsWith("video/")) {
+		} else if (
-			// Vidéo -> WebM
+			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/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(

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,29 @@ 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">
+										<div className="relative h-[400px] w-full flex items-center justify-center">
-											<NextImage
+											{file?.type.startsWith("video/") ? (
-												src={preview}
+												<video src={preview} controls className="max-h-full max-w-full" />
-												alt="Preview"
+											) : (
-												fill
+												<NextImage
-												className="object-contain"
+													src={preview}
-											/>
+													alt="Preview"
+													fill
+													className="object-contain"
+												/>
+											)}
 										</div>
 										<Button
 											type="button"
@@ -260,6 +274,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/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;