Move AudioPlayer to shared components (#30386)

* feat: add `PlayPauseButton` to storybook

* feat: add generic media body

* feat: add seekbar component

* chore: add ViewWrapper to help writing stories with vm

* refactor: move `formatBytes` from `formattingUtils` into shared component

* refactor: add `className` props to `Clock`

* feat: add new audio player component

* test(e2e): add screenshots for new shared components

* feat: add AudioPlayerViewModel

* feat: use new audio player in `MAudioBody`

* refactor: remove old audio player

* test(e2e): update existing tests

* refactor: remove unused `DurationClock`

* refactor: rename `SeekBar` into `LegacySeekBar`

src/shared-components/audio/AudioPlayerView/AudioPlayerView.module.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.audioPlayer {
+    padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x);
+}
+
+.mediaInfo {
+    /* Makes the ellipsis on the file name work */
+    overflow: hidden;
+}
+
+.mediaName {
+    color: var(--cpd-color-text-primary);
+    font: var(--cpd-font-body-md-regular);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+.byline {
+    font: var(--cpd-font-body-xs-regular);
+}
+
+.clock {
+    white-space: nowrap;
+}
+
+.error {
+    color: var(--cpd-color-text-critical-primary);
+}

src/shared-components/audio/AudioPlayerView/AudioPlayerView.stories.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import {
+    AudioPlayerView,
+    type AudioPlayerViewActions,
+    type AudioPlayerViewSnapshot,
+    type AudioPlayerViewModel,
+} from "./AudioPlayerView";
+import { ViewWrapper } from "../../ViewWrapper";
+
+type AudioPlayerProps = AudioPlayerViewSnapshot & AudioPlayerViewActions;
+const AudioPlayerViewWrapper = (props: AudioPlayerProps): JSX.Element => (
+    <ViewWrapper<AudioPlayerViewSnapshot, AudioPlayerViewModel> Component={AudioPlayerView} props={props} />
+);
+
+export default {
+    title: "Audio/AudioPlayerView",
+    component: AudioPlayerViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        playbackState: {
+            options: ["stopped", "playing", "paused", "decoding"],
+            control: { type: "select" },
+        },
+    },
+    args: {
+        mediaName: "Sample Audio",
+        durationSeconds: 300,
+        playedSeconds: 120,
+        percentComplete: 30,
+        playbackState: "stopped",
+        sizeBytes: 3500,
+        error: false,
+        togglePlay: fn(),
+        onKeyDown: fn(),
+        onSeekbarChange: fn(),
+    },
+} as Meta<typeof AudioPlayerViewWrapper>;
+
+const Template: StoryFn<typeof AudioPlayerViewWrapper> = (args) => <AudioPlayerViewWrapper {...args} />;
+
+export const Default = Template.bind({});
+
+export const NoMediaName = Template.bind({});
+NoMediaName.args = {
+    mediaName: undefined,
+};
+
+export const NoSize = Template.bind({});
+NoSize.args = {
+    sizeBytes: undefined,
+};
+
+export const HasError = Template.bind({});
+HasError.args = {
+    error: true,
+};

src/shared-components/audio/AudioPlayerView/AudioPlayerView.test.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { render, screen } from "jest-matrix-react";
+import { composeStories } from "@storybook/react-vite";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { fireEvent } from "@testing-library/dom";
+
+import * as stories from "./AudioPlayerView.stories.tsx";
+import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
+import { MockViewModel } from "../../MockViewModel";
+
+const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);
+
+describe("AudioPlayerView", () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("renders the audio player in default state", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the audio player without media name", () => {
+        const { container } = render(<NoMediaName />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the audio player without size", () => {
+        const { container } = render(<NoSize />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the audio player in error state", () => {
+        const { container } = render(<HasError />);
+        expect(container).toMatchSnapshot();
+    });
+
+    const onKeyDown = jest.fn();
+    const togglePlay = jest.fn();
+    const onSeekbarChange = jest.fn();
+
+    class AudioPlayerViewModel extends MockViewModel<AudioPlayerViewSnapshot> implements AudioPlayerViewActions {
+        public onKeyDown = onKeyDown;
+        public togglePlay = togglePlay;
+        public onSeekbarChange = onSeekbarChange;
+    }
+
+    it("should attach vm methods", async () => {
+        const user = userEvent.setup();
+        const vm = new AudioPlayerViewModel({
+            playbackState: "stopped",
+            mediaName: "Test Audio",
+            durationSeconds: 300,
+            playedSeconds: 120,
+            percentComplete: 30,
+            sizeBytes: 3500,
+            error: false,
+        });
+
+        render(<AudioPlayerView vm={vm} />);
+        await user.click(screen.getByRole("button", { name: "Play" }));
+        expect(togglePlay).toHaveBeenCalled();
+
+        // user event doesn't support change events on sliders, so we use fireEvent
+        fireEvent.change(screen.getByRole("slider", { name: "Audio seek bar" }), { target: { value: "50" } });
+        expect(onSeekbarChange).toHaveBeenCalled();
+
+        await user.type(screen.getByLabelText("Audio player"), "{arrowup}");
+        expect(onKeyDown).toHaveBeenCalledWith(expect.objectContaining({ key: "ArrowUp" }));
+    });
+});

