2021-04-29 00:45:38 +02:00
|
|
|
import { AvatarScaleType, AvatarSetType } from 'nitro-renderer';
|
|
|
|
import { FC, useCallback, useEffect, useState } from 'react';
|
|
|
|
import { GetAvatarRenderManager } from '../../api';
|
|
|
|
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;
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
const getUserImageUrl = useCallback(() =>
|
2021-04-14 23:47:12 +02:00
|
|
|
{
|
2021-04-29 00:45:38 +02:00
|
|
|
let url = null;
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
|
|
|
|
resetFigure: (figure) => setAvatarUrl(getUserImageUrl()),
|
|
|
|
dispose: () => {},
|
|
|
|
disposed: false
|
|
|
|
}, null);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
if(avatarImage)
|
2021-04-14 23:47:12 +02:00
|
|
|
{
|
2021-04-29 00:45:38 +02:00
|
|
|
let setType = AvatarSetType.FULL;
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
if(headOnly) setType = AvatarSetType.HEAD;
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
avatarImage.setDirection(setType, direction);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
const image = avatarImage.getCroppedImage(setType);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
if(image) url = image.src;
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
avatarImage.dispose();
|
2021-04-14 23:47:12 +02:00
|
|
|
}
|
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
return url;
|
|
|
|
}, [ figure, gender, direction, headOnly ]);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
2021-04-29 00:45:38 +02:00
|
|
|
useEffect(() =>
|
2021-04-14 23:47:12 +02:00
|
|
|
{
|
2021-04-29 00:45:38 +02:00
|
|
|
setAvatarUrl(getUserImageUrl());
|
|
|
|
}, [ getUserImageUrl ]);
|
2021-04-14 23:47:12 +02:00
|
|
|
|
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
|
|
|
}
|