You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

middleware.js 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. // @flow
  2. import { StatusBar } from 'react-native';
  3. import { Immersive } from 'react-native-immersive';
  4. import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app';
  5. import { getCurrentConference } from '../../base/conference';
  6. import { Platform } from '../../base/react';
  7. import { MiddlewareRegistry, StateListenerRegistry } from '../../base/redux';
  8. import { _setImmersiveListener as _setImmersiveListenerA } from './actions';
  9. import { _SET_IMMERSIVE_LISTENER } from './actionTypes';
  10. /**
  11. * Middleware that captures conference actions and activates or deactivates the
  12. * full screen mode. On iOS it hides the status bar, and on Android it uses the
  13. * immersive mode:
  14. * https://developer.android.com/training/system-ui/immersive.html
  15. * In immersive mode the status and navigation bars are hidden and thus the
  16. * entire screen will be covered by our application.
  17. *
  18. * @param {Store} store - The redux store.
  19. * @returns {Function}
  20. */
  21. MiddlewareRegistry.register(store => next => action => {
  22. switch (action.type) {
  23. case _SET_IMMERSIVE_LISTENER:
  24. return _setImmersiveListenerF(store, next, action);
  25. case APP_WILL_MOUNT: {
  26. const result = next(action);
  27. store.dispatch(
  28. _setImmersiveListenerA(_onImmersiveChange.bind(undefined, store)));
  29. return result;
  30. }
  31. case APP_WILL_UNMOUNT:
  32. store.dispatch(_setImmersiveListenerA(undefined));
  33. break;
  34. }
  35. return next(action);
  36. });
  37. StateListenerRegistry.register(
  38. /* selector */ state => {
  39. const { audioOnly } = state['features/base/conference'];
  40. const conference = getCurrentConference(state);
  41. return conference ? !audioOnly : false;
  42. },
  43. /* listener */ fullScreen => _setFullScreen(fullScreen)
  44. );
  45. /**
  46. * Handler for Immersive mode changes. This will be called when Android's
  47. * immersive mode changes. This can happen without us wanting, so re-evaluate if
  48. * immersive mode is desired and reactivate it if needed.
  49. *
  50. * @param {Object} store - The redux store.
  51. * @private
  52. * @returns {void}
  53. */
  54. function _onImmersiveChange({ getState }) {
  55. const state = getState();
  56. const { appState } = state['features/background'];
  57. if (appState === 'active') {
  58. const { audioOnly } = state['features/base/conference'];
  59. const conference = getCurrentConference(state);
  60. const fullScreen = conference ? !audioOnly : false;
  61. _setFullScreen(fullScreen);
  62. }
  63. }
  64. /**
  65. * Activates/deactivates the full screen mode. On iOS it will hide the status
  66. * bar, and on Android it will turn immersive mode on.
  67. *
  68. * @param {boolean} fullScreen - True to set full screen mode, false to
  69. * deactivate it.
  70. * @private
  71. * @returns {void}
  72. */
  73. function _setFullScreen(fullScreen: boolean) {
  74. // XXX The React Native module Immersive is only implemented on Android and
  75. // throws on other platforms.
  76. if (Platform.OS === 'android') {
  77. fullScreen ? Immersive.on() : Immersive.off();
  78. } else {
  79. // On platforms other than Android go with whatever React Native itself
  80. // supports.
  81. StatusBar.setHidden(fullScreen, 'slide');
  82. }
  83. }
  84. /**
  85. * Notifies the feature filmstrip that the action
  86. * {@link _SET_IMMERSIVE_LISTENER} is being dispatched within a specific redux
  87. * store.
  88. *
  89. * @param {Store} store - The redux store in which the specified action is being
  90. * dispatched.
  91. * @param {Dispatch} next - The redux dispatch function to dispatch the
  92. * specified action to the specified store.
  93. * @param {Action} action - The redux action {@code _SET_IMMERSIVE_LISTENER}
  94. * which is being dispatched in the specified store.
  95. * @private
  96. * @returns {Object} The value returned by {@code next(action)}.
  97. */
  98. function _setImmersiveListenerF({ getState }, next, action) {
  99. // XXX The React Native module Immersive is only implemented on Android and
  100. // throws on other platforms.
  101. if (Platform.OS === 'android') {
  102. // Remove the old Immersive listener and add the new one.
  103. const { listener: oldListener } = getState()['features/full-screen'];
  104. const result = next(action);
  105. const { listener: newListener } = getState()['features/full-screen'];
  106. if (oldListener !== newListener) {
  107. oldListener && Immersive.removeImmersiveListener(oldListener);
  108. newListener && Immersive.addImmersiveListener(newListener);
  109. }
  110. return result;
  111. }
  112. return next(action);
  113. }