From 33ec7429c9a3afca30aeb6875fdc77e02db0e23d Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Tue, 21 Dec 2021 02:24:11 +0100 Subject: [PATCH] Refactor code --- app/src/components/Containers/Me.js | 171 ++++++++++++----------- app/src/components/Containers/Peer.js | 189 ++++++++++++++------------ 2 files changed, 199 insertions(+), 161 deletions(-) diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 4f259d8e..42eb96f1 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -108,13 +108,7 @@ const styles = (theme) => '& .fab' : { margin : theme.spacing(1), - pointerEvents : 'auto', - '&.smallest' : { - width : 30, - height : 30, - minHeight : 'auto', - margin : theme.spacing(0.5) - } + pointerEvents : 'auto' } }, ptt : @@ -174,89 +168,124 @@ const Me = (props) => hasScreenPermission, transports, noiseVolume, - classes + classes, + theme } = props; // const width = style.width; const height = style.height; - const [ buttonSize, setButtonSize ] = useState('large'); - const [ controlsAdditionalStyles, setControlsAdditionalStyles ] = useState( - { - flexDirection : 'row' + style : {}, + btn : { + style : {}, + size : '' + } } ); - const [ meTagAdditionalStyles, setMeTagAdditionalStyles ] = useState( - { - fontSize : '1.5vh' - } - ); + const [ meTagAdditionalStyles, setMeTagAdditionalStyles ] = useState(null); + // Dinamic properties/style values useEffect(() => { - if (height > 0 && height <= 190) + if (height > 0) { - setButtonSize('small'); - setControlsAdditionalStyles({ - flexDirection : 'row', - alignItems : 'flex-start' + style : { + flexDirection : 'row', + alignItems : 'flex-start' + }, + btn : { + style : { + width : 30, + height : 30, + minHeight : 'auto', + margin : theme.spacing(0.5) + }, + size : 'small' + } }); setMeTagAdditionalStyles({ fontSize : '0em' }); - } - else if (height > 190 && height <= 320) + if (height > 170) { - - setButtonSize('small'); - setControlsAdditionalStyles({ - flexDirection : 'column' + style : { + flexDirection : 'row', + alignItems : 'flex-start' + }, + btn : { + style : {}, + size : 'small' + } }); setMeTagAdditionalStyles({ - fontSize : '2.0em' + 'style' : { + fontSize : '2.0em' + } }); - } - else if (height > 320 && height <= 400) + if (height > 190) { - setButtonSize('medium'); - setControlsAdditionalStyles({ - flexDirection : 'column' - }); - - setMeTagAdditionalStyles({ - fontSize : '2.5em' - }); - - } - - else if (height > 400) - { - setButtonSize('large'); - - setControlsAdditionalStyles({ - flexDirection : 'column' + style : { + flexDirection : 'column' + }, + btn : { + style : {}, + size : 'small' + } }); setMeTagAdditionalStyles({ fontSize : '3.0em' }); - } - }, [ height ]); + if (height > 320) + { + setControlsAdditionalStyles({ + style : { + flexDirection : 'column' + }, + btn : { + style : {}, + size : 'medium' + } + }); + + setMeTagAdditionalStyles({ + fontSize : '4em' + }); + } + + if (height > 400) + { + setControlsAdditionalStyles({ + style : { + flexDirection : 'column' + }, + btn : { + style : {}, + size : 'large' + } + }); + + setMeTagAdditionalStyles({ + fontSize : '5.0em' + }); + } + + }, [ height, theme ]); const videoVisible = ( Boolean(webcamProducer) && @@ -520,7 +549,7 @@ const Me = (props) => {/* CONTROLS BUTTONS (inside) */} { !settings.buttonControlBar &&
id : 'device.muteAudio', defaultMessage : 'Mute audio' })} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} disabled={ !me.canSendMic || !hasAudioPermission || @@ -574,7 +601,7 @@ const Me = (props) => : 'secondary' } - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { if (micState === 'off') @@ -630,17 +657,15 @@ const Me = (props) => id : 'device.startVideo', defaultMessage : 'Start video' })} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} disabled={ !me.canSendWebcam || !hasVideoPermission || me.webcamInProgress } color={webcamState === 'on' ? 'default' : 'secondary'} - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { @@ -673,17 +698,15 @@ const Me = (props) => id : 'device.startScreenSharing', defaultMessage : 'Start screen sharing' })} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} disabled={ !hasScreenPermission || !me.canShareScreen || me.screenShareInProgress } color={screenState === 'on' ? 'primary' : 'default'} - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { @@ -715,11 +738,9 @@ const Me = (props) => id : 'device.options', defaultMessage : 'Options' })} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} - size={buttonSize} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} + size={controlsAdditionalStyles.btn.size} onClick={handleMenuOpen} > @@ -864,12 +885,10 @@ const Me = (props) => id : 'device.stopVideo', defaultMessage : 'Stop video' })} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} disabled={!me.canSendWebcam || me.webcamInProgress} - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { roomClient.disableExtraVideo(producer.id); diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index 9273e4bd..2882abb9 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -155,7 +155,8 @@ const Peer = (props) => classes, enableLayersSwitch, isSelected, - mode + mode, + theme } = props; const micEnabled = ( @@ -186,80 +187,116 @@ const Peer = (props) => const height = style.height; - const [ buttonSize, setButtonSize ] = useState('large'); - const [ controlsAdditionalStyles, setControlsAdditionalStyles ] = useState( { - flexDirection : 'row' + style : {}, + btn : { + style : {}, + size : '' + } } ); - const [ videoInfoAdditionalStyles, setVideoInfoAdditionalStyles ] = useState( - { - fontSize : '1.5vh' - } - ); + const [ videoInfoAdditionalStyles, setVideoInfoAdditionalStyles ] = useState(); + // Dinamic properties/style values useEffect(() => { - if (height > 0 && height <= 190) + if (height > 0) { - setButtonSize('small'); - setControlsAdditionalStyles({ - flexDirection : 'row', - alignItems : 'flex-start' + style : { + flexDirection : 'row', + alignItems : 'flex-start' + }, + btn : { + style : { + width : 30, + height : 30, + minHeight : 'auto', + margin : theme.spacing(0.5) + }, + size : 'small' + } }); setVideoInfoAdditionalStyles({ fontSize : '0em' }); - } - else if (height > 190 && height <= 320) + if (height > 170) { - setButtonSize('small'); - setControlsAdditionalStyles({ - flexDirection : 'column' + style : { + flexDirection : 'row', + alignItems : 'flex-start' + }, + btn : { + style : {}, + size : 'small' + } }); setVideoInfoAdditionalStyles({ - fontSize : '1.2em' + 'style' : { + fontSize : '2.0em' + } }); - } - else if (height > 320 && height <= 400) + if (height > 190) { - setButtonSize('medium'); - setControlsAdditionalStyles({ - flexDirection : 'column' - }); - - setVideoInfoAdditionalStyles({ - fontSize : '2.0em' - }); - - } - - else if (height > 400) - { - setButtonSize('large'); - - setControlsAdditionalStyles({ - flexDirection : 'column' + style : { + flexDirection : 'column' + }, + btn : { + style : {}, + size : 'small' + } }); setVideoInfoAdditionalStyles({ fontSize : '3.0em' }); - } - }, [ height ]); + if (height > 320) + { + setControlsAdditionalStyles({ + style : { + flexDirection : 'column' + }, + btn : { + style : {}, + size : 'medium' + } + }); + + setVideoInfoAdditionalStyles({ + fontSize : '4em' + }); + } + + if (height > 400) + { + setControlsAdditionalStyles({ + style : { + flexDirection : 'column' + }, + btn : { + style : {}, + size : 'large' + } + }); + + setVideoInfoAdditionalStyles({ + fontSize : '5.0em' + }); + } + + }, [ height, theme ]); if (peer.picture) { @@ -369,7 +406,7 @@ const Peer = (props) => classes.controls, hover ? 'hover' : null, height <= 170 ? 'smallest': null )} - style={{ ...controlsAdditionalStyles }} + style={{ ...controlsAdditionalStyles.style }} onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)} onTouchStart={() => @@ -405,13 +442,11 @@ const Peer = (props) => defaultMessage : 'Mute audio' })} // className={classes.fab} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} disabled={!micConsumer} color={micEnabled ? 'default' : 'secondary'} - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { micEnabled ? @@ -443,12 +478,9 @@ const Peer = (props) => id : 'label.newWindow', defaultMessage : 'New window' })} - // className={classes.fab} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} - size={buttonSize} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} + size={controlsAdditionalStyles.btn.size} onClick={() => { toggleConsumerWindow(webcamConsumer); @@ -475,12 +507,10 @@ const Peer = (props) => defaultMessage : 'Fullscreen' })} // className={classes.fab} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} disabled={!videoVisible} - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { toggleConsumerFullscreen(webcamConsumer); @@ -521,11 +551,9 @@ const Peer = (props) => }) } // className={classes.fab} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} - size={buttonSize} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} + size={controlsAdditionalStyles.btn.size} onClick={() => { isSelected ? @@ -560,12 +588,9 @@ const Peer = (props) => id : 'device.options', defaultMessage : 'Options' })} - // className={classes.fab} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} - size={buttonSize} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} + size={controlsAdditionalStyles.btn.size} onClick={handleMenuOpen} > @@ -720,15 +745,13 @@ const Peer = (props) => defaultMessage : 'New window' })} // className={classes.fab} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} disabled={ !videoVisible || (windowConsumer === consumer.id) } - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { toggleConsumerWindow(consumer); @@ -754,12 +777,10 @@ const Peer = (props) => defaultMessage : 'Fullscreen' })} // className={classes.fab} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} disabled={!videoVisible} - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { toggleConsumerFullscreen(consumer); @@ -883,15 +904,13 @@ const Peer = (props) => id : 'label.newWindow', defaultMessage : 'New window' })} - className={classnames( - 'fab', - height <= 170 ? 'smallest': null - )} + style={{ ...controlsAdditionalStyles.btn.style }} + className={classnames('fab')} disabled={ !screenVisible || (windowConsumer === screenConsumer.id) } - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { toggleConsumerWindow(screenConsumer); @@ -924,7 +943,7 @@ const Peer = (props) => height <= 170 ? 'smallest': null )} disabled={!screenVisible} - size={buttonSize} + size={controlsAdditionalStyles.btn.size} onClick={() => { toggleConsumerFullscreen(screenConsumer);