Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-10-31 10:37:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: incomplete dynamic imports (#23217)

Browse Source
This commit is contained in:
Min Idzelis 2025-10-27 08:45:30 -04:00 committed by GitHub
parent 3f03a88767
commit 6bb1a9e083
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 69 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@ -440,15 +440,15 @@
{#if latlng && $featureFlags.loaded && $featureFlags.map}
<div class="h-[360px]">
{#await import('../shared-components/map/map.svelte')}
{#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 component}
<component.default
{:then { default: Map }}
<Map
mapMarkers={[
{
lat: latlng.lat,
@ -480,7 +480,7 @@
</a>
</div>
{/snippet}
</component.default>
</Map>
{/await}
</div>
{/if}

21
web/src/lib/components/share-page/individual-shared-viewer.svelte
View File

@ -19,7 +19,6 @@
import { IconButton } from '@immich/ui';
import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
import { t } from 'svelte-i18n';
import AssetViewer from '../asset-viewer/asset-viewer.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
@ -146,15 +145,17 @@
</section>
{:else if assets.length === 1}
{#await getAssetInfo({ ...authManager.params, id: assets[0].id }) then asset}
<AssetViewer
{asset}
showCloseButton={false}
onAction={handleAction}
onPrevious={() => Promise.resolve(false)}
onNext={() => Promise.resolve(false)}
onRandom={() => Promise.resolve(undefined)}
onClose={() => {}}
/>
{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
<AssetViewer
{asset}
showCloseButton={false}
onAction={handleAction}
onPrevious={() => Promise.resolve(false)}
onNext={() => Promise.resolve(false)}
onRandom={() => Promise.resolve(undefined)}
onClose={() => {}}
/>
{/await}
{/await}
{/if}
</section>

2
web/src/lib/components/shared-components/change-location.svelte
View File

@ -173,7 +173,7 @@
<span>{$t('pick_a_location')}</span>
<div class="h-[500px] min-h-[300px] w-full z-0">
{#await import('../shared-components/map/map.svelte')}
{#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">

25
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View File

@ -23,7 +23,6 @@
import { modalManager } from '@immich/ui';
import { debounce } from 'lodash-es';
import { t } from 'svelte-i18n';
import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
interface Props {
@ -487,16 +486,18 @@
<!-- Overlay Asset Viewer -->
{#if $isViewerOpen}
<Portal target="body">
<AssetViewer
asset={$viewingAsset}
onAction={handleAction}
onPrevious={handlePrevious}
onNext={handleNext}
onRandom={handleRandom}
onClose={() => {
assetViewingStore.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
}}
/>
{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
<AssetViewer
asset={$viewingAsset}
onAction={handleAction}
onPrevious={handlePrevious}
onNext={handleNext}
onRandom={handleRandom}
onClose={() => {
assetViewingStore.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
}}
/>
{/await}
</Portal>
{/if}

37
web/src/lib/components/shared-components/map/map.svelte
View File

@ -1,9 +1,11 @@
<script lang="ts" module>
import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
import { addProtocol, setRTLTextPlugin } from 'maplibre-gl';
import { Protocol } from 'pmtiles';
let protocol = new Protocol();
void maplibregl.addProtocol('pmtiles', protocol.tile);
void maplibregl.setRTLTextPlugin(mapboxRtlUrl, true);
void addProtocol('pmtiles', protocol.tile);
void setRTLTextPlugin(mapboxRtlUrl, true);
</script>
<script lang="ts">
@ -16,12 +18,20 @@
import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
import { Icon, modalManager } from '@immich/ui';
import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
import { isEqual, omit } from 'lodash-es';
import { DateTime, Duration } from 'luxon';
import maplibregl, { GlobeControl, type GeoJSONSource, type LngLatLike } from 'maplibre-gl';
import {
GlobeControl,
LngLat,
LngLatBounds,
Marker,
type GeoJSONSource,
type LngLatLike,
type Map,
type MapMouseEvent,
} from 'maplibre-gl';
import { onDestroy, onMount, untrack } from 'svelte';
import { t } from 'svelte-i18n';
import {
@ -37,7 +47,6 @@
NavigationControl,
Popup,
ScaleControl,
type Map,
} from 'svelte-maplibre';
interface Props {
@ -82,15 +91,15 @@
return undefined;
}
const bounds = new maplibregl.LngLatBounds();
const bounds = new LngLatBounds();
for (const marker of mapMarkers) {
bounds.extend([marker.lon, marker.lat]);
}
return bounds;
})();
let map: maplibregl.Map | undefined = $state();
let marker: maplibregl.Marker | null = null;
let map: Map | undefined = $state();
let marker: Marker | null = null;
let abortController: AbortController;
const theme = $derived($mapSettings.allowDarkMode ? themeManager.value : Theme.LIGHT);
@ -103,7 +112,7 @@
}
center = { lng, lat };
marker = new maplibregl.Marker().setLngLat([lng, lat]).addTo(map);
marker = new Marker().setLngLat([lng, lat]).addTo(map);
}
}
@ -125,7 +134,7 @@
onSelect(ids);
}
function handleMapClick(event: maplibregl.MapMouseEvent) {
function handleMapClick(event: MapMouseEvent) {
if (clickable) {
const { lng, lat } = event.lngLat;
onClickPoint({ lng, lat });
@ -135,7 +144,7 @@
}
if (map) {
marker = new maplibregl.Marker().setLngLat([lng, lat]).addTo(map);
marker = new Marker().setLngLat([lng, lat]).addTo(map);
}
}
}
@ -157,7 +166,7 @@
const asMarker = (feature: Feature<Geometry, GeoJsonProperties>): MapMarkerResponseDto => {
const featurePoint = feature as FeaturePoint;
const coords = maplibregl.LngLat.convert(featurePoint.geometry.coordinates as [number, number]);
const coords = LngLat.convert(featurePoint.geometry.coordinates as [number, number]);
return {
lat: coords.lat,
lon: coords.lng,
@ -294,7 +303,7 @@
fitBoundsOptions={{ padding: 50, maxZoom: 15 }}
attributionControl={false}
diffStyleUpdates={true}
onload={(event) => {
onload={(event: Map) => {
event.setMaxZoom(18);
event.on('click', handleMapClick);
if (!simplified) {
@ -303,7 +312,7 @@
}}
bind:map
>
{#snippet children({ map }: { map: maplibregl.Map })}
{#snippet children({ map }: { map: Map })}
{#if showSimpleControls}
<NavigationControl position="top-left" showCompass={!simplified} />

2
web/src/lib/components/timeline/TimelineAssetViewer.svelte
View File

@ -169,7 +169,7 @@
};
</script>
{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
<AssetViewer
{withStacked}
asset={$viewingAsset}

2
web/src/lib/modals/MapModal.svelte
View File

@ -17,7 +17,7 @@
<ModalBody>
<div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
<div class="h-[75vh] min-h-[300px] w-full">
{#await import('../components/shared-components/map/map.svelte')}
{#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">

21
web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -1,16 +1,16 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { goto } from '$app/navigation';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import Map from '$lib/components/shared-components/map/map.svelte';
import { AppRoute } from '$lib/constants';
import { AppRoute, timeToLoadTheMap } from '$lib/constants';
import Portal from '$lib/elements/Portal.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { featureFlags } from '$lib/stores/server-config.store';
import { handlePromiseError } from '$lib/utils';
import { delay } from '$lib/utils/asset-utils';
import { navigate } from '$lib/utils/navigation';
import { LoadingSpinner } from '@immich/ui';
import { onDestroy } from 'svelte';
import { run } from 'svelte/legacy';
import type { PageData } from './$types';
interface Props {
@ -72,12 +72,21 @@
{#if $featureFlags.loaded && $featureFlags.map}
<UserPageLayout title={data.meta.title}>
<div class="isolate h-full w-full">
<Map hash onSelect={onViewAssets} />
{#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 hash onSelect={onViewAssets} />
{/await}
</div>
</UserPageLayout>
<Portal target="body">
{#if $showAssetViewer}
{#await import('../../../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
<AssetViewer
asset={$viewingAsset}
showNavigation={viewingAssets.length > 1}