Merge 18c349054e into 2fe3235d51

packages/webamp/js/components/ClickedDiv.tsx

@@ -26,6 +26,7 @@ function ClickedDiv(props: Props) {
       {...props}
       className={classnames(props.className, { clicked })}
       onPointerDown={handlePointerDown}
+      requireClicksOriginateLocally={false}
     />
   );
 }

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

packages/webamp/js/components/MainWindow/Eject.tsx

@@ -11,6 +11,7 @@ const Eject = memo(() => {
       id="eject"
       onClick={openMediaFileDialog}
       title="Open File(s)"
+      requireClicksOriginateLocally={false}
     />
   );
 });

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

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

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>
   );

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>
   );

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<HTMLDivElement>) => {
+    setActive(false);
+  };
+
   return (
     <div
       {...htmlProps}
@@ -95,6 +100,25 @@ 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);
+        }
+        if (htmlProps.onMouseUp != null) {
+          htmlProps.onMouseUp(e);
+        }
+      }}
+      onPointerLeave={
+        requireClicksOriginateLocally ? undefined : onPointerLeave
+      }
     />
   );
 }