fix(mobile): allow editing asset dates in the future (#5522)

Co-authored-by: shalong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/lib/shared/ui/date_time_picker.dart

@@ -86,11 +86,14 @@ class _DateTimePicker extends HookWidget {
     final timeZones = useMemoized(() => getAllTimeZones(), const []);
 
     void pickDate() async {
+      final now = DateTime.now();
+      // Handles cases where the date from the asset is far off in the future
+      final initialDate = date.value.isAfter(now) ? now : date.value;
       final newDate = await showDatePicker(
         context: context,
-        initialDate: date.value,
+        initialDate: initialDate,
         firstDate: DateTime(1800),
-        lastDate: DateTime.now(),
+        lastDate: now,
       );
       if (newDate == null) {
         return;

server/src/immich/api-v1/asset/asset.service.ts

@@ -336,14 +336,18 @@ export class AssetService {
 
     res.set('Cache-Control', 'private, max-age=86400, no-transform');
     res.header('Content-Type', mimeTypes.lookup(filepath));
-    res.sendFile(filepath, options, (error: Error) => {
-      if (!error) {
-        return;
-      }
+    return new Promise((resolve, reject) => {
+      res.sendFile(filepath, options, (error: Error) => {
+        if (!error) {
+          resolve();
+          return;
+        }
 
-      if (error.message !== 'Request aborted') {
-        this.logger.error(`Unable to send file: ${error.name}`, error.stack);
-      }
+        if (error.message !== 'Request aborted') {
+          this.logger.error(`Unable to send file: ${error.name}`, error.stack);
+        }
+        reject(error);
+      });
     });
   }
 

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

@@ -205,12 +205,13 @@
     <section class="px-4 py-4 text-sm">
       <div class="flex h-10 w-full items-center justify-between">
         <h2>PEOPLE</h2>
-        <div class="flex gap-2">
+        <div class="flex gap-2 items-center">
           {#if people.some((person) => person.isHidden)}
             <CircleIconButton
               title="Show hidden people"
               icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
               padding="1"
+              buttonSize="32"
               on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
             />
           {/if}
@@ -219,6 +220,7 @@
             icon={mdiPencil}
             padding="1"
             size="20"
+            buttonSize="32"
             on:click={() => (showEditFaces = true)}
           />
         </div>
@@ -337,7 +339,7 @@
         </div>
 
         {#if isOwner}
-          <button class="focus:outline-none">
+          <button class="focus:outline-none p-1">
             <Icon path={mdiPencil} size="20" />
           </button>
         {/if}
@@ -349,7 +351,7 @@
             <Icon path={mdiCalendar} size="24" />
           </div>
         </div>
-        <button class="focus:outline-none">
+        <button class="focus:outline-none p-1">
           <Icon path={mdiPencil} size="20" />
         </button>
       </div>
@@ -507,7 +509,7 @@
       </div>
     {:else if !asset.exifInfo?.city && !asset.isReadOnly && $user && asset.ownerId === $user.id}
       <div
-        class="flex justify-between place-items-start gap-4 py-4 rounded-lg pr-2 hover:dark:text-immich-dark-primary hover:text-immich-primary"
+        class="flex justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
         on:click={() => (isShowChangeLocation = true)}
         on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
         tabindex="0"
@@ -521,7 +523,7 @@
 
           <p>Add a location</p>
         </div>
-        <div class="focus:outline-none">
+        <div class="focus:outline-none p-1">
           <Icon path={mdiPencil} size="20" />
         </div>
       </div>

web/src/lib/components/elements/buttons/circle-icon-button.svelte

@@ -11,10 +11,13 @@
   export let forceDark = false;
   export let hideMobile = false;
   export let iconColor = 'currentColor';
+  export let buttonSize: string | undefined = undefined;
 </script>
 
 <button
   {title}
+  style:width={buttonSize ? buttonSize + 'px' : ''}
+  style:height={buttonSize ? buttonSize + 'px' : ''}
   style:background-color={backgroundColor}
   style:--immich-icon-button-hover-color={hoverColor}
   class:dark:text-immich-dark-fg={!forceDark}