Bug fix: avoid space bar conflict with player interface

This commit is contained in:
Rob Watson 2022-01-14 20:11:14 +01:00
parent 9d90ed51e6
commit aa80c9eb7e
1 changed files with 25 additions and 4 deletions

View File

@ -34,25 +34,46 @@ const ControlBar: React.FC<Props> = React.memo((props: Props) => {
<PlayIcon className={iconStyle} /> <PlayIcon className={iconStyle} />
); );
// 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 ( return (
<> <>
<div className="relative grow-0 w-full py-2 space-x-2"> <div className="relative grow-0 w-full py-2 space-x-2">
<button className={buttonStyle}> <button className={buttonStyle}>
<RewindIcon className={iconStyle} /> <RewindIcon className={iconStyle} />
</button> </button>
<button className={buttonStyle} onClick={props.onTogglePlay}> <button
className={buttonStyle}
onClick={(evt) => filterMouseEvent(evt, props.onTogglePlay)}
>
{playPauseComponent} {playPauseComponent}
</button> </button>
<button className={buttonStyle}> <button className={buttonStyle}>
<FastForwardIcon className={iconStyle} /> <FastForwardIcon className={iconStyle} />
</button> </button>
<button className={buttonStyle} onClick={props.onZoomIn}> <button
className={buttonStyle}
onClick={(evt) => filterMouseEvent(evt, props.onZoomIn)}
>
<ZoomInIcon className={iconStyle} /> <ZoomInIcon className={iconStyle} />
</button> </button>
<button className={buttonStyle} onClick={props.onZoomOut}> <button
className={buttonStyle}
onClick={(evt) => filterMouseEvent(evt, props.onZoomOut)}
>
<ZoomOutIcon className={iconStyle} /> <ZoomOutIcon className={iconStyle} />
</button> </button>
<button className={largeButtonStyle} onClick={props.onClip}> <button
className={largeButtonStyle}
onClick={(evt) => filterMouseEvent(evt, props.onClip)}
>
<CloudDownloadIcon className={`${iconStyle} mr-2`} /> <CloudDownloadIcon className={`${iconStyle} mr-2`} />
Download clip Download clip
</button> </button>