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

import React from 'react';
import { Image, ImageStyle, StyleProp, ViewStyle } from 'react-native';
import { SvgUri } from 'react-native-svg';

import { IReduxState } from '../../../app/types';
import { connect } from '../../../base/redux/functions';

import styles from './styles';


interface IProps {
    uri?: string;
}

/**
 * Component that displays a branding background image.
 *
 * @param {IProps} props - The props of the component.
 * @returns {ReactElement}
 */
const BrandingImageBackground: React.FC<IProps> = ({ uri }: IProps) => {
    const imageType = uri?.substr(uri.lastIndexOf('/') + 1);
    const imgSrc = uri ? uri : undefined;

    let backgroundImage;

    if (!uri) {
        return null;
    }

    if (imageType?.includes('.svg')) {
        backgroundImage
            = (
                <SvgUri
                    height = '100%'

                    // Force uniform scaling.
                    // Align the <min-x> of the element's viewBox
                    // with the smallest X value of the viewport.
                    // Align the <min-y> of the element's viewBox
                    // with the smallest Y value of the viewport.
                    preserveAspectRatio = 'xMinYMin'
                    style = { styles.brandingImageBackgroundSvg as StyleProp<ViewStyle> }
                    uri = { imgSrc ?? null }
                    viewBox = '0 0 400 650'
                    width = '100%' />
            );
    } else {
        backgroundImage
            = (
                <Image
                    source = {{ uri: imgSrc }}
                    style = { styles.brandingImageBackground as StyleProp<ImageStyle> } />
            );
    }

    return backgroundImage;
};

/**
 * Maps (parts of) the Redux state to the associated props for the
 * {@code DialInLink} component.
 *
 * @param {Object} state - The Redux state.
 * @private
 * @returns {IProps}
 */
function _mapStateToProps(state: IReduxState) {
    const { backgroundImageUrl } = state['features/dynamic-branding'];

    return {
        uri: backgroundImageUrl
    };
}

export default connect(_mapStateToProps)(BrandingImageBackground);