[RN] fix(Avatar): Match the implementation for web

conference.js

 import EventEmitter from "events";
 
 import {
-    conferenceJoined,
+    AVATAR_ID_COMMAND,
+    AVATAR_URL_COMMAND,
     conferenceFailed,
-    conferenceLeft
+    conferenceJoined,
+    conferenceLeft,
+    EMAIL_COMMAND
 } from './react/features/base/conference';
 import {
     isFatalJitsiConnectionError
  * Known custom conference commands.
  */
 const commands = {
-    EMAIL: "email",
-    AVATAR_URL: "avatar-url",
-    AVATAR_ID: "avatar-id",
+    AVATAR_ID: AVATAR_ID_COMMAND,
+    AVATAR_URL: AVATAR_URL_COMMAND,
+    CUSTOM_ROLE: "custom-role",
+    EMAIL: EMAIL_COMMAND,
     ETHERPAD: "etherpad",
-    SHARED_VIDEO: "shared-video",
-    CUSTOM_ROLE: "custom-role"
+    SHARED_VIDEO: "shared-video"
 };
 
 /**

modules/settings/Settings.js

 
 import UIUtil from '../UI/util/UIUtil';
 import jitsiLocalStorage from '../util/JitsiLocalStorage';
-
-function generateUniqueId() {
-    function _p8() {
-        return (Math.random().toString(16) + "000000000").substr(2, 8);
-    }
-    return _p8() + _p8() + _p8() + _p8();
-}
+import { randomHexString } from '../../react/features/base/util';
 
 let avatarUrl = '';
 
 let avatarId = UIUtil.unescapeHtml(jitsiLocalStorage.getItem("avatarId") || '');
 if (!avatarId) {
     // if there is no avatar id, we generate a unique one and use it forever
-    avatarId = generateUniqueId();
+    avatarId = randomHexString(32);
     jitsiLocalStorage.setItem("avatarId", avatarId);
 }
 

react/features/base/conference/actions.js

 import { JitsiConferenceEvents } from '../lib-jitsi-meet';
 import {
+    changeParticipantAvatarID,
+    changeParticipantAvatarURL,
     changeParticipantEmail,
     dominantSpeakerChanged,
+    getLocalParticipant,
     participantJoined,
     participantLeft,
     participantRoleChanged
     SET_PASSWORD,
     SET_ROOM
 } from './actionTypes';
-import { EMAIL_COMMAND } from './constants';
+import {
+    AVATAR_ID_COMMAND,
+    AVATAR_URL_COMMAND,
+    EMAIL_COMMAND
+} from './constants';
 import { _addLocalTracksToConference } from './functions';
 
 /**
             JitsiConferenceEvents.USER_ROLE_CHANGED,
             (...args) => dispatch(participantRoleChanged(...args)));
 
+    conference.addCommandListener(
+            AVATAR_ID_COMMAND,
+            (data, id) => dispatch(changeParticipantAvatarID(id, data.value)));
+    conference.addCommandListener(
+            AVATAR_URL_COMMAND,
+            (data, id) => dispatch(changeParticipantAvatarURL(id, data.value)));
     conference.addCommandListener(
             EMAIL_COMMAND,
             (data, id) => dispatch(changeParticipantEmail(id, data.value)));
 }
 
+/**
+ * Sets the data for the local participant to the conference.
+ *
+ * @param {JitsiConference} conference - The JitsiConference instance.
+ * @param {Object} state - The Redux state.
+ * @returns {void}
+ */
+function _setLocalParticipantData(conference, state) {
+    const localParticipant
+        = getLocalParticipant(state['features/base/participants']);
+
+    conference.removeCommand(AVATAR_ID_COMMAND);
+    conference.sendCommand(AVATAR_ID_COMMAND, {
+        value: localParticipant.avatarID
+    });
+}
+
 /**
  * Signals that a specific conference has failed.
  *
 
         _addConferenceListeners(conference, dispatch);
 
+        _setLocalParticipantData(conference, state);
+
         conference.join(password);
     };
 }

react/features/base/conference/constants.js

 /**
- * The command type for updating a participant's email address.
+ * The command type for updating a participant's avatar ID.
+ *
+ * @type {string}
+ */
+export const AVATAR_ID_COMMAND = 'avatar-id';
+
+/**
+ * The command type for updating a participant's avatar URL.
+ *
+ * @type {string}
+ */
+export const AVATAR_URL_COMMAND = 'avatar-url';
+
+/**
+ * The command type for updating a participant's e-mail address.
  *
  * @type {string}
  */

react/features/base/conference/index.js

 export * from './actions';
 export * from './actionTypes';
+export * from './constants';
 export * from './functions';
 
 import './middleware';

react/features/base/participants/components/ParticipantView.native.js

 import { getTrackByMediaTypeAndParticipant } from '../../tracks';
 
 import Avatar from './Avatar';
-import { getParticipantById } from '../functions';
+import { getAvatarURL, getParticipantById } from '../functions';
 import { styles } from './styles';
 
 /**
  * }}
  */
 function _mapStateToProps(state, ownProps) {
-    const participantId = ownProps.participantId;
-    const participant
-        = getParticipantById(
-            state['features/base/participants'],
-            participantId);
+    const { participantId } = ownProps;
 
     return {
-        _avatar: participant ? participant.avatar : undefined,
+        _avatar:
+            getAvatarURL(
+                getParticipantById(
+                    state['features/base/participants'],
+                    participantId)),
         _videoTrack:
             getTrackByMediaTypeAndParticipant(
                 state['features/base/tracks'],

react/features/base/participants/functions.js

         // from a configured avatar service).
         if (!key) {
             key = id;
+            if (!key) {
+                return undefined;
+            }
         }
 
         // The deployment is allowed to choose the avatar service which is to

react/features/base/participants/reducer.js

 import { ReducerRegistry, setStateProperty } from '../redux';
+import { randomHexString } from '../util';
 
 import {
     DOMINANT_SPEAKER_CHANGED,
     LOCAL_PARTICIPANT_DEFAULT_ID,
     PARTICIPANT_ROLE
 } from './constants';
-import { getAvatarURL } from './functions';
 
 /**
  * Participant object.
 
     case PARTICIPANT_ID_CHANGED:
         if (state.id === action.oldValue) {
-            const id = action.newValue;
-            const newState = {
+            return {
                 ...state,
-                id
+                id: action.newValue
             };
-
-            if (!newState.avatar) {
-                newState.avatar = getAvatarURL(newState);
-            }
-
-            return newState;
         }
         break;
 
     case PARTICIPANT_JOINED: {
         const participant = action.participant; // eslint-disable-line no-shadow
-        const { avatar, dominantSpeaker, email, local, pinned, role }
+        const { avatarURL, dominantSpeaker, email, local, pinned, role }
             = participant;
-        let { id, name } = participant;
+        let { avatarID, id, name } = participant;
+
+        // avatarID
+        //
+        // TODO Get the avatarID of the local participant from localStorage.
+        if (!avatarID && local) {
+            avatarID = randomHexString(32);
+        }
 
         // id
         //
             name = local ? 'me' : 'Fellow Jitster';
         }
 
-        const newState = {
-            avatar,
+        return {
+            avatarID,
+            avatarURL,
             dominantSpeaker: dominantSpeaker || false,
             email,
             id,
             pinned: pinned || false,
             role: role || PARTICIPANT_ROLE.NONE
         };
-
-        if (!newState.avatar) {
-            newState.avatar = getAvatarURL(newState);
-        }
-
-        return newState;
     }
 
     case PARTICIPANT_UPDATED: {
                 }
             }
 
-            if (!newState.avatar) {
-                newState.avatar = getAvatarURL(newState);
-            }
-
             return newState;
         }
         break;