@applicaster/zapp-react-native-ui-components 14.0.0-alpha.6242515303 → 14.0.0-alpha.6461844364

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

@@ -21,87 +21,27 @@ exports[`PlayerWrapper renders inline 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7777777777777777,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-      <View
-        animationType="componentFade"
-        style={
-          {
-            "flex": 1,
-          }
-        }
-      >
-        <View
-          configuration={
-            {
-              "tablet_landscape_player_container_background_color": "red",
-              "tablet_landscape_sidebar_width": "35%",
-            }
-          }
-          entry={
-            {
-              "id": "test",
-            }
-          }
-          isTablet={false}
-          isTabletLandscape={false}
-          style={
-            {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -127,57 +67,27 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": undefined,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": undefined,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -203,103 +113,27 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "red",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "row",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": 195,
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7777777777777777,
-              "height": undefined,
-              "width": 195,
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      >
-        <View
-          additionalData={
-            {
-              "disableAnimatedComponent": false,
-              "resetAnimationValue": undefined,
-              "useLayoutMeasure": true,
-            }
-          }
-          animationType="moveUpComponent"
-          style={
-            {
-              "flex": 1,
-            }
-          }
-        />
-      </View>
-      <View
-        animationType="componentFade"
-        style={
-          {
-            "flex": 1,
-          }
-        }
-      >
-        <View
-          configuration={
-            {
-              "tablet_landscape_player_container_background_color": "red",
-              "tablet_landscape_sidebar_width": "35%",
-            }
-          }
-          entry={
-            {
-              "id": "test",
-            }
-          }
-          isTablet={true}
-          isTabletLandscape={true}
-          style={
-            {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -325,57 +159,27 @@ exports[`PlayerWrapper renders properly 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7786666666666666,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7786666666666666,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;

package/Components/VideoModal/hooks/index.ts

@@ -1,5 +1,3 @@
-export { useBackgroundColor } from "./useBackgroundColor";
-
 export { useDelayedPlayerDetails } from "./useDelayedPlayerDetails";
 
 export { useInitialPlayerState } from "./useInitialPlayerState";

package/Components/VideoModal/hooks/useModalSize.ts

@@ -9,6 +9,12 @@ import {
 
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { StatusBar } from "react-native";
+import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
 
 const { Logger } = getXray();
 
@@ -27,12 +33,17 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
+const isOldAndroidDevice =
+  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
+
 export const useModalSize = (): Size => {
   const frame = useSafeAreaFrame();
 
   const [modalSize, setModalSize] = React.useState<Size>({
     width: frame.width,
-    height: frame.height,
+    height: isOldAndroidDevice
+      ? frame.height + StatusBar.currentHeight
+      : frame.height,
   });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
@@ -44,7 +55,12 @@ export const useModalSize = (): Size => {
         return oldSize;
       }
 
-      return newSize;
+      return {
+        width: newSize.width,
+        height: isOldAndroidDevice
+          ? newSize.height + StatusBar.currentHeight
+          : newSize.height,
+      };
     });
 
     logger.debug({

package/Components/VideoModal/utils.ts

@@ -34,6 +34,9 @@ export const useConfiguration = () => {
     minimised_height = 0,
     minimised_height_tablet = 0,
     modal_background_color,
+    tablet_landscape_player_container_background_color,
+    screen_background_color,
+    audio_player_background_color,
   } = config;
 
   const minimisedHeight = useIsTablet()
@@ -43,6 +46,9 @@ export const useConfiguration = () => {
   return {
     minimised_height: Number(minimisedHeight),
     modal_background_color,
+    tablet_landscape_player_container_background_color,
+    audio_player_background_color,
+    screen_background_color,
   };
 };
 

package/Components/Viewport/ViewportAware/__tests__/viewportAware.test.js

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { act, create as render } from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
 
 import { ViewportAware } from "../";
 import { ViewportTracker } from "../../ViewportTracker";
@@ -12,21 +12,17 @@ import ReactNative from "react-native";
 
 jest.useFakeTimers();
 
-jest.mock("react-native/Libraries/ReactNative/UIManager", () => {
-  return {
-    ...jest.requireActual("react-native/Libraries/ReactNative/NativeUIManager"),
-    measureLayout: (handle, parent, error, success) => {
-      success(100, 100, 400, 400);
-    },
-  };
-});
+const { ScrollView } = ReactNative;
 
-jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
-  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
-  findNodeHandle: () => 1234,
-}));
+jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
 
