feat(web): set asset as profile picture (#3106)

* add profile-image-cropper component

* add dom-to-image library

* add store to update user profile picture when set

* dom-to-image

* remove console.logs, add svelte binding

* fix format, unused vars

* change caching of profile image

* set hash after profile image change

* remove unnecessary store

* remove unecesarry changes

* set types/dom-to-image as devDependency

* remove unecessary type declarations
use handleError

* remove error notification
which is already handled by handleError

* Revert "set types/dom-to-image as devDependency"

This reverts commit ca8b3ed1bb.

* add types do dev dependencies

* use on:close instead of on:close={()=>...}

* add newline

* sort imports

* bind photo-viewer imgElement directly, not working

* remove console.log, fix binding

* make imgElement optional

* fix element as optional prop

* fix type

* check for transparency

* small changes

* fix img.decode

* add bg, remove publicsharedkey

* fix omit publicSharedKey

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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';
@@ -31,6 +32,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);
@@ -246,6 +248,7 @@
       on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
       on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
       on:toggleArchive={toggleArchive}
+      on:asProfileImage={() => (isShowProfileImageCrop = true)}
     />
   </div>
 
@@ -332,6 +335,14 @@
       </svelte:fragment>
     </ConfirmDialogue>
   {/if}
+
+  {#if isShowProfileImageCrop}
+    <ProfileImageCropper
+      {asset}
+      on:close={() => (isShowProfileImageCrop = false)}
+      on:close-viewer={handleCloseViewer}
+    />
+  {/if}
 </section>
 
 <style>