@applicaster/zapp-react-native-ui-components 12.0.0-alpha.7921075302 → 12.0.0-alpha.8024419438

package/Components/Transitioner/Transitioner.tsx

@@ -4,10 +4,7 @@ import * as R from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
-import {
-  getScreenOrientation,
-  isOrientationCompatible,
-} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+
 import {
   getSceneByRoute,
   shouldSkipAnimationForPreviousWebViewScene,
@@ -277,33 +274,25 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle, layoutData } = this.props;
-    const screenData = scenes[to.index]?.children?.props?.screenData;
-
-    const orientation = getScreenOrientation({
-      screenData,
-      layoutData,
-    });
+    const { contentStyle } = this.props;
+    const screenData = this.props.children.props.screenData;
+    const pathname = scenes[to.index].key;
 
-    // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
-    // This saves unnecessary re-renders and user will not see distorted aspect screen.
     return (
       <View style={styles.container}>
-        {scenes[to.index] &&
-          isOrientationCompatible({
-            orientation,
-            layoutData,
-          }) && (
-            <Scene
-              {...{ style: to.style }}
-              pathname={scenes[to.index].key}
-              contentStyle={contentStyle}
-              key={scenes[to.index].key}
-              screenUniqueId={scenes[to.index].screenUniqueId}
-            >
-              {scenes[to.index].children}
-            </Scene>
-          )}
+        {scenes[to.index] && (
+          <Scene
+            {...{ style: to.style }}
+            pathname={pathname}
+            isActive={pathname === this.props.navigator.currentRoute}
+            contentStyle={contentStyle}
+            key={scenes[to.index].key}
+            screenUniqueId={scenes[to.index].screenUniqueId}
+            screenData={screenData}
+          >
+            {scenes[to.index].children}
+          </Scene>
+        )}
       </View>
     );
   }
@@ -319,12 +308,14 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
+        isActive={scenes[from.index].key === this.props.navigator.currentRoute}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[from.index].screenUniqueId}
+        screenData={scenes[from.index].children.props.screenData}
       >
         {scenes[from.index].children}
       </Scene>
@@ -333,12 +324,14 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
+        isActive={scenes[to.index].key === this.props.navigator.currentRoute}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[to.index].screenUniqueId}
+        screenData={this.props.children.props.screenData}
       >
         {scenes[to.index].children}
       </Scene>

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -21,7 +21,9 @@ exports[`<Scene /> renders correctly 1`] = `
     ]
   }
 >
-  <ContextProvider />
+  <ContextProvider>
+    <ContextProvider />
+  </ContextProvider>
 </ForwardRef(AnimatedComponentWrapper)>
 `;
 
