Bug fix: avoid space bar conflict with player interface

frontend/src/ControlBar.tsx

@@ -34,25 +34,46 @@ const ControlBar: React.FC<Props> = React.memo((props: Props) => {
       <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 (
     <>
       <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}>
+        <button
+          className={buttonStyle}
+          onClick={(evt) => filterMouseEvent(evt, props.onTogglePlay)}
+        >
           {playPauseComponent}
         </button>
         <button className={buttonStyle}>
           <FastForwardIcon className={iconStyle} />
         </button>
-        <button className={buttonStyle} onClick={props.onZoomIn}>
+        <button
+          className={buttonStyle}
+          onClick={(evt) => filterMouseEvent(evt, props.onZoomIn)}
+        >
           <ZoomInIcon className={iconStyle} />
         </button>
-        <button className={buttonStyle} onClick={props.onZoomOut}>
+        <button
+          className={buttonStyle}
+          onClick={(evt) => filterMouseEvent(evt, props.onZoomOut)}
+        >
           <ZoomOutIcon className={iconStyle} />
         </button>
-        <button className={largeButtonStyle} onClick={props.onClip}>
+        <button
+          className={largeButtonStyle}
+          onClick={(evt) => filterMouseEvent(evt, props.onClip)}
+        >
           <CloudDownloadIcon className={`${iconStyle} mr-2`} />
           Download clip
         </button>