@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5135101838 → 12.0.0-alpha.5208030571

package/Components/Screen/TV/index.web.tsx

@@ -0,0 +1,151 @@
+import * as React from "react";
+import { last, pathOr } from "ramda";
+import { ScreenResolver } from "../../ScreenResolver";
+import {
+  getNavigationProps,
+  getPathAttributes,
+  resolveNavigationPlugin,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  route: string;
+  Components: Components;
+};
+
+const isPlayer = (routeState): boolean => {
+  const pluginType = pathOr(
+    "unknown_plugin_type",
+    ["state", "screen", "plugin_type"],
+    routeState
+  );
+
+  return pluginType === "player";
+};
+
+const getActiveRiver = ({
+  screenId,
+  screenType,
+  routeState,
+  rivers,
+  fallbackActiveRiver,
+}) => {
+  if (rivers[screenId]) {
+    // river presents
+    return screenType === "hooks"
+      ? routeState?.state?.entry?.payload
+      : routeState?.state?.screen;
+  }
+
+  // screenId is not presented into rivers, use fallback instead
+  return fallbackActiveRiver;
+};
+
+const getNavigations = ({
+  screenId,
+  screenType,
+  routeState,
+  rivers,
+  fallbackNavigations,
+}) => {
+  if (rivers[screenId]) {
+    // river presents
+    return screenType === "hooks"
+      ? routeState?.state?.entry?.payload.navigations
+      : routeState?.state?.screen?.navigations;
+  }
+
+  // screenId is not presented into rivers, use fallback instead
+  return fallbackNavigations;
+};
+
+export const Screen = (props: Props) => {
+  if (!props.route) {
+    throw new Error("Required props route is missing");
+  }
+
+  const navigator = useNavigation();
+  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
+
+  const pathAttributes = getPathAttributes({ pathname: props.route });
+  const routeState = navigator.getStackForPathname(props.route);
+
+  const { screenType, screenId } = last(pathAttributes);
+
+  // console.log("debug_2", "Screen", {
+  //   screenType,
+  //   routeState,
+  //   route: props.route,
+  //   navigator,
+  // });
+
+  const activeRiver = getActiveRiver({
+    screenId,
+    screenType,
+    routeState,
+    rivers,
+    fallbackActiveRiver: navigator.activeRiver,
+  });
+
+  const navigationProps = getNavigationProps({
+    navigator: {
+      // @ts-ignore
+      activeRiver,
+      // @ts-ignore
+      screenTitle: routeState.state.entry?.title || routeState.screen?.name,
+    },
+    category: "menu",
+  });
+
+  const navigations = getNavigations({
+    screenId,
+    screenType,
+    routeState,
+    rivers,
+    fallbackNavigations: navigator.activeRiver.navigations,
+  });
+
+  const menuPlugin = resolveNavigationPlugin({
+    category: "menu",
+    navigations,
+    plugins,
+  }) as QuickBrickPlugin;
+
+  const NavBar = (props.Components.NavBar ||
+    menuPlugin.module) as React.ComponentType<any>;
+
+  const isNavBarVisible = !isPlayer(routeState);
+
+  const screenData =
+    screenType === "hooks"
+      ? routeState?.state?.entry
+      : routeState?.state?.screen;
+
+  return (
+    <>
+      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
+        <NavBar
+          groupId={props.route}
+          isVisible={isNavBarVisible}
+          menuPlugin={menuPlugin}
+          navigationProps={navigationProps}
+          // Maybe activeRiver?
+        />
+      </NavBarContainer>
+      <ScreenResolver
+        screenType={screenType}
+        screenId={screenId}
+        screenData={screenData}
+        groupId={props.route}
+      />
+    </>
+  );
+};

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -11,7 +11,9 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   }
 >
   <View
+    hasMenu={false}
     id="/river/testId"
+    pathname="/river/testId"
     selected="testId"
     testID="navBar"
     title=""
@@ -41,7 +43,9 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   }
 >
   <View
+    hasMenu={false}
     id="/river/testId"
+    pathname="/river/testId"
     selected="testId"
     testID="navBar"
     title=""

package/Components/Screen/index.tsx