@@ -43,7 +45,9 @@ exports[`<Scene /> renders the overlay while animating 1`] = `
     ]
   }
 >
-  <ContextProvider />
+  <ContextProvider>
+    <ContextProvider />
+  </ContextProvider>
   <ForwardRef(AnimatedComponentWrapper)
     style={
       Object {

package/Components/Transitioner/__tests__/__snapshots__/transitioner.test.js.snap

@@ -10,6 +10,7 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
   }
 >
   <Scene
+    isActive={true}
     screenUniqueId="mocked-uuid"
   >
     <View

package/Components/VideoLive/LiveImageManager.ts

@@ -10,7 +10,11 @@ import { Component } from "react";
 
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
-export type LiveImageManagerEvent = "onEnd" | "onStart" | "onError";
+export type LiveImageManagerEvent =
+  | "onEnd"
+  | "onStart"
+  | "onError"
+  | "onDestroy";
 
 export type LiveImageManagerListenerData = {
   id: string;
@@ -102,6 +106,16 @@ export class LiveImageManager implements PlayerLifecycleListener {
     }
 
     this.items = this.items.filter((i) => i !== item);
+
+    this.invokeListenersUpdate({
+      callbackName: "onDestroy",
+      event: {
+        item,
+        playerId: this.currentlyPlaying?.playerId,
+        primaryPlayerId: this.primaryPlayer?.playerId,
+        entry: item.getPlayer().getEntry(),
+      },
+    });
   };
 
   public onViewportEnter = (item: LiveImage) => {
@@ -351,6 +365,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
         item,
         playerId: this.currentlyPlaying?.playerId,
         primaryPlayerId: this.primaryPlayer?.playerId,
+        entry: item.getPlayer().getEntry(),
       },
     });
   };
@@ -385,6 +400,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
           item,
           playerId: this.currentlyPlaying?.playerId,
           primaryPlayerId: this.primaryPlayer?.playerId,
+          entry: item.getPlayer().getEntry(),
         },
       });
   };
@@ -419,6 +435,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
         error,
         playerId: currentItem?.playerId,
         primaryPlayerId: currentItem?.playerId,
+        entry: item.getPlayer().getEntry(),
       },
     });
   };

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -100,58 +100,68 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     { 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 onHandlerStateChange = React.useCallback(
+    ({ 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;
+        const preparedTranslationY =
+          Math.abs(translationY) - lastScrollYValue.current;
 
-      if (videoModalState.mode === "MAXIMIZED") {
-        const endOffsetY =
-          lastSnap + preparedTranslationY + dragToss * velocityY + 150;
+        if (videoModalState.mode === "MAXIMIZED") {
+          const endOffsetY =
+            lastSnap + preparedTranslationY + dragToss * velocityY + 150;
 
-        let destSnapPoint = modalSnapPoints[0];
+          let destSnapPoint = modalSnapPoints[0];
 
-        for (const snapPoint of modalSnapPoints) {
-          const distFromSnap = Math.abs(snapPoint - endOffsetY);
+          for (const snapPoint of modalSnapPoints) {
+            const distFromSnap = Math.abs(snapPoint - endOffsetY);
 
-          if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
-            destSnapPoint = snapPoint;
+            if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
+              destSnapPoint = snapPoint;
+            }
           }
-        }
 
-        setLastSnap(destSnapPoint);
+          setLastSnap(destSnapPoint);
 
-        if (destSnapPoint === modalSnapPoints[0]) {
-          translateYOffset.extractOffset();
-          translateYOffset.setValue(preparedTranslationY);
-          translateYOffset.flattenOffset();
-          dragScrollY.setValue(0);
+          if (destSnapPoint === modalSnapPoints[0]) {
+            translateYOffset.extractOffset();
+            translateYOffset.setValue(preparedTranslationY);
+            translateYOffset.flattenOffset();
+            dragScrollY.setValue(0);
 
-          setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+          } else {
+            setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
+          }
         } else {
-          setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
+          if (translationY < 0) {
+            // from mini to full
+            setLastSnap(modalSnapPoints[0]);
+
+            translateYOffset.setValue(
+              modalSnapPoints[1] - preparedTranslationY
+            );
+
+            dragScrollY.setValue(0);
+
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+          } else {
+            resetPlayerAnimationState();
+          }
         }
       } else {
-        if (translationY < 0) {
-          // from mini to full
-          setLastSnap(modalSnapPoints[0]);
-          translateYOffset.setValue(modalSnapPoints[1] - preparedTranslationY);
-          dragScrollY.setValue(0);
-
-          setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
-        } else {
+        playerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
           resetPlayerAnimationState();
-        }
       }
-    } else {
-      playerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
-        resetPlayerAnimationState();
-    }
-  };
+    },
+    [lastSnap, modalSnapPoints, playerAnimationState, videoModalState.mode]
+  );
 
   const onScroll = React.useCallback(({ nativeEvent }) => {
     scrollPosition.current = nativeEvent.contentOffset.y;

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -50,50 +50,57 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
     { useNativeDriver: true }
   );
 
-  const onHandlerStateChange = ({ nativeEvent }) => {
-    if (nativeEvent.oldState === State.ACTIVE) {
-      // eslint-disable-next-line prefer-const
-      const { velocityY, translationY } = nativeEvent;
-      const preparedTranslationY = Math.abs(translationY);
-      const dragToss = 0.05;
-
-      if (videoModalState.mode === "MAXIMIZED") {
-        if (translationY > 0) {
-          const endOffsetY =
-            lastSnap + preparedTranslationY + dragToss * velocityY + 200;
-
-          let destSnapPoint = modalSnapPoints[0];
+  const onHandlerStateChange = React.useCallback(
+    ({ nativeEvent }) => {
+      if (nativeEvent.oldState === State.ACTIVE) {
+        // eslint-disable-next-line prefer-const
+        const { velocityY, translationY } = nativeEvent;
+        const preparedTranslationY = Math.abs(translationY);
+        const dragToss = 0.05;
+
+        if (videoModalState.mode === "MAXIMIZED") {
+          if (translationY > 0) {
+            const endOffsetY =
+              lastSnap + preparedTranslationY + dragToss * velocityY + 200;
+
+            let destSnapPoint = modalSnapPoints[0];
+
+            for (const snapPoint of modalSnapPoints) {
+              const distFromSnap = Math.abs(snapPoint - endOffsetY);
+
+              if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
+                destSnapPoint = snapPoint;
+              }
+            }
 
-          for (const snapPoint of modalSnapPoints) {
-            const distFromSnap = Math.abs(snapPoint - endOffsetY);
+            setLastSnap(destSnapPoint);
 
-            if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
-              destSnapPoint = snapPoint;
+            if (destSnapPoint === modalSnapPoints[0]) {
+              setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            } else {
+              lastScrollY.setValue(0);
+              lastScrollYValue.current = 0;
+              setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
             }
           }
+        } else if (videoModalState.mode === "MINIMIZED") {
+          if (translationY < 0) {
+            // from mini to full
+            setLastSnap(modalSnapPoints[0]);
 
-          setLastSnap(destSnapPoint);
+            translateYOffset.setValue(
+              modalSnapPoints[1] - preparedTranslationY
+            );
 
-          if (destSnapPoint === modalSnapPoints[0]) {
             setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
           } else {
-            lastScrollY.setValue(0);
-            lastScrollYValue.current = 0;
-            setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
+            resetPlayerAnimationState();
           }
         }
-      } else if (videoModalState.mode === "MINIMIZED") {
-        if (translationY < 0) {
-          // from mini to full
-          setLastSnap(modalSnapPoints[0]);
-          translateYOffset.setValue(modalSnapPoints[1] - preparedTranslationY);
-          setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
-        } else {
-          resetPlayerAnimationState();
-        }
       }
-    }
-  };
+    },
+    [lastSnap, modalSnapPoints, videoModalState.mode]
+  );
 
   React.useEffect(() => {
     const dragVideoPlayerYListenerId = dragVideoPlayerY.addListener(

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,10 +1,7 @@
 import React, { useRef, useState } from "react";
 import { Animated, View, StyleSheet } from "react-native";
 
-import {
-  useSafeAreaInsets,
-  useSafeAreaFrame,
-} from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import {
   useModalAnimationContext,
@@ -18,6 +15,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
 
 import {
   gestureListenerHelper,
@@ -59,18 +57,19 @@ export const AnimationView = ({
   } = useModalAnimationContext();
 
   const isRTL = useIsRTL();
+  const isAppActive = useAppState(true);
 
   const {
     height: screenHeight,
+    width: screenWidth,
     deviceInfo: { isTablet, isTabletLandscape },
-  } = useDimensions("screen", { deviceInfo: true });
+  } = useDimensions("window", { deviceInfo: true });
 
   const startAnimationDistance = Math.round((screenHeight * 60) / 100);
   const { videoModalState } = useNavigation();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
   const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
   const insets = useSafeAreaInsets();
-  const { width: screenWidth } = useSafeAreaFrame();
   const animationComponentRef = useRef(null);
 
   // retrieving top position of the player for tablet landscape mode
@@ -88,13 +87,6 @@ export const AnimationView = ({
     getAnimationDefaultValue(animationType, bottomTabBarHeight)
   );
 
-  const animationValueType: string =
-    animationType === ComponentAnimationType.player ? "ValueXY" : "Value";
-
-  const animatedValue = useRef(
-    new Animated[animationValueType](defaultValue)
-  ).current;
-
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -118,63 +110,8 @@ export const AnimationView = ({
       : -additionalData.moveValue
     : 0;
 
-  const calculationData = React.useMemo(
-    () => ({
-      isAudioItem,
-      bottomTabBarHeight,
-      minimisedHeight,
-      minimisedWidth,
-      defaultValue,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      isTablet,
-      isTabletLandscape,
-      isRTL,
-      fromMiniPlayer: videoModalState.mode === "MINIMIZED",
-      inlineAudioPlayer,
-    }),
-    [
-      bottomTabBarHeight,
-      minimisedHeight,
-      minimisedWidth,
-      defaultValue,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      videoModalState.mode,
-    ]
-  );
-
-  React.useEffect(() => {
-    if (additionalData.resetAnimationValue) {
-      animatedValue.setValue(0);
-    }
-  }, [additionalData.resetAnimationValue]);
-
-  React.useEffect(() => {
-    if (animationType === ComponentAnimationType.player) {
-      let width, height;
-
-      if (additionalData.aspectRatio) {
-        width = isTabletLandscape ? additionalData.width : screenWidth;
-
-        height =
-          (isTabletLandscape ? additionalData.width : screenWidth) /
-          additionalData.aspectRatio;
-      } else {
-        width =
-          typeof additionalData.width === "number" && additionalData.width;
-
-        height =
-          typeof additionalData.height === "number" && additionalData.height;
-      }
-
-      if (defaultValue.x === 0 && width && height) {
-        const value = { x: width, y: height };
-        setDefaultValue(value);
-        animatedValue.setValue(value);
-      }
-    }
-  }, [additionalData, screenWidth]);
+  const animationValueType: string =
+    animationType === ComponentAnimationType.player ? "ValueXY" : "Value";
 
   const getAnimationValue = React.useCallback(
     (animationType, state) => {
@@ -292,6 +229,90 @@ export const AnimationView = ({
     ]
   );
 
+  const getInitialValue = React.useCallback(() => {
+    const mode =
+      videoModalState.mode === "PIP"
+        ? videoModalState.previousMode
+        : videoModalState.mode;
+
+    switch (mode) {
+      case "MINIMIZED":
+        return getAnimationValue(
+          animationType,
+          PlayerAnimationStateEnum.minimize
+        ).toValue;
+
+      case "MAXIMIZED":
+      default:
+        return getAnimationValue(
+          animationType,
+          PlayerAnimationStateEnum.maximaze
+        ).toValue;
+    }
+  }, [defaultValue, videoModalState]);
+
+  const animatedValue = useRef(
+    new Animated[animationValueType](getInitialValue())
+  ).current;
+
+  const calculationData = React.useMemo(
+    () => ({
+      isAudioItem,
+      bottomTabBarHeight,
+      minimisedHeight,
+      minimisedWidth,
+      defaultValue,
+      moveUpValue,
+      moveComponentHorizontalValue,
+      isTablet,
+      isTabletLandscape,
+      isRTL,
+      fromMiniPlayer: videoModalState.mode === "MINIMIZED",
+      inlineAudioPlayer,
+    }),
+    [
+      bottomTabBarHeight,
+      minimisedHeight,
+      minimisedWidth,
+      defaultValue,
+      moveUpValue,
+      moveComponentHorizontalValue,
+      videoModalState.mode,
+    ]
+  );
+
+  React.useEffect(() => {
+    if (additionalData.resetAnimationValue) {
+      animatedValue.setValue(defaultValue);
+    }
+  }, [additionalData.resetAnimationValue, defaultValue]);
+
+  React.useEffect(() => {
+    if (animationType === ComponentAnimationType.player) {
+      let width, height;
+
+      if (additionalData.aspectRatio) {
+        width = isTabletLandscape ? additionalData.width : screenWidth;
+
+        height =
+          (isTabletLandscape ? additionalData.width : screenWidth) /
+          additionalData.aspectRatio;
+      } else {
+        width =
+          typeof additionalData.width === "number" && additionalData.width;
+
+        height =
+          typeof additionalData.height === "number" && additionalData.height;
+      }
+
+      if (defaultValue.x === 0 && width && height) {
+        const value = { x: width, y: height };
+        setDefaultValue(value);
+        animatedValue.setValue(value);
+      }
+    }
+  }, [additionalData, screenWidth]);
+
   React.useEffect(() => {
     if (
       playerAnimationState === PlayerAnimationStateEnum.minimize &&
@@ -374,7 +395,8 @@ export const AnimationView = ({
         ...preparedStyles,
         additionalData.saveArea ? styles.flex : null,
         (videoModalState.mode === "MAXIMIZED" ||
-          videoModalState.mode === "MINIMIZED") &&
+          videoModalState.mode === "MINIMIZED" ||
+          (videoModalState.mode === "PIP" && isAppActive)) &&
           getAnimationStyle(animationType, animatedValue),
       ]}
     >
@@ -412,6 +434,7 @@ export const AnimationComponent = (props: Props) => {
     delete additionalData.extraAnimation[animationType];
 
     return (
+      // @ts-ignore
       <Component {...(isReactFragment ? null : props)}>
         <AnimationComponent
           {...animationProps}

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,8 +1,11 @@
 import React, { useContext } from "react";
 import { Animated } from "react-native";
 
-import { useSafeAreaFrame } from "react-native-safe-area-context";
-import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  useGetBottomTabBarHeight,
+  useDimensions,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { useConfiguration } from "../utils";
 
@@ -90,9 +93,17 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const translateYOffset = React.useRef(new Animated.Value(0)).current;
   const dragVideoPlayerY = React.useRef(new Animated.Value(0)).current;
 
-  const { height } = useSafeAreaFrame();
+  const { height } = useDimensions("window", { fullDimensions: true });
+  const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
-  const minValue = height - minimisedHeight - bottomTabBarHeight;
+
+  /*
+    If bottomTabBarHeight is equal 0 it means an app does not use bottomTabBar.
+    Because of this we need to minus bottom SafeArea offset.
+  */
+  const minValue =
+    height - minimisedHeight - (bottomTabBarHeight || bottomSafeArea);
+
   const modalSnapPoints = React.useMemo(() => [0, minValue], [minValue]);
   // Last snap state which will helps us to make smooth responder to scrollview animation
   const [lastSnap, setLastSnap] = React.useState<number>(modalSnapPoints[0]);

package/Components/VideoModal/PlayerDetails.tsx

@@ -42,12 +42,12 @@ export const PlayerDetails = ({
     : {};
 
   // Animation setup
-  const translateY = useRef(new Animated.Value(100)).current;
+  const translateY = useRef(new Animated.Value(50)).current;
   const opacity = useRef(new Animated.Value(0)).current;
 
   const runAnimation = () => {
     Animated.timing(translateY, {
-      toValue: 0,
+      toValue: -30,
       duration: 500,
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: true,
@@ -63,7 +63,7 @@ export const PlayerDetails = ({
 
   useEffect(() => {
     if (isAudioPlayer) {
-      setTimeout(() => runAnimation(), 1000);
+      setTimeout(() => runAnimation(), 1500);
     }
   }, [isAudioPlayer]);