fix: Use better default media download filenames (#1949)

* Closes #1938


[skip ci]

src/utils/download.ts

@@ -1,3 +1,4 @@
+import { format } from 'date-fns';
 import { CameraManager } from '../camera-manager/manager';
 import { localize } from '../localize/localize';
 import { AdvancedCameraCardError, ExtendedHomeAssistant } from '../types';
@@ -50,5 +51,20 @@ export const downloadMedia = async (
     finalURL = response;
   }
 
-  downloadURL(finalURL);
+  downloadURL(finalURL, generateDownloadFilename(media));
+};
+
+const generateDownloadFilename = (media: ViewMedia): string => {
+  const toFilename = (input: string): string => {
+    return input.toLowerCase().replaceAll(/(\.|\s)+/g, '-');
+  };
+
+  const id = media.getID();
+  const startTime = media.getStartTime();
+
+  return (
+    toFilename(media.getCameraID()) +
+    (id ? `_${toFilename(id)}` : '') +
+    (startTime ? `_${format(startTime, `yyyy-MM-dd-HH-mm-ss`)}` : '')
+  );
 };

src/utils/screenshot.ts

@@ -26,16 +26,16 @@ const screenshotElement = (
   return canvas.toDataURL('image/jpeg');
 };
 
-export const generateScreenshotTitle = (view?: View | null): string => {
+export const generateScreenshotFilename = (view?: View | null): string => {
   if (view?.is('live') || view?.is('image')) {
-    return `${view.view}-${view.camera}-${format(
+    return `${view.view}_${view.camera}_${format(
       new Date(),
       `yyyy-MM-dd-HH-mm-ss`,
     )}.jpg`;
   } else if (view?.isViewerView()) {
     const media = view.queryResults?.getSelectedResult();
     const id = media?.getID() ?? null;
-    return `${view.view}-${view.camera}${id ? `-${id}` : ''}.jpg`;
+    return `${view.view}_${view.camera}${id ? `_${id}` : ''}.jpg`;
   }
   return 'screenshot.jpg';
 };