self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-03 13:09:27 +02:00
Code Issues Releases 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 { 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>

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;
}
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 };