@applicaster/zapp-react-dom-app 12.0.0-alpha.4440903139 → 12.0.0-alpha.4484269996

package/App/InteractionManager/index.tsx

@@ -33,13 +33,9 @@ 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,
-  ConfirmationDialogState,
-} from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
-
+import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
 import {
   isLgPlatform,
   isSamsungPlatform,
@@ -47,7 +43,6 @@ import {
 } 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;
@@ -70,14 +65,9 @@ type Props = {
     onRewindPressOut: () => void;
     onForwardPressOut: () => void;
   };
-  confirmDialog: typeof confirmationDialogStore;
 };
 
-interface State {
-  isKeyboardVisible: boolean;
-  keyboardInput: string;
-  activeInputRef: HTMLInputElement | null;
-}
+type State = { isKeyboardVisible: boolean; keyboardInput: string };
 
 type KeyCode = { code: string; keyCode: number | string };
 
@@ -90,24 +80,24 @@ class InteractionManagerClass extends React.Component<Props, State> {
   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.onKeyDownListener = this.onKeyDown.bind(this);
+
+    this.state = {
+      isKeyboardVisible: false,
+      keyboardInput: "",
+    };
+
     this.onMouseMoveListener = debounce({
       fn: this.onMouseMove,
       context: this,
@@ -124,7 +114,9 @@ class InteractionManagerClass extends React.Component<Props, State> {
       context: this,
     });
 
-    this.onKeyDownListener = this.onKeyDown.bind(this);
+    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);
@@ -140,18 +132,9 @@ class InteractionManagerClass extends React.Component<Props, State> {
     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();
   }
 
   componentDidMount() {
@@ -178,13 +161,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
       this.cursorVisibilityChange,
       false
     );
-
-    window.addEventListener("onLongPress", this.handleLongPress.bind(this));
-
-    window.addEventListener(
-      "onLongPressRelease",
-      this.handleLongPressRelease.bind(this)
-    );
   }
 
   componentWillUnmount() {
@@ -206,13 +182,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
 
     this.isDismissing = false;
-    this.longPressDetector.cleanup();
-    window.removeEventListener("onLongPress", this.handleLongPress);
-
-    window.removeEventListener(
-      "onLongPressRelease",
-      this.handleLongPressRelease
-    );
   }
 
   performExit() {
@@ -334,13 +303,155 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
   }
 
