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

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

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',
 

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(

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

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,
+      },
+    });
+  };
+}

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

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
+);