refactor: event manager (#25565)

web/src/lib/actions/zoom-image.ts

@@ -5,7 +5,7 @@ export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolea
   const zoomInstance = createZoomImageWheel(node, { maxZoom: 10, initialState: assetViewerManager.zoomState });
 
   const unsubscribes = [
-    assetViewerManager.on('ZoomChange', (state) => zoomInstance.setState(state)),
+    assetViewerManager.on({ ZoomChange: (state) => zoomInstance.setState(state) }),
     zoomInstance.subscribe(({ state }) => assetViewerManager.onZoomChange(state)),
   ];
 

web/src/lib/components/AssetViewerEvents.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { assetViewerManager, type Events } from '$lib/managers/asset-viewer-manager.svelte';
-  import type { EventCallback } from '$lib/utils/base-event-manager.svelte';
+  import type { EventCallback, EventMap } from '$lib/utils/base-event-manager.svelte';
   import { onMount } from 'svelte';
 
   type Props = {
@@ -10,22 +10,17 @@
   const props: Props = $props();
 
   onMount(() => {
-    const unsubscribes: Array<() => void> = [];
+    const events: EventMap<Events> = {};
 
-    for (const name of Object.keys(props)) {
+    for (const [name, listener] of Object.entries(props)) {
+      if (listener) {
         const event = name.slice(2) as keyof Events;
-      const listener = props[name as keyof Props] as EventCallback<Events, typeof event> | undefined;
+        events[event] = listener as EventCallback<Events, typeof event>;
-      if (!listener) {
+      }
-        continue;
     }
 
-      unsubscribes.push(assetViewerManager.on(event, listener));
+    return assetViewerManager.on(events);
-    }
-
-    return () => {
-      for (const unsubscribe of unsubscribes) {
-        unsubscribe();
-      }
-    };
   });
 </script>
+
+const event = name.slice(2) as keyof Events;

web/src/lib/components/OnEvents.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { eventManager, type Events } from '$lib/managers/event-manager.svelte';
+  import type { EventCallback, EventMap } from '$lib/utils/base-event-manager.svelte';
   import { onMount } from 'svelte';
 
   type Props = {
@@ -9,25 +10,15 @@
   const props: Props = $props();
 
   onMount(() => {
-    const unsubscribes: Array<() => void> = [];
+    const events: EventMap<Events> = {};
 
-    for (const name of Object.keys(props)) {
+    for (const [name, listener] of Object.entries(props)) {
+      if (listener) {
         const event = name.slice(2) as keyof Events;
-      const listener = props[name as keyof Props];
+        events[event] = listener as EventCallback<Events, typeof event>;
-
+      }
-      if (!listener) {
-        continue;
     }
 
-      const args = [event, listener as (...args: Events[typeof event]) => void] as const;
+    return eventManager.on(events);
-
-      unsubscribes.push(eventManager.on(...args));
-    }
-
-    return () => {
-      for (const unsubscribe of unsubscribes) {
-        unsubscribe();
-      }
-    };
   });
 </script>

web/src/lib/managers/AssetCacheManager.svelte.ts

@@ -37,9 +37,11 @@ class AssetCacheManager {
   #ocrCache = new AsyncCache<AssetOcrResponseDto[]>();
 
   constructor() {
-    eventManager.on('AssetEditsApplied', () => {
+    eventManager.on({
+      AssetEditsApplied: () => {
         this.#assetCache.clear();
         this.#ocrCache.clear();
+      },
     });
   }
 

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

@@ -59,7 +59,9 @@ class CastManager {
       // Add other cast destinations here (ie FCast)
     ];
 
-    eventManager.on('AppInit', () => void this.initialize());
+    eventManager.on({
+      AppInit: () => void this.initialize(),
+    });
   }
 
   private async initialize() {

web/src/lib/managers/feature-flags-manager.svelte.ts

@@ -5,7 +5,9 @@ class FeatureFlagsManager {
   #value?: ServerFeaturesDto = $state();
 
   constructor() {
-    eventManager.on('SystemConfigUpdate', () => void this.#loadFeatureFlags());
+    eventManager.on({
+      SystemConfigUpdate: () => void this.#loadFeatureFlags(),
+    });
   }
 
   async init() {

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

@@ -4,7 +4,9 @@ import { lang } from '$lib/stores/preferences.store';
 
 class LanguageManager {
   constructor() {
-    eventManager.on('AppInit', () => lang.subscribe((lang) => this.setLanguage(lang)));
+    eventManager.on({
+      AppInit: () => lang.subscribe((lang) => this.setLanguage(lang)),
+    });
   }
 
   rtl = $state(false);

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

@@ -19,7 +19,9 @@ export class QueueManager {
   }
 
   constructor() {
-    eventManager.on('QueueUpdate', () => this.refresh());
+    eventManager.on({
+      QueueUpdate: () => this.refresh(),
+    });
   }
 
   listen() {

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

@@ -5,7 +5,9 @@ class ReleaseManager {
   value = $state<ReleaseEvent | undefined>();
 
   constructor() {
-    eventManager.on('ReleaseEvent', (event) => (this.value = event));
+    eventManager.on({
+      ReleaseEvent: (event) => (this.value = event),
+    });
   }
 }
 

web/src/lib/managers/server-config-manager.svelte.ts

@@ -5,7 +5,9 @@ class ServerConfigManager {
   #value?: ServerConfigDto = $state();
 
   constructor() {
-    eventManager.on('SystemConfigUpdate', () => this.loadServerConfig());
+    eventManager.on({
+      SystemConfigUpdate: () => this.loadServerConfig(),
+    });
   }
 
   async init() {

web/src/lib/managers/system-config-manager.svelte.ts

@@ -7,7 +7,9 @@ class SystemConfigManager {
   #defaultValue?: SystemConfigDto = $state();
 
   constructor() {
-    eventManager.on('SystemConfigUpdate', (config) => (this.#value = config));
+    eventManager.on({
+      SystemConfigUpdate: (config) => (this.#value = config),
+    });
   }
 
   async init() {

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

@@ -37,7 +37,9 @@ class ThemeManager {
   isDark = $derived(this.value === Theme.DARK);
 
   constructor() {
-    eventManager.on('AppInit', () => this.#onAppInit());
+    eventManager.on({
+      AppInit: () => this.#onAppInit(),
+    });
   }
 
   setSystem(system: boolean) {

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

@@ -111,9 +111,11 @@ export class TimelineManager extends VirtualScrollManager {
   constructor() {
     super();
 
-    const onAssetUpdate = (asset: AssetResponseDto) => this.upsertAssets([toTimelineAsset(asset)]);
+    this.#unsubscribes.push(
-
+      eventManager.on({
-    this.#unsubscribes.push(eventManager.on('AssetUpdate', onAssetUpdate));
+        AssetUpdate: (asset: AssetResponseDto) => this.upsertAssets([toTimelineAsset(asset)]),
+      }),
+    );
   }
 
   override get scrollTop(): number {

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

@@ -6,7 +6,7 @@ class UploadManager {
   mediaTypes = $state<ServerMediaTypesResponseDto>({ image: [], sidecar: [], video: [] });
 
   constructor() {
-    eventManager.onMany({
+    eventManager.on({
       AppInit: () => this.#loadExtensions(),
       AuthLogout: () => this.reset(),
     });

web/src/lib/stores/folders.svelte.ts

@@ -19,7 +19,9 @@ class FoldersStore {
   private assets = $state<AssetCache>({});
 
   constructor() {
-    eventManager.on('AuthLogout', () => this.clearCache());
+    eventManager.on({
+      AuthLogout: () => this.clearCache(),
+    });
   }
 
   async fetchTree(): Promise<TreeNode> {

web/src/lib/stores/memory.store.svelte.ts

@@ -25,7 +25,7 @@ class MemoryStoreSvelte {
   #loading: Promise<void> | undefined;
 
   constructor() {
-    eventManager.onMany({
+    eventManager.on({
       AuthLogout: () => this.clearCache(),
       AuthUserLoaded: () => this.initialize(),
     });

web/src/lib/stores/notification-manager.svelte.ts

@@ -8,7 +8,7 @@ class NotificationStore {
   notifications = $state<NotificationDto[]>([]);
 
   constructor() {
-    eventManager.onMany({
+    eventManager.on({
       AuthLogin: () => this.refresh(),
       AuthLogout: () => this.clear(),
     });

web/src/lib/stores/search.svelte.ts

@@ -5,7 +5,9 @@ class SearchStore {
   isSearchEnabled = $state(false);
 
   constructor() {
-    eventManager.on('AuthLogout', () => this.clearCache());
+    eventManager.on({
+      AuthLogout: () => this.clearCache(),
+    });
   }
 
   clearCache() {

web/src/lib/stores/user.store.ts

@@ -16,4 +16,6 @@ export const resetSavedUser = () => {
   purchaseStore.setPurchaseStatus(false);
 };
 
-eventManager.on('AuthLogout', () => resetSavedUser());
+eventManager.on({
+  AuthLogout: () => resetSavedUser(),
+});

web/src/lib/stores/user.svelte.ts

@@ -26,4 +26,6 @@ const reset = () => {
   Object.assign(userInteraction, defaultUserInteraction);
 };
 
-eventManager.on('AuthLogout', () => reset());
+eventManager.on({
+  AuthLogout: () => reset(),
+});

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

@@ -1,8 +1,9 @@
-type EventMap = Record<string, unknown[]>;
+type EventsBase = Record<string, unknown[]>;
 type PromiseLike<T> = Promise<T> | T;
 
-export type EventCallback<E extends EventMap, T extends keyof E> = (...args: E[T]) => PromiseLike<unknown>;
+export type EventMap<E extends EventsBase> = { [K in keyof E]?: EventCallback<E, K> };
-export type EventItem<E extends EventMap, T extends keyof E = keyof E> = {
+export type EventCallback<E extends EventsBase, T extends keyof E> = (...args: E[T]) => PromiseLike<unknown>;
+export type EventItem<E extends EventsBase, T extends keyof E = keyof E> = {
   id: number;
   event: T;
   callback: EventCallback<E, T>;
@@ -13,10 +14,22 @@ const nextId = () => count++;
 
 const noop = () => {};
 
-export class BaseEventManager<Events extends EventMap> {
+export class BaseEventManager<Events extends EventsBase> {
   #callbacks: EventItem<Events>[] = $state([]);
 
-  on<T extends keyof Events>(event: T, callback?: EventCallback<Events, T>) {
+  on(subscriptions: EventMap<Events>): () => void {
+    const cleanups = Object.entries(subscriptions).map(([event, callback]) =>
+      this.#onEvent(event as keyof Events, callback as EventCallback<Events, keyof Events>),
+    );
+
+    return () => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+    };
+  }
+
+  #onEvent<T extends keyof Events>(event: T, callback?: EventCallback<Events, T>) {
     if (!callback) {
       return noop;
     }
@@ -30,17 +43,6 @@ export class BaseEventManager<Events extends EventMap> {
     };
   }
 
-  onMany(subscriptions: { [T in keyof Events]?: EventCallback<Events, T> }) {
-    const cleanups = Object.entries(subscriptions).map(([event, callback]) =>
-      this.on(event as keyof Events, callback as EventCallback<Events, keyof Events>),
-    );
-    return () => {
-      for (const cleanup of cleanups) {
-        cleanup();
-      }
-    };
-  }
-
   emit<T extends keyof Events>(event: T, ...params: Events[T]) {
     const listeners = this.getListeners(event);
     for (const listener of listeners) {