@applicaster/zapp-react-dom-app 13.0.10-rc.0 → 13.0.10-rc.2

package/App/InteractionManager/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import {
+  AccessibilityManager,
   ARROW_KEYS,
   focusManager,
   keyCode,
@@ -83,8 +84,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;
@@ -101,6 +102,8 @@ class InteractionManagerClass extends React.Component<Props, State> {
   private confirmDialog: ConfirmationDialogState =
     confirmationDialogStore.getState();
 
+  accessibilityManager: AccessibilityManager;
+
   state: State = {
     isKeyboardVisible: false,
     keyboardInput: "",
@@ -152,6 +155,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() {
@@ -257,7 +261,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
        */
       showConfirmationDialog({
         title: "",
-        message: alertConfirmationMesage,
         confirmCompletion: this.performExit,
       });
     }
@@ -280,7 +283,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
         } else {
           showConfirmationDialog({
             title: "",
-            message: alertConfirmationMesage,
             confirmCompletion: this.performExit,
             cancelCompletion: this.onConfirmDialogClose,
           });
@@ -327,6 +329,16 @@ class InteractionManagerClass extends React.Component<Props, State> {
     return homePath === navigator.currentRoute;
   }
 
+  isStartupHook() {
+    const { navigator } = this.props;
+
+    const isStartUpHook =
+      Array.isArray(navigator.startUpHooks) &&
+      navigator.startUpHooks.length > 0;
+
+    return isStartUpHook;
+  }
+
   goToHome() {
     const { navigator } = this.props;
     const { rivers } = this.props;
@@ -417,7 +429,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
           this.onConfirmDialogClose();
         } else if (navigator.canGoBack()) {
           navigator.goBack();
-        } else if (this.isHomeScreen()) {
+        } else if (this.isHomeScreen() || this.isStartupHook()) {
           this.platformBack();
         } else if (navigator.currentRoute.includes("hook")) {
           // If code reaches this block navigator cant go back, it is not home,
@@ -551,6 +563,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();
@@ -595,6 +614,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": "13.0.10-rc.0",
+  "version": "13.0.10-rc.2",
   "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": "13.0.10-rc.0",
-    "@applicaster/zapp-react-native-bridge": "13.0.10-rc.0",
-    "@applicaster/zapp-react-native-redux": "13.0.10-rc.0",
-    "@applicaster/zapp-react-native-ui-components": "13.0.10-rc.0",
-    "@applicaster/zapp-react-native-utils": "13.0.10-rc.0",
+    "@applicaster/zapp-react-dom-ui-components": "13.0.10-rc.2",
+    "@applicaster/zapp-react-native-bridge": "13.0.10-rc.2",
+    "@applicaster/zapp-react-native-redux": "13.0.10-rc.2",
+    "@applicaster/zapp-react-native-ui-components": "13.0.10-rc.2",
+    "@applicaster/zapp-react-native-utils": "13.0.10-rc.2",
     "abortcontroller-polyfill": "^1.7.5",
     "react-router-dom": "^5.1.2",
     "typeface-montserrat": "^0.0.54",