@applicaster/zapp-react-dom-app 13.0.0-alpha.7330390362 → 13.0.0-alpha.7854932241

package/App/InteractionManager/index.tsx

@@ -31,10 +31,7 @@ import {
 import { PlayerContentContext } from "@applicaster/zapp-react-dom-ui-components/Contexts";
 
 import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";
-import {
-  getXray,
-  createLogger,
-} from "@applicaster/zapp-react-native-utils/logger";
+import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
 import {
   confirmationDialogStore,
@@ -54,11 +51,6 @@ import { KeyInputHandler } from "@applicaster/zapp-react-native-utils/appUtils/k
 const { withXray } = getXray();
 const globalAny: any = global;
 
-const { log_debug, log_warning } = createLogger({
-  category: "InteractionManager",
-  subsystem: "zapp-react-dom-app",
-});
-
 const shouldUseOnScreenKeyboard = () =>
   isVizioPlatform() || window.applicaster.useOnScreenKeyboard;
 
@@ -291,7 +283,8 @@ class InteractionManagerClass extends React.Component<Props, State> {
         this.handleWebOsBack();
       }
     } catch (e) {
-      log_warning("Failed to execute platformBack", e);
+      // eslint-disable-next-line no-console
+      console.warn("Failed to execute platformBack", e);
     }
   }
 
@@ -385,103 +378,23 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
   }
 
-  /**
-     When pressing escape 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
-     note: backspace affects the keyboard input, so it behaves differently
-     */
-  onBackPress(event) {
+  onKeyDown(event) {
     const { displayState, setDisplayState, navigator } = this.props;
-    const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
 
-    log_debug("onBackPress", {
-      eventCode: event.code,
-      displayState,
-      isDialogVisible,
-      isKeyboardVisible,
-    });
+    const { isDialogVisible } = confirmationDialogStore.getState();
 
     if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
-      this.handleKeyboardDismiss();
+      if (keyCode(event).matchesAny("Escape", "Back")) {
+        this.handleKeyboardDismiss();
+      }
+
       event.preventDefault();
       event.stopPropagation();
 
       return;
     }
 
-    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 =
-            typeof entryData?.hookPlugin?.module?.isFlowBlocker === "function"
-              ? entryData?.hookPlugin?.module?.isFlowBlocker()
-              : entryData?.hookPlugin?.module?.isFlowBlocker;
-
-          if (isHookInHomescreen && isHookFlowBlocker) {
-            this.platformBack();
-          } else {
-            navigator.goBack(false, true);
-          }
-        } else {
-          this.goToHome();
-        }
-
-        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;
-    }
-  }
-
-  onBackspacePress(event) {
-    const isInputFocused =
-      document.activeElement instanceof HTMLInputElement ||
-      document.activeElement instanceof HTMLTextAreaElement;
-
-    // Don't handle backspace if input is focused
-    if (isInputFocused) {
-      return;
-    }
-
-    this.onBackPress(event);
-  }
-
-  onKeyDown(event) {
-    const { displayState, setDisplayState, navigator } = this.props;
-    const { isDialogVisible } = confirmationDialogStore.getState();
-
-    if (keyCode(event).matches("Backspace")) {
-      this.onBackspacePress(event);
-
-      return;
-    }
-
-    if (keyCode(event).matchesAny(KEYS.Back, KEYS.Escape, KEYS.EscapeDevice)) {
-      this.onBackPress(event);
-
-      return;
-    }
-
     if (this.keySupportsLongPress(event)) {
       this.longPressDetector.monitorKeyPress(event.code, event);
     }
@@ -547,6 +460,55 @@ class InteractionManagerClass extends React.Component<Props, State> {
       }
     }
 
+    /**
+     When pressing escape 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
+     note: backspace affects the keyboard input, so it not handled here
+     */
+    if (keyCode(event).matchesAny(KEYS.Back, KEYS.Escape, KEYS.EscapeDevice)) {
+      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 =
+              typeof entryData?.hookPlugin?.module?.isFlowBlocker === "function"
+                ? entryData?.hookPlugin?.module?.isFlowBlocker()
+                : entryData?.hookPlugin?.module?.isFlowBlocker;
+
+            if (isHookInHomescreen && isHookFlowBlocker) {
+              this.platformBack();
+            } else {
+              navigator.goBack(false, true);
+            }
+          } else {
+            this.goToHome();
+          }
+
+          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;
+      }
+    }
+
     if (
       keyCode(event).matches(KEYS.Enter) ||
       (__DEV__ && keyCode(event).matches(KEYS.X))
@@ -554,7 +516,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
       } else {
-        focusManager.pressIn();
         focusManager.press();
       }
 
@@ -571,7 +532,10 @@ class InteractionManagerClass extends React.Component<Props, State> {
       this.platformBack();
     }
 
-    if (keyCode(event).matchesAny(...ARROW_KEYS)) {
+    if (
+      keyCode(event).matchesAny(...ARROW_KEYS) &&
+      !this.state.isKeyboardVisible
+    ) {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
       }
@@ -584,6 +548,12 @@ class InteractionManagerClass extends React.Component<Props, State> {
         focusManager.moveFocus(direction);
       }
 
+      if (!isDialogVisible) {
+        // run focus recovery on user interaction attempt
+        // probably we failed to set initial focus for some reason
+        focusManager.recoverFocus();
+      }
+
       if (
         displayState === DISPLAY_STATES.PLAYER ||
         displayState === DISPLAY_STATES.HUD

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "13.0.0-alpha.7330390362",
+  "version": "13.0.0-alpha.7854932241",
   "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": "13.0.0-alpha.7330390362",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.7330390362",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.7330390362",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.7330390362",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.7330390362",
+    "@applicaster/zapp-react-dom-ui-components": "13.0.0-alpha.7854932241",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.7854932241",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.7854932241",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.7854932241",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.7854932241",
     "abortcontroller-polyfill": "^1.7.5",
     "react-router-dom": "^5.1.2",
     "typeface-montserrat": "^0.0.54",