@applicaster/zapp-react-dom-app 14.0.0-alpha.5351122050 → 14.0.0-alpha.5365702091

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

@@ -7,6 +7,7 @@ jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
   focusManager: {
     isFocusOnMenu: jest.fn(),
     isFocusOnContent: jest.fn(),
+    isTabsScreenContentFocused: jest.fn(),
   },
 }));
 
@@ -44,6 +45,20 @@ describe("withBackToTopActionHOC", () => {
     jest.clearAllMocks();
   });
 
+  it("returns PLATFORM_BACK when on root screen, and startup hooks", () => {
+    expect.assertions(1);
+
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      startUpHooks: ["some_startup_hook"],
+    });
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toBe("PLATFORM_BACK");
+  });
+
   it("returns PLATFORM_BACK when on root screen, focus on menu, and is home", () => {
     expect.assertions(1);
 
@@ -52,7 +67,7 @@ describe("withBackToTopActionHOC", () => {
     (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
 
     (useNavigation as jest.Mock).mockReturnValue({
-      getNestedEntry: () => undefined,
+      startUpHooks: [],
     });
 
     (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
@@ -60,9 +75,7 @@ describe("withBackToTopActionHOC", () => {
 
     render(<Wrapped />);
 
-    expect(receivedProps.backToTopAction()).toEqual({
-      action: "PLATFORM_BACK",
-    });
+    expect(receivedProps.backToTopAction()).toBe("PLATFORM_BACK");
   });
 
   it("returns GO_HOME when on root screen, focus on menu, and not home", () => {
@@ -73,23 +86,23 @@ describe("withBackToTopActionHOC", () => {
     (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
 
     (useNavigation as jest.Mock).mockReturnValue({
-      getNestedEntry: () => undefined,
+      startUpHooks: [],
     });
 
     (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
     (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
 
     render(<Wrapped />);
-    expect(receivedProps.backToTopAction()).toEqual({ action: "GO_HOME" });
+    expect(receivedProps.backToTopAction()).toBe("GO_HOME");
   });
 
-  it("returns FOCUS_TOP_NAVIGATION when on root screen and focus on content without tabs_screen", () => {
+  it("returns FOCUS_ON_SELECTED_TOP_MENU_ITEM when on root screen and focus on content without tabs_screen", () => {
     (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
     (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
     (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
 
     (useNavigation as jest.Mock).mockReturnValue({
-      getNestedEntry: () => "selectedEntry",
+      startUpHooks: [],
     });
 
     (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
@@ -97,36 +110,30 @@ describe("withBackToTopActionHOC", () => {
 
     render(<Wrapped />);
 
-    expect(receivedProps.backToTopAction()).toEqual({
-      action: "FOCUS_TOP_NAVIGATION",
-      payload: {
-        isTabsScreen: false,
-        selectedEntry: "selectedEntry",
-      },
-    });
+    expect(receivedProps.backToTopAction()).toBe(
+      "FOCUS_ON_SELECTED_TOP_MENU_ITEM"
+    );
   });
 
-  it("returns FOCUS_TOP_NAVIGATION when on root screen and focus on content with tabs_screen", () => {
+  it("returns FOCUS_ON_SELECTED_TAB_ITEM when on root screen and focus on content with tabs_screen", () => {
     (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
     (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
     (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(true);
 
     (useNavigation as jest.Mock).mockReturnValue({
-      getNestedEntry: () => "selectedEntry",
+      startUpHooks: [],
     });
 
     (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
     (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(true);
 
+    (focusManager.isTabsScreenContentFocused as jest.Mock).mockReturnValue(
+      true
+    );
+
     render(<Wrapped />);
 
-    expect(receivedProps.backToTopAction()).toEqual({
-      action: "FOCUS_TOP_NAVIGATION",
-      payload: {
-        isTabsScreen: true,
-        selectedEntry: "selectedEntry",
-      },
-    });
+    expect(receivedProps.backToTopAction()).toBe("FOCUS_ON_SELECTED_TAB_ITEM");
   });
 
   it("returns GO_BACK in default case", () => {
@@ -137,13 +144,17 @@ describe("withBackToTopActionHOC", () => {
     (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
 
     (useNavigation as jest.Mock).mockReturnValue({
-      getNestedEntry: () => undefined,
+      startUpHooks: [],
     });
 
     (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
     (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
 
+    (focusManager.isTabsScreenContentFocused as jest.Mock).mockReturnValue(
+      false
+    );
+
     render(<Wrapped />);
-    expect(receivedProps.backToTopAction()).toEqual({ action: "GO_BACK" });
+    expect(receivedProps.backToTopAction()).toBe("GO_BACK");
   });
 });

package/App/InteractionManager/hoc/withBackToTopAction.tsx

@@ -1,5 +1,10 @@
 import * as React from "react";
+import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
+
 import {
   useCurrentScreenIsHome,
   useCurrentScreenIsRoot,
@@ -7,10 +12,12 @@ import {
 } from "./hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-export type BACK_TO_TOP_ACTION = {
-  action: "PLATFORM_BACK" | "GO_HOME" | "FOCUS_TOP_NAVIGATION" | "GO_BACK";
-  payload?: { isTabsScreen: boolean; selectedEntry: ZappEntry };
-};
+export type BACK_TO_TOP_ACTION =
+  | "PLATFORM_BACK"
+  | "GO_HOME"
+  | "GO_BACK"
+  | "FOCUS_ON_SELECTED_TOP_MENU_ITEM"
+  | "FOCUS_ON_SELECTED_TAB_ITEM";
 
 export type BackToTopAction = () => BACK_TO_TOP_ACTION;
 
@@ -21,28 +28,49 @@ export function withBackToTopActionHOC(Component) {
     const isTabsScreen = useCurrentScreenIsTabs();
 
     const navigator = useNavigation();
-    const selectedEntry = navigator.getNestedEntry();
+
+    const isStartUpHook = isFilledArray(navigator.startUpHooks);
+
+    const emitFocusOnSelectedTab = useSubscriberFor(
+      QBUIComponentEvents.focusOnSelectedTab
+    );
+
+    const emitFocusOnSelectedTopMenuItem = useSubscriberFor(
+      QBUIComponentEvents.focusOnSelectedTopMenuItem
+    );
 
     const backToTopAction = React.useCallback((): BACK_TO_TOP_ACTION => {
+      if (isRoot && isStartUpHook) {
+        return "PLATFORM_BACK";
+      }
+
       if (isRoot && focusManager.isFocusOnMenu() && isHome) {
-        return { action: "PLATFORM_BACK" };
+        return "PLATFORM_BACK";
       }
 
       if (isRoot && focusManager.isFocusOnMenu() && !isHome) {
-        return { action: "GO_HOME" };
+        return "GO_HOME";
+      }
+
+      if (isRoot && isTabsScreen && focusManager.isTabsScreenContentFocused()) {
+        return "FOCUS_ON_SELECTED_TAB_ITEM";
       }
 
       if (isRoot && focusManager.isFocusOnContent()) {
-        return {
-          action: "FOCUS_TOP_NAVIGATION",
-          payload: { isTabsScreen, selectedEntry },
-        };
+        return "FOCUS_ON_SELECTED_TOP_MENU_ITEM";
       }
 
       // default
-      return { action: "GO_BACK" };
-    }, [isHome, isRoot, isTabsScreen, selectedEntry]);
+      return "GO_BACK";
+    }, [isHome, isRoot, isTabsScreen, isStartUpHook]);
 
-    return <Component {...props} backToTopAction={backToTopAction} />;
+    return (
+      <Component
+        {...props}
+        backToTopAction={backToTopAction}
+        emitFocusOnSelectedTab={emitFocusOnSelectedTab}
+        emitFocusOnSelectedTopMenuItem={emitFocusOnSelectedTopMenuItem}
+      />
+    );
   };
 }

package/App/InteractionManager/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import {
+  AccessibilityManager,
   ARROW_KEYS,
   focusManager,
   keyCode,
@@ -58,7 +59,7 @@ import { withBackToTopActionHOC, BackToTopAction } from "./hoc";
 const { withXray } = getXray();
 const globalAny: any = global;
 
-const { log_debug, log_warning } = createLogger({
+const { log_debug, log_warning, log_info } = createLogger({
   category: "InteractionManager",
   subsystem: "zapp-react-dom-app",
 });
@@ -76,6 +77,8 @@ type Props = {
   xray: XRayContext;
   confirmDialog: typeof confirmationDialogStore;
   backToTopAction: BackToTopAction;
+  emitFocusOnSelectedTopMenuItem: Callback;
+  emitFocusOnSelectedTab: Callback;
 };
 
 interface State {
@@ -86,8 +89,8 @@ interface State {
 
 type KeyCode = { code: string; keyCode: number | string };
 
-export const alertConfirmationMesage =
-  "Are you sure you want to exit application?";
+const VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE =
+  "Video player controls - use left/right to navigate";
 
 class InteractionManagerClass extends React.Component<Props, State> {
   onKeyDownListener: (keyCode: KeyCode) => void;
@@ -104,6 +107,8 @@ class InteractionManagerClass extends React.Component<Props, State> {
   private confirmDialog: ConfirmationDialogState =
     confirmationDialogStore.getState();
 
+  accessibilityManager: AccessibilityManager;
+
   state: State = {
     isKeyboardVisible: false,
     keyboardInput: "",
@@ -155,6 +160,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.confirmDialog.setConfirmAction(this.performExit);
     this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
     this.longPressDetector = new KeyboardLongPressManager();
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   componentDidMount() {
@@ -260,7 +266,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
        */
       showConfirmationDialog({
         title: "",
-        message: alertConfirmationMesage,
         confirmCompletion: this.performExit,
       });
     }
@@ -283,7 +288,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
         } else {
           showConfirmationDialog({
             title: "",
-            message: alertConfirmationMesage,
             confirmCompletion: this.performExit,
             cancelCompletion: this.onConfirmDialogClose,
           });
@@ -390,8 +394,14 @@ class InteractionManagerClass extends React.Component<Props, State> {
      note: backspace affects the keyboard input, so it behaves differently
      */
   onBackPress(event) {
-    const { displayState, setDisplayState, navigator, backToTopAction } =
-      this.props;
+    const {
+      displayState,
+      setDisplayState,
+      navigator,
+      backToTopAction,
+      emitFocusOnSelectedTopMenuItem,
+      emitFocusOnSelectedTab,
+    } = this.props;
 
     const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
@@ -411,26 +421,41 @@ class InteractionManagerClass extends React.Component<Props, State> {
       return;
     }
 
-    const { action, payload } = backToTopAction();
+    const action = backToTopAction();
 
     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_TOP_NAVIGATION") {
-          focusManager.focusTopNavigation(
-            payload.isTabsScreen,
-            payload.selectedEntry
-          );
+        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();
           }
@@ -576,6 +601,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
     ) {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
+
+        this.accessibilityManager.addHeading(
+          VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE
+        );
+
+        focusManager.recoverFocus();
+        this.resetHudTimeout();
       } else {
         focusManager.pressIn();
         focusManager.press();
@@ -620,6 +652,12 @@ class InteractionManagerClass extends React.Component<Props, State> {
         this.resetHudTimeout();
       }
 
+      if (displayState === DISPLAY_STATES.PLAYER) {
+        this.accessibilityManager.addHeading(
+          VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE
+        );
+      }
+
       return true;
     }
   }

package/App/Layout/index.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { createPortal } from "react-dom";
 
 import { Background } from "@applicaster/zapp-react-dom-ui-components/Components/Background";
 import { ConfirmDialog } from "@applicaster/zapp-react-dom-ui-components/Components/ConfirmDialog";
@@ -29,7 +30,7 @@ export function Layout({ children }: Props) {
       >
         {children}
       </LayoutComponent>
-      <ConfirmDialog />
+      {createPortal(<ConfirmDialog />, document.body)}
     </>
   );
 }

package/package.json

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