diff --git a/packages/webamp/js/components/ClickedDiv.tsx b/packages/webamp/js/components/ClickedDiv.tsx
index 58c8b8190..f0f5c5612 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 d29d248df..0be7af3e2 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 (
-
-
-
-
-
+
+
+
+
+
);
});
diff --git a/packages/webamp/js/components/MainWindow/Eject.tsx b/packages/webamp/js/components/MainWindow/Eject.tsx
index 99b96ff3e..e2aeb0dcd 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 a1e175fce..b03d4e6ba 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 d6fae6d86..19ffb5250 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 624349c22..8aee88eaf 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}
/>
);
diff --git a/packages/webamp/js/components/MainWindow/Shuffle.tsx b/packages/webamp/js/components/MainWindow/Shuffle.tsx
index bca809b29..10db2620e 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}
/>
);
diff --git a/packages/webamp/js/components/WinampButton.tsx b/packages/webamp/js/components/WinampButton.tsx
index 8fea9e0fd..7ce5b640f 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,10 @@ export default function WinampButton({
}
};
+ const onPointerLeave = (e: React.PointerEvent) => {
+ setActive(false);
+ };
+
return (
{
+ if (originalOnClick != null) {
+ originalOnClick(e);
+ }
+ if (htmlProps.onPointerUp != null) {
+ htmlProps.onPointerUp(e);
+ }
+ }}
+ onMouseUp={(e) => {
+ if (originalOnClick != null) {
+ originalOnClick(e);
+ }
+ if (htmlProps.onMouseUp != null) {
+ htmlProps.onMouseUp(e);
+ }
+ }}
+ onPointerLeave={
+ requireClicksOriginateLocally ? undefined : onPointerLeave
+ }
/>
);
}