2021-08-06 05:38:57 +02:00
|
|
|
import { AvatarScaleType, AvatarSetType } from '@nitrots/nitro-renderer';
|
2021-08-15 08:24:10 +02:00
|
|
|
import { FC, useEffect, useRef, useState } from 'react';
|
2021-06-23 05:59:02 +02:00
|
|
|
import { GetAvatarRenderManager } from '../../../api';
|
2021-04-29 00:45:38 +02:00
|
|
|
import { AvatarImageViewProps } from './AvatarImageView.types';
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
export const AvatarImageView: FC<AvatarImageViewProps> = props =>
|
2021-04-14 23:47:12 +02:00
|
|
|
{
|
2021-04-29 00:45:38 +02:00
|
|
|
const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1 } = props;
|
|
|
|
const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
|
2021-06-29 21:20:12 +02:00
|
|
|
const [ randomValue, setRandomValue ] = useState(-1);
|
2021-08-15 08:24:10 +02:00
|
|
|
const isDisposed = useRef(false);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-06-29 21:20:12 +02:00
|
|
|
useEffect(() =>
|
2021-04-14 23:47:12 +02:00
|
|
|
{
|
2021-04-29 00:45:38 +02:00
|
|
|
const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
|
2021-08-16 08:00:31 +02:00
|
|
|
resetFigure: figure =>
|
2021-08-16 08:39:56 +02:00
|
|
|
{
|
2021-08-15 08:24:10 +02:00
|
|
|
if(isDisposed.current) return;
|
|
|
|
|
|
|
|
setRandomValue(Math.random());
|
|
|
|
},
|
2021-04-29 00:45:38 +02:00
|
|
|
dispose: () => {},
|
|
|
|
disposed: false
|
|
|
|
}, null);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-06-29 21:20:12 +02:00
|
|
|
if(!avatarImage) return;
|
|
|
|
|
|
|
|
let setType = AvatarSetType.FULL;
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-06-29 21:20:12 +02:00
|
|
|
if(headOnly) setType = AvatarSetType.HEAD;
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-06-29 21:20:12 +02:00
|
|
|
avatarImage.setDirection(setType, direction);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-06-29 21:20:12 +02:00
|
|
|
const image = avatarImage.getCroppedImage(setType);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-06-29 21:20:12 +02:00
|
|
|
if(image) setAvatarUrl(image.src);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-06-29 21:20:12 +02:00
|
|
|
avatarImage.dispose();
|
|
|
|
}, [ figure, gender, direction, headOnly, randomValue ]);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-08-15 08:24:10 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
isDisposed.current = false;
|
|
|
|
|
|
|
|
return () =>
|
|
|
|
{
|
|
|
|
isDisposed.current = true;
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
const url = `url('${ avatarUrl }')`;
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
return <div className={ 'avatar-image scale-' + scale } style={ (avatarUrl && url.length) ? { backgroundImage: url } : {} }></div>;
|
2021-04-14 23:47:12 +02:00
|
|
|
}
|