feat: timeline performance (#16446)

* Squash - feature complete

* remove need to init assetstore

* More optimizations. No need to init. Fix tests

* lint

* add missing selector for e2e

* e2e selectors again

* Update: fully reactive store, some transitions, bugfixes

* merge fallout

* Test fallout

* safari quirk

* security

* lint

* lint

* Bug fixes

* lint/format

* accidental commit

* lock

* null check, more throttle

* revert long duration

* Fix intersection bounds

* Fix bugs in intersection calculation

* lint, tweak scrubber ui a tiny bit

* bugfix - deselecting asset doesnt work

* fix not loading bucket, scroll off-by-1 error, jsdoc, naming

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

@@ -3,12 +3,8 @@
   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.svelte';
-  import { generateId } from '$lib/utils/generate-id';
-  import { onDestroy } from 'svelte';
 
   interface Props {
-    assetStore?: AssetStore | undefined;
     url: string;
     durationInSeconds?: number;
     enablePlayback?: boolean;
@@ -20,7 +16,6 @@
   }
 
   let {
-    assetStore = undefined,
     url,
     durationInSeconds = 0,
     enablePlayback = $bindable(false),
@@ -31,7 +26,6 @@
     pauseIcon = mdiPauseCircleOutline,
   }: Props = $props();
 
-  const componentId = generateId();
   let remainingSeconds = $state(durationInSeconds);
   let loading = $state(true);
   let error = $state(false);
@@ -49,42 +43,16 @@
     }
   });
   const onMouseEnter = () => {
-    if (assetStore) {
-      assetStore.taskManager.queueScrollSensitiveTask({
-        componentId,
-        task: () => {
-          if (playbackOnIconHover) {
-            enablePlayback = true;
-          }
-        },
-      });
-    } else {
-      if (playbackOnIconHover) {
-        enablePlayback = true;
-      }
+    if (playbackOnIconHover) {
+      enablePlayback = true;
     }
   };
 
   const onMouseLeave = () => {
-    if (assetStore) {
-      assetStore.taskManager.queueScrollSensitiveTask({
-        componentId,
-        task: () => {
-          if (playbackOnIconHover) {
-            enablePlayback = false;
-          }
-        },
-      });
-    } else {
-      if (playbackOnIconHover) {
-        enablePlayback = false;
-      }
+    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">