chore(web): passive events (#19179)

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

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

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

@@ -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?.addEventListener('transitionend', () => cropFrameEl?.classList.remove('transition'), {
-      cropFrameEl?.classList.remove('transition');
+      passive: true,
     });
   }
   cropImageScale.set(scale);

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

@@ -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) {

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

@@ -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) => {
+      viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler, { passive: true });
-        // 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);
     }
+
+    return () => viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
   });
 
   onDestroy(() => {

web/src/lib/components/asset-viewer/photo-viewer.svelte

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

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -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);
+    if (Math.abs(startX - e.clientX) >= 10 || Math.abs(startY - e.clientY) >= 10) {
-    var diffY = Math.abs(startY - e.clientY);
-    if (diffX >= 10 || diffY >= 10) {
       clearLongPressTimer();
     }
   }
   onMount(() => {
-    document.addEventListener('scroll', clearLongPressTimer, true);
+    document.addEventListener('scroll', clearLongPressTimer, { capture: true, passive: true });
-    document.addEventListener('wheel', clearLongPressTimer, true);
+    document.addEventListener('wheel', clearLongPressTimer, { capture: true, passive: true });
-    document.addEventListener('contextmenu', clearLongPressTimer, true);
+    document.addEventListener('contextmenu', clearLongPressTimer, { capture: true, passive: true });
-    document.addEventListener('pointermove', moveHandler, true);
+    document.addEventListener('pointermove', moveHandler, { capture: true, passive: true });
     return () => {
       document.removeEventListener('scroll', clearLongPressTimer, true);
       document.removeEventListener('wheel', clearLongPressTimer, true);

web/src/lib/components/shared-components/combobox.svelte

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

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

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

web/src/lib/components/shared-components/scrubber/scrubber.svelte

@@ -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('touchstart', onTouchStart, { capture: true, passive: true });
-    document.addEventListener('touchend', onTouchEnd, true);
+    document.addEventListener('touchend', onTouchEnd, { capture: true, passive: true });
     return () => {
-      document.addEventListener('touchstart', onTouchStart, true);
+      document.removeEventListener('touchstart', onTouchStart, true);
-      document.addEventListener('touchend', onTouchEnd, true);
+      document.removeEventListener('touchend', onTouchEnd, true);
     };
   });
 

web/src/lib/managers/theme-manager.svelte.ts

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

web/src/lib/utils/file-uploader.ts

@@ -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) => {
+      fileSelector.addEventListener(
-        const target = e.target as HTMLInputElement;
+        'change',
-        if (!target.files) {
+        (e: Event) => {
-          return;
+          const target = e.target as HTMLInputElement;
-        }
+          if (!target.files) {
-        const files = Array.from(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) {

web/src/service-worker/index.ts

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