Auto hide controls in new widow and full screen (edumeet#753)

Mafalda-SFU · Feb 4, 2022 · 4c40eab · 4c40eab
1 parent da7fbf1
commit 4c40eab
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 8 deletions.
diff --git 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 (
-		<div className={classes.root} ref={elementRef}>
-			<div className={classes.controls}>
+		<div className={classes.root} ref={elementRef}
+			onMouseOver={() => setHover(true)}
+			onMouseOut={() => setHover(false)}
+			onTouchStart={() =>
+			{
+				if (touchTimeout)
+					clearTimeout(touchTimeout);
+
+				setHover(true);
+			}}
+			onTouchEnd={() =>
+			{
+				if (touchTimeout)
+					clearTimeout(touchTimeout);
+
+				touchTimeout = setTimeout(() =>
+				{
+					setHover(false);
+				}, 2000);
+			}}
+		>
+			<div className={classnames(
+				classes.controls,
+				'hide',
+				hover ? 'hover' : null
+			)}
+			>
 				<div
 					className={classnames(classes.button, {
 						visible : toolbarsVisible || permanentTopBar
@@ -198,6 +248,10 @@ const FullScreenView = (props) =>
 				</div>
 			</div>
 			<div
+				className={classnames(classes.buttonControlBarPanel,
+					'hide',
+					hover ? 'hover' : null
+				)}
 				onMouseEnter={() => handleAutoHide(false)}
 				onMouseLeave={() => handleAutoHide(true)}
 			>

diff --git 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([
-			<div key='newwindow' className={classes.root}>
-				<div className={classes.controls}>
+			<div key='newwindow' className={classes.root}
+				onMouseOver={() => 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);
+				}}
+			>
+				<div className={classnames(
+					classes.controls,
+					'hide',
+					this.state.hover ? 'hover' : null
+				)}
+				>
 					{ this.fullscreen.fullscreenEnabled &&
 						<div
 							className={classes.button}