@applicaster/zapp-react-native-ui-components 13.0.0-alpha.5033140607 → 13.0.0-alpha.5304771702

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

@@ -1,63 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Scene /> renders correctly 1`] = `
-<ForwardRef(AnimatedComponentWrapper)
-  pointerEvents="auto"
+<CurrentScreenContextProvider
+  contentStyle={
+    {
+      "paddingBottom": 49,
+    }
+  }
+  overlayStyle={
+    {
+      "opacity": 1,
+    }
+  }
   style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      Object {
-        "paddingBottom": 49,
-      },
-      Object {
-        "fontScale": 2,
-        "height": 1334,
-        "scale": 2,
-        "statusBarHeight": null,
-        "width": 750,
-      },
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
-  <ContextProvider>
-    <ContextProvider>
-      <ScreenContextProvider />
-    </ContextProvider>
-  </ContextProvider>
-</ForwardRef(AnimatedComponentWrapper)>
+  <SceneComponent
+    contentStyle={
+      {
+        "paddingBottom": 49,
+      }
+    }
+    overlayStyle={
+      {
+        "opacity": 1,
+      }
+    }
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+</CurrentScreenContextProvider>
 `;
 
 exports[`<Scene /> renders the overlay while animating 1`] = `
-<ForwardRef(AnimatedComponentWrapper)
-  pointerEvents="auto"
+<CurrentScreenContextProvider
+  animating={true}
+  contentStyle={
+    {
+      "paddingBottom": 49,
+    }
+  }
+  overlayStyle={
+    {
+      "opacity": 1,
+    }
+  }
   style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      Object {
-        "paddingBottom": 49,
-      },
-      Object {
-        "height": "100%",
-        "width": "100%",
-      },
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
-  <ContextProvider>
-    <ContextProvider>
-      <ScreenContextProvider />
-    </ContextProvider>
-  </ContextProvider>
-  <ForwardRef(AnimatedComponentWrapper)
-    style={
-      Object {
+  <SceneComponent
+    animating={true}
+    contentStyle={
+      {
+        "paddingBottom": 49,
+      }
+    }
+    overlayStyle={
+      {
         "opacity": 1,
       }
     }
+    style={
+      {
+        "flex": 1,
+      }
+    }
   />
-</ForwardRef(AnimatedComponentWrapper)>
+</CurrentScreenContextProvider>
 `;

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

@@ -5,34 +5,34 @@ exports[`transitionConfig accepts an Animated.Value as a parameter 1`] = `"Canno
 exports[`transitionConfig accepts an Animated.Value as a parameter 2`] = `[Function]`;
 
 exports[`transitionConfig returns a back object is valid 1`] = `
-Object {
+{
   "duration": 350,
   "easing": [Function],
-  "from": Object {
-    "style": Object {
+  "from": {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": 0,
         },
       ],
       "width": 750,
     },
   },
-  "to": Object {
-    "overlayStyle": Object {
+  "to": {
+    "overlayStyle": {
       "backgroundColor": "black",
       "height": 1334,
       "opacity": 0.35,
       "position": "absolute",
       "width": 750,
     },
-    "style": Object {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": -1,
         },
       ],
@@ -43,34 +43,34 @@ Object {
 `;
 
 exports[`transitionConfig returns a push object is valid 1`] = `
-Object {
+{
   "duration": 350,
   "easing": [Function],
-  "from": Object {
-    "overlayStyle": Object {
+  "from": {
+    "overlayStyle": {
       "backgroundColor": "black",
       "height": 1334,
       "opacity": 0,
       "position": "absolute",
       "width": 750,
     },
-    "style": Object {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": 0,
         },
       ],
       "width": 750,
     },
   },
-  "to": Object {
-    "style": Object {
+  "to": {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": 750,
         },
       ],

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

@@ -3,16 +3,16 @@
 exports[`<TransitionerComponent /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
       "overflow": "hidden",
     }
   }
 >
-  <Scene
+  <SceneComponent
     isActive={true}
     screenUniqueId="mocked-uuid"
-    style={Object {}}
+    style={{}}
   >
     <View
       foo="bar"
@@ -23,6 +23,6 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
         children
       </Text>
     </View>
