@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5974411329 → 14.0.0-alpha.6000342231

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,30 +1,11 @@
 import * as React from "react";
-import {
-  Dimensions,
-  Platform,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from "react-native";
+import { View, 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 { playerDimensionsHack } from "./utils";
-import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
-
-type DimensionsT = {
-  width: number | string;
-  height: number | string | undefined;
-  aspectRatio?: number;
-};
-
-type Configuration = {
-  [key: string]: any;
-  tablet_landscape_sidebar_width?: string;
-  tablet_landscape_player_container_background_color?: string;
-};
+import { DimensionsT, Configuration, getEdges } from "./playerWrapperUtils";
+import { defaultStyles, useStyle } from "./playerWrapperStyle";
 
 type Props = {
   entry: ZappEntry;
@@ -41,36 +22,12 @@ type Props = {
   playerContent: (styles: ViewStyle) => React.ReactNode;
 };
 
-const defaultStyles = StyleSheet.create({
-  playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
-});
-
-const getScreenAspectRatio = () => {
-  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
-  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
-
-  return longEdge / shortEdge;
-};
-
-const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
-  if (isTablet) {
-    return ["top"];
-  }
-
-  if (!isInlineModal && Platform.OS === "android") {
-    return [];
-  }
-
-  return ["top"];
-};
-
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
     style,
     containerStyle,
     inline,
-    docked,
     isModal,
     isTabletPortrait,
     configuration,
@@ -78,52 +35,21 @@ const PlayerWrapperComponent = (props: Props) => {
     playerContent,
   } = props;
 
+  const styles = 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: DimensionsT = React.useMemo(
-    () => ({
-      width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
-      height: undefined,
-    }),
-    [isInlineModal, tabletWidth, docked]
-  );
-
-  const playerDimensions: DimensionsT = React.useMemo(
-    () => ({
-      ...baseDimensions,
-      width: baseDimensions.width,
-      aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
-    }),
-    [baseDimensions, isInlineModal, pip]
-  );
-
-  const containerDimensions: DimensionsT = React.useMemo(
-    () => ({
-      ...baseDimensions,
-      aspectRatio: playerDimensions.aspectRatio,
-    }),
-    [baseDimensions, isInlineModal, docked, playerDimensions.aspectRatio]
-  );
-
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
-  const childrenStyles = React.useMemo(
-    () => ({
-      ...playerDimensions,
-      ...playerDimensionsHack,
-    }),
-    [containerDimensions, playerDimensionsHack]
-  );
-
   return (
     <WrapperView
       edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
@@ -134,11 +60,11 @@ const PlayerWrapperComponent = (props: Props) => {
         style={[
           defaultStyles.playerContainer,
           playerDimensionsHack,
-          containerDimensions,
+          styles.containerDimensions,
           containerStyle,
         ]}
       >
-        {playerContent(childrenStyles)}
+        {playerContent(styles.childrenStyles)}
       </View>
     </WrapperView>
   );

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

@@ -1,5 +1,5 @@
 import React from "react";
-import renderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 const props = {
   entry: {},
@@ -42,16 +42,16 @@ const { PlayerDetails } = require("../PlayerDetails");
 
 describe("PlayerDetails", () => {
   it("renders properly", () => {
-    const element = renderer.create(<PlayerDetails {...props} />);
+    const { toJSON } = render(<PlayerDetails {...props} />);
 
-    expect(element).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("renders properly on tablet in landscape orientation", () => {
-    const element = renderer.create(
+    const { toJSON } = render(
       <PlayerDetails {...props} isTabletLandscape={true} />
     );
 
-    expect(element).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -46,6 +46,7 @@ jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
 
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   isTV: jest.fn(() => false),
+  isAndroidPlatform: jest.fn(() => false),
   isApplePlatform: jest.fn(() => true),
   platformSelect: jest.fn((props) => props.android),
 }));

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/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

@@ -33,8 +33,12 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
 const isOldAndroidDevice =
-  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION) &&
+  !isAndroidTablet();
 
 export const useModalSize = (): Size => {
   const frame = useSafeAreaFrame();
@@ -42,7 +46,7 @@ export const useModalSize = (): Size => {
   const [modalSize, setModalSize] = React.useState<Size>({
     width: frame.width,
     height: isOldAndroidDevice
-      ? frame.height + StatusBar.currentHeight
+      ? frame.height + (StatusBar.currentHeight ?? 0)
       : frame.height,
   });
 
@@ -57,9 +61,10 @@ export const useModalSize = (): Size => {
 
       return {
         width: newSize.width,
-        height: isOldAndroidDevice
-          ? newSize.height + StatusBar.currentHeight
-          : newSize.height,
+        height:
+          isOldAndroidDevice && newSize.height !== "100%"
+            ? newSize.height + (StatusBar.currentHeight ?? 0)
+            : newSize.height,
       };
     });
 

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,
+});

package/Contexts/CellFocusedStateContext/index.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+
+export const CellFocusedStateContext = React.createContext<boolean>(false);
+
+export const CellFocusedStateContextProvider = ({
+  cellFocused,
+  children,
+}: {
+  cellFocused: boolean;
+  children: ReactNode;
+}) => {
+  return (
+    <CellFocusedStateContext.Provider value={cellFocused}>
+      {children}
+    </CellFocusedStateContext.Provider>
+  );
+};
+
+export function withCellFocusedStateContext(
+  Component: React.ComponentType<any>
+) {
+  return function WithCellFocusedStateContextWrapper(props) {
+    const cellFocusedState = React.useContext(CellFocusedStateContext);
+
+    return <Component {...props} cellFocusedState={cellFocusedState} />;
+  };
+}

package/Contexts/ConfigutaionContext/__tests__/ConfigurationProvider.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { View } from "react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 
@@ -14,12 +14,12 @@ describe("withConfigurationProvider", () => {
   };
 
   it("provides configuration to children", () => {
-    const wrapper = TestRenderer.create(
+    const { toJSON } = render(
       <ConfigurationProvider configuration={{ target: "foobar" }}>
         <TestComponent />
       </ConfigurationProvider>
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Contexts/ScreenContext/index.tsx

@@ -13,7 +13,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { create, StoreApi, UseBoundStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
 import { Animated } from "react-native";
 
@@ -39,38 +40,26 @@ interface NavBarState {
   setSummary: (subtitle: string) => void;
 }
 
-type ScreenContextType = {
-  _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
-  _stateStore: UseBoundStore<StoreApi<StateStore>>;
-  navBar: NavBarState;
-  legacyFormatScreenData: LegacyNavigationScreenData | null;
-};
-
-interface StateStore {
-  data: Record<string, any>;
-  setValue: (key: string, value: any) => void;
-  removeValue: (key: string) => void;
-}
-
-// possible replacement of screenStateStore, remove changes in this file if not needed
 const createStateStore = () =>
-  create<StateStore>((set) => ({
-    data: {},
-    setValue: (key, value) =>
-      set((state) => ({
-        data: {
-          ...state.data,
-          [key]: value,
-        },
-      })),
-    removeValue: (key) =>
-      set((state) => {
-        const newData = { ...state.data };
-        delete newData[key];
-
-        return { data: newData };
-      }),
-  }));
+  create(
+    subscribeWithSelector<ScreenStateStore>((set) => ({
+      data: {},
+      setValue: (key, value) =>
+        set((state) => ({
+          data: {
+            ...state.data,
+            [key]: value,
+          },
+        })),
+      removeValue: (key) =>
+        set((state) => {
+          const newData = { ...state.data };
+          delete newData[key];
+
+          return { data: newData };
+        }),
+    }))
+  );
 
 const createStore = () =>
   create<NavBarStoreState>((set) => ({
@@ -92,6 +81,13 @@ const createStore = () =>
     },
   }));
 
+type ScreenContextType = {
+  _navBarStore: ReturnType<typeof createStore>;
+  _stateStore: ReturnType<typeof createStateStore>;
+  navBar: NavBarState;
+  legacyFormatScreenData: LegacyNavigationScreenData | null;
+};
+
 export const ScreenContext = createContext<ScreenContextType>({
   _stateStore: createStateStore(),
   _navBarStore: createStore(),

package/Decorators/ConfigurationWrapper/__tests__/withConfigurationProvider.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 import { View } from "react-native";
 import { withConfigurationProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ConfigurationWrapper";
@@ -15,12 +15,12 @@ describe("withConfigurationProvider", () => {
   it("correctly passes all the configuration keys child component", () => {
     const Component = withConfigurationProvider(TestComponent);
 
-    const wrapper = TestRenderer.create(
+    const { toJSON } = render(
       <Component
         screenData={{ styles: {}, general: {}, data: { source: "test" } }}
       />
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });