chore: rebase and clean-up

2023-11-21 21:16:40 -05:00
parent c1d9ce8679
commit b8a9cbc659
31 changed files with 928 additions and 53 deletions
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -447,6 +447,12 @@ export interface AssetBulkDeleteDto {
 * @interface AssetBulkUpdateDto
 */
 export interface AssetBulkUpdateDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetBulkUpdateDto
+     */
+    'dateTimeOriginal'?: string;
    /**
     * 
     * @type {Array<string>}
@@ -465,6 +471,18 @@ export interface AssetBulkUpdateDto {
     * @memberof AssetBulkUpdateDto
     */
    'isFavorite'?: boolean;
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetBulkUpdateDto
+     */
+    'latitude'?: number;
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetBulkUpdateDto
+     */
+    'longitude'?: number;
    /**
     * 
     * @type {boolean}
@@ -4161,6 +4179,12 @@ export interface UpdateAlbumDto {
 * @interface UpdateAssetDto
 */
 export interface UpdateAssetDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateAssetDto
+     */
+    'dateTimeOriginal'?: string;
    /**
     * 
     * @type {string}
@@ -4179,6 +4203,18 @@ export interface UpdateAssetDto {
     * @memberof UpdateAssetDto
     */
    'isFavorite'?: boolean;
+    /**
+     * 
+     * @type {number}
+     * @memberof UpdateAssetDto
+     */
+    'latitude'?: number;
+    /**
+     * 
+     * @type {number}
+     * @memberof UpdateAssetDto
+     */
+    'longitude'?: number;
 }
 /**
 * 
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -10,17 +10,24 @@
  import { asByteUnitString } from '../../utils/byte-units';
  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
  import {
    mdiCalendar,
    mdiCameraIris,
    mdiClose,
+    mdiPencil,
    mdiImageOutline,
    mdiMapMarkerOutline,
    mdiInformationOutline,
  } from '@mdi/js';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
  import Icon from '$lib/components/elements/icon.svelte';
  import Map from '../shared-components/map/map.svelte';
  import { AppRoute } from '$lib/constants';
+  import ChangeLocation from '../shared-components/change-location.svelte';

  export let asset: AssetResponseDto;
  export let albums: AlbumResponseDto[] = [];
@@ -90,6 +97,45 @@

  let showAssetPath = false;
  const toggleAssetPath = () => (showAssetPath = !showAssetPath);
+
+  let isShowChangeDate = false;
+
+  async function handleConfirmChangeDate(event: CustomEvent<string>) {
+    isShowChangeDate = false;
+    if (asset.exifInfo) {
+      asset.exifInfo.dateTimeOriginal = event.detail;
+    }
+    try {
+      await api.assetApi.updateAsset({
+        id: asset.id,
+        updateAssetDto: {
+          dateTimeOriginal: event.detail,
+        },
+      });
+      notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  let isShowChangeLocation = false;
+
+  async function handleConfirmChangeLocation(event: CustomEvent<{ lng: number; lat: number }>) {
+    isShowChangeLocation = false;
+
+    try {
+      await api.assetApi.updateAsset({
+        id: asset.id,
+        updateAssetDto: {
+          latitude: event.detail.lat,
+          longitude: event.detail.lng,
+        },
+      });
+      notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
+    } catch (error) {
+      console.error(error);
+    }
+  }
 </script>

 <section class="p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
@@ -195,37 +241,101 @@
      {@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
        zone: asset.exifInfo.timeZone ?? undefined,
      })}
-      <div class="flex gap-4 py-4">
-        <div>
-          <Icon path={mdiCalendar} size="24" />
-        </div>
+      <div
+        class="flex justify-between gap-4 py-4 hover:bg-gray-200 hover:text-black cursor-pointer"
+        on:click={() => (isShowChangeDate = true)}
+        on:keydown={(event) => event.key === 'Enter' && (isShowChangeDate = true)}
+        tabindex="0"
+        role="button"
+      >
+        <div class="flex gap-4">
+          <div>
+            <Icon path={mdiCalendar} size="24" />
+          </div>

-        <div>
-          <p>
-            {assetDateTimeOriginal.toLocaleString(
-              {
-                month: 'short',
-                day: 'numeric',
-                year: 'numeric',
-              },
-              { locale: $locale },
-            )}
-          </p>
-          <div class="flex gap-2 text-sm">
+          <div>
            <p>
              {assetDateTimeOriginal.toLocaleString(
                {
-                  weekday: 'short',
-                  hour: 'numeric',
-                  minute: '2-digit',
-                  timeZoneName: 'longOffset',
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
                },
                { locale: $locale },
              )}
            </p>
+            <div class="flex gap-2 text-sm">
+              <p>
+                {assetDateTimeOriginal.toLocaleString(
+                  {
+                    weekday: 'short',
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    timeZoneName: 'longOffset',
+                  },
+                  { locale: $locale },
+                )}
+              </p>
+            </div>
          </div>
        </div>
-      </div>{/if}
+        <button class="focus:outline-none">
+          <Icon path={mdiPencil} size="24" />
+        </button>
+      </div>
+    {:else}
+      <div
+        class="flex justify-between gap-4 py-4 hover:bg-gray-200 hover:text-black cursor-pointer"
+        on:click={() => (isShowChangeDate = true)}
+        on:keydown={(event) => event.key === 'Enter' && (isShowChangeDate = true)}
+        tabindex="0"
+        role="button"
+      >
+        <div class="flex gap-4">
+          <div>
+            <Icon path={mdiCalendar} size="24" />
+          </div>
+
+          <div>
+            <p>No date available for this asset, click to add one.</p>
+          </div>
+        </div>
+        <button class="focus:outline-none">
+          <Icon path={mdiPencil} size="24" />
+        </button>
+      </div>
+    {/if}
+
+    {#if isShowChangeDate}
+      {#if asset.exifInfo?.dateTimeOriginal}
+        {@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
+          zone: asset.exifInfo.timeZone ?? undefined,
+        })}
+        <ChangeDate
+          title="Change Date"
+          confirmText="Confirm"
+          initialDate={assetDateTimeOriginal}
+          on:confirm={handleConfirmChangeDate}
+          on:cancel={() => (isShowChangeDate = false)}
+        >
+          <svelte:fragment slot="prompt">
+            <p>Please select a new date:</p>
+          </svelte:fragment>
+        </ChangeDate>
+      {:else}
+        <ChangeDate
+          title="Change Date"
+          confirmText="Confirm"
+          initialDate={DateTime.now()}
+          on:confirm={handleConfirmChangeDate}
+          on:cancel={() => (isShowChangeDate = false)}
+        >
+          <svelte:fragment slot="prompt">
+            <p>Please select a new date:</p>
+          </svelte:fragment>
+        </ChangeDate>
+      {/if}
+    {/if}

    {#if asset.exifInfo?.fileSizeInByte}
      <div class="flex gap-4 py-4">
@@ -293,7 +403,13 @@
    {/if}

    {#if asset.exifInfo?.city}
-      <div class="flex gap-4 py-4">
+      <div
+        class="flex justify-between gap-4 py-4 hover:bg-gray-200 hover:text-black cursor-pointer"
+        on:click={() => (isShowChangeLocation = true)}
+        on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
+        tabindex="0"
+        role="button"
+      >
        <div><Icon path={mdiMapMarkerOutline} size="24" /></div>

        <div>
@@ -309,7 +425,57 @@
            </div>
          {/if}
        </div>
+
+        <button class="focus:outline-none">
+          <Icon path={mdiPencil} size="24" />
+        </button>
      </div>
+    {:else}
+      <div
+        class="flex justify-between gap-4 py-4 hover:bg-gray-200 hover:text-black cursor-pointer"
+        on:click={() => (isShowChangeLocation = true)}
+        on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
+        tabindex="0"
+        role="button"
+      >
+        <div class="flex gap-4">
+          <div>
+            <div><Icon path={mdiMapMarkerOutline} size="24" /></div>
+          </div>
+
+          <div>
+            <p>No location available for this asset, click to add one.</p>
+          </div>
+        </div>
+        <button class="focus:outline-none">
+          <Icon path={mdiPencil} size="24" />
+        </button>
+      </div>
+    {/if}
+    {#if isShowChangeLocation}
+      {#if latlng}
+        <ChangeLocation
+          confirmText="Confirm"
+          location={latlng}
+          id_asset={asset.id}
+          on:confirm={handleConfirmChangeLocation}
+          on:cancel={() => (isShowChangeLocation = false)}
+        >
+          <svelte:fragment slot="prompt">
+            <p>Please select a new location:</p>
+          </svelte:fragment>
+        </ChangeLocation>
+      {:else}
+        <ChangeLocation
+          confirmText="Confirm"
+          on:confirm={handleConfirmChangeLocation}
+          on:cancel={() => (isShowChangeLocation = false)}
+        >
+          <svelte:fragment slot="prompt">
+            <p>Please select a new location:</p>
+          </svelte:fragment>
+        </ChangeLocation>
+      {/if}
    {/if}
  </div>
 </section>
--- a/web/src/lib/components/photos-page/actions/change-date.svelte
+++ b/web/src/lib/components/photos-page/actions/change-date.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { api } from '@api';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
+  import { DateTime } from 'luxon';
+  export let force = !$featureFlags.trash;
+  export let menuItem = false;
+  const { clearSelect, getOwnedAssets } = getAssetControlContext();
+
+  let isShowChangeDate = false;
+
+  async function handleConfirmChangeDate(event: CustomEvent<string>) {
+    isShowChangeDate = false;
+    const ids = Array.from(getOwnedAssets())
+      .filter((a) => !a.isExternal)
+      .map((a) => a.id);
+
+    try {
+      await api.assetApi.updateAssets({
+        assetBulkUpdateDto: {
+          ids: ids,
+          dateTimeOriginal: event.detail,
+        },
+      });
+      notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
+    } catch (error) {
+      console.error(error);
+    }
+    clearSelect();
+  }
+</script>
+
+{#if menuItem}
+  <MenuOption text={force ? 'Change date' : 'Change date'} on:click={() => (isShowChangeDate = true)} />
+{/if}
+{#if isShowChangeDate}
+  <ChangeDate
+    title="Change Date"
+    confirmText="Confirm"
+    initialDate={DateTime.now()}
+    on:confirm={handleConfirmChangeDate}
+    on:cancel={() => (isShowChangeDate = false)}
+  >
+    <svelte:fragment slot="prompt">
+      <p>Please select a new date:</p>
+    </svelte:fragment>
+  </ChangeDate>
+{/if}
--- a/web/src/lib/components/photos-page/actions/change-location.svelte
+++ b/web/src/lib/components/photos-page/actions/change-location.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { api } from '@api';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
+
+  export let force = !$featureFlags.trash;
+  export let menuItem = false;
+  const { clearSelect, getOwnedAssets } = getAssetControlContext();
+
+  let isShowChangeLocation = false;
+
+  async function handleConfirmChangeLocation(event: CustomEvent<{ lng: number; lat: number }>) {
+    isShowChangeLocation = false;
+    const ids = Array.from(getOwnedAssets())
+      .filter((a) => !a.isExternal)
+      .map((a) => a.id);
+
+    try {
+      await api.assetApi.updateAssets({
+        assetBulkUpdateDto: {
+          ids: ids,
+          latitude: event.detail.lat,
+          longitude: event.detail.lng,
+        },
+      });
+      notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
+    } catch (error) {
+      console.error(error);
+    }
+    clearSelect();
+  }
+</script>
+
+{#if menuItem}
+  <MenuOption text={force ? 'Change location' : 'Change location'} on:click={() => (isShowChangeLocation = true)} />
+{/if}
+{#if isShowChangeLocation}
+  <ChangeLocation
+    confirmText="Confirm"
+    on:confirm={handleConfirmChangeLocation}
+    on:cancel={() => (isShowChangeLocation = false)}
+  >
+    <svelte:fragment slot="prompt">
+      <p>Please select a new location:</p>
+    </svelte:fragment>
+  </ChangeLocation>
+{/if}
--- a/web/src/lib/components/shared-components/change-date.svelte
+++ b/web/src/lib/components/shared-components/change-date.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import FullScreenModal from './full-screen-modal.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import type { Color } from '$lib/components/elements/buttons/button.svelte';
+  import { DateTime } from 'luxon';
+  export let title = 'Change Date';
+  export let prompt = 'Please select a new date:';
+  export let confirmText = 'Confirm';
+  export let confirmColor: Color = 'primary';
+  export let cancelText = 'Cancel';
+  export let cancelColor: Color = 'secondary';
+  export let hideCancelButton = false;
+  export let initialDate: DateTime = DateTime.now();
+
+  let selectedDate: string;
+  let selectedTimezone: string | null;
+
+  let timezones = [
+    '',
+    'UTC-12:00',
+    'UTC-11:00',
+    'UTC-10:00',
+    'UTC-09:30',
+    'UTC-09:00',
+    'UTC-08:00',
+    'UTC-07:00',
+    'UTC-06:00',
+    'UTC-05:00',
+    'UTC-04:00',
+    'UTC-03:30',
+    'UTC-03:00',
+    'UTC-02:00',
+    'UTC-01:00',
+    'UTC+00:00',
+    'UTC+01:00',
+    'UTC+02:00',
+    'UTC+03:00',
+    'UTC+03:30',
+    'UTC+04:00',
+    'UTC+04:30',
+    'UTC+05:00',
+    'UTC+05:30',
+    'UTC+05:45',
+    'UTC+06:00',
+    'UTC+06:30',
+    'UTC+07:00',
+    'UTC+08:00',
+    'UTC+08:45',
+    'UTC+09:00',
+    'UTC+09:30',
+    'UTC+10:00',
+    'UTC+10:30',
+    'UTC+11:00',
+    'UTC+12:00',
+    'UTC+12:45',
+    'UTC+13:00',
+    'UTC+14:00',
+  ];
+
+  selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
+  selectedTimezone = 'UTC' + initialDate.toFormat('ZZ');
+
+  const dispatch = createEventDispatcher();
+
+  let isConfirmButtonDisabled = false;
+
+  const handleCancel = () => dispatch('cancel');
+  const handleEscape = () => {
+    if (!isConfirmButtonDisabled) {
+      dispatch('cancel');
+    }
+  };
+
+  const handleConfirm = () => {
+    let date = DateTime.fromISO(selectedDate);
+    if (selectedTimezone != null) {
+      date = date.setZone(selectedTimezone);
+    }
+
+    isConfirmButtonDisabled = true;
+    dispatch('confirm', date.toISO());
+  };
+</script>
+
+<FullScreenModal on:clickOutside={handleCancel} on:escape={() => handleEscape()}>
+  <div
+    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+  >
+    <div
+      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <h1 class="pb-2 text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
+        {title}
+      </h1>
+    </div>
+    <div>
+      <div class="text-md px-4 py-5 text-center">
+        <slot name="prompt">
+          <p>{prompt}</p>
+        </slot>
+        <div class="mt-2" />
+        <div class="flex flex-col">
+          <label for="datetime">Date and Time</label>
+          <input id="datetime" type="datetime-local" bind:value={selectedDate} class="mt-2 w-full text-black" />
+        </div>
+        <div class="flex flex-col">
+          <label for="timezone">Timezone</label>
+          <select id="timezone" bind:value={selectedTimezone} class="mt-2 w-full text-black">
+            {#each timezones as timezone}
+              <option value={timezone}>{timezone || 'Choose a timezone'}</option>
+            {/each}
+          </select>
+        </div>
+      </div>
+
+      <div class="mt-4 flex w-full gap-4 px-4">
+        {#if !hideCancelButton}
+          <Button color={cancelColor} fullwidth on:click={handleCancel}>
+            {cancelText}
+          </Button>
+        {/if}
+        <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={isConfirmButtonDisabled}>
+          {confirmText}
+        </Button>
+      </div>
+    </div>
+  </div>
+</FullScreenModal>
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import FullScreenModal from './full-screen-modal.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import type { Color } from '$lib/components/elements/buttons/button.svelte';
+  import Map from './map/map.svelte';
+  export const title = 'Change Location';
+  export let prompt = 'Please select a new date:';
+  export let confirmText = 'Confirm';
+  export let confirmColor: Color = 'primary';
+  export let cancelText = 'Cancel';
+  export let cancelColor: Color = 'secondary';
+  export let hideCancelButton = false;
+  export let location: { lng: number; lat: number } = { lng: 0, lat: 0 };
+  export let id_asset: string | null = null;
+  const dispatch = createEventDispatcher();
+
+  let isConfirmButtonDisabled = false;
+
+  const originalLat = location.lat;
+  const originalLng = location.lng;
+
+  const handleCancel = () => dispatch('cancel');
+  const handleEscape = () => {
+    if (!isConfirmButtonDisabled) {
+      dispatch('cancel');
+    }
+  };
+
+  const handleConfirm = () => {
+    dispatch('confirm', location);
+  };
+</script>
+
+<FullScreenModal on:clickOutside={handleCancel} on:escape={() => handleEscape()}>
+  <div
+    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+  >
+    <div
+      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    />
+    <div>
+      <div class="text-md px-4 py-5 text-center">
+        <slot name="prompt">
+          <p>{prompt}</p>
+        </slot>
+        <div class="mt-2" />
+        <div class="flex flex-col">
+          <label for="datetime">Pick a location</label>
+        </div>
+        <div style="height: 500px;">
+          <Map
+            mapMarkers={id_asset
+              ? [
+                  {
+                    id: id_asset,
+                    lat: originalLat,
+                    lon: originalLng,
+                  },
+                ]
+              : []}
+            zoom={id_asset ? 15 : 1}
+            center={location}
+            simplified={true}
+            clickable={true}
+            on:clickedPoint={(e) => {
+              location = e.detail;
+            }}
+          />
+        </div>
+      </div>
+
+      <div class="mt-4 flex w-full gap-4 px-4">
+        {#if !hideCancelButton}
+          <Button color={cancelColor} fullwidth on:click={handleCancel}>
+            {cancelText}
+          </Button>
+        {/if}
+        <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={isConfirmButtonDisabled}>
+          {confirmText}
+        </Button>
+      </div>
+    </div>
+  </div>
+</FullScreenModal>
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@@ -28,6 +28,14 @@
  export let zoom: number | undefined = undefined;
  export let center: LngLatLike | undefined = undefined;
  export let simplified = false;
+  export let clickable = false;
+
+  let map: maplibregl.Map;
+  let marker: maplibregl.Marker | null = null;
+
+  $: if (map) {
+    map.on('click', handleMapClick);
+  }

  $: style = (async () => {
    const { data } = await api.systemConfigApi.getMapStyle({
@@ -36,7 +44,10 @@
    return data as StyleSpecification;
  })();

-  const dispatch = createEventDispatcher<{ selected: string[] }>();
+  const dispatch = createEventDispatcher<{
+    selected: string[];
+    clickedPoint: { lat: number; lng: number };
+  }>();

  function handleAssetClick(assetId: string, map: Map | null) {
    if (!map) {
@@ -63,6 +74,19 @@
    });
  }

+  function handleMapClick(event: maplibregl.MapMouseEvent) {
+    if (clickable) {
+      const { lng, lat } = event.lngLat;
+      dispatch('clickedPoint', { lng, lat });
+
+      if (marker) {
+        marker.remove();
+      }
+
+      marker = new maplibregl.Marker().setLngLat([lng, lat]).addTo(map);
+    }
+  }
+
  type FeaturePoint = Feature<Point, { id: string }>;

  const asFeature = (marker: MapMarkerResponseDto): FeaturePoint => {
@@ -87,7 +111,7 @@
 </script>

 {#await style then style}
-  <MapLibre {style} class="h-full" {center} {zoom} attributionControl={false} diffStyleUpdates={true} let:map>
+  <MapLibre {style} class="h-full" {center} {zoom} attributionControl={false} diffStyleUpdates={true} let:map bind:map>
    <NavigationControl position="top-left" showCompass={!simplified} />
    {#if !simplified}
      <GeolocateControl position="top-left" fitBoundsOptions={{ maxZoom: 12 }} />
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -11,6 +11,8 @@
  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
  import RemoveFromAlbum from '$lib/components/photos-page/actions/remove-from-album.svelte';
  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
@@ -446,6 +448,8 @@
          {/if}
          {#if isAllUserOwned}
            <DeleteAssets menuItem onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
+            <ChangeDate menuItem />
+            <ChangeLocation menuItem />
          {/if}
        </AssetSelectContextMenu>
      </AssetSelectControlBar>
--- a/web/src/routes/(user)/favorites/+page.svelte
+++ b/web/src/routes/(user)/favorites/+page.svelte
@@ -2,6 +2,8 @@
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
@@ -40,6 +42,8 @@
    <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
      <DownloadAction menuItem />
      <ArchiveAction menuItem unarchive={isAllArchive} />
+      <ChangeDate menuItem />
+      <ChangeLocation menuItem />
    </AssetSelectContextMenu>
  </AssetSelectControlBar>
 {/if}
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -8,6 +8,8 @@
  import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
@@ -377,6 +379,8 @@
        <DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
        <FavoriteAction menuItem removeFavorite={isAllFavorite} />
        <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
+        <ChangeDate menuItem />
+        <ChangeLocation menuItem />
      </AssetSelectContextMenu>
    </AssetSelectControlBar>
  {:else}
--- a/web/src/routes/(user)/photos/+page.svelte
+++ b/web/src/routes/(user)/photos/+page.svelte
@@ -2,6 +2,8 @@
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
  import AssetJobActions from '$lib/components/photos-page/actions/asset-job-actions.svelte';
  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
@@ -70,6 +72,8 @@
      {#if $selectedAssets.size > 1}
        <StackAction onStack={(ids) => assetStore.removeAssets(ids)} />
      {/if}
+      <ChangeDate menuItem />
+      <ChangeLocation menuItem />
      <AssetJobActions />
    </AssetSelectContextMenu>
  </AssetSelectControlBar>
--- a/web/src/routes/(user)/search/+page.svelte
+++ b/web/src/routes/(user)/search/+page.svelte
@@ -3,6 +3,8 @@
  import { page } from '$app/stores';
  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
@@ -117,6 +119,8 @@
        <DownloadAction menuItem />
        <FavoriteAction menuItem removeFavorite={isAllFavorite} />
        <ArchiveAction menuItem unarchive={isAllArchived} />
+        <ChangeDate menuItem />
+        <ChangeLocation menuItem />
      </AssetSelectContextMenu>
    </AssetSelectControlBar>
  {:else}