@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4462655310 → 12.0.0-alpha.4484269996

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

@@ -22,7 +22,9 @@ exports[`<Scene /> renders correctly 1`] = `
   }
 >
   <ContextProvider>
-    <ContextProvider />
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
   </ContextProvider>
 </ForwardRef(AnimatedComponentWrapper)>
 `;
@@ -39,14 +41,16 @@ exports[`<Scene /> renders the overlay while animating 1`] = `
         "paddingBottom": 49,
       },
       Object {
-        "height": 1334,
-        "width": 750,
+        "height": "100%",
+        "width": "100%",
       },
     ]
   }
 >
   <ContextProvider>
-    <ContextProvider />
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
   </ContextProvider>
   <ForwardRef(AnimatedComponentWrapper)
     style={

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

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

package/Components/VideoLive/LiveImageManager.ts

@@ -525,6 +525,16 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     LiveImageManager.instance.onLiveImageError(this, error);
   };
 
+  onVideoError = (error: Error) => {
+    log_error(
+      `onVideoError: live-image, fail to play, switching back to image. error: ${
+        error?.message
+      }, ${playerInfo(this.player)}`
+    );
+
+    LiveImageManager.instance.onLiveImageError(this, error);
+  };
+
   onVideoEnd = (_event) => {
     log_info(
       `onVideoEnd: live-image, video completed, switching back to image, ${playerInfo(

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -2,7 +2,7 @@
 //
 import * as React from "react";
 
-import { AppState, AppStateStatus } from "react-native";
+import { AppState, AppStateStatus, View } from "react-native";
 import { TrackedView } from "../TrackedView";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 
@@ -25,8 +25,9 @@ import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/player
 import { getAutoplaySettings } from "./utils";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
+import { useEffect } from "react";
 
-const { log_error } = loggerLiveImageComponent;
+const { log_error, log_debug } = loggerLiveImageComponent;
 
 const isMeasurement = (item: ZappEntry) =>
   isString(item.id) && item.id.startsWith("pre-measurement-");
@@ -56,6 +57,7 @@ const PlayerLiveImageComponent = (props: Props) => {
   );
 
   const ref = React.useRef(null);
+  const trackViewRef = React.useRef(null);
 
   /**
    * Debounced setMode function.
@@ -86,6 +88,30 @@ const PlayerLiveImageComponent = (props: Props) => {
     [mode]
   );
 
+  const entryToViewIdMapping = React.useRef({});
+
+  useEffect(() => {
+    const nativeTag = trackViewRef.current?._nativeTag?.toString();
+
+    if (!nativeTag) {
+      return;
+    }
+
+    const prevValue = entryToViewIdMapping.current[nativeTag];
+
+    if (prevValue && prevValue.itemId !== item.id) {
+      if (mode === LiveImageType.Video) {
+        log_debug(
+          "Entry to view association changed, stopping current live image"
+        );
+
+        setMode(LiveImageType.Image);
+      }
+    }
+
+    entryToViewIdMapping.current[nativeTag] = { itemId: item.id };
+  }, [trackViewRef.current, item.id, mode]);
+
   const { screenConfig, playerPluginId } = props;
 
   const liveImageItem: LiveImage = React.useMemo(() => {
@@ -295,28 +321,30 @@ const PlayerLiveImageComponent = (props: Props) => {
       testId={`tracked-view-${playerId}-${item.title}`}
       onPositionUpdated={onPositionUpdated}
     >
-      {isVideoMode && (
-        <Player
-          autoplay={false}
-          ref={_assignRoot}
-          entry={item} // Must be passed first in list
-          style={videoStyles}
-          playerId={playerId}
-          muted={muted}
-          listener={controller?.getListener()}
-          resizeMode={"cover"}
-          {...platformSpecificProps}
-        />
-      )}
-      {
-        <AnimatedInOut
-          visible={isBackgroundImageVisible}
-          animationConfig={overlayFadeIn}
-          staticStyles={style}
-        >
-          <Image {...props} resizeMode="cover" style={style} applyMaxSize />
-        </AnimatedInOut>
-      }
+      <View ref={trackViewRef}>
+        {isVideoMode && (
+          <Player
+            autoplay={false}
+            ref={_assignRoot}
+            entry={item} // Must be passed first in list
+            style={videoStyles}
+            playerId={playerId}
+            muted={muted}
+            listener={controller?.getListener()}
+            resizeMode={"cover"}
+            {...platformSpecificProps}
+          />
+        )}
+        {
+          <AnimatedInOut
+            visible={isBackgroundImageVisible}
+            animationConfig={overlayFadeIn}
+            staticStyles={style}
+          >
+            <Image {...props} resizeMode="cover" style={style} applyMaxSize />
+          </AnimatedInOut>
+        }
+      </View>
     </TrackedView>
   );
 };

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

@@ -5,33 +5,35 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
   onPositionUpdated={[Function]}
   testId="tracked-view-player1-Test"
 >
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "opacity": 1,
-      }
-    }
-  >
-    <Image
-      applyMaxSize={true}
-      audioMutedByDefault={false}
-      imageKey="image1"
-      item={
+  <View>
+    <View
+      collapsable={false}
+      style={
         Object {
-          "id": "1",
-          "title": "Test",
-          "type": Object {
-            "value": "",
-          },
+          "opacity": 1,
         }
       }
-      onError={[Function]}
-      playerId="player1"
-      resizeMode="cover"
-      screenConfig={Object {}}
-      style={Object {}}
-    />
+    >
+      <Image
+        applyMaxSize={true}
+        audioMutedByDefault={false}
+        imageKey="image1"
+        item={
+          Object {
+            "id": "1",
+            "title": "Test",
+            "type": Object {
+              "value": "",
+            },
+          }
+        }
+        onError={[Function]}
+        playerId="player1"
+        resizeMode="cover"
+        screenConfig={Object {}}
+        style={Object {}}
+      />
+    </View>
   </View>
 </TrackedView>
 `;

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -5,7 +5,6 @@ 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[];
@@ -18,13 +17,8 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
     animatedValues: { lastScrollY, dragScrollY, translateYOffset },
     modalSnapPoints,
     setStartComponentsAnimation,
-    lastScrollYValue,
   } = useModalAnimationContext();
 
-  const { height: screenHeight } = useDimensions("screen", {
-    deviceInfo: true,
-  });
-
   const interpolateConfig: Animated.InterpolationConfigType = React.useMemo(
     () => ({
       inputRange: modalSnapPoints,
@@ -51,16 +45,10 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
   }
 
   React.useEffect(() => {
-    const translateYListener = translateY.addListener(({ value }) => {
-      const preparedValue = Math.round(
-        Math.abs(value) - lastScrollYValue.current
-      );
-
+    const translateYListener = translateY.addListener(() => {
       (playerAnimationState === PlayerAnimationStateEnum.minimize ||
         playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
-        setStartComponentsAnimation(
-          preparedValue >= Math.round((screenHeight * 10) / 100)
-        );
+        setStartComponentsAnimation(true);
     });
 
     return () => {

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -58,6 +58,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     modalSnapPoints,
     lastSnap,
     setLastSnap,
+    setStartComponentsAnimation,
   } = useModalAnimationContext();
 
   const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
@@ -199,12 +200,29 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       videoModalState.mode === "MINIMIZED" &&
       videoModalState.previousMode === "MAXIMIZED"
     ) {
-      resetPlayerAnimationState();
+      // set animation to the minimize values if moving from the player to another screen
+      if (playerAnimationState === null) {
+        setScrollModalAnimatedValue(
+          translateYOffset,
+          modalSnapPoints[1],
+          setLastSnap
+        );
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+      } else {
+        resetPlayerAnimationState();
+      }
     }
 
     if (
       (videoModalState.mode === "MAXIMIZED" &&
-        videoModalState.previousMode === "MAXIMIZED") ||
+        videoModalState.previousMode === "MINIMIZED" &&
+        previousItemId === videoModalState.item?.id) ||
       previousItemId !== videoModalState.item?.id
     ) {
       setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
@@ -281,10 +299,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       if (
         preparedValue > 0 &&
         scrollPosition.current === 0 &&
-        playerAnimationState !== PlayerAnimationStateEnum.drag_player
+        playerAnimationState !== PlayerAnimationStateEnum.drag_player &&
+        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
       ) {
-        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll &&
-          setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
+        isMinimizedModal && setStartComponentsAnimation(true);
+        setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
       }
     });
 
@@ -292,7 +311,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       lastScrollY.removeListener(lastScrollYListenerId);
       dragScrollY.removeListener(dragListenerId);
     };
-  }, [playerAnimationState, isAudioItem, modalSnapPoints]);
+  }, [playerAnimationState, isAudioItem, modalSnapPoints, isMinimizedModal]);
 
   const Wrapper = React.useMemo(
     () => (Platform.OS === "android" ? GestureHandlerRootView : View),
@@ -346,7 +365,12 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 };
 
 export const AnimatedScrollModal = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedScrollModalComponent : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component =
+    !isTV() && visible ? AnimatedScrollModalComponent : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -34,6 +34,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
     lastSnap,
     setLastSnap,
     resetPlayerAnimationState,
+    setStartComponentsAnimation,
   } = useModalAnimationContext();
 
   const { videoModalState } = useNavigation();
@@ -121,8 +122,10 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
             preparedValue > 0 &&
             playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
           ) {
-            playerAnimationState !== PlayerAnimationStateEnum.drag_player &&
+            if (playerAnimationState !== PlayerAnimationStateEnum.drag_player) {
+              isMinimizedModal && setStartComponentsAnimation(true);
               setPlayerAnimationState(PlayerAnimationStateEnum.drag_player);
+            }
 
             translateYOffset.setValue(
               isMaximazedModal
@@ -152,7 +155,11 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 };
 
 export const AnimatedVideoPlayerComponent = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedVideoPlayer : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component = !isTV() && visible ? AnimatedVideoPlayer : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { Animated, View, StyleSheet } from "react-native";
+import { Animated, View } from "react-native";
 
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -33,10 +33,6 @@ type Props = {
   additionalData?: { [key: string]: any };
 };
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
-
 export const AnimationView = ({
   animationType,
   style,
@@ -54,22 +50,22 @@ export const AnimationView = ({
     tabletLandscapePlayerTopPosition,
     setTabletLandscapePlayerTopPosition,
     modalSnapPoints,
+    startComponentsAnimationDistance,
+    progressBarHeight,
   } = useModalAnimationContext();
 
   const isRTL = useIsRTL();
   const isAppActive = useAppState(true);
 
   const {
-    height: screenHeight,
     width: screenWidth,
     deviceInfo: { isTablet, isTabletLandscape },
   } = 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 bottomTabBarHeight = useGetBottomTabBarHeight() + (insets.bottom || 0);
+  const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
   const animationComponentRef = useRef(null);
 
   // retrieving top position of the player for tablet landscape mode
@@ -97,12 +93,12 @@ export const AnimationView = ({
   const inlineAudioPlayer = additionalData.inlineAudioPlayer;
 
   const moveUpValue = additionalData.saveArea
-    ? -insets.top
+    ? -insets.top + (isAudioItem ? 0 : progressBarHeight)
     : isTablet
     ? isTabletLandscape && (!isAudioItem || (isAudioItem && inlineAudioPlayer))
-      ? -tabletLandscapePlayerTopPosition
+      ? -tabletLandscapePlayerTopPosition + progressBarHeight
       : -130
-    : -50;
+    : -50 + progressBarHeight;
 
   const moveComponentHorizontalValue = additionalData.moveValue
     ? isRTL
@@ -313,6 +309,23 @@ export const AnimationView = ({
     }
   }, [additionalData, screenWidth]);
 
+  React.useEffect(() => {
+    if (
+      videoModalState.mode === "MINIMIZED" &&
+      videoModalState.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);
+      }
+    }
+  }, [videoModalState]);
+
   React.useEffect(() => {
     if (
       playerAnimationState === PlayerAnimationStateEnum.minimize &&
@@ -346,7 +359,7 @@ export const AnimationView = ({
             animatedValue,
             calculationData,
             modalSnapPoint: modalSnapPoints[1],
-            startAnimationDistance,
+            startComponentsAnimationDistance,
             startComponentsAnimation,
             setStartComponentsAnimation,
             getAnimationValue,
@@ -371,7 +384,7 @@ export const AnimationView = ({
           animatedValue,
           calculationData,
           modalSnapPoint: modalSnapPoints[1],
-          startAnimationDistance,
+          startComponentsAnimationDistance,
           startComponentsAnimation,
           setStartComponentsAnimation,
           getAnimationValue,
@@ -393,7 +406,6 @@ export const AnimationView = ({
       ref={animationComponentRef}
       style={[
         ...preparedStyles,
-        additionalData.saveArea ? styles.flex : null,
         (videoModalState.mode === "MAXIMIZED" ||
           videoModalState.mode === "MINIMIZED" ||
           (videoModalState.mode === "PIP" && isAppActive)) &&

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,12 +1,17 @@
 import React, { useContext } from "react";
 import { Animated } from "react-native";
 
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  useSafeAreaInsets,
+  useSafeAreaFrame,
+} from "react-native-safe-area-context";
 import {
   useGetBottomTabBarHeight,
-  useDimensions,
+  useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
+import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useConfiguration } from "../utils";
 
 export enum PlayerAnimationStateEnum {
@@ -39,6 +44,8 @@ export type ModalAnimationContextT = {
   setLastSnap: (value: number) => void;
   tabletLandscapePlayerTopPosition: number;
   setTabletLandscapePlayerTopPosition: (value: number) => void;
+  startComponentsAnimationDistance: number;
+  progressBarHeight: number;
 };
 
 const ReactContext = React.createContext<ModalAnimationContextT>({
@@ -62,6 +69,8 @@ const ReactContext = React.createContext<ModalAnimationContextT>({
   setLastSnap: () => null,
   tabletLandscapePlayerTopPosition: 0,
   setTabletLandscapePlayerTopPosition: () => null,
+  startComponentsAnimationDistance: 0,
+  progressBarHeight: 0,
 });
 
 export function useModalAnimationContext() {
@@ -80,6 +89,11 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const [startComponentsAnimation, setStartComponentsAnimation] =
     React.useState<boolean>(false);
 
+  const {
+    videoModalState: { mode, visible, item },
+  } = useNavigation();
+
+  const isLiveItem = isLive(item);
   const { minimised_height: minimisedHeight } = useConfiguration();
 
   const resetPlayerAnimationState = React.useCallback(() => {
@@ -93,16 +107,28 @@ 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 } = useDimensions("window", { fullDimensions: true });
+  const { height: safeAreaFrameHeight } = useSafeAreaFrame();
+  const [height, setHeight] = React.useState<number>(safeAreaFrameHeight);
+  const progressBarHeight = isLiveItem ? 0 : PROGRESS_BAR_HEIGHT;
   const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
+  const startComponentsAnimationDistance = Math.round((height * 60) / 100);
+
+  React.useEffect(() => {
+    if (visible && mode === "MAXIMIZED" && height !== safeAreaFrameHeight) {
+      setHeight(safeAreaFrameHeight);
+    }
+  }, [height, safeAreaFrameHeight, mode, visible]);
 
   /*
     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);
+    height -
+    minimisedHeight -
+    (bottomTabBarHeight || bottomSafeArea) -
+    progressBarHeight;
 
   const modalSnapPoints = React.useMemo(() => [0, minValue], [minValue]);
   // Last snap state which will helps us to make smooth responder to scrollview animation
@@ -134,6 +160,8 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
         setLastSnap,
         tabletLandscapePlayerTopPosition,
         setTabletLandscapePlayerTopPosition,
+        startComponentsAnimationDistance,
+        progressBarHeight,
       }}
     >
       {children}

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -13,6 +13,7 @@ export enum ComponentAnimationType {
 }
 
 export const AUDIO_PLAYER_HORIZONTAL_PADDING = 15;
+export const PROGRESS_BAR_HEIGHT = 3;
 
 export const defaultAspectRatioWidth = (height: number): number =>
   (height / 9) * 16;
@@ -233,7 +234,7 @@ export const gestureListenerHelper = (data) => {
     animatedValue,
     calculationData,
     modalSnapPoint,
-    startAnimationDistance,
+    startComponentsAnimationDistance,
     startComponentsAnimation,
     setStartComponentsAnimation,
     getAnimationValue,
@@ -243,7 +244,7 @@ export const gestureListenerHelper = (data) => {
     if (listenerValue <= 0) {
       if (
         preparedValue >= 0 &&
-        preparedValue <= modalSnapPoint - startAnimationDistance
+        preparedValue <= modalSnapPoint - startComponentsAnimationDistance
       ) {
         !startComponentsAnimation && setStartComponentsAnimation(true);
 
@@ -263,9 +264,11 @@ export const gestureListenerHelper = (data) => {
       animatedValue.setValue(value);
     }
   } else {
-    if (preparedValue >= startAnimationDistance) {
+    if (preparedValue >= startComponentsAnimationDistance) {
       !startComponentsAnimation && setStartComponentsAnimation(true);
-      const value = Math.round(preparedValue - startAnimationDistance);
+      const value = Math.round(
+        preparedValue - startComponentsAnimationDistance
+      );
 
       animatedValue.setValue(
         calculateAnimationValue(animationType, value, calculationData)

package/Components/VideoModal/PlayerWrapper.tsx

@@ -197,7 +197,7 @@ export const PlayerWrapper = (props: Props) => {
           <AnimationComponent
             animationType={ComponentAnimationType.moveUpComponent}
             additionalData={{ saveArea: true }}
-            style={directionStyles(isTabletLandscape)}
+            style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
           >
             <PathnameContext.Provider value={pathname}>
               <ScreenContextProvider pathname={pathname}>
@@ -225,7 +225,7 @@ export const PlayerWrapper = (props: Props) => {
                   </AnimationComponent>
                 </View>
                 <AnimatedScrollModal>
-                  {isInlineModal ? (
+                  {isInlineModal && !docked ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.componentFade}
                       style={defaultStyles.flex}