mirror of
https://github.com/immich-app/immich.git
synced 2025-07-09 03:04:16 -04:00
fix: album asset viewer (#19252)
This commit is contained in:
parent
f99c6feac5
commit
caf11fbb96
@ -1,10 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import MapModal from '$lib/modals/MapModal.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { handlePromiseError } from '$lib/utils';
|
||||
import { navigate } from '$lib/utils/navigation';
|
||||
import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
|
||||
import { IconButton } from '@immich/ui';
|
||||
import { mdiMapOutline } from '@mdi/js';
|
||||
@ -17,9 +14,7 @@
|
||||
|
||||
let { album }: Props = $props();
|
||||
let abortController: AbortController;
|
||||
let { isViewing: showAssetViewer, asset: viewingAsset, setAssetId } = assetViewingStore;
|
||||
let viewingAssets: string[] = $state([]);
|
||||
let viewingAssetCursor = 0;
|
||||
let { setAssetId } = assetViewingStore;
|
||||
|
||||
let mapMarkers: MapMarkerResponseDto[] = $state([]);
|
||||
|
||||
@ -61,37 +56,9 @@
|
||||
const assetIds = await modalManager.show(MapModal, { mapMarkers });
|
||||
|
||||
if (assetIds) {
|
||||
viewingAssets = assetIds;
|
||||
viewingAssetCursor = 0;
|
||||
|
||||
await setAssetId(assetIds[0]);
|
||||
}
|
||||
}
|
||||
|
||||
async function navigateNext() {
|
||||
if (viewingAssetCursor < viewingAssets.length - 1) {
|
||||
await setAssetId(viewingAssets[++viewingAssetCursor]);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
async function navigatePrevious() {
|
||||
if (viewingAssetCursor > 0) {
|
||||
await setAssetId(viewingAssets[--viewingAssetCursor]);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
async function navigateRandom() {
|
||||
if (viewingAssets.length <= 0) {
|
||||
return undefined;
|
||||
}
|
||||
const index = Math.floor(Math.random() * viewingAssets.length);
|
||||
const asset = await setAssetId(viewingAssets[index]);
|
||||
return asset;
|
||||
}
|
||||
</script>
|
||||
|
||||
<IconButton
|
||||
@ -102,22 +69,3 @@
|
||||
onclick={openMap}
|
||||
aria-label={$t('map')}
|
||||
/>
|
||||
|
||||
<Portal target="body">
|
||||
{#if $showAssetViewer}
|
||||
{#await import('../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
|
||||
<AssetViewer
|
||||
asset={$viewingAsset}
|
||||
showNavigation={viewingAssets.length > 1}
|
||||
onNext={navigateNext}
|
||||
onPrevious={navigatePrevious}
|
||||
onRandom={navigateRandom}
|
||||
onClose={() => {
|
||||
assetViewingStore.showAssetViewer(false);
|
||||
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
|
||||
}}
|
||||
isShared={false}
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
</Portal>
|
||||
|
@ -12,7 +12,6 @@
|
||||
import ChangeDate from '$lib/components/shared-components/change-date.svelte';
|
||||
import Scrubber from '$lib/components/shared-components/scrubber/scrubber.svelte';
|
||||
import { AppRoute, AssetAction } from '$lib/constants';
|
||||
import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
|
||||
import { authManager } from '$lib/managers/auth-manager.svelte';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
|
||||
@ -911,8 +910,7 @@
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{#if !albumMapViewManager.isInMapView}
|
||||
<Portal target="body">
|
||||
<Portal target="body">
|
||||
{#if $showAssetViewer}
|
||||
{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
|
||||
<AssetViewer
|
||||
@ -931,8 +929,7 @@
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
</Portal>
|
||||
{/if}
|
||||
</Portal>
|
||||
|
||||
<style>
|
||||
#asset-grid {
|
||||
|
@ -1,13 +0,0 @@
|
||||
class AlbumMapViewManager {
|
||||
#isInMapView = $state(false);
|
||||
|
||||
get isInMapView() {
|
||||
return this.#isInMapView;
|
||||
}
|
||||
|
||||
set isInMapView(isInMapView: boolean) {
|
||||
this.#isInMapView = isInMapView;
|
||||
}
|
||||
}
|
||||
|
||||
export const albumMapViewManager = new AlbumMapViewManager();
|
Loading…
x
Reference in New Issue
Block a user