-  </Scene>
+  </SceneComponent>
 </View>
 `;

package/Components/Transitioner/index.js

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { useWindowDimensions } from "react-native";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
@@ -7,10 +6,15 @@ import { TransitionerComponent } from "./Transitioner";
 
 export const Transitioner = (props) => {
   const navigator = useNavigation();
-  const { height, width } = useWindowDimensions();
 
-  const dimensions = useDimensions("window", { deviceInfo: true });
-  const isTablet = dimensions?.deviceInfo?.isTablet;
+  const {
+    width,
+    height,
+    deviceInfo: { isTablet },
+  } = useDimensions("window", {
+    updateForInactiveScreens: false,
+    deviceInfo: true,
+  });
 
   const { appData } = usePickFromState(["appData"]);
   const isTabletPortrait = appData?.isTabletPortrait;

package/Components/VideoLive/LiveImageManager.ts

@@ -8,6 +8,8 @@ import { loggerLiveImageManager } from "./loggerHelper";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { Component } from "react";
 
+const TIMEOUT_FOR_DELAY_CHECK_PLAYER_POSITION = 500; // ms
+
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
 export type LiveImageManagerEvent =
@@ -62,6 +64,9 @@ export class LiveImageManager implements PlayerLifecycleListener {
   protected currentlyPlaying: LiveImage | null = null;
   protected primaryPlayer: Player | null = null;
 
+  private checkPlayerPositionTimeout: ReturnType<typeof setTimeout> | null =
+    null;
+
   protected listeners: Record<
     string,
     Record<LiveImageManagerEvent, (event?: Record<string, any>) => void>
@@ -118,6 +123,11 @@ export class LiveImageManager implements PlayerLifecycleListener {
     });
   };
 
+  private cancelCheckPlayerPositionTimeout = () => {
+    clearTimeout(this.checkPlayerPositionTimeout);
+    this.checkPlayerPositionTimeout = null;
+  };
+
   public onViewportEnter = (item: LiveImage) => {
     log_debug(
       `onViewportEnter: live-image ${playerInfo(
@@ -125,7 +135,21 @@ export class LiveImageManager implements PlayerLifecycleListener {
       )}, primary ${playerInfo(this.primaryPlayer)}`
     );
 
-    this.checkPlayerPosition(item);
+    if (!isTV()) {
+      // mobile only
+      // we have to delay running checkPlayerPosition, because sometimes on fast scrolling we get wrong order onEnter, then onLeave.
+      // which could cause select wrong item to play
+
+      this.cancelCheckPlayerPositionTimeout();
+
+      this.checkPlayerPositionTimeout = setTimeout(() => {
+        this.cancelCheckPlayerPositionTimeout();
+
+        this.checkPlayerPosition(item);
+      }, TIMEOUT_FOR_DELAY_CHECK_PLAYER_POSITION);
+    } else {
+      this.checkPlayerPosition(item);
+    }
   };
 
   public onViewportLeave = (item: LiveImage) => {
@@ -246,6 +270,8 @@ export class LiveImageManager implements PlayerLifecycleListener {
   };
 
   public checkPlayerPosition = (item: LiveImage) => {
+    this.cancelCheckPlayerPositionTimeout();
+
     log_debug(
       `checkPlayerPosition: live-image playerId: ${playerInfo(
         item.player

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -44,7 +44,10 @@ type Props = {
 };
 
 const PlayerLiveImageComponent = (props: Props) => {
-  const dimensions = useDimensions("screen", { fullDimensions: true });
+  const dimensions = useDimensions("screen", {
+    fullDimensions: true,
+    updateForInactiveScreens: false,
+  });
 
   const { item, style, playerId } = props;
 
@@ -135,13 +138,16 @@ const PlayerLiveImageComponent = (props: Props) => {
     } else {
       throw new Error("Player factory item is null");
     }
-  }, [playerId, item, playerPluginId, screenConfig]);
+  }, [playerId, item.id, playerPluginId, screenConfig]);
 
   React.useEffect(() => {
     liveImageItem.setMode = setModeDebounced;
   }, [setModeDebounced, liveImageItem]);
 
-  const { start, end } = React.useMemo(() => getAutoplaySettings(item), [item]);
+  const { start, end } = React.useMemo(
+    () => getAutoplaySettings(item),
+    [item.id]
+  );
 
   const controller = liveImageItem.getPlayer();
   const player = usePlayer(playerId);
@@ -174,7 +180,7 @@ const PlayerLiveImageComponent = (props: Props) => {
 
       unregister();
     };
