mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-03 02:10:55 +00:00
Fix avatar aspect ratio when zooming
This commit is contained in:
parent
407295608f
commit
925e927528
@ -2,6 +2,7 @@ import { Component, createMemo, createSignal, Show } from 'solid-js';
|
|||||||
import defaultAvatar from '../../assets/icons/default_avatar.svg';
|
import defaultAvatar from '../../assets/icons/default_avatar.svg';
|
||||||
import { useMediaContext } from '../../contexts/MediaContext';
|
import { useMediaContext } from '../../contexts/MediaContext';
|
||||||
import { hookForDev } from '../../lib/devTools';
|
import { hookForDev } from '../../lib/devTools';
|
||||||
|
import { getMediaUrl } from '../../lib/media';
|
||||||
import { MediaSize, PrimalUser } from '../../types/primal';
|
import { MediaSize, PrimalUser } from '../../types/primal';
|
||||||
import NoteImage from '../NoteImage/NoteImage';
|
import NoteImage from '../NoteImage/NoteImage';
|
||||||
import VerificationCheck from '../VerificationCheck/VerificationCheck';
|
import VerificationCheck from '../VerificationCheck/VerificationCheck';
|
||||||
@ -65,7 +66,6 @@ const Avatar: Component<{
|
|||||||
return '';
|
return '';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const imageSrc = createMemo(() => {
|
const imageSrc = createMemo(() => {
|
||||||
let size: MediaSize = 'm';
|
let size: MediaSize = 'm';
|
||||||
|
|
||||||
@ -109,6 +109,12 @@ const Avatar: Component<{
|
|||||||
return styles.cacheFlag;
|
return styles.cacheFlag;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const imageMedia = () => {
|
||||||
|
const src = props.user?.picture || props.src || defaultAvatar;
|
||||||
|
|
||||||
|
return media?.actions.getMedia(src, 'o');
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
id={props.id}
|
id={props.id}
|
||||||
@ -127,7 +133,12 @@ const Avatar: Component<{
|
|||||||
<Show when={props.zoomable} fallback={
|
<Show when={props.zoomable} fallback={
|
||||||
<img src={imageSrc()} alt="avatar" onerror={imgError}/>
|
<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>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
Loading…
Reference in New Issue
Block a user