AvatarPreview: Use avatarPath directly if provided
This commit is contained in:
parent
8d1ab9fd69
commit
2f68defa4b
|
@ -50,8 +50,14 @@ export const AvatarPreview = ({
|
||||||
|
|
||||||
const [avatarPreview, setAvatarPreview] = useState<Uint8Array | undefined>();
|
const [avatarPreview, setAvatarPreview] = useState<Uint8Array | undefined>();
|
||||||
|
|
||||||
// Loads the initial avatarPath if one is provided.
|
// Loads the initial avatarPath if one is provided, but only if we're in editable mode.
|
||||||
|
// If we're not editable, we assume that we either have an avatarPath or we show a
|
||||||
|
// default avatar.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (!isEditable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const startingAvatarPath = startingAvatarPathRef.current;
|
const startingAvatarPath = startingAvatarPathRef.current;
|
||||||
if (!startingAvatarPath) {
|
if (!startingAvatarPath) {
|
||||||
return noop;
|
return noop;
|
||||||
|
@ -84,7 +90,7 @@ export const AvatarPreview = ({
|
||||||
return () => {
|
return () => {
|
||||||
shouldCancel = true;
|
shouldCancel = true;
|
||||||
};
|
};
|
||||||
}, [onAvatarLoaded]);
|
}, [onAvatarLoaded, isEditable]);
|
||||||
|
|
||||||
// Ensures that when avatarValue changes we generate new URLs
|
// Ensures that when avatarValue changes we generate new URLs
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -115,7 +121,7 @@ export const AvatarPreview = ({
|
||||||
let imageStatus: ImageStatus;
|
let imageStatus: ImageStatus;
|
||||||
if (avatarValue && !objectUrl) {
|
if (avatarValue && !objectUrl) {
|
||||||
imageStatus = ImageStatus.Loading;
|
imageStatus = ImageStatus.Loading;
|
||||||
} else if (objectUrl) {
|
} else if (objectUrl || avatarPath) {
|
||||||
imageStatus = ImageStatus.HasImage;
|
imageStatus = ImageStatus.HasImage;
|
||||||
} else {
|
} else {
|
||||||
imageStatus = ImageStatus.Nothing;
|
imageStatus = ImageStatus.Nothing;
|
||||||
|
@ -131,7 +137,7 @@ export const AvatarPreview = ({
|
||||||
componentStyle.cursor = 'pointer';
|
componentStyle.cursor = 'pointer';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!avatarPreview) {
|
if (imageStatus === ImageStatus.Nothing) {
|
||||||
return (
|
return (
|
||||||
<div className="AvatarPreview">
|
<div className="AvatarPreview">
|
||||||
<div
|
<div
|
||||||
|
@ -161,7 +167,7 @@ export const AvatarPreview = ({
|
||||||
imageStatus === ImageStatus.HasImage
|
imageStatus === ImageStatus.HasImage
|
||||||
? {
|
? {
|
||||||
...componentStyle,
|
...componentStyle,
|
||||||
backgroundImage: `url(${objectUrl})`,
|
backgroundImage: `url('${objectUrl || avatarPath}')`,
|
||||||
}
|
}
|
||||||
: componentStyle
|
: componentStyle
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue