From afbb9e1d79c837c713a68d80a27bdafb3acc5377 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Mon, 18 Nov 2019 06:50:55 +0100 Subject: [PATCH] add fullscreen mode to app state to better handle suspend / resume (#82) * add fullscreen mode to app state to better handle suspend / resume * rename argument mode -> isFullscreen --- src/component/AppNavigator.js | 24 ++++++++++++++++++++- src/constants.js | 2 ++ src/page/file/index.js | 2 ++ src/page/file/view.js | 38 ++++++++++++++++----------------- src/redux/actions/settings.js | 11 ++++++++++ src/redux/reducers/settings.js | 6 ++++++ src/redux/selectors/settings.js | 5 +++++ 7 files changed, 68 insertions(+), 20 deletions(-) diff --git a/src/component/AppNavigator.js b/src/component/AppNavigator.js index e335cba..2d37527 100644 --- a/src/component/AppNavigator.js +++ b/src/component/AppNavigator.js @@ -33,6 +33,7 @@ import { DeviceEventEmitter, Linking, NativeModules, + StatusBar, TextInput, ToastAndroid, } from 'react-native'; @@ -50,7 +51,7 @@ import { selectHashChanged, selectUser, } from 'lbryinc'; -import { makeSelectClientSetting } from 'redux/selectors/settings'; +import { makeSelectClientSetting, selectFullscreenMode } from 'redux/selectors/settings'; import { decode as atob } from 'base-64'; import { dispatchNavigateBack, dispatchNavigateToUri, transformUrl } from 'utils/helper'; import AsyncStorage from '@react-native-community/async-storage'; @@ -435,6 +436,26 @@ class AppWithNavigationState extends React.Component { if (backgroundPlayEnabled || NativeModules.BackgroundMedia) { NativeModules.BackgroundMedia.hidePlaybackNotification(); } + + // check fullscreen mode and show / hide navigation bar accordingly + this.checkFullscreenMode(); + } + }; + + checkFullscreenMode = () => { + const { fullscreenMode } = this.props; + StatusBar.setHidden(fullscreenMode); + + if (fullscreenMode) { + // fullscreen, so change orientation to landscape mode + NativeModules.ScreenOrientation.lockOrientationLandscape(); + // hide the navigation bar (on devices that have the soft navigation bar) + NativeModules.UtilityModule.hideNavigationBar(); + } else { + // Switch back to portrait mode when the media is not fullscreen + NativeModules.ScreenOrientation.lockOrientationPortrait(); + // hide the navigation bar (on devices that have the soft navigation bar) + NativeModules.UtilityModule.showNavigationBar(); } }; @@ -489,6 +510,7 @@ const mapStateToProps = state => ({ emailVerifyErrorMessage: selectEmailVerifyErrorMessage(state), showNsfw: makeSelectClientSetting(SETTINGS.SHOW_NSFW)(state), user: selectUser(state), + fullscreenMode: selectFullscreenMode(state), }); export default connect(mapStateToProps)(AppWithNavigationState); diff --git a/src/constants.js b/src/constants.js index 6cbd629..d28be47 100644 --- a/src/constants.js +++ b/src/constants.js @@ -64,6 +64,8 @@ const Constants = { ACTION_CLEAR_PUBLISH_FORM_STATE: 'CLEAR_PUBLISH_FORM_STATE', ACTION_CLEAR_CHANNEL_FORM_STATE: 'CLEAR_CHANNEL_FORM_STATE', + ACTION_FULLSCREEN_MODE_TOGGLED: 'FULLSCREEN_MODE_TOGGLED', + ORIENTATION_HORIZONTAL: 'horizontal', ORIENTATION_VERTICAL: 'vertical', diff --git a/src/page/file/index.js b/src/page/file/index.js index 73846ac..4fd413a 100644 --- a/src/page/file/index.js +++ b/src/page/file/index.js @@ -45,6 +45,7 @@ import { doStopDownloadingFile, } from 'redux/actions/file'; import { doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer'; +import { doToggleFullscreenMode } from 'redux/actions/settings'; import { selectDrawerStack } from 'redux/selectors/drawer'; import FilePage from './view'; @@ -102,6 +103,7 @@ const perform = dispatch => ({ startDownload: (uri, outpoint, fileInfo) => dispatch(doStartDownload(uri, outpoint, fileInfo)), updateDownload: (uri, outpoint, fileInfo, progress) => dispatch(doUpdateDownload(uri, outpoint, fileInfo, progress)), completeDownload: (uri, outpoint, fileInfo) => dispatch(doCompleteDownload(uri, outpoint, fileInfo)), + toggleFullscreenMode: mode => dispatch(doToggleFullscreenMode(mode)), }); export default connect( diff --git a/src/page/file/view.js b/src/page/file/view.js index 053d527..883c5df 100644 --- a/src/page/file/view.js +++ b/src/page/file/view.js @@ -228,25 +228,25 @@ class FilePage extends React.PureComponent { } } - handleFullscreenToggle = mode => { - this.setState({ fullscreenMode: mode }); - StatusBar.setHidden(mode); - if (NativeModules.ScreenOrientation) { - if (mode) { - // fullscreen, so change orientation to landscape mode - NativeModules.ScreenOrientation.lockOrientationLandscape(); - if (NativeModules.UtilityModule) { - // hide the navigation bar (on devices that use have soft navigation bar) - NativeModules.UtilityModule.hideNavigationBar(); - } - } else { - // Switch back to portrait mode when the media is not fullscreen - NativeModules.ScreenOrientation.lockOrientationPortrait(); - if (NativeModules.UtilityModule) { - // hide the navigation bar (on devices that use have soft navigation bar) - NativeModules.UtilityModule.showNavigationBar(); - } - } + handleFullscreenToggle = isFullscreen => { + const { toggleFullscreenMode } = this.props; + this.setState({ fullscreenMode: isFullscreen }); + toggleFullscreenMode(isFullscreen); + + StatusBar.setHidden(isFullscreen); + + if (isFullscreen) { + // fullscreen, so change orientation to landscape mode + NativeModules.ScreenOrientation.lockOrientationLandscape(); + + // hide the navigation bar (on devices that have the soft navigation bar) + NativeModules.UtilityModule.hideNavigationBar(); + } else { + // Switch back to portrait mode when the media is not fullscreen + NativeModules.ScreenOrientation.lockOrientationPortrait(); + + // hide the navigation bar (on devices that have the soft navigation bar) + NativeModules.UtilityModule.showNavigationBar(); } }; diff --git a/src/redux/actions/settings.js b/src/redux/actions/settings.js index fa62473..9795f0d 100644 --- a/src/redux/actions/settings.js +++ b/src/redux/actions/settings.js @@ -38,3 +38,14 @@ export function doSetTimeItem(item) { }); }; } + +export function doToggleFullscreenMode(mode) { + return dispatch => { + dispatch({ + type: Constants.ACTION_FULLSCREEN_MODE_TOGGLED, + data: { + mode, + }, + }); + }; +} diff --git a/src/redux/reducers/settings.js b/src/redux/reducers/settings.js index cc602ec..2ddf0c9 100644 --- a/src/redux/reducers/settings.js +++ b/src/redux/reducers/settings.js @@ -6,6 +6,7 @@ const defaultState = { clientSettings: {}, sortByItemName: Constants.SORT_BY_HOT, timeItemName: Constants.TIME_WEEK, + fullscreenMode: false, }; reducers[ACTIONS.CLIENT_SETTING_CHANGED] = (state, action) => { @@ -29,6 +30,11 @@ reducers[Constants.ACTION_TIME_ITEM_CHANGED] = (state, action) => timeItemName: action.data.name, }); +reducers[Constants.ACTION_FULLSCREEN_MODE_TOGGLED] = (state, action) => + Object.assign({}, state, { + fullscreenMode: action.data.mode, + }); + export default function reducer(state = defaultState, action) { const handler = reducers[action.type]; if (handler) return handler(state, action); diff --git a/src/redux/selectors/settings.js b/src/redux/selectors/settings.js index 0618f46..d147c91 100644 --- a/src/redux/selectors/settings.js +++ b/src/redux/selectors/settings.js @@ -34,3 +34,8 @@ export const makeSelectClientSetting = setting => export const selectShowNsfw = makeSelectClientSetting(SETTINGS.SHOW_NSFW); export const selectKeepDaemonRunning = makeSelectClientSetting(SETTINGS.KEEP_DAEMON_RUNNING); + +export const selectFullscreenMode = createSelector( + selectState, + state => state.fullscreenMode +);