Make visibility of media controls configurable, fixes #267

app/src/actions/settingsActions.js

@@ -38,6 +38,11 @@ export const togglePermanentTopBar = () =>
 		type : 'TOGGLE_PERMANENT_TOPBAR'
 	});
 
+export const toggleHiddenControls = () =>
+	({
+		type : 'TOGGLE_HIDDEN_CONTROLS'
+	});
+
 export const setLastN = (lastN) =>
 	({
 		type    : 'SET_LAST_N',

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

app/src/reducers/settings.js

@@ -7,7 +7,8 @@ const initialState =
 	// low, medium, high, veryhigh, ultra
 	resolution          : window.config.defaultResolution || 'medium',
 	lastN               : 4,
-	permanentTopBar     : true
+	permanentTopBar     : true,
+	hiddenControls      : false
 };
 
 const settings = (state = initialState, action) =>
@@ -57,6 +58,13 @@ const settings = (state = initialState, action) =>
 			return { ...state, permanentTopBar };
 		}
 
+		case 'TOGGLE_HIDDEN_CONTROLS':
+		{
+			const hiddenControls = !state.hiddenControls;
+
+			return { ...state, hiddenControls };
+		}
+
 		case 'SET_VIDEO_RESOLUTION':
 		{
 			const { resolution } = action.payload;

app/src/translations/cn.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "高级模式",
 	"settings.permanentTopBar": "永久顶吧",
 	"settings.lastn": "可见视频数量",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "无法保存文件",
 	"filesharing.startingFileShare": "正在尝试共享文件",

app/src/translations/cs.json

@@ -116,6 +116,9 @@
 	"settings.layout": "Rozvržení místnosti",
 	"settings.selectRoomLayout": "Vyberte rozvržení místnosti",
 	"settings.advancedMode": "Pokočilý mód",
+	"settings.permanentTopBar": null,
+	"settings.lastn": null,
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Není možné uložit soubor",
 	"filesharing.startingFileShare": "Pokouším se sdílet soubor",

app/src/translations/de.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Erweiterter Modus",
 	"settings.permanentTopBar": "Permanente obere Leiste",
 	"settings.lastn": "Anzahl der sichtbaren Videos",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Fehler beim Speichern der Datei",
 	"filesharing.startingFileShare": "Starte Teilen der Datei",

app/src/translations/dk.json

@@ -113,13 +113,13 @@
 	"settings.audioOutput": "Audio output enhed",
 	"settings.selectAudioOutput": "Vælg lydudgangsenhed",
 	"settings.cantSelectAudioOutput": "Kan ikke vælge lydoutputenhed",
-
 	"settings.resolution": "Vælg din videoopløsning",
 	"settings.layout": "Møde visning",
 	"settings.selectRoomLayout": "Vælg møde visning",
 	"settings.advancedMode": "Avanceret tilstand",
 	"settings.permanentTopBar": "Permanent øverste linje",
 	"settings.lastn": "Antal synlige videoer",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Kan ikke gemme fil",
 	"filesharing.startingFileShare": "Forsøger at dele filen",

app/src/translations/el.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Προηγμένη λειτουργία",
 	"settings.permanentTopBar": "Μόνιμη μπάρα κορυφής",
 	"settings.lastn": "Αριθμός ορατών βίντεο",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Αδυναμία αποθήκευσης του αρχείου",
 	"filesharing.startingFileShare": "Προσπάθεια διαμοιρασμού αρχείου",

app/src/translations/en.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Advanced mode",
 	"settings.permanentTopBar": "Permanent top bar",
 	"settings.lastn": "Number of visible videos",
+	"settings.hiddenControls": "Hidden media controls",
 
 	"filesharing.saveFileError": "Unable to save file",
 	"filesharing.startingFileShare": "Attempting to share file",

app/src/translations/es.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Modo avanzado",
 	"settings.permanentTopBar": "Barra superior permanente",
 	"settings.lastn": "Cantidad de videos visibles",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "No ha sido posible guardar el fichero",
 	"filesharing.startingFileShare": "Intentando compartir el fichero",

app/src/translations/fr.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Mode avancé",
 	"settings.permanentTopBar": "Barre supérieure permanente",
 	"settings.lastn": "Nombre de vidéos visibles",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Impossible d'enregistrer le fichier",
 	"filesharing.startingFileShare": "Début du transfert de fichier",

app/src/translations/hr.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Napredne mogućnosti",
 	"settings.permanentTopBar": "Stalna gornja šipka",
 	"settings.lastn": "Broj vidljivih videozapisa",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Nije moguće spremiti datoteku",
 	"filesharing.startingFileShare": "Pokušaj dijeljenja datoteke",

app/src/translations/hu.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Részletes információk",
 	"settings.permanentTopBar": "Állandó felső sáv",
 	"settings.lastn": "A látható videók száma",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "A file-t nem sikerült elmenteni",
 	"filesharing.startingFileShare": "Fájl megosztása",

app/src/translations/it.json

@@ -118,6 +118,7 @@
 	"settings.advancedMode": "Modalità avanzata",
 	"settings.permanentTopBar": "Barra superiore permanente",
 	"settings.lastn": "Numero di video visibili",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Impossibile salvare file",
 	"filesharing.startingFileShare": "Tentativo di condivisione file",

app/src/translations/nb.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Avansert modus",
 	"settings.permanentTopBar": "Permanent topplinje",
 	"settings.lastn": "Antall videoer synlig",
+	"settings.hiddenControls": "Skjul media knapper",
 
 	"filesharing.saveFileError": "Klarte ikke å lagre fil",
 	"filesharing.startingFileShare": "Starter fildeling",

app/src/translations/pl.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Tryb zaawansowany",
 	"settings.permanentTopBar": "Stały górny pasek",
 	"settings.lastn": "Liczba widocznych uczestników (zdalnych)",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Nie można zapisać pliku",
 	"filesharing.startingFileShare": "Próba udostępnienia pliku",

app/src/translations/pt.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Modo avançado",
 	"settings.permanentTopBar": "Barra superior permanente",
 	"settings.lastn": "Número de vídeos visíveis",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Impossível de gravar o ficheiro",
 	"filesharing.startingFileShare": "Tentando partilha de ficheiro",

app/src/translations/ro.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Mod avansat",
 	"settings.permanentTopBar": "Bara de sus permanentă",
 	"settings.lastn": "Numărul de videoclipuri vizibile",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Încercarea de a salva fișierul a eșuat",
 	"filesharing.startingFileShare": "Partajarea fișierului",

app/src/translations/tr.json

@@ -116,6 +116,7 @@
 	"settings.advancedMode": "Detaylı mod",
 	"settings.permanentTopBar": "Üst barı kalıcı yap",
 	"settings.lastn": "İzlenebilir video sayısı",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Dosya kaydedilemiyor",
 	"filesharing.startingFileShare": "Paylaşılan dosyaya erişiliyor",

app/src/translations/uk.json

@@ -119,6 +119,7 @@
 	"settings.advancedMode": "Розширений режим",
 	"settings.permanentTopBar": "Постійний верхній рядок",
 	"settings.lastn": "Кількість видимих ​​відео",
+	"settings.hiddenControls": null,
 
 	"filesharing.saveFileError": "Неможливо зберегти файл",
 	"filesharing.startingFileShare": "Спроба поділитися файлом",