@applicaster/zapp-react-native-ui-components 12.0.0-rc.99 → 13.0.0-alpha.2330880002

package/Components/VideoModal/PlayerWrapper.tsx

@@ -7,14 +7,10 @@ import {
   ViewStyle,
 } from "react-native";
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
-
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
-import { PathnameContext } from "../../Contexts/PathnameContext";
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
-import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 import {
   AnimatedScrollModal,
@@ -23,6 +19,8 @@ import {
   ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
 type DimensionsT = {
   width: number | string;
   height: number | string | undefined;
@@ -69,10 +67,8 @@ const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
 };
 
 const getScreenAspectRatio = () => {
-  const { width, height } = Dimensions.get("screen");
-
-  const longEdge = Math.max(width, height);
-  const shortEdge = Math.min(width, height);
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
 
   return longEdge / shortEdge;
 };
@@ -125,10 +121,54 @@ const getTabletWidth = (
   return Number(width) - sidebarWidth;
 };
 
-export const PlayerWrapper = (props: Props) => {
+const getStyles = (baseStyle, isMobile, isPortrait, pip) => {
+  if (pip) {
+    return baseStyle;
+  }
+
+  if (isMobile && isPortrait) {
+    return { width: SCREEN_WIDTH, height: SCREEN_HEIGHT };
+  }
+
+  if (isMobile && !isPortrait) {
+    return { width: SCREEN_HEIGHT, height: SCREEN_WIDTH };
+  }
+
+  return baseStyle;
+};
+
+const showDetails = (
+  isMobile: boolean,
+  docked: boolean,
+  isInlineModal,
+  pip
+): boolean => {
+  if (pip) {
+    return false;
+  }
+
+  if (!isInlineModal) {
+    return false;
+  }
+
+  // for mobile we always show details. Mounting of it very heavy operation.
+  if (isMobile) {
+    return true;
+  }
+
+  // workaround for tablets we need to mount/unmount in order to avoid PlayerDetails content dissappearing
+  // FIXME - find out the reason of dissapearing of content
+  if (docked) {
+    return false;
+  }
+
+  return true;
+};
+
+const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
-    style,
+    style: baseStyle,
     containerStyle,
     inline,
     docked,
@@ -143,6 +183,8 @@ export const PlayerWrapper = (props: Props) => {
 
   const isInlineModal = inline && isModal;
 
+  const style = getStyles(baseStyle, !isTablet, isInlineModal, pip);
+
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
   const tabletWidth = getTabletWidth(configuration, style);
@@ -181,71 +223,63 @@ export const PlayerWrapper = (props: Props) => {
     [containerDimensions, playerDimesionsHack]
   );
 
-  const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
-
   return (
-    <PathnameContext.Provider value={pathname}>
-      <ScreenContextProvider pathname={pathname}>
-        <WrapperView
-          edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+    <WrapperView
+      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+      style={[
+        safeAreaStyles(configuration, isTablet),
+        style,
+        playerDimesionsHack,
+      ]}
+    >
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        additionalData={{ saveArea: true }}
+        style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
+      >
+        <View
+          testID={`${entry?.id}-player-container`}
           style={[
-            safeAreaStyles(configuration, isTablet),
-            style,
+            defaultStyles.playerContainer,
+            containerDimensions,
+            containerStyle,
             playerDimesionsHack,
           ]}
         >
           <AnimationComponent
             animationType={ComponentAnimationType.moveUpComponent}
-            additionalData={{ saveArea: true }}
-            style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
+            style={isTabletLandscape ? defaultStyles.flex : undefined}
+            additionalData={{
+              useLayoutMeasure: isTabletLandscape,
+              disableAnimatedComponent: !isTabletLandscape,
+              resetAnimationValue: isTabletLandscape && docked,
+            }}
           >
-            <PathnameContext.Provider value={pathname}>
-              <ScreenContextProvider pathname={pathname}>
-                <View
-                  testID={`${entry?.id}-player-container`}
-                  style={[
-                    defaultStyles.playerContainer,
-                    containerDimensions,
-                    containerStyle,
-                    playerDimesionsHack,
-                  ]}
-                >
-                  <AnimationComponent
-                    animationType={ComponentAnimationType.moveUpComponent}
-                    style={isTabletLandscape ? defaultStyles.flex : undefined}
-                    additionalData={{
-                      useLayoutMeasure: isTabletLandscape,
-                      disableAnimatedComponent: !isTabletLandscape,
-                      resetAnimationValue: isTabletLandscape && docked,
-                    }}
-                  >
-                    <AnimatedVideoPlayerComponent>
-                      {children(childrenStyles)}
-                    </AnimatedVideoPlayerComponent>
-                  </AnimationComponent>
-                </View>
-                <AnimatedScrollModal>
-                  {isInlineModal && !docked ? (
-                    <AnimationComponent
-                      animationType={ComponentAnimationType.componentFade}
-                      style={defaultStyles.flex}
-                    >
-                      <PlayerDetails
-                        configuration={configuration}
-                        style={defaultStyles.playerDetails}
-                        entry={entry}
-                        isTabletLandscape={isTabletLandscape}
-                      />
-                    </AnimationComponent>
-                  ) : (
-                    <View style={defaultStyles.playerDetails} />
-                  )}
-                </AnimatedScrollModal>
-              </ScreenContextProvider>
-            </PathnameContext.Provider>
+            <AnimatedVideoPlayerComponent>
+              {children(childrenStyles)}
+            </AnimatedVideoPlayerComponent>
           </AnimationComponent>
-        </WrapperView>
-      </ScreenContextProvider>
-    </PathnameContext.Provider>
+        </View>
+
+        <AnimatedScrollModal>
+          {showDetails(!isTablet, docked, isInlineModal, pip) && (
+            <AnimationComponent
+              animationType={ComponentAnimationType.componentFade}
+              style={defaultStyles.flex}
+            >
+              <PlayerDetails
+                configuration={configuration}
+                style={defaultStyles.playerDetails}
+                entry={entry}
+                isTabletLandscape={isTabletLandscape}
+                isTablet={isTablet}
+              />
+            </AnimationComponent>
+          )}
+        </AnimatedScrollModal>
+      </AnimationComponent>
+    </WrapperView>
   );
 };
+
+export const PlayerWrapper = PlayerWrapperComponent;

package/Components/VideoModal/VideoModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as R from "ramda";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View, StatusBar } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
@@ -129,32 +129,38 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <PathnameContext.Provider value={pathname}>
-      <ScreenContextProvider pathname={pathname}>
-        {itemIdHooksFinished === item?.id ? (
-          <AnimatedPlayerModalWrapper
-            style={[
-              styles.container,
-              {
-                backgroundColor,
-              },
-            ]}
-          >
-            <HandlePlayable
-              item={item}
-              isModal={mode !== "PIP"}
-              modalHeight={modalSize.height}
-              modalWidth={modalSize.width}
-              mode={mode}
-            />
-          </AnimatedPlayerModalWrapper>
-        ) : (
-          <View style={styles.loaderContainer}>
-            <Spinner />
-          </View>
-        )}
-      </ScreenContextProvider>
-    </PathnameContext.Provider>
+    <>
+      {/* TODO: Workaround to avoid unnecessary UI effect when switching from portrait to fullscreen */}
+      <StatusBar hidden={false} />
+      {/* TODO: Workaround to avoid unnecessary UI effect when switching from portrait to fullscreen */}
+
+      <PathnameContext.Provider value={pathname}>
+        <ScreenContextProvider pathname={pathname}>
+          {itemIdHooksFinished === item?.id ? (
+            <AnimatedPlayerModalWrapper
+              style={[
+                styles.container,
+                {
+                  backgroundColor,
+                },
+              ]}
+            >
+              <HandlePlayable
+                item={item}
+                isModal={mode !== "PIP"}
+                modalHeight={modalSize.height}
+                modalWidth={modalSize.width}
+                mode={mode}
+              />
+            </AnimatedPlayerModalWrapper>
+          ) : (
+            <View style={styles.loaderContainer}>
+              <Spinner />
+            </View>
+          )}
+        </ScreenContextProvider>
+      </PathnameContext.Provider>
+    </>
   );
 };
 

