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,9 +107,15 @@ 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 style = { style }>
                     <div className = 'content'>
                         <ConnectionStatus />
 
@@ -117,7 +129,7 @@ class PreMeetingScreen extends PureComponent<Props> {
                             { 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