feat(web): Scroll to asset in gridview; increase gridview perf; reduce memory; scrollbar ticks in fixed position (#10646)

* Squashed

* Change strategy - now pre-measure buckets offscreen, so don't need to worry about sub-bucket scroll preservation

* Reduce jank on scroll, delay DOM updates until after scroll

* css opt, log measure time

* Trickle out queue while scrolling, flush when stopped

* yay

* Cleanup cleanup...

* everybody...

* everywhere...

* Clean up cleanup!

* Everybody do their share

* CLEANUP!

* package-lock ?

* dynamic measure, todo

* Fix web test

* type lint

* fix e2e

* e2e test

* Better scrollbar

* Tuning, and more tunables

* Tunable tweaks, more tunables

* Scrollbar dots and viewport events

* lint

* Tweaked tunnables, use requestIdleCallback for garbage tasks, bug fixes

* New tunables, and don't update url by default

* Bug fixes

* Bug fix, with debug

* Fix flickr, fix graybox bug, reduced debug

* Refactor/cleanup

* Fix

* naming

* Final cleanup

* review comment

* Forgot to update this after naming change

* scrubber works, with debug

* cleanup

* Rename scrollbar to scrubber

* rename  to

* left over rename and change to previous album bar

* bugfix addassets, comments

* missing destroy(), cleanup

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

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

@@ -3,7 +3,11 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { mdiAlertCircleOutline, mdiPauseCircleOutline, mdiPlayCircleOutline } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { AssetStore } from '$lib/stores/assets.store';
+  import { generateId } from '$lib/utils/generate-id';
+  import { onDestroy } from 'svelte';
 
+  export let assetStore: AssetStore | undefined = undefined;
   export let url: string;
   export let durationInSeconds = 0;
   export let enablePlayback = false;
@@ -13,6 +17,7 @@
   export let playIcon = mdiPlayCircleOutline;
   export let pauseIcon = mdiPauseCircleOutline;
 
+  const componentId = generateId();
   let remainingSeconds = durationInSeconds;
   let loading = true;
   let error = false;
@@ -27,6 +32,43 @@
       player.src = '';
     }
   }
+  const onMouseEnter = () => {
+    if (assetStore) {
+      assetStore.taskManager.queueScrollSensitiveTask({
+        componentId,
+        task: () => {
+          if (playbackOnIconHover) {
+            enablePlayback = true;
+          }
+        },
+      });
+    } else {
+      if (playbackOnIconHover) {
+        enablePlayback = true;
+      }
+    }
+  };
+
+  const onMouseLeave = () => {
+    if (assetStore) {
+      assetStore.taskManager.queueScrollSensitiveTask({
+        componentId,
+        task: () => {
+          if (playbackOnIconHover) {
+            enablePlayback = false;
+          }
+        },
+      });
+    } else {
+      if (playbackOnIconHover) {
+        enablePlayback = false;
+      }
+    }
+  };
+
+  onDestroy(() => {
+    assetStore?.taskManager.removeAllTasksForComponent(componentId);
+  });
 </script>
 
 <div class="absolute right-0 top-0 z-20 flex place-items-center gap-1 text-xs font-medium text-white">
@@ -37,19 +79,7 @@
   {/if}
 
   <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <span
-    class="pr-2 pt-2"
-    on:mouseenter={() => {
-      if (playbackOnIconHover) {
-        enablePlayback = true;
-      }
-    }}
-    on:mouseleave={() => {
-      if (playbackOnIconHover) {
-        enablePlayback = false;
-      }
-    }}
-  >
+  <span class="pr-2 pt-2" on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
     {#if enablePlayback}
       {#if loading}
         <LoadingSpinner />