From c46bcb7bdc17c7d8561ffe799e6e8b5dfe41db6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Thu, 6 Jun 2019 11:28:36 +0200 Subject: [PATCH] Updated film strip. Added it back to settings. --- app/src/components/Containers/Peer.js | 16 ++-- app/src/components/MeetingViews/Filmstrip.js | 86 +++++++++++++------- app/src/components/Settings/Settings.js | 34 +++++++- 3 files changed, 97 insertions(+), 39 deletions(-) diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index 9def7e9..0e4875d 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -53,6 +53,8 @@ const styles = (theme) => viewContainer : { position : 'relative', + width : '100%', + height : '100%', '&.webcam' : { order : 2 @@ -164,9 +166,10 @@ const Peer = (props) => const smallScreen = useMediaQuery(theme.breakpoints.down('sm')); - const spacingStyle = + const rootStyle = { - 'margin' : spacing + 'margin' : spacing, + ...style }; return ( @@ -199,9 +202,9 @@ const Peer = (props) => setHover(false); }, 2000); }} - style={spacingStyle} + style={rootStyle} > -
+
{ !videoVisible ?

this video is paused

@@ -319,16 +322,17 @@ const Peer = (props) => setHover(false); }, 2000); }} + style={rootStyle} > { !screenVisible ? -
+

this video is paused

:null } { screenVisible ? -
+
setScreenHover(true)} diff --git a/app/src/components/MeetingViews/Filmstrip.js b/app/src/components/MeetingViews/Filmstrip.js index 3a75998..2949eff 100644 --- a/app/src/components/MeetingViews/Filmstrip.js +++ b/app/src/components/MeetingViews/Filmstrip.js @@ -4,7 +4,8 @@ import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; import { - spotlightsLengthSelector + spotlightsLengthSelector, + videoBoxesSelector } from '../Selectors'; import { withRoomContext } from '../../RoomContext'; import Me from '../Containers/Me'; @@ -60,6 +61,8 @@ class Filmstrip extends React.PureComponent this.resizeTimeout = null; this.activePeerContainer = React.createRef(); + + this.filmStripContainer = React.createRef(); } state = { @@ -102,31 +105,53 @@ class Filmstrip extends React.PureComponent updateDimensions = () => { - const container = this.activePeerContainer.current; + const newState = {}; - if (container) + const speaker = this.activePeerContainer.current; + + if (speaker) { - let width = (container.clientWidth - 100); - - let height = (width / 4) * 3; + let speakerWidth = (speaker.clientWidth - 100); + let speakerHeight = (speakerWidth / 4) * 3; + if (this.isSharingCamera(this.getActivePeerId())) { - width /= 2; - height = (width / 4) * 3; + speakerWidth /= 2; + speakerHeight = (speakerWidth / 4) * 3; } - - if (height > (container.clientHeight - 60)) + + if (speakerHeight > (speaker.clientHeight - 60)) { - height = (container.clientHeight - 60); - width = (height / 3) * 4; + speakerHeight = (speaker.clientHeight - 60); + speakerWidth = (speakerHeight / 3) * 4; } - this.setState({ - width, - height - }); + newState.speakerWidth = speakerWidth; + newState.speakerHeight = speakerHeight; } + + const filmStrip = this.filmStripContainer.current; + + if (filmStrip) + { + let filmStripHeight = filmStrip.clientHeight - 10; + + let filmStripWidth = (filmStripHeight / 3) * 4; + + if (filmStripWidth * this.props.boxes > (filmStrip.clientWidth - 50)) + { + filmStripWidth = (filmStrip.clientWidth - 50) / this.props.boxes; + filmStripHeight = (filmStripWidth / 4) * 3; + } + + newState.filmStripWidth = filmStripWidth; + newState.filmStripHeight = filmStripHeight; + } + + this.setState({ + ...newState + }); }; componentDidMount() @@ -190,14 +215,14 @@ class Filmstrip extends React.PureComponent const speakerStyle = { - width : this.state.width, - height : this.state.height + width : this.state.speakerWidth, + height : this.state.speakerHeight }; const peerStyle = { - 'width' : '24vmin', - 'height' : '18vmin' + width : this.state.filmStripWidth, + height : this.state.filmStripHeight }; return ( @@ -213,7 +238,7 @@ class Filmstrip extends React.PureComponent }
-
+
-
- { spotlightsLength - :null - } -
+ + { spotlightsLength + :null + }
); } @@ -281,6 +305,7 @@ Filmstrip.propTypes = { selectedPeerId : PropTypes.string, spotlightsLength : PropTypes.number, spotlights : PropTypes.array.isRequired, + boxes : PropTypes.number, classes : PropTypes.object.isRequired }; @@ -293,7 +318,8 @@ const mapStateToProps = (state) => consumers : state.consumers, myId : state.me.id, spotlights : state.room.spotlights, - spotlightsLength : spotlightsLengthSelector(state) + spotlightsLength : spotlightsLengthSelector(state), + boxes : videoBoxesSelector(state), }; }; diff --git a/app/src/components/Settings/Settings.js b/app/src/components/Settings/Settings.js index 843d548..59b63c7 100644 --- a/app/src/components/Settings/Settings.js +++ b/app/src/components/Settings/Settings.js @@ -51,13 +51,13 @@ const styles = (theme) => } }); -/* const modes = [ { +const modes = [ { value : 'democratic', label : 'Democratic view' }, { value : 'filmstrip', label : 'Filmstrip view' -} ]; */ +} ]; const resolutions = [ { value : 'low', @@ -87,6 +87,7 @@ const Settings = ({ settings, onToggleAdvancedMode, handleCloseSettings, + handleChangeMode, classes }) => { @@ -203,6 +204,33 @@ const Settings = ({ +
+ + + + Select room layout + + +
} @@ -241,7 +269,7 @@ const mapStateToProps = (state) => const mapDispatchToProps = { onToggleAdvancedMode : stateActions.toggleAdvancedMode, handleChangeMode : stateActions.setDisplayMode, - handleCloseSettings : stateActions.setSettingsOpen + handleCloseSettings : stateActions.setSettingsOpen, }; export default withRoomContext(connect(