Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-03 05:34:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): better touch device detection (#17144)

Browse Source 
* fix(web): better touch device detection

* variable name
This commit is contained in:
Alex 2025-03-27 10:43:56 -05:00 committed by GitHub
parent c26b28f6a4
commit 6341962de4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View File

@ -72,7 +72,7 @@
IMAGE_THUMBNAIL: { THUMBHASH_FADE_DURATION }, IMAGE_THUMBNAIL: { THUMBHASH_FADE_DURATION },
} = TUNABLES; } = TUNABLES;
let isTouchDevice = $derived(mobileDevice.hoverNone); let usingMobileDevice = $derived(mobileDevice.pointerCoarse);
let focussableElement: HTMLElement | undefined = $state(); let focussableElement: HTMLElement | undefined = $state();
let mouseOver = $state(false); let mouseOver = $state(false);
let loaded = $state(false); let loaded = $state(false);
@ -112,7 +112,7 @@
}; };
const onMouseEnter = () => { const onMouseEnter = () => {
if (isTouchDevice) { if (usingMobileDevice) {
return; return;
} }
mouseOver = true; mouseOver = true;
@ -191,7 +191,7 @@
onfocus={handleFocus} onfocus={handleFocus}
data-testid="container-with-tabindex" data-testid="container-with-tabindex"
> >
{#if !isTouchDevice && mouseOver && !disableMouseOver} {#if !usingMobileDevice && mouseOver && !disableMouseOver}
<!-- lazy show the url on mouse over--> <!-- lazy show the url on mouse over-->
<a <a
class="absolute z-30 {className} top-[41px]" class="absolute z-30 {className} top-[41px]"
@ -238,7 +238,7 @@
class:rounded-xl={selected} class:rounded-xl={selected}
> >
<!-- Gradient overlay on hover --> <!-- Gradient overlay on hover -->
{#if !isTouchDevice} {#if !usingMobileDevice}
<div <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="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} class:rounded-xl={selected}

2
web/src/lib/components/photos-page/asset-grid.svelte
View File

@ -83,7 +83,7 @@
let bottomSectionHeight = 60; let bottomSectionHeight = 60;
let leadout = $state(false); let leadout = $state(false);
const usingMobileDevice = $derived(mobileDevice.hoverNone); const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
const scrollTo = (top: number) => { const scrollTo = (top: number) => {
element?.scrollTo({ top }); element?.scrollTo({ top });

2
web/src/lib/components/shared-components/scrubber/scrubber.svelte
View File

@ -268,7 +268,7 @@
globalThis.removeEventListener('touchmove', onTouchMove); globalThis.removeEventListener('touchmove', onTouchMove);
}; };
}); });
const usingMobileDevice = $derived(mobileDevice.hoverNone); const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
</script> </script>
<svelte:window <svelte:window

6
web/src/lib/stores/mobile-device.svelte.ts
View File

@ -1,11 +1,11 @@
import { MediaQuery } from 'svelte/reactivity'; import { MediaQuery } from 'svelte/reactivity';
const hoverNone = new MediaQuery('hover: none'); const pointerCoarse = new MediaQuery('pointer:coarse');
const maxMd = new MediaQuery('max-width: 767px'); const maxMd = new MediaQuery('max-width: 767px');
export const mobileDevice = { export const mobileDevice = {
get hoverNone() { get pointerCoarse() {
return hoverNone.current; return pointerCoarse.current;
}, },
get maxMd() { get maxMd() {
return maxMd.current; return maxMd.current;