src/shared-components/audio/AudioPlayerView/AudioPlayerView.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ChangeEventHandler, type JSX, type KeyboardEventHandler, type MouseEventHandler } from "react";
+
+import { type ViewModel } from "../../ViewModel";
+import { useViewModel } from "../../useViewModel";
+import { MediaBody } from "../../message-body/MediaBody";
+import { Flex } from "../../utils/Flex";
+import styles from "./AudioPlayerView.module.css";
+import { PlayPauseButton } from "../PlayPauseButton";
+import { type PlaybackState } from "../playback";
+import { _t } from "../../utils/i18n";
+import { formatBytes } from "../../utils/FormattingUtils";
+import { Clock } from "../Clock";
+import { SeekBar } from "../SeekBar";
+
+export interface AudioPlayerViewSnapshot {
+    /**
+     * The playback state of the audio player.
+     */
+    playbackState: PlaybackState;
+    /**
+     * Name of the media being played.
+     * @default Fallback to "timeline|m.audio|unnamed_audio" string if not provided.
+     */
+    mediaName?: string;
+    /**
+     * Size of the audio file in bytes.
+     * Hided if not provided.
+     */
+    sizeBytes?: number;
+    /**
+     * The duration of the audio clip in seconds.
+     */
+    durationSeconds: number;
+    /**
+     * The percentage of the audio that has been played.
+     * Ranges from 0 to 100.
+     */
+    percentComplete: number;
+    /**
+     * The number of seconds that have been played.
+     */
+    playedSeconds: number;
+    /**
+     * Indicates if there was an error downloading the audio.
+     */
+    error: boolean;
+}
+
+export interface AudioPlayerViewActions {
+    /**
+     * Handles key down events for the audio player.
+     */
+    onKeyDown: KeyboardEventHandler<HTMLDivElement>;
+    /**
+     * Toggles the play/pause state of the audio player.
+     */
+    togglePlay: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Handles changes to the seek bar.
+     */
+    onSeekbarChange: ChangeEventHandler<HTMLInputElement>;
+}
+
+/**
+ * The view model for the audio player.
+ */
+export type AudioPlayerViewModel = ViewModel<AudioPlayerViewSnapshot> & AudioPlayerViewActions;
+
+interface AudioPlayerViewProps {
+    /**
+     * The view model for the audio player.
+     */
+    vm: AudioPlayerViewModel;
+}
+
+/**
+ * AudioPlayer component displays an audio player with play/pause controls, seek bar, and media information.
+ * The component expects a view model that provides the current state of the audio playback,
+ *
+ * @example
+ * ```tsx
+ * <AudioPlayerView vm={audioPlayerViewModel} />
+ * ```
+ */
+export function AudioPlayerView({ vm }: Readonly<AudioPlayerViewProps>): JSX.Element {
+    const {
+        playbackState,
+        mediaName = _t("timeline|m.audio|unnamed_audio"),
+        sizeBytes,
+        durationSeconds,
+        playedSeconds,
+        percentComplete,
+        error,
+    } = useViewModel(vm);
+    const fileSize = sizeBytes ? `(${formatBytes(sizeBytes)})` : null;
+    const disabled = playbackState === "decoding";
+
+    // tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard
+    // events for accessibility
+    return (
+        <>
+            <MediaBody
+                className={styles.audioPlayer}
+                tabIndex={0}
+                onKeyDown={vm.onKeyDown}
+                aria-label={_t("timeline|m.audio|audio_player")}
+                role="region"
+            >
+                <Flex gap="var(--cpd-space-2x)" align="center">
+                    <PlayPauseButton
+                        // Prevent tabbing into the button
+                        // Keyboard navigation is handled at the MediaBody level
+                        tabIndex={-1}
+                        disabled={disabled}
+                        playing={playbackState === "playing"}
+                        togglePlay={vm.togglePlay}
+                    />
+                    <Flex direction="column" className={styles.mediaInfo}>
+                        <span className={styles.mediaName} data-testid="audio-player-name">
+                            {mediaName}
+                        </span>
+                        <Flex className={styles.byline} gap="var(--cpd-space-1-5x)">
+                            <Clock seconds={durationSeconds} />
+                            {fileSize}
+                        </Flex>
+                    </Flex>
+                </Flex>
+                <Flex align="center" gap="var(--cpd-space-1x)" data-testid="audio-player-seek">
+                    <SeekBar tabIndex={-1} disabled={disabled} value={percentComplete} onChange={vm.onSeekbarChange} />
+                    <Clock className={styles.clock} seconds={playedSeconds} role="timer" />
+                </Flex>
+            </MediaBody>
+            {error && <span className={styles.error}>{_t("timeline|m.audio|error_downloading_audio")}</span>}
+        </>
+    );
+}

