@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4536343143 → 12.0.0-alpha.4584840011

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,
@@ -169,21 +166,23 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
   transitionWithoutAnimation(resetState) {
     const { scenes } = this.state;
-
-    const newState = resetState
-      ? {
-          scenes: [prepareScene(this.props.children)],
-          to: {
-            index: 0,
-          },
-        }
-      : {
-          scenes: R.update(
-            scenes.length - 1,
-            prepareScene(this.props.children),
-            scenes
-          ),
-        };
+    const newScene = prepareScene(this.props.children);
+    const isLastSceneHook = scenes[scenes.length - 1].key.startsWith("/hook");
+
+    let newState;
+
+    if (resetState) {
+      newState = {
+        scenes: [newScene],
+        to: { index: 0 },
+      };
+    } else if (isLastSceneHook || scenes.length === 1) {
+      newState = { scenes: R.update(scenes.length - 1, newScene, scenes) };
+    } else {
+      newState = {
+        scenes: R.compose(R.tail, R.append(newScene))(scenes),
+      };
+    }
 
     this.setState(newState);
   }
@@ -277,36 +276,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 { contentStyle } = this.props;
     const screenData = this.props.children.props.screenData;
     const pathname = scenes[to.index].key;
 
-    const orientation = getScreenOrientation({
-      screenData,
-      layoutData,
-    });
-
-    // 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={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>
-          )}
+        {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>
     );
   }

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/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);
@@ -100,58 +101,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;
@@ -194,7 +205,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
     if (
       (videoModalState.mode === "MAXIMIZED" &&
-        videoModalState.previousMode === "MAXIMIZED") ||
+        videoModalState.previousMode === "MINIMIZED" &&
+        previousItemId === videoModalState.item?.id) ||
       previousItemId !== videoModalState.item?.id
     ) {
       setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
@@ -271,10 +283,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);
       }
     });
 
@@ -282,7 +295,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),

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -34,6 +34,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
     lastSnap,
     setLastSnap,
     resetPlayerAnimationState,
+    setStartComponentsAnimation,
   } = useModalAnimationContext();
 
   const { videoModalState } = useNavigation();
@@ -50,50 +51,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;
+  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;
+        if (videoModalState.mode === "MAXIMIZED") {
+          if (translationY > 0) {
+            const endOffsetY =
+              lastSnap + preparedTranslationY + dragToss * velocityY + 200;
 
-          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);
+
+            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(
@@ -114,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