helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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