-  cancelHudTimeout() {
+  clearLongPressTimeout() {
+    if (this.longKeyPressTimeout) {
+      clearTimeout(this.longKeyPressTimeout);
+      this.longKeyPressTimeout = null;
+    }
+  }
+
+  /**
+   * 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
+   */
+  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();
+
+        break;
+
+      case KEYS.Enter.code:
+        focusManager.longPress();
+
+        break;
+
+      case KEYS.Forward.code:
+        playbackState && this.props.seekMethods.onForwardLongPress();
+
+        break;
+
+      case KEYS.Rewind.code:
+        playbackState && this.props.seekMethods.onRewindLongPress();
+
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 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
+   */
+  onLongPressRelease(event) {
+    this.longPressActive = false;
     this.resetHudTimeout();
+
+    focusManager.pressOut();
+
+    switch (event.code) {
+      case KEYS.Forward.code:
+        this.props.seekMethods.onForwardPressOut();
+
+        break;
+
+      case KEYS.Rewind.code:
+        this.props.seekMethods.onForwardPressOut();
+
+        break;
+
+      default:
+        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);
+    }
+
+    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);
+  }
+
+  /**
+   * 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);
+
+    const supportsLongPress = R.compose(
+      R.any(R.equals(true)),
+      R.map(eventMatcher)
+    )(supportedEvents);
+
+    return supportsLongPress;
   }
 
   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)) {
-      this.longPressDetector.endKeyPressMonitoring(event.code);
+      if (this.longPressActive) {
+        this.onLongPressRelease(event);
+      } else {
+        this.clearLongPressTimeout();
+      }
     }
   }
 
@@ -350,24 +461,23 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
     const { isDialogVisible } = confirmationDialogStore.getState();
 
+    // 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 (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
       if (keyCode(event).matchesAny("Escape", "Back")) {
+        event.preventDefault();
+        event.stopPropagation();
         this.handleKeyboardDismiss();
-      }
-
-      event.preventDefault();
-      event.stopPropagation();
 
-      return;
-    }
-
-    if (this.keySupportsLongPress(event)) {
-      this.longPressDetector.monitorKeyPress(event.code, event);
+        return;
+      }
     }
 
-    // None of the logic below should be executed for repeated keys
-    if (event.repeat) return;
-
     /**
      When the player is displayed, we listen to Native Play / Pause / Stop
      buttons. Any other key press will display the transport controls
@@ -584,18 +694,16 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
   handleInputFocus = (event: FocusEvent) => {
     if (!shouldUseOnScreenKeyboard()) return;
-    const target = event.target as HTMLInputElement;
+    const target = event.target as HTMLElement;
 
-    if (this.isDismissing) return;
+    if (this.isDismissing) {
+      return;
+    }
 
-    if (
-      (target.tagName === "INPUT" && target.type === "text") ||
-      target.tagName === "TEXTAREA"
-    ) {
+    if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
       this.setState({
         isKeyboardVisible: true,
-        keyboardInput: target.value || "",
-        activeInputRef: target,
+        keyboardInput: (target as HTMLInputElement).value || "",
       });
     }
   };
@@ -625,7 +733,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
       {
         isKeyboardVisible: false,
         keyboardInput: "",
-        activeInputRef: null,
       },
       () => {
         this.isDismissing = false;
@@ -633,116 +740,15 @@ class InteractionManagerClass extends React.Component<Props, State> {
     );
   };
 
-  handleKeyboardInput = (value: string) => {
-    const { activeInputRef } = this.state;
-
-    if (activeInputRef) {
-      // Update the input's value
-      activeInputRef.value = value;
-
-      // Dispatch keyboard update event
-      const keyboardEvent = new CustomEvent("keyboardUpdate", {
-        detail: { value },
-      });
-
-      document.dispatchEvent(keyboardEvent);
-    }
-
+  handleKeyboardInput(value: string) {
     this.setState({ keyboardInput: 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({});
-    }
-  }
-
-  private resetSequenceTimeout() {
-    const SEQUENCE_ENTRY_TIME = 1900;
-
-    if (this.sequenceTimeout) {
-      clearTimeout(this.sequenceTimeout);
-    }
-
-    this.sequenceTimeout = setTimeout(() => {
-      this.sequenceTimeout = null;
-      this.userSequence = [];
-    }, SEQUENCE_ENTRY_TIME);
-  }
-
-  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;
-    }
-  };
-
-  private handleLongPressRelease = (event: CustomEvent) => {
-    const { keyCode } = event.detail;
-    this.longPressActive = false;
-    this.resetHudTimeout();
-
-    switch (keyCode) {
-      case KEYS.Forward.code:
-        this.props.seekMethods.onForwardPressOut();
-        break;
-
-      case KEYS.Rewind.code:
-        this.props.seekMethods.onRewindPressOut();
-        break;
-
-      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
-    );
   }
 
   render() {
     return (
       (shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (
         <OnScreenKeyboard
-          value={this.state.keyboardInput}
+          initialValue={this.state.keyboardInput}
           onInput={this.handleKeyboardInput}
           onDismiss={this.handleKeyboardDismiss}
         />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "12.0.0-alpha.4440903139",
+  "version": "12.0.0-alpha.4484269996",
   "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-alpha.4440903139",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4440903139",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4440903139",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4440903139",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4440903139",
+    "@applicaster/zapp-react-dom-ui-components": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4484269996",
     "abortcontroller-polyfill": "^1.7.5",
     "history": "^4.7.2",
     "react-router-dom": "^5.1.2",