feat(branding): Add custom avatar backgrounds

modules/API/API.js

             });
             break;
         }
+        case 'get-custom-avatar-backgrounds' : {
+            callback({
+                avatarBackgrounds: APP.store.getState()['features/dynamic-branding'].avatarBackgrounds
+            });
+            break;
+        }
         default:
             return false;
         }

modules/API/external/external_api.js

         return getCurrentDevices(this._transport);
     }
 
+    /**
+     * Returns any custom avatars backgrounds.
+     *
+     * @returns {Promise} - Resolves with the list of custom avatar backgrounds.
+     */
+    getCustomAvatarBackgrounds() {
+        return this._transport.sendRequest({
+            name: 'get-custom-avatar-backgrounds'
+        });
+    }
+
     /**
      * Returns the current livestream url.
      *

react/features/always-on-top/AlwaysOnTop.js

  */
 type State = {
     avatarURL: string,
+    customAvatarBackgrounds: Array<string>,
     displayName: string,
     formattedDisplayName: string,
     isVideoDisplayed: boolean,
 
         this.state = {
             avatarURL: '',
+            customAvatarBackgrounds: [],
             displayName: '',
             formattedDisplayName: '',
             isVideoDisplayed: true,
      * @returns {ReactElement}
      */
     _renderVideoNotAvailableScreen() {
-        const { avatarURL, displayName, formattedDisplayName, isVideoDisplayed, userID } = this.state;
+        const {
+            avatarURL,
+            customAvatarBackgrounds,
+            displayName,
+            formattedDisplayName,
+            isVideoDisplayed,
+            userID
+        } = this.state;
 
         if (isVideoDisplayed) {
             return null;
             <div id = 'videoNotAvailableScreen'>
                 <div id = 'avatarContainer'>
                     <StatelessAvatar
-                        color = { getAvatarColor(userID) }
+                        color = { getAvatarColor(userID, customAvatarBackgrounds) }
                         id = 'avatar'
                         initials = { getInitials(displayName) }
                         url = { avatarURL } />)
         window.addEventListener('mousemove', this._mouseMove);
 
         this._hideToolbarAfterTimeout();
+        api.getCustomAvatarBackgrounds()
+            .then(res =>
+                this.setState({
+                    customAvatarBackgrounds: res.avatarBackgrounds || []
+                }))
+            .catch(console.error);
     }
 
     /**

react/features/base/avatar/components/Avatar.js

 
 export type Props = {
 
+    /**
+     * Custom avatar backgrounds from branding.
+     */
+    _customAvatarBackgrounds: Array<string>,
+
     /**
      * The string we base the initials on (this is generated from a list of precedences).
      */
      */
     render() {
         const {
+            _customAvatarBackgrounds,
             _initialsBase,
             _loadableAvatarUrl,
             className,
 
         if (initials) {
             if (dynamicColor) {
-                avatarProps.color = getAvatarColor(colorBase || _initialsBase);
+                avatarProps.color = getAvatarColor(colorBase || _initialsBase, _customAvatarBackgrounds);
             }
 
             avatarProps.initials = initials;
     const _initialsBase = _participant?.name ?? displayName;
 
     return {
+        _customAvatarBackgrounds: state['features/dynamic-branding'].avatarBackgrounds,
         _initialsBase,
         _loadableAvatarUrl: _participant?.loadableAvatarUrl,
         colorBase: !colorBase && _participant ? _participant.id : colorBase

react/features/base/avatar/components/web/StatelessAvatar.js

         const { size } = this.props;
 
         return {
-            backgroundColor: color || undefined,
+            background: color || undefined,
             fontSize: size ? size * 0.5 : '180%',
             height: size || '100%',
             width: size || '100%'

react/features/base/avatar/functions.js

  * Generates the background color of an initials based avatar.
  *
  * @param {string?} initials - The initials of the avatar.
+ * @param {Array<strig>} customAvatarBackgrounds - Custom avatar background values.
  * @returns {string}
  */
-export function getAvatarColor(initials: ?string) {
+export function getAvatarColor(initials: ?string, customAvatarBackgrounds: Array<string>) {
+    const hasCustomAvatarBackgronds = customAvatarBackgrounds && customAvatarBackgrounds.length;
+    const colorsBase = hasCustomAvatarBackgronds ? customAvatarBackgrounds : AVATAR_COLORS;
+
     let colorIndex = 0;
 
     if (initials) {
             nameHash += s.codePointAt(0);
         }
 
-        colorIndex = nameHash % AVATAR_COLORS.length;
+        colorIndex = nameHash % colorsBase.length;
     }
 
-    return `rgba(${AVATAR_COLORS[colorIndex]}, ${AVATAR_OPACITY})`;
+    return hasCustomAvatarBackgronds ? colorsBase[colorIndex] : `rgba(${colorsBase[colorIndex]}, ${AVATAR_OPACITY})`;
 }
 
 /**

react/features/dynamic-branding/reducer.js

 const STORE_NAME = 'features/dynamic-branding';
 
 const DEFAULT_STATE = {
+
+    /**
+     * The pool of avatar backgrounds.
+     *
+     * @public
+     * @type {Array<string>}
+     */
+    avatarBackgrounds: [],
+
     /**
      * The custom background color for the LargeVideo.
      *
             didPageUrl,
             inviteDomain,
             logoClickUrl,
-            logoImageUrl
+            logoImageUrl,
+            avatarBackgrounds
         } = action.value;
 
         return {
+            avatarBackgrounds,
             backgroundColor,
             backgroundImageUrl,
             defaultBranding,