tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-10-31 02:39:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): show w x h correctly when media is rotated (#9435)

Browse Source
This commit is contained in:
Jason Rasmussen 2024-05-13 16:03:36 -04:00 committed by GitHub
parent 5985f72643
commit b7ebf3152f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@
import { user } from '$lib/stores/user.store'; import { user } from '$lib/stores/user.store';
import { websocketEvents } from '$lib/stores/websocket'; import { websocketEvents } from '$lib/stores/websocket';
import { getAssetThumbnailUrl, getPeopleThumbnailUrl, isSharedLink, handlePromiseError } from '$lib/utils'; 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 { autoGrowHeight } from '$lib/utils/autogrow';
import { clickOutside } from '$lib/utils/click-outside'; import { clickOutside } from '$lib/utils/click-outside';
import { import {
@ -17,6 +17,7 @@
updateAsset, updateAsset,
type AlbumResponseDto, type AlbumResponseDto,
type AssetResponseDto, type AssetResponseDto,
type ExifResponseDto,
} from '@immich/sdk'; } from '@immich/sdk';
import { import {
mdiCalendar, mdiCalendar,
@ -47,6 +48,15 @@
export let albums: AlbumResponseDto[] = []; export let albums: AlbumResponseDto[] = [];
export let currentAlbum: AlbumResponseDto | null = null; 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 showAssetPath = false;
let textArea: HTMLTextAreaElement; let textArea: HTMLTextAreaElement;
let description: string; let description: string;
@ -410,8 +420,8 @@
{getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP {getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
</p> </p>
{/if} {/if}
{@const { width, height } = getDimensions(asset.exifInfo)}
<p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p> <p>{width} x {height}</p>
{/if} {/if}
<p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p> <p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
</div> </div>

8
web/src/lib/utils/asset-utils.ts
View File

@ -218,14 +218,18 @@ function isRotated270CW(orientation: number) {
return orientation === 7 || orientation === 8 || orientation === -90; 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 * Returns aspect ratio for the asset
*/ */
export function getAssetRatio(asset: AssetResponseDto) { export function getAssetRatio(asset: AssetResponseDto) {
let height = asset.exifInfo?.exifImageHeight || 235; let height = asset.exifInfo?.exifImageHeight || 235;
let width = asset.exifInfo?.exifImageWidth || 235; let width = asset.exifInfo?.exifImageWidth || 235;
const orientation = Number(asset.exifInfo?.orientation); if (isFlipped(asset.exifInfo?.orientation)) {
if (orientation && (isRotated90CW(orientation) || isRotated270CW(orientation))) {
[width, height] = [height, width]; [width, height] = [height, width];
} }
return { width, height }; return { width, height };