@applicaster/zapp-react-dom-app 12.0.0-rc.98 → 12.0.1

package/App/InteractionManager/index.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import * as R from "ramda";
 
+import { connectToStore } from "@applicaster/zapp-react-native-redux";
+
 import {
   QUICK_BRICK_EVENTS,
   sendQuickBrickEvent,
@@ -31,16 +33,21 @@ import {
 import { PlayerContentContext } from "@applicaster/zapp-react-dom-ui-components/Contexts";
 
 import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";
-import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
-import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+
+import {
+  confirmationDialogStore,
+  ConfirmationDialogState,
+} from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+
 import {
-  isVizioPlatform,
-  isSamsungPlatform,
   isLgPlatform,
+  isSamsungPlatform,
+  isVizioPlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { OnScreenKeyboard } from "@applicaster/zapp-react-dom-ui-components/Components/OnScreenKeyboard";
+import { KeyboardLongPressManager } from "@applicaster/zapp-react-dom-ui-components/Utils/KeyboardLongPressManager";
 
 const { withXray } = getXray();
 const globalAny: any = global;
@@ -63,712 +70,693 @@ type Props = {
     onRewindPressOut: () => void;
     onForwardPressOut: () => void;
   };
+  confirmDialog: typeof confirmationDialogStore;
 };
 
-type State = { isKeyboardVisible: boolean; keyboardInput: string };
+interface State {
+  isKeyboardVisible: boolean;
+  keyboardInput: string;
+  activeInputRef: HTMLInputElement | null;
+}
 
 type KeyCode = { code: string; keyCode: number | string };
 
 export const alertConfirmationMesage =
   "Are you sure you want to exit application?";
 
-export function withInteractionManager(Component: React.FC) {
-  class InteractionManager extends React.Component<Props, State> {
-    onKeyDownListener: (keyCode: KeyCode) => void;
-    onMouseDownListener: (event: MouseEvent) => void;
-    onMouseMoveListener: (event: MouseEvent) => void;
-    onScrollListener: (event: MouseEvent) => void;
+class InteractionManagerClass extends React.Component<Props, State> {
+  onKeyDownListener: (keyCode: KeyCode) => void;
+  onMouseDownListener: (event: MouseEvent) => void;
+  onMouseMoveListener: (event: MouseEvent) => void;
+  onScrollListener: (event: MouseEvent) => void;
+
+  private longPressDetector: KeyboardLongPressManager;
+  private longPressActive: boolean = false;
+  private timeout: any | null = null;
+  private sequenceTimeout: NodeJS.Timeout | null;
+  private userSequence: number[] = [];
+  private isDismissing = false;
+  private confirmDialog: ConfirmationDialogState =
+    confirmationDialogStore.getState();
+
+  state: State = {
+    isKeyboardVisible: false,
+    keyboardInput: "",
+    activeInputRef: null,
+  };
 
-    longKeyPressTimeout: any | null;
-    longPressActive: boolean;
-    timeout: any | null;
-    sequenceTimeout: NodeJS.Timeout | null; // timeoutID
-    userSequence: number[] = [];
-    confirmDialog: any;
-    isDismissing = false;
+  constructor(props) {
+    super(props);
+
+    this.onMouseMoveListener = debounce({
+      fn: this.onMouseMove,
+      context: this,
+    });
+
+    this.onScrollListener = debounce({
+      fn: this.onScroll,
+      wait: 100,
+      context: this,
+    });
+
+    this.onMouseDownListener = debounce({
+      fn: this.onMouseDown,
+      context: this,
+    });
+
+    this.onKeyDownListener = this.onKeyDown.bind(this);
+    this.resetHudTimeout = this.resetHudTimeout.bind(this);
+    this.cursorVisibilityChange = this.cursorVisibilityChange.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onScroll = this.onScroll.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onKeyboardStateChange = this.onKeyboardStateChange.bind(this);
+    this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
+    this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
+    this.performExit = this.performExit.bind(this);
+    this.handleInputFocus = this.handleInputFocus.bind(this);
+    this.handleInputBlur = this.handleInputBlur.bind(this);
+    this.handleKeyboardInput = this.handleKeyboardInput.bind(this);
+    this.handleKeyboardDismiss = this.handleKeyboardDismiss.bind(this);
+    this.onKeyDownListener = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
+    this.onMouseMoveListener = this.onMouseMove.bind(this);
+    this.onScrollListener = this.onScroll.bind(this);
+    this.onMouseDownListener = this.onMouseDown.bind(this);
+    this.onKeyboardStateChange = this.onKeyboardStateChange.bind(this);
+    this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
+    this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
+
+    this.confirmDialog.setConfirmAction(this.performExit);
+    this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
+    this.longPressDetector = new KeyboardLongPressManager();
+  }
 
-    constructor(props) {
-      super(props);
+  componentDidMount() {
+    window.addEventListener("keydown", this.onKeyDownListener);
+    window.addEventListener("keyup", this.onKeyUp);
+    window.addEventListener("mousemove", this.onMouseMoveListener);
 
-      this.onKeyDownListener = this.onKeyDown.bind(this);
+    document.addEventListener("wheel", this.onScrollListener, {
+      passive: true,
+    });
 
-      this.state = {
-        isKeyboardVisible: false,
-        keyboardInput: "",
-      };
+    document.addEventListener("mousedown", this.onMouseDownListener);
 
-      this.onMouseMoveListener = debounce({
-        fn: this.onMouseMove,
-        context: this,
-      });
+    document.addEventListener(
+      "keyboardStateChange",
+      this.onKeyboardStateChange,
+      false
+    );
 
-      this.onScrollListener = debounce({
-        fn: this.onScroll,
-        wait: 100,
-        context: this,
-      });
+    document.addEventListener("focusin", this.handleInputFocus);
 
-      this.onMouseDownListener = debounce({
-        fn: this.onMouseDown,
-        context: this,
-      });
+    document.addEventListener(
+      "cursorStateChange",
+      this.cursorVisibilityChange,
+      false
+    );
 
-      this.longKeyPressTimeout = null;
-      this.longPressActive = false;
-      this.confirmDialog = confirmationDialogStore.getState();
-      this.resetHudTimeout = this.resetHudTimeout.bind(this);
-      this.cursorVisibilityChange = this.cursorVisibilityChange.bind(this);
-      this.onKeyDown = this.onKeyDown.bind(this);
-      this.onKeyUp = this.onKeyUp.bind(this);
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onScroll = this.onScroll.bind(this);
-      this.onMouseDown = this.onMouseDown.bind(this);
-      this.onKeyboardStateChange = this.onKeyboardStateChange.bind(this);
-      this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
-      this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
-      this.performExit = this.performExit.bind(this);
-      this.handleInputFocus = this.handleInputFocus.bind(this);
-      this.handleInputBlur = this.handleInputBlur.bind(this);
-      this.handleKeyboardInput = this.handleKeyboardInput.bind(this);
-      this.handleKeyboardDismiss = this.handleKeyboardDismiss.bind(this);
-
-      this.confirmDialog.setConfirmAction(this.performExit);
-      this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
-    }
+    window.addEventListener("onLongPress", this.handleLongPress.bind(this));
 
-    componentDidMount() {
-      window.addEventListener("keydown", this.onKeyDownListener);
-      window.addEventListener("keyup", this.onKeyUp);
-      window.addEventListener("mousemove", this.onMouseMoveListener);
+    window.addEventListener(
+      "onLongPressRelease",
+      this.handleLongPressRelease.bind(this)
+    );
+  }
 
-      document.addEventListener("wheel", this.onScrollListener, {
-        passive: true,
-      });
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.onKeyDownListener);
+    window.removeEventListener("keyup", this.onKeyUp);
+    document.removeEventListener("wheel", this.onScrollListener);
 
-      document.addEventListener("mousedown", this.onMouseDownListener);
+    document.removeEventListener(
+      "cursorStateChange",
+      this.cursorVisibilityChange
+    );
 
-      document.addEventListener(
-        "keyboardStateChange",
-        this.onKeyboardStateChange,
-        false
-      );
+    document.removeEventListener("focusin", this.handleInputFocus);
 
-      document.addEventListener("focusin", this.handleInputFocus);
+    document.removeEventListener("mousedown", this.onMouseDownListener);
 
-      document.addEventListener(
-        "cursorStateChange",
-        this.cursorVisibilityChange,
-        false
-      );
+    if (this.timeout) {
+      this.clearTimeout();
     }
 
-    componentWillUnmount() {
-      window.removeEventListener("keydown", this.onKeyDownListener);
-      window.removeEventListener("keyup", this.onKeyUp);
-      document.removeEventListener("wheel", this.onScrollListener);
-
-      document.removeEventListener(
-        "cursorStateChange",
-        this.cursorVisibilityChange
-      );
+    this.isDismissing = false;
+    this.longPressDetector.cleanup();
+    window.removeEventListener("onLongPress", this.handleLongPress);
 
-      document.removeEventListener("focusin", this.handleInputFocus);
+    window.removeEventListener(
+      "onLongPressRelease",
+      this.handleLongPressRelease
+    );
+  }
 
-      document.removeEventListener("mousedown", this.onMouseDownListener);
+  performExit() {
+    if (isSamsungPlatform()) {
+      this.onConfirmDialogClose();
+      sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND);
+    }
 
-      if (this.timeout) {
-        this.clearTimeout();
-      }
+    if (isLgPlatform()) {
+      // webOS recommend to use this method when implemention a custom exit
+      globalAny.close();
+    }
 
-      this.isDismissing = false;
+    if (isVizioPlatform()) {
+      window?.VIZIO?.exitApplication();
     }
+  }
 
-    performExit() {
-      if (isSamsungPlatform()) {
-        this.onConfirmDialogClose();
-        sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND);
-      }
+  handleWebOsBack() {
+    const systemBack = globalAny?.webOS?.platformBack;
 
-      if (isLgPlatform()) {
-        // webOS recommend to use this method when implemention a custom exit
-        globalAny.close();
-      }
+    if (systemBack) {
+      systemBack();
+    } else {
+      /**
+       * In case webOS failed to show the exit pop-up, we show a regular promtp as fallback
+       */
+      showConfirmationDialog({
+        title: "",
+        message: alertConfirmationMesage,
+        confirmCompletion: this.performExit,
+      });
+    }
+  }
 
-      if (isVizioPlatform()) {
-        window?.VIZIO?.exitApplication();
+  /**
+   * This methods sends the app to background in whatever way is appropriate for each platform
+   * In the case of Tizen it shows a custom dialog on confirm it exits the app
+   * WebOS behavior depends on the SDK version, WebOS 4 would pull up the launcher menu
+   * following versions would show a native exit prompt
+   */
+  platformBack() {
+    try {
+      // TODO: temporary hack until this code is refactored
+      if (isSamsungPlatform() || isVizioPlatform()) {
+        const { isDialogVisible } = confirmationDialogStore.getState();
+
+        if (isDialogVisible) {
+          this.onConfirmDialogClose();
+        } else {
+          showConfirmationDialog({
+            title: "",
+            message: alertConfirmationMesage,
+            confirmCompletion: this.performExit,
+            cancelCompletion: this.onConfirmDialogClose,
+          });
+        }
+      } else if (isLgPlatform()) {
+        this.handleWebOsBack();
       }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn("Failed to execute platformBack", e);
     }
+  }
 
-    handleWebOsBack() {
-      const systemBack = globalAny?.webOS?.platformBack;
+  cursorVisibilityChange(event) {
+    const visible = event.detail.visibility;
+    const { setDisplayState, displayState } = this.props;
 
-      if (systemBack) {
-        systemBack();
-      } else {
-        /**
-         * In case webOS failed to show the exit pop-up, we show a regular promtp as fallback
-         */
-        showConfirmationDialog({
-          title: "",
-          message: alertConfirmationMesage,
-          confirmCompletion: this.performExit,
-        });
-      }
+    if (visible && displayState === DISPLAY_STATES.PLAYER) {
+      setDisplayState(DISPLAY_STATES.HUD);
+      this.resetHudTimeout();
     }
+  }
 
-    /**
-     * This methods sends the app to background in whatever way is appropriate for each platform
-     * In the case of Tizen it shows a custom dialog on confirm it exits the app
-     * WebOS behavior depends on the SDK version, WebOS 4 would pull up the launcher menu
-     * following versions would show a native exit prompt
-     */
-    platformBack() {
-      try {
-        // TODO: temporary hack until this code is refactored
-        if (isSamsungPlatform() || isVizioPlatform()) {
-          const { isDialogVisible } = confirmationDialogStore.getState();
+  onMouseMove() {
+    const { setDisplayState, displayState } = this.props;
 
-          if (isDialogVisible) {
-            this.onConfirmDialogClose();
-          } else {
-            showConfirmationDialog({
-              title: "",
-              message: alertConfirmationMesage,
-              confirmCompletion: this.performExit,
-              cancelCompletion: this.onConfirmDialogClose,
-            });
-          }
-        } else if (isLgPlatform()) {
-          this.handleWebOsBack();
-        }
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.warn("Failed to execute platformBack", e);
-      }
+    if (displayState === DISPLAY_STATES.PLAYER) {
+      setDisplayState(DISPLAY_STATES.HUD);
+      this.resetHudTimeout();
     }
+  }
 
-    cursorVisibilityChange(event) {
-      const visible = event.detail.visibility;
-      const { setDisplayState, displayState } = this.props;
+  isHomeScreen() {
+    const { navigator } = this.props;
+    const { rivers } = this.props;
 
-      if (visible && displayState === DISPLAY_STATES.PLAYER) {
-        setDisplayState(DISPLAY_STATES.HUD);
-        this.resetHudTimeout();
-      }
-    }
+    const homeId = R.compose(
+      R.prop("id"),
+      R.find(R.prop("home")),
+      R.values
+    )(rivers);
 
-    onMouseMove() {
-      const { setDisplayState, displayState } = this.props;
+    const homePath = `/river/${homeId}`;
 
-      if (displayState === DISPLAY_STATES.PLAYER) {
-        setDisplayState(DISPLAY_STATES.HUD);
-        this.resetHudTimeout();
-      }
-    }
+    return homePath === navigator.currentRoute;
+  }
 
-    isHomeScreen() {
-      const { navigator } = this.props;
-      const { rivers } = this.props;
+  goToHome() {
+    const { navigator } = this.props;
+    const { rivers } = this.props;
+    const homeRiver = R.find(R.propEq("home", true), R.values(rivers));
 
-      const homeId = R.compose(
-        R.prop("id"),
-        R.find(R.prop("home")),
-        R.values
-      )(rivers);
+    navigator.replace(homeRiver);
+  }
 
-      const homePath = `/river/${homeId}`;
+  resetHudTimeout() {
+    const { resetHudTimer = noop } = this.props;
 
-      return homePath === navigator.currentRoute;
+    resetHudTimer?.();
+  }
+
+  clearTimeout() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
     }
+  }
 
-    goToHome() {
-      const { navigator } = this.props;
-      const { rivers } = this.props;
-      const homeRiver = R.find(R.propEq("home", true), R.values(rivers));
+  cancelHudTimeout() {
+    this.resetHudTimeout();
+  }
 
-      navigator.replace(homeRiver);
+  onKeyUp(event: KeyboardEvent) {
+    if (this.keySupportsLongPress(event)) {
+      this.longPressDetector.endKeyPressMonitoring(event.code);
     }
+  }
 
-    resetHudTimeout() {
-      const { resetHudTimer = noop } = this.props;
+  onKeyDown(event) {
+    const { displayState, setDisplayState, navigator } = this.props;
+    const { isKeyboardVisible } = this.state;
 
-      resetHudTimer?.();
-    }
+    const { isDialogVisible } = confirmationDialogStore.getState();
 
-    clearTimeout() {
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-        this.timeout = null;
+    if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
+      if (keyCode(event).matchesAny("Escape", "Back")) {
+        this.handleKeyboardDismiss();
       }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      return;
     }
 
-    clearLongPressTimeout() {
-      if (this.longKeyPressTimeout) {
-        clearTimeout(this.longKeyPressTimeout);
-        this.longKeyPressTimeout = null;
-      }
+    if (this.keySupportsLongPress(event)) {
+      this.longPressDetector.monitorKeyPress(event.code, event);
     }
 
+    // None of the logic below should be executed for repeated keys
+    if (event.repeat) return;
+
     /**
-     * If the keySupportsLongPress this method is called on longpress of key
-     * Register your longpress handlers here, and make sure to add it to list of supported keys
+     When the player is displayed, we listen to Native Play / Pause / Stop
+     buttons. Any other key press will display the transport controls
      */
-    onLongPress(event) {
-      this.longPressActive = true;
-      // Legacy way of determining whether controls are being displayed
-      // Or if the player is in a playback state.
-      const { displayState } = this.props;
-      const playerState = displayState === DISPLAY_STATES.PLAYER;
-      const hudState = displayState === DISPLAY_STATES.HUD;
-      const playbackState = playerState || hudState;
-
-      switch (event.code) {
-        case KEYS.Back.code:
-          // If you longpress the back button we probably want to exit
-          this.platformBack();
+    if (
+      displayState === DISPLAY_STATES.PLAYER ||
+      displayState === DISPLAY_STATES.HUD
+    ) {
+      /**
+       registering native keys for playback
+       */
+      if (keyCode(event).matches(KEYS.TogglePlayPause)) {
+        const { playing } = playerManager.getState() || {};
 
-          break;
+        if (!playing) {
+          return playerManager.togglePlayPause();
+        }
+      }
 
-        case KEYS.Enter.code:
-          focusManager.longPress();
+      if (keyCode(event).matches(KEYS.Play)) {
+        return playerManager.play();
+      }
 
-          break;
+      if (keyCode(event).matches(KEYS.Pause)) {
+        setDisplayState(DISPLAY_STATES.HUD);
 
-        case KEYS.Forward.code:
-          playbackState && this.props.seekMethods.onForwardLongPress();
+        return playerManager.pause();
+      }
 
-          break;
+      if (keyCode(event).matches(KEYS.Stop)) {
+        setDisplayState(DISPLAY_STATES.DEFAULT);
+        navigator.goBack();
 
-        case KEYS.Rewind.code:
-          playbackState && this.props.seekMethods.onRewindLongPress();
+        return;
+      }
 
-          break;
+      if (keyCode(event).matches(KEYS.Forward)) {
+        setDisplayState(DISPLAY_STATES.HUD);
+        this.props.seekMethods.onForwardPress();
 
-        default:
-          break;
+        return;
+      }
+
+      if (keyCode(event).matches(KEYS.Rewind)) {
+        setDisplayState(DISPLAY_STATES.HUD);
+        this.props.seekMethods.onRewindPress();
+
+        return;
       }
     }
 
     /**
-     * If the keySupportsLongPress this method is called on keyup of a longpress key
-     * If you need to handle the release or keyup of a longpress key register the handler here
+     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
      */
-    onLongPressRelease(event) {
-      this.longPressActive = false;
-      this.resetHudTimeout();
 
-      focusManager.pressOut();
-
-      switch (event.code) {
-        case KEYS.Forward.code:
-          this.props.seekMethods.onForwardPressOut();
+    if (
+      keyCode(event).matchesAny(
+        KEYS.Back,
+        KEYS.Escape,
+        KEYS.EscapeDevice,
+        KEYS.Backspace
+      )
+    ) {
+      switch (displayState) {
+        case DISPLAY_STATES.DEFAULT:
+        case DISPLAY_STATES.PLAYER:
+          if (isDialogVisible) {
+            this.onConfirmDialogClose();
+          } else if (navigator.canGoBack()) {
+            navigator.goBack();
+          } else if (this.isHomeScreen()) {
+            this.platformBack();
+          } else if (navigator.currentRoute.includes("hook")) {
+            // If code reaches this block navigator cant go back, it is not home,
+            // and this is a login plugin that was pushed on top of the home
+            // Treat it like a home screen and run platformBack()
+            const entryData = navigator?.data?.entry;
+            const isHookInHomescreen = entryData?.payload?.home;
+
+            const isHookFlowBlocker =
+              entryData?.hookPlugin?.module?.isFlowBlocker();
+
+            if (isHookInHomescreen && isHookFlowBlocker) {
+              this.platformBack();
+            } else {
+              navigator.goBack(false, true);
+            }
+          } else {
+            this.goToHome();
+          }
 
           break;
-
-        case KEYS.Rewind.code:
-          this.props.seekMethods.onForwardPressOut();
-
+        case DISPLAY_STATES.HUD:
+          // IF transport controls are open, close them instead of closing player
+          setDisplayState(DISPLAY_STATES.PLAYER);
           break;
-
         default:
+          setDisplayState(DISPLAY_STATES.PLAYER);
           break;
       }
     }
 
-    /**
-     * Resets the sequence of keys we captured.
-     * Clear ensures that we don't interpret regular interactions
-     * as a sequence used to unlock certain features
-     */
-    resetSequenceTimeout() {
-      const SEQUENCE_ENTRY_TIME = 1900;
-
-      if (this.sequenceTimeout) {
-        // Start timer over
-        clearTimeout(this.sequenceTimeout);
+    if (keyCode(event).matches(KEYS.Enter)) {
+      if (displayState === DISPLAY_STATES.PLAYER) {
+        setDisplayState(DISPLAY_STATES.HUD);
+      } else {
+        focusManager.press();
       }
 
-      this.sequenceTimeout = setTimeout(() => {
-        // User needs to complete sequence before SEQUENCE_ENTRY_TIME
-        // or we set userSequence, and prev sequenceTimeout to empty values
-        this.sequenceTimeout = null;
-        this.userSequence = [];
-      }, SEQUENCE_ENTRY_TIME);
+      return true;
     }
 
-    /**
-     * If a certain sequence of keys are pressed we enable special menus or settings
-     * Each supported sequence can be stored as a constant
-     */
-    checkSequence(key) {
-      const SINK_SEQUENCE = [
-        KEYS.ArrowUp.keyCode,
-        KEYS.ArrowUp.keyCode,
-        KEYS.ArrowDown.keyCode,
-        KEYS.ArrowDown.keyCode,
-        KEYS.ArrowLeft.keyCode,
-        KEYS.ArrowRight.keyCode,
-        KEYS.ArrowLeft.keyCode,
-        KEYS.ArrowRight.keyCode,
-      ];
-
-      this.resetSequenceTimeout();
-      this.userSequence.push(key);
-
-      // Remember [1,2,3] !== [1,2,3] in js, so string comparison is better
-      const shouldAddSink =
-        this.userSequence.toString() === SINK_SEQUENCE.toString();
-
-      if (shouldAddSink) {
-        this.props.xray.addRemoteSink({});
-      }
-    }
-
-    /**
-     * Determines whether the key supports or handles longpress
-     * At the moment the only keys that support are the ones defined in
-     * supportedEvents array. This logic just prevents us from registering timeouts for every key
-     */
-    keySupportsLongPress(event): boolean {
-      const supportedEvents = [
-        KEYS.Back,
-        KEYS.Enter,
-        KEYS.Rewind,
-        KEYS.Forward,
-      ];
-
-      const eventMatcher = R.compose(R.prop("matches"), keyCode)(event);
+    if (keyCode(event).matches(KEYS.Exit)) {
+      if (isSamsungPlatform() || shouldUseOnScreenKeyboard()) {
+        this.performExit();
 
-      const supportsLongPress = R.compose(
-        R.any(R.equals(true)),
-        R.map(eventMatcher)
-      )(supportedEvents);
+        return;
+      }
 
-      return supportsLongPress;
+      this.platformBack();
     }
 
-    onKeyUp(event: KeyboardEvent) {
-      // If this is a supported longpress key we need to clear the timeout and handle release of key
-      // This logic is handled by onLongPressRelease
-      if (this.keySupportsLongPress(event)) {
-        if (this.longPressActive) {
-          this.onLongPressRelease(event);
-        } else {
-          this.clearLongPressTimeout();
-        }
+    if (
+      keyCode(event).matchesAny(...ARROW_KEYS) &&
+      !this.state.isKeyboardVisible
+    ) {
+      if (displayState === DISPLAY_STATES.PLAYER) {
+        setDisplayState(DISPLAY_STATES.HUD);
       }
-    }
 
-    onKeyDown(event) {
-      const { displayState, setDisplayState, navigator } = this.props;
-      const { isKeyboardVisible } = this.state;
+      this.checkSequence(event.keyCode);
 
-      const { isDialogVisible } = confirmationDialogStore.getState();
+      const direction = keyCode(event).direction();
 
-      // If this is a supported longpress key we need to set the timeout and handle the longpress
-      if (this.keySupportsLongPress(event)) {
-        this.longKeyPressTimeout = setTimeout(() => {
-          this.onLongPress(event);
-        }, LONG_KEY_PRESS_TIMEOUT);
+      if (!isDialogVisible || !["up", "down"].includes(direction.value)) {
+        focusManager.moveFocus(direction);
       }
 
-      if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
-        if (keyCode(event).matchesAny("Escape", "Back")) {
-          event.preventDefault();
-          event.stopPropagation();
-          this.handleKeyboardDismiss();
-
-          return;
-        }
+      if (!isDialogVisible) {
+        // run focus recovery on user interaction attempt
+        // probably we failed to set initial focus for some reason
+        focusManager.recoverFocus();
       }
 
-      /**
-       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
       ) {
-        /**
-         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);
-          navigator.goBack();
-
-          return;
-        }
-
-        if (keyCode(event).matches(KEYS.Forward)) {
-          setDisplayState(DISPLAY_STATES.HUD);
-          this.props.seekMethods.onForwardPress();
-
-          return;
-        }
-
-        if (keyCode(event).matches(KEYS.Rewind)) {
-          setDisplayState(DISPLAY_STATES.HUD);
-          this.props.seekMethods.onRewindPress();
-
-          return;
-        }
+        this.resetHudTimeout();
       }
 
-      /**
-        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
-       */
+      return true;
+    }
+  }
 
-      if (
-        keyCode(event).matchesAny(
-          KEYS.Back,
-          KEYS.Escape,
-          KEYS.EscapeDevice,
-          KEYS.Backspace
-        )
-      ) {
-        switch (displayState) {
-          case DISPLAY_STATES.DEFAULT:
-          case DISPLAY_STATES.PLAYER:
-            if (isDialogVisible) {
-              this.onConfirmDialogClose();
-            } else if (navigator.canGoBack()) {
-              navigator.goBack();
-            } else if (this.isHomeScreen()) {
-              this.platformBack();
-            } else if (navigator.currentRoute.includes("hook")) {
-              // If code reaches this block navigator cant go back, it is not home,
-              // and this is a login plugin that was pushed on top of the home
-              // Treat it like a home screen and run platformBack()
-              const entryData = navigator?.data?.entry;
-              const isHookInHomescreen = entryData?.payload?.home;
-
-              const isHookFlowBlocker =
-                entryData?.hookPlugin?.module?.isFlowBlocker();
-
-              if (isHookInHomescreen && isHookFlowBlocker) {
-                this.platformBack();
-              } else {
-                navigator.goBack(false, true);
-              }
-            } else {
-              this.goToHome();
-            }
+  onScroll(event) {
+    const { displayState } = this.props;
 
-            break;
-          case DISPLAY_STATES.HUD:
-            // IF transport controls are open, close them instead of closing player
-            setDisplayState(DISPLAY_STATES.PLAYER);
-            break;
-          default:
-            setDisplayState(DISPLAY_STATES.PLAYER);
-            break;
-        }
-      }
+    const deltaY = event?.deltaY;
 
-      if (keyCode(event).matches(KEYS.Enter)) {
-        if (displayState === DISPLAY_STATES.PLAYER) {
-          setDisplayState(DISPLAY_STATES.HUD);
-        } else {
-          focusManager.press();
-        }
+    const DIRECTION = {
+      axis: "y",
+      isHorizontal: false,
+      isVertical: true,
+      value: "",
+    };
 
-        return true;
-      }
+    if (deltaY > 0) {
+      DIRECTION.value = isLgPlatform() ? "down" : "up";
+    } else if (deltaY < 0) {
+      DIRECTION.value = isLgPlatform() ? "up" : "down";
+    }
 
-      if (keyCode(event).matches(KEYS.Exit)) {
-        if (isSamsungPlatform() || shouldUseOnScreenKeyboard()) {
-          this.performExit();
+    if (
+      displayState === DISPLAY_STATES.PLAYER ||
+      displayState === DISPLAY_STATES.HUD
+    ) {
+      this.resetHudTimeout();
+    } else {
+      focusManager.moveFocus(DIRECTION);
+    }
+  }
 
-          return;
-        }
+  onMouseDown(event) {
+    const { button } = event;
+    const { displayState } = this.props;
 
-        this.platformBack();
-      }
+    if (
+      button === 1 && // number 1 represents press on the scroll wheel
+      (displayState === DISPLAY_STATES.PLAYER ||
+        displayState === DISPLAY_STATES.HUD)
+    ) {
+      this.resetHudTimeout();
+    }
+  }
 
-      if (
-        keyCode(event).matchesAny(...ARROW_KEYS) &&
-        !this.state.isKeyboardVisible
-      ) {
-        if (displayState === DISPLAY_STATES.PLAYER) {
-          setDisplayState(DISPLAY_STATES.HUD);
-        }
+  onKeyboardStateChange(event) {
+    this.setState({ isKeyboardVisible: event.visibility });
+  }
 
-        this.checkSequence(event.keyCode);
+  onConfirmDialogOpen() {
+    this.confirmDialog.showDialog();
+  }
 
-        const direction = keyCode(event).direction();
+  onConfirmDialogClose() {
+    this.confirmDialog.hideDialog();
 
-        if (!isDialogVisible || !["up", "down"].includes(direction.value)) {
-          focusManager.moveFocus(direction);
-        }
+    // restore initial focus after closing dialog
+    focusManager.setInitialFocus();
+  }
 
-        if (!isDialogVisible) {
-          // run focus recovery on user interaction attempt
-          // probably we failed to set initial focus for some reason
-          focusManager.recoverFocus();
-        }
+  handleInputFocus = (event: FocusEvent) => {
+    if (!shouldUseOnScreenKeyboard()) return;
+    const target = event.target as HTMLInputElement;
 
-        if (
-          displayState === DISPLAY_STATES.PLAYER ||
-          displayState === DISPLAY_STATES.HUD
-        ) {
-          this.resetHudTimeout();
-        }
+    if (this.isDismissing) return;
 
-        return true;
-      }
+    if (
+      (target.tagName === "INPUT" && target.type === "text") ||
+      target.tagName === "TEXTAREA"
+    ) {
+      this.setState({
+        isKeyboardVisible: true,
+        keyboardInput: target.value || "",
+        activeInputRef: target,
+      });
     }
+  };
 
-    onScroll(event) {
-      const { displayState } = this.props;
-
-      const deltaY = event?.deltaY;
+  handleInputBlur(event: FocusEvent) {
+    if (!shouldUseOnScreenKeyboard()) return;
 
-      const DIRECTION = {
-        axis: "y",
-        isHorizontal: false,
-        isVertical: true,
-        value: "",
-      };
+    const target = event.target as HTMLElement;
 
-      if (deltaY > 0) {
-        DIRECTION.value = isLgPlatform() ? "down" : "up";
-      } else if (deltaY < 0) {
-        DIRECTION.value = isLgPlatform() ? "up" : "down";
-      }
+    if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+      const relatedTarget = event.relatedTarget as HTMLElement;
 
       if (
-        displayState === DISPLAY_STATES.PLAYER ||
-        displayState === DISPLAY_STATES.HUD
+        !relatedTarget ||
+        (relatedTarget.tagName !== "INPUT" &&
+          relatedTarget.tagName !== "TEXTAREA")
       ) {
-        this.resetHudTimeout();
-      } else {
-        focusManager.moveFocus(DIRECTION);
+        this.setState({ isKeyboardVisible: false });
       }
     }
+  }
 
-    onMouseDown(event) {
-      const { button } = event;
-      const { displayState } = this.props;
+  handleKeyboardDismiss = () => {
+    this.isDismissing = true;
 
-      if (
-        button === 1 && // number 1 represents press on the scroll wheel
-        (displayState === DISPLAY_STATES.PLAYER ||
-          displayState === DISPLAY_STATES.HUD)
-      ) {
-        this.resetHudTimeout();
+    this.setState(
+      {
+        isKeyboardVisible: false,
+        keyboardInput: "",
+        activeInputRef: null,
+      },
+      () => {
+        this.isDismissing = false;
       }
-    }
+    );
+  };
 
-    onKeyboardStateChange(event) {
-      this.setState({ isKeyboardVisible: event.visibility });
-    }
+  handleKeyboardInput = (value: string) => {
+    const { activeInputRef } = this.state;
 
-    onConfirmDialogOpen() {
-      this.confirmDialog.showDialog();
-    }
+    if (activeInputRef) {
+      // Update the input's value
+      activeInputRef.value = value;
 
-    onConfirmDialogClose() {
-      this.confirmDialog.hideDialog();
+      // Dispatch keyboard update event
+      const keyboardEvent = new CustomEvent("keyboardUpdate", {
+        detail: { value },
+      });
 
-      // restore initial focus after closing dialog
-      focusManager.setInitialFocus();
+      document.dispatchEvent(keyboardEvent);
     }
 
-    handleInputFocus = (event: FocusEvent) => {
-      if (!shouldUseOnScreenKeyboard()) return;
-      const target = event.target as HTMLElement;
-
-      if (this.isDismissing) {
-        return;
-      }
+    this.setState({ keyboardInput: value });
+  };
 
-      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-        this.setState({
-          isKeyboardVisible: true,
-          keyboardInput: (target as HTMLInputElement).value || "",
-        });
-      }
-    };
+  // TODO: use RemoteSequenceHandler class
+  private checkSequence(key: number) {
+    const SINK_SEQUENCE = [
+      KEYS.ArrowUp.keyCode,
+      KEYS.ArrowUp.keyCode,
+      KEYS.ArrowDown.keyCode,
+      KEYS.ArrowDown.keyCode,
+      KEYS.ArrowLeft.keyCode,
+      KEYS.ArrowRight.keyCode,
+      KEYS.ArrowLeft.keyCode,
+      KEYS.ArrowRight.keyCode,
+    ];
+
+    this.resetSequenceTimeout();
+    this.userSequence.push(key);
+
+    const shouldAddSink =
+      this.userSequence.toString() === SINK_SEQUENCE.toString();
+
+    if (shouldAddSink) {
+      this.props.xray.addRemoteSink({});
+    }
+  }
 
-    handleInputBlur(event: FocusEvent) {
-      if (!shouldUseOnScreenKeyboard()) return;
+  private resetSequenceTimeout() {
+    const SEQUENCE_ENTRY_TIME = 1900;
 
-      const target = event.target as HTMLElement;
+    if (this.sequenceTimeout) {
+      clearTimeout(this.sequenceTimeout);
+    }
 
-      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-        const relatedTarget = event.relatedTarget as HTMLElement;
+    this.sequenceTimeout = setTimeout(() => {
+      this.sequenceTimeout = null;
+      this.userSequence = [];
+    }, SEQUENCE_ENTRY_TIME);
+  }
 
-        if (
-          !relatedTarget ||
-          (relatedTarget.tagName !== "INPUT" &&
-            relatedTarget.tagName !== "TEXTAREA")
-        ) {
-          this.setState({ isKeyboardVisible: false });
-        }
-      }
+  private handleLongPress = (event: CustomEvent) => {
+    const { keyCode } = event.detail;
+    const { displayState } = this.props;
+    const playerState = displayState === DISPLAY_STATES.PLAYER;
+    const hudState = displayState === DISPLAY_STATES.HUD;
+    const playbackState = playerState || hudState;
+    this.longPressActive = true;
+    this.cancelHudTimeout();
+
+    switch (keyCode) {
+      case KEYS.Forward.code:
+        playbackState && this.props.seekMethods.onForwardLongPress();
+        break;
+
+      case KEYS.Rewind.code:
+        playbackState && this.props.seekMethods.onRewindLongPress();
+        break;
+
+      case KEYS.Enter.code:
+        focusManager.longPress();
+        break;
     }
+  };
 
-    handleKeyboardDismiss = () => {
-      this.isDismissing = true;
+  private handleLongPressRelease = (event: CustomEvent) => {
+    const { keyCode } = event.detail;
+    this.longPressActive = false;
+    this.resetHudTimeout();
 
-      this.setState(
-        {
-          isKeyboardVisible: false,
-          keyboardInput: "",
-        },
-        () => {
-          this.isDismissing = false;
-        }
-      );
-    };
+    switch (keyCode) {
+      case KEYS.Forward.code:
+        this.props.seekMethods.onForwardPressOut();
+        break;
 
-    handleKeyboardInput(value: string) {
-      this.setState({ keyboardInput: value });
-    }
+      case KEYS.Rewind.code:
+        this.props.seekMethods.onRewindPressOut();
+        break;
 
-    render() {
-      return (
-        <>
-          <Component {...this.props} />
-          {shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (
-            <OnScreenKeyboard
-              initialValue={this.state.keyboardInput}
-              onInput={this.handleKeyboardInput}
-              onDismiss={this.handleKeyboardDismiss}
-            />
-          )}
-        </>
-      );
+      case KEYS.Enter.code:
+        focusManager.pressOut();
+        break;
     }
+  };
+
+  private keySupportsLongPress(event: KeyboardEvent): boolean {
+    return [KEYS.Forward.code, KEYS.Rewind.code, KEYS.Enter.code].includes(
+      event.code
+    );
   }
 
-  return R.compose(
-    withNavigator,
-    withUseSeek,
-    withXray,
-    PlayerContentContext.withConsumer,
-    DisplayStateContext.withConsumer
-  )(InteractionManager);
+  render() {
+    return (
+      (shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (
+        <OnScreenKeyboard
+          value={this.state.keyboardInput}
+          onInput={this.handleKeyboardInput}
+          onDismiss={this.handleKeyboardDismiss}
+        />
+      )) ||
+      null
+    );
+  }
 }
+
+export const InteractionManager = R.compose(
+  withNavigator,
+  withUseSeek,
+  withXray,
+  connectToStore(R.pick(["rivers"])),
+  PlayerContentContext.withConsumer,
+  DisplayStateContext.withConsumer
+)(InteractionManagerClass);

package/index.js

@@ -1,23 +1,22 @@
 /// <reference types="@applicaster/applicaster-types" />
 import * as R from "ramda";
-import { useLocation, useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 
 import { createQuickBrickApp } from "@applicaster/quick-brick-core";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import * as Contexts from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { OfflineHandler } from "@applicaster/zapp-react-native-ui-components/Components/OfflineHandler";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
-
-const { withXray } = getXray();
-
 import { ZappDomRouter } from "./App/Router";
 import { Layout } from "./App/Layout";
 import { SplashLoader } from "./App/Loader/SplashLoader";
 import { appLoader } from "./App/Loader";
 
-import { withInteractionManager } from "./App/InteractionManager";
+import { InteractionManager } from "./App/InteractionManager";
 import "./main.css";
 
+const { withXray } = getXray();
+
 const contextProviders = R.map(R.prop("withProvider"), R.values(Contexts));
 
 // Add DOM specific providers
@@ -33,7 +32,7 @@ export const ZappApp = createQuickBrickApp({
   QuickBrickManager,
   Layout,
   OfflineHandler,
-  InteractionManager: withInteractionManager,
+  InteractionManager,
   appLoader,
   SplashLoader,
   ContextProviders: contextProviders,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "12.0.0-rc.98",
+  "version": "12.0.1",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.98",
+    "@applicaster/zapp-react-dom-ui-components": "12.0.1",
+    "@applicaster/zapp-react-native-bridge": "12.0.1",
+    "@applicaster/zapp-react-native-redux": "12.0.1",
+    "@applicaster/zapp-react-native-ui-components": "12.0.1",
+    "@applicaster/zapp-react-native-utils": "12.0.1",
     "abortcontroller-polyfill": "^1.7.5",
     "history": "^4.7.2",
     "react-router-dom": "^5.1.2",