src/shared-components/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap

@@ -0,0 +1,369 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AudioPlayerView renders the audio player in default state 1`] = `
+<div>
+  <div
+    aria-label="Audio player"
+    class="mx_MediaBody mediaBody audioPlayer"
+    role="region"
+    tabindex="0"
+  >
+    <div
+      class="flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Play"
+        aria-labelledby="«r0»"
+        class="_icon-button_1pz9o_8 button"
+        data-kind="primary"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        class="flex mediaInfo"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="mediaName"
+          data-testid="audio-player-name"
+        >
+          Sample Audio
+        </span>
+        <div
+          class="flex byline"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
+        >
+          <time
+            class="mx_Clock"
+            datetime="PT5M"
+          >
+            05:00
+          </time>
+          (3.42 KB)
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex"
+      data-testid="audio-player-seek"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    >
+      <input
+        aria-label="Audio seek bar"
+        class="seekBar"
+        max="100"
+        min="0"
+        step="1"
+        style="--fillTo: 0.3;"
+        tabindex="-1"
+        type="range"
+        value="30"
+      />
+      <time
+        class="mx_Clock clock"
+        datetime="PT2M"
+        role="timer"
+      >
+        02:00
+      </time>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AudioPlayerView renders the audio player in error state 1`] = `
+<div>
+  <div
+    aria-label="Audio player"
+    class="mx_MediaBody mediaBody audioPlayer"
+    role="region"
+    tabindex="0"
+  >
+    <div
+      class="flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Play"
+        aria-labelledby="«ri»"
+        class="_icon-button_1pz9o_8 button"
+        data-kind="primary"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        class="flex mediaInfo"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="mediaName"
+          data-testid="audio-player-name"
+        >
+          Sample Audio
+        </span>
+        <div
+          class="flex byline"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
+        >
+          <time
+            class="mx_Clock"
+            datetime="PT5M"
+          >
+            05:00
+          </time>
+          (3.42 KB)
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex"
+      data-testid="audio-player-seek"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    >
+      <input
+        aria-label="Audio seek bar"
+        class="seekBar"
+        max="100"
+        min="0"
+        step="1"
+        style="--fillTo: 0.3;"
+        tabindex="-1"
+        type="range"
+        value="30"
+      />
+      <time
+        class="mx_Clock clock"
+        datetime="PT2M"
+        role="timer"
+      >
+        02:00
+      </time>
+    </div>
+  </div>
+  <span
+    class="error"
+  >
+    Error downloading audio
+  </span>
+</div>
+`;
+
+exports[`AudioPlayerView renders the audio player without media name 1`] = `
+<div>
+  <div
+    aria-label="Audio player"
+    class="mx_MediaBody mediaBody audioPlayer"
+    role="region"
+    tabindex="0"
+  >
+    <div
+      class="flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Play"
+        aria-labelledby="«r6»"
+        class="_icon-button_1pz9o_8 button"
+        data-kind="primary"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        class="flex mediaInfo"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="mediaName"
+          data-testid="audio-player-name"
+        >
+          Unnamed audio
+        </span>
+        <div
+          class="flex byline"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
+        >
+          <time
+            class="mx_Clock"
+            datetime="PT5M"
+          >
+            05:00
+          </time>
+          (3.42 KB)
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex"
+      data-testid="audio-player-seek"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    >
+      <input
+        aria-label="Audio seek bar"
+        class="seekBar"
+        max="100"
+        min="0"
+        step="1"
+        style="--fillTo: 0.3;"
+        tabindex="-1"
+        type="range"
+        value="30"
+      />
+      <time
+        class="mx_Clock clock"
+        datetime="PT2M"
+        role="timer"
+      >
+        02:00
+      </time>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AudioPlayerView renders the audio player without size 1`] = `
+<div>
+  <div
+    aria-label="Audio player"
+    class="mx_MediaBody mediaBody audioPlayer"
+    role="region"
+    tabindex="0"
+  >
+    <div
+      class="flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Play"
+        aria-labelledby="«rc»"
+        class="_icon-button_1pz9o_8 button"
+        data-kind="primary"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        class="flex mediaInfo"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="mediaName"
+          data-testid="audio-player-name"
+        >
+          Sample Audio
+        </span>
+        <div
+          class="flex byline"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
+        >
+          <time
+            class="mx_Clock"
+            datetime="PT5M"
+          >
+            05:00
+          </time>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex"
+      data-testid="audio-player-seek"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    >
+      <input
+        aria-label="Audio seek bar"
+        class="seekBar"
+        max="100"
+        min="0"
+        step="1"
+        style="--fillTo: 0.3;"
+        tabindex="-1"
+        type="range"
+        value="30"
+      />
+      <time
+        class="mx_Clock clock"
+        datetime="PT2M"
+        role="timer"
+      >
+        02:00
+      </time>
+    </div>
+  </div>
+</div>
+`;

src/shared-components/audio/AudioPlayerView/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export type { AudioPlayerViewModel, AudioPlayerViewSnapshot } from "./AudioPlayerView";
+export { AudioPlayerView } from "./AudioPlayerView";

src/shared-components/audio/Clock/Clock.tsx

@@ -7,10 +7,11 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type HTMLProps } from "react";
 import { Temporal } from "temporal-polyfill";
+import classNames from "classnames";
 
 import { formatSeconds } from "../../utils/DateUtils";
 
-export interface Props extends Pick<HTMLProps<HTMLSpanElement>, "aria-live" | "role"> {
+export interface Props extends Pick<HTMLProps<HTMLSpanElement>, "aria-live" | "role" | "className"> {
     seconds: number;
 }
 
@@ -41,7 +42,7 @@ export class Clock extends React.Component<Props> {
                 aria-live={this.props["aria-live"]}
                 role={role}
                 /* Keep class for backward compatibility with parent component */
-                className="mx_Clock"
+                className={classNames("mx_Clock", this.props.className)}
             >
                 {formatSeconds(seconds)}
             </time>

src/shared-components/audio/PlayPauseButton/PlayPauseButton.module.css

@@ -0,0 +1,11 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.button {
+    border-radius: 32px;
+    background-color: var(--cpd-color-bg-subtle-primary);
+}

src/shared-components/audio/PlayPauseButton/PlayPauseButton.stories.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { fn } from "storybook/test";
+
+import { PlayPauseButton } from "./PlayPauseButton";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta = {
+    title: "Audio/PlayPauseButton",
+    component: PlayPauseButton,
+    tags: ["autodocs"],
+    args: {
+        togglePlay: fn(),
+    },
+} satisfies Meta<typeof PlayPauseButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Playing: Story = { args: { playing: true } };

src/shared-components/audio/PlayPauseButton/PlayPauseButton.test.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { composeStories } from "@storybook/react-vite";
+import { render } from "jest-matrix-react";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { fn } from "storybook/test";
+
+import * as stories from "./PlayPauseButton.stories.tsx";
+
+const { Default, Playing } = composeStories(stories);
+
+describe("PlayPauseButton", () => {
+    it("renders the button in default state", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the button in playing state", () => {
+        const { container } = render(<Playing />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("calls togglePlay when clicked", async () => {
+        const user = userEvent.setup();
+        const togglePlay = fn();
+
+        const { getByRole } = render(<Default togglePlay={togglePlay} />);
+        await user.click(getByRole("button"));
+        expect(togglePlay).toHaveBeenCalled();
+    });
+});

src/shared-components/audio/PlayPauseButton/PlayPauseButton.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type HTMLAttributes, type JSX, type MouseEventHandler } from "react";
+import { IconButton } from "@vector-im/compound-web";
+import Play from "@vector-im/compound-design-tokens/assets/web/icons/play-solid";
+import Pause from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid";
+
+import styles from "./PlayPauseButton.module.css";
+import { _t } from "../../utils/i18n";
+
+export interface PlayPauseButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Whether the audio is currently playing.
+     * @default false
+     */
+    playing?: boolean;
+
+    /**
+     * Function to toggle play/pause state.
+     */
+    togglePlay: MouseEventHandler<HTMLButtonElement>;
+}
+
+/**
+ * A button component that toggles between play and pause states for audio playback.
+ *
+ * @example
+ * ```tsx
+ * <PlayPauseButton playing={true} togglePlay={() => {}} />
+ * ```
+ */
+export function PlayPauseButton({
+    disabled = false,
+    playing = false,
+    togglePlay,
+    ...rest
+}: Readonly<PlayPauseButtonProps>): JSX.Element {
+    const label = playing ? _t("action|pause") : _t("action|play");
+
+    return (
+        <IconButton
+            size="32px"
+            aria-label={label}
+            tooltip={label}
+            onClick={togglePlay}
+            className={styles.button}
+            disabled={disabled}
+            {...rest}
+        >
+            {playing ? <Pause /> : <Play />}
+        </IconButton>
+    );
+}

src/shared-components/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PlayPauseButton renders the button in default state 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-label="Play"
+    aria-labelledby="«r0»"
+    class="_icon-button_1pz9o_8 button"
+    data-kind="primary"
+    role="button"
+    style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
+  >
+    <div
+      class="_indicator-icon_zr2a0_17"
+      style="--cpd-icon-button-size: 100%;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`PlayPauseButton renders the button in playing state 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-label="Pause"
+    aria-labelledby="«r6»"
+    class="_icon-button_1pz9o_8 button"
+    data-kind="primary"
+    role="button"
+    style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
+  >
+    <div
+      class="_indicator-icon_zr2a0_17"
+      style="--cpd-icon-button-size: 100%;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2m8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;

