@applicaster/zapp-react-native-ui-components 12.0.0-rc.48 → 12.0.0-rc.49

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/PlayerContainer/PlayerContainer.tsx

@@ -54,6 +54,8 @@ 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 } 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
@@ -598,6 +600,9 @@ const PlayerContainerComponent = (props: Props) => {
     pluginConfiguration,
   };
 
+  const { isActiveGesture, startComponentsAnimation } =
+    useModalAnimationContext();
+
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -641,7 +646,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/__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/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>
+  );
+};

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -0,0 +1,335 @@
+import React from "react";
+import { Animated, StyleSheet, View, Platform } from "react-native";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  NativeViewGestureHandler,
+  PanGestureHandler,
+  State,
+  TapGestureHandler,
+  GestureHandlerRootView,
+} from "react-native-gesture-handler";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+
+import {
+  setScrollModalAnimatedValue,
+  resetScrollAnimatedValues,
+} from "./utils";
+
+const getAnimatedConfig = (toValue) => {
+  return {
+    toValue,
+    duration: 200,
+    useNativeDriver: true,
+  };
+};
+
+const generalStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const AnimatedScrollModalComponent = ({ children }: Props) => {
+  const {
+    isActiveGesture,
+    playerAnimationState,
+    setPlayerAnimationState,
+    resetPlayerAnimationState,
+    animatedValues: {
+      lastScrollY,
+      dragScrollY,
+      dragVideoPlayerY,
+      translateYOffset,
+    },
+    lastScrollYValue,
+    scrollPosition,
+    modalSnapPoints,
+    lastSnap,
+    setLastSnap,
+  } = useModalAnimationContext();
+
+  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
+    useNavigation();
+
+  const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
+  const isMinimizedModal = videoModalState.mode === "MINIMIZED";
+  const previousItemId = usePrevious(videoModalState.item?.id);
+
+  const isNotMinimizeMaximazeAnimation =
+    playerAnimationState !== PlayerAnimationStateEnum.minimize &&
+    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+
+  const isAudioItem = React.useMemo(
+    () =>
+      videoModalState.item?.content?.type?.includes?.("audio") ||
+      videoModalState.item?.type?.value === "audio",
+    [videoModalState.item]
+  );
+
+  // Refs for components
+  const scrollRef = React.useRef(null);
+  const tapHandlerRef = React.useRef(null);
+  const panHandlerRef = React.useRef(null);
+
+  const onRegisterLastScroll = Animated.event(
+    [{ nativeEvent: { contentOffset: { y: lastScrollY } } }],
+    { useNativeDriver: true }
+  );
+
+  const onGestureEvent = Animated.event(
+    [{ nativeEvent: { translationY: dragScrollY } }],
+    { useNativeDriver: true }
+  );
+
+  const onHandlerStateChange = ({ nativeEvent }) => {
+    if (nativeEvent.oldState === State.ACTIVE && scrollPosition.current === 0) {
+      // eslint-disable-next-line prefer-const
+      const { velocityY, translationY } = nativeEvent;
+      const dragToss = 0.05;
+
+      const preparedTranslationY =
+        Math.abs(translationY) - lastScrollYValue.current;
+
+      if (videoModalState.mode === "MAXIMIZED") {
+        const endOffsetY =
+          lastSnap + preparedTranslationY + dragToss * velocityY + 150;
+
+        let destSnapPoint = modalSnapPoints[0];
+
+        for (const snapPoint of modalSnapPoints) {
+          const distFromSnap = Math.abs(snapPoint - endOffsetY);
+
+          if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
+            destSnapPoint = snapPoint;
+          }
+        }
+
+        setLastSnap(destSnapPoint);
+
+        if (destSnapPoint === modalSnapPoints[0]) {
+          translateYOffset.extractOffset();
+          translateYOffset.setValue(preparedTranslationY);
+          translateYOffset.flattenOffset();
+          dragScrollY.setValue(0);
+
+          setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+        } else {
+          setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
+        }
+      } else {
+        if (translationY < 0) {
+          // from mini to full
+          setLastSnap(modalSnapPoints[0]);
+          translateYOffset.setValue(modalSnapPoints[1] - preparedTranslationY);
+          dragScrollY.setValue(0);
+
+          setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+        } else {
+          resetPlayerAnimationState();
+        }
+      }
+    } else {
+      playerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
+        resetPlayerAnimationState();
+    }
+  };
+
+  const onScroll = React.useCallback(({ nativeEvent }) => {
+    scrollPosition.current = nativeEvent.contentOffset.y;
+  }, []);
+
+  const onMomentumScrollEnd = React.useCallback(
+    ({ nativeEvent }) => {
+      if (nativeEvent.contentOffset.y === 0 && !isActiveGesture) {
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+      }
+    },
+    [isActiveGesture]
+  );
+
+  React.useEffect(() => {
+    return () => {
+      scrollPosition.current = 0;
+
+      resetScrollAnimatedValues(
+        lastScrollY,
+        lastScrollYValue,
+        dragScrollY,
+        dragVideoPlayerY
+      );
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (
+      videoModalState.mode === "MINIMIZED" &&
+      videoModalState.previousMode === "MAXIMIZED"
+    ) {
+      resetPlayerAnimationState();
+    }
+
+    if (
+      (videoModalState.mode === "MAXIMIZED" &&
+        videoModalState.previousMode === "MAXIMIZED") ||
+      previousItemId !== videoModalState.item?.id
+    ) {
+      setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+      setTimeout(() => resetPlayerAnimationState());
+    }
+  }, [videoModalState, previousItemId]);
+
+  React.useEffect(() => {
+    if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
+      if (
+        (scrollPosition.current === 0 &&
+          (lastScrollY as any)._value !== 0 &&
+          (dragScrollY as any)._value === 0 &&
+          (dragVideoPlayerY as any)._value === 0) ||
+        (scrollPosition.current !== 0 &&
+          ((dragScrollY as any)._value !== 0 ||
+            (dragVideoPlayerY as any)._value !== 0))
+      ) {
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+      }
+
+      Animated.timing(
+        translateYOffset,
+        getAnimatedConfig(modalSnapPoints[1])
+      ).start(() => {
+        setTimeout(() => {
+          minimiseVideoModal();
+
+          setScrollModalAnimatedValue(
+            translateYOffset,
+            modalSnapPoints[1],
+            setLastSnap
+          );
+
+          resetScrollAnimatedValues(
+            lastScrollY,
+            lastScrollYValue,
+            dragScrollY,
+            dragVideoPlayerY
+          );
+        }, 150);
+      });
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
+      Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
+        maximiseVideoModal();
+        setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+
+        resetPlayerAnimationState();
+      });
+    }
+
+    const lastScrollYListenerId = lastScrollY.addListener(({ value }) => {
+      lastScrollYValue.current = value;
+    });
+
+    const dragListenerId = dragScrollY.addListener(({ value }) => {
+      const preparedValue =
+        isMinimizedModal && value >= 0
+          ? 0
+          : Math.round(isAudioItem ? Math.abs(value) : value);
+
+      if (
+        preparedValue > 0 &&
+        scrollPosition.current === 0 &&
+        playerAnimationState !== PlayerAnimationStateEnum.drag_player
+      ) {
+        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll &&
+          setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
+      }
+    });
+
+    return () => {
+      lastScrollY.removeListener(lastScrollYListenerId);
+      dragScrollY.removeListener(dragListenerId);
+    };
+  }, [playerAnimationState, isAudioItem, modalSnapPoints]);
+
+  const Wrapper = React.useMemo(
+    () => (Platform.OS === "android" ? GestureHandlerRootView : View),
+    []
+  );
+
+  return (
+    <Wrapper style={generalStyles.container}>
+      <TapGestureHandler
+        maxDurationMs={100000}
+        ref={tapHandlerRef}
+        maxDeltaY={lastSnap - modalSnapPoints[0]}
+        numberOfTaps={1}
+      >
+        <View pointerEvents="box-none">
+          <PanGestureHandler
+            enabled={
+              (isMaximazedModal || isMinimizedModal) &&
+              isNotMinimizeMaximazeAnimation
+            }
+            ref={panHandlerRef}
+            simultaneousHandlers={[scrollRef, tapHandlerRef]}
+            shouldCancelWhenOutside={isMaximazedModal}
+            onGestureEvent={onGestureEvent}
+            onHandlerStateChange={onHandlerStateChange}
+          >
+            <Animated.View>
+              <NativeViewGestureHandler
+                ref={scrollRef}
+                waitFor={tapHandlerRef}
+                simultaneousHandlers={panHandlerRef}
+              >
+                <Animated.ScrollView
+                  scrollEnabled={
+                    isMaximazedModal && isNotMinimizeMaximazeAnimation
+                  }
+                  bounces={false}
+                  onScrollBeginDrag={onRegisterLastScroll}
+                  onScroll={onScroll}
+                  onMomentumScrollEnd={onMomentumScrollEnd}
+                  scrollEventThrottle={1}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {children}
+                </Animated.ScrollView>
+              </NativeViewGestureHandler>
+            </Animated.View>
+          </PanGestureHandler>
+        </View>
+      </TapGestureHandler>
+    </Wrapper>
+  );
+};
+
+export const AnimatedScrollModal = ({ children }: Props) => {
+  const Component = !isTV() ? AnimatedScrollModalComponent : React.Fragment;
+
+  return <Component>{children}</Component>;
+};