From 6341962de473514cb481a84c07754f66196cfdf0 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 27 Mar 2025 10:43:56 -0500
Subject: [PATCH] fix(web): better touch device detection (#17144)

* fix(web): better touch device detection

* variable name
---
 web/src/lib/components/assets/thumbnail/thumbnail.svelte  | 8 ++++----
 web/src/lib/components/photos-page/asset-grid.svelte      | 2 +-
 .../components/shared-components/scrubber/scrubber.svelte | 2 +-
 web/src/lib/stores/mobile-device.svelte.ts                | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 077eb465a2..0dbbe718ee 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -72,7 +72,7 @@
     IMAGE_THUMBNAIL: { THUMBHASH_FADE_DURATION },
   } = TUNABLES;
 
-  let isTouchDevice = $derived(mobileDevice.hoverNone);
+  let usingMobileDevice = $derived(mobileDevice.pointerCoarse);
   let focussableElement: HTMLElement | undefined = $state();
   let mouseOver = $state(false);
   let loaded = $state(false);
@@ -112,7 +112,7 @@
   };
 
   const onMouseEnter = () => {
-    if (isTouchDevice) {
+    if (usingMobileDevice) {
       return;
     }
     mouseOver = true;
@@ -191,7 +191,7 @@
     onfocus={handleFocus}
     data-testid="container-with-tabindex"
   >
-    {#if !isTouchDevice && mouseOver && !disableMouseOver}
+    {#if !usingMobileDevice && mouseOver && !disableMouseOver}
       <!-- lazy show the url on mouse over-->
       <a
         class="absolute z-30 {className} top-[41px]"
@@ -238,7 +238,7 @@
       class:rounded-xl={selected}
     >
       <!-- Gradient overlay on hover -->
-      {#if !isTouchDevice}
+      {#if !usingMobileDevice}
         <div
           class="absolute z-10 h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100"
           class:rounded-xl={selected}
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index 0e9053a5ea..e458e36f38 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -83,7 +83,7 @@
   let bottomSectionHeight = 60;
   let leadout = $state(false);
 
-  const usingMobileDevice = $derived(mobileDevice.hoverNone);
+  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
 
   const scrollTo = (top: number) => {
     element?.scrollTo({ top });
diff --git a/web/src/lib/components/shared-components/scrubber/scrubber.svelte b/web/src/lib/components/shared-components/scrubber/scrubber.svelte
index 734b42205e..0fdfa9c0da 100644
--- a/web/src/lib/components/shared-components/scrubber/scrubber.svelte
+++ b/web/src/lib/components/shared-components/scrubber/scrubber.svelte
@@ -268,7 +268,7 @@
       globalThis.removeEventListener('touchmove', onTouchMove);
     };
   });
-  const usingMobileDevice = $derived(mobileDevice.hoverNone);
+  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
 </script>
 
 <svelte:window
diff --git a/web/src/lib/stores/mobile-device.svelte.ts b/web/src/lib/stores/mobile-device.svelte.ts
index 2d68c75d68..19fe28b452 100644
--- a/web/src/lib/stores/mobile-device.svelte.ts
+++ b/web/src/lib/stores/mobile-device.svelte.ts
@@ -1,11 +1,11 @@
 import { MediaQuery } from 'svelte/reactivity';
 
-const hoverNone = new MediaQuery('hover: none');
+const pointerCoarse = new MediaQuery('pointer:coarse');
 const maxMd = new MediaQuery('max-width: 767px');
 
 export const mobileDevice = {
-  get hoverNone() {
-    return hoverNone.current;
+  get pointerCoarse() {
+    return pointerCoarse.current;
   },
   get maxMd() {
     return maxMd.current;