Ensure consistent download file name on download from ImageView (#29913)

* Ensure consistent download file name on download from ImageView

Signed-off-by: Michael Telatynski <[email protected]>

* Ensure consistent download file name on download from ImageView

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

src/components/views/elements/ImageView.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, createRef, type CSSProperties, useRef, useState } from "react";
+import React, { type JSX, createRef, type CSSProperties, useRef, useState, useMemo } from "react";
 import FocusLock from "react-focus-lock";
 import { type MatrixEvent, parseErrorResponse } from "matrix-js-sdk/src/matrix";
 
@@ -33,6 +33,7 @@ import AccessibleButton from "./AccessibleButton";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { FileDownloader } from "../../../utils/FileDownloader";
+import { MediaEventHelper } from "../../../utils/MediaEventHelper.ts";
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -549,7 +550,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                             title={_t("lightbox|rotate_right")}
                             onClick={this.onRotateClockwiseClick}
                         />
-                        <DownloadButton url={this.props.src} fileName={this.props.name} />
+                        <DownloadButton url={this.props.src} fileName={this.props.name} mxEvent={this.props.mxEvent} />
                         {contextMenuButton}
                         <AccessibleButton
                             className="mx_ImageView_button mx_ImageView_button_close"
@@ -582,10 +583,19 @@ export default class ImageView extends React.Component<IProps, IState> {
     }
 }
 
-function DownloadButton({ url, fileName }: { url: string; fileName?: string }): JSX.Element {
+function DownloadButton({
+    url,
+    fileName,
+    mxEvent,
+}: {
+    url: string;
+    fileName?: string;
+    mxEvent?: MatrixEvent;
+}): JSX.Element {
     const downloader = useRef(new FileDownloader()).current;
     const [loading, setLoading] = useState(false);
     const blobRef = useRef<Blob>(undefined);
+    const mediaEventHelper = useMemo(() => (mxEvent ? new MediaEventHelper(mxEvent) : undefined), [mxEvent]);
 
     function showError(e: unknown): void {
         Modal.createDialog(ErrorDialog, {
@@ -625,7 +635,7 @@ function DownloadButton({ url, fileName }: { url: string; fileName?: string }):
     async function downloadBlob(blob: Blob): Promise<void> {
         await downloader.download({
             blob,
-            name: fileName ?? _t("common|image"),
+            name: mediaEventHelper?.fileName ?? fileName ?? _t("common|image"),
         });
         setLoading(false);
     }