@applicaster/zapp-react-dom-app 12.0.0-alpha.4220424021 → 12.0.0-alpha.4241289980

package/App/InteractionManager/index.tsx

@@ -33,9 +33,13 @@ 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 {
   isLgPlatform,
   isSamsungPlatform,
@@ -43,6 +47,7 @@ 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;
@@ -65,9 +70,14 @@ 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 };
 
@@ -80,24 +90,24 @@ class InteractionManagerClass extends React.Component<Props, State> {
   onMouseMoveListener: (event: MouseEvent) => void;
   onScrollListener: (event: MouseEvent) => void;
 
-  longKeyPressTimeout: any | null;
-  longPressActive: boolean;
-  timeout: any | null;
-  sequenceTimeout: NodeJS.Timeout | null; // timeoutID
-  userSequence: number[] = [];
-  confirmDialog: any;
-  isDismissing = false;
+  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,
+  };
 
   constructor(props) {
     super(props);
 
-    this.onKeyDownListener = this.onKeyDown.bind(this);
-
-    this.state = {
-      isKeyboardVisible: false,
-      keyboardInput: "",
-    };
-
     this.onMouseMoveListener = debounce({
       fn: this.onMouseMove,
       context: this,
@@ -114,9 +124,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       context: this,
     });
 
-    this.longKeyPressTimeout = null;
-    this.longPressActive = false;
-    this.confirmDialog = confirmationDialogStore.getState();
+    this.onKeyDownListener = this.onKeyDown.bind(this);
     this.resetHudTimeout = this.resetHudTimeout.bind(this);
     this.cursorVisibilityChange = this.cursorVisibilityChange.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
@@ -132,9 +140,18 @@ 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() {
@@ -161,6 +178,13 @@ 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() {
@@ -182,6 +206,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
 
     this.isDismissing = false;
+    this.longPressDetector.cleanup();
+    window.removeEventListener("onLongPress", this.handleLongPress);
+
+    window.removeEventListener(
+      "onLongPressRelease",
+      this.handleLongPressRelease
+    );
   }
 
   performExit() {
@@ -303,155 +334,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
   }
 
-  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;
+  cancelHudTimeout() {
     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)) {
-      if (this.longPressActive) {
-        this.onLongPressRelease(event);
-      } else {
-        this.clearLongPressTimeout();
-      }
+      this.longPressDetector.endKeyPressMonitoring(event.code);
     }
   }
 
@@ -461,23 +350,24 @@ 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();
-
-        return;
       }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      return;
     }
 
+    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;
+
     /**
      When the player is displayed, we listen to Native Play / Pause / Stop
      buttons. Any other key press will display the transport controls
@@ -694,16 +584,18 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
   handleInputFocus = (event: FocusEvent) => {
     if (!shouldUseOnScreenKeyboard()) return;
-    const target = event.target as HTMLElement;
+    const target = event.target as HTMLInputElement;
 
-    if (this.isDismissing) {
-      return;
-    }
+    if (this.isDismissing) return;
 
-    if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+    if (
+      (target.tagName === "INPUT" && target.type === "text") ||
+      target.tagName === "TEXTAREA"
+    ) {
       this.setState({
         isKeyboardVisible: true,
-        keyboardInput: (target as HTMLInputElement).value || "",
+        keyboardInput: target.value || "",
+        activeInputRef: target,
       });
     }
   };
@@ -733,6 +625,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       {
         isKeyboardVisible: false,
         keyboardInput: "",
+        activeInputRef: null,
       },
       () => {
         this.isDismissing = false;
@@ -740,15 +633,116 @@ class InteractionManagerClass extends React.Component<Props, State> {
     );
   };
 
-  handleKeyboardInput(value: string) {
+  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);
+    }
+
     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
-          initialValue={this.state.keyboardInput}
+          value={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.4220424021",
+  "version": "12.0.0-alpha.4241289980",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,18 +22,18 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "12.0.0-alpha.4220424021",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4220424021",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4220424021",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4220424021",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4220424021",
+    "@applicaster/zapp-react-dom-ui-components": "12.0.0-alpha.4241289980",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4241289980",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4241289980",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4241289980",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4241289980",
     "abortcontroller-polyfill": "^1.7.5",
     "history": "^4.7.2",
     "react-router-dom": "^5.1.2",
     "typeface-montserrat": "^0.0.54",
-    "video.js": "8.21.0",
-    "videojs-contrib-eme": "^5.5.1",
-    "videojs-contrib-quality-levels": "^4.1.0"
+    "video.js": "7.14.3",
+    "videojs-contrib-eme": "^3.8.1",
+    "videojs-contrib-quality-levels": "3.0.0"
   },
   "peerDependencies": {
     "core-js": "3.29.1",