From 9368462ad4aa9b7608736cc8feb495243e511f22 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 21 Jul 2025 20:04:30 -0700
Subject: [PATCH 1/3] Allow dragging mouse over buttons in main window

---
 packages/webamp/js/components/ClickedDiv.tsx  |  1 +
 .../components/MainWindow/ActionButtons.tsx   | 35 ++++++++++++++++---
 .../webamp/js/components/MainWindow/Eject.tsx |  1 +
 .../components/MainWindow/EqToggleButton.tsx  |  1 +
 .../MainWindow/PlaylistToggleButton.tsx       |  1 +
 .../js/components/MainWindow/Repeat.tsx       |  1 +
 .../js/components/MainWindow/Shuffle.tsx      |  1 +
 .../webamp/js/components/WinampButton.tsx     | 20 ++++++++++-
 8 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/packages/webamp/js/components/ClickedDiv.tsx b/packages/webamp/js/components/ClickedDiv.tsx
index 58c8b81905..f0f5c5612d 100644
--- a/packages/webamp/js/components/ClickedDiv.tsx
+++ b/packages/webamp/js/components/ClickedDiv.tsx
@@ -26,6 +26,7 @@ function ClickedDiv(props: Props) {
       {...props}
       className={classnames(props.className, { clicked })}
       onPointerDown={handlePointerDown}
+      requireClicksOriginateLocally={false}
     />
   );
 }
diff --git a/packages/webamp/js/components/MainWindow/ActionButtons.tsx b/packages/webamp/js/components/MainWindow/ActionButtons.tsx
index d29d248df8..0be7af3e2d 100644
--- a/packages/webamp/js/components/MainWindow/ActionButtons.tsx
+++ b/packages/webamp/js/components/MainWindow/ActionButtons.tsx
@@ -11,11 +11,36 @@ const ActionButtons = memo(() => {
   const stop = useActionCreator(Actions.stop);
   return (
     <div className="actions">
-      <WinampButton id="previous" onClick={previous} title="Previous Track" />
-      <WinampButton id="play" onClick={play} title="Play" />
-      <WinampButton id="pause" onClick={pause} title="Pause" />
-      <WinampButton id="stop" onClick={stop} title="Stop" />
-      <WinampButton id="next" onClick={next} title="Next Track" />
+      <WinampButton
+        id="previous"
+        onClick={previous}
+        title="Previous Track"
+        requireClicksOriginateLocally={false}
+      />
+      <WinampButton
+        id="play"
+        onClick={play}
+        title="Play"
+        requireClicksOriginateLocally={false}
+      />
+      <WinampButton
+        id="pause"
+        onClick={pause}
+        title="Pause"
+        requireClicksOriginateLocally={false}
+      />
+      <WinampButton
+        id="stop"
+        onClick={stop}
+        title="Stop"
+        requireClicksOriginateLocally={false}
+      />
+      <WinampButton
+        id="next"
+        onClick={next}
+        title="Next Track"
+        requireClicksOriginateLocally={false}
+      />
     </div>
   );
 });
diff --git a/packages/webamp/js/components/MainWindow/Eject.tsx b/packages/webamp/js/components/MainWindow/Eject.tsx
index 99b96ff3e9..e2aeb0dcd3 100644
--- a/packages/webamp/js/components/MainWindow/Eject.tsx
+++ b/packages/webamp/js/components/MainWindow/Eject.tsx
@@ -11,6 +11,7 @@ const Eject = memo(() => {
       id="eject"
       onClick={openMediaFileDialog}
       title="Open File(s)"
+      requireClicksOriginateLocally={false}
     />
   );
 });
diff --git a/packages/webamp/js/components/MainWindow/EqToggleButton.tsx b/packages/webamp/js/components/MainWindow/EqToggleButton.tsx
index a1e175fce2..b03d4e6baf 100644
--- a/packages/webamp/js/components/MainWindow/EqToggleButton.tsx
+++ b/packages/webamp/js/components/MainWindow/EqToggleButton.tsx
@@ -19,6 +19,7 @@ const EqToggleButton = memo(() => {
       className={classnames({ selected: windowOpen })}
       onClick={handleClick}
       title="Toggle Graphical Equalizer"
+      requireClicksOriginateLocally={false}
     />
   );
 });
diff --git a/packages/webamp/js/components/MainWindow/PlaylistToggleButton.tsx b/packages/webamp/js/components/MainWindow/PlaylistToggleButton.tsx
index d6fae6d86e..19ffb5250e 100644
--- a/packages/webamp/js/components/MainWindow/PlaylistToggleButton.tsx
+++ b/packages/webamp/js/components/MainWindow/PlaylistToggleButton.tsx
@@ -19,6 +19,7 @@ const PlaylistToggleButton = memo(() => {
       className={classnames({ selected })}
       onClick={handleClick}
       title="Toggle Playlist Editor"
+      requireClicksOriginateLocally={false}
     />
   );
 });
