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>
         );

apps/web/test/unit-tests/components/views/messages/MAudioBody-test.tsx

@@ -17,6 +17,15 @@ import { type MediaEventHelper } from "../../../../../src/utils/MediaEventHelper
 
 describe("<MAudioBody />", () => {
     let event: MatrixEvent;
+
+    const mediaEventHelper = {
+        sourceBlob: {
+            value: {
+                arrayBuffer: () => new ArrayBuffer(8),
+            },
+        },
+    } as unknown as MediaEventHelper;
+
     beforeEach(() => {
         const playback = new MockedPlayback(PlaybackState.Decoding, 50, 10) as unknown as Playback;
         jest.spyOn(PlaybackManager.instance, "createPlaybackInstance").mockReturnValue(playback);
@@ -34,15 +43,24 @@ describe("<MAudioBody />", () => {
     });
 
     it("should render", async () => {
-        const mediaEventHelper = {
-            sourceBlob: {
-                value: {
-                    arrayBuffer: () => new ArrayBuffer(8),
-                },
-            },
-        } as unknown as MediaEventHelper;
-
         await act(() => render(<MAudioBody mxEvent={event} mediaEventHelper={mediaEventHelper} />));
         expect(await screen.findByRole("region", { name: "Audio player" })).toBeInTheDocument();
     });
+
+    it("should show the body as the title when there is no filename", async () => {
+        await act(() => render(<MAudioBody mxEvent={event} mediaEventHelper={mediaEventHelper} />));
+        expect(await screen.findByRole("region", { name: "Audio player" })).toBeInTheDocument();
+        expect(screen.getByText("audio name")).toBeInTheDocument();
+    });
+
+    it("should prefer the filename over the body as the title", async () => {
+        // A caption puts the human readable text in `body` and the actual file name in `filename`.
+        event.getContent().filename = "recording.ogg";
+        event.getContent().body = "Listen to this!";
+
+        await act(() => render(<MAudioBody mxEvent={event} mediaEventHelper={mediaEventHelper} />));
+        expect(await screen.findByRole("region", { name: "Audio player" })).toBeInTheDocument();
+        expect(screen.getByText("recording.ogg")).toBeInTheDocument();
+        expect(screen.queryByText("Listen to this!")).not.toBeInTheDocument();
+    });
 });