@applicaster/quick-brick-core 13.0.0-rc.9 → 13.0.0-rc.91

package/App/NavigationProvider/NavigationProvider.tsx

@@ -49,6 +49,7 @@ import { coreAppLogger } from "../logger";
 import {
   getPlatform,
   isTV,
+  isVizioPlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useConnectionInfo } from "@applicaster/zapp-react-native-utils/reactHooks/connection";
 import {
@@ -57,7 +58,10 @@ import {
   legacyScreenData,
   openExternalUrl,
 } from "./utils";
-import { debounce } from "@applicaster/zapp-react-native-utils/functionUtils";
+import {
+  debounce,
+  getJsonReplacer,
+} from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { findParent } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappPipesContext/ZappPipesEntryContext";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -66,6 +70,10 @@ import { inflateUrl } from "@applicaster/zapp-react-native-ui-components/Compone
 import { useModalStore } from "@applicaster/zapp-react-native-utils/modalState";
 import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
+import { Hook } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager/Hook";
+import { URLSchemeContext } from "../DeepLinking/URLSchemeListener/URLSchemeContextProvider";
+
+import { loadingOverlayManager } from "../LoadingOverlay";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
@@ -75,17 +83,6 @@ type Props = {
   plugins?: QuickBrickPlugin[];
 };
 
-type EntryWithParent = ZappEntry & { parent?: EntryWithParent };
-
-type SingleEntry = {
-  data: EntryWithParent;
-  route: string;
-  id: string;
-  parentId?: string;
-};
-
-type EntryContextType = { [K in string]: SingleEntry };
-
 const navigationActions = {
   [ACTIONS.PUSH]: push,
   [ACTIONS.REPLACE]: replace,
@@ -96,6 +93,8 @@ const navigationActions = {
 const platform = getPlatform();
 
 export function NavigationProvider({ children }: Props) {
+  const { url: deepLinkURL } = React.useContext(URLSchemeContext);
+
   const {
     appData: { layoutVersion },
     rivers,
@@ -122,9 +121,7 @@ export function NavigationProvider({ children }: Props) {
   const pathname = state?.location?.pathname;
   const pathnameRef = React.useRef(pathname);
 
-  const { context }: EntryContextType = React.useContext(
-    ZappPipesEntryContext.Context
-  );
+  const { context } = React.useContext(ZappPipesEntryContext.Context);
 
   const { openModal, dismissModal } = useModalStore();
 
@@ -380,7 +377,18 @@ export function NavigationProvider({ children }: Props) {
     }
   };
 
-  const handleHookPresent = ({ hookPlugin, route, payload }, dispose) => {
+  const handleHookPresent = (
+    {
+      hookPlugin,
+      route,
+      payload,
+    }: {
+      hookPlugin: Hook;
+      route: string;
+      payload: object;
+    },
+    dispose
+  ) => {
     if (hookPlugin?.lastHook) {
       dispose();
     }
@@ -394,6 +402,8 @@ export function NavigationProvider({ children }: Props) {
     } else {
       dispatch(push(route, { entry: payload, screen: hookPlugin }));
     }
+
+    closeLoadingOverlay();
   };
 
   const handleHookError = ({ error, hookPlugin, callback }, dispose) => {
@@ -412,9 +422,11 @@ export function NavigationProvider({ children }: Props) {
     if (callback && typeof callback === "function") {
       callback();
     }
+
+    closeLoadingOverlay();
   };
 
-  const handleHookCancel = ({ hookPlugin, callback }, dispose) => {
+  const handleHookCancel = ({ hookPlugin, callback, abort }, dispose) => {
     dispose();
     setStartUpHooks(false);
 
@@ -422,11 +434,15 @@ export function NavigationProvider({ children }: Props) {
       callback();
     }
 
-    if (hookPlugin.isModalHook()) {
-      navigator.dismissModal();
-    } else {
-      goBack(true, true);
+    if (!abort) {
+      if (hookPlugin.isModalHook()) {
+        navigator.dismissModal();
+      } else {
+        goBack(true, true);
+      }
     }
+
+    closeLoadingOverlay();
   };
 
   const handleHookSuccess = ({ hookPlugin, callback }) => {
@@ -437,6 +453,10 @@ export function NavigationProvider({ children }: Props) {
     }
   };
 
+  const handleBackgroundHook = () => {
+    openLoadingOverlay();
+  };
+
   const checkStartUpHooks = React.useMemo(() => {
     if (!pluginConfigurations) return false;
 
@@ -498,8 +518,7 @@ export function NavigationProvider({ children }: Props) {
     ({ hookPlugin, payload, callback }, dispose) => {
       if (hookPlugin?.lastHook) {
         dispose({ disposeAll: true });
-
-        startUpHooks.current && setStartUpHooks(false);
+        currentStartUpHooks.current && setStartUpHooks(false);
       }
 
       dispatch(
@@ -507,6 +526,8 @@ export function NavigationProvider({ children }: Props) {
       );
 
       callback?.();
+
+      closeLoadingOverlay();
     };
 
   const offlinePlugin = React.useMemo(() => {
@@ -614,25 +635,37 @@ export function NavigationProvider({ children }: Props) {
           },
         };
 
-        HooksManager(hooksOptions)
+        const hooksManager = HooksManager(hooksOptions);
+
+        hooksManager.subscriber
           .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
           .on(HOOKS_EVENTS.ERROR, handleHookError)
           .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
           .on(HOOKS_EVENTS.SUCCESS, handleHookSuccess)
+          .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
           .on(
             HOOKS_EVENTS.COMPLETE,
             handleHookComplete(navigationAction, targetRoute, {
               screen,
               options,
             })
-          )
-          .handleHooks(legacyScreenData({ entry, screen }));
+          );
+
+        hooksManager.handleHooks(legacyScreenData({ entry, screen }));
       } else {
         dispatch(navigationAction(targetRoute, { screen, entry, options }));
       }
     },
   });
 
+  const openLoadingOverlay = React.useCallback(() => {
+    deepLinkURL && isVizioPlatform() && loadingOverlayManager.show();
+  }, [deepLinkURL]);
+
+  const closeLoadingOverlay = React.useCallback(() => {
+    loadingOverlayManager.hide();
+  }, []);
+
   const openPiP = React.useCallback(() => {
     dispatch(setVideoPiP());
   }, []);
@@ -738,7 +771,15 @@ export function NavigationProvider({ children }: Props) {
       getStackForPathname,
       mainStack: state.stack.mainStack,
     }),
-    [rivers, plugins, JSON.stringify(state), appLaunched, startUpHooks]
+    [
+      rivers,
+      plugins,
+      // TODO: Compare entire screen data from state must be removed
+      // State size could be large ~150kb and take 80ms on android tv on 8 rails
+      JSON.stringify(state, getJsonReplacer()),
+      appLaunched,
+      startUpHooks,
+    ]
   );
 
   // when running the tests, we pass the dispatch function

package/App/NavigationProvider/__tests__/__snapshots__/navigationProvider.test.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NavigationProvider /> modal feature removes the visible flag when dismissing a modal 1`] = `
-Object {
-  "options": Object {
+{
+  "options": {
     "animated": true,
     "animationType": "slide",
     "onDismiss": [Function],
@@ -11,22 +11,20 @@ Object {
     "presentationStyle": "overFullScreen",
     "transparent": true,
   },
-  "props": Object {
-    "screenData": Object {},
-  },
-  "screen": Object {
+  "props": undefined,
+  "screen": {
     "id": "A1234",
-    "navigations": Array [],
-    "ui_components": Array [],
+    "navigations": [],
+    "ui_components": [],
   },
   "visible": true,
 }
 `;
 
 exports[`<NavigationProvider /> modal feature removes the visible flag when dismissing a modal 2`] = `
-Object {
-  "options": Object {},
-  "props": Object {},
+{
+  "options": {},
+  "props": {},
   "screen": null,
   "visible": false,
 }
@@ -35,8 +33,8 @@ Object {
 exports[`<NavigationProvider /> modal feature sets the modalState when opening a modal 1`] = `undefined`;
 
 exports[`<NavigationProvider /> modal feature should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet 1`] = `
-Object {
-  "options": Object {
+{
+  "options": {
     "animated": false,
     "animationType": "none",
     "onDismiss": [Function],
@@ -45,14 +43,14 @@ Object {
     "presentationStyle": "overFullScreen",
     "transparent": true,
   },
-  "props": Object {},
-  "screen": Object {
-    "ModalBottomSheetContent": Object {
+  "props": {},
+  "screen": {
+    "ModalBottomSheetContent": {
       "id": "A1234",
-      "navigations": Array [],
-      "ui_components": Array [],
+      "navigations": [],
+      "ui_components": [],
     },
-    "modalBottomSheetContentProps": Object {
+    "modalBottomSheetContentProps": {
       "some": "props",
     },
   },
@@ -61,9 +59,9 @@ Object {
 `;
 
 exports[`<NavigationProvider /> modal feature should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet 2`] = `
-Object {
-  "options": Object {},
-  "props": Object {},
+{
+  "options": {},
+  "props": {},
   "screen": null,
   "visible": false,
 }