@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3788876021 → 12.0.0-alpha.3823240084

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,33 +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 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 +310,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 +326,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,11 @@ exports[`<Scene /> renders correctly 1`] = `
     ]
   }
 >
-  <ContextProvider />
+  <ContextProvider>
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
+  </ContextProvider>
 </ForwardRef(AnimatedComponentWrapper)>
 `;
 
@@ -37,13 +41,17 @@ 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={
       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(),
       },
     });
   };
@@ -508,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,38 +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 {}}
-      source={
-        Object {
-          "uri": "",
+    >
+      <Image
+        applyMaxSize={true}
+        audioMutedByDefault={false}
+        imageKey="image1"
+        item={
+          Object {
+            "id": "1",
+            "title": "Test",
+            "type": Object {
+              "value": "",
+            },
+          }
         }
-      }
-      style={Object {}}
-    />
+        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

@@ -9,6 +9,8 @@ import {
   TapGestureHandler,
   GestureHandlerRootView,
 } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -56,8 +58,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     modalSnapPoints,
     lastSnap,
     setLastSnap,
+    setStartComponentsAnimation,
   } = useModalAnimationContext();
 
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
@@ -69,6 +74,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
     playerAnimationState !== PlayerAnimationStateEnum.maximaze;
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible &&
+    isNotMinimizeMaximazeAnimation &&
+    (isMaximazedModal || isMinimizedModal);
+
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -91,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;
@@ -185,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);
@@ -262,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);
       }
     });
 
@@ -273,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),
@@ -290,15 +312,13 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       >
         <View pointerEvents="box-none">
           <PanGestureHandler
-            enabled={
-              (isMaximazedModal || isMinimizedModal) &&
-              isNotMinimizeMaximazeAnimation
-            }
+            enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximazedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
+            activeOffsetY={[-5, 5]}
           >
             <Animated.View>
               <NativeViewGestureHandler
@@ -329,7 +349,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>;
 };