From 0ce9cd006de54cc779e03a711618004e94cc686e Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Mon, 12 Feb 2024 11:25:33 -0500
Subject: [PATCH] [AudioPlayer] Catch 2-finger mousepad tap as right click
 (#2943)

---
 src/components/Pronunciations/AudioPlayer.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Pronunciations/AudioPlayer.tsx b/src/components/Pronunciations/AudioPlayer.tsx
index 533bb2bb71..8222b8410f 100644
--- a/src/components/Pronunciations/AudioPlayer.tsx
+++ b/src/components/Pronunciations/AudioPlayer.tsx
@@ -11,7 +11,9 @@ import {
 } from "@mui/material";
 import {
   CSSProperties,
+  MouseEvent,
   ReactElement,
+  TouchEvent,
   useCallback,
   useEffect,
   useState,
@@ -124,12 +126,14 @@ export default function AudioPlayer(props: PlayerProps): ReactElement {
     document.removeEventListener("contextmenu", preventEventOnce, false);
   }
 
-  function handleTouch(event: any): void {
+  /** If audio can be deleted or speaker changed, a touchscreen press should open an
+   * options menu instead of the context menu. */
+  function handleTouch(e: TouchEvent<HTMLButtonElement>): void {
     if (canChangeSpeaker || canDeleteAudio) {
       // Temporarily disable context menu since some browsers
       // interpret a long-press touch as a right-click.
       disableContextMenu();
-      setAnchor(event.currentTarget);
+      setAnchor(e.currentTarget);
     }
   }
 
@@ -140,14 +144,22 @@ export default function AudioPlayer(props: PlayerProps): ReactElement {
     setSpeakerDialog(false);
   }
 
+  /** If speaker can be changed, a right click should open the speaker menu instead of
+   * the context menu. */
   function handleOnAuxClick(): void {
     if (canChangeSpeaker) {
-      // Temporarily disable context menu triggered by right-click.
       disableContextMenu();
       setSpeakerDialog(true);
     }
   }
 
+  /** Catch a multi-finger mousepad tap as a right click. */
+  function handleOnMouseDown(e: MouseEvent<HTMLButtonElement>): void {
+    if (e.buttons > 1) {
+      handleOnAuxClick();
+    }
+  }
+
   const tooltipTexts = [t("pronunciations.playTooltip")];
   if (canDeleteAudio) {
     tooltipTexts.push(t("pronunciations.deleteTooltip"));
@@ -176,6 +188,7 @@ export default function AudioPlayer(props: PlayerProps): ReactElement {
           tabIndex={-1}
           onAuxClick={handleOnAuxClick}
           onClick={deleteOrTogglePlay}
+          onMouseDown={handleOnMouseDown}
           onTouchStart={handleTouch}
           onTouchEnd={enableContextMenu}
           aria-label="play"