src/shared-components/audio/PlayPauseButton/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export { PlayPauseButton } from "./PlayPauseButton";

src/shared-components/audio/SeekBar/SeekBar.module.css

@@ -0,0 +1,99 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* CSS inspiration from: */
+/* * https://www.w3schools.com/howto/howto_js_rangeslider.asp */
+/* * https://stackoverflow.com/a/28283806 */
+/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
+
+.seekBar {
+    /* default, overridden in JS */
+    --fillTo: 1;
+
+    /* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
+    /* need to support IE. */
+
+    appearance: none; /* default style override */
+
+    width: 100%;
+    height: 1px;
+    background: var(--cpd-color-gray-600);
+    outline: none; /* remove blue selection border */
+    position: relative; /* for before+after pseudo elements later on */
+
+    cursor: pointer;
+
+    &::-webkit-slider-thumb {
+        appearance: none; /* default style override */
+
+        /* Dev note: This needs to be duplicated with the -moz-range-thumb selector */
+        /* because otherwise Edge (webkit) will fail to see the styles and just refuse */
+        /* to apply them. */
+        width: 8px;
+        height: 8px;
+        border-radius: 8px;
+        background-color: var(--cpd-color-gray-800);
+        cursor: pointer;
+    }
+
+    &::-moz-range-thumb {
+        width: 8px;
+        height: 8px;
+        border-radius: 8px;
+        background-color: var(--cpd-color-gray-800);
+        cursor: pointer;
+
+        /* Firefox adds a border on the thumb */
+        border: none;
+    }
+
+    /* This is for webkit support, but we can't limit the functionality of it to just webkit */
+    /* browsers. Firefox responds to webkit-prefixed values now, which means we can't use media */
+    /* or support queries to selectively apply the rule. An upside is that this CSS doesn't work */
+    /* in firefox, so it's just wasted CPU/GPU time. */
+    &::before {
+        /* ::before to ensure it ends up under the thumb */
+        content: "";
+        background-color: var(--cpd-color-gray-800);
+
+        /* Absolute positioning to ensure it overlaps with the existing bar */
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        /* Sizing to match the bar */
+        width: 100%;
+        height: 1px;
+
+        /* And finally dynamic width without overly hurting the rendering engine. */
+        transform-origin: 0 100%;
+        transform: scaleX(var(--fillTo));
+    }
+
+    /* This is firefox's built-in support for the above, with 100% less hacks. */
+    &::-moz-range-progress {
+        background-color: var(--cpd-color-gray-800);
+        height: 1px;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+    }
+
+    /* Increase clickable area for the slider (approximately same size as browser default) */
+    /* We do it this way to keep the same padding and margins of the element, avoiding margin math. */
+    /* Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/ */
+    &::after {
+        content: "";
+        position: absolute;
+        top: -6px;
+        bottom: -6px;
+        left: 0;
+        right: 0;
+    }
+}

