@applicaster/zapp-react-native-ui-components 15.0.0-alpha.5740530237 → 15.0.0-alpha.5830601313

package/Components/ScreenRevealManager/utils/index.ts

@@ -0,0 +1,23 @@
+import { ReplaySubject } from "rxjs";
+import { pairwise, filter, first } from "rxjs/operators";
+
+// we are interested in last 2 events, because we wait transition from <false> to <true>
+const screenRevealManagerSubject$ = new ReplaySubject<boolean>(2);
+
+export const emitScreenRevealManagerIsReadyToShow = () => {
+  screenRevealManagerSubject$.next(true);
+};
+
+export const emitScreenRevealManagerIsNotReadyToShow = () => {
+  screenRevealManagerSubject$.next(false);
+};
+
+export const waitUntilScreenRevealManagerIsReady = () => {
+  return screenRevealManagerSubject$.pipe(
+    pairwise(), // emit consecutive pairs: [prev, curr]
+    filter(
+      ([previousIsReady, currentIsReady]) => !previousIsReady && currentIsReady
+    ), // detect transition from not_ready to ready
+    first()
+  );
+};

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -1,21 +1,23 @@
 import * as React from "react";
-import { Animated } from "react-native";
+import { Animated, StyleSheet } from "react-native";
 import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 import { ScreenRevealManager } from "./ScreenRevealManager";
+import {
+  emitScreenRevealManagerIsReadyToShow,
+  emitScreenRevealManagerIsNotReadyToShow,
+} from "./utils";
 
-const flex = platformSelect({
-  tvos: 1,
-  android_tv: 1,
-  web: undefined,
-  samsung_tv: undefined,
-  lg_tv: undefined,
-  default: undefined,
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    position: "absolute",
+  },
 });
 
-export const TIMEOUT = 500; // 500 ms
+export const TIMEOUT = 300; // 300 ms
 
 const HIDDEN = 0; // opacity = 0
 
