fix(web): asset refresh

Author: jrasm91

web/src/lib/components/asset-viewer/detail-panel-tags.svelte

@@ -21,7 +21,6 @@
 
   const handleAddTag = async () => {
     const success = await modalManager.show(AssetTagModal, { assetIds: [asset.id] });
-
     if (success) {
       asset = await getAssetInfo({ id: asset.id });
     }

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

@@ -17,20 +17,13 @@
   import { featureFlags } from '$lib/stores/server-config.store';
   import { preferences, user } from '$lib/stores/user.store';
   import { getAssetThumbnailUrl, getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
-  import { delay, isFlipped } from '$lib/utils/asset-utils';
+  import { delay, getDimensions } from '$lib/utils/asset-utils';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import { fromISODateTime, fromISODateTimeUTC } from '$lib/utils/timeline-util';
   import { getParentPath } from '$lib/utils/tree-utils';
-  import {
-    AssetMediaSize,
-    getAssetInfo,
-    updateAsset,
-    type AlbumResponseDto,
-    type AssetResponseDto,
-    type ExifResponseDto,
-  } from '@immich/sdk';
+  import { AssetMediaSize, getAssetInfo, updateAsset, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
   import {
     mdiCalendar,
@@ -61,44 +54,18 @@
 
   let { asset, albums = [], currentAlbum = null, onClose }: Props = $props();
 
-  const getDimensions = (exifInfo: ExifResponseDto) => {
-    const { exifImageWidth: width, exifImageHeight: height } = exifInfo;
-    if (isFlipped(exifInfo.orientation)) {
-      return { width: height, height: width };
-    }
-
-    return { width, height };
-  };
-
   let showAssetPath = $state(false);
   let showEditFaces = $state(false);
-  let previousId: string | undefined = $state();
-
-  $effect(() => {
-    if (!previousId) {
-      previousId = asset.id;
-    }
-    if (asset.id !== previousId) {
-      showEditFaces = false;
-      previousId = asset.id;
-    }
-  });
-
   let isOwner = $derived($user?.id === asset.ownerId);
-
-  const handleNewAsset = async (newAsset: AssetResponseDto) => {
-    // TODO: check if reloading asset data is necessary
-    if (newAsset.id && !authManager.isSharedLink) {
-      const data = await getAssetInfo({ id: asset.id });
-      people = data?.people || [];
-      unassignedFaces = data?.unassignedFaces || [];
-    }
-  };
-
-  $effect(() => {
-    handlePromiseError(handleNewAsset(asset));
-  });
-
+  let people = $derived(asset.people || []);
+  let unassignedFaces = $derived(asset.unassignedFaces || []);
+  let showingHiddenPeople = $state(false);
+  let timeZone = $derived(asset.exifInfo?.timeZone);
+  let dateTime = $derived(
+    timeZone && asset.exifInfo?.dateTimeOriginal
+      ? fromISODateTime(asset.exifInfo.dateTimeOriginal, timeZone)
+      : fromISODateTimeUTC(asset.localDateTime),
+  );
   let latlng = $derived(
     (() => {
       const lat = asset.exifInfo?.latitude;
@@ -109,16 +76,17 @@
       }
     })(),
   );
+  let previousId: string | undefined = $state();
 
-  let people = $state(asset.people || []);
-  let unassignedFaces = $state(asset.unassignedFaces || []);
-  let showingHiddenPeople = $state(false);
-  let timeZone = $derived(asset.exifInfo?.timeZone);
-  let dateTime = $derived(
-    timeZone && asset.exifInfo?.dateTimeOriginal
-      ? fromISODateTime(asset.exifInfo.dateTimeOriginal, timeZone)
-      : fromISODateTimeUTC(asset.localDateTime),
-  );
+  $effect(() => {
+    if (!previousId) {
+      previousId = asset.id;
+    }
+    if (asset.id !== previousId) {
+      showEditFaces = false;
+      previousId = asset.id;
+    }
+  });
 
   const getMegapixel = (width: number, height: number): number | undefined => {
     const megapixel = Math.round((height * width) / 1_000_000);
@@ -130,11 +98,24 @@
     return undefined;
   };
 
+  const refreshAsset = async () => {
+    if (asset && !authManager.isSharedLink) {
+      asset = await getAssetInfo({ id: asset.id });
+    }
+  };
+
+  const handleNewAsset = async (newAsset: AssetResponseDto) => {
+    if (newAsset.id && newAsset.id !== asset.id) {
+      await refreshAsset();
+    }
+  };
+
+  $effect(() => {
+    handlePromiseError(handleNewAsset(asset));
+  });
+
   const handleRefreshPeople = async () => {
-    await getAssetInfo({ id: asset.id }).then((data) => {
-      people = data?.people || [];
-      unassignedFaces = data?.unassignedFaces || [];
-    });
+    await refreshAsset();
     showEditFaces = false;
   };
 

web/src/lib/utils/asset-utils.ts

@@ -34,6 +34,7 @@ import {
   type AssetResponseDto,
   type AssetTypeEnum,
   type DownloadInfoDto,
+  type ExifResponseDto,
   type StackResponseDto,
   type UserPreferencesResponseDto,
   type UserResponseDto,
@@ -328,6 +329,15 @@ export function isFlipped(orientation?: string | null) {
   return value && (isRotated270CW(value) || isRotated90CW(value));
 }
 
+export const getDimensions = (exifInfo: ExifResponseDto) => {
+  const { exifImageWidth: width, exifImageHeight: height } = exifInfo;
+  if (isFlipped(exifInfo.orientation)) {
+    return { width: height, height: width };
+  }
+
+  return { width, height };
+};
+
 export function getFileSize(asset: AssetResponseDto, maxPrecision = 4): string {
   const size = asset.exifInfo?.fileSizeInByte || 0;
   return size > 0 ? getByteUnitString(size, undefined, maxPrecision) : 'Invalid Data';