diff --git a/app/src/components/VideoContainers/FullScreenView.js b/app/src/components/VideoContainers/FullScreenView.js index a17a4168d..bdb90f923 100644 --- a/app/src/components/VideoContainers/FullScreenView.js +++ b/app/src/components/VideoContainers/FullScreenView.js @@ -1,4 +1,4 @@ -import React, { useRef, useEffect } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import { useWindowSize } from '@react-hook/window-size'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; @@ -39,7 +39,28 @@ const styles = (theme) => flexDirection : 'row', justifyContent : 'flex-start', alignItems : 'center', - padding : theme.spacing(1) + padding : theme.spacing(1), + '&.hide' : + { + transition : 'opacity 0.1s ease-in-out', + opacity : 0 + }, + '&.hover' : + { + opacity : 1 + } + }, + buttonControlBarPanel : + { + '&.hide' : + { + transition : 'opacity 0.1s ease-in-out', + opacity : 0 + }, + '&.hover' : + { + opacity : 1 + } }, button : { @@ -125,6 +146,10 @@ const styles = (theme) => const FullScreenView = (props) => { + const [ hover, setHover ] = useState(false); + + let touchTimeout = null; + const { roomClient, advancedMode, @@ -182,8 +207,33 @@ const FullScreenView = (props) => ); return ( -
-
+
setHover(true)} + onMouseOut={() => setHover(false)} + onTouchStart={() => + { + if (touchTimeout) + clearTimeout(touchTimeout); + + setHover(true); + }} + onTouchEnd={() => + { + if (touchTimeout) + clearTimeout(touchTimeout); + + touchTimeout = setTimeout(() => + { + setHover(false); + }, 2000); + }} + > +
handleAutoHide(false)} onMouseLeave={() => handleAutoHide(true)} > diff --git a/app/src/components/VideoWindow/NewWindow.js b/app/src/components/VideoWindow/NewWindow.js index 9497ac21f..af233aae4 100644 --- a/app/src/components/VideoWindow/NewWindow.js +++ b/app/src/components/VideoWindow/NewWindow.js @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; +import classnames from 'classnames'; import FullScreen from '../FullScreen'; import FullScreenIcon from '@material-ui/icons/Fullscreen'; import FullScreenExitIcon from '@material-ui/icons/FullscreenExit'; @@ -27,7 +28,16 @@ const styles = (theme) => flexDirection : 'row', justifyContent : 'flex-start', alignItems : 'center', - padding : theme.spacing(1) + padding : theme.spacing(1), + '&.hide' : + { + transition : 'opacity 0.1s ease-in-out', + opacity : 0 + }, + '&.hover' : + { + opacity : 1 + } }, button : { @@ -114,7 +124,8 @@ class NewWindow extends React.PureComponent this.state = { mounted : false, - fullscreen : false + fullscreen : false, + hover : false }; } @@ -127,9 +138,36 @@ class NewWindow extends React.PureComponent if (!this.state.mounted) return null; + let touchTimeout = null; + return ReactDOM.createPortal([ -
-
+
this.setState({ hover: true })} + onMouseOut={() => this.setState({ hover: false })} + onTouchStart={() => + { + if (touchTimeout) + clearTimeout(touchTimeout); + + this.setState({ hover: true }); + }} + onTouchEnd={() => + { + if (touchTimeout) + clearTimeout(touchTimeout); + + touchTimeout = setTimeout(() => + { + this.setState({ hover: false }); + }, 2000); + }} + > +
{ this.fullscreen.fullscreenEnabled &&