diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index 6430d463a712..4a04231c805e 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -15,6 +15,7 @@ import {policyPropTypes} from '../pages/workspace/withPolicy'; import walletTermsPropTypes from '../pages/EnablePayments/walletTermsPropTypes'; import * as PolicyUtils from '../libs/PolicyUtils'; import * as PaymentMethods from '../libs/actions/PaymentMethods'; +import * as ReportUtils from '../libs/ReportUtils'; const propTypes = { /** URL for the avatar */ @@ -89,7 +90,7 @@ const AvatarWithIndicator = (props) => { {shouldShowIndicator && ( diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index a4c000adb2be..1b087e6727cd 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -558,6 +558,28 @@ function getFullSizeAvatar(avatarURL, login) { return source.replace('_128', ''); } +/** + * Small sized avatars end with _128.. This adds the _128 at the end of the + * source URL (before the file type) if it doesn't exist there already. + * + * @param {String} avatarURL + * @param {String} login + * @returns {String|Function} + */ +function getSmallSizeAvatar(avatarURL, login) { + const source = getAvatar(avatarURL, login); + if (!_.isString(source)) { + return source; + } + + // If image source already has _128 at the end, the given avatar URL is already what we want to use here. + const lastPeriodIndex = source.lastIndexOf('.'); + if (source.substring(lastPeriodIndex - 4, lastPeriodIndex) === '_128') { + return source; + } + return `${source.substring(0, lastPeriodIndex)}_128${source.substring(lastPeriodIndex)}`; +} + /** * Returns the appropriate icons for the given chat report using the stored personalDetails. * The Avatar sources can be URLs or Icon components according to the chat type. @@ -1690,5 +1712,6 @@ export { getCommentLength, openReportFromDeepLink, getFullSizeAvatar, + getSmallSizeAvatar, getIOUOptions, };