100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
|
/* eslint-disable lines-around-comment */
|
||
|
|
import { makeStyles, createStyles } from '@material-ui/core';
|
||
|
|
import React, { useCallback } from 'react';
|
||
|
|
import { useStore } from 'react-redux';
|
||
|
|
|
||
|
|
// @ts-ignore
|
||
|
|
import { translate } from '../../base/i18n';
|
||
|
|
import { Theme } from '../../base/ui/types';
|
||
|
|
// @ts-ignore
|
||
|
|
import { setSeeWhatIsBeingShared } from '../actions.web';
|
||
|
|
|
||
|
|
const useStyles = makeStyles((theme: Theme) => createStyles({
|
||
|
|
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',
|
||
|
|
|
||
|
|
'&:hover': {
|
||
|
|
color: theme.palette.link01Hover
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Component that displays a placehoder for when the screen is shared.
|
||
|
|
* * @param {Function} t - Function which translate strings.
|
||
|
|
*
|
||
|
|
* @returns {ReactElement}
|
||
|
|
*/
|
||
|
|
const ScreenSharePlaceholder: React.FC<{ t: Function }> = ({ t }) => {
|
||
|
|
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);
|