Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Hide toolbars after 10 seconds

master
Torjus 2018-07-16 12:39:09 +02:00
parent 3283a7d09f
commit 79376b3a50
8 changed files with 326 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/.eslintrc.js
View File

@ -24,14 +24,14 @@ module.exports =
version: '15'
}
},
parser: 'babel-eslint',
parserOptions:
{
ecmaVersion: 6,
ecmaVersion: 9,
sourceType: 'module',
ecmaFeatures:
{
impliedStrict: true,
experimentalObjectRestSpread: true,
jsx: true
}
},
@ -121,7 +121,6 @@ module.exports =
'no-implicit-globals': 2,
'no-inner-declarations': 2,
'no-invalid-regexp': 2,
'no-invalid-this': 2,
'no-irregular-whitespace': 2,
'no-lonely-if': 2,
'no-mixed-operators': 2,

66
app/lib/components/Room.jsx
View File

@ -6,6 +6,7 @@ import classnames from 'classnames';
import ClipboardButton from 'react-clipboard.js';
import * as appPropTypes from './appPropTypes';
import * as requestActions from '../redux/requestActions';
import * as stateActions from '../redux/stateActions';
import { Appear } from './transitions';
import Me from './Me';
import Peers from './Peers';
@ -15,20 +16,61 @@ import ToolArea from './ToolArea/ToolArea';
import FullScreenView from './FullScreenView';
import Draggable from 'react-draggable';
// Hide toolbars after 10 seconds of inactivity.
const TIMEOUT = 10 * 1000;
/**
* Create a function which will call the callback function
* after the given amount of milliseconds has passed since
* the last time the callback function was called.
*/
const idle = (callback, delay) =>
{
let handle;
return () =>
{
if (handle)
{
clearTimeout(handle);
}
handle = setTimeout(callback, delay);
};
};
class Room extends React.Component
{
handleMouseMove = () => {
/**
* Hides the different toolbars on the page after a
* given amount of time has passed since the
* last time the cursor was moved.
*/
waitForHide = idle(() =>
{
this.props.setToolbarsVisible(false);
}, TIMEOUT);
handleMouseMove = () =>
{
// If the toolbars were hidden, show them again when
// the user moves their cursor.
if (!this.props.room.toolbarsVisible)
{
this.props.setToolbarsVisible(true);
}
this.waitForHide();
}
componentDidMount()
{
window.addEventListener('mousemove', this.handleMouseMove);
}
componentWillUnmount()
{
window.removeEventListener('mousemove', this.handleMouseMove);
}
render()
@ -92,7 +134,11 @@ class Room extends React.Component
:null
}
<div className='room-link-wrapper'>
<div
className={classnames('room-link-wrapper room-controls', {
'visible' : this.props.room.toolbarsVisible
})}
>
<div className='room-link'>
<ClipboardButton
component='a'
@ -139,7 +185,10 @@ class Room extends React.Component
</div>
</Draggable>
<div className='sidebar'>
<div className={classnames('sidebar room-controls', {
'visible' : this.props.room.toolbarsVisible
})}
>
<div
className={classnames('button', 'screen', screenState)}
data-tip={screenTip}
@ -228,7 +277,8 @@ Room.propTypes =
onUnShareScreen : PropTypes.func.isRequired,
onNeedExtension : PropTypes.func.isRequired,
onLeaveMeeting : PropTypes.func.isRequired,
onLogin : PropTypes.func.isRequired
onLogin : PropTypes.func.isRequired,
setToolbarsVisible : PropTypes.func.isRequired
};
const mapStateToProps = (state) =>
@ -275,6 +325,10 @@ const mapDispatchToProps = (dispatch) =>
onLogin : () =>
{
dispatch(requestActions.userLogin());
},
setToolbarsVisible : (visible) =>
{
dispatch(stateActions.setToolbarsVisible(visible));
}
};
};

9
app/lib/components/ToolArea/ToolAreaButton.jsx
View File

