mirror of
https://github.com/edumeet/edumeet.git
synced 2026-07-25 20:03:55 +00:00
Put additional styles logic closer to styles
This commit is contained in:
parent
170c943b93
commit
adefb80bb6
2 changed files with 81 additions and 83 deletions
|
|
@ -178,14 +178,90 @@ const Me = (props) =>
|
|||
classes
|
||||
} = props;
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const width = style.width;
|
||||
// const width = style.width;
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const height = style.height;
|
||||
// const height = style.height;
|
||||
|
||||
const size = style.size;
|
||||
|
||||
const [ buttonSize, setButtonSize ] = useState('large');
|
||||
|
||||
const [ controlsAdditionalStyles, setControlsAdditionalStyles ] = useState(
|
||||
|
||||
{
|
||||
flexDirection : 'row'
|
||||
}
|
||||
);
|
||||
|
||||
const [ meTagAdditionalStyles, setMeTagAdditionalStyles ] = useState(
|
||||
{
|
||||
fontSize : '1.5vh'
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
switch (size)
|
||||
{
|
||||
case 'smallest':
|
||||
setButtonSize('small');
|
||||
|
||||
setControlsAdditionalStyles({
|
||||
flexDirection : 'row',
|
||||
alignItems : 'flex-start'
|
||||
|
||||
});
|
||||
|
||||
setMeTagAdditionalStyles({
|
||||
fontSize : '0em'
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'small':
|
||||
setButtonSize('small');
|
||||
|
||||
setControlsAdditionalStyles({
|
||||
flexDirection : 'column'
|
||||
});
|
||||
|
||||
setMeTagAdditionalStyles({
|
||||
fontSize : '2.0em'
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'medium':
|
||||
setButtonSize('medium');
|
||||
|
||||
setControlsAdditionalStyles({
|
||||
flexDirection : 'column'
|
||||
});
|
||||
|
||||
setMeTagAdditionalStyles({
|
||||
fontSize : '2.5em'
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'large':
|
||||
setButtonSize('large');
|
||||
|
||||
setControlsAdditionalStyles({
|
||||
flexDirection : 'column'
|
||||
});
|
||||
|
||||
setMeTagAdditionalStyles({
|
||||
fontSize : '3.0em'
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
}
|
||||
}, [ size ]);
|
||||
|
||||
const videoVisible = (
|
||||
Boolean(webcamProducer) &&
|
||||
!webcamProducer.locallyPaused &&
|
||||
|
|
@ -361,84 +437,6 @@ const Me = (props) =>
|
|||
return () => clearInterval(poll);
|
||||
}, [ roomClient, advancedMode ]);
|
||||
|
||||
const [ buttonSize, setButtonSize ] = useState('large');
|
||||
|
||||
const [ controlsAdditionalStyles, setControlsAdditionalStyles ] = useState(
|
||||
|
||||
{
|
||||
flexDirection : 'row'
|
||||
}
|
||||
);
|
||||
|
||||
const [ meTagAdditionalStyles, setMeTagAdditionalStyles ] = useState(
|
||||
{
|
||||
fontSize : '1.5vh'
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
switch (size)
|
||||
{
|
||||
case 'smallest':
|
||||
setButtonSize('small');
|
||||
|
||||
setControlsAdditionalStyles({
|
||||
flexDirection : 'row',
|
||||
alignItems : 'flex-start'
|
||||
|
||||
});
|
||||
|
||||
setMeTagAdditionalStyles({
|
||||
fontSize : '1.5em'
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'small':
|
||||
setButtonSize('small');
|
||||
|
||||
setControlsAdditionalStyles({
|
||||
flexDirection : 'column'
|
||||
});
|
||||
|
||||
setMeTagAdditionalStyles({
|
||||
fontSize : '2.0em'
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'medium':
|
||||
setButtonSize('medium');
|
||||
|
||||
setControlsAdditionalStyles({
|
||||
flexDirection : 'column'
|
||||
});
|
||||
|
||||
setMeTagAdditionalStyles({
|
||||
fontSize : '2.5em'
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'large':
|
||||
setButtonSize('large');
|
||||
|
||||
setControlsAdditionalStyles({
|
||||
flexDirection : 'column'
|
||||
});
|
||||
|
||||
setMeTagAdditionalStyles({
|
||||
fontSize : '3.0em'
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
}
|
||||
}, [ size ]);
|
||||
|
||||
// menu
|
||||
const [ menuAnchorElement, setMenuAnchorElement ] = React.useState(null);
|
||||
const [ showAudioAnalyzer, setShowAudioAnalyzer ] = React.useState(null);
|
||||
|
|
|
|||
|
|
@ -252,7 +252,7 @@ const Peer = (props) =>
|
|||
});
|
||||
|
||||
setVideoInfoAdditionalStyles({
|
||||
fontSize : '1.5em'
|
||||
fontSize : '0em'
|
||||
});
|
||||
|
||||
break;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue