Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-09 03:04:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: migrate version announcement modal (#19381)

Browse Source
This commit is contained in:
Daniel Dietzler 2025-06-23 04:56:41 +02:00 committed by GitHub
parent c705a7b280
commit ecc58a8971
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 79 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
web/src/lib/components/shared-components/version-announcement-box.svelte
View File

@ -1,75 +0,0 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { websocketStore } from '$lib/stores/websocket';
import type { ServerVersionResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { t } from 'svelte-i18n';
let showModal = $state(false);
const { release } = websocketStore;
const semverToName = ({ major, minor, patch }: ServerVersionResponseDto) => `v${major}.${minor}.${patch}`;
const onAcknowledge = () => {
localStorage.setItem('appVersion', releaseVersion);
sessionStorage.setItem('modalAcknowledged', 'true');
showModal = false;
};
const handleRelease = () => {
try {
if (localStorage.getItem('appVersion') === releaseVersion) {
return;
}
showModal = true;
} catch (error) {
console.error('Error [VersionAnnouncementBox]:', error);
}
};
let releaseVersion = $derived($release && semverToName($release.releaseVersion));
let serverVersion = $derived($release && semverToName($release.serverVersion));
$effect(() => {
if ($release?.isAvailable && !sessionStorage.getItem('modalAcknowledged')) {
handleRelease();
}
});
</script>
{#if showModal}
<Modal size="small" title="🎉 {$t('new_version_available')}" onClose={() => (showModal = false)} icon={false}>
<ModalBody>
<div>
<FormatMessage key="version_announcement_message">
{#snippet children({ tag, message })}
{#if tag === 'link'}
<span class="font-medium underline">
<a
href="https://github.com/immich-app/immich/releases/latest"
target="_blank"
rel="noopener noreferrer"
>
{message}
</a>
</span>
{:else if tag === 'code'}
<code>{message}</code>
{/if}
{/snippet}
</FormatMessage>
</div>
<div class="mt-4 font-medium">{$t('version_announcement_closing')}</div>
<div class="font-sm mt-8">
<code>{$t('server_version')}: {serverVersion}</code>
<br />
<code>{$t('latest_version')}: {releaseVersion}</code>
</div>
</ModalBody>
<ModalFooter>
<Button fullWidth shape="round" onclick={onAcknowledge}>{$t('acknowledge')}</Button>
</ModalFooter>
</Modal>
{/if}

44
web/src/lib/modals/VersionAnnouncementModal.svelte Normal file
View File

@ -0,0 +1,44 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { t } from 'svelte-i18n';
type Props = {
serverVersion: string;
releaseVersion: string;
onClose: () => void;
};
const { serverVersion, releaseVersion, onClose }: Props = $props();
</script>
<Modal size="small" title="🎉 {$t('new_version_available')}" {onClose} icon={false}>
<ModalBody>
<div>
<FormatMessage key="version_announcement_message">
{#snippet children({ tag, message })}
{#if tag === 'link'}
<span class="font-medium underline">
<a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer">
{message}
</a>
</span>
{:else if tag === 'code'}
<code>{message}</code>
{/if}
{/snippet}
</FormatMessage>
</div>
<div class="mt-4 font-medium">{$t('version_announcement_closing')}</div>
<div class="font-sm mt-8">
<code>{$t('server_version')}: {serverVersion}</code>
<br />
<code>{$t('latest_version')}: {releaseVersion}</code>
</div>
</ModalBody>
<ModalFooter>
<Button fullWidth shape="round" onclick={onClose}>{$t('acknowledge')}</Button>
</ModalFooter>
</Modal>

41
web/src/routes/+layout.svelte
View File

@ -8,13 +8,20 @@
import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
import { eventManager } from '$lib/managers/event-manager.svelte';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
import { serverConfig } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
import {
closeWebsocketConnection,
openWebsocketConnection,
websocketStore,
type ReleaseEvent,
} from '$lib/stores/websocket';
import { copyToClipboard } from '$lib/utils';
import { isAssetViewerRoute } from '$lib/utils/navigation';
import type { ServerVersionResponseDto } from '@immich/sdk';
import { setTranslations } from '@immich/ui';
import { onMount, type Snippet } from 'svelte';
import { t } from 'svelte-i18n';
@ -66,6 +73,32 @@
closeWebsocketConnection();
}
});
const semverToName = ({ major, minor, patch }: ServerVersionResponseDto) => `v${major}.${minor}.${patch}`;
const { release } = websocketStore;
const handleRelease = async (release: ReleaseEvent) => {
if (!release.isAvailable || !$user.isAdmin) {
return;
}
const releaseVersion = semverToName(release.releaseVersion);
const serverVersion = semverToName(release.serverVersion);
if (localStorage.getItem('appVersion') === releaseVersion) {
return;
}
try {
await modalManager.show(VersionAnnouncementModal, { serverVersion, releaseVersion });
localStorage.setItem('appVersion', releaseVersion);
} catch (error) {
console.error('Error [VersionAnnouncementBox]:', error);
}
};
$effect(() => void handleRelease($release));
</script>
<svelte:head>
@ -121,7 +154,3 @@
<DownloadPanel />
<UploadPanel />
<NotificationList />
{#if $user?.isAdmin}
<VersionAnnouncementBox />
{/if}