fix html download + address extension mentionned in original commit

Recordings were failing to download in the local stack because of
several small issues stacked together:

* nginx: add a `/media/recordings/` location that authorizes
  against `recordings/media-auth/`. Before, every media request
  went to `files/media-auth/`, which returned 403 for recording
  paths.
* nginx: call `proxy_hide_header Content-Disposition` before
  `add_header Content-Disposition "attachment"`. Garage stored the
  header as `inline`, which combined with nginx's value into
  `inline, attachment` and broke browser downloads.
* frontend: `mediaUrl()` now uses the frontend origin, so
  recording links go through the Vite `/media` proxy instead of
  hitting Django directly on `:8071`.
* frontend: include the file extension in the download filename.

compose.yml

@@ -153,6 +153,7 @@ services:
       target: frontend-production
       args:
         VITE_API_BASE_URL: "http://localhost:8071"
+        VITE_MEDIA_BASE_URL: "http://localhost:8083"
         VITE_APP_TITLE: "LaSuite Meet"
     image: meet:frontend-development
     ports:

docker/files/etc/nginx/conf.d/default.conf

@@ -4,6 +4,36 @@ server {
     server_name localhost;
     charset utf-8;
 
+    # Proxy auth for recordings (authorized by the recordings viewset)
+    location /media/recordings/ {
+        auth_request /media-auth-recordings;
+        auth_request_set $authHeader $upstream_http_authorization;
+        auth_request_set $authDate $upstream_http_x_amz_date;
+        auth_request_set $authContentSha256 $upstream_http_x_amz_content_sha256;
+
+        proxy_set_header Authorization $authHeader;
+        proxy_set_header X-Amz-Date $authDate;
+        proxy_set_header X-Amz-Content-SHA256 $authContentSha256;
+
+        proxy_pass http://garage:9000/meet-media-storage/recordings/;
+        proxy_set_header Host garage:9000;
+        proxy_hide_header Content-Disposition;
+        add_header Content-Disposition "attachment";
+    }
+
+    location = /media-auth-recordings {
+        internal;
+        proxy_pass http://app-dev:8000/api/v1.0/recordings/media-auth/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Original-URL $request_uri;
+
+        proxy_pass_request_body off;
+        proxy_set_header Content-Length "";
+        proxy_set_header X-Original-Method $request_method;
+    }
+
     # Proxy auth for media
     location /media/ {
         # Auth request configuration

src/frontend/Dockerfile

@@ -39,6 +39,9 @@ ENV VITE_API_BASE_URL=${VITE_API_BASE_URL}
 ARG VITE_APP_TITLE
 ENV VITE_APP_TITLE=${VITE_APP_TITLE}
 
+ARG VITE_MEDIA_BASE_URL
+ENV VITE_MEDIA_BASE_URL=${VITE_MEDIA_BASE_URL}
+
 RUN npm run build
 
 # ---- Front-end image ----

src/frontend/src/api/mediaUrl.ts

@@ -1,6 +1,6 @@
 export const mediaUrl = (path: string) => {
   const origin =
-    import.meta.env.VITE_API_BASE_URL ||
+    import.meta.env.VITE_MEDIA_BASE_URL ||
     (typeof window !== 'undefined' ? window.location.origin : '')
 
   // Remove leading/trailing slashes from origin/path if it exists

src/frontend/src/features/recording/routes/RecordingDownload.tsx

@@ -148,7 +148,7 @@ const RecordingDownload = () => {
             </Text>
             <LinkButton
               href={mediaUrl(data.key)}
-              download={`${data.room.name}-${formatDate(data.created_at)}`}
+              download={`${data.room.name}-${formatDate(data.created_at)}.${data.key.split('.').pop()}`}
             >
               {t('success.button')}
             </LinkButton>

src/frontend/src/vite-env.d.ts

@@ -6,6 +6,7 @@ declare const __MEDIAPIPE_VERSION__: string
 interface ImportMetaEnv {
   readonly VITE_API_BASE_URL: string
   readonly VITE_APP_TITLE: string
+  readonly VITE_MEDIA_BASE_URL?: string
 }
 
 interface ImportMeta {