@applicaster/zapp-react-native-ui-components 13.0.0-alpha.2060875348 → 13.0.0-alpha.2082004638

package/Components/MasterCell/utils/index.ts

@@ -1,16 +1,13 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import * as R from "ramda";
 import validateColor from "validate-color";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import { masterCellLogger } from "../logger";
-import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -193,147 +190,24 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (id: string | number, behavior?: Behavior) => {
-  if (!behavior) {
-    return false;
-  }
-
-  if (behavior?.selection_source === "now_playing") {
-    const player = playerManager.getActivePlayer();
-
-    if (player?.entry?.id === id) {
-      return true;
-    }
-  }
-
-  if (behavior?.select_mode === "single") {
-    return behavior.current_selection === id;
-  }
-
-  if (behavior?.select_mode === "multi") {
-    // TODO: Use generic resolver source
-
-    if (behavior.selection_source === "@{push/topics}") {
-      const tags = PushTopicManager.getInstance().getRegisteredTags();
-
-      return tags.includes(String(id));
-    }
-
-    if (Array.isArray(behavior.current_selection)) {
-      return behavior.current_selection.includes(id);
-    }
-
-    const currentSelection = String(behavior.current_selection);
-
-    if (currentSelection?.startsWith("@{ctx/")) {
-      const keyWithoutCtx = currentSelection.substring(
-        "@{ctx/".length,
-        currentSelection.length - 1
-      );
-
-      const selectedItems =
-        StorageMultiSelectProvider.getProvider(
-          keyWithoutCtx
-        )?.getSelectedItems();
-
-      return selectedItems?.includes(String(id));
-    }
-  }
-
-  return false;
-};
-
-export const useBehaviorUpdate = (behavior: Behavior) => {
-  const [lastUpdate, setLastUpdate] = React.useState(null);
-
-  const player = usePlayer();
-
-  const triggerUpdate = () => {
-    setLastUpdate(Date.now());
-  };
-
-  // TODO: Create generic RX to state update
-  useEffect(() => {
-    // TODO: Use generic resolver source
-    if (!behavior) {
-      return;
-    }
-
-    const currentSelection = String(behavior.current_selection);
-
-    if (currentSelection?.startsWith("@{ctx/")) {
-      const keyWithoutCtx = currentSelection.substring(
-        "@{ctx/".length,
-        currentSelection.length - 1
-      );
-
-      if (keyWithoutCtx) {
-        const subscription = StorageMultiSelectProvider.getProvider(
-          keyWithoutCtx
-        )
-          .getObservable()
-          .subscribe(() => {
-            triggerUpdate();
-          });
-
-        return () => {
-          subscription.unsubscribe();
-        };
-      }
-    }
-  }, [behavior]);
-
-  useEffect(() => {
-    if (!behavior) {
-      return;
-    }
-
-    if (behavior?.selection_source === "@{push/topics}") {
-      const subscription = PushTopicManager.getInstance()
-        .getEntryObservable()
-        .subscribe(() => {
-          triggerUpdate();
-        });
-
-      return () => {
-        subscription.unsubscribe();
-      };
-    }
-  }, [behavior]);
-
-  useEffect(() => {
-    if (!behavior) {
-      return;
-    }
-
-    if (behavior?.selection_source === "now_playing" && player) {
-      const subscription = player.getEntryObservable().subscribe(() => {
-        triggerUpdate();
-      });
-
-      return () => {
-        subscription.unsubscribe();
-      };
-    }
-  }, [behavior, player]);
-
-  return lastUpdate;
+export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
+  return isCellSelected(item, behavior);
 };
 
 export const useCellState = ({
-  id,
+  item,
   behavior,
   focused,
 }: {
-  id: string | number;
+  item: ZappEntry;
   behavior: Behavior;
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
 
   const _isSelected = useMemo(
-    () => isSelected(id, behavior),
-    [behavior, id, lastUpdate]
+    () => isSelected(item, behavior),
+    [behavior, item, lastUpdate]
   );
 
   return getCellState({ focused, selected: _isSelected });

package/Components/ModalComponent/Button/assets.ts

@@ -1,4 +1,4 @@
 /* eslint-disable max-len */
 
 export const defaultSelectedAsset: string =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGsSURBVHgB7drdaYRAFIbhk2yuBTuwlXSQDrKdrOnErSSlpATBe0nOBxEMEXV+nDnjfg8MwiK4vKjMDIoQERERERERERHRY+j7vtHxJvTfb5wvHd/DMLyLpyc5IcTRw6eOZvrtcrlcq6q6i6PTBVqKM/GJdKpAa3EmrpGe5ST2xIFxHF/FwSnuoL1x1L2u66s4KD7QkXGg6EBHx4FiA6WIA0UGShUHiguUMg4UFSh1HCgmUI44UESgXHEgaCatf/wWslLeeY1GMsWBF/GEOHpodeouGkl8Vso7rtFIxjjg9YhNcea/+W4nrFyjkcxxwDnQUpxJrEhW4oBToLU4k9BIluKA60t6M6i+kzrfF7e1OODziLV6uG2d53onWYwDvi/pViJGshoHvCeKsSJZjgNBM+nQSNbjQPBSwzdSCXEgylrMNVIpcSDaYnVvJPWhA9OAZuO87HEg6mreIdIWE3Eg+nZHhEhm4sAh+0EBkUzFgcM2zDwimYsDh+4oOkQyGQcO33LdEclsHEiyJ70SyXScpBAJX3vNRif01yxSJ7SMH1USEREREREREREV7Ad//SBSU+GIIAAAAABJRU5ErkJggg==";
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAA+0lEQVR4nO3a3QnCQBBF4ZRiSXZgKVqKnVnCQBpQwb0QJA752ZjszPlg3/JwOU8b2K4DAAAAAAAAkIOZnczsvPeOQypxHmb27Pv+sveeQxnG0SFSMRaHSIUXJ32kKXHKue+99e+I4yCOgzgO4jiI4yCOgzgO4jiajfMedd366t50nK3/b0LE2SpSqDi1I4WMUytSs3G6z/jbhOGLIzUdR7aKFCKO1I4UKo7UihQyjqyNFDqOLI2UIo7MjZQqjkyNVL7LFUdmRMoXRypEihtHVkSKH0cWRMoTR2ZEyhdHJkTKG0ecSMSRkUjE+TaIRJxfeFQJAAAAAAAANOwFT0Mt2UgcaMoAAAAASUVORK5CYII=";

package/Components/OfflineHandler/utils/index.ts

@@ -57,7 +57,7 @@ export const useNotificationHeight = () => {
 
   const navBarHeight = platformSelect({ ios: 44, android: 56 });
 
-  const statusHeight = Platform.OS === "android" ? 0 : insets.top;
+  const statusHeight = insets.top;
   const notificationHeight = statusHeight + navBarHeight;
 
   return { statusHeight, notificationHeight };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -335,9 +335,9 @@ const PlayerContainerComponent = (props: Props) => {
 
     const resumeTime = Number(item?.extensions?.resumeTime);
 
-    // TODO: This is temp hack, will be removed on next pr with player refactoring
+    // Сhecking that the player itself knows where to start playing, and there is no need to call seekTo after returning from the Сhromecast
     if (
-      !!playerManager.getActivePlayer()?.getContinueWatchingOffset === false &&
+      !playerManager.getActivePlayer()?.hasResumePosition() &&
       !isNaN(resumeTime)
     ) {
       player?.seekTo(resumeTime);
@@ -514,6 +514,12 @@ const PlayerContainerComponent = (props: Props) => {
   useEffect(() => {
     playerEvent("source_changed", { item });
 
+    return () => {
+      playerEvent("player_did_close", { item });
+    };
+  }, [item?.id, Player]);
+
+  useEffect(() => {
     if (!isModal) {
       showNavBar(false);
     }
@@ -523,13 +529,11 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     return () => {
-      playerEvent("player_did_close", { item });
-
       if (!isModal) {
         showNavBar(true);
       }
     };
-  }, [showNavBar, /* added as suggested: */ item?.id, isModal, Player]);
+  }, [showNavBar, isModal, Player]);
 
   useEffect(() => {
     if (prevItemId && !R.equals(prevItemId, item?.id)) {

package/Components/PlayerImageBackground/index.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useState } from "react";
+import React, { PropsWithChildren } from "react";
 import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
@@ -12,7 +12,6 @@ import {
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
-  docked?: boolean;
   imageStyle?: { [K: string]: any };
   imageKey?: string;
   defaultImageDimensions?: { [K: string]: any };
@@ -24,7 +23,6 @@ const PlayerImageBackgroundComponent = ({
   entry,
   children,
   style,
-  docked,
   imageStyle,
   imageKey,
   defaultImageDimensions,
@@ -36,42 +34,24 @@ const PlayerImageBackgroundComponent = ({
 
   const { playerAnimationState } = useModalAnimationContext();
 
-  const [lastNonNullAnimationState, setLastNonNullAnimationState] =
-    useState(playerAnimationState);
-
-  useEffect(() => {
-    if (playerAnimationState !== null) {
-      setLastNonNullAnimationState(playerAnimationState);
-    }
-  }, [playerAnimationState]);
-
   if (!source) return <>{children}</>;
 
-  const imageBackgroundStyle =
-    lastNonNullAnimationState !== PlayerAnimationStateEnum.minimize && !docked
-      ? defaultImageDimensions
-      : imageSize;
-
   return (
     <View
       style={
-        playerAnimationState === PlayerAnimationStateEnum.maximaze
+        playerAnimationState === PlayerAnimationStateEnum.maximize
           ? defaultImageDimensions
           : style
       }
     >
       <AnimationComponent
-        style={
-          playerAnimationState === PlayerAnimationStateEnum.maximaze
-            ? defaultImageDimensions
-            : style
-        }
+        style={style}
         animationType={ComponentAnimationType.player}
         additionalData={defaultImageDimensions}
       >
         <ImageBackground
           resizeMode="cover"
-          style={imageBackgroundStyle}
+          style={imageSize}
           imageStyle={imageStyle}
           source={source}
         >

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -34,6 +34,7 @@ type Props = {
   getStaticComponentFeed: any;
   pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
   refreshingPipesV1?: boolean;
+  stickyHeaderIndices?: number[];
 };
 
 const styles = StyleSheet.create({
@@ -61,6 +62,7 @@ function ComponentsMapComponent(props: Props) {
     // TODO: Remove when pipes v1 is deprecated.
     pullToRefreshPipesV1RefreshingStateUpdater,
     refreshingPipesV1,
+    stickyHeaderIndices,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -274,11 +276,13 @@ function ComponentsMapComponent(props: Props) {
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
+            stickyHeaderIndices={stickyHeaderIndices}
             onLayout={handleOnLayout}
             removeClippedSubviews
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
+            listKey={riverId}
             keyExtractor={keyExtractor}
             renderItem={renderRiverItem}
             data={riverComponents}

package/Components/River/ComponentsMap/hooks/useLoadingState.ts

@@ -28,10 +28,10 @@ type Return = {
 // TODO: Take this value from Zapp configuration, when feature is added to GeneralScreen
 const SHOULD_FAIL_ON_COMPONENT_LOADING = false;
 
-const createLoadingStateObservable = () =>
+const createLoadingStateObservable = (count: number) =>
   new BehaviorSubject<LoadingState>({
     index: -1,
-    done: false,
+    done: count === 0,
     waitForAllComponents: SHOULD_FAIL_ON_COMPONENT_LOADING,
   });
 
@@ -43,7 +43,7 @@ export const useLoadingState = (
   const [loadingError, setLoadingError] = React.useState(null);
 
   const loadingState = useRefWithInitialValue<BehaviorSubject<LoadingState>>(
-    createLoadingStateObservable
+    () => createLoadingStateObservable(count)
   );
 
   const arePreviousComponentsLoaded = React.useCallback((index) => {

package/Components/Screen/TV/index.web.tsx

@@ -92,6 +92,10 @@ const getNavigations = ({
   return fallbackNavigations;
 };
 
+const onRelease = () => {
+  focusManager.setInitialFocus();
+};
+
 export const Screen = ({ route, Components }: Props) => {
   if (isNilOrEmpty(route)) {
     throw Error("Required props: route is missing");
@@ -152,12 +156,7 @@ export const Screen = ({ route, Components }: Props) => {
   const isScreenActive = useIsScreenActive();
 
   return (
-    <FreezeWithCallback
-      freeze={!isScreenActive}
-      onRelease={() => {
-        focusManager.setInitialFocus();
-      }}
-    >
+    <FreezeWithCallback freeze={!isScreenActive} onRelease={onRelease}>
       <View style={[styles.container, { backgroundColor }]}>
         <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
           <NavBar

package/Components/Screen/hooks.ts

@@ -7,15 +7,12 @@ import {
   useCurrentScreenData,
   useDimensions,
   useRoute,
+  useIsTablet,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useMemo, useEffect, useState } from "react";
 
 export const useWaitForValidOrientation = () => {
-  const {
-    width: screenWidth,
-    height,
-    deviceInfo,
-  } = useDimensions("screen", {
+  const { width: screenWidth, height } = useDimensions("screen", {
     fullDimensions: true,
     updateForInactiveScreens: false,
   });
@@ -26,7 +23,7 @@ export const useWaitForValidOrientation = () => {
 
   const [readyState, setReadyState] = useState(false);
 
-  const isTablet = deviceInfo?.isTablet;
+  const isTablet = useIsTablet();
 
   const { appData } = usePickFromState(["appData"]);
   const isTabletPortrait = appData?.isTabletPortrait;

package/Components/TrackedView/index.tsx

@@ -12,6 +12,7 @@ type TrackedViewProps = {
   onPositionUpdated: (props: { rect?: Record<string, number> }) => void;
   testId?: string | undefined;
   groupId?: string;
+  clipThreshold?: number;
 };
 
 export const TrackedView = memo(function TrackedView(props: TrackedViewProps) {

package/Components/Transitioner/AnimationManager.js

@@ -2,21 +2,21 @@ import { Animated } from "react-native";
 
 import { NAV_ACTION_PUSH, NAV_ACTION_BACK } from "./Transitioner";
 
-type TransitionConfig = {
-  duration: number;
-  easing: any;
-  from: {
-    style: any;
-  };
-  to: {
-    style: any;
-  };
-};
+// type TransitionConfig = {
+//   duration: number;
+//   easing: any;
+//   from: {
+//     style: any;
+//   };
+//   to: {
+//     style: any;
+//   };
+// };
 
-type Props = {
-  transitionConfig: TransitionConfig;
-  contentStyle: { [string]: any };
-};
+// type Props = {
+//   transitionConfig: TransitionConfig;
+//   contentStyle: { [string]: any };
+// };
 
 /**
  * Manages animation for the Transitioner,
@@ -25,7 +25,7 @@ type Props = {
  * which must have a proper structure, see types above ^.
  */
 export class AnimationManager {
-  constructor(props: Props) {
+  constructor(props) {
     this.animatedValue = new Animated.Value(0.0);
 
     this.config = props.transitionConfig(

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -32,6 +32,9 @@ const { log_error, log_debug } = loggerLiveImageComponent;
 const isMeasurement = (item: ZappEntry) =>
   isString(item.id) && item.id.startsWith("pre-measurement-");
 
+// Pixels by which the view can slightly extend outside the viewport and still be considered fully visible.
+const CLIP_THRESHOLD = 10;
+
 type Props = {
   item: ZappEntry;
   style: Record<string, any>;
@@ -328,6 +331,7 @@ const PlayerLiveImageComponent = (props: Props) => {
     <TrackedView
       testId={`tracked-view-${playerId}-${item.title}`}
       onPositionUpdated={onPositionUpdated}
+      clipThreshold={CLIP_THRESHOLD}
     >
       <View ref={trackViewRef}>
         {isVideoMode ? (

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

@@ -2,6 +2,7 @@
 
 exports[`PlayerLiveImageComponent should render correctly with default props 1`] = `
 <TrackedView
+  clipThreshold={10}
   onPositionUpdated={[Function]}
   testId="tracked-view-player1-Test"
 >

package/Components/VideoLive/animationUtils.ts

@@ -1,10 +1,8 @@
 import { Animated, Easing, EasingFunction, StyleProp } from "react-native";
 
-type AnimatedInterpolatedStyle = any;
-
-// type AnimatedInterpolatedStyle =
-//   | Animated.AnimatedInterpolation
-//   | [{ [Key: string]: Animated.AnimatedInterpolation }];
+type AnimatedInterpolatedStyle =
+  | Animated.AnimatedInterpolation
+  | [{ [Key: string]: Animated.AnimatedInterpolation }];
 
 type AnimationConfig = {
   duration: number;
@@ -29,12 +27,11 @@ const OUT_DURATION = 1000;
 
 const easing = Easing.in(Easing.bezier(0.25, 0.1, 0.25, 1.0));
 
-// @returns {Animated.AnimatedInterpolation} - Interpolated value
 const interpolate = (
   animatedValue: Animated.Value,
   from: number = 0,
   to: number = 1
-): any =>
+): Animated.AnimatedInterpolation =>
   animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [from, to],

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -46,7 +46,7 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
 
   React.useEffect(() => {
     (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-      playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
+      playerAnimationState === PlayerAnimationStateEnum.maximize) &&
       setStartComponentsAnimation(true);
   }, [playerAnimationState]);
 

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -23,10 +23,12 @@ import {
   setScrollModalAnimatedValue,
 } from "./utils";
 
+import { DURATION_TO_MINIMIZE } from "./const";
+
 const getAnimatedConfig = (toValue) => {
   return {
     toValue,
-    duration: 200,
+    duration: DURATION_TO_MINIMIZE,
     useNativeDriver: true,
   };
 };
@@ -70,14 +72,19 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
-  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
+  const {
+    mode: videoModalMode,
+    previousMode: previousVideoModalMode,
+    item: videoModalItem,
+  } = videoModalState;
+
   const isMaximizedModal: boolean = videoModalMode === "MAXIMIZED";
   const isMinimizedModal: boolean = videoModalMode === "MINIMIZED";
   const previousItemId = usePrevious(videoModalItem?.id);
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+    playerAnimationState !== PlayerAnimationStateEnum.maximize;
 
   const isEnablePanGesture =
     enableGesture &&
@@ -121,7 +128,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         const preparedTranslationY =
           Math.abs(translationY) - lastScrollYValue.current;
 
-        if (videoModalMode === "MAXIMIZED") {
+        if (isMaximizedModal) {
           const endOffsetY =
             lastSnap + preparedTranslationY + dragToss * velocityY + 150;
 
@@ -137,14 +144,14 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
           setLastSnap(destSnapPoint);
 
-          if (destSnapPoint === modalSnapPoints[0]) {
+          if (destSnapPoint === modalSnapPoints[0] && isMinimizedModal) {
             translateYOffset.extractOffset();
             translateYOffset.setValue(preparedTranslationY);
             translateYOffset.flattenOffset();
             dragScrollY.setValue(0);
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
-          } else {
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
+          } else if (destSnapPoint !== modalSnapPoints[0] && isMaximizedModal) {
             setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
           }
         } else {
@@ -158,7 +165,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
             dragScrollY.setValue(0);
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
           } else {
             resetPlayerAnimationState();
           }
@@ -168,7 +175,13 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           resetPlayerAnimationState();
       }
     },
-    [lastSnap, modalSnapPoints, playerAnimationState, videoModalMode]
+    [
+      lastSnap,
+      modalSnapPoints,
+      playerAnimationState,
+      isMinimizedModal,
+      isMaximizedModal,
+    ]
   );
 
   const onScroll = React.useCallback(({ nativeEvent }) => {
@@ -219,17 +232,18 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   }, []);
 
   React.useEffect(() => {
-    const { mode, previousMode, item } = videoModalState;
-
     if (
-      mode === "MAXIMIZED" &&
+      videoModalMode === "MAXIMIZED" &&
       !enableGesture &&
       scrollPosition.current === 0
     ) {
       setIEnableGesture(true);
     }
 
-    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
+    if (
+      videoModalMode === "MINIMIZED" &&
+      previousVideoModalMode === "MAXIMIZED"
+    ) {
       // set animation to the minimize values if moving from the player to another screen
       if (playerAnimationState === null) {
         setScrollModalAnimatedValue(
@@ -247,14 +261,16 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       }
     } else if (
       playerAnimationState === null &&
-      ((previousItemId === item?.id &&
-        mode === "MAXIMIZED" &&
-        (previousMode === "MINIMIZED" || previousMode === "MAXIMIZED")) ||
-        (previousItemId !== item?.id && mode !== "FULLSCREEN"))
+      ((previousItemId === videoModalItem?.id &&
+        videoModalMode === "MAXIMIZED" &&
+        (previousVideoModalMode === "MINIMIZED" ||
+          previousVideoModalMode === "MAXIMIZED")) ||
+        (previousItemId !== videoModalItem?.id &&
+          videoModalMode !== "FULLSCREEN"))
     ) {
-      setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+      setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
     }
-  }, [videoModalState]);
+  }, [videoModalMode, previousVideoModalMode, videoModalItem]);
 
   React.useEffect(() => {
     if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
@@ -296,7 +312,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
         resetPlayerAnimationState();
       });
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
       Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
         maximiseVideoModal();
         setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);