Merge remote-tracking branch 'origin/main' into dbkr/postmessage_ptt_2

package.json

@@ -42,7 +42,7 @@
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
-    "postcss-preset-env": "^6.7.0",
+    "postcss-preset-env": "^7",
     "re-resizable": "^6.9.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",

src/ClientContext.tsx

@@ -71,7 +71,11 @@ type ClientProviderState = Omit<
   "changePassword" | "logout" | "setClient"
 > & { error?: Error };
 
-export const ClientProvider: FC = ({ children }) => {
+interface Props {
+  children: JSX.Element;
+}
+
+export const ClientProvider: FC<Props> = ({ children }) => {
   const history = useHistory();
   const [
     { loading, isAuthenticated, isPasswordlessUser, client, userName, error },

src/button/Button.tsx

@@ -121,8 +121,10 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
         {...mergeProps(rest, filteredButtonProps)}
         ref={buttonRef}
       >
-        {children}
-        {variant === "dropdown" && <ArrowDownIcon />}
+        <>
+          {children}
+          {variant === "dropdown" && <ArrowDownIcon />}
+        </>
       </button>
     );
   }

src/room/PTTButton.tsx

@@ -57,13 +57,17 @@ export const PTTButton: React.FC<Props> = ({
   const buttonRef = useRef<HTMLButtonElement>();
 
   const [activeTouchId, setActiveTouchId] = useState<number | null>(null);
+  const [buttonHeld, setButtonHeld] = useState(false);
 
   const hold = useCallback(() => {
     // This update is delayed so the user only sees it if latency is significant
+    if (buttonHeld) return;
+    setButtonHeld(true);
     enqueueNetworkWaiting(true, 100);
     startTalking();
-  }, [enqueueNetworkWaiting, startTalking]);
+  }, [enqueueNetworkWaiting, startTalking, buttonHeld]);
   const unhold = useCallback(() => {
+    setButtonHeld(false);
     setNetworkWaiting(false);
     stopTalking();
   }, [setNetworkWaiting, stopTalking]);