@applicaster/zapp-react-dom-app 13.0.0-rc.38 → 13.0.0-rc.39

package/App/InteractionManager/index.tsx

@@ -31,7 +31,10 @@ import {
 import { PlayerContentContext } from "@applicaster/zapp-react-dom-ui-components/Contexts";
 
 import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";
-import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import {
+  getXray,
+  createLogger,
+} from "@applicaster/zapp-react-native-utils/logger";
 
 import {
   confirmationDialogStore,
@@ -51,6 +54,11 @@ 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;
 
@@ -283,8 +291,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
         this.handleWebOsBack();
       }
     } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn("Failed to execute platformBack", e);
+      log_warning("Failed to execute platformBack", e);
     }
   }
 
@@ -378,23 +385,103 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
   }
 
-  onKeyDown(event) {
+  /**
+     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) {
     const { displayState, setDisplayState, navigator } = this.props;
+    const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
 
-    const { isDialogVisible } = confirmationDialogStore.getState();
+    log_debug("onBackPress", {
+      eventCode: event.code,
+      displayState,
+      isDialogVisible,
+      isKeyboardVisible,
+    });
 
     if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
-      if (keyCode(event).matchesAny("Escape", "Back")) {
-        this.handleKeyboardDismiss();
-      }
-
+      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);
     }
@@ -460,55 +547,6 @@ 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))
@@ -533,10 +571,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       this.platformBack();
     }
 
-    if (
-      keyCode(event).matchesAny(...ARROW_KEYS) &&
-      !this.state.isKeyboardVisible
-    ) {
+    if (keyCode(event).matchesAny(...ARROW_KEYS)) {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
       }

package/package.json

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