-  }, [item, liveImageItem]);
+  }, [item.id, liveImageItem]);
 
   React.useEffect(() => {
     if (!player) {
@@ -244,25 +250,27 @@ const PlayerLiveImageComponent = (props: Props) => {
   }, [item.id]);
 
   React.useEffect(() => {
-    if (playerManager) {
-      const isPlayerRegistered = playerManager.isPlayerRegistered(playerId);
+    if (isMeasurement(item) || !playerManager) {
+      return;
+    }
 
-      if (isPlayerRegistered) {
-        log_error(
-          `PlayerLiveImageComponent: player ${playerId} already registered`
-        );
-      } else {
-        playerManager.registerPlayer({
-          id: playerId,
-          playerController: controller,
-        });
+    const isPlayerRegistered = playerManager.isPlayerRegistered(playerId);
 
-        return () => {
-          playerManager.unregisterPlayer(playerId);
-        };
-      }
+    if (isPlayerRegistered) {
+      log_error(
+        `PlayerLiveImageComponent: player ${playerId} already registered`
+      );
+    } else {
+      playerManager.registerPlayer({
+        id: playerId,
+        playerController: controller,
+      });
+
+      return () => {
+        playerManager.unregisterPlayer(playerId);
+      };
     }
-  }, [liveImageItem, playerId, controller]);
+  }, [liveImageItem, playerId, controller, item.id]);
 
   const onPositionUpdated = React.useCallback(
     (data) => {
@@ -302,7 +310,7 @@ const PlayerLiveImageComponent = (props: Props) => {
         LiveImageManager.instance.checkPlayerPosition(liveImageItem);
       }
     },
-    [liveImageItem, dimensions]
+    [liveImageItem, dimensions.height, dimensions.width]
   );
 
   const platformSpecificProps = isApplePlatform()

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

@@ -2,9 +2,9 @@
 import * as React from "react";
 import { render } from "@testing-library/react-native";
 import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
-import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
 import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
 import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
 import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
@@ -12,13 +12,13 @@ import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactH
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
-const seekTo = jest.fn();
+const mock_seekTo = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/appUtils/playerManager/player",
   () => ({
     Player: {
-      seekTo,
+      seekTo: mock_seekTo,
     },
   })
 );
@@ -33,7 +33,7 @@ const mockStore = configureStore();
 
 const store = mockStore({ appData: {} });
 
-const Wrapper = ({ children }: { children: React.ReactChildren }) => (
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
   /* @ts-ignore */
   <Provider store={store}>
     <ThemeContext.Provider
@@ -60,10 +60,16 @@ describe("PlayerLiveImageComponent", () => {
   };
 
   beforeAll(() => {
-    jest.spyOn(PlayerFactory, "playerFactory").mockImplementation(() => ({
-      controller: new Player({}),
-      Component: () => null,
-    }));
+    jest.spyOn(PlayerFactory, "playerFactory").mockImplementation(() => {
+      const Player = jest.requireActual(
+        "@applicaster/zapp-react-native-utils/appUtils/playerManager/player"
+      ).Player;
+
+      return {
+        controller: new Player({}),
+        Component: () => null,
+      };
+    });
 
     jest.spyOn(navigationHooks, "useIsScreenActive").mockReturnValue(true);
   });
@@ -113,4 +119,53 @@ describe("PlayerLiveImageComponent", () => {
 
     // TODO: implement this test
   });
+
+  it("should register the player for normal item", () => {
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...defaultProps} />
+      </Wrapper>
+    );
+
+    const isPlayerRegistered = playerManager.isPlayerRegistered(
+      defaultProps.playerId
+    );
+
+    expect(isPlayerRegistered).toBe(true);
+  });
+
+  it("should unregister the player for normal item", () => {
+    const component = render(
+      <Wrapper>
+        <PlayerLiveImage {...defaultProps} />
+      </Wrapper>
+    );
+
+    component.unmount();
+
+    const isPlayerRegistered = playerManager.isPlayerRegistered(
+      defaultProps.playerId
+    );
+
+    expect(isPlayerRegistered).toBe(false);
+  });
+
+  it("should not register the player for 'pre-measurement' item", () => {
+    const props = {
+      ...defaultProps,
+      item: {
+        ...defaultProps.item,
+        id: "pre-measurement-1",
+      },
+    };
+
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
+
+    const isPlayerRegistered = playerManager.isPlayerRegistered(props.playerId);
+    expect(isPlayerRegistered).toBe(false);
+  });
 });

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

