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

refactor(web): websocket events (#7152)

Browse source
This commit is contained in:
Michel Heusschen 2024-02-16 21:43:40 +01:00 • committed by GitHub
parent bbf7a54c65
commit c84c0bae6c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 134 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/src/lib/components/asset-viewer/detail-panel.svelte
View file

@ -6,7 +6,7 @@
import { locale } from '$lib/stores/preferences.store';
import { featureFlags } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { websocketStore } from '$lib/stores/websocket';
import { websocketEvents } from '$lib/stores/websocket';
import { getAssetThumbnailUrl, getPeopleThumbnailUrl, isSharedLink } from '$lib/utils';
import { getAssetFilename } from '$lib/utils/asset-utils';
import { autoGrowHeight } from '$lib/utils/autogrow';
@ -30,7 +30,7 @@
mdiPencil,
} from '@mdi/js';
import { DateTime } from 'luxon';
import { createEventDispatcher, onDestroy } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
import { slide } from 'svelte/transition';
import { asByteUnitString } from '../../utils/byte-units';
import { handleError } from '../../utils/handle-error';
@ -91,14 +91,12 @@
$: people = asset.people || [];
$: showingHiddenPeople = false;
const unsubscribe = websocketStore.onAssetUpdate.subscribe((assetUpdate) => {
if (assetUpdate && assetUpdate.id === asset.id) {
asset = assetUpdate;
}
});
onDestroy(() => {
unsubscribe();
onMount(() => {
return websocketEvents.on('on_asset_update', (assetUpdate) => {
if (assetUpdate.id === asset.id) {
asset = assetUpdate;
}
});
});
const dispatch = createEventDispatcher<{

43
web/src/lib/components/faces-page/person-side-panel.svelte
View file

@ -2,7 +2,7 @@
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { timeBeforeShowLoadingSpinner } from '$lib/constants';
import { boundingBoxesArray } from '$lib/stores/people.store';
import { websocketStore } from '$lib/stores/websocket';
import { websocketEvents } from '$lib/stores/websocket';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { getPersonNameWithHiddenValue } from '$lib/utils/person';
@ -49,32 +49,12 @@
let loaderLoadingDoneTimeout: NodeJS.Timeout;
let automaticRefreshTimeout: NodeJS.Timeout;
const { onPersonThumbnail } = websocketStore;
const dispatch = createEventDispatcher<{
close: void;
refresh: void;
}>();
// Reset value
$onPersonThumbnail = '';
$: {
if ($onPersonThumbnail) {
numberOfAssetFaceGenerated.push($onPersonThumbnail);
if (
isEqual(numberOfAssetFaceGenerated, numberOfPersonToCreate) &&
loaderLoadingDoneTimeout &&
automaticRefreshTimeout &&
selectedPersonToCreate.filter((person) => person !== null).length === numberOfPersonToCreate.length
) {
clearTimeout(loaderLoadingDoneTimeout);
clearTimeout(automaticRefreshTimeout);
dispatch('refresh');
}
}
}
onMount(async () => {
async function loadPeople() {
const timeout = setTimeout(() => (isShowLoadingPeople = true), timeBeforeShowLoadingSpinner);
try {
const { people } = await getAllPeople({ withHidden: true });
@ -88,6 +68,25 @@
clearTimeout(timeout);
}
isShowLoadingPeople = false;
}
const onPersonThumbnail = (personId: string) => {
numberOfAssetFaceGenerated.push(personId);
if (
isEqual(numberOfAssetFaceGenerated, numberOfPersonToCreate) &&
loaderLoadingDoneTimeout &&
automaticRefreshTimeout &&
selectedPersonToCreate.filter((person) => person !== null).length === numberOfPersonToCreate.length
) {
clearTimeout(loaderLoadingDoneTimeout);
clearTimeout(automaticRefreshTimeout);
dispatch('refresh');
}
};
onMount(() => {
loadPeople();
return websocketEvents.on('on_person_thumbnail', onPersonThumbnail);
});
const isEqual = (a: string[], b: string[]): boolean => {

17
web/src/lib/components/shared-components/update-panel.svelte
View file

@ -1,15 +1,18 @@
<script lang="ts">
import { websocketStore } from '$lib/stores/websocket';
import { websocketEvents } from '$lib/stores/websocket';
import type { AssetStore } from '$lib/stores/assets.store';
import { onMount } from 'svelte';
export let assetStore: AssetStore | null;
websocketStore.onAssetUpdate.subscribe((asset) => {
if (asset && asset.originalFileName && assetStore) {
assetStore.updateAsset(asset, true);
onMount(() => {
return websocketEvents.on('on_asset_update', (asset) => {
if (asset.originalFileName && assetStore) {
assetStore.updateAsset(asset, true);
assetStore.removeAsset(asset.id); // Update timeline
assetStore.addAsset(asset);
}
assetStore.removeAsset(asset.id); // Update timeline
assetStore.addAsset(asset);
}
});
});
</script>

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

@ -6,13 +6,13 @@
let showModal = false;
const { onRelease } = websocketStore;
const { release } = websocketStore;
const semverToName = ({ major, minor, patch }: ServerVersionResponseDto) => `v${major}.${minor}.${patch}`;
$: releaseVersion = $onRelease && semverToName($onRelease.releaseVersion);
$: serverVersion = $onRelease && semverToName($onRelease.serverVersion);
$: $onRelease?.isAvailable && handleRelease();
$: releaseVersion = $release && semverToName($release.releaseVersion);
$: serverVersion = $release && semverToName($release.serverVersion);
$: $release?.isAvailable && handleRelease();
const onAcknowledge = () => {
localStorage.setItem('appVersion', releaseVersion);