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

77 lines
2.1 KiB
TypeScript

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);