"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7309/react/features/dynamic-branding/components/native/BrandingImageBackground.tsx" (31 May 2023, 2135 Bytes) of package /linux/misc/jitsi-meet-7309.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the last Fossies "Diffs" side-by-side code changes report for "BrandingImageBackground.tsx": jitsi-meet_8319_vs_jitsi-meet_8615.

    1 import React from 'react';
    2 import { Image, ImageStyle, StyleProp, ViewStyle } from 'react-native';
    3 import { SvgUri } from 'react-native-svg';
    4 import { connect } from 'react-redux';
    5 
    6 import { IReduxState } from '../../../app/types';
    7 
    8 import styles from './styles';
    9 
   10 
   11 interface IProps {
   12     uri?: string;
   13 }
   14 
   15 /**
   16  * Component that displays a branding background image.
   17  *
   18  * @param {IProps} props - The props of the component.
   19  * @returns {ReactElement}
   20  */
   21 const BrandingImageBackground: React.FC<IProps> = ({ uri }: IProps) => {
   22     const imageType = uri?.substr(uri.lastIndexOf('/') + 1);
   23     const imgSrc = uri ? uri : undefined;
   24 
   25     let backgroundImage;
   26 
   27     if (!uri) {
   28         return null;
   29     }
   30 
   31     if (imageType?.includes('.svg')) {
   32         backgroundImage
   33             = (
   34                 <SvgUri
   35                     height = '100%'
   36 
   37                     // Force uniform scaling.
   38                     // Align the <min-x> of the element's viewBox
   39                     // with the smallest X value of the viewport.
   40                     // Align the <min-y> of the element's viewBox
   41                     // with the smallest Y value of the viewport.
   42                     preserveAspectRatio = 'xMinYMin'
   43                     style = { styles.brandingImageBackgroundSvg as StyleProp<ViewStyle> }
   44                     uri = { imgSrc ?? null }
   45                     viewBox = '0 0 400 650'
   46                     width = '100%' />
   47             );
   48     } else {
   49         backgroundImage
   50             = (
   51                 <Image
   52                     source = {{ uri: imgSrc }}
   53                     style = { styles.brandingImageBackground as StyleProp<ImageStyle> } />
   54             );
   55     }
   56 
   57     return backgroundImage;
   58 };
   59 
   60 /**
   61  * Maps (parts of) the Redux state to the associated props for the
   62  * {@code DialInLink} component.
   63  *
   64  * @param {Object} state - The Redux state.
   65  * @private
   66  * @returns {IProps}
   67  */
   68 function _mapStateToProps(state: IReduxState) {
   69     const { backgroundImageUrl } = state['features/dynamic-branding'];
   70 
   71     return {
   72         uri: backgroundImageUrl
   73     };
   74 }
   75 
   76 export default connect(_mapStateToProps)(BrandingImageBackground);