Make visibility of media controls configurable, fixes #267

app/src/components/Containers/Me.js

@@ -78,7 +78,16 @@ const styles = (theme) =>
 			zIndex         : 21,
 			touchAction    : 'none',
 			pointerEvents  : 'none',
-			'& p'          :
+			'&.hide'       :
+			{
+				transition : 'opacity 0.1s ease-in-out',
+				opacity    : 0
+			},
+			'&.hover' :
+			{
+				opacity : 1
+			},
+			'& p' :
 			{
 				position   : 'absolute',
 				float      : 'left',
@@ -290,7 +299,11 @@ const Me = (props) =>
 			>
 				<div className={classes.viewContainer} style={style}>
 					<div
-						className={classes.controls}  
+						className={classnames(
+							classes.controls,
+							settings.hiddenControls ? 'hide' : null,
+							hover ? 'hover' : null
+						)}
 						onMouseOver={() => setHover(true)}
 						onMouseOut={() => setHover(false)}
 						onTouchStart={() =>
@@ -480,7 +493,11 @@ const Me = (props) =>
 				>
 					<div className={classes.viewContainer} style={style}>
 						<div
-							className={classes.controls}
+							className={classnames(
+								classes.controls,
+								settings.hiddenControls ? 'hide' : null,
+								hover ? 'hover' : null
+							)}
 							onMouseOver={() => setHover(true)}
 							onMouseOut={() => setHover(false)}
 							onTouchStart={() =>

app/src/components/Settings/AppearenceSettings.js

@@ -29,6 +29,7 @@ const AppearenceSettings = ({
 	room,
 	settings,
 	onTogglePermanentTopBar,
+	onToggleHiddenControls,
 	handleChangeMode,
 	classes
 }) =>
@@ -92,6 +93,14 @@ const AppearenceSettings = ({
 					defaultMessage : 'Permanent top bar'
 				})}
 			/>
+			<FormControlLabel
+				className={classes.setting}
+				control={<Checkbox checked={settings.hiddenControls} onChange={onToggleHiddenControls} value='hiddenControls' />}
+				label={intl.formatMessage({
+					id             : 'settings.hiddenControls',
+					defaultMessage : 'Hidden media controls'
+				})}
+			/>
 		</React.Fragment>
 	);
 };
@@ -101,6 +110,7 @@ AppearenceSettings.propTypes =
 	room                    : appPropTypes.Room.isRequired,
 	settings                : PropTypes.object.isRequired,
 	onTogglePermanentTopBar : PropTypes.func.isRequired,
+	onToggleHiddenControls  : PropTypes.func.isRequired,
 	handleChangeMode        : PropTypes.func.isRequired,
 	classes                 : PropTypes.object.isRequired
 };
@@ -113,6 +123,7 @@ const mapStateToProps = (state) =>
 
 const mapDispatchToProps = {
 	onTogglePermanentTopBar : settingsActions.togglePermanentTopBar,
+	onToggleHiddenControls  : settingsActions.toggleHiddenControls,
 	handleChangeMode        : roomActions.setDisplayMode
 };