@applicaster/zapp-react-native-ui-components 12.0.0-alpha.7725319213 → 12.0.0-alpha.8433353116

package/Components/Screen/index.tsx

@@ -1,35 +1,37 @@
 /// <reference types="@applicaster/applicaster-types" />
-import React, { useMemo } from "react";
+import React from "react";
 import * as R from "ramda";
 import { View } from "react-native";
-import { RouteManager } from "../RouteManager";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useScreenOrientationHandler } from "./orientationHandler";
-import { useScreenConfiguration } from "../River/useScreenConfiguration";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 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 { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  useDimensions,
+  useRoute,
+  useCurrentScreenData,
+  useNavbarState,
+  useScreenData,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
+
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { RouteManager } from "../RouteManager";
+import { useScreenConfiguration } from "../River/useScreenConfiguration";
+import { useScreenOrientationHandler } from "./orientationHandler";
 
-type Props = {
-  pathname: string;
-  screenData: Record<string, any>;
-  NavBar: ZappPlugin;
-  Menu: ZappPlugin;
-  navBarProps: Record<string, any>;
-  isNavBarVisible: boolean;
-  menuProps: {
-    setToggleMenu: () => void;
-    toggleMenu: () => void;
-    openMenu: () => void;
-    setOpenMenu: () => void;
-    closeMenu: () => void;
-    setCloseMenu: () => void;
-    dimensions: { window: number };
-    navigator: ZappNavigationProps;
-    bottomTabBarHeight: number;
-    isRTL: boolean;
-    category: string;
-  } & QuickBrickAppNavigator;
+const getScreenId = (
+  screenData: LegacyNavigationScreenData,
+  fallbackRiver: ZappRiver
+) => {
+  return screenData?.targetScreen
+    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    : "screen_id" in screenData
+    ? screenData.screen_id
+    : fallbackRiver.id;
 };
 
 function colorIsNotTransparent(color) {
@@ -49,25 +51,65 @@ function isValidColor(string) {
   return string && string !== "transparent" && colorIsNotTransparent(string);
 }
 
-export function Screen(props: Props) {
-  const { pathname, screenData, NavBar } = props;
+type Props = {
+  setToggleMenu: () => void;
+  setCloseMenu: () => void;
+};
+
+export function Screen({ setToggleMenu, setCloseMenu }: Props) {
+  const theme = useTheme<BaseThemePropertiesMobile>();
+  const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
 
-  const offlinePlugin = useMemo(
+  // Gets the data for the current screen configuration
+  const currentScreenData = useCurrentScreenData();
+  const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
+  const insets = useSafeAreaInsets();
+
+  const { width: screenWidth } = useDimensions("screen", {
+    fullDimensions: true,
+  });
+
+  const routeData = useRoute();
+
+  const currentRiver = useScreenData(
+    getScreenId(routeData.screenData, navigation.activeRiver)
+  );
+
+  const { title } = useNavbarState();
+
+  const navBarProps = React.useMemo(
+    () => ({
+      ...getNavigationPropsV2({
+        currentRiver,
+        title,
+        category: "nav_bar",
+      }),
+      setToggleMenu,
+      setCloseMenu,
+    }),
+    [currentRiver, setCloseMenu, setToggleMenu]
+  );
+
+  const NavBar = React.useMemo(
     () =>
-      R.compose(
-        R.prop("module"),
-        R.find(R.propEq("identifier", "offline-experience"))
-      )(plugins),
-    [plugins]
+      getNavigationPluginModule(
+        "nav_bar",
+        currentRiver,
+        plugins
+      ) as React.ComponentType<MobileNavBarPluginProps>,
+    []
   );
 
-  const { OfflineFallbackScreen } = offlinePlugin;
+  const { screenData, pathname } = routeData;
 
-  // Gets the data for the current screen configuration
-  const currentScreenData = useCurrentScreenData();
-  const theme = useTheme();
-  const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
+  const offlinePlugin = getComponentModule({
+    plugins,
+    components: {},
+    componentType: "offline-experience",
+  });
+
+  const { OfflineFallbackScreen } = offlinePlugin;
 
   const style = React.useMemo(
     () => ({
@@ -75,21 +117,28 @@ export function Screen(props: Props) {
       backgroundColor: isValidColor(backgroundColor)
         ? backgroundColor
         : theme.app_background_color,
+      paddingTop: 0,
+      // paddingBottom: insets.bottom, // Should be applied directly by UI plugin
+      // paddingLeft: insets.left, // Should be applied directly by UI plugin
+      // paddingRight: insets.right, // Should be applied directly by UI plugin
     }),
-    [theme.app_background_color, backgroundColor]
+    [insets, screenWidth, theme.app_background_color, backgroundColor]
   );
 
   const targetScreenData =
-    currentScreenData || screenData?.targetScreen || screenData;
+    currentScreenData || (screenData as any)?.targetScreen || screenData;
 
   useScreenOrientationHandler({ screenData: targetScreenData });
 
   return (
     <ScreenContextProvider pathname={pathname}>
       <View style={style}>
-        <NavBar key={pathname} {...props.navBarProps} />
+        <NavBar
+          {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
+        />
 
         <OfflineFallbackScreen screenData={screenData}>
+          {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
           <RouteManager pathname={pathname} screenData={screenData} />
         </OfflineFallbackScreen>
       </View>

package/Components/Screen/navigationHandler.ts

@@ -1,85 +1,3 @@
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-/**
- * This function helps to decide wether the navbar should be presented on the screen
- * based on route and / or screen Data
- *
- * Currently the scenarios include
- * - players => false
- * - search screen plugin => false
- * - hooks with `showNavBar: true` or `presentFullScreen` not set to true, defaults to no navbar for hook screens
- * - screens with `allow_screen_plugin_presentation` in general property => false
- *
- * @param {String} route current route of the screen
- * @param {Object} screenData payload associated with the currently presented screen
- * @returns {Boolean}
- */
-export function isNavBarVisible(
-  route,
-  screenData,
-  showNavBar,
-  canGoBack,
-  videoModalState: QuickBrickVideoModalState | null = null
-) {
-  /* screenData is not actual navigator.data
-   * or navigator.screenData,
-   * but navigator.data.screen */
-  if (route.includes("playable")) {
-    return false;
-  }
-
-  if (
-    videoModalState?.mode === "FULLSCREEN" &&
-    videoModalState?.visible === true
-  ) {
-    return false;
-  }
-
-  if (screenData?.type === "qb_search_screen" && !isTV()) {
-    return false;
-  }
-
-  /* Match if screen is Hook */
-  if (route.startsWith("/hooks/")) {
-    const module = screenData?.module;
-
-    if (module?.presentFullScreen) {
-      return false;
-    }
-
-    return module?.showNavBar ?? false;
-  }
-
-  if (screenData?.hookPlugin) {
-    const hookPlugin = screenData?.hookPlugin?.module;
-
-    return (
-      hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true || false
-    );
-  }
-
-  if (
-    screenData?.general?.allow_screen_plugin_presentation ||
-    screenData?.general?.hide_app_nav_bar
-  ) {
-    return false;
-  }
-
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
-  );
-
-  if (canGoBack && hideSecondaryLevel) {
-    return false;
-  }
-
-  if (typeof showNavBar === "boolean" && !showNavBar) {
-    return false;
-  }
-
-  return true;
-}
-
 /**
  * This function helps to decide wether the menu should be presented on the screen
  * based on route and / or screen Data

package/Components/ScreenResolver/index.tsx

@@ -91,7 +91,7 @@ export function ScreenResolverComponent(props: Props) {
         <HookRenderer
           screenData={screenData}
           focused={props.focused}
-          parentFocus={props.parentFocus}
+          parentFocus={props.parentFocus as ParentFocus}
         />
       )
     );

package/Components/Tabs/TV/styles.ts

@@ -78,7 +78,7 @@ export const getStyles = (config): Partial<TVTabsStyles> => {
         },
         tvos: {
           marginTop: -1,
-        }
+        },
       }),
     },
     tabsBackground: {

package/Components/VideoLive/LiveImageManager.ts

@@ -369,8 +369,8 @@ export class LiveImageManager implements PlayerLifecycleListener {
     // TODO: This branch was used when we had play button to toggle replay.
     //  Now we mute button instead but we keep it just in case.
     if (IS_ALLOWED_REPLAY && !isTV() && isCurrentItemEnded) {
-      this.currentlyPlaying.player.seekTo(0);
-      this.currentlyPlaying.player.pause();
+      this.currentlyPlaying?.player.seekTo(0);
+      this.currentlyPlaying?.player.pause();
 
       // TODO: ...Maybe player some other item
     } else {

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -14,7 +14,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { getUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
-import { PlayerImageBackground } from "../PlayerImageBackground";
+import Image from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/Image";
 import { LiveImage, LiveImageManager, LiveImageType } from "./LiveImageManager";
 
 import { AnimatedInOut } from "@applicaster/zapp-react-native-ui-components/Components/AnimatedInOut";
@@ -39,12 +39,13 @@ type Props = {
   imageKey?: string;
   screenConfig: Record<string, any>;
   audioMutedByDefault?: boolean;
+  uri: string; // cover image url
 };
 
 const PlayerLiveImageComponent = (props: Props) => {
   const dimensions = useDimensions("screen", { fullDimensions: true });
 
-  const { item, style, playerId, imageKey } = props;
+  const { item, style, playerId } = props;
 
   const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
   const [mode, setMode] = React.useState(LiveImageType.Image);
@@ -63,24 +64,27 @@ const PlayerLiveImageComponent = (props: Props) => {
    *
    * @param type video or image
    */
-  const setModeDebounced = React.useCallback((type: LiveImageType) => {
-    if (type === LiveImageType.Video) {
-      if (type === mode) {
-        return;
-      }
+  const setModeDebounced = React.useCallback(
+    (type: LiveImageType) => {
+      if (type === LiveImageType.Video) {
+        if (type === mode) {
+          return;
+        }
+
+        timeoutRef.current = setTimeout(() => {
+          setMode(type);
+        }, 1000) as unknown as NodeJS.Timeout;
+      } else {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
 
-      timeoutRef.current = setTimeout(() => {
         setMode(type);
-      }, 1000) as unknown as NodeJS.Timeout;
-    } else {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
       }
-
-      setMode(type);
-    }
-  }, [mode]);
+    },
+    [mode]
+  );
 
   const { screenConfig, playerPluginId } = props;
 
@@ -100,7 +104,7 @@ const PlayerLiveImageComponent = (props: Props) => {
       return new LiveImage({
         playerId,
         player: playerFactoryItem.controller,
-        component: playerFactoryItem?.Component
+        component: playerFactoryItem?.Component,
       });
     } else {
       throw new Error("Player factory item is null");
@@ -111,10 +115,7 @@ const PlayerLiveImageComponent = (props: Props) => {
     liveImageItem.setMode = setModeDebounced;
   }, [setModeDebounced, liveImageItem]);
 
-  const { start, end } = React.useMemo(
-    () => getAutoplaySettings(item),
-    [item]
-  );
+  const { start, end } = React.useMemo(() => getAutoplaySettings(item), [item]);
 
   const controller = liveImageItem.getPlayer();
   const player = usePlayer(playerId);
@@ -239,7 +240,12 @@ const PlayerLiveImageComponent = (props: Props) => {
 
   const onPositionUpdated = React.useCallback(
     (data) => {
-      const normalizedRect = (rect: {left: number, right: number, top: number, bottom: number }) => {
+      const normalizedRect = (rect: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+      }) => {
         if (!rect) {
           return null;
         }
@@ -283,6 +289,7 @@ const PlayerLiveImageComponent = (props: Props) => {
   const videoStyles = { ...style, position: "absolute", zIndex: -100 };
   const Player: any = liveImageItem.component || BufferAnimation;
 
+  // TODO: nice to have - resolve imageKey when imageUrl is not provided
   return (
     <TrackedView
       testId={`tracked-view-${playerId}-${item.title}`}
@@ -307,11 +314,7 @@ const PlayerLiveImageComponent = (props: Props) => {
           animationConfig={overlayFadeIn}
           staticStyles={style}
         >
-          <PlayerImageBackground
-            entry={item}
-            style={style}
-            imageKey={imageKey}
-          />
+          <Image {...props} resizeMode="cover" style={style} applyMaxSize />
         </AnimatedInOut>
       }
     </TrackedView>

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

@@ -3,6 +3,9 @@ import * as React from "react";
 import { render } from "@testing-library/react-native";
 import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
+import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
 
 const seekTo = jest.fn();
@@ -16,6 +19,16 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
+const Wrapper = ({ children }: { children: React.ReactChildren }) => (
+  <ThemeContext.Provider
+    value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
+  >
+    {children}
+  </ThemeContext.Provider>
+);
+
 describe("PlayerLiveImageComponent", () => {
   const defaultProps = {
     item: { id: "1", title: "Test", type: { value: "" } },
@@ -36,10 +49,16 @@ describe("PlayerLiveImageComponent", () => {
       controller: new Player({}),
       Component: () => null,
     }));
+
+    jest.spyOn(navigationHooks, "useIsScreenActive").mockReturnValue(true);
   });
 
   it("should render correctly with default props", () => {
-    const component = render(<PlayerLiveImage {...defaultProps} />);
+    const component = render(
+      <Wrapper>
+        <PlayerLiveImage {...defaultProps} />
+      </Wrapper>
+    );
 
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -53,7 +72,11 @@ describe("PlayerLiveImageComponent", () => {
       },
     };
 
-    render(<PlayerLiveImage {...props} />);
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
 
     // TODO: implement this test
   });
@@ -67,7 +90,11 @@ describe("PlayerLiveImageComponent", () => {
       },
     };
 
-    render(<PlayerLiveImage {...props} />);
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
 
     // TODO: implement this test
   });

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

@@ -13,35 +13,30 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
       }
     }
   >
-    <View
-      accessibilityIgnoresInvertColors={true}
-      style={Object {}}
-    >
-      <Image
-        resizeMode="cover"
-        source={
-          Object {
-            "uri": undefined,
-          }
+    <Image
+      applyMaxSize={true}
+      audioMutedByDefault={false}
+      imageKey="image1"
+      item={
+        Object {
+          "id": "1",
+          "title": "Test",
+          "type": Object {
+            "value": "",
+          },
         }
-        style={
-          Array [
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            Object {
-              "height": undefined,
-              "width": undefined,
-            },
-            undefined,
-          ]
+      }
+      onError={[Function]}
+      playerId="player1"
+      resizeMode="cover"
+      screenConfig={Object {}}
+      source={
+        Object {
+          "uri": "",
         }
-      />
-    </View>
+      }
+      style={Object {}}
+    />
   </View>
 </TrackedView>
 `;

package/Components/VideoModal/PlayerDetails.tsx

@@ -23,6 +23,8 @@ const containerStyle = ({
   backgroundColor: modal_background_color,
 });
 
+// const audioMarginStyle = { marginTop: 0, marginBottom: 0 };
+
 export const PlayerDetails = ({
   entry,
   style,
@@ -75,6 +77,7 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
+        // isAudioPlayer && audioMarginStyle,
       ]}
     >
       {screenData && (

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

@@ -8,8 +8,6 @@ const props = {
   configuration: { modal_background_color: "transparent" },
 };
 
-jest.mock("react-native");
-
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: jest.fn(() => ({
     top: 20,

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

@@ -19,8 +19,6 @@ const props = {
 
 const useIsTablet = jest.fn();
 
-jest.mock("react-native");
-
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
@@ -38,6 +36,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  isNavBarVisible: jest.fn(() => true),
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
   })),