@@ -29,29 +31,48 @@ export const withScreenRevealManager = (Component) => {
   return function WithScreenRevealManager(props: Props) {
     const { componentsToRender } = props;
 
-    const [isReadyToShow, setIsReadyToShow] = React.useState(false);
+    const [isContentReadyToBeShown, setIsContentReadyToBeShown] =
+      React.useState(false);
 
-    const handleSetIsReadyToShow = React.useCallback(() => {
-      setIsReadyToShow(true);
+    const [isShowOverlay, setIsShowOverlay] = React.useState(true);
+
+    const theme = useTheme<BaseThemePropertiesTV>();
+
+    const handleSetIsContentReadyToBeShown = React.useCallback(() => {
+      setIsContentReadyToBeShown(true);
     }, []);
 
     const managerRef = useRefWithInitialValue<ScreenRevealManager>(
-      () => new ScreenRevealManager(componentsToRender, handleSetIsReadyToShow)
+      () =>
+        new ScreenRevealManager(
+          componentsToRender,
+          handleSetIsContentReadyToBeShown
+        )
     );
 
     const opacityRef = useRefWithInitialValue<Animated.Value>(
-      () => new Animated.Value(HIDDEN)
+      () => new Animated.Value(SHOWN)
     );
 
     React.useEffect(() => {
-      if (isReadyToShow) {
+      if (!isContentReadyToBeShown) {
+        emitScreenRevealManagerIsNotReadyToShow();
+      } else {
+        emitScreenRevealManagerIsReadyToShow();
+      }
+    }, [isContentReadyToBeShown]);
+
+    React.useEffect(() => {
+      if (isContentReadyToBeShown) {
         Animated.timing(opacityRef.current, {
-          toValue: SHOWN,
+          toValue: HIDDEN,
           duration: TIMEOUT,
           useNativeDriver: true,
-        }).start();
+        }).start(() => {
+          setIsShowOverlay(false);
+        });
       }
-    }, [isReadyToShow]);
+    }, [isContentReadyToBeShown]);
 
     if (isFirstComponentScreenPicker(componentsToRender)) {
       // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
@@ -59,10 +80,7 @@ export const withScreenRevealManager = (Component) => {
     }
 
     return (
-      <Animated.View
-        style={{ opacity: opacityRef.current, flex }}
-        testID="animated-component"
-      >
+      <>
         <Component
           {...props}
           initialNumberToLoad={
@@ -73,7 +91,19 @@ export const withScreenRevealManager = (Component) => {
           }
           onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
         />
-      </Animated.View>
+        {isShowOverlay ? (
+          <Animated.View
+            style={[
+              styles.container,
+              {
+                opacity: opacityRef.current,
+                backgroundColor: theme.app_background_color,
+              },
+            ]}
+            testID="animated-component"
+          />
+        ) : null}
+      </>
     );
   };
 };

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
   <View>
     <View
       collapsable={false}
+      renderToHardwareTextureAndroid={false}
       style={
         {
           "opacity": 1,

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,33 +1,5 @@
-import React, { useRef, useState } from "react";
-import { Animated, View } from "react-native";
-
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import {
-  PlayerAnimationStateEnum,
-  useModalAnimationContext,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
-import {
-  useDimensions,
-  useGetBottomTabBarHeight,
-  useNavigation,
-} 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 {
-  AUDIO_PLAYER_HORIZONTAL_PADDING,
-  ComponentAnimationType,
-  defaultAspectRatioWidth,
-  gestureListenerHelper,
-  getAnimationDefaultValue,
-  getAnimationStyle,
-  getMoveUpValue,
-} from "./utils";
-
-import { DURATION_TO_MINIMIZE, DEFAULT_DURATION_FOR_ANIMATION } from "./const";
+import React from "react";
+import { View } from "react-native";
 
 type Props = {
   animationType: string;
@@ -36,465 +8,10 @@ type Props = {
   additionalData?: { [key: string]: any };
 };
 
-export const AnimationView = ({
-  animationType,
-  style,
-  children,
-  additionalData = {},
-}: Props) => {
-  const {
-    startComponentsAnimation,
-    setStartComponentsAnimation,
-    playerAnimationState,
-    minimisedHeight,
-    animatedValues: { dragScrollY, dragVideoPlayerY },
-    lastScrollYValue,
-    scrollPosition,
-    tabletLandscapePlayerTopPosition,
-    setTabletLandscapePlayerTopPosition,
-    modalSnapPoints,
-    startComponentsAnimationDistance,
-    progressBarHeight,
-  } = useModalAnimationContext();
-
-  const isRTL = useIsRTL();
-  const isAppActive = useAppState(true);
-
-  const {
-    width: screenWidth,
-    deviceInfo: { isTablet, isTabletLandscape },
-  } = useDimensions("window", {
-    deviceInfo: true,
-    updateForInactiveScreens: true,
-  });
-
-  const { videoModalState } = useNavigation();
-  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
-
-  const insets = useSafeAreaInsets();
-  const bottomTabBarHeight = useGetBottomTabBarHeight() + (insets.bottom || 0);
-  const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
-  const animationComponentRef = useRef(null);
-
-  // retrieving top position of the player for tablet landscape mode
-  const measureView = React.useCallback(() => {
-    if (isTabletLandscape && tabletLandscapePlayerTopPosition === 0) {
-      animationComponentRef.current.measure(
-        (_x, _y, _width, _height, _pageX, pageY) => {
-          setTabletLandscapePlayerTopPosition(pageY - 20);
-        }
-      );
-    }
-  }, [tabletLandscapePlayerTopPosition]);
-
-  const [defaultValue, setDefaultValue] = useState<any>(
-    getAnimationDefaultValue(animationType, bottomTabBarHeight)
-  );
-
-  const isAudioItem = React.useMemo(
-    () =>
-      videoModalItem?.content?.type?.includes?.("audio") ||
-      videoModalItem?.type?.value?.includes?.("audio"),
-    [videoModalItem]
-  );
-
-  const inlineAudioPlayer = additionalData.inlineAudioPlayer;
-
-  const moveUpValue = getMoveUpValue({
-    additionalData,
-    insets,
-    isAudioItem,
-    progressBarHeight,
-    isTablet,
-    isTabletLandscape,
-    tabletLandscapePlayerTopPosition,
-  });
-
-  const moveComponentHorizontalValue = additionalData.moveValue
-    ? isRTL
-      ? additionalData.moveValue
-      : -additionalData.moveValue
-    : 0;
-
-  const animationValueType: string =
-    animationType === ComponentAnimationType.player ? "ValueXY" : "Value";
-
-  const getAnimationValue = React.useCallback(
-    (animationType, state) => {
-      const defaultConfig = {
-        toValue: 0,
-        duration:
-          state === PlayerAnimationStateEnum.minimize
-            ? DURATION_TO_MINIMIZE
-            : DEFAULT_DURATION_FOR_ANIMATION,
-        useNativeDriver: true,
-      };
-
-      switch (animationType) {
-        case ComponentAnimationType.bottomBar: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.player: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            const minWidth =
-              isAudioItem && !inlineAudioPlayer
-                ? minimisedHeight
-                : minimisedWidth;
-
-            return {
-              ...defaultConfig,
-              toValue: { x: minWidth, y: minimisedHeight },
-              useNativeDriver: false,
-            };
-          }
-
-          return {
-            ...defaultConfig,
-            toValue: defaultValue,
-            useNativeDriver: false,
-          };
-        }
-
-        case ComponentAnimationType.componentFade: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = 0;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.componentAppears: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = 1;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.moveUpComponent: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = moveUpValue;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.moveComponentHorizontal: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = moveComponentHorizontalValue;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.audioPlayerPaddingHorizontal: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = isRTL
-              ? AUDIO_PLAYER_HORIZONTAL_PADDING
-              : -AUDIO_PLAYER_HORIZONTAL_PADDING;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = 0;
-
-          return defaultConfig;
-        }
-
-        default:
-          return defaultConfig;
-      }
-    },
-    [
-      defaultValue,
-      minimisedWidth,
-      minimisedHeight,
-      isAudioItem,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      isRTL,
-      inlineAudioPlayer,
-    ]
-  );
-
-  const getInitialValue = React.useCallback(() => {
-    const { mode: videoModalMode, previousMode } = videoModalState;
-    const mode = videoModalMode === "PIP" ? previousMode : videoModalMode;
-
-    switch (mode) {
-      case "MINIMIZED":
-        return getAnimationValue(
-          animationType,
-          PlayerAnimationStateEnum.minimize
-        ).toValue;
-
-      case "MAXIMIZED":
-      default:
-        return getAnimationValue(
-          animationType,
-          PlayerAnimationStateEnum.maximize
-        ).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: videoModalMode === "MINIMIZED",
-      inlineAudioPlayer,
-    }),
-    [
-      bottomTabBarHeight,
-      minimisedHeight,
-      minimisedWidth,
-      defaultValue,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      videoModalMode,
-      isAudioItem,
-      isTablet,
-      isTabletLandscape,
-      isRTL,
-      inlineAudioPlayer,
-    ]
-  );
-
-  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 (
-        (videoModalMode === "MAXIMIZED" || videoModalMode === "MINIMIZED") &&
-        defaultValue.x !== screenWidth &&
-        width &&
-        height
-      ) {
-        const value = { x: width, y: height };
-        setDefaultValue(value);
-        animatedValue.setValue(value);
-      }
-    }
-  }, [screenWidth]);
-
-  React.useEffect(() => {
-    const { mode, previousMode } = videoModalState;
-
-    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
-      // set animation to the minimize values if moving from the player to another screen
-      if (playerAnimationState === null) {
-        const value = getAnimationValue(
-          animationType,
-          PlayerAnimationStateEnum.minimize
-        ).toValue;
-
-        animatedValue.setValue(value);
-      }
-    }
-  }, [
-    animatedValue,
-    animationType,
-    getAnimationValue,
-    playerAnimationState,
-    videoModalState,
-  ]);
-
-  React.useEffect(() => {
-    if (
-      playerAnimationState === PlayerAnimationStateEnum.minimize &&
-      startComponentsAnimation &&
-      videoModalMode === "MAXIMIZED"
-    ) {
-      Animated.timing(
-        animatedValue,
-        getAnimationValue(animationType, playerAnimationState)
-      ).start();
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
-      animatedValue.setValue(defaultValue);
-    }
-  }, [playerAnimationState, startComponentsAnimation, defaultValue]);
-
-  React.useEffect(() => {
-    const dragVideoPlayerYListenerId = dragVideoPlayerY.addListener(
-      ({ value }) => {
-        if (playerAnimationState === PlayerAnimationStateEnum.drag_player) {
-          const preparedValue = Math.round(Math.abs(value));
-
-          gestureListenerHelper({
-            listenerValue: value,
-            preparedValue,
-            animationType,
-            animatedValue,
-            calculationData,
-            modalSnapPoint: modalSnapPoints[1],
-            startComponentsAnimationDistance,
-            startComponentsAnimation,
-            setStartComponentsAnimation,
-            getAnimationValue,
-          });
-        }
-      }
-    );
-
-    const dragListenerId = dragScrollY.addListener(({ value }) => {
-      if (
-        scrollPosition.current === 0 &&
-        playerAnimationState === PlayerAnimationStateEnum.drag_scroll
-      ) {
-        const preparedValue = Math.round(
-          Math.abs(value) - lastScrollYValue.current
-        );
-
-        gestureListenerHelper({
-          listenerValue: value,
-          preparedValue,
-          animationType,
-          animatedValue,
-          calculationData,
-          modalSnapPoint: modalSnapPoints[1],
-          startComponentsAnimationDistance,
-          startComponentsAnimation,
-          setStartComponentsAnimation,
-          getAnimationValue,
-        });
-      }
-    });
-
-    return () => {
-      dragScrollY.removeListener(dragListenerId);
-      dragVideoPlayerY.removeListener(dragVideoPlayerYListenerId);
-    };
-  }, [playerAnimationState, calculationData, startComponentsAnimation]);
-
-  const preparedStyles = Array.isArray(style) ? style : [style];
-
-  return (
-    <Animated.View
-      onLayout={additionalData.useLayoutMeasure ? measureView : undefined}
-      ref={animationComponentRef}
-      style={[
-        ...preparedStyles,
-        (videoModalMode === "MAXIMIZED" ||
-          videoModalMode === "MINIMIZED" ||
-          (videoModalMode === "PIP" && isAppActive)) &&
-          getAnimationStyle(animationType, animatedValue),
-      ]}
-    >
-      {children}
-    </Animated.View>
-  );
-};
-
 export const AnimationComponent = (props: Props) => {
-  const { additionalData = {}, style } = props;
-
-  const {
-    videoModalState: { visible },
-  } = useNavigation();
-
-  if (additionalData?.disableAnimatedComponent) {
-    return <>{props.children}</>;
-  }
-
-  const useAnimation =
-    visible && !additionalData.disableAnimatedComponent && !isTV();
-
-  const isReactFragment = !useAnimation && !style;
-
-  const Component = useAnimation
-    ? AnimationView
-    : style
-      ? View
-      : React.Fragment;
-
-  if (
-    additionalData.extraAnimation &&
-    typeof additionalData.extraAnimation === "object" &&
-    !Array.isArray(additionalData.extraAnimation) &&
-    !!Object.keys(additionalData.extraAnimation).length
-  ) {
-    const animationType = Object.keys(additionalData.extraAnimation)[0];
-    const animationProps = additionalData.extraAnimation[animationType] || {};
-    delete additionalData.extraAnimation[animationType];
-
-    return (
-      // @ts-ignore
-      <Component {...(isReactFragment ? null : props)}>
-        <AnimationComponent
-          {...animationProps}
-          animationType={animationType}
-          additionalData={{
-            ...animationProps.additionalData,
-            extraAnimation:
-              !!Object.keys(additionalData.extraAnimation).length &&
-              additionalData.extraAnimation,
-          }}
-        >
-          {props.children}
-        </AnimationComponent>
-      </Component>
-    );
-  }
+  const { style } = props;
 
-  if (isReactFragment) {
-    // @ts-ignore
-    return <Component>{props.children}</Component>;
-  }
+  const Component = style ? View : React.Fragment;
 
   return <Component {...props}>{props.children}</Component>;
 };