@applicaster/zapp-react-dom-app 15.1.15 → 15.1.16-alpha.1335343245

package/App/InteractionManager/__tests__/InteractionManager.test.tsx

@@ -0,0 +1,101 @@
+import { DISPLAY_STATES } from "@applicaster/zapp-react-native-ui-components/Contexts/DisplayStateContext";
+import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+
+import { InteractionManagerClass } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/alertUtils", () => ({
+  showConfirmationDialog: jest.fn(),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Decorators/Navigator",
+  () => ({ withNavigator: (C) => C })
+);
+
+jest.mock("@applicaster/zapp-react-native-redux/utils/connectToStore", () => ({
+  connectToStore: () => (C) => C,
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/logger", () => {
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/logger"
+  );
+
+  return {
+    ...actual,
+    getXray: () => ({ ...actual.getXray(), withXray: (C) => C }),
+  };
+});
+
+const createBackEvent = () => ({
+  code: "Escape",
+  preventDefault: jest.fn(),
+  stopPropagation: jest.fn(),
+});
+
+const createManager = (props = {}) => {
+  const navigator = {
+    canGoBack: jest.fn(() => false),
+    goBack: jest.fn(),
+    replace: jest.fn(),
+    currentRoute: "/river/home",
+  };
+
+  const defaultProps = {
+    displayState: DISPLAY_STATES.DEFAULT,
+    setDisplayState: jest.fn(),
+    navigator,
+    rivers: {},
+    backToTopAction: jest.fn(() => "GO_BACK"),
+    emitFocusOnSelectedTopMenuItem: jest.fn(),
+    emitFocusOnSelectedTab: jest.fn(),
+  };
+
+  const mergedProps = { ...defaultProps, ...props };
+
+  return {
+    manager: new InteractionManagerClass(mergedProps as any),
+    props: mergedProps,
+  };
+};
+
+describe("InteractionManager (web)", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (focusManager as any).setInitialFocus = jest.fn();
+    confirmationDialogStore.getState().hideDialog();
+  });
+
+  describe("onBackPress with exit dialog visible", () => {
+    it.each([DISPLAY_STATES.DEFAULT, DISPLAY_STATES.PLAYER])(
+      "dismisses the dialog instead of navigating (displayState: %s)",
+      (displayState) => {
+        const { manager, props } = createManager({ displayState });
+        confirmationDialogStore.getState().showDialog();
+
+        const event = createBackEvent();
+        manager.onBackPress(event);
+
+        expect(confirmationDialogStore.getState().isDialogVisible).toBe(false);
+        expect(props.backToTopAction).not.toHaveBeenCalled();
+        expect(props.navigator.goBack).not.toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+
+        expect(focusManager.setInitialFocus).toHaveBeenCalledWith(undefined, {
+          source: "cancel",
+          preserveScroll: true,
+        });
+      }
+    );
+
+    it("resolves the back action normally when the dialog is hidden", () => {
+      const { manager, props } = createManager();
+
+      manager.onBackPress(createBackEvent());
+
+      expect(props.backToTopAction).toHaveBeenCalled();
+      expect(props.navigator.canGoBack).toHaveBeenCalled();
+    });
+  });
+});

package/App/InteractionManager/index.tsx

@@ -92,7 +92,7 @@ type KeyCode = { code: string; keyCode: number | string };
 const VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE =
   "Video player controls - use left/right to navigate";
 
-class InteractionManagerClass extends React.Component<Props, State> {
+export class InteractionManagerClass extends React.Component<Props, State> {
   onKeyDownListener: (keyCode: KeyCode) => void;
   onMouseDownListener: (event: MouseEvent) => void;
   onMouseMoveListener: (event: MouseEvent) => void;
@@ -207,7 +207,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);
 
@@ -421,9 +421,29 @@ class InteractionManagerClass extends React.Component<Props, State> {
       return;
     }
 
+    // Focus is inside the dialog, so backToTopAction() can't resolve a
+    // meaningful action — Back must dismiss the dialog in every display state.
+    if (isDialogVisible) {
+      this.onConfirmDialogClose();
+      event.preventDefault();
+      event.stopPropagation();
+
+      return;
+    }
+
     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_BACK") {
           log_info(action);
@@ -472,9 +492,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
         break;
       case DISPLAY_STATES.PLAYER:
-        if (isDialogVisible) {
-          this.onConfirmDialogClose();
-        } else if (navigator.canGoBack()) {
+        if (navigator.canGoBack()) {
           navigator.goBack();
         } else if (this.isHomeScreen()) {
           this.platformBack();
@@ -523,8 +541,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;
 
@@ -542,6 +594,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;
@@ -554,6 +612,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": "15.1.15",
+  "version": "15.1.16-alpha.1335343245",
   "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": "15.1.15",
-    "@applicaster/zapp-react-native-bridge": "15.1.15",
-    "@applicaster/zapp-react-native-redux": "15.1.15",
-    "@applicaster/zapp-react-native-ui-components": "15.1.15",
-    "@applicaster/zapp-react-native-utils": "15.1.15",
+    "@applicaster/zapp-react-dom-ui-components": "15.1.16-alpha.1335343245",
+    "@applicaster/zapp-react-native-bridge": "15.1.16-alpha.1335343245",
+    "@applicaster/zapp-react-native-redux": "15.1.16-alpha.1335343245",
+    "@applicaster/zapp-react-native-ui-components": "15.1.16-alpha.1335343245",
+    "@applicaster/zapp-react-native-utils": "15.1.16-alpha.1335343245",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",