From 925e927528c31036c80c089f8cd952b31be31d0c Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Tue, 9 Jan 2024 15:13:38 +0100
Subject: [PATCH] Fix avatar aspect ratio when zooming

---
 src/components/Avatar/Avatar.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 1bcf401..05af56f 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -2,6 +2,7 @@ import { Component, createMemo, createSignal, Show } from 'solid-js';
 import defaultAvatar from '../../assets/icons/default_avatar.svg';
 import { useMediaContext } from '../../contexts/MediaContext';
 import { hookForDev } from '../../lib/devTools';
+import { getMediaUrl } from '../../lib/media';
 import { MediaSize, PrimalUser } from '../../types/primal';
 import NoteImage from '../NoteImage/NoteImage';
 import VerificationCheck from '../VerificationCheck/VerificationCheck';
@@ -65,7 +66,6 @@ const Avatar: Component<{
     return '';
   };
 
-
   const imageSrc = createMemo(() => {
     let size: MediaSize = 'm';
 
@@ -109,6 +109,12 @@ const Avatar: Component<{
     return styles.cacheFlag;
   }
 
+  const imageMedia = () => {
+    const src = props.user?.picture || props.src || defaultAvatar;
+
+    return media?.actions.getMedia(src, 'o');
+  };
+
   return (
     <div
       id={props.id}
@@ -127,7 +133,12 @@ const Avatar: Component<{
           <Show when={props.zoomable} fallback={
             <img src={imageSrc()} alt="avatar" onerror={imgError}/>
           }>
-            <NoteImage class={props.zoomable ? 'profile_image' : ''} src={imageSrc()} onError={imgError} />
+            <NoteImage
+              class={props.zoomable ? 'profile_image' : ''}
+              media={imageMedia()}
+              src={imageSrc()}
+              onError={imgError}
+            />
           </Show>
         </div>
       </Show>