feat: respect the room avatar external provider url setting (#5095)

* feat: respect the room avatar external provider url setting

* add storyshot

---------

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

__tests__/containers/Avatar/__snapshots__/Avatar.stories.storyshot

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Avatar Avatar External Provider Url 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*&format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+
 exports[`Storyshots Avatar Avatar Path 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
 exports[`Storyshots Avatar Avatar Room Id 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/room/devWBbYr7inwupPqK?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
@@ -20,6 +22,8 @@ exports[`Storyshots Avatar Direct 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\
 
 exports[`Storyshots Avatar Emoji 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":30,\\"height\\":30}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/troll.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}"`;
 
+exports[`Storyshots Avatar Room Avatar External Provider Url 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://cdn.pensador.com/img/authors/ho/me/homer-simpson-l.jpg?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+
 exports[`Storyshots Avatar Static 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
 exports[`Storyshots Avatar Touchable 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{},\\"accessibilityValue\\":{},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]}"`;

app/containers/Avatar/Avatar.stories.tsx

@@ -67,3 +67,26 @@ export const Children = () => (
 export const WrongServer = () => <Avatar text='Avatar' server='https://google.com' size={56} />;
 
 export const CustomStyle = () => <Avatar text='Avatar' server={server} size={56} style={styles.custom} />;
+
+export const AvatarExternalProviderUrl = () => (
+	<Avatar
+		text='Avatar'
+		server={server}
+		size={56}
+		avatarExternalProviderUrl={
+			'https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*'
+		}
+	/>
+);
+
+export const RoomAvatarExternalProviderUrl = () => (
+	<Avatar
+		server={server}
+		size={56}
+		roomAvatarExternalProviderUrl={'https://cdn.pensador.com/img/authors/ho/me/homer-simpson-l.jpg'}
+		// obligatory pass type, serverVersion and rid
+		type='c'
+		serverVersion={'3.8.0'}
+		rid='devWBbYr7inwupPqK'
+	/>
+);

app/containers/Avatar/Avatar.tsx

@@ -29,7 +29,8 @@ const Avatar = React.memo(
 		size = 25,
 		borderRadius = 4,
 		type = SubscriptionType.DIRECT,
-		externalProviderUrl
+		avatarExternalProviderUrl,
+		roomAvatarExternalProviderUrl
 	}: IAvatar) => {
 		if ((!text && !avatar && !emoji && !rid) || !server) {
 			return null;
@@ -59,7 +60,8 @@ const Avatar = React.memo(
 					serverVersion,
 					rid,
 					blockUnauthenticatedAccess,
-					externalProviderUrl
+					avatarExternalProviderUrl,
+					roomAvatarExternalProviderUrl
 				});
 			}
 

app/containers/Avatar/AvatarContainer.tsx

@@ -32,9 +32,10 @@ const AvatarContainer = ({
 		shallowEqual
 	);
 
-	const externalProviderUrl = useSelector(
+	const { avatarExternalProviderUrl, roomAvatarExternalProviderUrl } = useSelector((state: IApplicationState) => ({
-		(state: IApplicationState) => state.settings.Accounts_AvatarExternalProviderUrl as string
+		avatarExternalProviderUrl: state.settings.Accounts_AvatarExternalProviderUrl as string,
-	);
+		roomAvatarExternalProviderUrl: state.settings.Accounts_RoomAvatarExternalProviderUrl as string
+	}));
 	const blockUnauthenticatedAccess = useSelector(
 		(state: IApplicationState) =>
 			(state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess as boolean) ??
@@ -62,7 +63,8 @@ const AvatarContainer = ({
 			isStatic={isStatic}
 			rid={rid}
 			blockUnauthenticatedAccess={blockUnauthenticatedAccess}
-			externalProviderUrl={externalProviderUrl}
+			avatarExternalProviderUrl={avatarExternalProviderUrl}
+			roomAvatarExternalProviderUrl={roomAvatarExternalProviderUrl}
 			avatarETag={avatarETag}
 			serverVersion={serverVersion}
 		/>

app/containers/Avatar/interfaces.ts

@@ -22,5 +22,6 @@ export interface IAvatar {
 	rid?: string;
 	blockUnauthenticatedAccess?: boolean;
 	serverVersion?: string | null;
-	externalProviderUrl?: string;
+	avatarExternalProviderUrl?: string;
+	roomAvatarExternalProviderUrl?: string;
 }

app/lib/constants/defaultSettings.ts

@@ -213,6 +213,9 @@ export const defaultSettings = {
 	Accounts_AvatarExternalProviderUrl: {
 		type: 'valueAsString'
 	},
+	Accounts_RoomAvatarExternalProviderUrl: {
+		type: 'valueAsString'
+	},
 	VideoConf_Enable_DMs: {
 		type: 'valueAsBoolean'
 	},

app/lib/encryption/helpers/createQuoteAttachment.ts

@@ -4,7 +4,7 @@ import { getAvatarURL } from '../../methods/helpers';
 
 export function createQuoteAttachment(message: IMessage, messageLink: string): IAttachment {
 	const { server, version: serverVersion } = store.getState().server;
-	const externalProviderUrl = (store.getState().settings?.Accounts_AvatarExternalProviderUrl as string) || '';
+	const avatarExternalProviderUrl = (store.getState().settings?.Accounts_AvatarExternalProviderUrl as string) || '';
 
 	return {
 		text: message.msg,
@@ -17,7 +17,7 @@ export function createQuoteAttachment(message: IMessage, messageLink: string): I
 			userId: message.u?._id,
 			server,
 			serverVersion,
-			externalProviderUrl
+			avatarExternalProviderUrl
 		}),
 		attachments: message.attachments || [],
 		ts: message.ts

app/lib/methods/helpers/getAvatarUrl.ts

@@ -21,15 +21,19 @@ export const getAvatarURL = ({
 	rid,
 	blockUnauthenticatedAccess,
 	serverVersion,
-	externalProviderUrl
+	avatarExternalProviderUrl,
+	roomAvatarExternalProviderUrl
 }: IAvatar): string => {
 	let room;
 	if (type === SubscriptionType.DIRECT) {
 		room = text;
-		if (externalProviderUrl) {
+		if (avatarExternalProviderUrl) {
-			const externalUri = externalProviderUrl.trim().replace(/\/+$/, '').replace('{username}', room);
+			const externalUri = avatarExternalProviderUrl.trim().replace(/\/+$/, '').replace('{username}', room);
 			return formatUrl(`${externalUri}`, size);
 		}
+	} else if (rid && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.8.0') && roomAvatarExternalProviderUrl) {
+		const externalUri = roomAvatarExternalProviderUrl.trim().replace(/\/+$/, '').replace('{roomId}', rid);
+		return formatUrl(`${externalUri}`, size);
 	} else if (rid && !compareServerVersion(serverVersion, 'lowerThan', '3.6.0')) {
 		room = `room/${rid}`;
 	} else {