/
play-button.tsx
53 lines (46 loc) · 1.59 KB
/
play-button.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import * as React from 'react';
import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
import { PlayButtonInstance } from '../../primitives/instances';
import { Primitive } from '../../primitives/nodes';
/* -------------------------------------------------------------------------------------------------
* PlayButton
* -----------------------------------------------------------------------------------------------*/
const PlayButtonBridge = createReactComponent(PlayButtonInstance, {
domEventsRegex: /^onMedia/,
});
export interface PlayButtonProps extends ReactElementProps<PlayButtonInstance, HTMLButtonElement> {
asChild?: boolean;
children?: React.ReactNode;
ref?: React.Ref<HTMLButtonElement>;
}
/**
* A button for toggling the playback state (play/pause) of the current media.
*
* @docs {@link https://www.vidstack.io/docs/player/components/buttons/play-button}
* @example
* ```tsx
* const isPaused = useMediaState('paused');
*
* <PlayButton>
* {isPaused ? <PlayIcon /> : <PauseIcon />}
* </PlayButton>
* ```
*/
const PlayButton = React.forwardRef<HTMLButtonElement, PlayButtonProps>(
({ children, ...props }, forwardRef) => {
return (
<PlayButtonBridge {...(props as Omit<PlayButtonProps, 'ref'>)}>
{(props) => (
<Primitive.button
{...props}
ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
>
{children}
</Primitive.button>
)}
</PlayButtonBridge>
);
},
);
PlayButton.displayName = 'PlayButton';
export { PlayButton };