feat(web): hero view transitions between timeline and asset viewer

Change-Id: I19e0c7385cc38adbc85177ae9706cff06a6a6964

fix(web): fix e2e test failures for view transitions

Change-Id: Ida64f2d509efce0a85a50b89fd4137276a6a6964
Change-Id: I19e0c7385cc38adbc85177ae9706cff06a6a6964

web/src/lib/utils/base-event-manager.svelte.ts

@@ -43,6 +43,50 @@ export class BaseEventManager<Events extends EventsBase> {
     };
   }
 
+  private once<T extends keyof Events>(event: T, callback: EventCallback<Events, T>) {
+    const unsubscribe = this.#onEvent(event, (...args: Events[T]) => {
+      unsubscribe();
+      return callback(...args);
+    });
+    return unsubscribe;
+  }
+
+  untilNext<T extends keyof Events>(
+    event: T,
+    { timeoutMs = 10_000, signal }: { timeoutMs?: number; signal?: AbortSignal } = {},
+  ): Promise<Events[T] extends [] ? void : Events[T][0]> {
+    type Result = Events[T] extends [] ? void : Events[T][0];
+    return new Promise<Result>((resolve, reject) => {
+      let settled = false;
+      const settle = () => {
+        if (settled) {
+          return false;
+        }
+        settled = true;
+        unsubscribe();
+        clearTimeout(timer);
+        signal?.removeEventListener('abort', onAbort);
+        return true;
+      };
+      const unsubscribe = this.once(event, (...args: Events[T]) => {
+        if (settle()) {
+          resolve(args[0] as Result);
+        }
+      });
+      const timer = setTimeout(() => {
+        if (settle()) {
+          reject(new Error(`untilNext('${String(event)}') timed out after ${timeoutMs}ms`));
+        }
+      }, timeoutMs);
+      const onAbort = () => {
+        if (settle()) {
+          resolve(undefined as Result);
+        }
+      };
+      signal?.addEventListener('abort', onAbort, { once: true });
+    });
+  }
+
   emit<T extends keyof Events>(event: T, ...params: Events[T]) {
     const listeners = this.getListeners(event);
     for (const listener of listeners) {

web/src/lib/utils/transition-utils.ts

@@ -0,0 +1,25 @@
+import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
+import { tick } from 'svelte';
+
+export function startViewerTransition(
+  heroAssetId: string,
+  openViewer: () => void,
+  activateHeroAsset: (assetId: string) => void,
+  deactivateHeroAsset: () => void,
+) {
+  void viewTransitionManager.startTransition({
+    types: ['viewer'],
+    prepareOldSnapshot: () => {
+      activateHeroAsset(heroAssetId);
+    },
+    performUpdate: async (signal) => {
+      deactivateHeroAsset();
+      const ready = assetViewerManager.untilNext('ViewerOpenTransitionReady', { signal });
+      openViewer();
+      await ready;
+      assetViewerManager.emit('ViewerOpenTransition');
+      await tick();
+    },
+  });
+}