53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { PlayPauseSessionShortcut } from 'Components/Session_/Player/Controls/components/KeyboardHelp';
|
|
import React from 'react';
|
|
import { Icon } from 'UI';
|
|
import { Popover } from 'antd';
|
|
|
|
export enum PlayingState {
|
|
Playing,
|
|
Paused,
|
|
Completed,
|
|
}
|
|
|
|
interface IProps {
|
|
togglePlay: () => void;
|
|
iconSize: number;
|
|
state: PlayingState;
|
|
}
|
|
|
|
const Values = {
|
|
[PlayingState.Playing]: {
|
|
icon: 'pause-fill' as const,
|
|
label: 'Pause',
|
|
},
|
|
[PlayingState.Completed]: {
|
|
icon: 'arrow-clockwise' as const,
|
|
label: 'Replay this session',
|
|
},
|
|
[PlayingState.Paused]: {
|
|
icon: 'play-fill-new' as const,
|
|
label: 'Play',
|
|
},
|
|
};
|
|
|
|
export function PlayButton({ togglePlay, iconSize, state }: IProps) {
|
|
const { icon, label } = Values[state];
|
|
|
|
return (
|
|
<Popover
|
|
content={
|
|
<div className="flex gap-2 items-center">
|
|
<PlayPauseSessionShortcut />
|
|
<div>{label}</div>
|
|
</div>
|
|
}
|
|
>
|
|
<div
|
|
onClick={togglePlay}
|
|
className="hover-main color-main cursor-pointer rounded-full hover:bg-indigo-lightest"
|
|
>
|
|
<Icon name={icon} size={iconSize} color="inherit" />
|
|
</div>
|
|
</Popover>
|
|
);
|
|
}
|