Mouse drag (with momentum)

Author: stronk-dev

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stronk-tech/react-librespot-controller",
   "description": "`go-librespot` squeezebox-alike web frontend for small touchscreens",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "files": [

src/components/Album/AlbumCard.css

@@ -143,6 +143,7 @@
   position: relative;
   z-index: 7;
   transition: all 0.3s ease;
+  pointer-events: none;
 }
 
 .spotify-player-album-card-title-container {

src/components/Info/Playlists.css

@@ -98,6 +98,7 @@
   width: 50px;
   height: 50px;
   border-radius: 0.5em;
+  pointer-events: none;
 }
 
 .spotify-player-playlist-info {

src/components/Info/Playlists.js

@@ -8,6 +8,15 @@ const Playlists = ({ playlists, onSelect, onPlay }) => {
   const [arrowVisible, setArrowVisible] = useState(true);
   const [arrowOffset, setArrowOffset] = useState(0);
   const wrapperRef = useRef(null);
+  const scrollState = useRef({
+    isDown: false,
+    startX: 0,
+    scrollLeft: 0,
+    lastX: 0,
+    lastTime: 0,
+    velocity: 0,
+    animationFrame: null
+  });
 
   const handleSelect = (playlist) => {
     setActivePlaylist(playlist.id);
@@ -22,14 +31,103 @@ const Playlists = ({ playlists, onSelect, onPlay }) => {
     setArrowOffset(scrollLeft);
   };
 
+  const animateScroll = () => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    // Apply friction
+    scrollState.current.velocity *= 0.95;
+
+    // Stop if velocity is very small
+    if (Math.abs(scrollState.current.velocity) < 0.1) {
+      scrollState.current.velocity = 0;
+      return;
+    }
+
+    // Update scroll position
+    wrapper.scrollLeft -= scrollState.current.velocity;
+
+    // Bounce at boundaries
+    if (wrapper.scrollLeft <= 0) {
+      wrapper.scrollLeft = 0;
+      scrollState.current.velocity = 0;
+    } else if (wrapper.scrollLeft >= wrapper.scrollWidth - wrapper.clientWidth) {
+      wrapper.scrollLeft = wrapper.scrollWidth - wrapper.clientWidth;
+      scrollState.current.velocity = 0;
+    }
+
+    scrollState.current.animationFrame = requestAnimationFrame(animateScroll);
+  };
+
   useEffect(() => {
     const wrapper = wrapperRef.current;
     if (!wrapper) return;
 
+    const handleMouseDown = (e) => {
+      scrollState.current.isDown = true;
+      scrollState.current.startX = e.pageX - wrapper.offsetLeft;
+      scrollState.current.scrollLeft = wrapper.scrollLeft;
+      scrollState.current.lastX = e.pageX;
+      scrollState.current.lastTime = performance.now();
+      scrollState.current.velocity = 0;
+      
+      if (scrollState.current.animationFrame) {
+        cancelAnimationFrame(scrollState.current.animationFrame);
+      }
+      
+      wrapper.style.cursor = 'grabbing';
+    };
+
+    const handleMouseLeave = () => {
+      scrollState.current.isDown = false;
+      wrapper.style.cursor = 'grab';
+      animateScroll();
+    };
+
+    const handleMouseUp = () => {
+      scrollState.current.isDown = false;
+      wrapper.style.cursor = 'grab';
+      animateScroll();
+    };
+
+    const handleMouseMove = (e) => {
+      if (!scrollState.current.isDown) return;
+      e.preventDefault();
+      
+      const now = performance.now();
+      const deltaTime = now - scrollState.current.lastTime;
+      const deltaX = e.pageX - scrollState.current.lastX;
+      
+      // Calculate velocity (pixels per frame)
+      scrollState.current.velocity = deltaX;
+      
+      const x = e.pageX - wrapper.offsetLeft;
+      const walkX = x - scrollState.current.startX;
+      wrapper.scrollLeft = scrollState.current.scrollLeft - walkX;
+      
+      scrollState.current.lastX = e.pageX;
+      scrollState.current.lastTime = now;
+    };
+
+    wrapper.addEventListener('mousedown', handleMouseDown);
+    wrapper.addEventListener('mouseleave', handleMouseLeave);
+    wrapper.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
     wrapper.addEventListener("scroll", handleScroll);
+
+    wrapper.style.cursor = 'grab';
     handleScroll(); // Initialize visibility on mount
 
-    return () => wrapper.removeEventListener("scroll", handleScroll);
+    return () => {
+      wrapper.removeEventListener('mousedown', handleMouseDown);
+      wrapper.removeEventListener('mouseleave', handleMouseLeave);
+      wrapper.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+      wrapper.removeEventListener("scroll", handleScroll);
+      if (scrollState.current.animationFrame) {
+        cancelAnimationFrame(scrollState.current.animationFrame);
+      }
+    };
   }, []);
 
   return (