66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { PlayState } from './App';
|
|
import {
|
|
CloudDownloadIcon,
|
|
FastForwardIcon,
|
|
PauseIcon,
|
|
PlayIcon,
|
|
RewindIcon,
|
|
ZoomInIcon,
|
|
ZoomOutIcon,
|
|
} from '@heroicons/react/solid';
|
|
|
|
interface Props {
|
|
playState: PlayState;
|
|
onTogglePlay: () => void;
|
|
onClip: () => void;
|
|
onZoomIn: () => void;
|
|
onZoomOut: () => void;
|
|
}
|
|
|
|
const ControlBar: React.FC<Props> = React.memo((props: Props) => {
|
|
const buttonStyle =
|
|
'bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded';
|
|
|
|
const largeButtonStyle =
|
|
'bg-green-700 hover:bg-green-600 text-white font-bold py-2 px-4 rounded absolute right-0';
|
|
|
|
const iconStyle = 'inline h-6 w-6 text-white-500';
|
|
|
|
const playPauseComponent =
|
|
props.playState == PlayState.Playing ? (
|
|
<PauseIcon className={iconStyle} />
|
|
) : (
|
|
<PlayIcon className={iconStyle} />
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className="relative grow-0 w-full py-2 space-x-2">
|
|
<button className={buttonStyle}>
|
|
<RewindIcon className={iconStyle} />
|
|
</button>
|
|
<button className={buttonStyle} onClick={props.onTogglePlay}>
|
|
{playPauseComponent}
|
|
</button>
|
|
<button className={buttonStyle}>
|
|
<FastForwardIcon className={iconStyle} />
|
|
</button>
|
|
<button className={buttonStyle} onClick={props.onZoomIn}>
|
|
<ZoomInIcon className={iconStyle} />
|
|
</button>
|
|
<button className={buttonStyle} onClick={props.onZoomOut}>
|
|
<ZoomOutIcon className={iconStyle} />
|
|
</button>
|
|
<button className={largeButtonStyle} onClick={props.onClip}>
|
|
<CloudDownloadIcon className={`${iconStyle} mr-2`} />
|
|
Download clip
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
});
|
|
|
|
ControlBar.displayName = 'ControlBar';
|
|
export { ControlBar };
|