diff --git a/packages/webamp/js/components/MainWindow/Repeat.tsx b/packages/webamp/js/components/MainWindow/Repeat.tsx
index 624349c22b..8aee88eaf7 100644
--- a/packages/webamp/js/components/MainWindow/Repeat.tsx
+++ b/packages/webamp/js/components/MainWindow/Repeat.tsx
@@ -26,6 +26,7 @@ const Repeat = memo(() => {
         className={classnames({ selected: repeat })}
         onClick={handleClick}
         title="Toggle Repeat"
+        requireClicksOriginateLocally={false}
       />
     </ContextMenuWraper>
   );
diff --git a/packages/webamp/js/components/MainWindow/Shuffle.tsx b/packages/webamp/js/components/MainWindow/Shuffle.tsx
index bca809b29f..10db2620e0 100644
--- a/packages/webamp/js/components/MainWindow/Shuffle.tsx
+++ b/packages/webamp/js/components/MainWindow/Shuffle.tsx
@@ -26,6 +26,7 @@ const Shuffle = memo(() => {
         className={classnames({ selected: shuffle })}
         onClick={handleClick}
         title="Toggle Shuffle"
+        requireClicksOriginateLocally={false}
       />
     </ContextMenuWrapper>
   );
diff --git a/packages/webamp/js/components/WinampButton.tsx b/packages/webamp/js/components/WinampButton.tsx
index 8fea9e0fda..3f05624488 100644
--- a/packages/webamp/js/components/WinampButton.tsx
+++ b/packages/webamp/js/components/WinampButton.tsx
@@ -20,7 +20,7 @@ type Props = DetailedHTMLPropsAndMore;
 /**
  * Renders a `div` with an `.winamp-active` class if the element is being clicked/tapped.
  *
- * For now this mimicks the behavior of `:active`, but in the future we will use
+ * For now this mimics the behavior of `:active`, but in the future we will use
  * this component to mimic Winamp's behavior, which is quite different than
  * `:active`.
  *
@@ -35,6 +35,7 @@ type Props = DetailedHTMLPropsAndMore;
 export default function WinampButton({
   requireClicksOriginateLocally = true,
   onPointerDown: originalOnPointerDown,
+  onClick: originalOnClick,
   className,
   ...htmlProps
 }: Props): JSX.Element {
@@ -87,6 +88,12 @@ export default function WinampButton({
     }
   };
 
+  const onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.buttons === 1) {
+      setActive(false);
+    }
+  };
+
   return (
     <div
       {...htmlProps}
@@ -95,6 +102,17 @@ export default function WinampButton({
       onPointerEnter={
         requireClicksOriginateLocally ? undefined : onPointerEnter
       }
+      onMouseUp={(e) => {
+        if (originalOnClick != null) {
+          originalOnClick(e);
+        }
+        if (htmlProps.onMouseUp != null) {
+          htmlProps.onMouseUp(e);
+        }
+      }}
+      onPointerLeave={
+        requireClicksOriginateLocally ? undefined : onPointerLeave
+      }
     />
   );
 }

From aa05c407948695fcf2c0af14e38755080d130a7b Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 21 Jul 2025 20:21:31 -0700
Subject: [PATCH 2/3] Try to get onClick working on mobile

---
 packages/webamp/js/components/WinampButton.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/webamp/js/components/WinampButton.tsx b/packages/webamp/js/components/WinampButton.tsx
index 3f05624488..7a8dc2a155 100644
--- a/packages/webamp/js/components/WinampButton.tsx
+++ b/packages/webamp/js/components/WinampButton.tsx
@@ -102,6 +102,14 @@ export default function WinampButton({
       onPointerEnter={
         requireClicksOriginateLocally ? undefined : onPointerEnter
       }
+      onPointerUp={(e) => {
+        if (originalOnClick != null) {
+          originalOnClick(e);
+        }
+        if (htmlProps.onPointerUp != null) {
+          htmlProps.onPointerUp(e);
+        }
+      }}
       onMouseUp={(e) => {
         if (originalOnClick != null) {
           originalOnClick(e);

From 18c349054e48fcec9f44876032c44bfd3c240830 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 21 Jul 2025 20:39:59 -0700
Subject: [PATCH 3/3] Clear button selection when pointer leaves

---
 packages/webamp/js/components/WinampButton.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/webamp/js/components/WinampButton.tsx b/packages/webamp/js/components/WinampButton.tsx
index 7a8dc2a155..7ce5b640f0 100644
--- a/packages/webamp/js/components/WinampButton.tsx
+++ b/packages/webamp/js/components/WinampButton.tsx
@@ -89,9 +89,7 @@ export default function WinampButton({
   };
 
   const onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
-    if (e.buttons === 1) {
-      setActive(false);
-    }
+    setActive(false);
   };
 
   return (