Normalize on pointer events since they should work for both mobile and desktop (#1253)

* Normalize on pointer events since they should work for both mobile and desktop

* Try making version number explicit

* Set node version for skin museum Netlify deploy

* Revert some changes that depended upon touch events

* Prevent highlighting text when tapping double size mode button

Author: captbaritone

netlify.toml

@@ -36,4 +36,4 @@ status = 301
 force = true
 
 [build.environment]
-NODE_VERSION = "20"
+NODE_VERSION = "20.9.0"

packages/skin-museum-client/netlify.toml

@@ -6,36 +6,35 @@ ID = "be420a16-4ef3-43b1-ac62-35869bdf8679"
 # Settings in the [build] context are global and are applied to all contexts 
 # unless otherwise overridden by more specific contexts.  
 [build]
-  # Directory (relative to root of your repo) that contains the deploy-ready 
-  # HTML files and assets generated by the build.
-  publish = "build/"
+# Directory (relative to root of your repo) that contains the deploy-ready 
+# HTML files and assets generated by the build.
+publish = "build/"
 
-  # Default build command.
-  command = "yarn build"
-  ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../webamp/"
+# Default build command.
+command = "yarn build"
+ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../webamp/"
 [build.environment]
-  NODE_VERSION = "16.17.1"
-  NETLIFY_USE_YARN = "true"
-
+NODE_VERSION = "20"
+NETLIFY_USE_YARN = "true"
 
 
 [[redirects]]
-  from = "/sitemap*"
-  to = "https://api.webampskins.org/sitemap:splat"
-  status = 200
+from = "/sitemap*"
+to = "https://api.webampskins.org/sitemap:splat"
+status = 200
 
 [[redirects]]
- from = "/"
- query = {query = ":query"}
- to = "https://winamp-skin-museum.jordan1320.workers.dev//"
- status = 200
+from = "/"
+query = { query = ":query" }
+to = "https://winamp-skin-museum.jordan1320.workers.dev//"
+status = 200
 
 [[redirects]]
- from = "/skin/*"
- to = "https://winamp-skin-museum.jordan1320.workers.dev//skin/:splat"
- status = 200
+from = "/skin/*"
+to = "https://winamp-skin-museum.jordan1320.workers.dev//skin/:splat"
+status = 200
 
 [[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
+from = "/*"
+to = "/index.html"
+status = 200

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

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%" }}

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

@@ -34,8 +34,11 @@ const ClutterBar = memo(() => {
         title={"Toggle Doublesize Mode"}
         id="button-d"
         className={classnames({ selected: doubled })}
-        onMouseUp={handleMouseUp}
-        onMouseDown={handleMouseDown}
+        onPointerUp={handleMouseUp}
+        onPointerDown={(e) => {
+          e.preventDefault();
+          handleMouseDown();
+        }}
       />
       <div id="button-v" />
     </div>

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

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

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">

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