Show the filename in the audio player title when the event has one (#34479)

MAudioBody passed the event body straight to the player, so an audio message
sent with a caption showed the caption text instead of the file name. It now
uses presentableTextForFile, the same helper m.file and m.image already use.

Fixes https://github.com/element-hq/element-web/issues/31116

apps/web/src/components/views/messages/MAudioBody.tsx

@@ -21,6 +21,7 @@ import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContex
 import MediaProcessingError from "./shared/MediaProcessingError";
 import { AudioPlayerViewModel } from "../../../viewmodels/room/timeline/event-tile/body/AudioPlayerViewModel";
 import { FileBodyFactory, renderMBody } from "./MBodyFactory";
+import { presentableTextForFile } from "../../../utils/FileUtils";
 
 interface IState {
     error?: boolean;
@@ -110,7 +111,14 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
         // At this point we should have a playable state
         return (
             <span className="mx_MAudioBody">
-                <AudioPlayer playback={this.state.playback} mediaName={this.props.mxEvent.getContent().body} />
+                <AudioPlayer
+                    playback={this.state.playback}
+                    mediaName={presentableTextForFile(
+                        this.props.mxEvent.getContent<MediaEventContent>(),
+                        undefined,
+                        false,
+                    )}
+                />
                 {this.showFileBody && renderMBody({ ...this.props, showFileInfo: false }, FileBodyFactory)}
             </span>
         );