@applicaster/zapp-react-dom-app 14.0.24-alpha.5957182363 → 14.0.24

package/App/InteractionManager/index.tsx

@@ -59,7 +59,7 @@ import { withBackToTopActionHOC, BackToTopAction } from "./hoc";
 const { withXray } = getXray();
 const globalAny: any = global;
 
-const { log_warning } = createLogger({
+const { log_debug, log_warning, log_info } = createLogger({
   category: "InteractionManager",
   subsystem: "zapp-react-dom-app",
 });
@@ -164,7 +164,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    window.addEventListener("keydown", this.onKeyDownListener, false); // Let events bubble
+    window.addEventListener("keydown", this.onKeyDownListener, true);
     window.addEventListener("keyup", this.onKeyUp);
     window.addEventListener("mousemove", this.onMouseMoveListener);
 
@@ -406,6 +406,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
     const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
 
+    log_debug("onBackPress", {
+      eventCode: event.code,
+      displayState,
+      isDialogVisible,
+      isKeyboardVisible,
+    });
+
     if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
       this.handleKeyboardDismiss();
       event.preventDefault();
@@ -419,32 +426,44 @@ class InteractionManagerClass extends React.Component<Props, State> {
     switch (displayState) {
       case DISPLAY_STATES.DEFAULT:
         if (action === "PLATFORM_BACK") {
+          log_info(action);
+
           this.platformBack();
         }
 
         if (action === "GO_HOME") {
+          log_info(action);
+
           this.goToHome();
         }
 
         if (action === "FOCUS_ON_SELECTED_TOP_MENU_ITEM") {
+          log_info(action);
+
           // we don't have enough context at this point to set focus properly on selected top-menu-item, just emit event about it.
           // TopMenu component is supposed to handle this event.
           emitFocusOnSelectedTopMenuItem();
         }
 
         if (action === "FOCUS_ON_SELECTED_TAB_ITEM") {
+          log_info(action);
+
           // we don't have enough context at this point to set focus properly on selected tab-menu-item, just emit event about it
           // Tabs component is supposed to handle this event.
           emitFocusOnSelectedTab();
         }
 
         if (action === "GO_BACK") {
+          log_info(action);
+
           if (navigator.canGoBack()) {
             navigator.goBack();
           }
         }
 
         if (action === "FORCE_GO_BACK") {
+          log_info(action);
+
           const fallbackToHome = false;
           const fromHook = true;
 
@@ -482,13 +501,8 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
         break;
       case DISPLAY_STATES.HUD:
-        if (action === "GO_BACK" && navigator.canGoBack()) {
-          navigator.goBack();
-        } else {
-          // IF transport controls are open, close them instead of closing player
-          setDisplayState(DISPLAY_STATES.PLAYER);
-        }
-
+        // IF transport controls are open, close them instead of closing player
+        setDisplayState(DISPLAY_STATES.PLAYER);
         break;
       default:
         setDisplayState(DISPLAY_STATES.PLAYER);
@@ -549,39 +563,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
       displayState === DISPLAY_STATES.PLAYER ||
       displayState === DISPLAY_STATES.HUD
     ) {
-      // TODO: find alternative, using this logic to allow events to be passed to player controls
-      // Still handle other keys (back, play/pause, etc.) through InteractionManager
-      const player = window?.applicaster?.player;
-      const videoElement = player?.getVideoElement();
-
-      const isNavigationKey =
-        keyCode(event).matchesAny(...ARROW_KEYS) ||
-        keyCode(event).matches(KEYS.Enter) ||
-        (__DEV__ && keyCode(event).matches(KEYS.X));
-
-      const isBrightcoveControlFocused = () => {
-        const activeElement = document.activeElement;
-        if (!activeElement || !videoElement) return false;
-
-        const playerContainer = videoElement.closest(".video-js");
-
-        return playerContainer?.contains(activeElement) ?? false;
-      };
-
-      const brightcoveControlHasFocus = isBrightcoveControlFocused();
-
-      if (videoElement && isNavigationKey) {
-        if (brightcoveControlHasFocus) {
-          return;
-        }
-
-        if (displayState === DISPLAY_STATES.PLAYER) {
-          setDisplayState(DISPLAY_STATES.HUD);
-        }
-
-        return;
-      }
-
       /**
        registering native keys for playback
        */
@@ -644,10 +625,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
         focusManager.recoverFocus();
         this.resetHudTimeout();
-      } else if (
-        displayState !== DISPLAY_STATES.PLAYER &&
-        displayState !== DISPLAY_STATES.HUD
-      ) {
+      } else {
         focusManager.pressIn();
         focusManager.press();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "14.0.24-alpha.5957182363",
+  "version": "14.0.24",
   "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": "14.0.24-alpha.5957182363",
-    "@applicaster/zapp-react-native-bridge": "14.0.24-alpha.5957182363",
-    "@applicaster/zapp-react-native-redux": "14.0.24-alpha.5957182363",
-    "@applicaster/zapp-react-native-ui-components": "14.0.24-alpha.5957182363",
-    "@applicaster/zapp-react-native-utils": "14.0.24-alpha.5957182363",
+    "@applicaster/zapp-react-dom-ui-components": "14.0.24",
+    "@applicaster/zapp-react-native-bridge": "14.0.24",
+    "@applicaster/zapp-react-native-redux": "14.0.24",
+    "@applicaster/zapp-react-native-ui-components": "14.0.24",
+    "@applicaster/zapp-react-native-utils": "14.0.24",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",