feat(web): re-add version announcement (#1887)

* feat(web): re-add version announcement

* show notification for every update

web/src/lib/components/shared-components/announcement-box.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import FullScreenModal from './full-screen-modal.svelte';
-	export let localVersion: string;
-	export let remoteVersion: string;
-
-	const dispatch = createEventDispatcher();
-
-	const acknowledgeClickHandler = () => {
-		localStorage.setItem('appVersion', remoteVersion);
-
-		dispatch('close');
-	};
-</script>
-
-<div class="absolute top-0 left-0 w-screen h-screen">
-	<FullScreenModal on:clickOutside={() => console.log('Click outside')}>
-		<div class="max-w-[500px] max-w-[95vw] z-[99999] border bg-immich-bg p-10 rounded-xl">
-			<p class="text-2xl ">🎉 NEW VERSION AVAILABLE 🎉</p>
-			<br />
-
-			<section class="max-h-[400px] overflow-y-auto">
-				<div class="font-thin">
-					Hi friend, there is a new release of <span
-						class="font-immich-title text-immich-primary font-bold">IMMICH</span
-					>, please take your time to visit the
-					<span class="underline font-medium"
-						><a
-							href="https://github.com/immich-app/immich/releases/latest"
-							target="_blank"
-							rel="noopener noreferrer">release note</a
-						></span
-					>
-					and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent
-					any misconfigurations, especially if you use WatchTower or any mechanism that handles updating
-					your application automatically.
-				</div>
-
-				{#if remoteVersion == 'v1.11.0_17-dev'}
-					<div class="mt-2 font-thin">
-						This specific version <span class="font-medium">v1.11.0_17-dev</span> includes changes in
-						the docker-compose setup that added additional containters. Please make sure to update the
-						docker-compose file, pull new images and check your setup for the latest features and bug
-						fixes.
-					</div>
-				{/if}
-			</section>
-
-			<div class="font-thin mt-4">Your friend, Alex</div>
-			<div class="text-xs mt-8">
-				<code>Local Version {localVersion}</code>
-				<br />
-				<code>Remote Version {remoteVersion}</code>
-			</div>
-
-			<div class="text-right mt-4">
-				<button
-					class="bg-immich-primary text-gray-50 hover:bg-immich-primary/90 py-2 px-4 rounded-lg font-medium shadow-lg transition-all"
-					on:click={acknowledgeClickHandler}>Acknowledge</button
-				>
-			</div>
-		</div>
-	</FullScreenModal>
-</div>

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

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { getGithubVersion } from '$lib/utils/get-github-version';
+	import { onMount } from 'svelte';
+	import FullScreenModal from './full-screen-modal.svelte';
+	import type { ServerVersionReponseDto } from '@api';
+
+	export let serverVersion: ServerVersionReponseDto;
+
+	let showModal = false;
+	let githubVersion: string;
+	$: serverVersionName = semverToName(serverVersion);
+
+	function semverToName({ major, minor, patch }: ServerVersionReponseDto) {
+		return `v${major}.${minor}.${patch}`;
+	}
+
+	function onAcknowledge() {
+		// Store server version to prevent the notification
+		// from showing again.
+		localStorage.setItem('appVersion', githubVersion);
+		showModal = false;
+	}
+
+	onMount(async () => {
+		try {
+			githubVersion = await getGithubVersion();
+			if (localStorage.getItem('appVersion') === githubVersion) {
+				// Updated version has already been acknowledged.
+				return;
+			}
+
+			if (githubVersion !== serverVersionName) {
+				showModal = true;
+			}
+		} catch (err) {
+			// Only log any errors that occur.
+			console.error('Error [VersionAnnouncementBox]:', err);
+		}
+	});
+</script>
+
+{#if showModal}
+	<FullScreenModal on:clickOutside={() => (showModal = false)}>
+		<div
+			class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray shadow-sm max-w-lg rounded-3xl py-10 px-8 dark:text-immich-dark-fg "
+		>
+			<p class="text-2xl mb-4">🎉 NEW VERSION AVAILABLE 🎉</p>
+
+			<div>
+				Hi friend, there is a new release of
+				<span class="font-immich-title text-immich-primary dark:text-immich-dark-primary font-bold"
+					>IMMICH</span
+				>, please take your time to visit the
+				<span class="underline font-medium"
+					><a
+						href="https://github.com/immich-app/immich/releases/latest"
+						target="_blank"
+						rel="noopener noreferrer">release notes</a
+					></span
+				>
+				and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent
+				any misconfigurations, especially if you use WatchTower or any mechanism that handles updating
+				your application automatically.
+			</div>
+
+			<div class="font-medium mt-4">Your friend, Alex</div>
+
+			<div class="font-sm mt-8">
+				<code>Server Version: {serverVersionName}</code>
+				<br />
+				<code>Latest Version: {githubVersion}</code>
+			</div>
+
+			<div class="text-right mt-8">
+				<button
+					class="transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
+					on:click={onAcknowledge}>Acknowledge</button
+				>
+			</div>
+		</div>
+	</FullScreenModal>
+{/if}

web/src/lib/utils/check-app-version.ts

@@ -1,50 +0,0 @@
-type CheckAppVersionReponse = {
-	shouldShowAnnouncement: boolean;
-	localVersion?: string;
-	remoteVersion?: string;
-};
-
-type GithubRelease = {
-	tag_name: string;
-};
-
-export const checkAppVersion = async (): Promise<CheckAppVersionReponse> => {
-	const res = await fetch('https://api.github.com/repos/immich-app/immich/releases/latest', {
-		headers: {
-			Accept: 'application/vnd.github.v3+json'
-		}
-	});
-
-	if (res.status == 200) {
-		const latestRelease = (await res.json()) as GithubRelease;
-		const appVersion = localStorage.getItem('appVersion');
-
-		if (!appVersion) {
-			return {
-				shouldShowAnnouncement: false,
-				remoteVersion: latestRelease.tag_name,
-				localVersion: 'empty'
-			};
-		}
-
-		if (appVersion != latestRelease.tag_name) {
-			return {
-				shouldShowAnnouncement: true,
-				remoteVersion: latestRelease.tag_name,
-				localVersion: appVersion
-			};
-		}
-
-		return {
-			shouldShowAnnouncement: false,
-			remoteVersion: latestRelease.tag_name,
-			localVersion: appVersion
-		};
-	} else {
-		return {
-			shouldShowAnnouncement: false,
-			remoteVersion: '0',
-			localVersion: '0'
-		};
-	}
-};

web/src/lib/utils/get-github-version.ts

@@ -0,0 +1,18 @@
+import axios from 'axios';
+
+type GithubRelease = {
+	tag_name: string;
+};
+
+export const getGithubVersion = async (): Promise<string> => {
+	const { data } = await axios.get<GithubRelease>(
+		'https://api.github.com/repos/immich-app/immich/releases/latest',
+		{
+			headers: {
+				Accept: 'application/vnd.github.v3+json'
+			}
+		}
+	);
+
+	return data.tag_name;
+};

web/src/routes/+layout.server.ts

@@ -1,5 +1,7 @@
 import type { LayoutServerLoad } from './$types';
 
-export const load = (async ({ locals: { user } }) => {
-	return { user };
+export const load = (async ({ locals: { api, user } }) => {
+	const { data: serverVersion } = await api.serverInfoApi.getServerVersion();
+
+	return { serverVersion, user };
 }) satisfies LayoutServerLoad;

web/src/routes/+layout.svelte

@@ -7,7 +7,9 @@
 	import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
 	import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
 	import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
+	import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
 	import faviconUrl from '$lib/assets/favicon.png';
+	import type { LayoutData } from './$types';
 
 	let showNavigationLoadingBar = false;
 
@@ -18,6 +20,8 @@
 	afterNavigate(() => {
 		showNavigationLoadingBar = false;
 	});
+
+	export let data: LayoutData;
 </script>
 
 <svelte:head>
@@ -50,3 +54,7 @@
 <DownloadPanel />
 <UploadPanel />
 <NotificationList />
+
+{#if data.user?.isAdmin}
+	<VersionAnnouncementBox serverVersion={data.serverVersion} />
+{/if}