@@ -6,7 +6,10 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { getNavigationPropsV2 } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import {
+  getNavigationPropsV2,
+  resolveNavigationPlugin,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useDimensions,
@@ -52,11 +55,11 @@ function isValidColor(string) {
 }
 
 type Props = {
-  setToggleMenu: () => void;
-  setCloseMenu: () => void;
+  pathname: unknown;
+  screenData: unknown;
 };
 
-export function Screen({ setToggleMenu, setCloseMenu }: Props) {
+export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
@@ -70,26 +73,38 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
     fullDimensions: true,
   });
 
-  const routeData = useRoute();
+  const { screenData, pathname } = useRoute();
 
   const currentRiver = useScreenData(
-    getScreenId(routeData.screenData, navigation.activeRiver)
+    getScreenId(screenData, navigation.activeRiver)
   );
 
   const { title } = useNavbarState();
 
-  const navBarProps = React.useMemo(
-    () => ({
-      ...getNavigationPropsV2({
-        currentRiver,
-        title,
-        category: "nav_bar",
-      }),
-      setToggleMenu,
-      setCloseMenu,
-    }),
-    [currentRiver, setCloseMenu, setToggleMenu]
-  );
+  const hasMenu =
+    resolveNavigationPlugin({
+      category: "menu",
+      navigations: currentRiver.navigations,
+      plugins,
+    })?.identifier === "quick_brick_side_menu";
+
+  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(() => {
+    const props = getNavigationPropsV2({
+      currentRiver,
+      title,
+      category: "nav_bar",
+    });
+
+    if (props) {
+      return {
+        ...props,
+        id: pathname,
+        pathname: pathname,
+      };
+    }
+
+    return null;
+  }, [currentRiver, pathname]);
 
   const NavBar = React.useMemo(
     () =>
@@ -97,12 +112,10 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
         "nav_bar",
         currentRiver,
         plugins
-      ) as React.ComponentType<MobileNavBarPluginProps>,
+      ) as React.ComponentType<MobileNavBarPluginProps & { hasMenu: boolean }>,
     []
   );
 
