[IMPROVE] Accept user avatar url from external provider (#4002)

* [IMPROVE] Accept url to user avatar from external provider

* fix avatar sidebar

app/containers/Avatar/Avatar.tsx

@@ -28,7 +28,8 @@ const Avatar = React.memo(
 		text,
 		size = 25,
 		borderRadius = 4,
-		type = SubscriptionType.DIRECT
+		type = SubscriptionType.DIRECT,
+		externalProviderUrl
 	}: IAvatar) => {
 		const { theme } = useTheme();
 
@@ -67,7 +68,8 @@ const Avatar = React.memo(
 					avatarETag,
 					serverVersion,
 					rid,
-					blockUnauthenticatedAccess
+					blockUnauthenticatedAccess,
+					externalProviderUrl
 				});
 			}
 

app/containers/Avatar/index.tsx

@@ -32,7 +32,10 @@ class AvatarContainer extends React.Component<IAvatar, any> {
 
 	shouldComponentUpdate(nextProps: IAvatar, nextState: { avatarETag: string }) {
 		const { avatarETag } = this.state;
-		const { text, type } = this.props;
+		const { text, type, externalProviderUrl } = this.props;
+		if (nextProps.externalProviderUrl !== externalProviderUrl) {
+			return true;
+		}
 		if (nextState.avatarETag !== avatarETag) {
 			return true;
 		}
@@ -100,6 +103,7 @@ const mapStateToProps = (state: IApplicationState) => ({
 	blockUnauthenticatedAccess:
 		(state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess as boolean) ??
 		state.settings.Accounts_AvatarBlockUnauthenticatedAccess ??
-		true
+		true,
+	externalProviderUrl: state.settings.Accounts_AvatarExternalProviderUrl as string
 });
 export default connect(mapStateToProps)(AvatarContainer);

app/containers/Avatar/interfaces.ts

@@ -23,4 +23,5 @@ export interface IAvatar {
 	rid?: string;
 	blockUnauthenticatedAccess?: boolean;
 	serverVersion: string | null;
+	externalProviderUrl?: string;
 }

app/lib/constants/defaultSettings.ts

@@ -205,5 +205,8 @@ export const defaultSettings = {
 	},
 	Canned_Responses_Enable: {
 		type: 'valueAsBoolean'
+	},
+	Accounts_AvatarExternalProviderUrl: {
+		type: 'valueAsString'
 	}
 } as const;

app/utils/avatar.ts

@@ -2,7 +2,7 @@ import { SubscriptionType } from '../definitions/ISubscription';
 import { IAvatar } from '../containers/Avatar/interfaces';
 import { compareServerVersion } from '../lib/methods/helpers/compareServerVersion';
 
-const formatUrl = (url: string, size: number, query: string) => `${url}?format=png&size=${size}${query}`;
+const formatUrl = (url: string, size: number, query?: string) => `${url}?format=png&size=${size}${query}`;
 
 export const avatarURL = ({
 	type,
@@ -14,11 +14,16 @@ export const avatarURL = ({
 	avatarETag,
 	rid,
 	blockUnauthenticatedAccess,
-	serverVersion
+	serverVersion,
+	externalProviderUrl
 }: IAvatar): string => {
 	let room;
 	if (type === SubscriptionType.DIRECT) {
 		room = text;
+		if (externalProviderUrl) {
+			const externalUri = externalProviderUrl.trim().replace(/\/+$/, '').replace('{username}', room);
+			return formatUrl(`${externalUri}`, size);
+		}
 	} else if (rid && !compareServerVersion(serverVersion, 'lowerThan', '3.6.0')) {
 		room = `room/${rid}`;
 	} else {