feat(web): manually link live photos (#12514)

feat(web,server): manually link live photos

web/src/lib/components/photos-page/actions/link-live-photo-action.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import type { OnLink } from '$lib/utils/actions';
+  import { AssetTypeEnum, updateAsset } from '@immich/sdk';
+  import { mdiMotionPlayOutline, mdiTimerSand } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+  export let onLink: OnLink;
+  export let menuItem = false;
+
+  let loading = false;
+
+  const text = $t('link_motion_video');
+  const icon = mdiMotionPlayOutline;
+
+  const { clearSelect, getOwnedAssets } = getAssetControlContext();
+
+  const handleLink = async () => {
+    let [still, motion] = [...getOwnedAssets()];
+    if (still.type === AssetTypeEnum.Video) {
+      [still, motion] = [motion, still];
+    }
+
+    loading = true;
+    const response = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: motion.id } });
+    onLink(response);
+    clearSelect();
+    loading = false;
+  };
+</script>
+
+{#if menuItem}
+  <MenuOption {text} {icon} onClick={handleLink} />
+{/if}
+
+{#if !menuItem}
+  {#if loading}
+    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
+  {:else}
+    <CircleIconButton title={text} {icon} on:click={handleLink} />
+  {/if}
+{/if}

web/src/lib/i18n/en.json

@@ -785,6 +785,7 @@
   "library_options": "Library options",
   "light": "Light",
   "like_deleted": "Like deleted",
+  "link_motion_video": "Link motion video",
   "link_options": "Link options",
   "link_to_oauth": "Link to OAuth",
   "linked_oauth_account": "Linked OAuth account",

web/src/lib/utils/actions.ts

@@ -6,6 +6,7 @@ import { handleError } from './handle-error';
 
 export type OnDelete = (assetIds: string[]) => void;
 export type OnRestore = (ids: string[]) => void;
+export type OnLink = (asset: AssetResponseDto) => void;
 export type OnArchive = (ids: string[], isArchived: boolean) => void;
 export type OnFavorite = (ids: string[], favorite: boolean) => void;
 export type OnStack = (ids: string[]) => void;

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

@@ -2,30 +2,32 @@
   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 AssetJobActions from '$lib/components/photos-page/actions/asset-job-actions.svelte';
   import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
   import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.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';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
+  import LinkLivePhotoAction from '$lib/components/photos-page/actions/link-live-photo-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
+  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import MemoryLane from '$lib/components/photos-page/memory-lane.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { AssetAction } from '$lib/constants';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
-  import { AssetStore } from '$lib/stores/assets.store';
-  import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { mdiDotsVertical, mdiPlus } from '@mdi/js';
+  import { AssetStore } from '$lib/stores/assets.store';
   import { preferences, user } from '$lib/stores/user.store';
-  import { t } from 'svelte-i18n';
+  import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
+  import { mdiDotsVertical, mdiPlus } from '@mdi/js';
   import { onDestroy } from 'svelte';
-  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
+  import { t } from 'svelte-i18n';
 
   let { isViewing: showAssetViewer } = assetViewingStore;
   const assetStore = new AssetStore({ isArchived: false, withStacked: true, withPartners: true });
@@ -51,6 +53,13 @@
     }
   };
 
+  const handleLink = (asset: AssetResponseDto) => {
+    if (asset.livePhotoVideoId) {
+      assetStore.removeAssets([asset.livePhotoVideoId]);
+    }
+    assetStore.updateAssets([asset]);
+  };
+
   onDestroy(() => {
     assetStore.destroy();
   });
@@ -78,6 +87,9 @@
           onUnstack={(assets) => assetStore.addAssets(assets)}
         />
       {/if}
+      {#if $selectedAssets.size === 2 && [...$selectedAssets].some((asset) => asset.type === AssetTypeEnum.Image && [...$selectedAssets].some((asset) => asset.type === AssetTypeEnum.Video))}
+        <LinkLivePhotoAction menuItem onLink={handleLink} />
+      {/if}
       <ChangeDate menuItem />
       <ChangeLocation menuItem />
       <ArchiveAction menuItem onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />