Put additional styles logic closer to styles

This commit is contained in:
Roman Drozd 2021-12-20 02:44:47 +01:00
parent 170c943b93
commit adefb80bb6
2 changed files with 81 additions and 83 deletions

View file

@ -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);

View file

@ -252,7 +252,7 @@ const Peer = (props) =>
});
setVideoInfoAdditionalStyles({
fontSize : '1.5em'
fontSize : '0em'
});
break;