fixup! ✨(frontend) move html option to downloads section

Author: Ovgodd

src/frontend/apps/impress/src/features/docs/doc-export/__tests__/utilsMediaFilename.test.ts

@@ -0,0 +1,67 @@
+import { deriveMediaFilename } from '../utils';
+
+describe('deriveMediaFilename', () => {
+  test('uses last URL segment when src is a valid URL', () => {
+    const result = deriveMediaFilename({
+      src: 'https://example.com/path/video.mp4',
+      index: 0,
+      blob: new Blob([], { type: 'video/mp4' }),
+    });
+    expect(result).toBe('1-video.mp4');
+  });
+
+  test('handles URLs with query/hash and keeps the last segment', () => {
+    const result = deriveMediaFilename({
+      src: 'https://site.com/assets/file.name.svg?x=1#test',
+      index: 0,
+      blob: new Blob([], { type: 'image/svg+xml' }),
+    });
+    expect(result).toBe('1-file.name.svg');
+  });
+
+  test('handles relative URLs using last segment', () => {
+    const result = deriveMediaFilename({
+      src: 'not a valid url',
+      index: 0,
+      blob: new Blob([], { type: 'image/png' }),
+    });
+    // "not a valid url" becomes a relative URL, so we get the last segment
+    expect(result).toBe('1-not%20a%20valid%20url.png');
+  });
+
+  test('data URLs always use media-{index+1}', () => {
+    const result = deriveMediaFilename({
+      src: 'data:image/png;base64,xxx',
+      index: 0,
+      blob: new Blob([], { type: 'image/png' }),
+    });
+    expect(result).toBe('media-1.png');
+  });
+
+  test('adds extension from MIME when baseName has no extension', () => {
+    const result = deriveMediaFilename({
+      src: 'https://a.com/abc',
+      index: 0,
+      blob: new Blob([], { type: 'image/webp' }),
+    });
+    expect(result).toBe('1-abc.webp');
+  });
+
+  test('does not override extension if baseName already contains one', () => {
+    const result = deriveMediaFilename({
+      src: 'https://a.com/image.png',
+      index: 0,
+      blob: new Blob([], { type: 'image/jpeg' }),
+    });
+    expect(result).toBe('1-image.png');
+  });
+
+  test('handles complex MIME types (e.g., audio/mpeg)', () => {
+    const result = deriveMediaFilename({
+      src: 'https://a.com/song',
+      index: 1,
+      blob: new Blob([], { type: 'audio/mpeg' }),
+    });
+    expect(result).toBe('2-song.mpeg');
+  });
+});

src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx

@@ -27,7 +27,7 @@ import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { docxDocsSchemaMappings } from '../mappingDocx';
 import { odtDocsSchemaMappings } from '../mappingODT';
 import { pdfDocsSchemaMappings } from '../mappingPDF';
-import { downloadFile, escapeHtml } from '../utils';
+import { deriveMediaFilename, downloadFile, escapeHtml } from '../utils';
 
 enum DocDownloadFormat {
   HTML = 'html',
@@ -176,58 +176,11 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
             return;
           }
 
-          // Derive a readable filename:
-          // - data: URLs → use a generic "media-N.ext"
-          // - normal URLs → keep the last path segment as base name.
-          let baseName = `media-${index + 1}`;
-
-          if (!src.startsWith('data:')) {
-            try {
-              const url = new URL(src, window.location.origin);
-              const lastSegment = url.pathname.split('/').pop();
-              if (lastSegment) {
-                baseName = `${index + 1}-${lastSegment}`;
-              }
-            } catch {
-              // Ignore invalid URLs, keep default baseName.
-            }
-          }
-
-          let filename = baseName;
-
-          // Ensure the filename has an extension consistent with the blob MIME type.
-          const mimeType = fetched.type;
-          if (mimeType && !baseName.includes('.')) {
-            const slashIndex = mimeType.indexOf('/');
-            const rawSubtype =
-              slashIndex !== -1 && slashIndex < mimeType.length - 1
-                ? mimeType.slice(slashIndex + 1)
-                : '';
-
-            let extension = '';
-            const subtype = rawSubtype.toLowerCase();
-
-            if (subtype.includes('svg')) {
-              extension = 'svg';
-            } else if (subtype.includes('jpeg') || subtype.includes('pjpeg')) {
-              extension = 'jpg';
-            } else if (subtype.includes('png')) {
-              extension = 'png';
-            } else if (subtype.includes('gif')) {
-              extension = 'gif';
-            } else if (subtype.includes('webp')) {
-              extension = 'webp';
-            } else if (subtype.includes('pdf')) {
-              extension = 'pdf';
-            } else if (subtype) {
-              extension = subtype.split('+')[0];
-            }
-
-            if (extension) {
-              filename = `${baseName}.${extension}`;
-            }
-          }
-
+          const filename = deriveMediaFilename({
+            src,
+            index,
+            blob: fetched,
+          });
           element.setAttribute('src', filename);
           mediaFiles.push({ filename, blob: fetched });
         }),

src/frontend/apps/impress/src/features/docs/doc-export/utils.ts

@@ -188,3 +188,76 @@ export const escapeHtml = (value: string): string =>
     .replace(/>/g, '>')
     .replace(/"/g, '"')
     .replace(/'/g, ''');
+
+interface MediaFilenameParams {
+  src: string;
+  index: number;
+  blob: Blob;
+}
+
+/**
+ * Derives a stable, readable filename for media exported in the HTML ZIP.
+ *
+ * Rules:
+ * - Default base name is "media-{index+1}".
+ * - For non data: URLs, we reuse the last path segment when possible (e.g. 1-photo.png).
+ * - If the base name has no extension, we try to infer one from the blob MIME type.
+ */
+export const deriveMediaFilename = ({
+  src,
+  index,
+  blob,
+}: MediaFilenameParams): string => {
+  // Default base name
+  let baseName = `media-${index + 1}`;
+
+  // Try to reuse the last path segment for non data URLs.
+  if (!src.startsWith('data:')) {
+    try {
+      const url = new URL(src, window.location.origin);
+      const lastSegment = url.pathname.split('/').pop();
+      if (lastSegment) {
+        baseName = `${index + 1}-${lastSegment}`;
+      }
+    } catch {
+      // Ignore invalid URLs, keep default baseName.
+    }
+  }
+
+  let filename = baseName;
+
+  // Ensure the filename has an extension consistent with the blob MIME type.
+  const mimeType = blob.type;
+  if (mimeType && !baseName.includes('.')) {
+    const slashIndex = mimeType.indexOf('/');
+    const rawSubtype =
+      slashIndex !== -1 && slashIndex < mimeType.length - 1
+        ? mimeType.slice(slashIndex + 1)
+        : '';
+
+    let extension = '';
+    const subtype = rawSubtype.toLowerCase();
+
+    if (subtype.includes('svg')) {
+      extension = 'svg';
+    } else if (subtype.includes('jpeg') || subtype.includes('pjpeg')) {
+      extension = 'jpg';
+    } else if (subtype.includes('png')) {
+      extension = 'png';
+    } else if (subtype.includes('gif')) {
+      extension = 'gif';
+    } else if (subtype.includes('webp')) {
+      extension = 'webp';
+    } else if (subtype.includes('pdf')) {
+      extension = 'pdf';
+    } else if (subtype) {
+      extension = subtype.split('+')[0];
+    }
+
+    if (extension) {
+      filename = `${baseName}.${extension}`;
+    }
+  }
+
+  return filename;
+};