Properly handle wakelock, fixes #237

app/src/RoomClient.js

@@ -199,6 +199,9 @@ export default class RoomClient
 		// @type {mediasoupClient.Device}
 		this._mediasoupDevice = null;
 
+		// Put the browser info into state
+		store.dispatch(meActions.setBrowser(device));
+
 		// Our WebTorrent client
 		this._webTorrent = null;
 
@@ -206,13 +209,10 @@ export default class RoomClient
 			store.dispatch(settingsActions.setVideoResolution(defaultResolution));
 
 		// Max spotlights
-		if (device.bowser.getPlatformType() === 'desktop')
+		if (device.platform === 'desktop')
 			this._maxSpotlights = lastN;
 		else
-		{
 			this._maxSpotlights = mobileLastN;
-			store.dispatch(meActions.setIsMobile());
-		}
 
 		store.dispatch(
 			settingsActions.setLastN(this._maxSpotlights));

app/src/actions/meActions.js

@@ -4,9 +4,10 @@ export const setMe = ({ peerId, loginEnabled }) =>
 		payload : { peerId, loginEnabled }
 	});
 
-export const setIsMobile = () =>
+export const setBrowser = (browser) =>
 	({
-		type : 'SET_IS_MOBILE'
+		type    : 'SET_BROWSER',
+		payload : { browser }
 	});
 
 export const loggedIn = (flag) =>

app/src/components/Containers/Me.js

@@ -385,7 +385,7 @@ const Me = (props) =>
 									</Fab>
 								</div>
 							</Tooltip>
-							{ !me.isMobile &&
+							{ me.browser.platform !== 'mobile' &&
 								<Tooltip title={screenTip} placement='left'>
 									<div>
 										<Fab

app/src/components/Containers/Peer.js

@@ -121,7 +121,7 @@ const Peer = (props) =>
 		advancedMode,
 		peer,
 		activeSpeaker,
-		isMobile,
+		browser,
 		micConsumer,
 		webcamConsumer,
 		screenConsumer,
@@ -260,7 +260,7 @@ const Peer = (props) =>
 							</div>
 						</Tooltip>
 
-						{ !isMobile &&
+						{ browser.platform !== 'mobile' &&
 							<Tooltip
 								title={intl.formatMessage({
 									id             : 'label.newWindow',
@@ -408,7 +408,7 @@ const Peer = (props) =>
 								}, 2000);
 							}}
 						>
-							{ !isMobile &&
+							{ browser.platform !== 'mobile' &&
 								<Tooltip
 									title={intl.formatMessage({
 										id             : 'label.newWindow',
@@ -509,7 +509,7 @@ Peer.propTypes =
 	screenConsumer           : appPropTypes.Consumer,
 	windowConsumer           : PropTypes.string,
 	activeSpeaker            : PropTypes.bool,
-	isMobile                 : PropTypes.bool,
+	browser                  : PropTypes.object.isRequired,
 	spacing                  : PropTypes.number,
 	style                    : PropTypes.object,
 	smallButtons             : PropTypes.bool,
@@ -530,7 +530,7 @@ const makeMapStateToProps = (initialState, { id }) =>
 			...getPeerConsumers(state, id),
 			windowConsumer : state.room.windowConsumer,
 			activeSpeaker  : id === state.room.activeSpeakerId,
-			isMobile       : state.me.isMobile
+			browser        : state.me.browser
 		};
 	};
 
@@ -565,7 +565,7 @@ export default withRoomContext(connect(
 				prev.consumers === next.consumers &&
 				prev.room.activeSpeakerId === next.room.activeSpeakerId &&
 				prev.room.windowConsumer === next.room.windowConsumer &&
-				prev.me.isMobile === next.me.isMobile
+				prev.me.browser === next.me.browser
 			);
 		}
 	}

app/src/components/Room.js

@@ -139,7 +139,7 @@ class Room extends React.PureComponent
 	{
 		const {
 			room,
-			isMobile,
+			browser,
 			advancedMode,
 			toolAreaOpen,
 			toggleToolArea,
@@ -204,7 +204,7 @@ class Room extends React.PureComponent
 					</Hidden>
 				</nav>
 
-				{ isMobile &&
+				{ browser.platform === 'mobile' && browser.os !== 'ios' &&
 					<WakeLock />
 				}
 
@@ -225,7 +225,7 @@ class Room extends React.PureComponent
 Room.propTypes =
 {
 	room               : appPropTypes.Room.isRequired,
-	isMobile           : PropTypes.bool.isRequired,
+	browser            : PropTypes.object.isRequired,
 	advancedMode       : PropTypes.bool.isRequired,
 	toolAreaOpen       : PropTypes.bool.isRequired,
 	setToolbarsVisible : PropTypes.func.isRequired,
@@ -237,7 +237,7 @@ Room.propTypes =
 const mapStateToProps = (state) =>
 	({
 		room         : state.room,
-		isMobile     : state.me.isMobile,
+		browser      : state.me.browser,
 		advancedMode : state.settings.advancedMode,
 		toolAreaOpen : state.toolarea.toolAreaOpen
 	});
@@ -263,7 +263,7 @@ export default connect(
 		{
 			return (
 				prev.room === next.room &&
-				prev.me.isMobile === next.me.isMobile &&
+				prev.me.browser === next.me.browser &&
 				prev.settings.advancedMode === next.settings.advancedMode &&
 				prev.toolarea.toolAreaOpen === next.toolarea.toolAreaOpen
 			);

app/src/deviceInfo.js

@@ -24,8 +24,10 @@ export default function()
 
 	return {
 		flag,
-		name    : browser.getBrowserName(),
+		os       : browser.getOSName(true), // ios, android, linux...
-		version : browser.getBrowserVersion(),
+		platform : browser.getPlatformType(true), // mobile, desktop, tablet
-		bowser  : browser
+		name     : browser.getBrowserName(),
+		version  : browser.getBrowserVersion(),
+		bowser   : browser
 	};
 }

app/src/reducers/me.js

@@ -2,7 +2,7 @@ const initialState =
 {
 	id                    : null,
 	picture               : null,
-	isMobile              : false,
+	browser               : null,
 	roles                 : [ 'normal' ], // Default role
 	canSendMic            : false,
 	canSendWebcam         : false,
@@ -39,9 +39,11 @@ const me = (state = initialState, action) =>
 			};
 		}
 
-		case 'SET_IS_MOBILE':
+		case 'SET_BROWSER':
 		{
-			return { ...state, isMobile: true };
+			const { browser } = action.payload;
+
+			return { ...state, browser };
 		}
 
 		case 'LOGGED_IN':