@applicaster/zapp-react-native-ui-components 12.0.0-alpha.7254207052 → 12.0.0-alpha.7341401746

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -177,10 +177,23 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
 const positionAbsolute: ViewStyle = { position: "absolute" };
 
 const LiveImageComponent = (props: LiveImageProps) => {
-  const { item, style, cellUUID, imageKey, actionIdentifier, state } = props;
+  const {
+    item,
+    style: componentStyle,
+    cellUUID,
+    imageKey,
+    actionIdentifier,
+    state,
+  } = props;
 
   const component = useUIComponentContext();
 
+  // Fix for blinking on state change
+  const style = React.useMemo(
+    () => ({ ...componentStyle, backgroundColor: "transparent" }),
+    [componentStyle]
+  );
+
   const componentType = React.useMemo(
     () => getPropComponentType(component),
     [component?.id]

package/Components/MasterCell/utils/index.ts

@@ -125,13 +125,24 @@ export const useFilterChildren = <
 
   const filteredChildren = children.filter((child) => {
     const item = child.props.item;
-    const action = actions.actions[child.props.pluginIdentifier];
+    const actionIdentifier = child.props.pluginIdentifier;
+    const action = actions.actions[actionIdentifier];
+
     // context value of specific plugin
-    const currentValue = action.module.context._currentValue;
+    if (action?.module && action.module.context) {
+      const currentValue = action.module.context._currentValue;
+
+      return currentValue?.isActionAvailable
+        ? currentValue.isActionAvailable(item)
+        : true;
+    }
 
-    return currentValue?.isActionAvailable
-      ? currentValue.isActionAvailable(item)
-      : true;
+    masterCellLogger.error({
+      message: `Action plugin for ${actionIdentifier} could not be found, check the configuration of your action button`,
+      data: { item, action: child.props.pluginIdentifier },
+    });
+
+    return false;
   });
 
   return filteredChildren;

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -54,6 +54,11 @@ import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
 type Props = {
   Player: React.ComponentType<any>;
   PlayerLoadingView?: React.ComponentType<any>; // 👀 we are not receiving this prop
@@ -229,6 +234,9 @@ const PlayerContainerComponent = (props: Props) => {
   const screenData = useTargetScreenData(item);
   const { setVisible: showNavBar } = useSetNavbarState();
 
+  const { isActiveGesture, startComponentsAnimation, setPlayerAnimationState } =
+    useModalAnimationContext();
+
   const playerEvent = (event, ...args) => {
     playerManager.invokeHandler(event, ...args);
   };
@@ -446,7 +454,7 @@ const PlayerContainerComponent = (props: Props) => {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
       } else {
-        navigator.minimiseVideoModal();
+        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -641,7 +649,11 @@ const PlayerContainerComponent = (props: Props) => {
                         autoplay={true}
                         controls={false}
                         disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
+                        docked={
+                          navigator.isVideoModalDocked() &&
+                          !startComponentsAnimation &&
+                          !isActiveGesture
+                        }
                         entry={item}
                         fullscreen={mode === VideoModalMode.FULLSCREEN}
                         inline={inline}

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, Animated, 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,67 @@ 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, setCanMomentum] = React.useState(false);
+
+  const onScrollBeginDrag = React.useCallback(() => {
+    setCanMomentum(true);
+  }, []);
+
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
+    if (!canMomentum) return;
+    setCanMomentum(false);
+
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = 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 = 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,
+      });
+    }
+  }, []);
 
   if (shouldShowLoadingError) {
     return <RiverError />;
@@ -230,6 +275,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 +297,23 @@ function ComponentsMapComponent(props: Props) {
             }
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
-            onScroll={onScrollFlatList}
-            onMomentumScrollEnd={onMomentumScrollEnd}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScroll={Animated.event(
+              [
+                {
+                  nativeEvent: {
+                    contentOffset: {
+                      y: scrollY,
+                    },
+                  },
+                },
+              ],
+              {
+                useNativeDriver: false,
+              }
+            )}
+            onMomentumScrollEnd={_onMomentumScrollEnd}
+            onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
             {...scrollViewExtraProps}
           />

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/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,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/VideoLive/__tests__/PlayerLiveImageComponent.test.tsx

@@ -7,6 +7,10 @@ import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
 import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
+import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 const seekTo = jest.fn();
 
@@ -19,14 +23,25 @@ jest.mock(
   })
 );
 
+jest
+  .spyOn(useNavigationHooks, "useNavigation")
+  .mockImplementation(() => ({ videoModalState: { visible: false } }));
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
 const Wrapper = ({ children }: { children: React.ReactChildren }) => (
-  <ThemeContext.Provider
-    value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
-  >
-    {children}
-  </ThemeContext.Provider>
+  /* @ts-ignore */
+  <Provider store={store}>
+    <ThemeContext.Provider
+      value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  </Provider>
 );
 
 describe("PlayerLiveImageComponent", () => {

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { Animated, ViewStyle } from "react-native";
+
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+type Props = {
+  style: ViewStyle[];
+  children: React.ReactNode;
+};
+
+export const AnimatedPlayerModalWrapper = (props: Props) => {
+  const {
+    playerAnimationState,
+    animatedValues: { lastScrollY, dragScrollY, translateYOffset },
+    modalSnapPoints,
+    setStartComponentsAnimation,
+    lastScrollYValue,
+  } = useModalAnimationContext();
+
+  const { height: screenHeight } = useDimensions("screen", {
+    deviceInfo: true,
+  });
+
+  const interpolateConfig: Animated.InterpolationConfigType = React.useMemo(
+    () => ({
+      inputRange: modalSnapPoints,
+      outputRange: modalSnapPoints,
+      extrapolate: "clamp",
+    }),
+    [modalSnapPoints]
+  );
+
+  let translateY;
+
+  if (playerAnimationState === PlayerAnimationStateEnum.drag_player) {
+    translateY = translateYOffset.interpolate(interpolateConfig);
+  } else {
+    const reverseLastScrollY = Animated.multiply(
+      new Animated.Value(-1),
+      lastScrollY
+    );
+
+    translateY = Animated.add(
+      translateYOffset,
+      Animated.add(dragScrollY, reverseLastScrollY)
+    ).interpolate(interpolateConfig);
+  }
+
+  React.useEffect(() => {
+    const translateYListener = translateY.addListener(({ value }) => {
+      const preparedValue = Math.round(
+        Math.abs(value) - lastScrollYValue.current
+      );
+
+      (playerAnimationState === PlayerAnimationStateEnum.minimize ||
+        playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
+        setStartComponentsAnimation(
+          preparedValue >= Math.round((screenHeight * 10) / 100)
+        );
+    });
+
+    return () => {
+      translateYListener && translateY.removeListener(translateYListener);
+    };
+  }, [playerAnimationState]);
+
+  return (
+    <Animated.View
+      style={[props.style, { transform: [{ translateY: translateY }] }]}
+    >
+      {props.children}
+    </Animated.View>
+  );
+};