jiti-meet/react/features/large-video/components/ScreenSharePlaceholder.web.tsx

98 lines
2.9 KiB
TypeScript
Raw Normal View History

import React, { useCallback } from 'react';
import { WithTranslation } from 'react-i18next';
import { useStore } from 'react-redux';
2022-09-13 07:36:00 +00:00
import { makeStyles } from 'tss-react/mui';
import { translate } from '../../base/i18n/functions';
import { setSeeWhatIsBeingShared } from '../actions.web';
const useStyles = makeStyles()(theme => {
2022-09-13 07:36:00 +00:00
return {
overlayContainer: {
width: '100%',
height: '100%',
backgroundColor: theme.palette.ui02,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute'
},
content: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
laptop: {
width: '88px',
height: '56px',
boxSizing: 'border-box',
border: '3px solid',
borderColor: theme.palette.text01,
borderRadius: '6px'
},
laptopStand: {
width: '40px',
height: '4px',
backgroundColor: theme.palette.text01,
boxSizing: 'border-box',
borderRadius: '6px',
marginTop: '4px'
},
sharingMessage: {
fontStyle: 'normal',
fontWeight: 600,
fontSize: '20px',
lineHeight: '28px',
marginTop: '24px',
letterSpacing: '-0.012em',
color: theme.palette.text01
},
showSharing: {
fontStyle: 'normal',
fontWeight: 600,
fontSize: '14px',
lineHeight: '20px',
height: '20px',
marginTop: '16px',
color: theme.palette.link01,
cursor: 'pointer',
2022-09-13 07:36:00 +00:00
'&:hover': {
color: theme.palette.link01Hover
}
}
2022-09-13 07:36:00 +00:00
};
});
/**
2022-08-30 14:21:58 +00:00
* Component that displays a placeholder for when the screen is shared.
* * @param {Function} t - Function which translate strings.
*
* @returns {ReactElement}
*/
const ScreenSharePlaceholder: React.FC<WithTranslation> = ({ t }) => {
2022-09-13 07:36:00 +00:00
const { classes } = useStyles();
const store = useStore();
const updateShowMeWhatImSharing = useCallback(() => {
store.dispatch(setSeeWhatIsBeingShared(true));
}, []);
return (
<div className = { classes.overlayContainer }>
<div className = { classes.content }>
<div className = { classes.laptop } />
<div className = { classes.laptopStand } />
<span className = { classes.sharingMessage }>{ t('largeVideo.screenIsShared') }</span>
<span
className = { classes.showSharing }
onClick = { updateShowMeWhatImSharing }
role = 'button'>{ t('largeVideo.showMeWhatImSharing') }</span>
</div>
</div>
);
};
export default translate(ScreenSharePlaceholder);