@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 14.0.0-rc.90

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/__tests__/useDelayedPlayerDetails.test.ts

@@ -2,6 +2,8 @@ import { renderHook } from "@testing-library/react-hooks";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
+jest.useFakeTimers();
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn().mockReturnValue(false),
 }));
@@ -11,11 +13,15 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return true initially", () => {
+  it("should return false initially, that changes after 1 second", () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
+    expect(result.current).toBe(false);
+
+    jest.advanceTimersByTime(1000);
+
     expect(result.current).toBe(true);
   });
 
@@ -46,6 +52,8 @@ describe("useDelayedPlayerDetails", () => {
       })
     );
 
+    jest.advanceTimersByTime(1000);
+
     expect(result.current).toBe(true);
   });
 });

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/useDelayedPlayerDetails.ts

@@ -1,22 +1,26 @@
+// const showPlayerDetails = (
+//   isInline: boolean,
+//   isDocked: boolean,
+//   isPip: boolean,
+//   isTablet: boolean
+// ) => {
+//   return showDetails({
+//     isMobile: !isTablet,
+//     isInline,
+//     isDocked,
+//     isPip,
+//   });
+// };
+
+import * as React from "react";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 import { showDetails } from "./utils";
 
-type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };
+const TIMEOUT = 1000; // ms
 
-const showPlayerDetails = (
-  isInline: boolean,
-  isDocked: boolean,
-  isPip: boolean,
-  isTablet: boolean
-) => {
-  return showDetails({
-    isMobile: !isTablet,
-    isInline,
-    isDocked,
-    isPip,
-  });
-};
+type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };
 
 /**
  * Custom hook to determine whether to show player details with a delay.
@@ -32,7 +36,28 @@ export const useDelayedPlayerDetails = ({
   isDocked,
   isPip,
 }: Props): boolean => {
+  const [shouldShowDetails, setShouldShowDetails] = React.useState(false);
+
   const isTablet = useIsTablet();
 
-  return showPlayerDetails(isInline, isDocked, isPip, isTablet);
+  React.useEffect(() => {
+    const subscription = withTimeout$(TIMEOUT).subscribe({
+      next: () => {
+        setShouldShowDetails(() => {
+          return showDetails({
+            isMobile: !isTablet,
+            isInline,
+            isDocked,
+            isPip,
+          });
+        });
+      },
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [isDocked, isTablet, isInline, isPip]);
+
+  return shouldShowDetails;
 };

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,21 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
+const isOldAndroidDevice =
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION) &&
+  !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 ?? 0)
+      : frame.height,
   });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
@@ -44,7 +59,13 @@ export const useModalSize = (): Size => {
         return oldSize;
       }
 
-      return newSize;
+      return {
+        width: newSize.width,
+        height:
+          isOldAndroidDevice && newSize.height !== "100%"
+            ? newSize.height + (StatusBar.currentHeight ?? 0)
+            : newSize.height,
+      };
     });
 
     logger.debug({

package/Components/VideoModal/hooks/utils/__tests__/showDetails.test.ts

@@ -12,7 +12,7 @@ describe("showDetails", () => {
     expect(result).toBe(false);
   });
 
-  it("should return false if isDocked is true", () => {
+  it("should return true if isDocked & mobile", () => {
     const result = showDetails({
       isMobile: true,
       isInline: true,
@@ -20,7 +20,7 @@ describe("showDetails", () => {
       isPip: false,
     });
 
-    expect(result).toBe(false);
+    expect(result).toBe(true);
   });
 
   it("should return true if isMobile is true and isInline is true", () => {

package/Components/VideoModal/hooks/utils/index.ts

@@ -52,6 +52,10 @@ export const showDetails = ({
   }
 
   if (isDocked) {
+    if (isMobile) {
+      return true;
+    }
+
     return false;
   }
 

package/Components/VideoModal/playerWrapperStyle.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { StyleSheet, ViewStyle } from "react-native";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { playerDimensionsHack } from "./utils";
+import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
+import {
+  getBaseDimensions,
+  calculateAspectRatio,
+  getPlayerDimensions,
+  getContainerDimensions,
+} from "./playerWrapperUtils";
+
+export const defaultStyles = StyleSheet.create({
+  playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
+});
+
+export const useStyle = ({
+  style,
+  inline,
+  isModal,
+  isTabletPortrait,
+  configuration,
+  pip,
+}) => {
+  const isTablet = useIsTablet();
+
+  const isInlineModal = inline && isModal;
+
+  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+
+  const tabletWidth = getTabletWidth(
+    configuration.tablet_landscape_sidebar_width,
+    style
+  );
+
+  const baseDimensions: ViewStyle = React.useMemo(
+    () => getBaseDimensions(isInlineModal, isTabletLandscape, tabletWidth),
+    [isInlineModal, isTabletLandscape, tabletWidth]
+  );
+
+  const aspectRatio = React.useMemo(
+    () => calculateAspectRatio(isInlineModal, pip),
+    // ignoring insets - only initial needed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isInlineModal, pip]
+  );
+
+  return React.useMemo(() => {
+    const playerDimensions: ViewStyle = getPlayerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const containerDimensions: ViewStyle = getContainerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const childrenStyles = {
+      ...playerDimensions,
+      ...playerDimensionsHack,
+    };
+
+    return StyleSheet.create({
+      containerDimensions,
+      childrenStyles,
+    });
+  }, [baseDimensions, aspectRatio]);
+};

package/Components/VideoModal/playerWrapperUtils.ts

@@ -0,0 +1,91 @@
+import { Dimensions, DimensionValue, Platform, ViewStyle } from "react-native";
+import { Edge } from "react-native-safe-area-context";
+
+export type DimensionsT = {
+  width: number | string;
+  height: number | string | undefined;
+  aspectRatio?: number;
+};
+
+export type Configuration = {
+  [key: string]: any;
+  tablet_landscape_sidebar_width?: string;
+  tablet_landscape_player_container_background_color?: string;
+};
+
+// This is safe, remembering screen dimensions once as they do not change during runtime
+// TODO: consider sharing screen orientation as a shared function for the app
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
+export const getWindowDimensions = () => {
+  const { width, height } = Dimensions.get("window");
+
+  return { width, height };
+};
+
+export const getMaxWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.max(width, height);
+};
+
+export const getMinWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.min(width, height);
+};
+
+export const getScreenAspectRatio = () => {
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
+
+  return longEdge / shortEdge;
+};
+
+export const getEdges = (
+  isTablet: boolean,
+  isInlineModal: boolean
+): readonly Edge[] => {
+  if (isTablet) {
+    return ["top"];
+  }
+
+  if (!isInlineModal && Platform.OS === "android") {
+    return [];
+  }
+
+  return ["top"];
+};
+
+export const getBaseDimensions = (
+  isInlineModal: boolean,
+  isTabletLandscape: boolean,
+  tabletWidth: DimensionValue
+): ViewStyle => ({
+  width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
+  height: undefined,
+});
+
+export const calculateAspectRatio = (
+  isInlineModal: boolean,
+  pip?: boolean
+): number => {
+  return !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9;
+};
+
+export const getPlayerDimensions = (
+  baseDimensions: ViewStyle,
+  aspectRatio: number
+): ViewStyle => ({
+  ...(baseDimensions as any),
+  width: baseDimensions.width,
+  aspectRatio,
+});
+
+export const getContainerDimensions = (
+  baseDimensions: ViewStyle,
+  aspectRatio?: string | number
+): ViewStyle => ({
+  ...baseDimensions,
+  aspectRatio,
+});