diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js
index 5e8e0dc..68ca46d 100644
--- a/app/src/components/Containers/Me.js
+++ b/app/src/components/Containers/Me.js
@@ -10,6 +10,7 @@ import { useIntl, FormattedMessage } from 'react-intl';
import VideoView from '../VideoContainers/VideoView';
import Volume from './Volume';
import Fab from '@material-ui/core/Fab';
+import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import MicIcon from '@material-ui/icons/Mic';
import MicOffIcon from '@material-ui/icons/MicOff';
@@ -59,6 +60,19 @@ const styles = (theme) =>
margin : theme.spacing(1),
pointerEvents : 'auto'
},
+ smallContainer :
+ {
+ backgroundColor : 'rgba(255, 255, 255, 0.9)',
+ margin : theme.spacing(0.25),
+ padding : theme.spacing(0.75),
+ boxShadow : '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
+ pointerEvents : 'auto',
+ transition : 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+ '&:hover' :
+ {
+ backgroundColor : 'rgba(213, 213, 213, 1)'
+ }
+ },
viewContainer :
{
position : 'relative',
@@ -102,6 +116,10 @@ const styles = (theme) =>
'&.hover' :
{
opacity : 1
+ },
+ '&.smallContainer' :
+ {
+ fontSize : '3em'
}
}
},
@@ -145,7 +163,7 @@ const Me = (props) =>
activeSpeaker,
spacing,
style,
- smallButtons,
+ smallContainer,
advancedMode,
micProducer,
webcamProducer,
@@ -300,16 +318,18 @@ const Me = (props) =>
style={spacingStyle}
>
-
-
-
+ { !smallContainer &&
+
+
+
+ }
}, 2000);
}}
>
-
+
-
- {
- if (micState === 'off')
- roomClient.enableMic();
- else if (micState === 'on')
- roomClient.muteMic();
- else
- roomClient.unmuteMic();
- }}
- >
- { micState === 'on' ?
-
- :
-
- }
-
+ { smallContainer ?
+
+ {
+ if (micState === 'off')
+ roomClient.enableMic();
+ else if (micState === 'on')
+ roomClient.muteMic();
+ else
+ roomClient.unmuteMic();
+ }}
+ >
+ { micState === 'on' ?
+
+ :
+
+ }
+
+ :
+
+ {
+ if (micState === 'off')
+ roomClient.enableMic();
+ else if (micState === 'on')
+ roomClient.muteMic();
+ else
+ roomClient.unmuteMic();
+ }}
+ >
+ { micState === 'on' ?
+
+ :
+
+ }
+
+ }
-
- {
- webcamState === 'on' ?
- roomClient.disableWebcam() :
- roomClient.enableWebcam();
- }}
- >
- { webcamState === 'on' ?
-
- :
-
- }
-
+ { smallContainer ?
+
+ {
+ webcamState === 'on' ?
+ roomClient.disableWebcam() :
+ roomClient.enableWebcam();
+ }}
+ >
+ { webcamState === 'on' ?
+
+ :
+
+ }
+
+ :
+
+ {
+ webcamState === 'on' ?
+ roomClient.disableWebcam() :
+ roomClient.enableWebcam();
+ }}
+ >
+ { webcamState === 'on' ?
+
+ :
+
+ }
+
+ }
{ me.browser.platform !== 'mobile' &&
-
- {
- switch (screenState)
- {
- case 'on':
- {
- roomClient.disableScreenSharing();
- break;
- }
- case 'off':
- {
- roomClient.enableScreenSharing();
- break;
- }
- default:
- {
- break;
- }
+ { smallContainer ?
+
- { (screenState === 'on' || screenState === 'unsupported') &&
-
- }
- { screenState === 'off' &&
-
- }
-
+ color='primary'
+ size='small'
+ onClick={() =>
+ {
+ switch (screenState)
+ {
+ case 'on':
+ {
+ roomClient.disableScreenSharing();
+ break;
+ }
+ case 'off':
+ {
+ roomClient.enableScreenSharing();
+ break;
+ }
+ default:
+ {
+ break;
+ }
+ }
+ }}
+ >
+ { (screenState === 'on' || screenState === 'unsupported') &&
+
+ }
+ { screenState === 'off' &&
+
+ }
+
+
+ :
+
+ {
+ switch (screenState)
+ {
+ case 'on':
+ {
+ roomClient.disableScreenSharing();
+ break;
+ }
+ case 'off':
+ {
+ roomClient.enableScreenSharing();
+ break;
+ }
+ default:
+ {
+ break;
+ }
+ }
+ }}
+ >
+ { (screenState === 'on' || screenState === 'unsupported') &&
+
+ }
+ { screenState === 'off' &&
+
+ }
+
+ }
}
@@ -537,21 +660,41 @@ const Me = (props) =>
-
- {
- roomClient.disableExtraVideo(producer.id);
- }}
- >
-
-
+ { smallContainer ?
+
+ {
+ roomClient.disableExtraVideo(producer.id);
+ }}
+ >
+
+
+
+ :
+
+ {
+ roomClient.disableExtraVideo(producer.id);
+ }}
+ >
+
+
+ }
@@ -663,7 +806,7 @@ Me.propTypes =
extraVideoProducers : PropTypes.arrayOf(appPropTypes.Producer),
spacing : PropTypes.number,
style : PropTypes.object,
- smallButtons : PropTypes.bool,
+ smallContainer : PropTypes.bool,
canShareScreen : PropTypes.bool.isRequired,
classes : PropTypes.object.isRequired,
theme : PropTypes.object.isRequired
diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js
index 3e6e776..2715c64 100644
--- a/app/src/components/Containers/Peer.js
+++ b/app/src/components/Containers/Peer.js
@@ -12,6 +12,7 @@ import { useIntl, FormattedMessage } from 'react-intl';
import VideoView from '../VideoContainers/VideoView';
import Tooltip from '@material-ui/core/Tooltip';
import Fab from '@material-ui/core/Fab';
+import IconButton from '@material-ui/core/IconButton';
import VolumeUpIcon from '@material-ui/icons/VolumeUp';
import VolumeOffIcon from '@material-ui/icons/VolumeOff';
import NewWindowIcon from '@material-ui/icons/OpenInNew';
@@ -59,6 +60,19 @@ const styles = (theme) =>
{
margin : theme.spacing(1)
},
+ smallContainer :
+ {
+ backgroundColor : 'rgba(255, 255, 255, 0.9)',
+ margin : theme.spacing(0.25),
+ padding : theme.spacing(0.75),
+ boxShadow : '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
+ pointerEvents : 'auto',
+ transition : 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+ '&:hover' :
+ {
+ backgroundColor : 'rgba(213, 213, 213, 1)'
+ }
+ },
viewContainer :
{
position : 'relative',
@@ -130,7 +144,7 @@ const Peer = (props) =>
toggleConsumerWindow,
spacing,
style,
- smallButtons,
+ smallContainer,
windowConsumer,
classes,
theme
@@ -236,28 +250,53 @@ const Peer = (props) =>
placement={smallScreen ? 'top' : 'left'}
>
-
- {
- micEnabled ?
- roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
- roomClient.modifyPeerConsumer(peer.id, 'mic', false);
- }}
- >
- { micEnabled ?
-
- :
-
- }
-
+ { smallContainer ?
+
+ {
+ micEnabled ?
+ roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
+ roomClient.modifyPeerConsumer(peer.id, 'mic', false);
+ }}
+ >
+ { micEnabled ?
+
+ :
+
+ }
+
+ :
+
+ {
+ micEnabled ?
+ roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
+ roomClient.modifyPeerConsumer(peer.id, 'mic', false);
+ }}
+ >
+ { micEnabled ?
+
+ :
+
+ }
+
+ }
@@ -270,24 +309,46 @@ const Peer = (props) =>
placement={smallScreen ? 'top' : 'left'}
>
-
- {
- toggleConsumerWindow(webcamConsumer);
- }}
- >
-
-
+ { smallContainer ?
+
+ {
+ toggleConsumerWindow(webcamConsumer);
+ }}
+ >
+
+
+ :
+
+ {
+ toggleConsumerWindow(webcamConsumer);
+ }}
+ >
+
+
+ }
}
@@ -300,21 +361,40 @@ const Peer = (props) =>
placement={smallScreen ? 'top' : 'left'}
>
-
- {
- toggleConsumerFullscreen(webcamConsumer);
- }}
- >
-
-
+ { smallContainer ?
+
+ {
+ toggleConsumerFullscreen(webcamConsumer);
+ }}
+ >
+
+
+ :
+
+ {
+ toggleConsumerFullscreen(webcamConsumer);
+ }}
+ >
+
+
+ }
@@ -428,24 +508,46 @@ const Peer = (props) =>
placement={smallScreen ? 'top' : 'left'}
>
-
- {
- toggleConsumerWindow(consumer);
- }}
- >
-
-
+ { smallContainer ?
+
+ {
+ toggleConsumerWindow(consumer);
+ }}
+ >
+
+
+ :
+
+ {
+ toggleConsumerWindow(consumer);
+ }}
+ >
+
+
+ }
}
@@ -458,21 +560,40 @@ const Peer = (props) =>
placement={smallScreen ? 'top' : 'left'}
>
-
- {
- toggleConsumerFullscreen(consumer);
- }}
- >
-
-
+ { smallContainer ?
+
+ {
+ toggleConsumerFullscreen(consumer);
+ }}
+ >
+
+
+ :
+
+ {
+ toggleConsumerFullscreen(consumer);
+ }}
+ >
+
+
+ }
@@ -584,7 +705,7 @@ const Peer = (props) =>
!screenVisible ||
(windowConsumer === screenConsumer.id)
}
- size={smallButtons ? 'small' : 'large'}
+ size={smallContainer ? 'small' : 'large'}
onClick={() =>
{
toggleConsumerWindow(screenConsumer);
@@ -611,7 +732,7 @@ const Peer = (props) =>
})}
className={classes.fab}
disabled={!screenVisible}
- size={smallButtons ? 'small' : 'large'}
+ size={smallContainer ? 'small' : 'large'}
onClick={() =>
{
toggleConsumerFullscreen(screenConsumer);
@@ -670,7 +791,7 @@ Peer.propTypes =
browser : PropTypes.object.isRequired,
spacing : PropTypes.number,
style : PropTypes.object,
- smallButtons : PropTypes.bool,
+ smallContainer : PropTypes.bool,
toggleConsumerFullscreen : PropTypes.func.isRequired,
toggleConsumerWindow : PropTypes.func.isRequired,
classes : PropTypes.object.isRequired,
diff --git a/app/src/components/MeetingViews/Filmstrip.js b/app/src/components/MeetingViews/Filmstrip.js
index f78e5b5..a1a3cbe 100644
--- a/app/src/components/MeetingViews/Filmstrip.js
+++ b/app/src/components/MeetingViews/Filmstrip.js
@@ -49,7 +49,7 @@ const styles = () =>
},
'&.active' :
{
- opacity : '0.6'
+ borderColor : 'var(--selected-peer-border-color)'
}
},
hiddenToolBar :
@@ -279,7 +279,7 @@ class Filmstrip extends React.PureComponent
@@ -302,7 +302,7 @@ class Filmstrip extends React.PureComponent
advancedMode={advancedMode}
id={peerId}
style={peerStyle}
- smallButtons
+ smallContainer
/>