src/shared-components/audio/SeekBar/SeekBar.stories.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { useArgs } from "storybook/preview-api";
+
+import { SeekBar } from "./SeekBar";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+
+export default {
+    title: "Audio/SeekBar",
+    component: SeekBar,
+    tags: ["autodocs"],
+    argTypes: {
+        value: {
+            control: { type: "range", min: 0, max: 100, step: 1 },
+        },
+    },
+    args: {
+        value: 50,
+    },
+} as Meta<typeof SeekBar>;
+
+const Template: StoryFn<typeof SeekBar> = (args) => {
+    const [, updateArgs] = useArgs();
+    return <SeekBar onChange={(evt) => updateArgs({ value: parseInt(evt.target.value, 10) })} {...args} />;
+};
+
+export const Default = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+};

src/shared-components/audio/SeekBar/SeekBar.test.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { render } from "jest-matrix-react";
+import React from "react";
+import { composeStories } from "@storybook/react-vite";
+
+import * as stories from "./SeekBar.stories.tsx";
+const { Default } = composeStories(stories);
+
+describe("Seekbar", () => {
+    it("renders the clock", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+});

src/shared-components/audio/SeekBar/SeekBar.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type CSSProperties, type JSX, useEffect, useMemo, useState } from "react";
+import { throttle } from "lodash";
+import classNames from "classnames";
+
+import style from "./SeekBar.module.css";
+import { _t } from "../../utils/i18n";
+
+export interface SeekBarProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * The current value of the seek bar, between 0 and 100.
+     * @default 0
+     */
+    value?: number;
+}
+
+interface ISeekCSS extends CSSProperties {
+    "--fillTo": number;
+}
+
+/**
+ * A seek bar component for audio playback.
+ *
+ * @example
+ * ```tsx
+ * <SeekBar value={50} onChange={(e) => console.log("New value", e.target.value)} />
+ * ```
+ */
+export function SeekBar({ value = 0, className, ...rest }: Readonly<SeekBarProps>): JSX.Element {
+    const [newValue, setNewValue] = useState(value);
+    // Throttle the value setting to avoid excessive re-renders
+    const setThrottledValue = useMemo(() => throttle(setNewValue, 10), []);
+
+    useEffect(() => {
+        setThrottledValue(value);
+    }, [value, setThrottledValue]);
+
+    return (
+        <input
+            type="range"
+            className={classNames(style.seekBar, className)}
+            onMouseDown={(e) => e.stopPropagation()}
+            min={0}
+            max={100}
+            value={newValue}
+            step={1}
+            style={{ "--fillTo": newValue / 100 } as ISeekCSS}
+            aria-label={_t("a11y|seek_bar_label")}
+            {...rest}
+        />
+    );
+}

src/shared-components/audio/SeekBar/__snapshots__/SeekBar.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Seekbar renders the clock 1`] = `
+<div>
+  <input
+    aria-label="Audio seek bar"
+    class="seekBar"
+    max="100"
+    min="0"
+    step="1"
+    style="--fillTo: 0.5;"
+    type="range"
+    value="50"
+  />
+</div>
+`;

src/shared-components/audio/SeekBar/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export { SeekBar } from "./SeekBar";

src/shared-components/audio/playback.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+/**
+ * Represents the possible states of playback.
+ * - "decoding": The audio is being decoded and is not ready for playback.
+ * - "stopped": The playback has been stopped, with no progress on the timeline.
+ * - "paused": The playback is paused, with some progress on the timeline.
+ * - "playing": The playback is actively progressing through the timeline.
+ */
+export type PlaybackState = "decoding" | "stopped" | "paused" | "playing";