refactor: reimplement websocket-support as a mixin

web/src/lib/components/timeline/Timeline.svelte

@@ -13,7 +13,12 @@
   import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset, TimelineManagerOptions, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
+  import {
+    ExtendedTimelineManager,
+    type TimelineAsset,
+    type TimelineManagerOptions,
+    type ViewportTopMonth,
+  } from '$lib/managers/timeline-manager/types';
   import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -90,7 +95,7 @@
     onThumbnailClick,
   }: Props = $props();
 
-  timelineManager = new TimelineManager();
+  timelineManager = new ExtendedTimelineManager();
   onDestroy(() => timelineManager.destroy());
   $effect(() => options && void timelineManager.updateOptions(options));
 

web/src/lib/managers/timeline-manager/internal/websocket-support.svelte.ts

@@ -1,34 +1,36 @@
-import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+import type { GenericTimeManager, PendingChange, TimelineAsset } from '$lib/managers/timeline-manager/types';
-import type { PendingChange, TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { websocketEvents } from '$lib/stores/websocket';
 import { toTimelineAsset } from '$lib/utils/timeline-util';
 import { throttle } from 'lodash-es';
 import type { Unsubscriber } from 'svelte/store';
 
-export class WebsocketSupport {
+export function HasWebsocket<T extends GenericTimeManager>(timelineManager: T) {
+  return class extends timelineManager {
     #pendingChanges: PendingChange[] = [];
     #unsubscribers: Unsubscriber[] = [];
-  #timelineManager: TimelineManager;
 
     #processPendingChanges = throttle(() => {
       const { add, update, remove } = this.#getPendingChangeBatches();
       if (add.length > 0) {
-      this.#timelineManager.upsertAssets(add);
+        this.upsertAssets(add);
       }
       if (update.length > 0) {
-      this.#timelineManager.upsertAssets(update);
+        this.upsertAssets(update);
       }
       if (remove.length > 0) {
-      this.#timelineManager.removeAssets(remove);
+        this.removeAssets(remove);
       }
       this.#pendingChanges = [];
     }, 2500);
 
-  constructor(timeineManager: TimelineManager) {
+    override connect(): void {
-    this.#timelineManager = timeineManager;
+      super.connect();
+      if (this.#unsubscribers.length !== 0) {
+        if (import.meta.env.DEV) {
+          throw new Error('Websocket already connected');
+        }
+        return;
       }
-
-  connectWebsocketEvents() {
       this.#unsubscribers.push(
         websocketEvents.on('on_upload_success', (asset) =>
           this.#addPendingChanges({ type: 'add', values: [toTimelineAsset(asset)] }),
@@ -37,15 +39,18 @@ export class WebsocketSupport {
         websocketEvents.on('on_asset_update', (asset) =>
           this.#addPendingChanges({ type: 'update', values: [toTimelineAsset(asset)] }),
         ),
-      websocketEvents.on('on_asset_delete', (id: string) => this.#addPendingChanges({ type: 'delete', values: [id] })),
+        websocketEvents.on('on_asset_delete', (id: string) =>
+          this.#addPendingChanges({ type: 'delete', values: [id] }),
+        ),
       );
     }
 
-  disconnectWebsocketEvents() {
+    override disconnect(): void {
       for (const unsubscribe of this.#unsubscribers) {
         unsubscribe();
       }
       this.#unsubscribers = [];
+      super.disconnect();
     }
 
     #addPendingChanges(...changes: PendingChange[]) {
@@ -82,4 +87,5 @@ export class WebsocketSupport {
       }
       return batch;
     }
+  };
 }

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

@@ -15,7 +15,6 @@ import {
   getMonthGroupByDate,
   retrieveRange as retrieveRangeUtil,
 } from '$lib/managers/timeline-manager/internal/search-support.svelte';
-import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websocket-support.svelte';
 import { CancellableTask } from '$lib/utils/cancellable-task';
 import { toTimelineAsset, type TimelineDateTime, type TimelineYearMonth } from '$lib/utils/timeline-util';
 import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
@@ -84,7 +83,6 @@ export class TimelineManager extends VirtualScrollManager {
   );
 
   static #INIT_OPTIONS = {};
-  #websocketSupport: WebsocketSupport | undefined;
   #options: TimelineManagerOptions = TimelineManager.#INIT_OPTIONS;
   #updatingIntersections = false;
   #scrollableElement: HTMLElement | undefined = $state();
@@ -140,21 +138,9 @@ export class TimelineManager extends VirtualScrollManager {
     }
   }
 
-  connect() {
+  connect() {}
-    if (this.#websocketSupport) {
-      throw new Error('TimelineManager already connected');
-    }
-    this.#websocketSupport = new WebsocketSupport(this);
-    this.#websocketSupport.connectWebsocketEvents();
-  }
 
-  disconnect() {
+  disconnect() {}
-    if (!this.#websocketSupport) {
-      return;
-    }
-    this.#websocketSupport.disconnectWebsocketEvents();
-    this.#websocketSupport = undefined;
-  }
 
   #calculateMonthBottomViewportRatio(month: MonthGroup | undefined) {
     if (!month) {

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

@@ -1,3 +1,5 @@
+import { HasWebsocket } from '$lib/managers/timeline-manager/internal/websocket-support.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { TimelineDate, TimelineDateTime, TimelineYearMonth } from '$lib/utils/timeline-util';
 import type { AssetStackResponseDto, AssetVisibility } from '@immich/sdk';
 
@@ -96,3 +98,8 @@ export interface UpdateGeometryOptions {
   invalidateHeight: boolean;
   noDefer?: boolean;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type GenericConstructor<T = {}> = new (...args: any[]) => T;
+export type GenericTimeManager = GenericConstructor<TimelineManager>;
+export const ExtendedTimelineManager = HasWebsocket(TimelineManager);