feat(branding) Add premeeting background image overwrite

config.js

@@ -794,7 +794,11 @@ var config = {
          // The anchor url used when clicking the logo image
          logoClickUrl: 'https://example-company.org',
          // The url used for the image used as logo
-         logoImageUrl: 'https://example.com/logo-img.png'
+         logoImageUrl: 'https://example.com/logo-img.png',
+         // Overwrite for pool of background images for avatars
+         avatarBackgrounds: ['url(https://example.com/avatar-background-1.png)', '#FFF'],
+         // The lobby/prejoin screen background
+         premeetingBackground: 'url(https://example.com/premeeting-background.png)'
      }
     */
     // dynamicBrandingUrl: '',

react/features/base/premeeting/components/web/PreMeetingScreen.js

@@ -17,6 +17,11 @@ type Props = {
      */
     _buttons: Array<string>,
 
+    /**
+     * The branding background of the premeeting screen(lobby/prejoin).
+     */
+    _premeetingBackground: string,
+
     /**
      * Children component(s) to be rendered on the screen.
      */
@@ -91,6 +96,7 @@ class PreMeetingScreen extends PureComponent<Props> {
     render() {
         const {
             _buttons,
+            _premeetingBackground,
             children,
             className,
             showDeviceStatus,
@@ -101,23 +107,29 @@ class PreMeetingScreen extends PureComponent<Props> {
         } = this.props;
 
         const containerClassName = `premeeting-screen ${className ? className : ''}`;
+        const style = _premeetingBackground ? {
+            background: _premeetingBackground,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover'
+        } : {};
 
         return (
             <div className = { containerClassName }>
-                <div className = 'content'>
-                    <ConnectionStatus />
-
-                    <div className = 'content-controls'>
-                        <h1 className = 'title'>
-                            { title }
-                        </h1>
-                        { children }
-                        { _buttons.length && <Toolbox toolbarButtons = { _buttons } /> }
-                        { skipPrejoinButton }
-                        { showDeviceStatus && <DeviceStatus /> }
+                <div style = { style }>
+                    <div className = 'content'>
+                        <ConnectionStatus />
+
+                        <div className = 'content-controls'>
+                            <h1 className = 'title'>
+                                { title }
+                            </h1>
+                            { children }
+                            { _buttons.length && <Toolbox toolbarButtons = { _buttons } /> }
+                            { skipPrejoinButton }
+                            { showDeviceStatus && <DeviceStatus /> }
+                        </div>
                     </div>
                 </div>
-
                 <Preview
                     videoMuted = { videoMuted }
                     videoTrack = { videoTrack } />
@@ -139,9 +151,11 @@ function mapStateToProps(state, ownProps): Object {
     const premeetingButtons = ownProps.thirdParty
         ? THIRD_PARTY_PREJOIN_BUTTONS
         : PREMEETING_BUTTONS;
+    const { premeetingBackground } = state['features/dynamic-branding'];
 
     return {
-        _buttons: premeetingButtons.filter(b => !hideButtons.includes(b))
+        _buttons: premeetingButtons.filter(b => !hideButtons.includes(b)),
+        _premeetingBackground: premeetingBackground
     };
 }
 

react/features/dynamic-branding/reducer.js

@@ -99,6 +99,14 @@ const DEFAULT_STATE = {
      */
     logoImageUrl: '',
 
+    /**
+     * The lobby/prejoin background.
+     *
+     * @public
+     * @type {string}
+     */
+    premeetingBackground: '',
+
     /**
      * Flag used to signal if the app should use a custom logo or not
      *
@@ -115,6 +123,7 @@ ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => {
     switch (action.type) {
     case SET_DYNAMIC_BRANDING_DATA: {
         const {
+            avatarBackgrounds,
             backgroundColor,
             backgroundImageUrl,
             defaultBranding,
@@ -122,7 +131,7 @@ ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => {
             inviteDomain,
             logoClickUrl,
             logoImageUrl,
-            avatarBackgrounds
+            premeetingBackground
         } = action.value;
 
         return {
@@ -134,6 +143,7 @@ ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => {
             inviteDomain,
             logoClickUrl,
             logoImageUrl,
+            premeetingBackground,
             customizationFailed: false,
             customizationReady: true,
             useDynamicBrandingData: true