nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-18 09:52:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update AvatarImageView

Browse Source
This commit is contained in:
Bill 2021-04-28 18:45:38 -04:00
parent b62dab0a6f
commit 33e4d125db
4 changed files with 36 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/nitro/avatar/GetAvatarRenderManager.ts Normal file
View File

@ -0,0 +1,6 @@
import { IAvatarRenderManager, Nitro } from 'nitro-renderer';
export function GetAvatarRenderManager(): IAvatarRenderManager
{
return Nitro.instance.avatar;
}

1
src/api/nitro/avatar/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './GetAvatarRenderManager';

1
src/api/nitro/index.ts
View File

@ -1,2 +1,3 @@
export * from './avatar';
export * from './room'; export * from './room';
export * from './session'; export * from './session';

119
src/views/avatar-image/AvatarImageView.tsx
View File

@ -1,111 +1,48 @@
import { AdvancedMap } from 'nitro-renderer'; import { AvatarScaleType, AvatarSetType } from 'nitro-renderer';
import { AvatarScaleType } from 'nitro-renderer/src/nitro/avatar/enum/AvatarScaleType'; import { FC, useCallback, useEffect, useState } from 'react';
import { AvatarSetType } from 'nitro-renderer/src/nitro/avatar/enum/AvatarSetType'; import { GetAvatarRenderManager } from '../../api';
import { IAvatarImageListener } from 'nitro-renderer/src/nitro/avatar/IAvatarImageListener'; import { AvatarImageViewProps } from './AvatarImageView.types';
import { Nitro } from 'nitro-renderer/src/nitro/Nitro';
import { Component } from 'react';
import { AvatarImageViewProps, AvatarImageViewState } from './AvatarImageView.types';
export class AvatarImageView extends Component<AvatarImageViewProps, AvatarImageViewState> implements IAvatarImageListener export const AvatarImageView: FC<AvatarImageViewProps> = props =>
{ {
private static _maxAvatarCacheSize = 10; const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1 } = props;
private static _avatarCache: AdvancedMap<string, string> = new AdvancedMap();
private static defaultProps: AvatarImageViewProps = { const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
figure: '',
gender: 'M',
headOnly: false,
direction: 0,
scale: 1
};
constructor(props: AvatarImageViewProps) const getUserImageUrl = useCallback(() =>
{;
super(props);
this.state = {
avatarUrl: null
};
}
public dispose(): void
{ {
let url = null;
} const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
resetFigure: (figure) => setAvatarUrl(getUserImageUrl()),
dispose: () => {},
disposed: false
}, null);
public componentDidMount(): void if(avatarImage)
{
this.buildAvatar();
}
private buildAvatar(): void
{
const imageUrl = this.getUserImageUrl();
if(imageUrl && imageUrl.length) this.setState({ avatarUrl: imageUrl });
}
private getUserImageUrl(): string
{
const build = this.getAvatarBuildString();
let existing = AvatarImageView._avatarCache.getValue(build);
if(!existing)
{ {
const avatarImage = Nitro.instance.avatar.createAvatarImage(this.props.figure, AvatarScaleType.LARGE, this.props.gender, this, null); let setType = AvatarSetType.FULL;
if(avatarImage) if(headOnly) setType = AvatarSetType.HEAD;
{
let setType = AvatarSetType.FULL;
if(this.props.headOnly) setType = AvatarSetType.HEAD; avatarImage.setDirection(setType, direction);
avatarImage.setDirection(setType, this.props.direction); const image = avatarImage.getCroppedImage(setType);
const image = avatarImage.getCroppedImage(setType); if(image) url = image.src;
if(image) existing = image.src; avatarImage.dispose();
avatarImage.dispose();
}
if(existing) this.putInCache(build, existing);
} }
return existing; return url;
} }, [ figure, gender, direction, headOnly ]);
public resetFigure(figure: string): void useEffect(() =>
{ {
AvatarImageView._avatarCache.remove(this.getAvatarBuildString()); setAvatarUrl(getUserImageUrl());
}, [ getUserImageUrl ]);
this.buildAvatar(); const url = `url('${ avatarUrl }')`;
}
public getAvatarBuildString(): string
{
return (`${ this.props.figure }:${ this.props.gender }:${ this.props.direction }:${ this.props.headOnly }`);
}
private putInCache(build: string, url: string): void
{
if(AvatarImageView._avatarCache.length === AvatarImageView._maxAvatarCacheSize) AvatarImageView._avatarCache.remove(AvatarImageView._avatarCache.getKey(0));
AvatarImageView._avatarCache.add(build, url);
}
public render(): JSX.Element
{
const url = `url('${ this.state.avatarUrl }')`;
return ( return <div className={ 'avatar-image scale-' + scale } style={ (avatarUrl && url.length) ? { backgroundImage: url } : {} }></div>;
<div className="avatar-image" style={ (url && url.length) ? { backgroundImage: url } : {} }></div>
);
}
public get disposed(): boolean
{
return false;
}
} }