fix: map settings (#29134)

mise.lock

@@ -82,6 +82,19 @@ url_api = "https://api.github.com/repos/extism/js-pdk/releases/assets/353224133"
 version = "7.1.3-6"
 backend = "github:jellyfin/jellyfin-ffmpeg"
 
+[tools."github:jellyfin/jellyfin-ffmpeg".options]
+asset_pattern = "jellyfin-ffmpeg_*_portable_linuxarm64-gpl.tar.xz"
+
+[tools."github:jellyfin/jellyfin-ffmpeg"."platforms.linux-arm64"]
+checksum = "sha256:bea03c670e8cc5bfe9edc0c5d624d4735421610cef5e808db93e7d8596952886"
+url = "https://github.com/jellyfin/jellyfin-ffmpeg/releases/download/v7.1.3-6/jellyfin-ffmpeg_7.1.3-6_portable_linuxarm64-gpl.tar.xz"
+url_api = "https://api.github.com/repos/jellyfin/jellyfin-ffmpeg/releases/assets/409048876"
+
+[tools."github:jellyfin/jellyfin-ffmpeg"."platforms.linux-arm64-musl"]
+checksum = "sha256:bea03c670e8cc5bfe9edc0c5d624d4735421610cef5e808db93e7d8596952886"
+url = "https://github.com/jellyfin/jellyfin-ffmpeg/releases/download/v7.1.3-6/jellyfin-ffmpeg_7.1.3-6_portable_linuxarm64-gpl.tar.xz"
+url_api = "https://api.github.com/repos/jellyfin/jellyfin-ffmpeg/releases/assets/409048876"
+
 [[tools."github:webassembly/binaryen"]]
 version = "version_124"
 backend = "github:webassembly/binaryen"

pnpm-workspace.yaml

@@ -65,3 +65,5 @@ preferWorkspacePackages: true
 injectWorkspacePackages: true
 shamefullyHoist: false
 verifyDepsBeforeRun: install
+minimumReleaseAgeExclude:
+  - '@immich/ui@0.81.1'

web/package.json

@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "workspace:*",
-    "@immich/ui": "^0.80.0",
+    "@immich/ui": "^0.81.1",
     "@mapbox/mapbox-gl-rtl-text": "0.4.0",
     "@mdi/js": "^7.4.47",
     "@noble/hashes": "^2.2.0",

web/src/lib/components/shared-components/map/Map.svelte

@@ -208,13 +208,13 @@
     if (relativeDate) {
       const duration = Duration.fromISO(relativeDate);
       return {
-        fileCreatedAfter: duration.isValid ? DateTime.now().minus(duration).toISO() : undefined,
+        fileCreatedAfter: duration.isValid ? DateTime.now().minus(duration).toUTC().toISO() : undefined,
       };
     }
 
     return {
-      fileCreatedAfter: dateAfter?.toUTC().toISO(),
+      fileCreatedAfter: dateAfter,
-      fileCreatedBefore: dateBefore?.toUTC().toISO(),
+      fileCreatedBefore: dateBefore,
     };
   }
 
@@ -243,7 +243,7 @@
   }
 
   const handleSettingsClick = async () => {
-    const settings = await modalManager.show(MapSettingsModal, { settings: { ...$mapSettings } });
+    const settings = await modalManager.show(MapSettingsModal);
     if (settings) {
       const shouldUpdate = !isEqual(omit(settings, 'allowDarkMode'), omit($mapSettings, 'allowDarkMode'));
       $mapSettings = settings;

web/src/lib/modals/MapSettingsModal.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
-  import type { MapSettings } from '$lib/stores/preferences.store';
+  import { mapSettings, type MapSettings } from '$lib/stores/preferences.store';
   import { Button, DatePicker, Field, FormModal, Select, Stack, Switch } from '@immich/ui';
-  import { Duration } from 'luxon';
+  import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
 
   type Props = {
-    settings: MapSettings;
     onClose: (settings?: MapSettings) => void;
   };
 
-  let { settings: initialValues, onClose }: Props = $props();
+  let { onClose }: Props = $props();
-  let settings = $state(initialValues);
+  let settings = $state({ ...$mapSettings });
 
   let customDateRange = $state(!!settings.dateAfter || !!settings.dateBefore);
 
@@ -41,10 +40,17 @@
     {#if customDateRange}
       <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
         <Field label={$t('date_after')}>
-          <DatePicker bind:value={settings.dateAfter} maxDate={settings.dateBefore} />
+          <DatePicker
+            value={DateTime.fromISO(settings.dateAfter ?? '')}
+            maxDate={DateTime.fromISO(settings.dateBefore ?? '')}
+            onChange={(date) => (settings.dateAfter = date?.toUTC().toISO() ?? undefined)}
+          />
         </Field>
         <Field label={$t('date_before')}>
-          <DatePicker bind:value={settings.dateBefore} />
+          <DatePicker
+            value={DateTime.fromISO(settings.dateBefore ?? '')}
+            onChange={(date) => (settings.dateBefore = date?.toUTC().toISO() ?? undefined)}
+          />
         </Field>
         <div class="flex justify-center">
           <Button

web/src/lib/stores/preferences.store.ts

@@ -1,4 +1,3 @@
-import type { DateTime } from 'luxon';
 import { persisted } from 'svelte-persisted-store';
 import { browser } from '$app/environment';
 import { defaultLang } from '$lib/constants';
@@ -27,8 +26,8 @@ export interface MapSettings {
   withPartners: boolean;
   withSharedAlbums: boolean;
   relativeDate: string;
-  dateAfter?: DateTime<true>;
+  dateAfter?: string;
-  dateBefore?: DateTime<true>;
+  dateBefore?: string;
 }
 
 const defaultMapSettings = {