Bug fix: avoid space bar conflict with player interface
This commit is contained in:
parent
9d90ed51e6
commit
aa80c9eb7e
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue