From aa80c9eb7eda98c05289c8fa1cf7a9d4f2285a21 Mon Sep 17 00:00:00 2001
From: Rob Watson <rob@netflux.io>
Date: Fri, 14 Jan 2022 20:11:14 +0100
Subject: [PATCH] Bug fix: avoid space bar conflict with player interface

---
 frontend/src/ControlBar.tsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ControlBar.tsx b/frontend/src/ControlBar.tsx
index 89d3393..cba610f 100644
--- a/frontend/src/ControlBar.tsx
+++ b/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>