mirror of
https://github.com/immich-app/immich.git
synced 2026-05-18 03:10:24 +03:00
fix(web): prevent interaction with detail panel behind person side panel (#27309)
This commit is contained in:
Min Idzelis
@@ -37,6 +37,7 @@
|
|||||||
mdiPlus,
|
mdiPlus,
|
||||||
} from '@mdi/js';
|
} from '@mdi/js';
|
||||||
import { DateTime } from 'luxon';
|
import { DateTime } from 'luxon';
|
||||||
|
import { onDestroy } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import { slide } from 'svelte/transition';
|
import { slide } from 'svelte/transition';
|
||||||
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
|
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
|
||||||
@@ -52,7 +53,6 @@
|
|||||||
|
|
||||||
let { asset, currentAlbum = null }: Props = $props();
|
let { asset, currentAlbum = null }: Props = $props();
|
||||||
|
|
||||||
let showEditFaces = $derived(assetViewerManager.isEditFacesPanelOpen);
|
|
||||||
let isOwner = $derived(authManager.authenticated && authManager.user.id === asset.ownerId);
|
let isOwner = $derived(authManager.authenticated && authManager.user.id === asset.ownerId);
|
||||||
let people = $derived(asset.people || []);
|
let people = $derived(asset.people || []);
|
||||||
let unassignedFaces = $derived(asset.unassignedFaces || []);
|
let unassignedFaces = $derived(asset.unassignedFaces || []);
|
||||||
@@ -118,379 +118,385 @@
|
|||||||
// Remove the last part of the path to get the parent path
|
// Remove the last part of the path to get the parent path
|
||||||
return Route.folders({ path: getParentPath(asset.originalPath) });
|
return Route.folders({ path: getParentPath(asset.originalPath) });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
assetViewerManager.closeEditFacesPanel();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<OnEvents onAlbumAddAssets={() => (albums = refreshAlbums())} />
|
<OnEvents onAlbumAddAssets={() => (albums = refreshAlbums())} />
|
||||||
|
|
||||||
<section class="relative p-2">
|
{#if !assetViewerManager.isEditFacesPanelOpen}
|
||||||
<div class="flex place-items-center gap-2">
|
<section class="relative p-2">
|
||||||
<IconButton
|
<div class="flex place-items-center gap-2">
|
||||||
icon={mdiClose}
|
<IconButton
|
||||||
aria-label={$t('close')}
|
icon={mdiClose}
|
||||||
onclick={() => assetViewerManager.closeDetailPanel()}
|
aria-label={$t('close')}
|
||||||
shape="round"
|
onclick={() => assetViewerManager.closeDetailPanel()}
|
||||||
color="secondary"
|
shape="round"
|
||||||
variant="ghost"
|
color="secondary"
|
||||||
/>
|
variant="ghost"
|
||||||
<p class="text-lg text-immich-fg dark:text-immich-dark-fg">{$t('info')}</p>
|
/>
|
||||||
</div>
|
<p class="text-lg text-immich-fg dark:text-immich-dark-fg">{$t('info')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{#if asset.isOffline}
|
{#if asset.isOffline}
|
||||||
<section class="px-4 py-4">
|
<section class="px-4 py-4">
|
||||||
<div role="alert">
|
<div role="alert">
|
||||||
<div class="rounded-t bg-red-500 px-4 py-2 font-bold text-white">
|
<div class="rounded-t bg-red-500 px-4 py-2 font-bold text-white">
|
||||||
{$t('asset_offline')}
|
{$t('asset_offline')}
|
||||||
|
</div>
|
||||||
|
<div class="border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
|
||||||
|
<p>
|
||||||
|
{#if authManager.authenticated && authManager.user.isAdmin}
|
||||||
|
{$t('admin.asset_offline_description')}
|
||||||
|
{:else}
|
||||||
|
{$t('asset_offline_description')}
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-b bg-red-500 px-4 py-2 text-white text-sm">
|
||||||
|
<p>{asset.originalPath}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
|
</section>
|
||||||
<p>
|
{/if}
|
||||||
{#if authManager.authenticated && authManager.user.isAdmin}
|
|
||||||
{$t('admin.asset_offline_description')}
|
<DetailPanelDescription {asset} {isOwner} />
|
||||||
{:else}
|
<DetailPanelRating {asset} {isOwner} />
|
||||||
{$t('asset_offline_description')}
|
|
||||||
|
{#if !authManager.isSharedLink && isOwner}
|
||||||
|
<section class="px-4 pt-4 text-sm">
|
||||||
|
<div class="flex h-10 w-full items-center justify-between">
|
||||||
|
<Text size="small" color="muted">{$t('people')}</Text>
|
||||||
|
<div class="flex gap-2 items-center">
|
||||||
|
{#if people.some((person) => person.isHidden)}
|
||||||
|
<IconButton
|
||||||
|
aria-label={$t('show_hidden_people')}
|
||||||
|
icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
|
||||||
|
size="medium"
|
||||||
|
shape="round"
|
||||||
|
color="secondary"
|
||||||
|
variant="ghost"
|
||||||
|
onclick={() => (showingHiddenPeople = !showingHiddenPeople)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
<IconButton
|
||||||
|
aria-label={$t('tag_people')}
|
||||||
|
icon={mdiPlus}
|
||||||
|
size="medium"
|
||||||
|
shape="round"
|
||||||
|
color="secondary"
|
||||||
|
variant="ghost"
|
||||||
|
onclick={() => assetViewerManager.toggleFaceEditMode()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{#if people.length > 0 || unassignedFaces.length > 0}
|
||||||
|
<IconButton
|
||||||
|
aria-label={$t('edit_people')}
|
||||||
|
icon={mdiPencil}
|
||||||
|
size="medium"
|
||||||
|
shape="round"
|
||||||
|
color="secondary"
|
||||||
|
variant="ghost"
|
||||||
|
onclick={() => assetViewerManager.openEditFacesPanel()}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-2 flex flex-wrap gap-2">
|
||||||
|
{#each people as person, index (person.id)}
|
||||||
|
{#if showingHiddenPeople || !person.isHidden}
|
||||||
|
{@const isHighlighted = people[index].faces.some((f) => $boundingBoxesArray.some((b) => b.id === f.id))}
|
||||||
|
<a
|
||||||
|
class="group w-22 outline-none"
|
||||||
|
href={Route.viewPerson(person, { previousRoute })}
|
||||||
|
onfocus={() => ($boundingBoxesArray = people[index].faces)}
|
||||||
|
onblur={() => ($boundingBoxesArray = [])}
|
||||||
|
onmouseover={() => ($boundingBoxesArray = people[index].faces)}
|
||||||
|
onmouseleave={() => ($boundingBoxesArray = [])}
|
||||||
|
>
|
||||||
|
<div class="relative">
|
||||||
|
<ImageThumbnail
|
||||||
|
curve
|
||||||
|
shadow
|
||||||
|
url={getPeopleThumbnailUrl(person)}
|
||||||
|
altText={person.name}
|
||||||
|
title={person.name}
|
||||||
|
widthStyle="90px"
|
||||||
|
heightStyle="90px"
|
||||||
|
hidden={person.isHidden}
|
||||||
|
highlighted={isHighlighted}
|
||||||
|
class="group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-immich-primary dark:group-focus-visible:outline-immich-dark-primary"
|
||||||
|
/>
|
||||||
|
</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.localDateTime).diff(personBirthDate, 'years').years)}
|
||||||
|
{@const ageInMonths = Math.floor(
|
||||||
|
DateTime.fromISO(asset.localDateTime).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}
|
||||||
|
{$t('age_months', { values: { months: ageInMonths } })}
|
||||||
|
{:else if ageInMonths > 12 && ageInMonths <= 23}
|
||||||
|
{$t('age_year_months', { values: { months: ageInMonths - 12 } })}
|
||||||
|
{:else}
|
||||||
|
{$t('age_years', { values: { years: 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">
|
||||||
|
<Text size="small" color="muted">{$t('details')}</Text>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<Text size="small" color="muted">{$t('no_exif_info_available')}</Text>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<DetailPanelDate {asset} />
|
||||||
|
|
||||||
|
<div class="flex gap-4 py-4">
|
||||||
|
<div><Icon icon={mdiImageOutline} size="24" /></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="break-all flex place-items-center gap-2 whitespace-pre-wrap">
|
||||||
|
{asset.originalFileName}
|
||||||
|
{#if isOwner}
|
||||||
|
<IconButton
|
||||||
|
icon={mdiInformationOutline}
|
||||||
|
aria-label={$t('show_file_location')}
|
||||||
|
size="small"
|
||||||
|
shape="round"
|
||||||
|
color="secondary"
|
||||||
|
variant="ghost"
|
||||||
|
onclick={() => assetViewerManager.toggleAssetPath()}
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
{#if assetViewerManager.isShowAssetPath}
|
||||||
<div class="rounded-b bg-red-500 px-4 py-2 text-white text-sm">
|
<p class="text-xs opacity-50 break-all pb-2 hover:text-primary" transition:slide={{ duration: 250 }}>
|
||||||
<p>{asset.originalPath}</p>
|
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve this is supposed to be treated as an absolute/external link -->
|
||||||
</div>
|
<a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">
|
||||||
</div>
|
{asset.originalPath}
|
||||||
</section>
|
</a>
|
||||||
{/if}
|
</p>
|
||||||
|
|
||||||
<DetailPanelDescription {asset} {isOwner} />
|
|
||||||
<DetailPanelRating {asset} {isOwner} />
|
|
||||||
|
|
||||||
{#if !authManager.isSharedLink && isOwner}
|
|
||||||
<section class="px-4 pt-4 text-sm">
|
|
||||||
<div class="flex h-10 w-full items-center justify-between">
|
|
||||||
<Text size="small" color="muted">{$t('people')}</Text>
|
|
||||||
<div class="flex gap-2 items-center">
|
|
||||||
{#if people.some((person) => person.isHidden)}
|
|
||||||
<IconButton
|
|
||||||
aria-label={$t('show_hidden_people')}
|
|
||||||
icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
|
|
||||||
size="medium"
|
|
||||||
shape="round"
|
|
||||||
color="secondary"
|
|
||||||
variant="ghost"
|
|
||||||
onclick={() => (showingHiddenPeople = !showingHiddenPeople)}
|
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
<IconButton
|
{#if (asset.exifInfo?.exifImageHeight && asset.exifInfo?.exifImageWidth) || asset.exifInfo?.fileSizeInByte}
|
||||||
aria-label={$t('tag_people')}
|
<div class="flex gap-2 text-sm">
|
||||||
icon={mdiPlus}
|
{#if asset.exifInfo?.exifImageHeight && asset.exifInfo?.exifImageWidth}
|
||||||
size="medium"
|
{#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
|
||||||
shape="round"
|
<p>
|
||||||
color="secondary"
|
{getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
|
||||||
variant="ghost"
|
|
||||||
onclick={() => assetViewerManager.toggleFaceEditMode()}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{#if people.length > 0 || unassignedFaces.length > 0}
|
|
||||||
<IconButton
|
|
||||||
aria-label={$t('edit_people')}
|
|
||||||
icon={mdiPencil}
|
|
||||||
size="medium"
|
|
||||||
shape="round"
|
|
||||||
color="secondary"
|
|
||||||
variant="ghost"
|
|
||||||
onclick={() => assetViewerManager.openEditFacesPanel()}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-2 flex flex-wrap gap-2">
|
|
||||||
{#each people as person, index (person.id)}
|
|
||||||
{#if showingHiddenPeople || !person.isHidden}
|
|
||||||
{@const isHighlighted = people[index].faces.some((f) => $boundingBoxesArray.some((b) => b.id === f.id))}
|
|
||||||
<a
|
|
||||||
class="group w-22 outline-none"
|
|
||||||
href={Route.viewPerson(person, { previousRoute })}
|
|
||||||
onfocus={() => ($boundingBoxesArray = people[index].faces)}
|
|
||||||
onblur={() => ($boundingBoxesArray = [])}
|
|
||||||
onmouseover={() => ($boundingBoxesArray = people[index].faces)}
|
|
||||||
onmouseleave={() => ($boundingBoxesArray = [])}
|
|
||||||
>
|
|
||||||
<div class="relative">
|
|
||||||
<ImageThumbnail
|
|
||||||
curve
|
|
||||||
shadow
|
|
||||||
url={getPeopleThumbnailUrl(person)}
|
|
||||||
altText={person.name}
|
|
||||||
title={person.name}
|
|
||||||
widthStyle="90px"
|
|
||||||
heightStyle="90px"
|
|
||||||
hidden={person.isHidden}
|
|
||||||
highlighted={isHighlighted}
|
|
||||||
class="group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-immich-primary dark:group-focus-visible:outline-immich-dark-primary"
|
|
||||||
/>
|
|
||||||
</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.localDateTime).diff(personBirthDate, 'years').years)}
|
|
||||||
{@const ageInMonths = Math.floor(
|
|
||||||
DateTime.fromISO(asset.localDateTime).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}
|
|
||||||
{$t('age_months', { values: { months: ageInMonths } })}
|
|
||||||
{:else if ageInMonths > 12 && ageInMonths <= 23}
|
|
||||||
{$t('age_year_months', { values: { months: ageInMonths - 12 } })}
|
|
||||||
{:else}
|
|
||||||
{$t('age_years', { values: { years: age } })}
|
|
||||||
{/if}
|
|
||||||
</p>
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
{@const { width, height } = getDimensions(asset.exifInfo)}
|
||||||
|
<p>{width} x {height}</p>
|
||||||
{/if}
|
{/if}
|
||||||
</a>
|
{#if asset.exifInfo?.fileSizeInByte}
|
||||||
|
<p>{getByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if asset.exifInfo?.make || asset.exifInfo?.model || asset.exifInfo?.exposureTime || asset.exifInfo?.iso}
|
||||||
|
<div class="flex gap-4 py-4">
|
||||||
|
<div><Icon icon={mdiCamera} size="24" /></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{#if asset.exifInfo?.make || asset.exifInfo?.model}
|
||||||
|
<p>
|
||||||
|
<a
|
||||||
|
href={Route.search({
|
||||||
|
make: asset.exifInfo?.make ?? undefined,
|
||||||
|
model: asset.exifInfo?.model ?? undefined,
|
||||||
|
})}
|
||||||
|
title="{$t('search_for')} {asset.exifInfo.make || ''} {asset.exifInfo.model || ''}"
|
||||||
|
class="hover:text-primary"
|
||||||
|
>
|
||||||
|
{asset.exifInfo.make || ''}
|
||||||
|
{asset.exifInfo.model || ''}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="flex gap-2 text-sm">
|
||||||
|
{#if asset.exifInfo.exposureTime}
|
||||||
|
<p>{`${asset.exifInfo.exposureTime} s`}</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if asset.exifInfo.iso}
|
||||||
|
<p>{`ISO ${asset.exifInfo.iso}`}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if asset.exifInfo?.lensModel || asset.exifInfo?.fNumber || asset.exifInfo?.focalLength}
|
||||||
|
<div class="flex gap-4 py-4">
|
||||||
|
<div><Icon icon={mdiCameraIris} size="24" /></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{#if asset.exifInfo?.lensModel}
|
||||||
|
<p>
|
||||||
|
<a
|
||||||
|
href={Route.search({ lensModel: asset.exifInfo.lensModel })}
|
||||||
|
title="{$t('search_for')} {asset.exifInfo.lensModel}"
|
||||||
|
class="hover:text-primary line-clamp-1"
|
||||||
|
>
|
||||||
|
{asset.exifInfo.lensModel}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="flex gap-2 text-sm">
|
||||||
|
{#if asset.exifInfo?.fNumber}
|
||||||
|
<p>ƒ/{asset.exifInfo.fNumber.toLocaleString($locale)}</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if asset.exifInfo.focalLength}
|
||||||
|
<p>{`${asset.exifInfo.focalLength.toLocaleString($locale)} mm`}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<DetailPanelLocation {isOwner} {asset} />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{#if latlng && featureFlagsManager.value.map}
|
||||||
|
<div class="h-90">
|
||||||
|
{#await import('$lib/components/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 { default: Map }}
|
||||||
|
<Map
|
||||||
|
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}
|
||||||
|
showSettings={false}
|
||||||
|
zoom={12.5}
|
||||||
|
simplified
|
||||||
|
useLocationPin
|
||||||
|
showSimpleControls={!assetViewerManager.isEditFacesPanelOpen}
|
||||||
|
onOpenInMapView={() => goto(Route.map({ ...latlng, zoom: 12.5 }))}
|
||||||
|
>
|
||||||
|
{#snippet popup({ 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=13#map=15/{lat}/{lon}"
|
||||||
|
target="_blank"
|
||||||
|
class="font-medium text-primary underline focus:outline-none"
|
||||||
|
>
|
||||||
|
{$t('open_in_openstreetmap')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/snippet}
|
||||||
|
</Map>
|
||||||
|
{/await}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if currentAlbum && currentAlbum.albumUsers.length > 0 && asset.owner}
|
||||||
|
<section class="px-6 dark:text-immich-dark-fg mt-4">
|
||||||
|
<Text size="small" color="muted">{$t('shared_by')}</Text>
|
||||||
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="px-4 py-4">
|
{#await albums then albums}
|
||||||
{#if asset.exifInfo}
|
{#if albums.length > 0}
|
||||||
<div class="flex h-10 w-full items-center justify-between text-sm">
|
<section class="px-6 py-6 dark:text-immich-dark-fg">
|
||||||
<Text size="small" color="muted">{$t('details')}</Text>
|
<div class="pb-4">
|
||||||
</div>
|
<Text size="small" color="muted">{$t('appears_in')}</Text>
|
||||||
{:else}
|
|
||||||
<Text size="small" color="muted">{$t('no_exif_info_available')}</Text>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<DetailPanelDate {asset} />
|
|
||||||
|
|
||||||
<div class="flex gap-4 py-4">
|
|
||||||
<div><Icon icon={mdiImageOutline} size="24" /></div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p class="break-all flex place-items-center gap-2 whitespace-pre-wrap">
|
|
||||||
{asset.originalFileName}
|
|
||||||
{#if isOwner}
|
|
||||||
<IconButton
|
|
||||||
icon={mdiInformationOutline}
|
|
||||||
aria-label={$t('show_file_location')}
|
|
||||||
size="small"
|
|
||||||
shape="round"
|
|
||||||
color="secondary"
|
|
||||||
variant="ghost"
|
|
||||||
onclick={() => assetViewerManager.toggleAssetPath()}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</p>
|
|
||||||
{#if assetViewerManager.isShowAssetPath}
|
|
||||||
<p class="text-xs opacity-50 break-all pb-2 hover:text-primary" transition:slide={{ duration: 250 }}>
|
|
||||||
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve this is supposed to be treated as an absolute/external link -->
|
|
||||||
<a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">
|
|
||||||
{asset.originalPath}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
{#if (asset.exifInfo?.exifImageHeight && asset.exifInfo?.exifImageWidth) || asset.exifInfo?.fileSizeInByte}
|
|
||||||
<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}
|
|
||||||
{@const { width, height } = getDimensions(asset.exifInfo)}
|
|
||||||
<p>{width} x {height}</p>
|
|
||||||
{/if}
|
|
||||||
{#if asset.exifInfo?.fileSizeInByte}
|
|
||||||
<p>{getByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if asset.exifInfo?.make || asset.exifInfo?.model || asset.exifInfo?.exposureTime || asset.exifInfo?.iso}
|
|
||||||
<div class="flex gap-4 py-4">
|
|
||||||
<div><Icon icon={mdiCamera} size="24" /></div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{#if asset.exifInfo?.make || asset.exifInfo?.model}
|
|
||||||
<p>
|
|
||||||
<a
|
|
||||||
href={Route.search({
|
|
||||||
make: asset.exifInfo?.make ?? undefined,
|
|
||||||
model: asset.exifInfo?.model ?? undefined,
|
|
||||||
})}
|
|
||||||
title="{$t('search_for')} {asset.exifInfo.make || ''} {asset.exifInfo.model || ''}"
|
|
||||||
class="hover:text-primary"
|
|
||||||
>
|
|
||||||
{asset.exifInfo.make || ''}
|
|
||||||
{asset.exifInfo.model || ''}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="flex gap-2 text-sm">
|
|
||||||
{#if asset.exifInfo.exposureTime}
|
|
||||||
<p>{`${asset.exifInfo.exposureTime} s`}</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if asset.exifInfo.iso}
|
|
||||||
<p>{`ISO ${asset.exifInfo.iso}`}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{#each albums as album (album.id)}
|
||||||
{/if}
|
<a href={Route.viewAlbum(album)}>
|
||||||
|
<div class="flex gap-4 pt-2 hover:cursor-pointer items-center">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt={album.albumName}
|
||||||
|
class="h-12.5 w-12.5 rounded object-cover"
|
||||||
|
src={album.albumThumbnailAssetId &&
|
||||||
|
getAssetMediaUrl({ id: album.albumThumbnailAssetId, size: AssetMediaSize.Preview })}
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{#if asset.exifInfo?.lensModel || asset.exifInfo?.fNumber || asset.exifInfo?.focalLength}
|
<div class="mb-auto mt-auto">
|
||||||
<div class="flex gap-4 py-4">
|
<p class="dark:text-immich-dark-primary">{album.albumName}</p>
|
||||||
<div><Icon icon={mdiCameraIris} size="24" /></div>
|
<div class="flex flex-col gap-0 text-sm">
|
||||||
|
<div>
|
||||||
<div>
|
<AlbumListItemDetails {album} />
|
||||||
{#if asset.exifInfo?.lensModel}
|
</div>
|
||||||
<p>
|
|
||||||
<a
|
|
||||||
href={Route.search({ lensModel: asset.exifInfo.lensModel })}
|
|
||||||
title="{$t('search_for')} {asset.exifInfo.lensModel}"
|
|
||||||
class="hover:text-primary line-clamp-1"
|
|
||||||
>
|
|
||||||
{asset.exifInfo.lensModel}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="flex gap-2 text-sm">
|
|
||||||
{#if asset.exifInfo?.fNumber}
|
|
||||||
<p>ƒ/{asset.exifInfo.fNumber.toLocaleString($locale)}</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if asset.exifInfo.focalLength}
|
|
||||||
<p>{`${asset.exifInfo.focalLength.toLocaleString($locale)} mm`}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<DetailPanelLocation {isOwner} {asset} />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{#if latlng && featureFlagsManager.value.map}
|
|
||||||
<div class="h-90">
|
|
||||||
{#await import('$lib/components/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 { default: Map }}
|
|
||||||
<Map
|
|
||||||
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}
|
|
||||||
showSettings={false}
|
|
||||||
zoom={12.5}
|
|
||||||
simplified
|
|
||||||
useLocationPin
|
|
||||||
showSimpleControls={!showEditFaces}
|
|
||||||
onOpenInMapView={() => goto(Route.map({ ...latlng, zoom: 12.5 }))}
|
|
||||||
>
|
|
||||||
{#snippet popup({ 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=13#map=15/{lat}/{lon}"
|
|
||||||
target="_blank"
|
|
||||||
class="font-medium text-primary underline focus:outline-none"
|
|
||||||
>
|
|
||||||
{$t('open_in_openstreetmap')}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{/snippet}
|
|
||||||
</Map>
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if currentAlbum && currentAlbum.albumUsers.length > 0 && asset.owner}
|
|
||||||
<section class="px-6 dark:text-immich-dark-fg mt-4">
|
|
||||||
<Text size="small" color="muted">{$t('shared_by')}</Text>
|
|
||||||
<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}
|
|
||||||
|
|
||||||
{#await albums then albums}
|
|
||||||
{#if albums.length > 0}
|
|
||||||
<section class="px-6 py-6 dark:text-immich-dark-fg">
|
|
||||||
<div class="pb-4">
|
|
||||||
<Text size="small" color="muted">{$t('appears_in')}</Text>
|
|
||||||
</div>
|
|
||||||
{#each albums as album (album.id)}
|
|
||||||
<a href={Route.viewAlbum(album)}>
|
|
||||||
<div class="flex gap-4 pt-2 hover:cursor-pointer items-center">
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
alt={album.albumName}
|
|
||||||
class="h-12.5 w-12.5 rounded object-cover"
|
|
||||||
src={album.albumThumbnailAssetId &&
|
|
||||||
getAssetMediaUrl({ id: album.albumThumbnailAssetId, size: AssetMediaSize.Preview })}
|
|
||||||
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>
|
|
||||||
<AlbumListItemDetails {album} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</a>
|
{/each}
|
||||||
{/each}
|
</section>
|
||||||
|
{/if}
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
{#if authManager.authenticated && authManager.preferences.tags.enabled}
|
||||||
|
<section class="relative px-2 pb-12 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
|
||||||
|
<DetailPanelTags {asset} {isOwner} />
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
{/await}
|
|
||||||
|
|
||||||
{#if authManager.authenticated && authManager.preferences.tags.enabled}
|
|
||||||
<section class="relative px-2 pb-12 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
|
|
||||||
<DetailPanelTags {asset} {isOwner} />
|
|
||||||
</section>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if showEditFaces}
|
{#if assetViewerManager.isEditFacesPanelOpen}
|
||||||
<PersonSidePanel
|
<PersonSidePanel
|
||||||
assetId={asset.id}
|
assetId={asset.id}
|
||||||
assetType={asset.type}
|
assetType={asset.type}
|
||||||
|
|||||||
@@ -209,7 +209,6 @@ class AssetViewerManager extends BaseEventManager<Events> {
|
|||||||
this.closeFaceEditMode();
|
this.closeFaceEditMode();
|
||||||
this.closeEditFacesPanel();
|
this.closeEditFacesPanel();
|
||||||
}
|
}
|
||||||
|
|
||||||
setAsset(asset: AssetResponseDto) {
|
setAsset(asset: AssetResponseDto) {
|
||||||
this.#viewingAssetStoreState = asset;
|
this.#viewingAssetStoreState = asset;
|
||||||
this.#viewState = true;
|
this.#viewState = true;
|
||||||
|
|||||||
Reference in New Issue
Block a user