feat(web): assets now have a permanent URL (#8532)

* Remove asest redirect pages * Rename route paths to handle optional assetId * Update old references to new routes * Load and display asset from all routes that can show assetId * Add <main> in base layout, update portals to target it * Wire up updating navigation in response to open/close/prev/next * Replace events with navigation functions * Add types to param matcher * misc cleanup * Fix reload on /search pages * Avoid loading bar between photos nav. Delay loading bar by 200ms for all navigations * Update url for maps routes. Note: on page reload, next/prev is not available * Dynamically load asset-viewer on map page * When reloading a url with assetUrl, hide background page to prevent flash during load * Mostly style, review comments * Load buckets for assets on demand * Forgot this update call * typo * fix test * Fix carelessness * Review comment * merge main * remove assets * fix submodule --------- Co-authored-by: Alex <alex.tran1502@gmail.com> Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
2024-04-24 15:24:19 -04:00
parent 1e004611e4
commit a78260296c
48 changed files with 289 additions and 190 deletions
@@ -0,0 +1,146 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import MapSettingsModal from '$lib/components/map-page/map-settings-modal.svelte';
+  import Map from '$lib/components/shared-components/map/map.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import type { MapSettings } from '$lib/stores/preferences.store';
+  import { mapSettings } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
+  import { isEqual } from 'lodash-es';
+  import { DateTime, Duration } from 'luxon';
+  import { onDestroy, onMount } from 'svelte';
+  import type { PageData } from './$types';
+  import { handlePromiseError } from '$lib/utils';
+  import { navigate } from '$lib/utils/navigation';
+
+  export let data: PageData;
+
+  let { isViewing: showAssetViewer, asset: viewingAsset, setAssetId } = assetViewingStore;
+
+  let abortController: AbortController;
+  let mapMarkers: MapMarkerResponseDto[] = [];
+  let viewingAssets: string[] = [];
+  let viewingAssetCursor = 0;
+  let showSettingsModal = false;
+
+  onMount(async () => {
+    mapMarkers = await loadMapMarkers();
+  });
+
+  onDestroy(() => {
+    abortController?.abort();
+    assetViewingStore.showAssetViewer(false);
+  });
+
+  $: $featureFlags.map || handlePromiseError(goto(AppRoute.PHOTOS));
+  const omit = (obj: MapSettings, key: string) => {
+    return Object.fromEntries(Object.entries(obj).filter(([k]) => k !== key));
+  };
+
+  async function loadMapMarkers() {
+    if (abortController) {
+      abortController.abort();
+    }
+    abortController = new AbortController();
+
+    const { includeArchived, onlyFavorites, withPartners } = $mapSettings;
+    const { fileCreatedAfter, fileCreatedBefore } = getFileCreatedDates();
+
+    return await getMapMarkers(
+      {
+        isArchived: includeArchived && undefined,
+        isFavorite: onlyFavorites || undefined,
+        fileCreatedAfter: fileCreatedAfter || undefined,
+        fileCreatedBefore,
+        withPartners: withPartners || undefined,
+      },
+      {
+        signal: abortController.signal,
+      },
+    );
+  }
+
+  function getFileCreatedDates() {
+    const { relativeDate, dateAfter, dateBefore } = $mapSettings;
+
+    if (relativeDate) {
+      const duration = Duration.fromISO(relativeDate);
+      return {
+        fileCreatedAfter: duration.isValid ? DateTime.now().minus(duration).toISO() : undefined,
+      };
+    }
+
+    try {
+      return {
+        fileCreatedAfter: dateAfter ? new Date(dateAfter).toISOString() : undefined,
+        fileCreatedBefore: dateBefore ? new Date(dateBefore).toISOString() : undefined,
+      };
+    } catch {
+      $mapSettings.dateAfter = '';
+      $mapSettings.dateBefore = '';
+      return {};
+    }
+  }
+
+  async function onViewAssets(assetIds: string[]) {
+    viewingAssets = assetIds;
+    viewingAssetCursor = 0;
+    await setAssetId(assetIds[0]);
+  }
+
+  async function navigateNext() {
+    if (viewingAssetCursor < viewingAssets.length - 1) {
+      await setAssetId(viewingAssets[++viewingAssetCursor]);
+      await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
+    }
+  }
+
+  async function navigatePrevious() {
+    if (viewingAssetCursor > 0) {
+      await setAssetId(viewingAssets[--viewingAssetCursor]);
+      await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
+    }
+  }
+</script>
+
+{#if $featureFlags.loaded && $featureFlags.map}
+  <UserPageLayout title={data.meta.title}>
+    <div class="isolate h-full w-full">
+      <Map bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
+    </div></UserPageLayout
+  >
+  <Portal target="body">
+    {#if $showAssetViewer}
+      {#await import('../../../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+        <AssetViewer
+          asset={$viewingAsset}
+          showNavigation={viewingAssets.length > 1}
+          on:next={navigateNext}
+          on:previous={navigatePrevious}
+          on:close={() => assetViewingStore.showAssetViewer(false)}
+          isShared={false}
+        />
+      {/await}
+    {/if}
+  </Portal>
+
+  {#if showSettingsModal}
+    <MapSettingsModal
+      settings={{ ...$mapSettings }}
+      on:close={() => (showSettingsModal = false)}
+      on:save={async ({ detail }) => {
+        const shouldUpdate = !isEqual(omit(detail, 'allowDarkMode'), omit($mapSettings, 'allowDarkMode'));
+        showSettingsModal = false;
+        $mapSettings = detail;
+
+        if (shouldUpdate) {
+          mapMarkers = await loadMapMarkers();
+        }
+      }}
+    />
+  {/if}
+{/if}
@@ -0,0 +1,15 @@
+import { authenticate } from '$lib/utils/auth';
+import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+  await authenticate();
+  const asset = await getAssetInfoFromParam(params);
+
+  return {
+    asset,
+    meta: {
+      title: 'Map',
+    },
+  };
+}) satisfies PageLoad;