Daniel DietzlerandCodex
e5b4dd1041
(cherry picked from commit 2576ee28cfb790e99ddf401a129e1d9a18713121)
55 lines
1.4 KiB
Svelte
55 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
|
|
import MapModal from '#lib/modals/MapModal.svelte';
|
|
import { getAlbumMapMarkersQuery } from '#lib/queries/album.query.js';
|
|
import { navigate } from '#lib/utils/navigation.js';
|
|
import { type AlbumResponseDto } from '@immich/sdk';
|
|
import { IconButton, modalManager } from '@immich/ui';
|
|
import { mdiMapOutline } from '@mdi/js';
|
|
import { createQuery } from '@tanstack/svelte-query';
|
|
import { onDestroy } from 'svelte';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
interface Props {
|
|
album: AlbumResponseDto;
|
|
}
|
|
|
|
let { album }: Props = $props();
|
|
|
|
let returnToMap = $state(false);
|
|
const query = createQuery(() => getAlbumMapMarkersQuery(album.id));
|
|
const mapMarkers = $derived(query.data ?? []);
|
|
|
|
onDestroy(() => {
|
|
assetViewerManager.showAssetViewer(false);
|
|
});
|
|
|
|
$effect(() => {
|
|
if (assetViewerManager.isViewing || !returnToMap) {
|
|
return;
|
|
}
|
|
|
|
returnToMap = false;
|
|
void onClick();
|
|
});
|
|
|
|
const onClick = async () => {
|
|
const assetIds = await modalManager.show(MapModal, { mapMarkers });
|
|
if (assetIds) {
|
|
await navigate({ targetRoute: 'current', assetId: assetIds[0] });
|
|
returnToMap = true;
|
|
} else {
|
|
returnToMap = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<IconButton
|
|
variant="ghost"
|
|
shape="round"
|
|
color="secondary"
|
|
icon={mdiMapOutline}
|
|
onclick={onClick}
|
|
aria-label={$t('map')}
|
|
/>
|