import React from 'react'; import { PlayState } from './Player'; import { CloudDownloadIcon, FastForwardIcon, PauseIcon, PlayIcon, RewindIcon, ZoomInIcon, ZoomOutIcon, } from '@heroicons/react/solid'; interface Props { playState: PlayState; zoomInEnabled: boolean; zoomOutEnabled: boolean; onTogglePlay: () => void; onClip: () => void; onZoomIn: () => void; onZoomOut: () => void; downloadClipEnabled: boolean; } const ControlBar: React.FC = React.memo((props: Props) => { const buttonStyle = 'bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded'; const disabledButtonStyle = 'bg-gray-700 text-white font-bold py-2 px-4 rounded cursor-auto'; const downloadButtonStyle = props.downloadClipEnabled ? 'bg-green-600 hover:bg-green-600 text-white font-bold py-2 px-4 rounded absolute right-0' : 'bg-gray-600 hover:cursor-not-allowed text-gray-500 font-bold py-2 px-4 rounded absolute right-0'; const iconStyle = 'inline h-7 w-7 text-white-500'; const playPauseComponent = props.playState == PlayState.Playing ? ( ) : ( ); const handleClip = () => { if (props.downloadClipEnabled) { props.onClip(); } }; // Detect if the space bar has been used to trigger this event, and ignore // it if so. This conflicts with the player interface. const filterMouseEvent = (evt: React.MouseEvent, cb: () => void) => { if (evt.detail == 0) { return; } cb(); }; return ( <>
); }); ControlBar.displayName = 'ControlBar'; export { ControlBar };