move away from unmaintained react-hammerjs

package.json

@@ -75,7 +75,6 @@
     "pify": "^5.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hammerjs": "^1.0.1",
     "react-i18next": "^11.3.3",
     "react-icons": "^4.1.0",
     "react-lottie-player": "^1.3.3",

src/Timeline.jsx

@@ -1,6 +1,5 @@
 import React, { memo, useRef, useMemo, useCallback, useEffect, useState } from 'react';
 import { motion, useMotionValue, useSpring } from 'framer-motion';
-import Hammer from 'react-hammerjs';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'react-i18next';
 import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
@@ -17,8 +16,6 @@ import { getSegColor } from './util/colors';
 
 const currentTimeWidth = 1;
 
-const hammerOptions = { recognizers: {} };
-
 const Waveform = memo(({ waveform, calculateTimelinePercent, durationSafe }) => {
   const [style, setStyle] = useState({ display: 'none' });
 
@@ -193,14 +190,26 @@ const Timeline = memo(({
   }, [durationSafe]);
 
   const handleTap = useCallback((e) => {
-    seekAbs((getMouseTimelinePos(e.srcEvent)));
+    if (e.nativeEvent.buttons === 1) { // primary button
+      seekAbs((getMouseTimelinePos(e.nativeEvent)));
+    }
   }, [seekAbs, getMouseTimelinePos]);
 
   useEffect(() => {
     setHoveringTime();
   }, [playerTime, commandedTime]);
 
-  const onMouseMove = useCallback((e) => setHoveringTime(getMouseTimelinePos(e.nativeEvent)), [getMouseTimelinePos]);
+  const onMouseMove = useCallback((e) => {
+    // eslint-disable-next-line no-bitwise
+    // const isButtonPressed = (index) => ((e.nativeEvent.buttons >> index) & 1);
+    if (e.nativeEvent.buttons === 0) { // no button pressed
+      setHoveringTime(getMouseTimelinePos(e.nativeEvent));
+      e.preventDefault();
+    } else if (e.nativeEvent.buttons === 1) { // primary button
+      handleTap(e);
+      e.preventDefault();
+    }
+  }, [getMouseTimelinePos, handleTap]);
   const onMouseOut = useCallback(() => setHoveringTime(), []);
 
   const contextMenuTemplate = useMemo(() => [
@@ -210,15 +219,13 @@ const Timeline = memo(({
   useContextMenu(timelineScrollerRef, contextMenuTemplate);
 
   return (
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/mouse-events-have-key-events
-    <Hammer
+    <div
-      onTap={handleTap}
+      style={{ position: 'relative' }}
-      onPan={handleTap}
+      onMouseDown={handleTap}
       onMouseMove={onMouseMove}
       onMouseOut={onMouseOut}
-      options={hammerOptions}
     >
-      <div style={{ position: 'relative' }}>
       <div
         style={{ overflowX: 'scroll' }}
         className="hide-scrollbar"
@@ -314,7 +321,6 @@ const Timeline = memo(({
         </div>
       </div>
     </div>
-    </Hammer>
   );
 });
 

yarn.lock

@@ -10610,7 +10610,6 @@ __metadata:
     pify: ^5.0.0
     react: ^17.0.2
     react-dom: ^17.0.2
-    react-hammerjs: ^1.0.1
     react-i18next: ^11.3.3
     react-icons: ^4.1.0
     react-lottie-player: ^1.3.3
@@ -13274,17 +13273,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hammerjs@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "react-hammerjs@npm:1.0.1"
-  dependencies:
-    hammerjs: ^2.0.8
-  peerDependencies:
-    react: ^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0
-  checksum: 0196e2ac08d0d4d81d1dfeddd9d871f2162d1f0b8ea1a95ff81cec0dbb6323e45043606f4b65a5ee7063332d1d74cf7e00140d50530205329aa885f4b0bf2997
-  languageName: node
-  linkType: hard
-
 "react-i18next@npm:^11.3.3":
   version: 11.15.3
   resolution: "react-i18next@npm:11.15.3"