package/Components/VideoModal/__tests__/PlayerDetails.test.tsx

@@ -8,6 +8,13 @@ const props = {
   configuration: { modal_background_color: "transparent" },
 };
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
+  useDimensions: jest.fn(() => ({
+    width: 20,
+    height: 30,
+  })),
+}));
+
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: jest.fn(() => ({
     top: 20,

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

@@ -9,6 +9,7 @@ exports[`PlayerDetails renders properly 1`] = `
       "flex": 1,
       "marginTop": -8,
       "paddingTop": -8,
+      "width": 750,
     }
   }
 >
@@ -29,6 +30,7 @@ exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] =
       "flex": 1,
       "marginTop": -20,
       "paddingTop": 40,
+      "width": 750,
     }
   }
 >

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

@@ -27,8 +27,8 @@ exports[`PlayerWrapper renders inline 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "height": 1334,
+          "width": 750,
         },
         Object {},
       ]
@@ -72,12 +72,35 @@ exports[`PlayerWrapper renders inline 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -110,8 +133,8 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": undefined,
-          "width": 300,
+          "height": 1334,
+          "width": 750,
         },
         Object {},
       ]
@@ -155,12 +178,35 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -254,12 +300,35 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         />
       </View>
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTablet={true}
+          isTabletLandscape={true}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -292,8 +361,8 @@ exports[`PlayerWrapper renders properly 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "height": 750,
+          "width": 1334,
         },
         Object {},
       ]
