nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix memory leak with avatar image

Browse Source
This commit is contained in:
billsonnn 2024-03-26 19:49:08 -04:00
parent 98b3bcc9d4
commit 0322c169ac
2 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/room/widgets/ChatBubbleUtilities.ts
View File

@ -25,17 +25,17 @@ export class ChatBubbleUtilities
figure = avatarImage.getFigure().getFigureString();
const image = await avatarImage.getCroppedImage(AvatarSetType.HEAD);
const imageUrl = await avatarImage.getCroppedImageUrl(AvatarSetType.HEAD);
const color = avatarImage.getPartColor(AvatarFigurePartType.CHEST);
if(isPlaceholder) this.placeHolderImageUrl = image.src;
if(isPlaceholder) this.placeHolderImageUrl = imageUrl;
this.AVATAR_COLOR_CACHE.set(figure, ((color && color.rgb) || 16777215));
this.AVATAR_IMAGE_CACHE.set(figure, image.src);
this.AVATAR_IMAGE_CACHE.set(figure, imageUrl);
avatarImage.dispose();
return image.src;
return imageUrl;
}
public static async getUserImage(figure: string): Promise<string>

53
src/common/layout/LayoutAvatarImageView.tsx
View File

@ -15,7 +15,7 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
{
const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
const [ randomValue, setRandomValue ] = useState(-1);
const [ isReady, setIsReady ] = useState<boolean>(false);
const isDisposed = useRef(false);
const getClassNames = useMemo(() =>
@ -47,39 +47,40 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
useEffect(() =>
{
const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
resetFigure: figure =>
{
if(isDisposed.current) return;
if(!isReady) return;
setRandomValue(Math.random());
},
dispose: () =>
{},
disposed: false
}, null);
if(!avatarImage) return;
let setType = AvatarSetType.FULL;
if(headOnly) setType = AvatarSetType.HEAD;
avatarImage.setDirection(setType, direction);
(async () =>
const resetFigure = (_figure: string) =>
{
const image = await avatarImage.getCroppedImage(setType);
if(isDisposed.current) return;
const avatarImage = GetAvatarRenderManager().createAvatarImage(_figure, AvatarScaleType.LARGE, gender, { resetFigure: (figure: string) => resetFigure(figure), dispose: null, disposed: false });
if(image) setAvatarUrl(image.src);
let setType = AvatarSetType.FULL;
avatarImage.dispose();
})();
}, [ figure, gender, direction, headOnly, randomValue ]);
if(headOnly) setType = AvatarSetType.HEAD;
avatarImage.setDirection(setType, direction);
const loadImage = async () =>
{
const imageUrl = await avatarImage.getCroppedImageUrl(setType);
if(imageUrl && !isDisposed.current) setAvatarUrl(imageUrl);
avatarImage.dispose();
}
loadImage();
}
resetFigure(figure);
}, [ figure, gender, direction, headOnly, isReady ]);
useEffect(() =>
{
isDisposed.current = false;
setIsReady(true);
return () =>
{