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 &&