-  const { screenData, pathname } = routeData;
-
   const offlinePlugin = getComponentModule({
     plugins,
     components: {},
@@ -133,9 +146,7 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   return (
     <ScreenContextProvider pathname={pathname}>
       <View style={style}>
-        <NavBar
-          {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
-        />
+        {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
 
         <OfflineFallbackScreen screenData={targetScreenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}

package/Components/ScreenResolver/index.tsx

@@ -32,12 +32,13 @@ type Props = {
     nextFocusLeft?: React.Ref<any>;
     nextFocusUp?: React.Ref<any>;
   };
+  groupId?: string;
 };
 
 export function ScreenResolverComponent(props: Props) {
   useScreenAnalytics(props);
 
-  const { screenType, screenId, screenData } = props;
+  const { screenType, screenId, screenData, groupId } = props;
 
   const { hookPlugin } = screenData || {};
 
@@ -81,6 +82,7 @@ export function ScreenResolverComponent(props: Props) {
         item={screenData}
         mode={mode === "PIP" ? "PIP" : "FULLSCREEN"}
         isModal={false}
+        groupId={groupId}
       />
     );
   }

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -30,11 +30,6 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
       playerId="player1"
       resizeMode="cover"
       screenConfig={Object {}}
-      source={
-        Object {
-          "uri": "",
-        }
-      }
       style={Object {}}
     />
   </View>

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -9,6 +9,8 @@ import {
   TapGestureHandler,
   GestureHandlerRootView,
 } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -58,6 +60,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     setLastSnap,
   } = useModalAnimationContext();
 
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
@@ -69,6 +73,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
     playerAnimationState !== PlayerAnimationStateEnum.maximaze;
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible &&
+    isNotMinimizeMaximazeAnimation &&
+    (isMaximazedModal || isMinimizedModal);
+
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -290,15 +299,13 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       >
         <View pointerEvents="box-none">
           <PanGestureHandler
-            enabled={
-              (isMaximazedModal || isMinimizedModal) &&
-              isNotMinimizeMaximazeAnimation
-            }
+            enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximazedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
+            activeOffsetY={[-5, 5]}
           >
             <Animated.View>
               <NativeViewGestureHandler

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -3,6 +3,8 @@ import { Animated, StyleSheet } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PanGestureHandler, State } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -35,9 +37,14 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   } = useModalAnimationContext();
 
   const { videoModalState } = useNavigation();
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
   const isMinimizedModal = videoModalState.mode === "MINIMIZED";
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible && (isMaximazedModal || isMinimizedModal);
+
   const onGestureEvent = Animated.event(
     [{ nativeEvent: { translationY: dragVideoPlayerY } }],
     { useNativeDriver: true }
@@ -53,7 +60,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
       if (videoModalState.mode === "MAXIMIZED") {
         if (translationY > 0) {
           const endOffsetY =
-            lastSnap + preparedTranslationY + dragToss * velocityY + 150;
+            lastSnap + preparedTranslationY + dragToss * velocityY + 200;
 
           let destSnapPoint = modalSnapPoints[0];
 
@@ -127,7 +134,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 
   return (
     <PanGestureHandler
-      enabled={isMaximazedModal || isMinimizedModal}
+      enabled={isEnablePanGesture}
       shouldCancelWhenOutside={isMaximazedModal}
       onGestureEvent={onGestureEvent}
       onHandlerStateChange={onHandlerStateChange}

package/Components/Viewport/ViewportTracker/ViewportTracker.tsx

@@ -15,7 +15,7 @@ export function ViewportTracker(props) {
 
   const assignRef = React.useCallback(
     (ref) => {
-      callOnChildren(children, "ref", ref);
+      children?.ref?.(ref);
       setNodeHandle(findNodeHandle(ref));
     },
     [children]

package/Components/Viewport/ViewportTracker/index.tsx

@@ -6,6 +6,7 @@ import { ViewportEventContext, ViewportEvents } from "../ViewportEvents";
 type Props = {
   viewportEventsManager?: any;
   children: React.ReactNode;
+  flatListRef?: any; // this ref is used to bind to children component
 };
 
 export function ViewportTracker(props: Props) {

package/Components/Viewport/utils.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export function callOnChildren(children, method, ...args) {
   const childMethod = React.Children.only(children).props[method];
-  childMethod && childMethod(...args);
+  typeof childMethod === "function" && childMethod?.(...args);
 }
 
 export function isInViewport(

package/Contexts/MenuToggleContext/{index.js → index.ts}

@@ -1,4 +1,5 @@
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";
+import React from "react";
 
 const initialContext = { toggleMenu: {}, closeMenu: {}, openMenu: {} };
 
@@ -16,3 +17,18 @@ const stateValidator = ({ property }) =>
   property === "openMenu";
 
 export const MenuToggleContext = createContext(initialContext, stateValidator);
+
+export type MenuToggleContextType = {
+  toggleMenu: any;
+  setToggleMenu: () => void;
+  openMenu: any;
+  setOpenMenu: () => void;
+  closeMenu: any;
+  setCloseMenu: () => void;
+};
+
+export const useMenuToggleContext = () => {
+  return React.useContext<MenuToggleContextType>(
+    MenuToggleContext.ReactContext
+  );
+};

package/Contexts/ScreenContext/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScreenContext withScreenContext should return the context 1`] = `null`;

package/Contexts/ScreenContext/__tests__/index.test.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react-native";
+import { ScreenContext, ScreenContextProvider, withScreenContext } from "../";
+import React from "react";
+
+describe("ScreenContext", () => {
+  describe("ScreneContext context", () => {
+    it("should return the context", () => {
+      expect(ScreenContext).toBeDefined();
+    });
+  });
+
+  describe("ScreenContextProvider", () => {
+    it("should return the provider", () => {
+      expect(ScreenContextProvider).toBeDefined();
+    });
+  });
+
+  describe("withScreenContext", () => {
+    it("should return the context", () => {
+      const Component = () => null;
+      const WrappedComponent = withScreenContext(Component);
+      const { toJSON } = render(<WrappedComponent />);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/Contexts/ScreenContext/index.tsx

@@ -1,4 +1,10 @@
-import React, { createContext, ReactNode, useMemo, useState } from "react";
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
 import {
   useCurrentScreenData,
   useNavigation,
@@ -7,27 +13,67 @@ import {
 } 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 { create, StoreApi, UseBoundStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+import { Animated } from "react-native";
+
+interface NavBarStoreState {
+  visible: boolean;
+  title: string;
+  summary: string;
+  setVisible: (state: boolean) => void;
+  setTitle: (title: string) => void;
+  setSummary: (subtitle: string) => void;
+  height: number;
+  scrollState: number;
+  isOnBottomNavBar: boolean;
+  scrollYAnimated: Animated.Value;
+}
+
+interface NavBarState {
+  visible: boolean;
+  title: string;
+  summary: string;
+  setVisible: (state: boolean) => void;
+  setTitle: (title: string) => void;
+  setSummary: (subtitle: string) => void;
+}
 
 type ScreenContextType = {
-  navBar: {
-    visible: boolean;
-    title: string;
-    summary: string;
-    setVisible: (state: boolean) => void;
-    setTitle: (title: string) => void;
-    setSummary: (subtitle: string) => void;
-  };
+  _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
+  navBar: NavBarState;
   legacyFormatScreenData: LegacyNavigationScreenData | null;
 };
 
+const createStore = () =>
+  create<NavBarStoreState>((set) => ({
+    title: "",
+    summary: "",
+    visible: true,
+    height: 0,
+    scrollState: 0,
+    isOnBottomNavBar: true,
+    scrollYAnimated: new Animated.Value(0),
+    setTitle(title) {
+      set({ title });
+    },
+    setSummary(summary) {
+      set({ summary });
+    },
+    setVisible(visible) {
+      set({ visible });
+    },
+  }));
+
 export const ScreenContext = createContext<ScreenContextType>({
+  _navBarStore: createStore(),
   navBar: {
     visible: true,
     title: "",
     summary: "",
-    setVisible: (_state) => {},
-    setTitle: (_title) => {},
-    setSummary: (_subtitle) => {},
+    setVisible: (_state) => void 0,
+    setTitle: (_title) => void 0,
+    setSummary: (_subtitle) => void 0,
   },
   legacyFormatScreenData: {} as LegacyNavigationScreenData,
 });
@@ -53,9 +99,30 @@ export function ScreenContextProvider({
   const isNested = useNestedNavigationContext();
   const currentScreenScreenData = useCurrentScreenData();
 
-  const [navBarTitle, setNavBarTitle] = useState("");
-  const [navBarSummary, setNavBarSummary] = useState("");
-  const [navBarVisible, setNavBarVisible] = useState(true);
+  const screenNavBarStateRef =
+    useRef<null | ReturnType<typeof createStore>>(null);
+
+  const getScreenNavBarState = useCallback(() => {
+    if (screenNavBarStateRef.current !== null) {
+      return screenNavBarStateRef.current;
+    }
+
+    const navBarState = createStore();
+    screenNavBarStateRef.current = navBarState;
+
+    return navBarState;
+  }, []);
+
+  const screenNavBarState = getScreenNavBarState()(
+    useShallow((state) => ({
+      visible: state.visible,
+      title: state.title,
+      summary: state.summary,
+      setTitle: state.setTitle,
+      setSummary: state.setSummary,
+      setVisible: state.setVisible,
+    }))
+  );
 
   const isHook = pathname.includes("hook");
 
@@ -73,26 +140,28 @@ export function ScreenContextProvider({
   const isVisible = isNavBarVisible(
     pathname,
     currentScreenScreenData, // what fallback should be if currentScreenData is not available?
-    navBarVisible,
+    screenNavBarState.visible,
     canGoBack(isHook, pathname),
     videoModalState
   );
 
-  const navBarState = useMemo(() => {
-    return {
-      title: navBarTitle,
-      summary: navBarSummary,
+  const navBarState = useMemo(
+    () => ({
+      title: screenNavBarState.title,
+      summary: screenNavBarState.summary,
       visible: isVisible,
-      setTitle: setNavBarTitle,
-      setSummary: setNavBarSummary,
-      setVisible: setNavBarVisible,
-    };
-  }, [isVisible, navBarTitle, navBarSummary]);
+      setTitle: screenNavBarState.setTitle,
+      setSummary: screenNavBarState.setSummary,
+      setVisible: screenNavBarState.setVisible,
+    }),
+    [isVisible, screenNavBarState.title, screenNavBarState.summary]
+  );
 
   return (
     <ScreenContext.Provider
       value={useMemo(
         () => ({
+          _navBarStore: getScreenNavBarState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
         }),

package/Contexts/ZappPipesContext/ZappPipesEntryContext.ts

@@ -63,7 +63,7 @@ function prepareContext(
   const parent = findParent(currentContext, route, getChildren);
 
   const newEntry = {
-    route: route,
+    route,
     id: uuid(),
     data: newContext,
   } as SingleEntry;

package/package.json

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