@@ -9,7 +9,7 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
     <View
       collapsable={false}
       style={
-        Object {
+        {
           "opacity": 1,
         }
       }
@@ -19,10 +19,10 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
         audioMutedByDefault={false}
         imageKey="image1"
         item={
-          Object {
+          {
             "id": "1",
             "title": "Test",
-            "type": Object {
+            "type": {
               "value": "",
             },
           }
@@ -30,13 +30,8 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
         onError={[Function]}
         playerId="player1"
         resizeMode="cover"
-        screenConfig={Object {}}
-        source={
-          Object {
-            "uri": "",
-          }
-        }
-        style={Object {}}
+        screenConfig={{}}
+        style={{}}
       />
     </View>
   </View>

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -62,7 +62,10 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   } = useModalAnimationContext();
 
   const [enableGesture, setIEnableGesture] = React.useState<boolean>(true);
-  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
+  const { isLanguageOverlayVisible, isSeekBarTouch } = React.useContext(
+    PlayerContainerContext
+  );
 
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
@@ -80,6 +83,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     enableGesture &&
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
+    !isSeekBarTouch &&
     (isMaximazedModal || isMinimizedModal);
 
   const isAudioItem = React.useMemo(

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -41,7 +41,10 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
     videoModalState: { mode: videoModalMode },
   } = useNavigation();
 
-  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+  const { isLanguageOverlayVisible, isSeekBarTouch } = React.useContext(
+    PlayerContainerContext
+  );
+
   const isMaximazedModal = videoModalMode === "MAXIMIZED";
   const isMinimizedModal = videoModalMode === "MINIMIZED";
 
@@ -52,6 +55,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   const isEnablePanGesture =
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
+    !isSeekBarTouch &&
     (isMaximazedModal || isMinimizedModal);
 
   const onGestureEvent = Animated.event(

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -77,7 +77,7 @@ export const AnimationView = ({
   const measureView = React.useCallback(() => {
     if (isTabletLandscape && tabletLandscapePlayerTopPosition === 0) {
       animationComponentRef.current.measure(
-        (x, y, width, height, pageX, pageY) => {
+        (_x, _y, _width, _height, _pageX, pageY) => {
           setTabletLandscapePlayerTopPosition(pageY - 20);
         }
       );
@@ -100,10 +100,11 @@ export const AnimationView = ({
   const moveUpValue = additionalData.saveArea
     ? -insets.top + (isAudioItem ? 0 : progressBarHeight)
     : isTablet
-    ? isTabletLandscape && (!isAudioItem || (isAudioItem && inlineAudioPlayer))
-      ? -tabletLandscapePlayerTopPosition + progressBarHeight
-      : -130
-    : -50 + progressBarHeight;
+      ? isTabletLandscape &&
+        (!isAudioItem || (isAudioItem && inlineAudioPlayer))
+        ? -tabletLandscapePlayerTopPosition + progressBarHeight
+        : -130
+      : -50 + progressBarHeight;
 
   const moveComponentHorizontalValue = additionalData.moveValue
     ? isRTL
@@ -434,8 +435,8 @@ export const AnimationComponent = (props: Props) => {
   const Component = useAnimation
     ? AnimationView
     : style
-    ? View
-    : React.Fragment;
+      ? View
+      : React.Fragment;
 
   if (
     additionalData.extraAnimation &&

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,14 +1,12 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Animated } from "react-native";
 
 import {
   useSafeAreaInsets,
   useSafeAreaFrame,
 } from "react-native-safe-area-context";
-import {
-  useGetBottomTabBarHeight,
-  useNavigation,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useGetBottomTabBarHeight";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 import { PROGRESS_BAR_HEIGHT } from "./utils";
@@ -48,7 +46,7 @@ export type ModalAnimationContextT = {
   progressBarHeight: number;
 };
 
-const ReactContext = React.createContext<ModalAnimationContextT>({
+export const ReactContext = React.createContext<ModalAnimationContextT>({
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -73,10 +71,6 @@ const ReactContext = React.createContext<ModalAnimationContextT>({
   progressBarHeight: 0,
 });
 
-export function useModalAnimationContext() {
-  return useContext<ModalAnimationContextT>(ReactContext);
-}
-
 const Provider = ({ children }: { children: React.ReactNode }) => {
   const [playerAnimationState, setPlayerAnimationState] =
     React.useState<PlayerAnimationStateT>(null);