@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5471145113 → 12.0.0-alpha.5522474195

package/Components/BaseFocusable/index.tsx

@@ -71,9 +71,9 @@ export class BaseFocusable<
   }
 
   getId(props?: { id: string; groupId: string }) {
-    const { id, groupId = null } = props || this.props;
+    const { id } = props || this.props;
 
-    return groupId ? `${groupId}-${id}` : id;
+    return id;
   }
 
   getRect() {

package/Components/Cell/CellWithFocusable.tsx

@@ -3,6 +3,8 @@ import * as React from "react";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
 import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
 
@@ -54,7 +56,7 @@ type Props = {
   skipFocusManagerRegistration?: boolean;
   isFocusable?: boolean;
   behavior: Behavior;
-  selected?: boolean;
+  focused?: boolean;
 };
 
 export function CellWithFocusable(props: Props) {
@@ -70,7 +72,7 @@ export function CellWithFocusable(props: Props) {
     skipFocusManagerRegistration,
     isFocusable,
     behavior,
-    selected,
+    focused,
   } = props;
 
   const isFocused = useCellFocusedState(
@@ -82,8 +84,7 @@ export function CellWithFocusable(props: Props) {
   const state = useCellState({
     id: item.id,
     behavior,
-    focused: isFocused,
-    selected,
+    focused: isFocused || toBooleanWithDefaultFalse(focused),
   });
 
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
@@ -114,6 +115,7 @@ export function CellWithFocusable(props: Props) {
       preferredFocus={preferredFocus}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
       isFocusable={isFocusable}
+      focused={focused}
     />
   );
 }

package/Components/Cell/TvOSCellComponent.tsx

@@ -226,13 +226,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
   hasReceivedFocus() {}
 
-  scrollTo(index) {
-    // Workaround for HL autoscroll/autoloop feature, we scroll manually on tvOS.
-    // Should be removed after refactoring autoscroll/autoloop feature
-    if (this.props.component?.component_type !== "horizontal_list_qb") {
-      this.props?.scrollToIndex?.(index);
-    }
-  }
+  scrollTo() {}
 
   render() {
     const {
@@ -279,7 +273,9 @@ export class TvOSCellComponent extends React.Component<Props, State> {
             index={index}
             scrollTo={this.scrollTo}
             preferredFocus={preferredFocus}
+            focused={this.props.focused}
             behavior={behavior}
+            isFocusable={isFocusable}
           />
         </View>
       );

package/Components/Focusable/Focusable.tsx

@@ -4,6 +4,7 @@ import * as R from "ramda";
 import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
+import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 
 type Props = {
   initialFocus?: boolean;
@@ -23,7 +24,7 @@ type Props = {
   style?: React.CSSProperties;
 };
 
-export class Focusable extends BaseFocusable<Props> {
+class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
@@ -198,3 +199,7 @@ export class Focusable extends BaseFocusable<Props> {
     );
   }
 }
+
+const FocusableWithFocusableContext = withFocusableContext(Focusable);
+
+export { FocusableWithFocusableContext as Focusable };

package/Components/FocusableGroup/index.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 
 import { BaseFocusable } from "../BaseFocusable";
+import { FocusableGroupContextProvider } from "../../Contexts/FocusableGroupContext";
+import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 
 type Props = {
   testID?: string;
@@ -29,7 +31,7 @@ type Props = {
   excludeFromFocusSearching?: boolean;
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroup extends BaseFocusable<Props> {
   constructor(props) {
     super(props);
     this.isGroup = true;
@@ -82,8 +84,14 @@ export class FocusableGroup extends BaseFocusable<Props> {
         style={style}
         ref={this.ref}
       >
-        {children}
+        <FocusableGroupContextProvider id={id}>
+          {children}
+        </FocusableGroupContextProvider>
       </div>
     );
   }
 }
+
+const FocusableGroupWithFocusableContext = withFocusableContext(FocusableGroup);
+
+export { FocusableGroupWithFocusableContext as FocusableGroup };

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -22,6 +22,10 @@ const styles = StyleSheet.create({
     borderWidth: 0,
     borderColor: COLOR_TRANSPARENT,
   },
+  border: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+  },
 });
 
 const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
@@ -87,8 +91,9 @@ const Border = ({
 
   return (
     <View
+      pointerEvents="none"
       style={{
-        ...StyleSheet.absoluteFillObject,
+        ...styles.border,
         right: -containerPadding - paddingRight,
         bottom: -containerPadding - paddingBottom,
         left: -containerPadding - paddingLeft,
@@ -130,8 +135,8 @@ export const BorderContainerView = (props: Props) => {
       {...props}
       style={[style, styles.container, borderStyleForMissingBorder]}
     >
-      {children}
       <Border style={style} padding={padding} borderPosition={borderPosition} />
+      {children}
     </View>
   );
 };

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -4,6 +4,7 @@ import { Focusable } from "@applicaster/zapp-react-native-ui-components/Componen
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 const { Logger } = getXray();
 
@@ -35,7 +36,9 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const focusableId = getFocusableId(prefixId, suffixId);
 
-  const focused = focusableId === focusedButtonId;
+  const focused =
+    focusableId === focusedButtonId ||
+    toBooleanWithDefaultFalse(otherProps.focused);
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.tsx

@@ -7,6 +7,10 @@ import type {
   ContainerProps,
   ContainerChildren,
 } from "./types";
+import {
+  useIsRTL,
+  applyRTLStylesIfNeeded,
+} from "@applicaster/zapp-react-native-utils/localizationUtils";
 
 const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
   <View style={{ width }} />
@@ -17,6 +21,7 @@ export function ButtonContainerView({
   children,
   ...otherProps
 }: ContainerProps) {
+  const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
 
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
@@ -26,7 +31,7 @@ export function ButtonContainerView({
   }
 
   return (
-    <View style={style}>
+    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
           <HorizontalSeparator

package/Components/MasterCell/utils/__tests__/insertBetween.test.js

@@ -9,4 +9,13 @@ describe("insertBetween", () => {
 
     expect(result).toEqual([1, "|", 2, "|", 3]);
   });
+
+  it("insertBetween", () => {
+    const separator = (index) => `separator:${index}`;
+    const items = [1, 2, 3];
+
+    const result = insertBetween(separator, items);
+
+    expect(result).toEqual([1, "separator:0", 2, "separator:1", 3]);
+  });
 });

package/Components/MasterCell/utils/index.ts

@@ -1,5 +1,6 @@
 import React, { useEffect, 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";
 
@@ -52,7 +53,10 @@ function resolveColorForProp(entry, style, colorProp) {
   const colorFromProp = style[colorProp];
   const nestedEntryValue = R.path(colorFromProp.split("."), entry);
 
-  if (nestedEntryValue === undefined) {
+  if (
+    nestedEntryValue === undefined &&
+    !validateColor(colorFromProp.replace(".00", "")) // https://github.com/dreamyguy/validate-color/issues/44
+  ) {
     logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 

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

@@ -42,6 +42,13 @@ const getPluginType = pathOr("unknown_plugin_type", [
   "plugin_type",
 ]);
 
+export const isPresentFullScreen = pathOr(false, [
+  "state",
+  "screen",
+  "module",
+  "presentFullScreen",
+]);
+
 const isPlayerPlugin = (routeState): boolean =>
   getPluginType(routeState) === "player";
 
@@ -150,8 +157,9 @@ export const Screen = ({ route, Components }: Props) => {
 
   const isPlayer = isPlayerPlugin(routeState);
   const isLogin = isLoginPlugin(routeState);
+  const isFullScreen = isPresentFullScreen(routeState);
 
-  const isNavBarVisible = !isPlayer && !isLogin;
+  const isNavBarVisible = !isPlayer && !isLogin && !isFullScreen;
 
   const screenData =
     screenType === "hooks" || isPlayer
@@ -162,7 +170,6 @@ export const Screen = ({ route, Components }: Props) => {
     <View style={[styles.container, { backgroundColor }]}>
       <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
         <NavBar
-          groupId={route}
           isVisible={isNavBarVisible}
           menuPlugin={menuPlugin}
           navigationProps={navigationProps}

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/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -100,58 +100,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;

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -50,50 +50,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;
-
-      if (videoModalState.mode === "MAXIMIZED") {
-        if (translationY > 0) {
-          const endOffsetY =
-            lastSnap + preparedTranslationY + dragToss * velocityY + 200;
-
-          let destSnapPoint = modalSnapPoints[0];
+  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;
+
+            let destSnapPoint = modalSnapPoints[0];
+
+            for (const snapPoint of modalSnapPoints) {
+              const distFromSnap = Math.abs(snapPoint - endOffsetY);
+
+              if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
+                destSnapPoint = snapPoint;
+              }
+            }
 
-          for (const snapPoint of modalSnapPoints) {
-            const distFromSnap = Math.abs(snapPoint - endOffsetY);
+            setLastSnap(destSnapPoint);
 
-            if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
-              destSnapPoint = snapPoint;
+            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(

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,10 +1,7 @@
 import React, { useRef, useState } from "react";
-import { Animated, View, StyleSheet } from "react-native";
+import { Animated, View } from "react-native";
 
-import {
-  useSafeAreaInsets,
-  useSafeAreaFrame,
-} from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import {
   useModalAnimationContext,
@@ -18,6 +15,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
 
 import {
   gestureListenerHelper,
@@ -35,10 +33,6 @@ type Props = {
   additionalData?: { [key: string]: any };
 };
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
-
 export const AnimationView = ({
   animationType,
   style,
@@ -56,21 +50,21 @@ export const AnimationView = ({
     tabletLandscapePlayerTopPosition,
     setTabletLandscapePlayerTopPosition,
     modalSnapPoints,
+    startComponentsAnimationDistance,
   } = useModalAnimationContext();
 
   const isRTL = useIsRTL();
+  const isAppActive = useAppState(true);
 
   const {
-    height: screenHeight,
+    width: screenWidth,
     deviceInfo: { isTablet, isTabletLandscape },
-  } = useDimensions("screen", { deviceInfo: true });
+  } = 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 { width: screenWidth } = useSafeAreaFrame();
   const animationComponentRef = useRef(null);
 
   // retrieving top position of the player for tablet landscape mode
@@ -88,13 +82,6 @@ export const AnimationView = ({
     getAnimationDefaultValue(animationType, bottomTabBarHeight)
   );
 
-  const animationValueType: string =
-    animationType === ComponentAnimationType.player ? "ValueXY" : "Value";
-
-  const animatedValue = useRef(
-    new Animated[animationValueType](defaultValue)
-  ).current;
-
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -118,63 +105,8 @@ export const AnimationView = ({
       : -additionalData.moveValue
     : 0;
 
-  const calculationData = React.useMemo(
-    () => ({
-      isAudioItem,
-      bottomTabBarHeight,
-      minimisedHeight,
-      minimisedWidth,
-      defaultValue,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      isTablet,
-      isTabletLandscape,
-      isRTL,
-      fromMiniPlayer: videoModalState.mode === "MINIMIZED",
-      inlineAudioPlayer,
-    }),
-    [
-      bottomTabBarHeight,
-      minimisedHeight,
-      minimisedWidth,
-      defaultValue,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      videoModalState.mode,
-    ]
-  );
-
-  React.useEffect(() => {
-    if (additionalData.resetAnimationValue) {
-      animatedValue.setValue(0);
-    }
-  }, [additionalData.resetAnimationValue]);
-
-  React.useEffect(() => {
-    if (animationType === ComponentAnimationType.player) {
-      let width, height;
-
-      if (additionalData.aspectRatio) {
-        width = isTabletLandscape ? additionalData.width : screenWidth;
-
-        height =
-          (isTabletLandscape ? additionalData.width : screenWidth) /
-          additionalData.aspectRatio;
-      } else {
-        width =
-          typeof additionalData.width === "number" && additionalData.width;
-
-        height =
-          typeof additionalData.height === "number" && additionalData.height;
-      }
-
-      if (defaultValue.x === 0 && width && height) {
-        const value = { x: width, y: height };
-        setDefaultValue(value);
-        animatedValue.setValue(value);
-      }
-    }
-  }, [additionalData, screenWidth]);
+  const animationValueType: string =
+    animationType === ComponentAnimationType.player ? "ValueXY" : "Value";
 
   const getAnimationValue = React.useCallback(
     (animationType, state) => {
@@ -292,6 +224,90 @@ export const AnimationView = ({
     ]
   );
 
+  const getInitialValue = React.useCallback(() => {
+    const mode =
+      videoModalState.mode === "PIP"
+        ? videoModalState.previousMode
+        : videoModalState.mode;
+
+    switch (mode) {
+      case "MINIMIZED":
+        return getAnimationValue(
+          animationType,
+          PlayerAnimationStateEnum.minimize
+        ).toValue;
+
+      case "MAXIMIZED":
+      default:
+        return getAnimationValue(
+          animationType,
+          PlayerAnimationStateEnum.maximaze
+        ).toValue;
+    }
+  }, [defaultValue, videoModalState]);
+
+  const animatedValue = useRef(
+    new Animated[animationValueType](getInitialValue())
+  ).current;
+
+  const calculationData = React.useMemo(
+    () => ({
+      isAudioItem,
+      bottomTabBarHeight,
+      minimisedHeight,
+      minimisedWidth,
+      defaultValue,
+      moveUpValue,
+      moveComponentHorizontalValue,
+      isTablet,
+      isTabletLandscape,
+      isRTL,
+      fromMiniPlayer: videoModalState.mode === "MINIMIZED",
+      inlineAudioPlayer,
+    }),
+    [
+      bottomTabBarHeight,
+      minimisedHeight,
+      minimisedWidth,
+      defaultValue,
+      moveUpValue,
+      moveComponentHorizontalValue,
+      videoModalState.mode,
+    ]
+  );
+
+  React.useEffect(() => {
+    if (additionalData.resetAnimationValue) {
+      animatedValue.setValue(defaultValue);
+    }
+  }, [additionalData.resetAnimationValue, defaultValue]);
+
+  React.useEffect(() => {
+    if (animationType === ComponentAnimationType.player) {
+      let width, height;
+
+      if (additionalData.aspectRatio) {
+        width = isTabletLandscape ? additionalData.width : screenWidth;
+
+        height =
+          (isTabletLandscape ? additionalData.width : screenWidth) /
+          additionalData.aspectRatio;
+      } else {
+        width =
+          typeof additionalData.width === "number" && additionalData.width;
+
+        height =
+          typeof additionalData.height === "number" && additionalData.height;
+      }
+
+      if (defaultValue.x === 0 && width && height) {
+        const value = { x: width, y: height };
+        setDefaultValue(value);
+        animatedValue.setValue(value);
+      }
+    }
+  }, [additionalData, screenWidth]);
+
   React.useEffect(() => {
     if (
       playerAnimationState === PlayerAnimationStateEnum.minimize &&
@@ -325,7 +341,7 @@ export const AnimationView = ({
             animatedValue,
             calculationData,
             modalSnapPoint: modalSnapPoints[1],
-            startAnimationDistance,
+            startComponentsAnimationDistance,
             startComponentsAnimation,
             setStartComponentsAnimation,
             getAnimationValue,
@@ -350,7 +366,7 @@ export const AnimationView = ({
           animatedValue,
           calculationData,
           modalSnapPoint: modalSnapPoints[1],
-          startAnimationDistance,
+          startComponentsAnimationDistance,
           startComponentsAnimation,
           setStartComponentsAnimation,
           getAnimationValue,
@@ -372,9 +388,9 @@ export const AnimationView = ({
       ref={animationComponentRef}
       style={[
         ...preparedStyles,
-        additionalData.saveArea ? styles.flex : null,
         (videoModalState.mode === "MAXIMIZED" ||
-          videoModalState.mode === "MINIMIZED") &&
+          videoModalState.mode === "MINIMIZED" ||
+          (videoModalState.mode === "PIP" && isAppActive)) &&
           getAnimationStyle(animationType, animatedValue),
       ]}
     >
@@ -412,6 +428,7 @@ export const AnimationComponent = (props: Props) => {
     delete additionalData.extraAnimation[animationType];
 
     return (
+      // @ts-ignore
       <Component {...(isReactFragment ? null : props)}>
         <AnimationComponent
           {...animationProps}

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from "react";
 import { Animated } from "react-native";
 
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks";
+  useGetBottomTabBarHeight,
+  useDimensions,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { useConfiguration } from "../utils";
 
@@ -39,6 +39,7 @@ export type ModalAnimationContextT = {
   setLastSnap: (value: number) => void;
   tabletLandscapePlayerTopPosition: number;
   setTabletLandscapePlayerTopPosition: (value: number) => void;
+  startComponentsAnimationDistance: number;
 };
 
 const ReactContext = React.createContext<ModalAnimationContextT>({
@@ -62,6 +63,7 @@ const ReactContext = React.createContext<ModalAnimationContextT>({
   setLastSnap: () => null,
   tabletLandscapePlayerTopPosition: 0,
   setTabletLandscapePlayerTopPosition: () => null,
+  startComponentsAnimationDistance: 0,
 });
 
 export function useModalAnimationContext() {
@@ -93,10 +95,15 @@ 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 } = useSafeAreaFrame();
+  const { height } = useDimensions("window", { fullDimensions: true });
   const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
 
+  const startComponentsAnimationDistance = React.useMemo(
+    () => Math.round((height * 60) / 100),
+    [height]
+  );
+
   /*
     If bottomTabBarHeight is equal 0 it means an app does not use bottomTabBar.
     Because of this we need to minus bottom SafeArea offset.
@@ -134,6 +141,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
         setLastSnap,
         tabletLandscapePlayerTopPosition,
         setTabletLandscapePlayerTopPosition,
+        startComponentsAnimationDistance,
       }}
     >
       {children}

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -233,7 +233,7 @@ export const gestureListenerHelper = (data) => {
     animatedValue,
     calculationData,
     modalSnapPoint,
-    startAnimationDistance,
+    startComponentsAnimationDistance,
     startComponentsAnimation,
     setStartComponentsAnimation,
     getAnimationValue,
@@ -243,7 +243,7 @@ export const gestureListenerHelper = (data) => {
     if (listenerValue <= 0) {
       if (
         preparedValue >= 0 &&
-        preparedValue <= modalSnapPoint - startAnimationDistance
+        preparedValue <= modalSnapPoint - startComponentsAnimationDistance
       ) {
         !startComponentsAnimation && setStartComponentsAnimation(true);
 
@@ -263,9 +263,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}>

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -42,9 +42,14 @@ exports[`PlayerWrapper renders inline 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "column",
-        }
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -120,9 +125,14 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "column",
-        }
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -198,9 +208,14 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "row",
-        }
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -292,9 +307,14 @@ exports[`PlayerWrapper renders properly 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "column",
-        }
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View

package/Components/VideoModal/utils.ts

@@ -33,8 +33,11 @@ export const useConfiguration = () => {
     ...pluginConfiguration,
   });
 
-  const { minimised_height, minimised_height_tablet, modal_background_color } =
-    config;
+  const {
+    minimised_height = 0,
+    minimised_height_tablet = 0,
+    modal_background_color,
+  } = config;
 
   const minimisedHeight = useIsTablet()
     ? minimised_height_tablet

package/Contexts/FocusableGroupContext/FocusableGroupContext.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+
+export const FocusableGroupContext = React.createContext<string | null>(null);

package/Contexts/FocusableGroupContext/FocusableGroupContextProvider.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+
+type ProviderArgs = {
+  id: string;
+  children: React.ReactNode;
+};
+
+export const FocusableGroupContextProvider = ({
+  id,
+  children,
+}: ProviderArgs) => (
+  <FocusableGroupContext.Provider value={id}>
+    {children}
+  </FocusableGroupContext.Provider>
+);

package/Contexts/FocusableGroupContext/__tests__/FocusableGroupContextProvider.test.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { FocusableGroupContextProvider, FocusableGroupContext } from "../";
+
+const MockComponent = () => {
+  const focusableContext = useContext(FocusableGroupContext) || "default";
+
+  return <Text testID={focusableContext} />;
+};
+
+describe("FocusableGroupContextProvider", () => {
+  it("should provide focusable context to the wrapped component", () => {
+    const { getByTestId } = render(
+      <FocusableGroupContextProvider id="testId">
+        <MockComponent />
+      </FocusableGroupContextProvider>
+    );
+
+    expect(getByTestId("testId")).toBeTruthy();
+  });
+});

package/Contexts/FocusableGroupContext/__tests__/withFocusableContext.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { withFocusableContext } from "../withFocusableContext";
+import { FocusableGroupContext } from "../FocusableGroupContext";
+
+const MockComponent = ({ groupId }: { groupId: string }) => (
+  <Text testID={groupId} />
+);
+
+const WrappedComponent = withFocusableContext(MockComponent);
+
+describe("withFocusableContext HOC", () => {
+  it("should provide focusable context to the wrapped component", () => {
+    const { getByTestId } = render(<WrappedComponent />, {
+      // eslint-disable-next-line react/display-name
+      wrapper: ({ children }: { children: React.ReactElement }) => (
+        <FocusableGroupContext.Provider value="test">
+          {children}
+        </FocusableGroupContext.Provider>
+      ),
+    });
+
+    expect(getByTestId("test")).toBeTruthy();
+  });
+});

package/Contexts/FocusableGroupContext/index.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+import { FocusableGroupContextProvider } from "./FocusableGroupContextProvider";
+
+export { FocusableGroupContext, FocusableGroupContextProvider };
+
+export const useGroupId = () => React.useContext(FocusableGroupContext);

package/Contexts/FocusableGroupContext/withFocusableContext.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+
+export const withFocusableContext = (Component) => {
+  // eslint-disable-next-line react/display-name
+  return ({ groupId, ...props }: Record<string, any>) => (
+    <FocusableGroupContext.Consumer>
+      {(groupIdContext: string) => {
+        // eslint-disable-next-line react/display-name
+        const propsGroupId = groupId || null;
+        const providedGroupId = propsGroupId || groupIdContext;
+
+        return <Component {...props} groupId={providedGroupId} />;
+      }}
+    </FocusableGroupContext.Consumer>
+  );
+};

package/Contexts/ScreenContext/index.tsx

@@ -2,7 +2,6 @@ import React, {
   createContext,
   ReactNode,
   useCallback,
-  useEffect,
   useMemo,
   useRef,
 } from "react";
@@ -114,11 +113,6 @@ export function ScreenContextProvider({
     return navBarState;
   }, []);
 
-  useEffect(() => {
-    // purge the getScreenNavBarState store when the pathname changes
-    screenNavBarStateRef.current = null;
-  }, [pathname]);
-
   const screenNavBarState = getScreenNavBarState()(
     useShallow((state) => ({
       visible: state.visible,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.5471145113",
+  "version": "12.0.0-alpha.5522474195",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.5471145113",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5471145113",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5471145113",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5471145113",
+    "@applicaster/applicaster-types": "12.0.0-alpha.5522474195",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5522474195",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5522474195",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5522474195",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",