@applicaster/zapp-react-native-ui-components 11.0.0-rc.99 → 12.0.0-rc.1

package/Components/VideoModal/VideoModal.tsx

@@ -29,6 +29,7 @@ import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 import { requiresAuthentication } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 const styles = StyleSheet.create({
   container: {
@@ -139,6 +140,8 @@ const VideoModalComponent = () => {
     logTimestamp(item?.id?.toString());
   }, []);
 
+  const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
+
   return (
     <View
       style={[
@@ -151,23 +154,23 @@ const VideoModalComponent = () => {
         },
       ]}
     >
-      <PathnameContext.Provider
-        value={`${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`}
-      >
-        {itemIdHooksFinished === item?.id ? (
-          <HandlePlayable
-            item={item}
-            isModal={mode !== "PIP"}
-            modalHeight={docked ? height : modalSize.height}
-            modalWidth={modalSize.width}
-            mode={mode}
-          />
-        ) : (
-          <View style={styles.loaderContainer}>
-            <Spinner />
-          </View>
-        )}
-      </PathnameContext.Provider>
+      <ScreenContextProvider pathname={pathname}>
+        <PathnameContext.Provider value={pathname}>
+          {itemIdHooksFinished === item?.id ? (
+            <HandlePlayable
+              item={item}
+              isModal={mode !== "PIP"}
+              modalHeight={docked ? height : modalSize.height}
+              modalWidth={modalSize.width}
+              mode={mode}
+            />
+          ) : (
+            <View style={styles.loaderContainer}>
+              <Spinner />
+            </View>
+          )}
+        </PathnameContext.Provider>
+      </ScreenContextProvider>
     </View>
   );
 };

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
 import { View } from "react-native";
 
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
 const props = {
   entry: { id: "test" },
   style: {
@@ -35,18 +37,30 @@ jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   platformSelect: jest.fn((props) => props.android),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+  })),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    data: { screen: { id: "testId" } },
+  })),
+}));
+
 jest.mock("../utils", () => ({ playerDimesionsHack: {} }));
 
 const { PlayerWrapper, defaultAspectRatioWidth } = require("../PlayerWrapper");
 
 jest.useFakeTimers();
