@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4155487673 → 12.0.0-alpha.4173603919

package/Components/VideoModal/PlayerWrapper.tsx

@@ -7,7 +7,6 @@ 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";
@@ -23,6 +22,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 +70,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 +124,37 @@ const getTabletWidth = (
   return Number(width) - sidebarWidth;
 };
 
-export const PlayerWrapper = (props: Props) => {
+const getStyles = (baseStyle, isMobile, isPortrait) => {
+  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): boolean => {
+  // 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 +169,8 @@ export const PlayerWrapper = (props: Props) => {
 
   const isInlineModal = inline && isModal;
 
+  const style = getStyles(baseStyle, !isTablet, isInlineModal);
+
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
   const tabletWidth = getTabletWidth(configuration, style);
@@ -224,8 +252,9 @@ export const PlayerWrapper = (props: Props) => {
                     </AnimatedVideoPlayerComponent>
                   </AnimationComponent>
                 </View>
+
                 <AnimatedScrollModal>
-                  {isInlineModal && !docked ? (
+                  {showDetails(!isTablet, docked) && (
                     <AnimationComponent
                       animationType={ComponentAnimationType.componentFade}
                       style={defaultStyles.flex}
@@ -235,10 +264,9 @@ export const PlayerWrapper = (props: Props) => {
                         style={defaultStyles.playerDetails}
                         entry={entry}
                         isTabletLandscape={isTabletLandscape}
+                        isTablet={isTablet}
                       />
                     </AnimationComponent>
-                  ) : (
-                    <View style={defaultStyles.playerDetails} />
                   )}
                 </AnimatedScrollModal>
               </ScreenContextProvider>
@@ -249,3 +277,5 @@ export const PlayerWrapper = (props: Props) => {
     </PathnameContext.Provider>
   );
 };
+
+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 {},
       ]
@@ -91,6 +91,7 @@ exports[`PlayerWrapper renders inline 1`] = `
               "id": "test",
             }
           }
+          isTablet={false}
           isTabletLandscape={false}
           style={
             Object {
@@ -132,8 +133,8 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": undefined,
-          "width": 300,
+          "height": 1334,
+          "width": 750,
         },
         Object {},
       ]
@@ -177,13 +178,35 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
-            "paddingTop": 20,
           }
         }
-      />
+      >
+        <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>
@@ -296,6 +319,7 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
               "id": "test",
             }
           }
+          isTablet={true}
           isTabletLandscape={true}
           style={
             Object {
@@ -337,8 +361,8 @@ exports[`PlayerWrapper renders properly 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "height": 750,
+          "width": 1334,
         },
         Object {},
       ]
@@ -382,13 +406,35 @@ exports[`PlayerWrapper renders properly 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
-            "paddingTop": 20,
           }
         }
-      />
+      >
+        <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>

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>
   );

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,5 +1,6 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
+import { useCallback, useMemo } from "react";
 
 type Dimensions = {
   width: Option<number>;
@@ -31,16 +32,19 @@ export const useCachedDimensions = (id: string) => {
     dimensionsStore
   ) as DimensionsState;
 
-  const getCachedDimensions = () => {
+  const getCachedDimensions = useCallback(() => {
     return dimensions[id] || initialDimensions();
-  };
+  }, [dimensions?.[id], id]);
 
-  const handleSetCachedDimensions = (newDimensions) => {
+  const handleSetCachedDimensions = useCallback((newDimensions) => {
     setCachedDimensions(id, newDimensions);
-  };
-
-  return {
-    getCachedDimensions,
-    setCachedDimensions: handleSetCachedDimensions,
-  };
+  }, []);
+
+  return useMemo(
+    () => ({
+      getCachedDimensions,
+      setCachedDimensions: handleSetCachedDimensions,
+    }),
+    [getCachedDimensions, handleSetCachedDimensions]
+  );
 };

package/Contexts/ConfirmDialogState/index.ts

@@ -2,7 +2,7 @@ import { createStore } from "zustand/vanilla";
 import { useStore } from "zustand";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-interface ConfirmationDialogState {
+export interface ConfirmationDialogState {
   isDialogVisible: boolean;
   messages: string;
   confirmAction: () => void;

package/Contexts/ScreenContext/index.tsx

@@ -177,7 +177,12 @@ export function withScreenContext(Component: React.ComponentType<any>) {
   return function WithScreenContextWrapper(props) {
     return (
       <ScreenContext.Consumer>
-        {(value) => <Component {...props} screenContext={value} />}
+        {useCallback(
+          (value) => (
+            <Component {...props} screenContext={value} />
+          ),
+          [Component, props]
+        )}
       </ScreenContext.Consumer>
     );
   };

package/const.ts

@@ -1,3 +1,5 @@
+import { ViewStyle } from "react-native";
+
 export const tvPluginsWithCellRenderer = [
   "group-qb",
   "gallery-qb",
@@ -5,3 +7,7 @@ export const tvPluginsWithCellRenderer = [
   "hero-qb",
   "list-qb",
 ];
+
+// Can't be used in StyleSheet.create, need to be inline/defined as a constant
+// https://github.com/necolas/react-native-web/issues/1427
+export const flatListOverflowStyle: ViewStyle = { overflow: "visible" };

package/index.js

@@ -1,3 +1,6 @@
 import * as QuickBrickComponents from "./Components";
+import { flatListOverflowStyle } from "./const";
+
+export { flatListOverflowStyle };
 
 export default QuickBrickComponents;

package/package.json

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

package/Components/Screen/TV/hooks/useRestoreFocus.ts

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { isNil } from "ramda";
-import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-
-export const useRestoreFocus = (): void => {
-  const isScreenActive = useIsScreenActive();
-  const previousIsScreenActive = usePrevious(isScreenActive);
-
-  React.useEffect(() => {
-    if (isNil(previousIsScreenActive)) {
-      // it's initial mounting of the screen, do nothing here
-      return;
-    }
-
-    if (!previousIsScreenActive && isScreenActive) {
-      // restore focus when we go back from next screen
-      focusManager.setInitialFocus();
-    }
-  }, [previousIsScreenActive, isScreenActive]);
-};