From b7ebf3152f55cdfaa44908d5a87c10247592dbfb Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Mon, 13 May 2024 16:03:36 -0400
Subject: [PATCH] fix(web): show w x h correctly when media is rotated (#9435)

---
 .../components/asset-viewer/detail-panel.svelte  | 16 +++++++++++++---
 web/src/lib/utils/asset-utils.ts                 |  8 ++++++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 5c466208dd..653d5903d2 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -8,7 +8,7 @@
   import { user } from '$lib/stores/user.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { getAssetThumbnailUrl, getPeopleThumbnailUrl, isSharedLink, handlePromiseError } from '$lib/utils';
-  import { delay } from '$lib/utils/asset-utils';
+  import { delay, isFlipped } from '$lib/utils/asset-utils';
   import { autoGrowHeight } from '$lib/utils/autogrow';
   import { clickOutside } from '$lib/utils/click-outside';
   import {
@@ -17,6 +17,7 @@
     updateAsset,
     type AlbumResponseDto,
     type AssetResponseDto,
+    type ExifResponseDto,
   } from '@immich/sdk';
   import {
     mdiCalendar,
@@ -47,6 +48,15 @@
   export let albums: AlbumResponseDto[] = [];
   export let currentAlbum: AlbumResponseDto | null = null;
 
+  const getDimensions = (exifInfo: ExifResponseDto) => {
+    const { exifImageWidth: width, exifImageHeight: height } = exifInfo;
+    if (isFlipped(exifInfo.orientation)) {
+      return { width: height, height: width };
+    }
+
+    return { width, height };
+  };
+
   let showAssetPath = false;
   let textArea: HTMLTextAreaElement;
   let description: string;
@@ -410,8 +420,8 @@
                   {getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
                 </p>
               {/if}
-
-              <p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p>
+              {@const { width, height } = getDimensions(asset.exifInfo)}
+              <p>{width} x {height}</p>
             {/if}
             <p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
           </div>
diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index 5a69e6eea1..bda0bb6ffe 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -218,14 +218,18 @@ function isRotated270CW(orientation: number) {
   return orientation === 7 || orientation === 8 || orientation === -90;
 }
 
+export function isFlipped(orientation?: string | null) {
+  const value = Number(orientation);
+  return value && (isRotated270CW(value) || isRotated90CW(value));
+}
+
 /**
  * Returns aspect ratio for the asset
  */
 export function getAssetRatio(asset: AssetResponseDto) {
   let height = asset.exifInfo?.exifImageHeight || 235;
   let width = asset.exifInfo?.exifImageWidth || 235;
-  const orientation = Number(asset.exifInfo?.orientation);
-  if (orientation && (isRotated90CW(orientation) || isRotated270CW(orientation))) {
+  if (isFlipped(asset.exifInfo?.orientation)) {
     [width, height] = [height, width];
   }
   return { width, height };