+const children = jest.fn(() => {});
 
 describe("PlayerWrapper", () => {
   it("renders properly", () => {
     useIsTablet.mockReturnValue(false);
 
-    const element = renderer.create(
-      <PlayerWrapper {...props}>{jest.fn(() => {})}</PlayerWrapper>
+    const element = renderWithProviders(
+      <PlayerWrapper {...props}>{children}</PlayerWrapper>
     );
 
     expect(element).toMatchSnapshot();
@@ -55,9 +69,7 @@ describe("PlayerWrapper", () => {
   it("renders inline", () => {
     useIsTablet.mockReturnValue(false);
 
-    const children = jest.fn(() => {});
-
-    const element = renderer.create(
+    const element = renderWithProviders(
       <PlayerWrapper {...props} inline={true} isModal={true}>
         {children}
       </PlayerWrapper>
@@ -69,9 +81,9 @@ describe("PlayerWrapper", () => {
   it("renders inline on tablet in landscape orientation", () => {
     useIsTablet.mockReturnValue(true);
 
-    const element = renderer.create(
+    const element = renderWithProviders(
       <PlayerWrapper {...props} inline={true} isModal={true}>
-        {jest.fn(() => {})}
+        {children}
       </PlayerWrapper>
     );
 
@@ -84,7 +96,7 @@ describe("PlayerWrapper", () => {
     const children = jest.fn(() => {});
     const dimensions = { height: 50, width: props.style.width };
 
-    const element = renderer.create(
+    const element = renderWithProviders(
       <PlayerWrapper
         {...props}
         inline={true}

package/Components/VideoModal/__tests__/__snapshots__/PlayerDetails.test.tsx.snap

@@ -2,19 +2,14 @@
 
 exports[`PlayerDetails renders properly 1`] = `
 <View
+  collapsable={false}
   style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      Object {
-        "marginTop": -8,
-        "paddingTop": -8,
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-    ]
+    Object {
+      "backgroundColor": "transparent",
+      "flex": 1,
+      "marginTop": -8,
+      "paddingTop": -8,
+    }
   }
 >
   <View
@@ -27,19 +22,14 @@ exports[`PlayerDetails renders properly 1`] = `
 
 exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] = `
 <View
+  collapsable={false}
   style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      Object {
-        "marginTop": -20,
-        "paddingTop": 40,
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-    ]
+    Object {
+      "backgroundColor": "transparent",
+      "flex": 1,
+      "marginTop": -20,
+      "paddingTop": 40,
+    }
   }
 >
   <View

package/Contexts/InteractionManagerContext/index.ts

@@ -3,8 +3,6 @@ import { produce } from "immer";
 import { useShallow } from "zustand/react/shallow";
 import { pick } from "ramda";
 
-type Callback = () => void;
-
 type InteractionState = {
   isHorizontalInteractionAllowed: boolean;
   allowHorizontalInteraction: Callback;

package/Contexts/ScreenContext/index.tsx

@@ -0,0 +1,118 @@
+import React, { createContext, ReactNode, useMemo, useState } from "react";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useCurrentScreenData,
+  useNavigation,
+  useRoute,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
+import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
+import { isNavBarVisible } from "../../Components/Screen/navigationHandler";
+
+type ScreenContextType = {
+  navBar: {
+    visible: boolean;
+    title: string;
+    summary: string;
+    setVisible: (state: boolean) => void;
+    setTitle: (title: string) => void;
+    setSummary: (subtitle: string) => void;
+  };
+  legacyFormatScreenData: LegacyNavigationScreenData | null;
+};
+
+export const ScreenContext = createContext<ScreenContextType>({
+  navBar: {
+    visible: true,
+    title: "",
+    summary: "",
+    setVisible: (_state) => {},
+    setTitle: (_title) => {},
+    setSummary: (_subtitle) => {},
+  },
+  legacyFormatScreenData: {} as LegacyNavigationScreenData,
+});
+
+export function ScreenContextProvider({
+  children,
+  pathname,
+}: {
+  children: ReactNode;
+  pathname: string;
+}) {
+  const { data, modalData, videoModalState, canGoBack } = useNavigation();
+
+  const { rivers: _rivers } = usePickFromState(["rivers", "plugins"]);
+
+  // There are 4 route scenarios
+  // For regular screens take date from navigator stack.
+  // is path is model grab screenData from modal state
+  // if path is video modal grab screenData from video state
+  // if path is hook modal grab screenData from hook state
+
+  const { screenData: routeScreenData } = useRoute();
+
+  const isModal = useModalNavigationContext();
+  const isNested = useNestedNavigationContext();
+  const currentScreenScreenData = useCurrentScreenData();
+
+  const [navBarTitle, setNavBarTitle] = useState("");
+  const [navBarSummary, setNavBarSummary] = useState("");
+  const [navBarVisible, setNavBarVisible] = useState(true);
+
+  const isHook = pathname.includes("hook");
+
+  // screenData is replacement of useScreenContext()
+  const screenData = useMemo(() => {
+    if (isModal && modalData) return modalData ?? ({} as NavigationScreenData);
+
+    if (isNested && data?.nested) {
+      return data?.nested ?? ({} as ScreenData);
+    }
+
+    return data ?? ({} as ScreenData);
+  }, [isModal, isNested, modalData, data]);
+
+  const isVisible = isNavBarVisible(
+    pathname,
+    currentScreenScreenData, // what fallback should be if currentScreenData is not available?
+    navBarVisible,
+    canGoBack(isHook, pathname),
+    videoModalState
+  );
+
+  const navBarState = useMemo(() => {
+    return {
+      title: navBarTitle,
+      summary: navBarSummary,
+      visible: isVisible,
+      setTitle: setNavBarTitle,
+      setSummary: setNavBarSummary,
+      setVisible: setNavBarVisible,
+    };
+  }, [isVisible, navBarTitle, navBarSummary]);
+
+  return (
+    <ScreenContext.Provider
+      value={useMemo(
+        () => ({
+          navBar: navBarState,
+          legacyFormatScreenData: routeScreenData,
+        }),
+        [navBarState, screenData, routeScreenData]
+      )}
+    >
+      {children}
+    </ScreenContext.Provider>
+  );
+}
+
+export function withScreenContext(Component: React.ComponentType<any>) {
+  return function WithScreenContextWrapper(props) {
+    return (
+      <ScreenContext.Consumer>
+        {(value) => <Component {...props} screenContext={value} />}
+      </ScreenContext.Consumer>
+    );
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "11.0.0-rc.99",
+  "version": "12.0.0-rc.1",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -35,10 +35,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "11.0.0-rc.99",
-    "@applicaster/zapp-react-native-bridge": "11.0.0-rc.99",
-    "@applicaster/zapp-react-native-redux": "11.0.0-rc.99",
-    "@applicaster/zapp-react-native-utils": "11.0.0-rc.99",
+    "@applicaster/applicaster-types": "12.0.0-rc.1",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.1",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.1",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.1",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",