@applicaster/zapp-react-dom-app/App/InteractionManager/index.js

// @flow
import * as React from "react";
import * as R from "ramda";

import {
  sendQuickBrickEvent,
  QUICK_BRICK_EVENTS,
} from "@applicaster/zapp-react-native-bridge/QuickBrick";

import {
  debounce,
  noop,
} from "@applicaster/zapp-react-native-utils/functionUtils";

import {
  keyCode,
  KEYS,
  ARROW_KEYS,
  focusManager,
  playerManager,
} from "@applicaster/zapp-react-native-utils/appUtils";

import {
  DisplayStateContext,
  DISPLAY_STATES,
} from "@applicaster/zapp-react-native-ui-components/Contexts/DisplayStateContext";

import { PlayerContentContext } from "@applicaster/zapp-react-dom-ui-components/Contexts";

import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";

type Props = {
  displayState: string,
  setDisplayState: string => void,
  setPlayerContent: ({} | null) => void,
  navigator: {
    goBack: () => void,
    canGoBack: () => boolean,
    replace: ({}) => void,
    currentRoute: string,
  },
  rivers: {},
};

type KeyCode = { code: string, keyCode: number | string };

const DEFAULT_TRANSPORT_CONTROLS_TIMEOUT = 5 * 1000;
const LONG_KEY_PRESS_TIMEOUT = 2 * 1000;

export function withInteractionManager(
  Component: React.ComponentType<any>
): React.ComponentType<any> {
  class InteractionManager extends React.Component<Props> {
    onKeyDown: KeyCode => void;
    onKeyUp: KeyCode => void;
    onKeyDownListener: KeyCode => void;
    onKeyUpListener: KeyCode => void;

    longKeyPressTimeout: any | null;
    timeout: any | null;

    constructor(props) {
      super(props);
      this.onKeyDown = this.onKeyDown.bind(this);
      this.onKeyDownListener = debounce({ fn: this.onKeyDown, context: this });
      this.onKeyUpListener = debounce({ fn: this.onKeyUp, context: this });

      this.longKeyPressTimeout = null;
    }

    componentDidMount() {
      window.addEventListener("keydown", this.onKeyDownListener);
      window.addEventListener("keyup", this.onKeyUpListener);
    }

    componentWillUnmount() {
      window.removeEventListener("keydown", this.onKeyDownListener);
      window.removeEventListener("keyup", this.onKeyUpListener);

      if (this.timeout) {
        this.clearTimeout();
      }
    }

    isHomeScreen() {
      const { navigator } = this.props;
      const { rivers } = this.props;

      const homeId = R.compose(
        R.prop("id"),
        R.find(R.prop("home")),
        R.values
      )(rivers);

      const homePath = `/river/${homeId}`;

      return homePath === navigator.currentRoute;
    }

    goToHome() {
      const { navigator } = this.props;
      const { rivers } = this.props;
      const homeRiver = R.find(R.propEq("home", true), R.values(rivers));

      navigator.replace(homeRiver);
    }

    resetHudTimeout() {
      const { setDisplayState } = this.props;

      if (this.timeout) {
        clearTimeout(this.timeout);
      }

      this.timeout = setTimeout(() => {
        setDisplayState(DISPLAY_STATES.PLAYER);
        this.timeout = null;
      }, DEFAULT_TRANSPORT_CONTROLS_TIMEOUT);
    }

    clearTimeout() {
      if (this.timeout) {
        clearTimeout(this.timeout);
        this.timeout = null;
      }
    }

    onKeyUp(event) {
      this.clearLongPressTimeout();
    }

    clearLongPressTimeout() {
      if (this.longKeyPressTimeout) {
        clearTimeout(this.longKeyPressTimeout);
        this.longKeyPressTimeout = null;
      }
    }

    runIfLongPress(action, delay = LONG_KEY_PRESS_TIMEOUT) {
      this.clearLongPressTimeout();

      this.longKeyPressTimeout = setTimeout(() => {
        (action || noop)();
        this.clearLongPressTimeout();
      }, delay);
    }

    onKeyDown(event) {
      const {
        displayState,
        setDisplayState,
        setPlayerContent,
        navigator,
      } = this.props;

      if (keyCode(event).matches(KEYS.Exit)) {
        this.runIfLongPress(
          sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND)
        );
      }

      /**
       When the player is displayed, we listen to Native Play / Pause / Stop
       buttons. Any other key press will display the transport controls
       */
      if (
        displayState === DISPLAY_STATES.PLAYER ||
        displayState === DISPLAY_STATES.HUD
      ) {
        this.resetHudTimeout();

        /**
         registering native keys for playback
         */
        if (keyCode(event).matches(KEYS.TogglePlayPause)) {
          const { playing } = playerManager.getState() || {};
          if (!playing) {
            return playerManager.togglePlayPause();
          }
        }

        if (keyCode(event).matches(KEYS.Play)) {
          return playerManager.play();
        }

        if (keyCode(event).matches(KEYS.Pause)) {
          setDisplayState(DISPLAY_STATES.HUD);
          return playerManager.pause();
        }

        if (keyCode(event).matches(KEYS.Stop)) {
          setDisplayState(DISPLAY_STATES.DEFAULT);
          setPlayerContent(null);
          navigator.goBack();
          return;
        }

        if (keyCode(event).matches(KEYS.Back)) {
          setDisplayState(DISPLAY_STATES.DEFAULT);
          setPlayerContent(null);
          navigator.goBack();
          return;
        }

        if (keyCode(event).matches(KEYS.Forward)) {
          setDisplayState(DISPLAY_STATES.HUD);
          return playerManager.forward();
        }

        if (keyCode(event).matches(KEYS.Rewind)) {
          setDisplayState(DISPLAY_STATES.HUD);
          return playerManager.rewind();
        }

        if (displayState === DISPLAY_STATES.PLAYER) {
          return setDisplayState(DISPLAY_STATES.HUD);
        }
      }

      /**
        When pressing backspace or the Native "Back" button:
        if on the transport controls: we show the player
        if on the player : we show the UI
        if on the UI : we exit the app
       */

      if (keyCode(event).matches(KEYS.Back)) {
        switch (displayState) {
          case DISPLAY_STATES.HUD:
            setDisplayState(DISPLAY_STATES.PLAYER);
            break;

          case DISPLAY_STATES.PLAYER:
            setDisplayState(DISPLAY_STATES.DEFAULT);
            break;

          case DISPLAY_STATES.DEFAULT:
            if (navigator.canGoBack()) {
              navigator.goBack();
            } else if (this.isHomeScreen()) {
              sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND);
            } else {
              this.goToHome();
            }
            break;

          default:
            break;
        }
      }

      if (keyCode(event).matches(KEYS.Enter)) {
        focusManager.press();
        return true;
      }

      if (keyCode(event).matchesAny(...ARROW_KEYS)) {
        focusManager.moveFocus(keyCode(event).direction());
        return true;
      }
    }

    render() {
      return <Component {...this.props} />;
    }
  }

  return R.compose(
    withNavigator,
    PlayerContentContext.withConsumer,
    DisplayStateContext.withConsumer
  )(InteractionManager);
}