diff --git a/web/src/lib/managers/event-manager.svelte.ts b/web/src/lib/managers/event-manager.svelte.ts index b161356a684c0..33519fddbb918 100644 --- a/web/src/lib/managers/event-manager.svelte.ts +++ b/web/src/lib/managers/event-manager.svelte.ts @@ -87,6 +87,8 @@ export type Events = { WorkflowDelete: [WorkflowResponseDto]; ReleaseEvent: [ReleaseEvent]; + + WebsocketConnect: []; }; export const eventManager = new BaseEventManager(); diff --git a/web/src/lib/stores/websocket.ts b/web/src/lib/stores/websocket.ts index 204e44f84e0ce..8d86fc97494b4 100644 --- a/web/src/lib/stores/websocket.ts +++ b/web/src/lib/stores/websocket.ts @@ -62,7 +62,10 @@ export const websocketStore = { export const websocketEvents = createEventEmitter(websocket); websocket - .on('connect', () => websocketStore.connected.set(true)) + .on('connect', () => { + eventManager.emit('WebsocketConnect'); + websocketStore.connected.set(true); + }) .on('disconnect', () => websocketStore.connected.set(false)) .on('on_server_version', (serverVersion) => websocketStore.serverVersion.set(serverVersion)) .on('AppRestartV1', (mode) => websocketStore.serverRestarting.set(mode)) diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index afd7b576097d9..046d5ce068f5a 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -4,6 +4,7 @@ import { shortcut } from '$lib/actions/shortcut'; import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte'; import ErrorLayout from '$lib/components/layouts/ErrorLayout.svelte'; + import OnEvents from '$lib/components/OnEvents.svelte'; import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte'; import UploadPanel from '$lib/components/shared-components/upload-panel.svelte'; import VersionAnnouncement from '$lib/components/VersionAnnouncement.svelte'; @@ -19,6 +20,7 @@ import { copyToClipboard } from '$lib/utils'; import { maintenanceShouldRedirect } from '$lib/utils/maintenance'; import { isAssetViewerRoute } from '$lib/utils/navigation'; + import { getServerConfig } from '@immich/sdk'; import { CommandPaletteDefaultProvider, TooltipProvider, @@ -31,6 +33,7 @@ import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync, mdiThemeLightDark } from '@mdi/js'; import { onMount, type Snippet } from 'svelte'; import { t } from 'svelte-i18n'; + import { get } from 'svelte/store'; import '../app.css'; interface Props { @@ -120,20 +123,19 @@ if (maintenanceShouldRedirect(isRestarting.isMaintenanceMode, location)) { modalManager.show(ServerRestartingModal, {}).catch((error) => console.error('Error [ServerRestartBox]:', error)); - - // we will be disconnected momentarily - // wait for reconnect then reload - let waiting = false; - websocketStore.connected.subscribe((connected) => { - if (!connected) { - waiting = true; - } else if (connected && waiting) { - location.reload(); - } - }); } }); + const onWebsocketConnect = async () => { + const isRestarting = get(serverRestarting); + if (isRestarting && maintenanceShouldRedirect(isRestarting.isMaintenanceMode, location)) { + const { maintenanceMode } = await getServerConfig(); + if (maintenanceMode === isRestarting.isMaintenanceMode) { + location.reload(); + } + } + }; + const userCommands: ActionItem[] = [ { title: $t('theme'), @@ -182,6 +184,8 @@ const commands = $derived([...userCommands, ...adminCommands]); + +