mirror of
https://github.com/immich-app/immich.git
synced 2025-04-22 13:08:08 +02:00
623 lines
20 KiB
Svelte
623 lines
20 KiB
Svelte
<script lang="ts">
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
import ChangeDate from '$lib/components/shared-components/change-date.svelte';
|
|
import { AppRoute, QueryParameter, timeToLoadTheMap } from '$lib/constants';
|
|
import { boundingBoxesArray } from '$lib/stores/people.store';
|
|
import { locale } from '$lib/stores/preferences.store';
|
|
import { featureFlags } from '$lib/stores/server-config.store';
|
|
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 { autoGrowHeight } from '$lib/utils/autogrow';
|
|
import { clickOutside } from '$lib/utils/click-outside';
|
|
import {
|
|
ThumbnailFormat,
|
|
getAssetInfo,
|
|
updateAsset,
|
|
type AlbumResponseDto,
|
|
type AssetResponseDto,
|
|
} from '@immich/sdk';
|
|
import {
|
|
mdiCalendar,
|
|
mdiCameraIris,
|
|
mdiClose,
|
|
mdiEye,
|
|
mdiEyeOff,
|
|
mdiImageOutline,
|
|
mdiInformationOutline,
|
|
mdiMapMarkerOutline,
|
|
mdiPencil,
|
|
} from '@mdi/js';
|
|
import { DateTime } from 'luxon';
|
|
import { createEventDispatcher, onMount } from 'svelte';
|
|
import { slide } from 'svelte/transition';
|
|
import { asByteUnitString } from '../../utils/byte-units';
|
|
import { handleError } from '../../utils/handle-error';
|
|
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
|
|
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
|
import PersonSidePanel from '../faces-page/person-side-panel.svelte';
|
|
import ChangeLocation from '../shared-components/change-location.svelte';
|
|
import UserAvatar from '../shared-components/user-avatar.svelte';
|
|
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
|
import { NotificationType, notificationController } from '../shared-components/notification/notification';
|
|
import { shortcut } from '$lib/utils/shortcut';
|
|
|
|
export let asset: AssetResponseDto;
|
|
export let albums: AlbumResponseDto[] = [];
|
|
export let currentAlbum: AlbumResponseDto | null = null;
|
|
|
|
let showAssetPath = false;
|
|
let textArea: HTMLTextAreaElement;
|
|
let description: string;
|
|
let originalDescription: string;
|
|
let showEditFaces = false;
|
|
let previousId: string;
|
|
|
|
$: {
|
|
if (!previousId) {
|
|
previousId = asset.id;
|
|
}
|
|
if (asset.id !== previousId) {
|
|
showEditFaces = false;
|
|
previousId = asset.id;
|
|
}
|
|
}
|
|
|
|
$: isOwner = $user?.id === asset.ownerId;
|
|
|
|
const handleNewAsset = async (newAsset: AssetResponseDto) => {
|
|
description = newAsset?.exifInfo?.description || '';
|
|
|
|
// Get latest description from server
|
|
if (newAsset.id && !isSharedLink()) {
|
|
const data = await getAssetInfo({ id: asset.id });
|
|
people = data?.people || [];
|
|
|
|
description = data.exifInfo?.description || '';
|
|
}
|
|
originalDescription = description;
|
|
};
|
|
|
|
$: handlePromiseError(handleNewAsset(asset));
|
|
|
|
$: latlng = (() => {
|
|
const lat = asset.exifInfo?.latitude;
|
|
const lng = asset.exifInfo?.longitude;
|
|
|
|
if (lat && lng) {
|
|
return { lat: Number(lat.toFixed(7)), lng: Number(lng.toFixed(7)) };
|
|
}
|
|
})();
|
|
|
|
$: people = asset.people || [];
|
|
$: showingHiddenPeople = false;
|
|
|
|
onMount(() => {
|
|
return websocketEvents.on('on_asset_update', (assetUpdate) => {
|
|
if (assetUpdate.id === asset.id) {
|
|
asset = assetUpdate;
|
|
}
|
|
});
|
|
});
|
|
|
|
const dispatch = createEventDispatcher<{
|
|
close: void;
|
|
closeViewer: void;
|
|
}>();
|
|
|
|
const getMegapixel = (width: number, height: number): number | undefined => {
|
|
const megapixel = Math.round((height * width) / 1_000_000);
|
|
|
|
if (megapixel) {
|
|
return megapixel;
|
|
}
|
|
|
|
return undefined;
|
|
};
|
|
|
|
const handleRefreshPeople = async () => {
|
|
await getAssetInfo({ id: asset.id }).then((data) => {
|
|
people = data?.people || [];
|
|
textArea.value = data?.exifInfo?.description || '';
|
|
});
|
|
showEditFaces = false;
|
|
};
|
|
|
|
const handleFocusOut = async () => {
|
|
textArea.blur();
|
|
if (description === originalDescription) {
|
|
return;
|
|
}
|
|
originalDescription = description;
|
|
try {
|
|
await updateAsset({ id: asset.id, updateAssetDto: { description } });
|
|
notificationController.show({
|
|
type: NotificationType.Info,
|
|
message: 'Asset description has been updated',
|
|
});
|
|
} catch (error) {
|
|
handleError(error, 'Cannot update the description');
|
|
}
|
|
};
|
|
|
|
const toggleAssetPath = () => (showAssetPath = !showAssetPath);
|
|
|
|
let isShowChangeDate = false;
|
|
|
|
async function handleConfirmChangeDate(dateTimeOriginal: string) {
|
|
isShowChangeDate = false;
|
|
try {
|
|
await updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal } });
|
|
} catch (error) {
|
|
handleError(error, 'Unable to change date');
|
|
}
|
|
}
|
|
|
|
let isShowChangeLocation = false;
|
|
|
|
async function handleConfirmChangeLocation(gps: { lng: number; lat: number }) {
|
|
isShowChangeLocation = false;
|
|
|
|
try {
|
|
await updateAsset({ id: asset.id, updateAssetDto: { latitude: gps.lat, longitude: gps.lng } });
|
|
} catch (error) {
|
|
handleError(error, 'Unable to change location');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<section class="relative p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
|
|
<div class="flex place-items-center gap-2">
|
|
<CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
|
|
<p class="text-lg text-immich-fg dark:text-immich-dark-fg">Info</p>
|
|
</div>
|
|
|
|
{#if asset.isOffline}
|
|
<section class="px-4 py-4">
|
|
<div role="alert">
|
|
<div class="rounded-t bg-red-500 px-4 py-2 font-bold text-white">Asset offline</div>
|
|
<div class="rounded-b border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
|
|
<p>
|
|
This asset is offline. Immich can not access its file location. Please ensure the asset is available and
|
|
then rescan the library.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if isOwner}
|
|
<section class="px-4 mt-10">
|
|
{#key asset.id}
|
|
<textarea
|
|
disabled={!isOwner || isSharedLink()}
|
|
bind:this={textArea}
|
|
class="max-h-[500px]
|
|
w-full resize-none border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary immich-scrollbar"
|
|
placeholder={isOwner ? 'Add a description' : ''}
|
|
on:focusout={handleFocusOut}
|
|
on:input={() => autoGrowHeight(textArea)}
|
|
bind:value={description}
|
|
use:autoGrowHeight
|
|
use:clickOutside
|
|
on:outclick={handleFocusOut}
|
|
use:shortcut={{
|
|
shortcut: { key: 'Enter', ctrl: true },
|
|
onShortcut: () => handlePromiseError(handleFocusOut()),
|
|
}}
|
|
/>
|
|
{/key}
|
|
</section>
|
|
{:else if description}
|
|
<p class="px-4 break-words whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
|
|
{/if}
|
|
|
|
{#if !isSharedLink() && people.length > 0}
|
|
<section class="px-4 py-4 text-sm">
|
|
<div class="flex h-10 w-full items-center justify-between">
|
|
<h2>PEOPLE</h2>
|
|
<div class="flex gap-2 items-center">
|
|
{#if people.some((person) => person.isHidden)}
|
|
<CircleIconButton
|
|
title="Show hidden people"
|
|
icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
|
|
padding="1"
|
|
buttonSize="32"
|
|
on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
|
|
/>
|
|
{/if}
|
|
<CircleIconButton
|
|
title="Edit people"
|
|
icon={mdiPencil}
|
|
padding="1"
|
|
size="20"
|
|
buttonSize="32"
|
|
on:click={() => (showEditFaces = true)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2 flex flex-wrap gap-2">
|
|
{#each people as person, index (person.id)}
|
|
{#if showingHiddenPeople || !person.isHidden}
|
|
<a
|
|
class="w-[90px]"
|
|
href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={currentAlbum?.id
|
|
? `${AppRoute.ALBUMS}/${currentAlbum?.id}`
|
|
: AppRoute.PHOTOS}"
|
|
on:focus={() => ($boundingBoxesArray = people[index].faces)}
|
|
on:blur={() => ($boundingBoxesArray = [])}
|
|
on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
|
|
on:mouseleave={() => ($boundingBoxesArray = [])}
|
|
>
|
|
<div class="relative">
|
|
<ImageThumbnail
|
|
curve
|
|
shadow
|
|
url={getPeopleThumbnailUrl(person.id)}
|
|
altText={person.name}
|
|
title={person.name}
|
|
widthStyle="90px"
|
|
heightStyle="90px"
|
|
thumbhash={null}
|
|
hidden={person.isHidden}
|
|
/>
|
|
</div>
|
|
<p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
|
|
{#if person.birthDate}
|
|
{@const personBirthDate = DateTime.fromISO(person.birthDate)}
|
|
{@const age = Math.floor(DateTime.fromISO(asset.fileCreatedAt).diff(personBirthDate, 'years').years)}
|
|
{@const ageInMonths = Math.floor(
|
|
DateTime.fromISO(asset.fileCreatedAt).diff(personBirthDate, 'months').months,
|
|
)}
|
|
{#if age >= 0}
|
|
<p
|
|
class="font-light"
|
|
title={personBirthDate.toLocaleString(
|
|
{
|
|
month: 'long',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
},
|
|
{ locale: $locale },
|
|
)}
|
|
>
|
|
{#if ageInMonths <= 11}
|
|
Age {ageInMonths} months
|
|
{:else if ageInMonths > 12 && ageInMonths <= 23}
|
|
Age 1 year, {ageInMonths - 12} months
|
|
{:else}
|
|
Age {age}
|
|
{/if}
|
|
</p>
|
|
{/if}
|
|
{/if}
|
|
</a>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
<div class="px-4 py-4">
|
|
{#if asset.exifInfo}
|
|
<div class="flex h-10 w-full items-center justify-between text-sm">
|
|
<h2>DETAILS</h2>
|
|
</div>
|
|
{:else}
|
|
<p class="text-sm">NO EXIF INFO AVAILABLE</p>
|
|
{/if}
|
|
|
|
{#if asset.exifInfo?.dateTimeOriginal}
|
|
{@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
|
|
zone: asset.exifInfo.timeZone ?? undefined,
|
|
})}
|
|
<button
|
|
type="button"
|
|
class="flex w-full text-left justify-between place-items-start gap-4 py-4"
|
|
on:click={() => (isOwner ? (isShowChangeDate = true) : null)}
|
|
title={isOwner ? 'Edit date' : ''}
|
|
class:hover:dark:text-immich-dark-primary={isOwner}
|
|
class:hover:text-immich-primary={isOwner}
|
|
>
|
|
<div class="flex gap-4">
|
|
<div>
|
|
<Icon path={mdiCalendar} size="24" />
|
|
</div>
|
|
|
|
<div>
|
|
<p>
|
|
{assetDateTimeOriginal.toLocaleString(
|
|
{
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
},
|
|
{ locale: $locale },
|
|
)}
|
|
</p>
|
|
<div class="flex gap-2 text-sm">
|
|
<p>
|
|
{assetDateTimeOriginal.toLocaleString(
|
|
{
|
|
weekday: 'short',
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
timeZoneName: 'longOffset',
|
|
},
|
|
{ locale: $locale },
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{#if isOwner}
|
|
<div class="p-1">
|
|
<Icon path={mdiPencil} size="20" />
|
|
</div>
|
|
{/if}
|
|
</button>
|
|
{:else if !asset.exifInfo?.dateTimeOriginal && isOwner}
|
|
<div class="flex justify-between place-items-start gap-4 py-4">
|
|
<div class="flex gap-4">
|
|
<div>
|
|
<Icon path={mdiCalendar} size="24" />
|
|
</div>
|
|
</div>
|
|
<div class="p-1">
|
|
<Icon path={mdiPencil} size="20" />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if isShowChangeDate}
|
|
{@const assetDateTimeOriginal = asset.exifInfo?.dateTimeOriginal
|
|
? DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
|
|
zone: asset.exifInfo.timeZone ?? undefined,
|
|
locale: $locale,
|
|
})
|
|
: DateTime.now()}
|
|
<ChangeDate
|
|
initialDate={assetDateTimeOriginal}
|
|
on:confirm={({ detail: date }) => handleConfirmChangeDate(date)}
|
|
on:cancel={() => (isShowChangeDate = false)}
|
|
/>
|
|
{/if}
|
|
|
|
{#if asset.exifInfo?.fileSizeInByte}
|
|
<div class="flex gap-4 py-4">
|
|
<div><Icon path={mdiImageOutline} size="24" /></div>
|
|
|
|
<div>
|
|
<p class="break-all flex place-items-center gap-2">
|
|
{asset.originalFileName}
|
|
{#if isOwner}
|
|
<CircleIconButton
|
|
icon={mdiInformationOutline}
|
|
title="Show file location"
|
|
size="16"
|
|
padding="2"
|
|
on:click={toggleAssetPath}
|
|
/>
|
|
{/if}
|
|
</p>
|
|
<div class="flex gap-2 text-sm">
|
|
{#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
|
|
{#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
|
|
<p>
|
|
{getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
|
|
</p>
|
|
{/if}
|
|
|
|
<p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p>
|
|
{/if}
|
|
<p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
|
|
</div>
|
|
{#if showAssetPath}
|
|
<p class="text-xs opacity-50 break-all" transition:slide={{ duration: 250 }}>
|
|
{asset.originalPath}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if asset.exifInfo?.make || asset.exifInfo?.model || asset.exifInfo?.fNumber}
|
|
<div class="flex gap-4 py-4">
|
|
<div><Icon path={mdiCameraIris} size="24" /></div>
|
|
|
|
<div>
|
|
<p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
|
|
<div class="flex gap-2 text-sm">
|
|
{#if asset.exifInfo?.fNumber}
|
|
<p>{`ƒ/${asset.exifInfo.fNumber.toLocaleString($locale)}` || ''}</p>
|
|
{/if}
|
|
|
|
{#if asset.exifInfo.exposureTime}
|
|
<p>{`${asset.exifInfo.exposureTime}`}</p>
|
|
{/if}
|
|
|
|
{#if asset.exifInfo.focalLength}
|
|
<p>{`${asset.exifInfo.focalLength.toLocaleString($locale)} mm`}</p>
|
|
{/if}
|
|
|
|
{#if asset.exifInfo.iso}
|
|
<p>
|
|
{`ISO ${asset.exifInfo.iso}`}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if asset.exifInfo?.city}
|
|
<button
|
|
type="button"
|
|
class="flex w-full text-left justify-between place-items-start gap-4 py-4"
|
|
on:click={() => (isOwner ? (isShowChangeLocation = true) : null)}
|
|
title={isOwner ? 'Edit location' : ''}
|
|
class:hover:dark:text-immich-dark-primary={isOwner}
|
|
class:hover:text-immich-primary={isOwner}
|
|
>
|
|
<div class="flex gap-4">
|
|
<div><Icon path={mdiMapMarkerOutline} size="24" /></div>
|
|
|
|
<div>
|
|
<p>{asset.exifInfo.city}</p>
|
|
{#if asset.exifInfo?.state}
|
|
<div class="flex gap-2 text-sm">
|
|
<p>{asset.exifInfo.state}</p>
|
|
</div>
|
|
{/if}
|
|
{#if asset.exifInfo?.country}
|
|
<div class="flex gap-2 text-sm">
|
|
<p>{asset.exifInfo.country}</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if isOwner}
|
|
<div>
|
|
<Icon path={mdiPencil} size="20" />
|
|
</div>
|
|
{/if}
|
|
</button>
|
|
{:else if !asset.exifInfo?.city && isOwner}
|
|
<button
|
|
type="button"
|
|
class="flex w-full text-left justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
|
|
on:click={() => (isShowChangeLocation = true)}
|
|
title="Add location"
|
|
>
|
|
<div class="flex gap-4">
|
|
<div>
|
|
<div><Icon path={mdiMapMarkerOutline} size="24" /></div>
|
|
</div>
|
|
|
|
<p>Add a location</p>
|
|
</div>
|
|
<div class="focus:outline-none p-1">
|
|
<Icon path={mdiPencil} size="20" />
|
|
</div>
|
|
</button>
|
|
{/if}
|
|
{#if isShowChangeLocation}
|
|
<ChangeLocation
|
|
{asset}
|
|
on:confirm={({ detail: gps }) => handleConfirmChangeLocation(gps)}
|
|
on:cancel={() => (isShowChangeLocation = false)}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
|
|
{#if latlng && $featureFlags.loaded && $featureFlags.map}
|
|
<div class="h-[360px]">
|
|
{#await import('../shared-components/map/map.svelte')}
|
|
{#await delay(timeToLoadTheMap) then}
|
|
<!-- show the loading spinner only if loading the map takes too much time -->
|
|
<div class="flex items-center justify-center h-full w-full">
|
|
<LoadingSpinner />
|
|
</div>
|
|
{/await}
|
|
{:then component}
|
|
<svelte:component
|
|
this={component.default}
|
|
mapMarkers={[
|
|
{
|
|
lat: latlng.lat,
|
|
lon: latlng.lng,
|
|
id: asset.id,
|
|
city: asset.exifInfo?.city ?? null,
|
|
state: asset.exifInfo?.state ?? null,
|
|
country: asset.exifInfo?.country ?? null,
|
|
},
|
|
]}
|
|
center={latlng}
|
|
zoom={15}
|
|
simplified
|
|
useLocationPin
|
|
>
|
|
<svelte:fragment slot="popup" let:marker>
|
|
{@const { lat, lon } = marker}
|
|
<div class="flex flex-col items-center gap-1">
|
|
<p class="font-bold">{lat.toPrecision(6)}, {lon.toPrecision(6)}</p>
|
|
<a
|
|
href="https://www.openstreetmap.org/?mlat={lat}&mlon={lon}&zoom=15#map=15/{lat}/{lon}"
|
|
target="_blank"
|
|
class="font-medium text-immich-primary"
|
|
>
|
|
Open in OpenStreetMap
|
|
</a>
|
|
</div>
|
|
</svelte:fragment>
|
|
</svelte:component>
|
|
{/await}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if currentAlbum && currentAlbum.sharedUsers.length > 0 && asset.owner}
|
|
<section class="px-6 dark:text-immich-dark-fg mt-4">
|
|
<p class="text-sm">SHARED BY</p>
|
|
<div class="flex gap-4 pt-4">
|
|
<div>
|
|
<UserAvatar user={asset.owner} size="md" />
|
|
</div>
|
|
|
|
<div class="mb-auto mt-auto">
|
|
<p>
|
|
{asset.owner.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if albums.length > 0}
|
|
<section class="p-6 dark:text-immich-dark-fg">
|
|
<p class="pb-4 text-sm">APPEARS IN</p>
|
|
{#each albums as album}
|
|
<a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
|
|
<div class="flex gap-4 py-2 hover:cursor-pointer items-center">
|
|
<div>
|
|
<img
|
|
alt={album.albumName}
|
|
class="h-[50px] w-[50px] rounded object-cover"
|
|
src={album.albumThumbnailAssetId &&
|
|
getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
|
|
draggable="false"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-auto mt-auto">
|
|
<p class="dark:text-immich-dark-primary">{album.albumName}</p>
|
|
<div class="flex flex-col gap-0 text-sm">
|
|
<div>
|
|
<span>{album.assetCount} items</span>
|
|
{#if album.shared}
|
|
<span> • Shared</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</section>
|
|
{/if}
|
|
|
|
{#if showEditFaces}
|
|
<PersonSidePanel
|
|
assetId={asset.id}
|
|
assetType={asset.type}
|
|
on:close={() => {
|
|
showEditFaces = false;
|
|
}}
|
|
on:refresh={handleRefreshPeople}
|
|
/>
|
|
{/if}
|