@applicaster/zapp-react-native-ui-components 12.0.0-rc.4 → 12.0.0-rc.40

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

@@ -6,17 +6,24 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
     Object {
       "backgroundColor": "blue",
       "flex": 1,
+      "paddingTop": 0,
     }
   }
 >
   <View
-    nav_items={Array []}
+    id="/river/testId"
+    selected="testId"
     testID="navBar"
+    title=""
   />
   <View>
     <View
-      pathname="/foo/path"
-      screenData={Object {}}
+      pathname="/river/testId"
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>
@@ -29,17 +36,24 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
     Object {
       "backgroundColor": "blue",
       "flex": 1,
+      "paddingTop": 0,
     }
   }
 >
   <View
-    nav_items={Array []}
+    id="/river/testId"
+    selected="testId"
     testID="navBar"
+    title=""
   />
   <View>
     <View
-      pathname="/foo/path"
-      screenData={Object {}}
+      pathname="/river/testId"
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>

package/Components/Screen/__tests__/navigationHandler.test.ts

@@ -1,183 +1,6 @@
-import { isNavBarVisible, isMenuVisible } from "../navigationHandler";
+import { isMenuVisible } from "../navigationHandler";
 
 describe("NavigationHandler", () => {
-  describe("isNavBarVisible", () => {
-    it("returns false when the route is a player route", () => {
-      const navBarVisible = isNavBarVisible(
-        "/playable/some_vod_item",
-        {},
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(false);
-    });
-
-    it("returns false when the next screen is the QB search screen", () => {
-      const navBarVisible = isNavBarVisible(
-        "/river/A1234",
-        {
-          type: "qb_search_screen",
-        },
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(false);
-    });
-
-    describe("when screen is a hook", () => {
-      it("returns true if the `showNavBar` flag is set to true", () => {
-        const navBarVisible = isNavBarVisible(
-          "",
-          {
-            hookPlugin: {
-              module: {
-                showNavBar: true,
-              },
-            },
-          },
-          undefined,
-          false
-        );
-
-        expect(navBarVisible).toBe(true);
-      });
-
-      it("returns true if presentFullScreen flag is set to false", () => {
-        const navBarVisible = isNavBarVisible(
-          "",
-          {
-            hookPlugin: {
-              module: {
-                presentFullScreen: false,
-              },
-            },
-          },
-          undefined,
-          false
-        );
-
-        expect(navBarVisible).toBe(true);
-      });
-
-      it("returns false if presentFullScreen flag is set to true", () => {
-        const navBarVisible = isNavBarVisible(
-          "",
-          {
-            hookPlugin: {
-              module: {
-                presentFullScreen: true,
-              },
-            },
-          },
-          undefined,
-          false
-        );
-
-        expect(navBarVisible).toBe(false);
-      });
-    });
-
-    it("returns false if the screen's general settings allow screen presentation", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        {
-          general: {
-            allow_screen_plugin_presentation: true,
-          },
-        },
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(false);
-    });
-
-    it("returns false if the screen's general settings hide app nav bar", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        {
-          general: {
-            hide_app_nav_bar: true,
-          },
-        },
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(false);
-    });
-
-    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        {
-          navigations: [
-            {
-              styles: {
-                hide_secondary_level_menu: true,
-              },
-            },
-          ],
-        },
-        undefined,
-        true
-      );
-
-      expect(navBarVisible).toBe(false);
-    });
-
-    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        {
-          navigations: [
-            {
-              styles: {
-                hide_secondary_level_menu: false,
-              },
-            },
-          ],
-        },
-        undefined,
-        true
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
-
-    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        {
-          navigations: [
-            {
-              styles: {
-                hide_secondary_level_menu: false,
-              },
-            },
-          ],
-        },
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] },
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
-  });
-
   describe("isMenuVisible", () => {
     it("returns false when the route is a player route", () => {
       const menuVisible = isMenuVisible("/playable/some_vod_item", {});

package/Components/Screen/index.tsx

@@ -1,36 +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 type { ZappNavigationProps } from "@applicaster/zapp-react-native-flow-types/index";
 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) {
@@ -50,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(
     () => ({
@@ -76,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/Screen/orientationHandler.ts

@@ -8,7 +8,7 @@ import {
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { ZappHookModalContext } from "../../Contexts";
 import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
 

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/TrackedView/index.tsx

@@ -17,9 +17,12 @@ type TrackedViewProps = {
 export const TrackedView = memo(function TrackedView(props: TrackedViewProps) {
   const children = props.children;
 
-  const onPositionUpdated = useCallback((event: TrackedViewNativeProps) => {
-    props?.onPositionUpdated(event.nativeEvent);
-  }, []);
+  const onPositionUpdated = useCallback(
+    (event: TrackedViewNativeProps) => {
+      props.onPositionUpdated(event.nativeEvent);
+    },
+    [props.onPositionUpdated]
+  );
 
   if (isTV()) {
     return <View {...(props as any)}>{children}</View>;

package/Components/VideoLive/LiveImageManager.ts

@@ -6,6 +6,7 @@ import {
 import { setUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
 import { loggerLiveImageManager } from "./loggerHelper";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { Component } from "react";
 
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
@@ -36,7 +37,8 @@ type Position = {
 type LiveImageProps = {
   player: Player;
   playerId: string;
-  setMode: (type: LiveImageType) => void;
+  setMode?: (type: LiveImageType) => void;
+  component: Component;
   // TODO: ...primary, powerCell, tvGallery, etc.
   // type: string;
 };
@@ -164,7 +166,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
     // Fake close event, because we unmount native view
     item.player?.onPlayerClose();
-    item.setMode(LiveImageType.Image);
+    item.setMode?.(LiveImageType.Image);
 
     if (item === this.currentlyPlaying) {
       this.currentlyPlaying = null;
@@ -191,8 +193,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
     }
 
     this.currentlyPlaying = item;
-
-    item.setMode(LiveImageType.Video);
+    item.setMode?.(LiveImageType.Video);
 
     if (item.player.playerState.isReadyToPlay) {
       item.player.play();
@@ -209,6 +210,11 @@ export class LiveImageManager implements PlayerLifecycleListener {
     this.pauseItem(item);
   };
 
+  public onLiveImageCompleted = (_item: LiveImage) => {
+    // TODO: Notify listeners that player has died
+    // Do not try look for new playable, otherwise you will restart video finish to play
+  };
+
   public muteAll = () => {
     log_debug("muteAll");
 
@@ -235,6 +241,14 @@ export class LiveImageManager implements PlayerLifecycleListener {
     const playerItem = this.findNextPlayableItem();
 
     if (playerItem) {
+      if (!playerItem.isFullyVisible) {
+        log_error(
+          `checkPlayerPosition: trying to start playback currently invisible item: ${playerInfo(
+            playerItem.player
+          )}`
+        );
+      }
+
       // Will also check if it's item that already playing
       this.playLiveImage(playerItem);
     }
@@ -242,7 +256,6 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   onPrimaryPlayerClosed = () => {
     const playerItem = this.findNextPlayableItem();
-
     log_info("onPrimaryPlayerClosed: starting to play visible live-image");
 
     this.currentlyPlaying = null;
@@ -356,12 +369,12 @@ 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 {
-      item.setMode(LiveImageType.Image);
+      item.setMode?.(LiveImageType.Image);
     }
 
     // Prevent receiving onEnd event from both `close` and `end` player events
@@ -377,10 +390,25 @@ export class LiveImageManager implements PlayerLifecycleListener {
   };
 
   onLiveImageError = (item: LiveImage, error: Error) => {
-    item.setMode(LiveImageType.Image);
+    item.setMode?.(LiveImageType.Image);
 
-    if (this.currentlyPlaying === item) {
+    const currentItem = this.currentlyPlaying;
+
+    log_debug(
+      `onLiveImageError: error: ${error.message}, live-image ${playerInfo(
+        item.player
+      )}, currentPlayingId: ${
+        this.currentlyPlaying?.playerId
+      }, primaryPlayerId: ${this.primaryPlayer?.playerId}`
+    );
+
+    if (currentItem === item) {
       this.currentlyPlaying = null;
+
+      log_debug(
+        `onLiveImageError: currentitem: ${currentItem.playerId} was removed`
+      );
+
       // TODO: ...Maybe player some other item
     }
 
@@ -389,8 +417,8 @@ export class LiveImageManager implements PlayerLifecycleListener {
       event: {
         item,
         error,
-        playerId: this.currentlyPlaying?.playerId,
-        primaryPlayerId: this.primaryPlayer?.playerId,
+        playerId: currentItem?.playerId,
+        primaryPlayerId: currentItem?.playerId,
       },
     });
   };
@@ -446,12 +474,13 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   readonly playerId: string;
+  readonly component: Component;
 
   constructor(props: LiveImageProps) {
     this.player = props.player;
     this.setMode = props.setMode;
     this.playerId = this.player.playerId;
-
+    this.component = props.component;
     this.player.addListener({ id: "live-image", listener: this });
   }