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

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,11 +1,11 @@
 import React, { useContext } from "react";
 import { Animated } from "react-native";
 
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks";
+  useGetBottomTabBarHeight,
+  useDimensions,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { useConfiguration } from "../utils";
 
@@ -93,7 +93,7 @@ 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();
 

package/Components/VideoModal/PlayerWrapper.tsx

@@ -184,8 +184,8 @@ export const PlayerWrapper = (props: Props) => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
 
   return (
-    <ScreenContextProvider pathname={pathname}>
-      <PathnameContext.Provider value={pathname}>
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
         <WrapperView
           edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
           style={[
@@ -199,8 +199,8 @@ export const PlayerWrapper = (props: Props) => {
             additionalData={{ saveArea: true }}
             style={directionStyles(isTabletLandscape)}
           >
-            <ScreenContextProvider pathname={pathname}>
-              <PathnameContext.Provider value={pathname}>
+            <PathnameContext.Provider value={pathname}>
+              <ScreenContextProvider pathname={pathname}>
                 <View
                   testID={`${entry?.id}-player-container`}
                   style={[
@@ -241,11 +241,11 @@ export const PlayerWrapper = (props: Props) => {
                     <View style={defaultStyles.playerDetails} />
                   )}
                 </AnimatedScrollModal>
-              </PathnameContext.Provider>
-            </ScreenContextProvider>
+              </ScreenContextProvider>
+            </PathnameContext.Provider>
           </AnimationComponent>
         </WrapperView>
-      </PathnameContext.Provider>
-    </ScreenContextProvider>
+      </ScreenContextProvider>
+    </PathnameContext.Provider>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -129,8 +129,8 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <ScreenContextProvider pathname={pathname}>
-      <PathnameContext.Provider value={pathname}>
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
         {itemIdHooksFinished === item?.id ? (
           <AnimatedPlayerModalWrapper
             style={[
@@ -153,8 +153,8 @@ const VideoModalComponent = () => {
             <Spinner />
           </View>
         )}
-      </PathnameContext.Provider>
-    </ScreenContextProvider>
+      </ScreenContextProvider>
+    </PathnameContext.Provider>
   );
 };
 

package/Components/VideoModal/utils.ts

@@ -33,8 +33,11 @@ export const useConfiguration = () => {
     ...pluginConfiguration,
   });
 
-  const { minimised_height, minimised_height_tablet, modal_background_color } =
-    config;
+  const {
+    minimised_height = 0,
+    minimised_height_tablet = 0,
+    modal_background_color,
+  } = config;
 
   const minimisedHeight = useIsTablet()
     ? minimised_height_tablet

package/Contexts/ScreenDataContext/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+export const ScreenDataContext = React.createContext<any>(null);
+
+// Use this only to provide initial screenData context, before the Transitioner and Screen is rendered.
+export const withScreenDataContextProvider = (Component: any) => {
+  return function ScreenDataContextProvider(props: any) {
+    const { activeRiver } = useNavigation();
+
+    // use only initial activeRiver as this context should only be used for "Home", initial route
+    const screenData = React.useMemo(() => ({ screen: activeRiver }), []);
+
+    return (
+      <ScreenDataContext.Provider value={screenData}>
+        <Component {...props} />
+      </ScreenDataContext.Provider>
+    );
+  };
+};

package/Contexts/ZappPipesContext/ZappPipesEntryContext.ts

@@ -63,7 +63,7 @@ function prepareContext(
   const parent = findParent(currentContext, route, getChildren);
 
   const newEntry = {
-    route: route,
+    route,
     id: uuid(),
     data: newContext,
   } as SingleEntry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.7855034103",
+  "version": "12.0.0-alpha.8024419438",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.7855034103",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.7855034103",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.7855034103",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.7855034103",
+    "@applicaster/applicaster-types": "12.0.0-alpha.8024419438",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.8024419438",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.8024419438",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.8024419438",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Components/Layout/TV/TransitionOverlay.tsx

@@ -1,64 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
-import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
-import { useScreenConfiguration } from "../../River/useScreenConfiguration";
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
-
-export const TransitionOverlay = () => {
-  const screen = useCurrentScreenData();
-
-  const { backgroundColor: screenBackgroundColor } = useScreenConfiguration(
-    screen?.id
-  );
-
-  const theme = useTheme();
-
-  const themeBackgroundColor = React.useMemo(
-    () => theme.app_background_color,
-    [theme.app_background_color]
-  );
-
-  const backgroundColor = ifEmptyUseFallback(
-    screenBackgroundColor,
-    themeBackgroundColor
-  );
-
-  const {
-    appState: { isTransitioning },
-  } = usePickFromState(["appState"]);
-
-  if (!isWeb() || !isTransitioning) {
-    return null;
-  }
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor,
-        },
-      ]}
-    >
-      <Spinner size={"large"} />
-    </View>
-  );
-};

package/Contexts/ScreenDataContext/index.ts

@@ -1,3 +0,0 @@
-import React from "react";
-
-export const ScreenDataContext = React.createContext<any>(null);