fix(web): unstacking issues (#4792)

* Fix typo

* Restore asset store consistency after unstacking

* Fix aspect ratio after unstacking

server/src/immich/api-v1/asset/asset-repository.ts

@@ -109,7 +109,9 @@ export class AssetRepository implements IAssetRepository {
         faces: {
           person: true,
         },
-        stack: true,
+        stack: {
+          exifInfo: true,
+        },
       },
       // We are specifically asking for this asset. Return it even if it is soft deleted
       withDeleted: true,

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -32,7 +32,7 @@
   export let showDownloadButton: boolean;
   export let showDetailButton: boolean;
   export let showSlideshow = false;
-  export let hasStackChildern = false;
+  export let hasStackChildren = false;
 
   $: isOwner = asset.ownerId === $page.data.user?.id;
 
@@ -176,7 +176,7 @@
               />
               <MenuOption on:click={() => onMenuClick('asProfileImage')} text="As profile picture" />
 
-              {#if hasStackChildern}
+              {#if hasStackChildren}
                 <MenuOption on:click={() => onMenuClick('unstack')} text="Un-Stack" />
               {/if}
 

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

@@ -549,7 +549,7 @@
       }
       asset.stackCount = 0;
       asset.stack = [];
-      assetStore?.updateAsset(asset);
+      assetStore?.updateAsset(asset, true);
 
       dispatch('unstack');
       notificationController.show({ type: NotificationType.Info, message: 'Un-stacked', timeout: 1500 });
@@ -575,7 +575,7 @@
         showDownloadButton={shouldShowDownloadButton}
         showDetailButton={shouldShowDetailButton}
         showSlideshow={!!assetStore}
-        hasStackChildern={$stackAssetsStore.length > 0}
+        hasStackChildren={$stackAssetsStore.length > 0}
         on:goBack={closeViewer}
         on:showDetail={showDetailInfoHandler}
         on:download={() => downloadFile(asset)}

web/src/lib/stores/assets.store.ts

@@ -317,7 +317,7 @@ export class AssetStore {
     return bucket.assets[Math.floor(Math.random() * bucket.assets.length)] || null;
   }
 
-  updateAsset(_asset: AssetResponseDto) {
+  updateAsset(_asset: AssetResponseDto, recalculate = false) {
     const asset = this.assets.find((asset) => asset.id === _asset.id);
     if (!asset) {
       return;
@@ -325,7 +325,7 @@ export class AssetStore {
 
     Object.assign(asset, _asset);
 
-    this.emit(false);
+    this.emit(recalculate);
   }
 
   removeAssets(ids: string[]) {