David BakerandGitHub
2698ad422e
* Move shared components to a packages/ directory so they can be publish more sensibly * Iterate towards split out shared-components module * Move shared component source into src/ subdir * Fix up imports * Include shared components in babel-ing (again) * Remove now unused dependencies * Update import in storybook preview * ...except of course they aren't unused if we import the shared components by source * Ignore shared components deps * Add shared-components to i18n paths and upgrade web-i18n to version that supports doing so * Move storybook stuff to shared-components * Seems we don't need this anymore... * Remove unused deps and remove storybook plugin from eslint * Presumably working-directory is only valid on run steps * Ignore dep & run prettier * Prettier on knips.ts * Hopefully run in right dir * Remember how to software write * Okay... how about THIS way? * Oh right, they were git ignored. Sigh. * Add concurrently * Ignore in knip * Better? * Paaaaaaaackageeeeeeees * More packages * Move playwright snapshots * Still need a custom snapshots dir * Add eslint back * Oh, now knip sees them * Fix another import * Don't lint shared-components with everything else Okay, eslint & tsconfig are tied too closely for this to work and running tsc on the shared components will need its deps installing * Maybe lint shared components please? * Not quite * Remove storybook again Re-check if it does work without it * Remove storybook eslint plugin as we're not linting storybook here anymore * Remove this too * We do need it here though
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>
|
|
);
|
|
}
|