add profile-image-cropper component

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -126,6 +126,7 @@
                   text={asset.isArchived ? 'Unarchive' : 'Archive'}
                 />
               {/if}
+              <MenuOption on:click={() => onMenuClick('asProfileImage')} text="As profile picture" />
             </ContextMenu>
           {/if}
         </CircleIconButton>

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

@@ -13,6 +13,7 @@
   import PhotoViewer from './photo-viewer.svelte';
   import VideoViewer from './video-viewer.svelte';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte';
 
   import { assetStore } from '$lib/stores/assets.store';
   import { isShowDetail } from '$lib/stores/preferences.store';
@@ -32,6 +33,7 @@
   let isShowDeleteConfirmation = false;
   let addToSharedAlbum = true;
   let shouldPlayMotionPhoto = false;
+  let isShowProfileImageCrop = false;
   let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true;
   let canCopyImagesToClipboard: boolean;
   const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key);
@@ -247,6 +249,7 @@
       on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
       on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
       on:toggleArchive={toggleArchive}
+      on:asProfileImage={() => (isShowProfileImageCrop = true)}
     />
   </div>
 
@@ -371,6 +374,15 @@
       </svelte:fragment>
     </ConfirmDialogue>
   {/if}
+
+  {#if isShowProfileImageCrop}
+    <ProfileImageCropper
+      {asset}
+      {publicSharedKey}
+      on:close={() => (isShowProfileImageCrop = false)}
+      on:close-viewer={handleCloseViewer}
+    />
+  {/if}
 </section>
 
 <style>

web/src/lib/components/shared-components/profile-image-cropper.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { AssetResponseDto, api } from '@api';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
+  import BaseModal from './base-modal.svelte';
+  import { stringify } from 'postcss';
+  import Button from '../elements/buttons/button.svelte';
+  const dispatch = createEventDispatcher();
+  export let asset: AssetResponseDto;
+  export let publicSharedKey = '';
+  import domtoimage from 'dom-to-image';
+  import type { UserResponseDto } from '@api';
+  import { notificationController, NotificationType } from './notification/notification';
+  import { isUpdateProfilePicture } from '$lib/stores/preferences.store';
+  onMount(() => {
+    console.log(asset);
+  });
+
+  let user: UserResponseDto;
+
+  const handleSetProfilePicture = async () => {
+    const div: HTMLElement | null = document.getElementById('profile-picture')?.childNodes[0] as HTMLElement;
+    if (!div) {
+      return;
+    }
+    domtoimage.toBlob(div).then(function (blob: Blob) {
+      const file: File = new File([blob], 'profile-picture.png', { type: 'image/png' });
+      try {
+        api.userApi.createProfileImage({ file });
+        //set store to update profile picture
+        isUpdateProfilePicture.set(true);
+        dispatch('close');
+        notificationController.show({
+          type: NotificationType.Info,
+          message: 'Profile picture set.',
+          timeout: 3000,
+        });
+      } catch (err) {
+        console.error('Error [profile-image-cropper]:', err);
+        notificationController.show({
+          type: NotificationType.Error,
+          message: 'Error setting profile picture.',
+          timeout: 3000,
+        });
+      }
+    });
+  };
+</script>
+
+<BaseModal on:close={() => dispatch('close')}>
+  <svelte:fragment slot="title">
+    <span class="flex gap-2 place-items-center">
+      <p class="font-medium">Set profile picture</p>
+    </span>
+  </svelte:fragment>
+  <div class="flex justify-center place-items-center items-center">
+    <div
+      id="profile-picture"
+      class="w-1/2 aspect-square rounded-full overflow-hidden relative flex border-immich-primary border-4"
+    >
+      <PhotoViewer {publicSharedKey} {asset} on:close={() => console.log('close')} />
+    </div>
+  </div>
+  <div id="output" />
+  <span class="p-4 flex justify-end">
+    <Button on:click={handleSetProfilePicture}>
+      <p class="">Set as profile picture</p>
+    </Button>
+  </span>
+
+  <div class="max-h-[400px] flex flex-col mb-2" />
+</BaseModal>