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

package/App/InteractionManager/index.tsx

@@ -59,7 +59,7 @@ import { withBackToTopActionHOC, BackToTopAction } from "./hoc";
 const { withXray } = getXray();
 const globalAny: any = global;
 
-const { log_debug, log_warning, log_info } = createLogger({
+const { log_warning } = 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, true);
+    window.addEventListener("keydown", this.onKeyDownListener, false); // Let events bubble
     window.addEventListener("keyup", this.onKeyUp);
     window.addEventListener("mousemove", this.onMouseMoveListener);
 
@@ -406,13 +406,6 @@ 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();
@@ -426,44 +419,32 @@ 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;
 
@@ -501,8 +482,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
         break;
       case DISPLAY_STATES.HUD:
-        // IF transport controls are open, close them instead of closing player
-        setDisplayState(DISPLAY_STATES.PLAYER);
+        if (action === "GO_BACK" && navigator.canGoBack()) {
+          navigator.goBack();
+        } else {
+          // IF transport controls are open, close them instead of closing player
+          setDisplayState(DISPLAY_STATES.PLAYER);
+        }
+
         break;
       default:
         setDisplayState(DISPLAY_STATES.PLAYER);
@@ -563,6 +549,39 @@ 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
        */
@@ -625,7 +644,10 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
         focusManager.recoverFocus();
         this.resetHudTimeout();
-      } else {
+      } else if (
+        displayState !== DISPLAY_STATES.PLAYER &&
+        displayState !== DISPLAY_STATES.HUD
+      ) {
         focusManager.pressIn();
         focusManager.press();
       }

package/package.json

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