refactor: update UploadComponent max file size and supported media types, enhance apiMiddleware for video streaming

apps/infoalloggi/biome.json

@@ -78,7 +78,8 @@
 			"a11y": {
 				"noAutofocus": "off",
 				"noNoninteractiveElementInteractions": "error",
-				"useSemanticElements": "off"
+				"useSemanticElements": "off",
+				"useMediaCaption": "off"
 			},
 			"complexity": {
 				"noUselessFragments": "off"

apps/infoalloggi/src/components/upload_modal.tsx

@@ -72,7 +72,7 @@ export const UploadComponent = ({
 	cb_onUpload,
 	isAdmin,
 	userId,
-	maxMB = 5, // Default max size is 5MB
+	maxMB = 50, // Default max size is 50MB
 	maxFiles,
 }: UploadComponentProps) => {
 	const { t } = useTranslation();
@@ -107,6 +107,13 @@ export const UploadComponent = ({
 		"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // xlsx
 		"application/vnd.oasis.opendocument.text", // odt
 		"application/vnd.oasis.opendocument.spreadsheet", // ods
+		"video/mp4", // mp4
+		"video/webm", // webm
+		"audio/mpeg", // mp3
+		"audio/wav", // wav
+		"video/x-msvideo", // avi
+		"image/gif", // gif
+		"image/svg+xml", // svg
 	];
 
 	const utils = api.useUtils();

apps/infoalloggi/src/middlewares/api_middleware.ts

@@ -5,7 +5,6 @@ import { verifyToken } from "~/server/auth/jwt";
 
 export const apisMiddleware = async (req: NextRequest) => {
 	const { pathname, searchParams } = req.nextUrl;
-	//console.log("APIs Middleware triggered for:", pathname);
 
 	// Only handle storage API routes
 	if (!pathname.startsWith("/storage-api/")) {
@@ -41,19 +40,18 @@ export const apisMiddleware = async (req: NextRequest) => {
 
 	// Build the storage API URL correctly
 	const slug = pathname.replace("/storage-api/", "");
-
 	params.set("token", env.STORAGE_TOKEN);
-
 	const storageUrl = `${env.STORAGE_URL}/${slug}?${params.toString()}`;
 
-	//console.log("Proxying to:", storageUrl);
-
 	try {
 		// Forward the request to storage API
 		const headers = new Headers(req.headers);
 		headers.delete("host");
 		headers.delete("cookie");
 
+		// **CRITICAL: Preserve Range header for video streaming**
+		const rangeHeader = req.headers.get("range");
+
 		const response = await fetch(storageUrl, {
 			method: req.method,
 			headers: headers,
@@ -110,9 +108,13 @@ export const apisMiddleware = async (req: NextRequest) => {
 			return new NextResponse("Empty response", { status: 500 });
 		}
 
+		// **IMPORTANT: Use correct status code for partial content**
+		const status =
+			rangeHeader && response.status === 206 ? 206 : response.status;
+
 		// Create response with proper headers
 		const proxyResponse = new NextResponse(data, {
-			status: response.status,
+			status: status,
 			statusText: response.statusText,
 		});
 
@@ -120,6 +122,8 @@ export const apisMiddleware = async (req: NextRequest) => {
 		const contentType = response.headers.get("Content-Type");
 		const contentDisposition = response.headers.get("Content-Disposition");
 		const contentLength = response.headers.get("Content-Length");
+		const acceptRanges = response.headers.get("Accept-Ranges");
+		const contentRange = response.headers.get("Content-Range");
 
 		if (contentType) {
 			proxyResponse.headers.set("Content-Type", contentType);
@@ -128,16 +132,38 @@ export const apisMiddleware = async (req: NextRequest) => {
 		if (contentDisposition) {
 			proxyResponse.headers.set("Content-Disposition", contentDisposition);
 		}
+
 		if (contentLength) {
 			proxyResponse.headers.set("Content-Length", contentLength);
 		}
 
+		// **CRITICAL: Copy Range-related headers for video streaming**
+		if (acceptRanges) {
+			proxyResponse.headers.set("Accept-Ranges", acceptRanges);
+		} else if (isVideoRequest) {
+			proxyResponse.headers.set("Accept-Ranges", "bytes");
+		}
+
+		if (contentRange) {
+			proxyResponse.headers.set("Content-Range", contentRange);
+		}
+
 		// Set CORS and caching headers
 		proxyResponse.headers.set("Access-Control-Allow-Origin", "*");
-		proxyResponse.headers.set(
-			"Cache-Control",
-			"public, max-age=31536000, immutable",
-		);
+
+		// Different cache strategy for videos
+		if (isVideoRequest) {
+			proxyResponse.headers.set(
+				"Cache-Control",
+				"public, max-age=31536000, immutable",
+			);
+		} else {
+			proxyResponse.headers.set(
+				"Cache-Control",
+				"public, max-age=31536000, immutable",
+			);
+		}
+
 		proxyResponse.headers.delete("X-Frame-Options");
 		proxyResponse.headers.set(
 			"Content-Security-Policy",