@applicaster/zapp-react-native-ui-components 12.0.0-rc.81 → 12.0.0-rc.83

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/Screen/TV/index.web.tsx

@@ -162,7 +162,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/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { Animated, View, StyleSheet } from "react-native";
+import { Animated, View } from "react-native";
 
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -33,10 +33,6 @@ type Props = {
   additionalData?: { [key: string]: any };
 };
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
-
 export const AnimationView = ({
   animationType,
   style,
@@ -54,18 +50,17 @@ export const AnimationView = ({
     tabletLandscapePlayerTopPosition,
     setTabletLandscapePlayerTopPosition,
     modalSnapPoints,
+    startComponentsAnimationDistance,
   } = useModalAnimationContext();
 
   const isRTL = useIsRTL();
   const isAppActive = useAppState(true);
 
   const {
-    height: screenHeight,
     width: screenWidth,
     deviceInfo: { isTablet, isTabletLandscape },
   } = useDimensions("window", { deviceInfo: true });
 
-  const startAnimationDistance = Math.round((screenHeight * 60) / 100);
   const { videoModalState } = useNavigation();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
   const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
@@ -346,7 +341,7 @@ export const AnimationView = ({
             animatedValue,
             calculationData,
             modalSnapPoint: modalSnapPoints[1],
-            startAnimationDistance,
+            startComponentsAnimationDistance,
             startComponentsAnimation,
             setStartComponentsAnimation,
             getAnimationValue,
@@ -371,7 +366,7 @@ export const AnimationView = ({
           animatedValue,
           calculationData,
           modalSnapPoint: modalSnapPoints[1],
-          startAnimationDistance,
+          startComponentsAnimationDistance,
           startComponentsAnimation,
           setStartComponentsAnimation,
           getAnimationValue,
@@ -393,7 +388,6 @@ export const AnimationView = ({
       ref={animationComponentRef}
       style={[
         ...preparedStyles,
-        additionalData.saveArea ? styles.flex : null,
         (videoModalState.mode === "MAXIMIZED" ||
           videoModalState.mode === "MINIMIZED" ||
           (videoModalState.mode === "PIP" && isAppActive)) &&

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -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() {
@@ -97,6 +99,11 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.81",
+  "version": "12.0.0-rc.83",
   "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-rc.81",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.81",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.81",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.81",
+    "@applicaster/applicaster-types": "12.0.0-rc.83",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.83",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.83",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.83",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",