feat(rn,dynamic-brandind) added background image url to prejoin and lobby

react/features/conference/components/native/Conference.js

@@ -61,11 +61,6 @@ type Props = AbstractProps & {
      */
     _brandingStyles: Object,
 
-    /**
-     * Branding image background.
-     */
-    _brandingImageBackgroundUrl: string,
-
     /**
      * Wherther the calendar feature is enabled or not.
      */
@@ -226,7 +221,6 @@ class Conference extends AbstractConference<Props, State> {
      */
     render() {
         const {
-            _brandingImageBackgroundUrl,
             _brandingStyles,
             _fullscreenEnabled
         } = this.props;
@@ -237,8 +231,7 @@ class Conference extends AbstractConference<Props, State> {
                     styles.conference,
                     _brandingStyles
                 ] }>
-                <BrandingImageBackground
-                    uri = { _brandingImageBackgroundUrl } />
+                <BrandingImageBackground />
                 <StatusBar
                     barStyle = 'light-content'
                     hidden = { _fullscreenEnabled }
@@ -520,7 +513,7 @@ class Conference extends AbstractConference<Props, State> {
 function _mapStateToProps(state) {
     const { isOpen } = state['features/participants-pane'];
     const { aspectRatio, reducedUI } = state['features/base/responsive-ui'];
-    const { backgroundColor, backgroundImageUrl } = state['features/dynamic-branding'];
+    const { backgroundColor } = state['features/dynamic-branding'];
     const participantCount = getParticipantCount(state);
     const brandingStyles = backgroundColor ? {
         backgroundColor
@@ -530,7 +523,6 @@ function _mapStateToProps(state) {
         ...abstractMapStateToProps(state),
         _aspectRatio: aspectRatio,
         _brandingStyles: brandingStyles,
-        _brandingImageBackgroundUrl: backgroundImageUrl,
         _calendarEnabled: isCalendarEnabled(state),
         _connecting: isConnecting(state),
         _filmstripVisible: isFilmstripVisible(state),

react/features/dynamic-branding/components/native/BrandingImageBackground.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Image } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
+// @ts-ignore
+import { connect } from '../../../base/redux';
+
 import styles from './styles';
 
 
@@ -21,6 +24,10 @@ const BrandingImageBackground: React.FC<Props> = ({ uri }:Props) => {
 
     let backgroundImage;
 
+    if (!uri) {
+        return null;
+    }
+
     if (imageType?.includes('.svg')) {
         backgroundImage
             = (
@@ -42,4 +49,20 @@ const BrandingImageBackground: React.FC<Props> = ({ uri }:Props) => {
     return backgroundImage;
 };
 
-export default BrandingImageBackground;
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code DialInLink} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {Props}
+ */
+function _mapStateToProps(state: any) {
+    const { backgroundImageUrl } = state['features/dynamic-branding'];
+
+    return {
+        uri: backgroundImageUrl
+    };
+}
+
+export default connect(_mapStateToProps)(BrandingImageBackground);

react/features/lobby/components/native/LobbyScreen.js

@@ -9,6 +9,7 @@ import { LoadingIndicator } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui';
 import BaseTheme from '../../../base/ui/components/BaseTheme';
+import { BrandingImageBackground } from '../../../dynamic-branding';
 import { LargeVideo } from '../../../large-video/components';
 import { navigate }
     from '../../../mobile/navigation/components/lobby/LobbyNavigationContainerRef';
@@ -58,6 +59,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
         return (
             <JitsiScreen
                 style = { contentWrapperStyles }>
+                <BrandingImageBackground />
                 <View style = { largeVideoContainerStyles }>
                     <LargeVideo />
                 </View>

react/features/prejoin/components/Prejoin.native.tsx

@@ -12,6 +12,7 @@ import { getLocalParticipant } from '../../base/participants';
 import { getFieldValue } from '../../base/react';
 import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui';
 import { updateSettings } from '../../base/settings';
+import { BrandingImageBackground } from '../../dynamic-branding';
 import { LargeVideo } from '../../large-video/components';
 import HeaderNavigationButton from '../../mobile/navigation/components/HeaderNavigationButton';
 import { navigateRoot } from '../../mobile/navigation/rootNavigationContainerRef';
@@ -102,6 +103,7 @@ const Prejoin: ({ navigation }: Props) => JSX.Element = ({ navigation }: Props)
         <JitsiScreen
             safeAreaInsets = { [ 'right' ] }
             style = { contentWrapperStyles }>
+            <BrandingImageBackground />
             <View style = { largeVideoContainerStyles }>
                 <LargeVideo />
             </View>