@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3977160850 → 12.0.0-alpha.4337072244

package/Components/Screen/TV/hooks/useInitialFocus.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import {
+  useNavigationPluginData,
+  useIsNavBarVisible,
+  useRoute,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+
+type Return =
+  | {
+      onContent: true;
+      onMenu: false;
+    }
+  | {
+      onContent: false;
+      onMenu: true;
+    };
+
+const getInitialFocus = (focusOnContent, isNavBarVisible): Return => {
+  if (focusOnContent) {
+    return {
+      onContent: true,
+      onMenu: false,
+    };
+  }
+
+  if (!focusOnContent && isNavBarVisible) {
+    // put focus on navbar
+    return {
+      onContent: false,
+      onMenu: true,
+    };
+  }
+
+  // we don't have navbar, put focus on content anyway
+  return {
+    onContent: true,
+    onMenu: false,
+  };
+};
+
+export const useInitialFocus = (): void => {
+  const navigationPluginData = useNavigationPluginData();
+
+  const focusOnContent = toBooleanWithDefaultFalse(
+    navigationPluginData?.rules?.focus_on_content
+  );
+
+  const isNavBarVisible = useIsNavBarVisible();
+
+  const { pathname: currentRoute } = useRoute();
+
+  React.useEffect(() => {
+    const initialFocus = getInitialFocus(focusOnContent, isNavBarVisible);
+
+    if (initialFocus.onContent) {
+      focusManager.setFocusOnContent(currentRoute);
+
+      return;
+    }
+
+    if (initialFocus.onMenu) {
+      focusManager.setFocusOnMenu(currentRoute);
+    }
+  }, []);
+};

package/Components/Screen/TV/hooks/useRestoreFocus.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { isNil } from "ramda";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+
+export const useRestoreFocus = (): void => {
+  const isScreenActive = useIsScreenActive();
+  const previousIsScreenActive = usePrevious(isScreenActive);
+
+  React.useEffect(() => {
+    if (isNil(previousIsScreenActive)) {
+      // it's initial mounting of the screen, do nothing here
+      return;
+    }
+
+    if (!previousIsScreenActive && isScreenActive) {
+      // restore focus when we go back from next screen
+      focusManager.setInitialFocus();
+    }
+  }, [previousIsScreenActive, isScreenActive]);
+};

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

@@ -0,0 +1,174 @@
+import * as React from "react";
+import { last, pathOr } from "ramda";
+import { View, StyleSheet } from "react-native";
+import {
+  getNavigationProps,
+  getPathAttributes,
+  resolveNavigationPlugin,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useScreenBackgroundColor } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
+import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
+import { ScreenResolver } from "../../ScreenResolver";
+import { useInitialFocus, useRestoreFocus } from "./hooks";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+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]) {
+    if (screenType === "hooks") {
+      const navigations = routeState?.state?.entry?.payload?.navigations;
+
+      if (navigations) {
+        return routeState.state.entry.payload;
+      }
+    }
+
+    return 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
+    if (screenType === "hooks") {
+      const navigations = routeState?.state?.entry?.payload?.navigations;
+
+      if (navigations) {
+        return navigations;
+      }
+    }
+
+    return routeState?.state?.screen?.navigations;
+  }
+
+  // screenId is not presented into rivers, use fallback instead
+  return fallbackNavigations;
+};
+
+export const Screen = ({ route, Components }: Props) => {
+  if (isNilOrEmpty(route)) {
+    throw Error("Required props: route is missing");
+  }
+
+  const navigator = useNavigation();
+  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
+
+  const pathAttributes = getPathAttributes({ pathname: route });
+  const routeState = navigator.getStackForPathname(route);
+
+  const { screenType, screenId } = last(pathAttributes);
+
+  const backgroundColor = useScreenBackgroundColor(screenId);
+
+  useInitialFocus();
+  useRestoreFocus();
+
+  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 = (Components.NavBar ||
+    menuPlugin.module) as React.ComponentType<any>;
+
+  const isNavBarVisible = !isPlayer(routeState);
+
+  const screenData =
+    screenType === "hooks"
+      ? routeState?.state?.entry
+      : routeState?.state?.screen;
+
+  return (
+    <View style={[styles.container, { backgroundColor }]}>
+      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
+        <NavBar
+          groupId={route}
+          isVisible={isNavBarVisible}
+          menuPlugin={menuPlugin}
+          navigationProps={navigationProps}
+        />
+      </NavBarContainer>
+      <ScreenResolver
+        screenType={screenType}
+        screenId={screenId}
+        screenData={screenData}
+        groupId={route}
+      />
+    </View>
+  );
+};

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { create, act } from "react-test-renderer";
+import { act, create } from "react-test-renderer";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
@@ -69,12 +69,16 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
+    screenData: { id: "testId" },
   })),
   useNavigation: jest.fn(() => ({
     canGoBack: () => false,
     currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
     data: { screen: { id: "testId" } },
   })),
+  useIsScreenActive: jest.fn().mockReturnValue(true),
 }));
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({

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=""
@@ -19,6 +21,11 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   <View>
     <View
       pathname="/river/testId"
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>
@@ -36,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=""
@@ -44,6 +53,11 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   <View>
     <View
       pathname="/river/testId"
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>

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,
@@ -14,6 +17,7 @@ import {
   useCurrentScreenData,
   useNavbarState,
   useScreenData,
+  useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
@@ -22,6 +26,17 @@ import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { useScreenOrientationHandler } from "./orientationHandler";
 
+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) {
   const layers = R.compose(
     R.map(R.trim),
@@ -40,14 +55,13 @@ function isValidColor(string) {
 }
 
 type Props = {
-  pathname: string;
+  pathname: unknown;
   screenData: unknown;
-  setToggleMenu: () => void;
-  setCloseMenu: () => void;
 };
 
-export function Screen({ setToggleMenu, setCloseMenu }: Props) {
+export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
+  const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
 
   // Gets the data for the current screen configuration
@@ -59,28 +73,38 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
     fullDimensions: true,
   });
 
-  const routeData = useRoute();
+  const { screenData, pathname } = useRoute();
 
   const currentRiver = useScreenData(
-    (routeData.screenData as ZappRiver)?.targetScreen
-      ? (routeData.screenData as ZappRiver)?.targetScreen.id
-      : (routeData.screenData as ZappRiver)?.screen_id
+    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(
     () =>
@@ -88,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: {},
@@ -124,11 +146,9 @@ 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={screenData}>
+        <OfflineFallbackScreen screenData={targetScreenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
           <RouteManager pathname={pathname} screenData={screenData} />
         </OfflineFallbackScreen>

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/Tabs/TV/styles.ts

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

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>