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;