@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4400210593 → 12.0.0-alpha.4408649484

package/Components/PlayerImageBackground/index.tsx

@@ -1,38 +1,64 @@
 import React, { PropsWithChildren } from "react";
-import { ImageBackground } from "react-native";
+import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
   imageStyle?: { [K: string]: any };
   imageKey?: string;
+  defaultImageDimensions?: { [K: string]: any };
 }>;
 
+const imageSize = { width: "100%", height: "100%" };
+
 const PlayerImageBackgroundComponent = ({
   entry,
   children,
   style,
   imageStyle,
   imageKey,
+  defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
     [imageKey, entry]
   );
 
+  const { playerAnimationState } = useModalAnimationContext();
+
   if (!source) return <>{children}</>;
 
   return (
-    <ImageBackground
-      resizeMode="cover"
-      style={style}
-      imageStyle={imageStyle}
-      source={source}
+    <View
+      style={
+        playerAnimationState === PlayerAnimationStateEnum.maximaze
+          ? defaultImageDimensions
+          : style
+      }
     >
-      {children}
-    </ImageBackground>
+      <AnimationComponent
+        style={style}
+        animationType={ComponentAnimationType.player}
+        additionalData={defaultImageDimensions}
+      >
+        <ImageBackground
+          resizeMode="cover"
+          style={imageSize}
+          imageStyle={imageStyle}
+          source={source}
+        >
+          {children}
+        </ImageBackground>
+      </AnimationComponent>
+    </View>
   );
 };
 

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, FlatList, StyleSheet, Platform } from "react-native";
+import { View, StyleSheet, Platform, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -21,7 +21,8 @@ import {
 import { useScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData";
 import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
-import { useScreenScrollStore } from "@applicaster/zapp-react-native-utils/screenState";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useShallow } from "zustand/react/shallow";
 
 type Props = {
   feed: ZappFeed;
@@ -41,8 +42,10 @@ const styles = StyleSheet.create({
   },
 });
 
-const scrollIndicatorInsets = { right: 1 };
+const getNearestValue = (value, optionA, optionB) =>
+  Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
+const scrollIndicatorInsets = { right: 1 };
 const keyExtractor = R.compose(String, R.prop("id"));
 
 function ComponentsMapComponent(props: Props) {
@@ -60,6 +63,7 @@ function ComponentsMapComponent(props: Props) {
     refreshingPipesV1,
   } = props;
 
+  const flatListRef = React.useRef<FlatList | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -194,26 +198,87 @@ function ComponentsMapComponent(props: Props) {
     []
   );
 
-  const onScrollFlatList = React.useCallback(
-    ({ nativeEvent }, isScrollingDone = false) => {
-      const {
-        contentOffset: { y },
-      } = nativeEvent;
+  const navBarStore = useScreenContextV2()._navBarStore;
 
-      useScreenScrollStore.setState({
-        scrollingVelocity: isScrollingDone ? 0 : 1,
-        scrollPosition: y,
-      });
-    },
-    []
+  const scrollY = navBarStore(
+    useShallow(({ scrollYAnimated }) => scrollYAnimated)
   );
 
-  const onMomentumScrollEnd = React.useCallback(
-    ({ nativeEvent }) => {
-      onScrollFlatList({ nativeEvent }, true);
-    },
-    [onScrollFlatList]
-  );
+  const canMomentum = React.useRef(false);
+
+  const onScrollBeginDrag = React.useCallback(() => {
+    canMomentum.current = true;
+  }, []);
+
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
+    if (!canMomentum.current) return;
+    canMomentum.current = false;
+
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current &&
+      nativeEvent.velocity.y === 0
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  const onScroll = React.useCallback((event) => {
+    const {
+      nativeEvent: {
+        contentOffset: { y },
+        layoutMeasurement: { height },
+        contentSize: { height: contentHeight },
+      },
+    } = event;
+
+    if (y >= 0 && y + height <= contentHeight) {
+      scrollY.setValue(y);
+    } else {
+      if (y <= 0) {
+        scrollY.setValue(0);
+      } else if (y + height > contentHeight) {
+        scrollY.setValue(contentHeight - height);
+      }
+    }
+  }, []);
 
   if (shouldShowLoadingError) {
     return <RiverError />;
@@ -230,6 +295,9 @@ function ComponentsMapComponent(props: Props) {
       >
         <ViewportTracker>
           <FlatList
+            ref={(ref) => {
+              flatListRef.current = ref;
+            }}
             // Fix for WebView rerender crashes on Android API 28+
             // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
@@ -249,8 +317,10 @@ function ComponentsMapComponent(props: Props) {
             }
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
-            onScroll={onScrollFlatList}
-            onMomentumScrollEnd={onMomentumScrollEnd}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScroll={onScroll}
+            onMomentumScrollEnd={_onMomentumScrollEnd}
+            onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
             {...scrollViewExtraProps}
           />

package/Components/River/RefreshControl.tsx

@@ -1,5 +1,9 @@
 import * as React from "react";
-import { RefreshControl as RNRefreshControl } from "react-native";
+import {
+  Platform,
+  RefreshControl as RNRefreshControl,
+  StyleSheet,
+} from "react-native";
 import * as R from "ramda";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
@@ -8,10 +12,30 @@ import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-nativ
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useDispatch } from "react-redux";
+import { useShallow } from "zustand/react/shallow";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
 const BELOW_DEFAULT_COLOR = "white";
+const BASE_INDICATOR_HEIGHT = 40;
+const BASE_INDICATOR_OFFSET = 16;
+
+/** Return spacing required to position indicator below the navbar bottom line (Android only) */
+const getRefreshControlOffset = () => {
+  return Platform.OS === "ios"
+    ? 0
+    : BASE_INDICATOR_HEIGHT + BASE_INDICATOR_OFFSET;
+};
+
+const styles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-color-literals
+  control: {
+    zIndex: 1,
+    backgroundColor: "transparent",
+  },
+});
 
 const getBrightness = (RGBcolor) => {
   const RGBvalues = RGBcolor.substring(
@@ -91,6 +115,34 @@ export const usePullToRefresh = (
   };
 };
 
+/** Returns the offset for the progress view of the RefreshControl component
+ *  based on navbar content position */
+export const useGetProgressViewOffset = () => {
+  const { _navBarStore } = useScreenContextV2();
+  const { top } = useSafeAreaInsets();
+
+  const offset = getRefreshControlOffset();
+
+  const { height, contentPosition } = _navBarStore(
+    useShallow(({ contentPosition, height }) => ({ contentPosition, height }))
+  );
+
+  if (height === 0) {
+    return offset;
+  }
+
+  switch (contentPosition) {
+    case "on_bottom_status_bar":
+      // navbar height
+      return offset + height;
+    case "on_top_screen":
+      // navbar height + status bar height
+      return offset + height + top;
+    default:
+      return offset;
+  }
+};
+
 export function RefreshControl(props: {
   pullToRefreshPipesV1RefreshingStateUpdater?: (refreshing: boolean) => void;
   refreshingPipesV1?: boolean;
@@ -211,6 +263,7 @@ export function RefreshControl(props: {
       refreshing={refreshing}
       onRefresh={onRefreshHandler}
       colors={[preparedIndicatorColor]}
+      progressViewOffset={useGetProgressViewOffset()}
       progressBackgroundColor={preparedIndicatorBackgroundColor}
       // @ts-ignore in RN68 this `size` became string
       size={indicatorSize}
@@ -222,6 +275,7 @@ export function RefreshControl(props: {
           : null
       }
       titleColor={preparedTitleUnderIndicatorColor}
+      style={styles.control}
     />
   );
 }

package/Components/River/TV/River.tsx

@@ -7,14 +7,10 @@ import * as R from "ramda";
 import {
   useFeedLoader,
   useLayoutVersion,
-  useNavigationPluginData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
   useNavbarState,
   useSetNavbarState,
@@ -51,8 +47,6 @@ export const River = (props: Props) => {
   const { setTitle: setScreenTitle, setSummary: setScreenSummary } =
     useSetNavbarState();
 
-  const navigationPluginData = useNavigationPluginData();
-
   const rivers = useRivers();
   const isV2 = useLayoutVersion({ isV2: true });
 
@@ -99,23 +93,6 @@ export const River = (props: Props) => {
     }
   }, [feedData, screenData, screenTitle, screenSummary]);
 
-  React.useEffect(() => {
-    if (
-      isWeb() &&
-      toBooleanWithDefaultFalse(
-        navigationPluginData?.rules?.focus_on_content
-      ) &&
-      river &&
-      river.type !== "general_content"
-    ) {
-      const groupId = R.pathOr("river", ["groupId"], componentsMapExtraProps);
-
-      focusManager.setupInitialFocus(groupId, true);
-      focusManager.setInitialFocus();
-      focusManager.enableAutomaticFocus();
-    }
-  }, [river, componentsMapExtraProps]);
-
   if (!river) {
     utilsLogger.error({
       message: `River ${screenData.id} not found!`,

package/Components/River/__tests__/componentsMap.test.js

@@ -6,6 +6,12 @@ import configureStore from "redux-mock-store";
 
 import * as themeUtils from "@applicaster/zapp-react-native-utils/theme";
 
+// silences the errors related to React-native-gesture-handler in tests
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
+  () => () => null
+);
+
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 50 }),
 }));

package/Components/RouteManager/index.tsx

@@ -14,7 +14,7 @@ type Props = { pathname: string; screenData: Record<string, any> };
  * @param {Props}: see props above
  */
 export function RouteManager(props: Props) {
-  const { pathname, screenData: _screenData } = useRoute();
+  const { pathname, screenData } = useRoute();
   const pathAttributes = getPathAttributes({ pathname });
 
   const { screenType, screenId } = R.last(pathAttributes);
@@ -25,7 +25,7 @@ export function RouteManager(props: Props) {
         screenType={screenType}
         screenId={screenId}
         {...props}
-        screenData={props.screenData}
+        screenData={screenData}
       />
     </TestId>
   );

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

@@ -0,0 +1,3 @@
+export { useInitialFocus } from "./useInitialFocus";
+
+export { useRestoreFocus } from "./useRestoreFocus";

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

@@ -0,0 +1,70 @@
+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 {
+  setFocusOnContent,
+  setFocusOnMenu,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux";
+
+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) {
+      setFocusOnContent(currentRoute);
+
+      return;
+    }
+
+    if (initialFocus.onMenu) {
+      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,169 @@
+import * as React from "react";
+import { last } 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 {
+  useNavbarState,
+  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";
+import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
+
+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 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 isPlayer = isPlayerPlugin(routeState);
+
+  const { visible: isNavBarVisible } = useNavbarState();
+
+  const screenData =
+    screenType === "hooks" || isPlayer
+      ? routeState?.state?.entry
+      : routeState?.state?.screen;
+
+  return (
+    <View style={[styles.container, { backgroundColor }]}>
+      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
+        <NavBar
+          isVisible={isNavBarVisible}
+          menuPlugin={menuPlugin}
+          navigationProps={navigationProps}
+        />
+      </NavBarContainer>
+      <ScreenResolver
+        screenType={screenType}
+        screenId={screenId}
+        screenData={screenData}
+        groupId={route}
+      />
+    </View>
+  );
+};

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

@@ -10,6 +10,8 @@ const mock_navBarVisibleFlag = true;
 
 const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
 
+const mockIsOrientationCompatible = jest.fn(() => true);
+
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
 }));
@@ -21,6 +23,7 @@ jest.mock("../../RouteManager", () => ({
 jest.mock(
   "@applicaster/zapp-react-native-utils/appUtils/orientationHelper",
   () => ({
+    isOrientationCompatible: mockIsOrientationCompatible,
     allowedOrientationsForScreen: jest.fn(),
     getOrientation: jest.fn(),
     getScreenOrientation: jest.fn(),