From 894009aa6a9dead3092e34e5f92bcdf11262a55c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Mon, 18 Jun 2018 14:28:52 +0200 Subject: [PATCH] Added toggle for advanced mode. Show more info and diagnostics. --- app/lib/components/Me.jsx | 3 + app/lib/components/Peer.jsx | 3 + app/lib/components/PeerView.jsx | 92 ++++++++++++++++------------- app/lib/components/Peers.jsx | 11 +++- app/lib/components/Room.jsx | 8 ++- app/lib/components/Settings.jsx | 17 +++++- app/lib/redux/reducers/room.js | 19 +++--- app/lib/redux/stateActions.js | 15 +++-- app/stylus/components/PeerView.styl | 16 +++-- 9 files changed, 111 insertions(+), 73 deletions(-) diff --git a/app/lib/components/Me.jsx b/app/lib/components/Me.jsx index 41b6231..66226d1 100644 --- a/app/lib/components/Me.jsx +++ b/app/lib/components/Me.jsx @@ -29,6 +29,7 @@ class Me extends React.Component const { connected, me, + advancedMode, micProducer, webcamProducer, onChangeDisplayName, @@ -104,6 +105,7 @@ class Me extends React.Component { const { + advancedMode, peer, micConsumer, webcamConsumer, @@ -86,6 +87,7 @@ const Peer = (props) => } Peer.propTypes = { + advancedMode : PropTypes.bool, peer : appPropTypes.Peer.isRequired, micConsumer : appPropTypes.Consumer, webcamConsumer : appPropTypes.Consumer, diff --git a/app/lib/components/PeerView.jsx b/app/lib/components/PeerView.jsx index cda3d47..8a6ef57 100644 --- a/app/lib/components/PeerView.jsx +++ b/app/lib/components/PeerView.jsx @@ -45,6 +45,7 @@ export default class PeerView extends React.Component { const { isMe, + advancedMode, peer, videoVisible, videoProfile, @@ -67,42 +68,45 @@ export default class PeerView extends React.Component return (
-
- {screenVisible ? -
- {audioCodec ? -

{audioCodec}

- :null - } + {advancedMode ? +
+ {screenVisible ? +
+ {audioCodec ? +

{audioCodec}

+ :null + } - {screenCodec ? -

{screenCodec} {screenProfile}

- :null - } + {screenCodec ? +

{screenCodec} {screenProfile}

+ :null + } - {(screenVisible && screenWidth !== null) ? -

{screenWidth}x{screenHeight}

- :null - } -
- :
- {audioCodec ? -

{audioCodec}

- :null - } + {(screenVisible && screenWidth !== null) ? +

{screenWidth}x{screenHeight}

+ :null + } +
+ :
+ {audioCodec ? +

{audioCodec}

+ :null + } - {videoCodec ? -

{videoCodec} {videoProfile}

- :null - } + {videoCodec ? +

{videoCodec} {videoProfile}

+ :null + } - {(videoVisible && videoWidth !== null) ? -

{videoWidth}x{videoHeight}

- :null - } -
- } -
+ {(videoVisible && videoWidth !== null) ? +

{videoWidth}x{videoHeight}

+ :null + } +
+ } +
+ :null + }
{isMe ? @@ -126,14 +130,17 @@ export default class PeerView extends React.Component } -
- - - {peer.device.name} {Math.floor(peer.device.version) || null} - -
+ {advancedMode ? +
+ + + {peer.device.name} {Math.floor(peer.device.version) || null} + +
+ :null + }
@@ -307,8 +314,9 @@ export default class PeerView extends React.Component PeerView.propTypes = { - isMe : PropTypes.bool, - peer : PropTypes.oneOfType( + isMe : PropTypes.bool, + advancedMode : PropTypes.bool, + peer : PropTypes.oneOfType( [ appPropTypes.Me, appPropTypes.Peer ]).isRequired, audioTrack : PropTypes.any, videoTrack : PropTypes.any, diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Peers.jsx index 33d74dc..ae01ed1 100644 --- a/app/lib/components/Peers.jsx +++ b/app/lib/components/Peers.jsx @@ -8,9 +8,9 @@ import Peer from './Peer'; class Peers extends React.Component { - constructor() + constructor(props) { - super(); + super(props); this.state = { peerWidth : 400, peerHeight : 300, @@ -81,6 +81,7 @@ class Peers extends React.Component render() { const { + advancedMode, activeSpeakerName, peers } = this.props; @@ -103,7 +104,10 @@ class Peers extends React.Component 'active-speaker' : peer.name === activeSpeakerName })} style={style} > - +
); @@ -116,6 +120,7 @@ class Peers extends React.Component Peers.propTypes = { + advancedMode : PropTypes.bool, peers : PropTypes.arrayOf(appPropTypes.Peer).isRequired, activeSpeakerName : PropTypes.string }; diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx index f6f8acf..4675277 100644 --- a/app/lib/components/Room.jsx +++ b/app/lib/components/Room.jsx @@ -99,14 +99,18 @@ class Room extends React.Component - +
- +
diff --git a/app/lib/components/Settings.jsx b/app/lib/components/Settings.jsx index 9e130a1..c41d65c 100644 --- a/app/lib/components/Settings.jsx +++ b/app/lib/components/Settings.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { connect } from 'react-redux'; import * as appPropTypes from './appPropTypes'; import * as requestActions from '../redux/requestActions'; +import * as stateActions from '../redux/stateActions'; import PropTypes from 'prop-types'; import { Appear } from './transitions'; import Dropdown from 'react-dropdown'; @@ -20,7 +21,8 @@ class Settings extends React.Component me, handleChangeWebcam, handleChangeAudioDevice, - onToggleSettings + onToggleSettings, + onToggleAdvancedMode } = this.props; if (!room.showSettings) @@ -72,6 +74,12 @@ class Settings extends React.Component onChange={handleChangeAudioDevice} placeholder={audioDevicesText} /> + + Advanced mode
@@ -115,6 +124,10 @@ const mapDispatchToProps = (dispatch) => handleChangeAudioDevice : (device) => { dispatch(requestActions.changeAudioDevice(device.value)); + }, + onToggleAdvancedMode : () => + { + dispatch(stateActions.toggleAdvancedMode()); } }; }; diff --git a/app/lib/redux/reducers/room.js b/app/lib/redux/reducers/room.js index 1122f82..0ae277b 100644 --- a/app/lib/redux/reducers/room.js +++ b/app/lib/redux/reducers/room.js @@ -3,9 +3,8 @@ const initialState = url : null, state : 'new', // new/connecting/connected/disconnected/closed, activeSpeakerName : null, - peerHeight : 300, - peerWidth : 400, - showSettings : false + showSettings : false, + advancedMode : false }; const room = (state = initialState, action) => @@ -36,13 +35,6 @@ const room = (state = initialState, action) => return { ...state, activeSpeakerName: peerName }; } - case 'SET_COMPONENT_SIZE': - { - const { peerWidth, peerHeight } = action.payload; - - return { ...state, peerWidth: peerWidth, peerHeight: peerHeight }; - } - case 'TOGGLE_SETTINGS': { const showSettings = !state.showSettings; @@ -50,6 +42,13 @@ const room = (state = initialState, action) => return { ...state, showSettings }; } + case 'TOGGLE_ADVANCED_MODE': + { + const advancedMode = !state.advancedMode; + + return { ...state, advancedMode }; + } + default: return state; } diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js index d6bf721..4fb47fe 100644 --- a/app/lib/redux/stateActions.js +++ b/app/lib/redux/stateActions.js @@ -22,14 +22,6 @@ export const setRoomActiveSpeaker = (peerName) => }; }; -export const onComponentResize = (peerWidth, peerHeight) => -{ - return { - type : 'SET_COMPONENT_SIZE', - payload : { peerWidth, peerHeight } - }; -}; - export const setMe = ({ peerName, displayName, displayNameSet, device }) => { return { @@ -94,6 +86,13 @@ export const setDisplayName = (displayName) => }; }; +export const toggleAdvancedMode = () => +{ + return { + type : 'TOGGLE_ADVANCED_MODE' + }; +}; + export const setAudioOnlyState = (enabled) => { return { diff --git a/app/stylus/components/PeerView.styl b/app/stylus/components/PeerView.styl index 1230284..1d8f964 100644 --- a/app/stylus/components/PeerView.styl +++ b/app/stylus/components/PeerView.styl @@ -17,9 +17,9 @@ position: absolute; z-index: 5 - top: 0; + top: 0.6vmin; + left: 0.6vmin; bottom: 0; - left: 0; right: 0; display: flex; flex-direction: column; @@ -31,8 +31,7 @@ flex-direction: row; > .box { - margin: 4px; - padding: 2px 4px; + padding: 0.4vmin; border-radius: 2px; background-color: rgba(#000, 0.25); @@ -55,15 +54,20 @@ display: flex; flex-direction: column; justify-content: flex-end; + position: absolute; + bottom: 0.6vmin; + left: 0; + border-radius: 2px; + background-color: rgba(#000, 0.25); +desktop() { &.is-me { - padding: 10px; + padding: 1vmin; align-items: flex-start; } &:not(.is-me) { - padding: 20px; + padding: 1vmin; align-items: flex-start; } }