"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7319/react/features/large-video/components/ScreenSharePlaceholder.web.tsx" (6 Jun 2023, 3010 Bytes) of package /linux/misc/jitsi-meet-7319.tar.gz:

    1 import React, { useCallback } from 'react';
    2 import { WithTranslation } from 'react-i18next';
    3 import { useStore } from 'react-redux';
    4 import { makeStyles } from 'tss-react/mui';
    5 
    6 import { translate } from '../../base/i18n/functions';
    7 import { setSeeWhatIsBeingShared } from '../actions.web';
    8 
    9 const useStyles = makeStyles()(theme => {
   10     return {
   11         overlayContainer: {
   12             width: '100%',
   13             height: '100%',
   14             backgroundColor: theme.palette.ui02,
   15             display: 'flex',
   16             justifyContent: 'center',
   17             alignItems: 'center',
   18             position: 'absolute'
   19         },
   20         content: {
   21             display: 'flex',
   22             flexDirection: 'column',
   23             alignItems: 'center',
   24             justifyContent: 'center'
   25         },
   26         laptop: {
   27             width: '88px',
   28             height: '56px',
   29             boxSizing: 'border-box',
   30             border: '3px solid',
   31             borderColor: theme.palette.text01,
   32             borderRadius: '6px'
   33         },
   34         laptopStand: {
   35             width: '40px',
   36             height: '4px',
   37             backgroundColor: theme.palette.text01,
   38             boxSizing: 'border-box',
   39             borderRadius: '6px',
   40             marginTop: '4px'
   41         },
   42         sharingMessage: {
   43             fontStyle: 'normal',
   44             fontWeight: 600,
   45             fontSize: '20px',
   46             lineHeight: '28px',
   47             marginTop: '24px',
   48             letterSpacing: '-0.012em',
   49             color: theme.palette.text01
   50         },
   51         showSharing: {
   52             fontStyle: 'normal',
   53             fontWeight: 600,
   54             fontSize: '14px',
   55             lineHeight: '20px',
   56             height: '20px',
   57             marginTop: '16px',
   58             color: theme.palette.link01,
   59             cursor: 'pointer',
   60 
   61             '&:hover': {
   62                 color: theme.palette.link01Hover
   63             }
   64         }
   65     };
   66 });
   67 
   68 /**
   69  * Component that displays a placeholder for when the screen is shared.
   70  * * @param {Function} t - Function which translate strings.
   71  *
   72  * @returns {ReactElement}
   73  */
   74 const ScreenSharePlaceholder: React.FC<WithTranslation> = ({ t }) => {
   75     const { classes } = useStyles();
   76     const store = useStore();
   77 
   78     const updateShowMeWhatImSharing = useCallback(() => {
   79         store.dispatch(setSeeWhatIsBeingShared(true));
   80     }, []);
   81 
   82     return (
   83         <div className = { classes.overlayContainer }>
   84             <div className = { classes.content }>
   85                 <div className = { classes.laptop } />
   86                 <div className = { classes.laptopStand } />
   87                 <span className = { classes.sharingMessage }>{ t('largeVideo.screenIsShared') }</span>
   88                 <span
   89                     className = { classes.showSharing }
   90                     onClick = { updateShowMeWhatImSharing }
   91                     role = 'button'>{ t('largeVideo.showMeWhatImSharing') }</span>
   92             </div>
   93         </div>
   94     );
   95 };
   96 
   97 export default translate(ScreenSharePlaceholder);