@applicaster/zapp-react-dom-app 16.0.0-rc.110 → 16.0.0-rc.112

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

@@ -1,10 +1,26 @@
 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 {
+  focusManager,
+  KEYS,
+  playerManager,
+} from "@applicaster/zapp-react-native-utils/appUtils";
+import { KeyInputHandler } from "@applicaster/zapp-react-native-utils/appUtils/keyInputHandler/KeyInputHandler";
+import { TVSeekController } from "@applicaster/zapp-react-native-utils/reactHooks/player/TVSeekControlller/TVSeekController";
+import { SKIP_TIME_BASE } from "@applicaster/zapp-react-native-utils/reactHooks/player/const";
 import { showConfirmationDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
 
 import { InteractionManagerClass } from "..";
 
+// The web app runs with the web key map
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/keyCodes/keys/keys",
+  () =>
+    jest.requireActual(
+      "@applicaster/zapp-react-native-utils/appUtils/keyCodes/keys/keys.web"
+    )
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/alertUtils", () => ({
   showConfirmationDialog: jest.fn(),
 }));
@@ -129,4 +145,146 @@ describe("InteractionManager (web)", () => {
       );
     });
   });
+
+  describe("Forward / Rewind keys", () => {
+    const POSITION = 100;
+
+    const createPlayer = (supportsNativeControls: boolean) => ({
+      supportsNativeControls: () => supportsNativeControls,
+      isPaused: () => false,
+      isLive: () => false,
+      getPosition: () => POSITION,
+      getSeekableDuration: () => 1000,
+      pause: jest.fn(),
+      play: jest.fn(),
+      seekTo: jest.fn(),
+      forward: jest.fn(),
+      rewind: jest.fn(),
+    });
+
+    let removeListener = () => {};
+
+    // Same wiring as usePlayerControllerSetup
+    const setup = ({ supportsNativeControls, ...props }: any) => {
+      const player = createPlayer(supportsNativeControls);
+
+      jest
+        .spyOn(playerManager, "getInstanceController")
+        .mockReturnValue(player as any);
+
+      removeListener = KeyInputHandler.getInstance().addListener(
+        new TVSeekController(player as any)
+      );
+
+      return { player, ...createManager(props) };
+    };
+
+    const press = (manager, key) => {
+      manager.onKeyDown(KEYS[key]);
+      manager.onKeyUp(KEYS[key]);
+      jest.runAllTimers();
+    };
+
+    beforeEach(() => jest.useFakeTimers());
+
+    afterEach(() => {
+      removeListener();
+      jest.useRealTimers();
+      jest.restoreAllMocks();
+    });
+
+    describe("with a player rendering its own controls", () => {
+      const expectUntouched = (player, props) => {
+        expect(player.seekTo).not.toHaveBeenCalled();
+        expect(player.forward).not.toHaveBeenCalled();
+        expect(player.rewind).not.toHaveBeenCalled();
+        expect(player.pause).not.toHaveBeenCalled();
+        expect(props.setDisplayState).not.toHaveBeenCalled();
+      };
+
+      it.each(["Forward", "Rewind"])("%s is left to the player", (key) => {
+        const { player, manager, props } = setup({
+          supportsNativeControls: true,
+        });
+
+        const event = { ...KEYS[key], stopPropagation: jest.fn() };
+
+        manager.onKeyDown(event);
+        manager.onKeyUp(event);
+        jest.runAllTimers();
+
+        expectUntouched(player, props);
+        // the key has to reach the player's own handler
+        expect(event.stopPropagation).not.toHaveBeenCalled();
+      });
+
+      it("does not seek the player while the play-next overlay is visible", () => {
+        const { player, manager } = setup({ supportsNativeControls: true });
+
+        (manager.props.navigator as any).getPlayNextOverlay = () => ({});
+
+        press(manager, "Forward");
+
+        expect(player.seekTo).not.toHaveBeenCalled();
+        expect(player.forward).not.toHaveBeenCalled();
+      });
+
+      it("keeps the keys while a dialog is visible", () => {
+        const { player, manager } = setup({ supportsNativeControls: true });
+
+        confirmationDialogStore.getState().showDialog();
+
+        press(manager, "Forward");
+
+        expect(player.seekTo).toHaveBeenCalledWith(POSITION + SKIP_TIME_BASE);
+      });
+
+      it("sends the key-up to the owner of the key-down when a dialog closes in between", () => {
+        const { player, manager } = setup({ supportsNativeControls: true });
+
+        confirmationDialogStore.getState().showDialog();
+        manager.onKeyDown(KEYS.Forward);
+        confirmationDialogStore.getState().hideDialog();
+        manager.onKeyUp(KEYS.Forward);
+        jest.runAllTimers();
+
+        // a single tap seek, not a long press left running
+        expect(player.seekTo).toHaveBeenCalledTimes(1);
+        expect(player.seekTo).toHaveBeenCalledWith(POSITION + SKIP_TIME_BASE);
+      });
+
+      it("leaves the key-up to the player when a dialog opens after a deferred key-down", () => {
+        const { player, manager, props } = setup({
+          supportsNativeControls: true,
+        });
+
+        manager.onKeyDown(KEYS.Forward);
+        confirmationDialogStore.getState().showDialog();
+        manager.onKeyUp(KEYS.Forward);
+        jest.runAllTimers();
+
+        expectUntouched(player, props);
+      });
+    });
+
+    describe("with QuickBrick's transport controls", () => {
+      it.each([
+        ["Forward", POSITION + SKIP_TIME_BASE],
+        ["Rewind", POSITION - SKIP_TIME_BASE],
+      ])("%s keeps the delayed seek", (key, expectedPosition) => {
+        const { player, manager, props } = setup({
+          supportsNativeControls: false,
+          displayState: DISPLAY_STATES.PLAYER,
+        });
+
+        press(manager, key);
+
+        expect(props.setDisplayState).toHaveBeenCalledWith(DISPLAY_STATES.HUD);
+        expect(player.seekTo).toHaveBeenCalledWith(expectedPosition);
+        expect(player.play).toHaveBeenCalled();
+        expect(player.forward).not.toHaveBeenCalled();
+        expect(player.rewind).not.toHaveBeenCalled();
+      });
+    });
+  });
 });

