videoCodec={webcamConsumer && webcamConsumer.codec}
audioScore={micConsumer ? micConsumer.score : null}
videoScore={webcamConsumer ? webcamConsumer.score : null}
+ width={width}
+ height={height}
>
@@ -205,14 +240,19 @@ const SpeakerPeer = (props) =>
SpeakerPeer.propTypes =
{
- advancedMode : PropTypes.bool,
- peer : appPropTypes.Peer,
- micConsumer : appPropTypes.Consumer,
- webcamConsumer : appPropTypes.Consumer,
- screenConsumer : appPropTypes.Consumer,
- spacing : PropTypes.number,
- style : PropTypes.object,
- classes : PropTypes.object.isRequired
+ roomClient : PropTypes.any.isRequired,
+ advancedMode : PropTypes.bool,
+ peer : appPropTypes.Peer,
+ micConsumer : appPropTypes.Consumer,
+ webcamConsumer : appPropTypes.Consumer,
+ screenConsumer : appPropTypes.Consumer,
+ windowConsumer : PropTypes.string,
+ fullScreenConsumer : PropTypes.string,
+ spacing : PropTypes.number,
+ style : PropTypes.object,
+ classes : PropTypes.object.isRequired,
+ width : PropTypes.number,
+ height : PropTypes.number
};
const mapStateToProps = (state, { id }) =>
@@ -220,12 +260,14 @@ const mapStateToProps = (state, { id }) =>
const getPeerConsumers = makePeerConsumerSelector();
return {
- peer : state.peers[id],
- ...getPeerConsumers(state, id)
+ peer : state.peers[id],
+ ...getPeerConsumers(state, id),
+ windowConsumer : state.room.windowConsumer,
+ fullScreenConsumer : state.room.fullScreenConsumer
};
};
-export default connect(
+export default withRoomContext(connect(
mapStateToProps,
null,
null,
@@ -235,8 +277,10 @@ export default connect(
return (
prev.peers === next.peers &&
prev.consumers === next.consumers &&
- prev.room.activeSpeakerId === next.room.activeSpeakerId
+ prev.room.activeSpeakerId === next.room.activeSpeakerId &&
+ prev.width === next.width &&
+ prev.height === next.height
);
}
}
-)(withStyles(styles, { withTheme: true })(SpeakerPeer));
+)(withStyles(styles, { withTheme: true })(SpeakerPeer)));
diff --git a/app/src/components/Controls/TopBar.js b/app/src/components/Controls/TopBar.js
index 12e94acb..64336cc9 100644
--- a/app/src/components/Controls/TopBar.js
+++ b/app/src/components/Controls/TopBar.js
@@ -23,7 +23,6 @@ import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
-import Avatar from '@material-ui/core/Avatar';
import Badge from '@material-ui/core/Badge';
import Paper from '@material-ui/core/Paper';
import AccountCircle from '@material-ui/icons/AccountCircle';
@@ -217,7 +216,6 @@ const TopBar = (props) =>
drawerOverlayed,
toolAreaOpen,
isMobile,
- myPicture,
loggedIn,
loginEnabled,
fullscreenEnabled,
@@ -468,11 +466,7 @@ const TopBar = (props) =>
loggedIn ? roomClient.logout() : roomClient.login();
}}
>
- { myPicture ?
-
- :
-
- }
+
}
@@ -692,11 +686,7 @@ const TopBar = (props) =>
loggedIn ? roomClient.logout() : roomClient.login();
}}
>
- { myPicture ?
-
- :
-
- }
+
{ loggedIn ?
toolAreaOpen : state.toolarea.toolAreaOpen,
loggedIn : state.me.loggedIn,
loginEnabled : state.me.loginEnabled,
- myPicture : state.me.picture,
unread : state.toolarea.unreadMessages +
state.toolarea.unreadFiles + raisedHandsSelector(state),
canProduceExtraVideo : hasExtraVideoPermission(state),
diff --git a/app/src/components/JoinDialog.js b/app/src/components/JoinDialog.js
index c1c1e6a7..3d284e48 100644
--- a/app/src/components/JoinDialog.js
+++ b/app/src/components/JoinDialog.js
@@ -11,7 +11,6 @@ import { useIntl, FormattedMessage } from 'react-intl';
import Dialog from '@material-ui/core/Dialog';
import DialogContentText from '@material-ui/core/DialogContentText';
import AccountCircle from '@material-ui/icons/AccountCircle';
-import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
@@ -169,7 +168,6 @@ const JoinDialog = ({
displayName,
displayNameInProgress,
loggedIn,
- myPicture,
changeDisplayName,
setMediaPerms,
classes,
@@ -413,21 +411,14 @@ const JoinDialog = ({
() => roomClient.login(roomId)
}
>
- { myPicture ?
-
- :
-
- }
+
@@ -782,7 +773,6 @@ JoinDialog.propTypes =
displayNameInProgress : PropTypes.bool.isRequired,
loginEnabled : PropTypes.bool.isRequired,
loggedIn : PropTypes.bool.isRequired,
- myPicture : PropTypes.string,
changeDisplayName : PropTypes.func.isRequired,
setMediaPerms : PropTypes.func.isRequired,
classes : PropTypes.object.isRequired,
@@ -803,7 +793,6 @@ const mapStateToProps = (state) =>
displayNameInProgress : state.me.displayNameInProgress,
loginEnabled : state.me.loginEnabled,
loggedIn : state.me.loggedIn,
- myPicture : state.me.picture,
locale : state.intl.locale,
localesList : state.intl.list
diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js
index 27319e7a..eb9c68e8 100644
--- a/app/src/components/MeetingViews/Democratic.js
+++ b/app/src/components/MeetingViews/Democratic.js
@@ -192,6 +192,9 @@ class Democratic extends React.PureComponent
id={peer}
spacing={6}
style={style}
+ enableLayersSwitch
+ width={this.state.peerWidth}
+ height={this.state.peerHeight}
/>
);
})}
diff --git a/app/src/components/MeetingViews/Filmstrip.js b/app/src/components/MeetingViews/Filmstrip.js
index 5e533e10..124e2a91 100644
--- a/app/src/components/MeetingViews/Filmstrip.js
+++ b/app/src/components/MeetingViews/Filmstrip.js
@@ -276,6 +276,8 @@ class Filmstrip extends React.PureComponent
advancedMode={advancedMode}
id={activePeerId}
style={speakerStyle}
+ width={speakerStyle.width}
+ height={speakerStyle.height}
/>
}
@@ -317,6 +319,9 @@ class Filmstrip extends React.PureComponent
id={peerId}
style={peerStyle}
smallContainer
+ enableLayersSwitch={activePeerId !== peerId}
+ width={peerStyle.width}
+ height={peerStyle.height}
/>
diff --git a/app/src/components/Settings/MediaSettings.js b/app/src/components/Settings/MediaSettings.js
index b6eb8404..e5ecdf35 100644
--- a/app/src/components/Settings/MediaSettings.js
+++ b/app/src/components/Settings/MediaSettings.js
@@ -21,6 +21,8 @@ import ListItemText from '@material-ui/core/ListItemText';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import Switch from '@material-ui/core/Switch';
+import ImageUploader from 'react-images-upload';
+import Resizer from 'react-image-file-resizer';
const NoiseSlider = withStyles(
{
@@ -98,6 +100,30 @@ const MediaSettings = ({
const [ audioSettingsOpen, setAudioSettingsOpen ] = React.useState(false);
const [ videoSettingsOpen, setVideoSettingsOpen ] = React.useState(false);
+ const onDrop = (picture) =>
+ {
+ if (picture.length > 0)
+ {
+ Resizer.imageFileResizer(picture[0], 1280, 720, 'JPEG', 99, 0,
+ (uri) =>
+ {
+ const reader = new FileReader();
+
+ reader.addEventListener('load', () =>
+ {
+ roomClient.setPicture(reader.result);
+ });
+
+ reader.readAsDataURL(uri);
+ },
+ 'blob');
+ }
+ else
+ {
+ roomClient.setPicture(null);
+ }
+ };
+
const resolutions = [ {
value : 'low',
label : intl.formatMessage({
@@ -159,6 +185,32 @@ const MediaSettings = ({