-const { ScrollView } = ReactNative;
+ReactNative.UIManager.measureLayout = jest.fn(
+  (handle, parent, error, success) => {
+    success(100, 100, 400, 400);
+  }
+);
+
+ReactNative.findNodeHandle = () => 1234;
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -138,7 +134,7 @@ describe("<ViewportAware />", () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(onViewportEnter).toHaveBeenCalled();
 
-    const scrollviews = wrapper.root.findAllByType(ScrollView);
+    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);
 
@@ -179,7 +175,7 @@ describe("<ViewportAware />", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
 
-    const scrollviews = wrapper.root.findAllByType(ScrollView);
+    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);
 

package/Components/Viewport/ViewportTracker/__tests__/viewportTracker.test.js

@@ -1,14 +1,19 @@
 import * as React from "react";
-import { ScrollView } from "react-native";
-import TestRenderer, { act } from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
 import { ViewportEvents } from "../../ViewportEvents";
+import ReactNative from "react-native";
+
+const { ScrollView } = ReactNative;
 
 const TestComponent = () => <ScrollView />;
 
-jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
-  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
-  findNodeHandle: () => 1234,
-}));
+jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
+
+ReactNative.UIManager.measureLayout = jest.fn(
+  (handle, parent, error, success) => {
+    success(100, 100, 400, 400);
+  }
+);
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -23,32 +28,49 @@ const event = {
 };
 
 describe("<ViewportTracker />", () => {
-  // eslint-disable-next-line react/prop-types
-  const ReactWrapper = ({ children }) => (
-    <ViewportTracker viewportEventsManager={viewportEventsManager}>
-      <ScrollView>{children}</ScrollView>
-    </ViewportTracker>
-  );
-
-  const wrapper = TestRenderer.create(
-    <ReactWrapper>
-      <TestComponent />
-    </ReactWrapper>
-  );
-
-  const scrollView = wrapper.root.findByType(ScrollView);
-
   beforeEach(() => {
     viewportEventSpy.mockClear();
   });
 
   it("renders correctly", () => {
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(scrollView.props).toMatchSnapshot();
   });
 
   it("notifies viewport listeners when layout changes", () => {
-    act(() => scrollView.props.onLayout(event));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+    });
 
     expect(viewportEventSpy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -63,12 +85,50 @@ describe("<ViewportTracker />", () => {
   });
 
   it("notifies viewport listeners when content scrolls", () => {
-    act(() => scrollView.props.onScroll(event));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+      scrollView.props.onScroll(event);
+    });
+
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 
   it("notifies viewport listeners when content size changes", () => {
-    act(() => scrollView.props.onContentSizeChange(100, 100));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+      scrollView.props.onContentSizeChange(100, 100);
+    });
+
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 });

package/Decorators/ConfigurationWrapper/withConfigurationProvider.tsx

@@ -21,13 +21,13 @@ const prepareConfiguration = (
   keys: [string]
 ) => R.compose(R.evolve(keysMap), R.pickAll(keys))(configuration);
 
+const configurationKeys = R.keys(keysMap);
+
 export function withConfigurationProvider(Component: React.ComponentType<any>) {
   return function WithConfigurationProvider(props: Props) {
     const styles = props?.screenData?.styles;
     const general = props?.screenData?.general;
 
-    const configurationKeys = React.useMemo(() => R.keys(keysMap), []);
-
     const configuration = React.useMemo(
       () => prepareConfiguration({ ...general, ...styles }, configurationKeys),
       []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.6242515303",
+  "version": "14.0.0-alpha.6461844364",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.6242515303",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.6242515303",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.6242515303",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.6242515303",
+    "@applicaster/applicaster-types": "14.0.0-alpha.6461844364",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.6461844364",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.6461844364",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.6461844364",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
@@ -42,7 +42,6 @@
     "immer": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "uglify-js": "*",
     "validate-color": "*",

package/Components/VideoModal/hooks/useBackgroundColor.ts

@@ -1,10 +0,0 @@
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useConfiguration } from "../utils";
-
-export const useBackgroundColor = (): string => {
-  const { modal_background_color: modalBackgroundColor } = useConfiguration();
-
-  const theme = useTheme<BaseThemePropertiesMobile>();
-
-  return modalBackgroundColor || theme?.status_background_color;
-};