65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
 
|
/*
|
||
|
|
* 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>
|
||
|
|
);
|
||
|
|
}
|