@ -17,8 +17,9 @@ class ToolAreaButton extends React.Component
return (
<div data-component='ToolAreaButton'>
<div
className={classnames('button', 'toolarea-button', {
on : toolAreaOpen
className={classnames('button toolarea-button room-controls', {
on : toolAreaOpen,
visible : this.props.visible
})}
data-tip='Toggle tool area'
data-type='dark'
@ -40,13 +41,15 @@ ToolAreaButton.propTypes =
{
toolAreaOpen : PropTypes.bool.isRequired,
toggleToolArea : PropTypes.func.isRequired,
unread : PropTypes.bool.isRequired
unread : PropTypes.bool.isRequired,
visible : PropTypes.bool.isRequired
};
const mapStateToProps = (state) =>
{
return {
toolAreaOpen : state.toolarea.toolAreaOpen,
visible : state.room.toolbarsVisible,
unread : state.toolarea.unread
};
};

9
app/lib/redux/reducers/room.js
View File

@ -5,7 +5,8 @@ const initialState =
activeSpeakerName : null,
showSettings : false,
advancedMode : false,
fullScreenConsumer : null // ConsumerID
fullScreenConsumer : null, // ConsumerID
toolbarsVisible : true
};
const room = (state = initialState, action) =>
@ -58,6 +59,12 @@ const room = (state = initialState, action) =>
return { ...state, fullScreenConsumer: currentConsumer ? null : consumerId };
}
case 'SET_TOOLBARS_VISIBLE':
{
const { toolbarsVisible } = action.payload;
return { ...state, toolbarsVisible };
}
default:
return state;
}

5
app/lib/redux/stateActions.js
View File

@ -369,6 +369,11 @@ export const toggleConsumerFullscreen = (consumerId) =>
};
};
export const setToolbarsVisible = (toolbarsVisible) => ({
type : 'SET_TOOLBARS_VISIBLE',
payload : { toolbarsVisible }
});
export const increaseBadge = () =>
{
return {

195
app/package-lock.json generated
View File

@ -4,6 +4,169 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/code-frame": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz",
"integrity": "sha512-cuAuTTIQ9RqcFRJ/Y8PvTh+paepNcaGxwQwjIDRWPXmzzyAeCO4KqS9ikMvq0MCbRk6GlYKwfzStrcP3/jSL8g==",
"dev": true,
"requires": {
"@babel/highlight": "7.0.0-beta.44"
}
},
"@babel/generator": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.44.tgz",
"integrity": "sha512-5xVb7hlhjGcdkKpMXgicAVgx8syK5VJz193k0i/0sLP6DzE6lRrU1K3B/rFefgdo9LPGMAOOOAWW4jycj07ShQ==",
"dev": true,
"requires": {
"@babel/types": "7.0.0-beta.44",
"jsesc": "^2.5.1",
"lodash": "^4.2.0",
"source-map": "^0.5.0",
"trim-right": "^1.0.1"
},
"dependencies": {
"jsesc": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz",
"integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=",
"dev": true
}
}
},
"@babel/helper-function-name": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz",
"integrity": "sha512-MHRG2qZMKMFaBavX0LWpfZ2e+hLloT++N7rfM3DYOMUOGCD8cVjqZpwiL8a0bOX3IYcQev1ruciT0gdFFRTxzg==",
"dev": true,
"requires": {
"@babel/helper-get-function-arity": "7.0.0-beta.44",
"@babel/template": "7.0.0-beta.44",
"@babel/types": "7.0.0-beta.44"
}
},
"@babel/helper-get-function-arity": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz",
"integrity": "sha512-w0YjWVwrM2HwP6/H3sEgrSQdkCaxppqFeJtAnB23pRiJB5E/O9Yp7JAAeWBl+gGEgmBFinnTyOv2RN7rcSmMiw==",
"dev": true,
"requires": {
"@babel/types": "7.0.0-beta.44"
}
},
"@babel/helper-split-export-declaration": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz",
"integrity": "sha512-aQ7QowtkgKKzPGf0j6u77kBMdUFVBKNHw2p/3HX/POt5/oz8ec5cs0GwlgM8Hz7ui5EwJnzyfRmkNF1Nx1N7aA==",
"dev": true,
"requires": {
"@babel/types": "7.0.0-beta.44"
}
},
"@babel/highlight": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.44.tgz",
"integrity": "sha512-Il19yJvy7vMFm8AVAh6OZzaFoAd0hbkeMZiX3P5HGD+z7dyI7RzndHB0dg6Urh/VAFfHtpOIzDUSxmY6coyZWQ==",
"dev": true,
"requires": {
"chalk": "^2.0.0",
"esutils": "^2.0.2",
"js-tokens": "^3.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "^1.9.0"
}
},
"chalk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
"integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
}
}
},
"@babel/template": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.44.tgz",
"integrity": "sha512-w750Sloq0UNifLx1rUqwfbnC6uSUk0mfwwgGRfdLiaUzfAOiH0tHJE6ILQIUi3KYkjiCDTskoIsnfqZvWLBDng==",
"dev": true,
"requires": {
"@babel/code-frame": "7.0.0-beta.44",
"@babel/types": "7.0.0-beta.44",
"babylon": "7.0.0-beta.44",
"lodash": "^4.2.0"
},
"dependencies": {
"babylon": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz",
"integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==",
"dev": true
}
}
},
"@babel/traverse": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.44.tgz",
"integrity": "sha512-UHuDz8ukQkJCDASKHf+oDt3FVUzFd+QYfuBIsiNu/4+/ix6pP/C+uQZJ6K1oEfbCMv/IKWbgDEh7fcsnIE5AtA==",
"dev": true,
"requires": {
"@babel/code-frame": "7.0.0-beta.44",
"@babel/generator": "7.0.0-beta.44",
"@babel/helper-function-name": "7.0.0-beta.44",
"@babel/helper-split-export-declaration": "7.0.0-beta.44",
"@babel/types": "7.0.0-beta.44",
"babylon": "7.0.0-beta.44",
"debug": "^3.1.0",
"globals": "^11.1.0",
"invariant": "^2.2.0",
"lodash": "^4.2.0"
},
"dependencies": {
"babylon": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz",
"integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==",
"dev": true
},
"globals": {
"version": "11.7.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.7.0.tgz",
"integrity": "sha512-K8BNSPySfeShBQXsahYB/AbbWruVOTyVpgoIDnl8odPpeSfP2J5QO2oLFFdl2j7GfDCtZj2bMKar2T49itTPCg==",
"dev": true
}
}
},
"@babel/types": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.44.tgz",
"integrity": "sha512-5eTV4WRmqbaFM3v9gHAIljEQJU4Ssc6fxL61JN+Oe2ga/BwyjzjamwkCVVAQjHGuAX8i0BWo42dshL8eO5KfLQ==",
"dev": true,
"requires": {
"esutils": "^2.0.2",
"lodash": "^4.2.0",
"to-fast-properties": "^2.0.0"
},
"dependencies": {
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
"dev": true
}
}
},
"JSONStream": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.3.tgz",
@ -636,6 +799,38 @@
}
}
},
"babel-eslint": {
"version": "8.2.6",
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.6.tgz",
"integrity": "sha512-aCdHjhzcILdP8c9lej7hvXKvQieyRt20SF102SIGyY4cUIiw6UaAtK4j2o3dXX74jEmy0TJ0CEhv4fTIM3SzcA==",
"dev": true,
"requires": {
"@babel/code-frame": "7.0.0-beta.44",
"@babel/traverse": "7.0.0-beta.44",
"@babel/types": "7.0.0-beta.44",
"babylon": "7.0.0-beta.44",
"eslint-scope": "3.7.1",
"eslint-visitor-keys": "^1.0.0"
},
"dependencies": {
"babylon": {
"version": "7.0.0-beta.44",
"resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz",
"integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==",
"dev": true
},
"eslint-scope": {
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
"integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
"dev": true,
"requires": {
"esrecurse": "^4.1.0",
"estraverse": "^4.1.1"
}
}
}
},
"babel-generator": {
"version": "6.26.1",
"resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",

2
app/package.json
View File

@ -35,6 +35,7 @@
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react-app": "^3.1.2",
@ -59,6 +60,7 @@
"gulp-touch-cmd": "0.0.1",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"lodash": "^4.17.10",
"mkdirp": "^0.5.1",
"ncp": "^2.0.0",
"nib": "^1.1.2",

36
app/stylus/components/Room.styl
View File

@ -276,6 +276,18 @@
}
}
.room-controls {
visibility: hidden;
animation: fade-out 0.5s;
opacity: 0;
&.visible {
visibility: visible;
opacity: 1;
animation: fade-in 0.5s;
}
}
.Dropdown-root {
position: relative;
padding: 0.3vmin;
@ -428,3 +440,27 @@
@keyframes Room-info-state-connecting {
50% { background-color: rgba(orange, 0.75); }
}
@keyframes fade-in {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fade-out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}