@@ -336,13 +405,6 @@ exports[`PlayerWrapper renders properly 1`] = `
         }
         testID="test-player-container"
       />
-      <View
-        style={
-          Object {
-            "flex": 1,
-          }
-        }
-      />
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -44,11 +45,14 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View style={[style.view, isRTL ? style.rtlStyle : {}]}>
+    <SafeAreaView
+      style={[style.view, isRTL ? style.rtlStyle : {}]}
+      testID="BarView-safeAreaView"
+    >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaView>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/Buttons/BackButton.tsx

@@ -11,12 +11,16 @@ const renderEmptyView = () => {
   return <View style={emptyViewStyle} />;
 };
 
-type FloatingButtonProps = {
+type FloatingButtonProps = Testable & {
   onPress: () => void;
   screenStyles: any;
 };
 
-const BackButton = ({ onPress, screenStyles }: FloatingButtonProps) => {
+const BackButton = ({
+  onPress,
+  screenStyles,
+  testID = "backButton",
+}: FloatingButtonProps) => {
   const containerStyle: any = {};
 
   if (!onPress) {
@@ -25,6 +29,7 @@ const BackButton = ({ onPress, screenStyles }: FloatingButtonProps) => {
 
   return (
     <ActionButton
+      testID={`${testID}-actionButton`}
       onPress={onPress}
       buttonStyles={containerStyle}
       imageUrl={screenStyles.back_button_image}

package/Components/ZappFrameworkComponents/BarView/Buttons/CloseButton.tsx

@@ -11,12 +11,16 @@ const renderEmptyView = () => {
   return <View style={emptyViewStyle} />;
 };
 
-type CloseButtonProps = {
+type CloseButtonProps = Testable & {
   onPress: () => void;
   screenStyles?: any;
 };
 
-const CloseButton = ({ onPress, screenStyles }: CloseButtonProps) => {
+const CloseButton = ({
+  onPress,
+  screenStyles,
+  testID = "closeButton",
+}: CloseButtonProps) => {
   const containerStyle: any = {};
 
   if (!onPress) {
@@ -25,6 +29,7 @@ const CloseButton = ({ onPress, screenStyles }: CloseButtonProps) => {
 
   return (
     <ActionButton
+      testID={`${testID}-actionButton`}
       onPress={onPress}
       buttonStyles={containerStyle}
       imageUrl={screenStyles.close_button_image}

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { fireEvent } from "@testing-library/react-native";
+
+const mockUseIsRTL = jest.fn(() => true);
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+}));
+
+const BarView = require("../BarView").default;
+
+describe("BarView", () => {
+  const screenStyles = {
+    title_font_color: "#000",
+    title_font_android: "Roboto",
+    title_font_ios: "San Francisco",
+    title_font_size: "16",
+    background_color: "#fff",
+  };
+
+  const barState = {
+    backHandler: jest.fn(),
+    closeHandler: jest.fn(),
+    title: "Test Title",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders without crashing", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByText } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByText("Test Title")).toBeTruthy();
+  });
+
+  it("applies RTL styles when isRTL is true", () => {
+    mockUseIsRTL.mockReturnValue(true);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+      transform: [{ scaleX: -1 }],
+    });
+  });
+
+  it("does not apply RTL styles when isRTL is false", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+      transform: [{ scaleX: -1 }],
+    });
+  });
+
+  it("calls closeHandler when CloseButton is pressed", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    fireEvent.press(getByTestId("closeButton-actionButton-touchable"));
+    expect(barState.closeHandler).toHaveBeenCalled();
+  });
+
+  it("calls backHandler when BackButton is pressed", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    fireEvent.press(getByTestId("backButton-actionButton-touchable"));
+    expect(barState.backHandler).toHaveBeenCalled();
+  });
+});

package/Components/ZappFrameworkComponents/Buttons/ActionButton.tsx

@@ -28,7 +28,7 @@ styles: {
 }
 */
 
-type ActionButtonProps = {
+type ActionButtonProps = Testable & {
   onPress: () => void;
   buttonStyles: any;
   imageUrl: string;
@@ -46,11 +46,16 @@ const ActionButton = ({
   buttonStyles,
   imageUrl,
   imageStyle = closeButtonStyle,
+  testID,
 }: ActionButtonProps) => {
   return (
-    <View style={buttonStyles}>
-      <TouchableOpacity onPress={onPress}>
-        <Image source={{ uri: imageUrl }} style={imageStyle} />
+    <View style={buttonStyles} testID={testID}>
+      <TouchableOpacity onPress={onPress} testID={`${testID}-touchable`}>
+        <Image
+          source={{ uri: imageUrl }}
+          style={imageStyle}
+          testID={`${testID}-image`}
+        />
       </TouchableOpacity>
     </View>
   );