c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

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

Browse source 
* feat(web): re-add version announcement

* show notification for every update
This commit is contained in:
Michel Heusschen 2023-02-28 00:13:39 +01:00 committed by GitHub
parent c9a6820de7
commit 243c98a02e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 112 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
web/src/lib/components/shared-components/announcement-box.svelte
View file

@ -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>

82
web/src/lib/components/shared-components/version-announcement-box.svelte Normal file
View file

@ -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}

50
web/src/lib/utils/check-app-version.ts
View file

@ -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'
};
}
};

18
web/src/lib/utils/get-github-version.ts Normal file
View file

@ -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;
};

6
web/src/routes/+layout.server.ts
View file

@ -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;

8
web/src/routes/+layout.svelte
View file

@ -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}