Normalize on pointer events since they should work for both mobile an…

…d desktop
captbaritone · Apr 21, 2024 · 5ae2528 · 5ae2528
1 parent 0b4d697
commit 5ae2528
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 28 deletions.
diff --git a/packages/webamp/js/components/Balance.tsx b/packages/webamp/js/components/Balance.tsx
@@ -26,8 +26,8 @@ export default function Balance({ style, className, id }: Props) {
       value={balance}
       style={{ ...style, touchAction: "none" }}
       onChange={(e) => setBalance(Number(e.target.value))}
-      onMouseDown={() => setFocus("balance")}
-      onMouseUp={unsetFocus}
+      onPointerDown={() => setFocus("balance")}
+      onPointerUp={unsetFocus}
       title="Balance"
     />
   );

diff --git a/packages/webamp/js/components/FocusTarget.tsx b/packages/webamp/js/components/FocusTarget.tsx
@@ -68,8 +68,7 @@ function FocusTarget({ onKeyDown, windowId, children }: Props) {
   return (
     <div
       ref={setRef}
-      onMouseDown={focusHandler}
-      onTouchStart={focusHandler}
+      onPointerDown={focusHandler}
       onFocus={focusHandler}
       tabIndex={-1}
       style={{ height: "100%", width: "100%" }}

diff --git a/packages/webamp/js/components/MainWindow/ClutterBar.tsx b/packages/webamp/js/components/MainWindow/ClutterBar.tsx
@@ -34,8 +34,8 @@ const ClutterBar = memo(() => {
         title={"Toggle Doublesize Mode"}
         id="button-d"
         className={classnames({ selected: doubled })}
-        onMouseUp={handleMouseUp}
-        onMouseDown={handleMouseDown}
+        onPointerUp={handleMouseUp}
+        onPointerDown={handleMouseDown}
       />
       <div id="button-v" />
     </div>

diff --git a/packages/webamp/js/components/MainWindow/Marquee.tsx b/packages/webamp/js/components/MainWindow/Marquee.tsx
@@ -137,8 +137,7 @@ const Marquee = React.memo(() => {
     <div
       id="marquee"
       className="text"
-      onMouseDown={handleMouseDown}
-      onTouchStart={handleMouseDown}
+      onPointerDown={handleMouseDown}
       title="Song Title"
     >
       <div

diff --git a/packages/webamp/js/components/MainWindow/Position.tsx b/packages/webamp/js/components/MainWindow/Position.tsx
@@ -71,8 +71,8 @@ const Position = memo(() => {
       onChange={
         () => {} /* React complains without this, can probably rename onInput to onChange */
       }
-      onMouseUp={seekToPercentComplete}
-      onMouseDown={setPosition}
+      onPointerUp={seekToPercentComplete}
+      onPointerDown={setPosition}
       title="Seeking Bar"
     />
   );

diff --git a/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx b/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx
@@ -53,7 +53,7 @@ function PlaylistShade() {
         selected: focused === WINDOWS.PLAYLIST,
       })}
       style={{ width: `${WINDOW_WIDTH + addedWidth}px` }}
-      onMouseDown={() => focusWindow("playlist")}
+      onPointerDown={() => focusWindow("playlist")}
       onDoubleClick={toggleShade}
     >
       <div className="left">

diff --git a/packages/webamp/js/components/ResizeTarget.tsx b/packages/webamp/js/components/ResizeTarget.tsx
@@ -70,12 +70,6 @@ function ResizeTarget(props: Props) {
     setMouseDown(true);
   };
 
-  return (
-    <div
-      onMouseDown={handleMouseDown}
-      onTouchStart={handleMouseDown}
-      {...passThroughProps}
-    />
-  );
+  return <div onPointerDown={handleMouseDown} {...passThroughProps} />;
 }
 export default memo(ResizeTarget);
diff --git a/packages/webamp/js/components/Volume.tsx b/packages/webamp/js/components/Volume.tsx
@@ -26,12 +26,8 @@ export default function Volume({ id, style, className }: Props) {
       style={{ ...style, touchAction: "none" }}
       className={className}
       onChange={(e) => setVolume(Number(e.target.value))}
-      onMouseDown={() => setFocus("volume")}
-      onTouchStart={() => {
-        setFocus("volume");
-      }}
-      onMouseUp={unsetFocus}
-      onTouchEnd={unsetFocus}
+      onPointerDown={() => setFocus("volume")}
+      onPointerUp={unsetFocus}
       title="Volume Bar"
     />
   );

diff --git a/packages/webamp/js/components/WindowManager.tsx b/packages/webamp/js/components/WindowManager.tsx
@@ -177,10 +177,7 @@ export default function WindowManager({ windows: propsWindows }: Props) {
         <div
           key={w.key}
           onBlur={onBlur}
-          onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
-            handleMouseDown(w.key, e);
-          }}
-          onTouchStart={(e: React.TouchEvent<HTMLDivElement>) => {
+          onPointerDown={(e: React.MouseEvent<HTMLDivElement>) => {
             handleMouseDown(w.key, e);
           }}
           style={{