package/App/InteractionManager/index.tsx

@@ -101,6 +101,8 @@ export class InteractionManagerClass extends React.Component<Props, State> {
   private sequenceTimeout: NodeJS.Timeout | null;
   private userSequence: number[] = [];
   private isDismissing = false;
+  // Whether each key's key-down was left to the player's own controls
+  private deferredKeyDowns = new Map<number, boolean>();
   private confirmDialog: ConfirmationDialogState =
     confirmationDialogStore.getState();
 
@@ -368,6 +370,18 @@ export class InteractionManagerClass extends React.Component<Props, State> {
       focusManager.pressOut();
     }
 
+    // The key-up goes to whoever got the key-down, even if a dialog or the
+    // play-next overlay opened or closed in between.
+    const deferred =
+      this.deferredKeyDowns.get(event.keyCode) ??
+      this.isDeferredToNativeControls(event);
+
+    this.deferredKeyDowns.delete(event.keyCode);
+
+    if (deferred) {
+      return;
+    }
+
     if (
       keyCode(event).matches(KEYS.Forward) ||
       (__DEV__ && keyCode(event).matches(KEYS.C))
@@ -434,14 +448,6 @@ export class InteractionManagerClass extends React.Component<Props, State> {
 
     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") {
@@ -567,12 +573,22 @@ export class InteractionManagerClass extends React.Component<Props, State> {
     return (
       this.isNativePlayerControlsEnabled() &&
       !this.isPlayNextOverlayVisible() &&
-      (keyCode(event).matchesAny(...ARROW_KEYS) ||
-        keyCode(event).matches(KEYS.Enter) ||
-        (__DEV__ && keyCode(event).matches(KEYS.X)))
+      (keyCode(event).matchesAny(
+        ...ARROW_KEYS,
+        KEYS.Enter,
+        // The player seeks on its own with these keys
+        KEYS.Forward,
+        KEYS.Rewind
+      ) ||
+        (__DEV__ && keyCode(event).matchesAny(KEYS.X, KEYS.C, KEYS.Z)))
     );
   };
 
+  // An open dialog owns the remote, whatever the player renders.
+  isDeferredToNativeControls = (event: KeyboardEvent) =>
+    !confirmationDialogStore.getState().isDialogVisible &&
+    this.shouldDeferPlaybackNavigationToNativeControls(event);
+
   onKeyDown(event) {
     const { setDisplayState, navigator, xray } = this.props;
     const displayState = this.getEffectiveDisplayState();
@@ -611,18 +627,11 @@ export 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,
-      });
+    const deferred = this.isDeferredToNativeControls(event);
+    this.deferredKeyDowns.set(event.keyCode, deferred);
 
+    if (deferred) {
+      // The player's own key handling takes these keys.
       return;
     }
 

package/package.json

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