@applicaster/zapp-react-dom-app 16.0.0-rc.94 → 16.0.0-rc.96

package/App/InteractionManager/index.tsx

@@ -204,7 +204,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
-    window.removeEventListener("keydown", this.onKeyDownListener);
+    window.removeEventListener("keydown", this.onKeyDownListener, true);
     window.removeEventListener("keyup", this.onKeyUp);
     document.removeEventListener("wheel", this.onScrollListener);
 
@@ -422,7 +422,17 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
     const action = backToTopAction();
 
-    switch (displayState) {
+    const effectiveDisplayState = this.getEffectiveDisplayState();
+
+    // TEMP(native-controls): remove after device verification
+    if (effectiveDisplayState !== displayState) {
+      log_debug("[NativeControls] Back handled as PLAYER", {
+        displayState,
+        action,
+      });
+    }
+
+    switch (effectiveDisplayState) {
       case DISPLAY_STATES.DEFAULT:
         if (action === "PLATFORM_TO_BACKGROUND") {
           log_info(action);
@@ -522,8 +532,42 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.onBackPress(event);
   }
 
+  // True only while the active (primary) player renders its own controls.
+  isNativePlayerControlsEnabled = () =>
+    !!playerManager.getInstanceController?.()?.supportsNativeControls?.();
+
+  // PLAYER/HUD are set by QuickBrick's TV transport controls, which are not
+  // mounted when the player renders native controls — the state would stay
+  // DEFAULT and keys would reach the screen behind the player (Enter re-opens it).
+  // The play-next overlay is the exception: it is QuickBrick UI, so the real
+  // state applies and Enter presses the focused overlay button.
+  getEffectiveDisplayState = () =>
+    this.isNativePlayerControlsEnabled() && !this.isPlayNextOverlayVisible()
+      ? DISPLAY_STATES.PLAYER
+      : this.props.displayState;
+
+  // True when the player closed something of its own instead.
+  playerConsumesBack = () =>
+    !!playerManager.getInstanceController?.()?.handlesBackKey?.();
+
+  // While the play-next overlay is up it owns the remote: its buttons are
+  // QuickBrick focusables, so the keys must not go to the player's own controls.
+  isPlayNextOverlayVisible = () =>
+    !!this.props.navigator?.getPlayNextOverlay?.();
+
+  shouldDeferPlaybackNavigationToNativeControls = (event: KeyboardEvent) => {
+    return (
+      this.isNativePlayerControlsEnabled() &&
+      !this.isPlayNextOverlayVisible() &&
+      (keyCode(event).matchesAny(...ARROW_KEYS) ||
+        keyCode(event).matches(KEYS.Enter) ||
+        (__DEV__ && keyCode(event).matches(KEYS.X)))
+    );
+  };
+
   onKeyDown(event) {
-    const { displayState, setDisplayState, navigator, xray } = this.props;
+    const { setDisplayState, navigator, xray } = this.props;
+    const displayState = this.getEffectiveDisplayState();
     const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
 
@@ -541,6 +585,12 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
 
     if (keyCode(event).matchesAny(KEYS.Back, KEYS.Escape, KEYS.EscapeDevice)) {
+      // A player with native controls can have something of its own open that
+      // Back should close first (e.g. an ad click-through overlay).
+      if (this.isNativePlayerControlsEnabled() && this.playerConsumesBack()) {
+        return;
+      }
+
       this.onBackPress(event);
 
       return;
@@ -553,6 +603,21 @@ class InteractionManagerClass extends React.Component<Props, State> {
     // Only handle repeat events for arrow keys
     if (event.repeat && !keyCode(event).matchesAny(...ARROW_KEYS)) return;
 
+    if (
+      !isDialogVisible &&
+      this.shouldDeferPlaybackNavigationToNativeControls(event)
+    ) {
+      // The player's own spatial navigation handles these keys.
+      // TEMP(native-controls): remove after device verification
+      log_debug("[NativeControls] key deferred to player", {
+        key: event.key,
+        displayState,
+        activeElement: document.activeElement?.className,
+      });
+
+      return;
+    }
+
     /**
      When the player is displayed, we listen to Native Play / Pause / Stop
      buttons. Any other key press will display the transport controls

package/package.json

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