diff --git a/react/features/base/participants/components/Avatar.native.js b/react/features/base/participants/components/Avatar.native.js index d7af82c47..057f18d45 100644 --- a/react/features/base/participants/components/Avatar.native.js +++ b/react/features/base/participants/components/Avatar.native.js @@ -5,14 +5,16 @@ import { CachedImage, ImageCache } from 'react-native-img-cache'; import { Platform } from '../../react'; import { ColorPalette } from '../../styles'; -// FIXME @lyubomir: The string images/avatar2.png appears three times in our -// source code at the time of this writing. Firstly, it presents a maintenance -// obstacle which increases the risks of inconsistency. Secondly, it is -// repulsive (when enlarged, especially, on mobile/React Native, for example). /** * The default image/source to be used in case none is specified or the * specified one fails to load. * + * XXX The relative path to the default/stock (image) file is defined by the + * const DEFAULT_AVATAR_RELATIVE_PATH. Unfortunately, the + * packager of React Native cannot deal with it early enough for the following + * require to succeed at runtime. Anyway, be sure to synchronize the + * relative path on Web and mobile for the purposes of consistency. + * * @private * @type {string} */ diff --git a/react/features/base/participants/constants.js b/react/features/base/participants/constants.js index fa1a4d7ca..fd7344fd7 100644 --- a/react/features/base/participants/constants.js +++ b/react/features/base/participants/constants.js @@ -1,3 +1,18 @@ +/** + * The relative path to the default/stock avatar (image) file used on both + * Web/React and mobile/React Native (for the purposes of consistency). + * + * XXX (1) Web/React utilizes relativity on the Jitsi Meet deployment. + * (2) Mobile/React Native utilizes relativity on the local file system at build + * time. Unfortunately, the packager of React Native cannot deal with the + * const early enough for require to succeed at runtime. + * Anyway, be sure to synchronize the relative path on Web and mobile for the + * purposes of consistency. + * + * @type {string} + */ +export const DEFAULT_AVATAR_RELATIVE_PATH = 'images/avatar.png'; + /** * Local participant might not have real ID until he joins a conference, * so use 'local' as its default ID. diff --git a/react/features/base/participants/functions.js b/react/features/base/participants/functions.js index 99e2ef4f9..cf3d81a03 100644 --- a/react/features/base/participants/functions.js +++ b/react/features/base/participants/functions.js @@ -1,3 +1,5 @@ +import { DEFAULT_AVATAR_RELATIVE_PATH } from './constants'; + declare var config: Object; declare var interfaceConfig: Object; declare var MD5: Object; @@ -20,7 +22,7 @@ export function getAvatarURL(participant) { // If disableThirdPartyRequests disables third-party avatar services, we are // restricted to a stock image of ours. if (typeof config === 'object' && config.disableThirdPartyRequests) { - return 'images/avatar.png'; + return DEFAULT_AVATAR_RELATIVE_PATH; } const { avatarID, avatarURL, email, id } = participant; diff --git a/react/features/toolbox/defaultToolbarButtons.js b/react/features/toolbox/defaultToolbarButtons.js index e5d9b8575..702c20a20 100644 --- a/react/features/toolbox/defaultToolbarButtons.js +++ b/react/features/toolbox/defaultToolbarButtons.js @@ -2,13 +2,14 @@ import React from 'react'; +import { DEFAULT_AVATAR_RELATIVE_PATH } from '../base/participants'; import { openDeviceSelectionDialog } from '../device-selection'; import { openDialOutDialog } from '../dial-out'; import { openAddPeopleDialog, openInviteDialog } from '../invite'; -import UIEvents from '../../../service/UI/UIEvents'; - import { VideoQualityButton } from '../video-quality'; +import UIEvents from '../../../service/UI/UIEvents'; + declare var APP: Object; declare var interfaceConfig: Object; declare var JitsiMeetJS: Object; @@ -342,7 +343,7 @@ const buttons: Object = { enabled: true, html: , + src = { DEFAULT_AVATAR_RELATIVE_PATH } />, id: 'toolbar_button_profile', onClick() { JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');