Mirrors/edumeet
1
0
Fork 0
mirror of https://github.com/edumeet/edumeet.git synced 2026-01-23 02:34:58 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Astagor 2022-02-04 07:55:30 +01:00 • committed by GitHub
parent da7fbf16e7
commit 4c40eabc4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 100 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

62
app/src/components/VideoContainers/FullScreenView.js
View file

@ -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)}
>

46
app/src/components/VideoWindow/NewWindow.js
View file

@ -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}