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 + } /> ); }