Use pointer type to toggle scroll buttons instead of only touch

Author: Shadowghost

src/elements/emby-scroller/Scroller.tsx

@@ -1,6 +1,8 @@
 import React, { type FC, type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import useElementSize from 'hooks/useElementSize';
+import { FINE_POINTER_MEDIA_QUERY } from 'utils/pointer';
 import layoutManager from '../../components/layoutManager';
 import dom from '../../utils/dom';
 import browser from '../../scripts/browser';
@@ -34,6 +36,7 @@ const Scroller: FC<PropsWithChildren<ScrollerProps>> = ({
     children
 }) => {
     const [scrollRef, size] = useElementSize();
+    const hasFinePointer = useMediaQuery(FINE_POINTER_MEDIA_QUERY);
 
     const [showControls, setShowControls] = useState(false);
     const [scrollState, setScrollState] = useState({
@@ -158,7 +161,7 @@ const Scroller: FC<PropsWithChildren<ScrollerProps>> = ({
             return;
         }
 
-        const enableScrollButtons = layoutManager.desktop && !browser.touch && isHorizontalEnabled && isScrollButtonsEnabled;
+        const enableScrollButtons = layoutManager.desktop && hasFinePointer && isHorizontalEnabled && isScrollButtonsEnabled;
 
         const options = {
             horizontal: isHorizontalEnabled,
@@ -195,9 +198,10 @@ const Scroller: FC<PropsWithChildren<ScrollerProps>> = ({
                 capture: false,
                 passive: true
             });
-            setShowControls(true);
         }
 
+        setShowControls(enableScrollButtons);
+
         return () => {
             if (scrollerFactoryRef.current) {
                 scrollerFactoryRef.current.destroy();
@@ -211,6 +215,7 @@ const Scroller: FC<PropsWithChildren<ScrollerProps>> = ({
         };
     }, [
         addScrollEventListener,
+        hasFinePointer,
         initCenterFocus,
         isAllowNativeSmoothScrollEnabled,
         isCenterFocusEnabled,

src/elements/emby-scroller/emby-scroller.js

@@ -4,6 +4,7 @@ import layoutManager from '../../components/layoutManager';
 import inputManager from '../../scripts/inputManager';
 import focusManager from '../../components/focusManager';
 import browser from '../../scripts/browser';
+import { hasFinePointer } from '../../utils/pointer';
 import 'webcomponents.js/webcomponents-lite';
 import './emby-scroller.scss';
 
@@ -116,7 +117,7 @@ ScrollerPrototype.attachedCallback = function () {
     }
 
     const scrollFrame = this;
-    const enableScrollButtons = layoutManager.desktop && !browser.touch && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
+    const enableScrollButtons = layoutManager.desktop && hasFinePointer() && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
 
     const options = {
         horizontal: horizontal,

src/utils/pointer.ts

@@ -0,0 +1,9 @@
+/**
+ * Matches when the primary pointing device is precise (mouse/trackpad).
+ * Touch-first devices report a "coarse" primary pointer even when a pointer
+ * device is attached, making this a better signal than touch capability for
+ * mouse-only affordances.
+ */
+export const FINE_POINTER_MEDIA_QUERY = '(pointer: fine)';
+
+export const hasFinePointer = () => window.matchMedia(FINE_POINTER_MEDIA_QUERY).matches;