Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-23 15:30:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): passive events (#19179)

Browse Source
This commit is contained in:
Mert 2025-06-16 11:03:23 -04:00 committed by GitHub
parent 3d0c851636
commit 5fc448bc97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 68 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte
View File

@ -53,12 +53,10 @@
img.src = getAssetOriginalUrl({ id: asset.id, cacheKey: asset.thumbhash });
img.addEventListener('load', () => onImageLoad(true));
img.addEventListener('error', (error) => {
handleError(error, $t('error_loading_image'));
});
img.addEventListener('load', () => onImageLoad(true), { passive: true });
img.addEventListener('error', (error) => handleError(error, $t('error_loading_image')), { passive: true });
globalThis.addEventListener('mousemove', handleMouseMove);
globalThis.addEventListener('mousemove', handleMouseMove, { passive: true });
});
onDestroy(() => {

4
web/src/lib/components/asset-viewer/editor/crop-tool/image-loading.ts
View File

@ -31,8 +31,8 @@ export function onImageLoad(resetSize: boolean = false) {
cropFrameEl?.classList.add('transition');
cropSettings.update((crop) => normalizeCropArea(crop, img, scale));
cropFrameEl?.classList.add('transition');
cropFrameEl?.addEventListener('transitionend', () => {
cropFrameEl?.classList.remove('transition');
cropFrameEl?.addEventListener('transitionend', () => cropFrameEl?.classList.remove('transition'), {
passive: true,
});
}
cropImageScale.set(scale);

2
web/src/lib/components/asset-viewer/editor/crop-tool/mouse-handlers.ts
View File

@ -58,7 +58,7 @@ export function handleMouseDown(e: MouseEvent) {
}
document.body.style.userSelect = 'none';
globalThis.addEventListener('mouseup', handleMouseUp);
globalThis.addEventListener('mouseup', handleMouseUp, { passive: true });
}
export function handleMouseMove(e: MouseEvent) {

24
web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
View File

@ -7,9 +7,9 @@
type AdapterConstructor,
type PluginConstructor,
} from '@photo-sphere-viewer/core';
import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';
import { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
import '@photo-sphere-viewer/core/index.css';
import { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';
import '@photo-sphere-viewer/settings-plugin/index.css';
import { onDestroy, onMount } from 'svelte';
@ -68,18 +68,20 @@
fisheye: false,
});
const resolutionPlugin = viewer.getPlugin(ResolutionPlugin) as ResolutionPlugin;
const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
// zoomLevel range: [0, 100]
if (Math.round(zoomLevel) >= 75) {
// Replace the preview with the original
void resolutionPlugin.setResolution('original');
viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
}
};
if (originalPanorama && !$alwaysLoadOriginalFile) {
const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
// zoomLevel range: [0, 100]
if (Math.round(zoomLevel) >= 75) {
// Replace the preview with the original
void resolutionPlugin.setResolution('original');
viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
}
};
viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler, { passive: true });
}
return () => viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
});
onDestroy(() => {

4
web/src/lib/components/asset-viewer/photo-viewer.svelte
View File

@ -193,8 +193,8 @@
if (loader?.complete) {
onload();
}
loader?.addEventListener('load', onload);
loader?.addEventListener('error', onerror);
loader?.addEventListener('load', onload, { passive: true });
loader?.addEventListener('error', onerror, { passive: true });
return () => {
loader?.removeEventListener('load', onload);
loader?.removeEventListener('error', onerror);

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

@ -123,17 +123,21 @@
mouseOver = false;
};
let timer: ReturnType<typeof setTimeout>;
let timer: ReturnType<typeof setTimeout> | null = null;
const preventContextMenu = (evt: Event) => evt.preventDefault();
let disposeables: (() => void)[] = [];
const disposeables: (() => void)[] = [];
const clearLongPressTimer = () => {
if (!timer) {
return;
}
clearTimeout(timer);
timer = null;
for (const dispose of disposeables) {
dispose();
}
disposeables = [];
disposeables.length = 0;
};
let startX: number = 0;
@ -162,7 +166,7 @@
};
element.addEventListener('click', click);
element.addEventListener('pointerdown', start, true);
element.addEventListener('pointerup', clearLongPressTimer, true);
element.addEventListener('pointerup', clearLongPressTimer, { capture: true, passive: true });
return {
destroy: () => {
element.removeEventListener('click', click);
@ -172,17 +176,15 @@
};
}
function moveHandler(e: PointerEvent) {
var diffX = Math.abs(startX - e.clientX);
var diffY = Math.abs(startY - e.clientY);
if (diffX >= 10 || diffY >= 10) {
if (Math.abs(startX - e.clientX) >= 10 || Math.abs(startY - e.clientY) >= 10) {
clearLongPressTimer();
}
}
onMount(() => {
document.addEventListener('scroll', clearLongPressTimer, true);
document.addEventListener('wheel', clearLongPressTimer, true);
document.addEventListener('contextmenu', clearLongPressTimer, true);
document.addEventListener('pointermove', moveHandler, true);
document.addEventListener('scroll', clearLongPressTimer, { capture: true, passive: true });
document.addEventListener('wheel', clearLongPressTimer, { capture: true, passive: true });
document.addEventListener('contextmenu', clearLongPressTimer, { capture: true, passive: true });
document.addEventListener('pointermove', moveHandler, { capture: true, passive: true });
return () => {
document.removeEventListener('scroll', clearLongPressTimer, true);
document.removeEventListener('wheel', clearLongPressTimer, true);

6
web/src/lib/components/shared-components/combobox.svelte
View File

@ -105,9 +105,9 @@
}
observer.observe(input);
const scrollableAncestor = input?.closest('.overflow-y-auto, .overflow-y-scroll');
scrollableAncestor?.addEventListener('scroll', onPositionChange);
window.visualViewport?.addEventListener('resize', onPositionChange);
window.visualViewport?.addEventListener('scroll', onPositionChange);
scrollableAncestor?.addEventListener('scroll', onPositionChange, { passive: true });
window.visualViewport?.addEventListener('resize', onPositionChange, { passive: true });
window.visualViewport?.addEventListener('scroll', onPositionChange, { passive: true });
return () => {
observer.disconnect();

2
web/src/lib/components/shared-components/control-app-bar.svelte
View File

@ -53,7 +53,7 @@
onMount(() => {
if (browser) {
document.addEventListener('scroll', onScroll);
document.addEventListener('scroll', onScroll, { passive: true });
}
});

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

@ -357,18 +357,18 @@
};
/* eslint-enable tscompat/tscompat */
onMount(() => {
document.addEventListener('touchmove', onTouchMove, true);
document.addEventListener('touchmove', onTouchMove, { capture: true, passive: true });
return () => {
document.removeEventListener('touchmove', onTouchMove);
document.removeEventListener('touchmove', onTouchMove, true);
};
});
onMount(() => {
document.addEventListener('touchstart', onTouchStart, true);
document.addEventListener('touchend', onTouchEnd, true);
document.addEventListener('touchstart', onTouchStart, { capture: true, passive: true });
document.addEventListener('touchend', onTouchEnd, { capture: true, passive: true });
return () => {
document.addEventListener('touchstart', onTouchStart, true);
document.addEventListener('touchend', onTouchEnd, true);
document.removeEventListener('touchstart', onTouchStart, true);
document.removeEventListener('touchend', onTouchEnd, true);
};
});

14
web/src/lib/managers/theme-manager.svelte.ts
View File

@ -52,11 +52,15 @@ class ThemeManager {
}
#onAppInit() {
globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (this.theme.system) {
this.#update('system');
}
});
globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener(
'change',
() => {
if (this.theme.system) {
this.#update('system');
}
},
{ passive: true },
);
}
#update(value: Theme | 'system') {

20
web/src/lib/utils/file-uploader.ts
View File

@ -67,15 +67,19 @@ export const openFileUploadDialog = async (options: FileUploadParam = {}) => {
fileSelector.type = 'file';
fileSelector.multiple = multiple;
fileSelector.accept = extensions.join(',');
fileSelector.addEventListener('change', (e: Event) => {
const target = e.target as HTMLInputElement;
if (!target.files) {
return;
}
const files = Array.from(target.files);
fileSelector.addEventListener(
'change',
(e: Event) => {
const target = e.target as HTMLInputElement;
if (!target.files) {
return;
}
const files = Array.from(target.files);
resolve(fileUploadHandler({ files, albumId, replaceAssetId: assetId }));
});
resolve(fileUploadHandler({ files, albumId, replaceAssetId: assetId }));
},
{ passive: true },
);
fileSelector.click();
} catch (error) {

6
web/src/service-worker/index.ts
View File

@ -20,7 +20,7 @@ const handleInstall = (event: ExtendableEvent) => {
event.waitUntil(addFilesToCache());
};
sw.addEventListener('install', handleInstall);
sw.addEventListener('activate', handleActivate);
sw.addEventListener('fetch', handleFetchEvent);
sw.addEventListener('install', handleInstall, { passive: true });
sw.addEventListener('activate', handleActivate, { passive: true });
sw.addEventListener('fetch', handleFetchEvent, { passive: true });
installBroadcastChannelListener();