@applicaster/zapp-react-native-ui-components 13.0.0-rc.99 → 14.0.0-alpha.1216545755

package/Components/ModalComponent/Button/index.tsx

@@ -7,7 +7,6 @@ import { defaultSelectedAsset } from "./assets";
 
 type ButtonProps = {
   configuration: any;
-  width: number;
   selectedItem?: any;
   item: any; // Adjust type as needed
   onPress: (item: any) => void; // Adjust type as needed
@@ -33,7 +32,6 @@ export function Button({
   item,
   onPress,
   configuration,
-  width,
   iconBaseProps,
   itemBaseProps: itemProps,
   labelBaseProps,
@@ -65,34 +63,32 @@ export function Button({
   if (disabled) return null;
 
   return (
-    <View style={{ maxWidth: width }}>
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={() => onPress(item)}
-        onPressIn={() => setFocused(true)}
-        onPressOut={() => setFocused(false)}
-      >
-        <Item {...itemProps} focused={focused} selected={selected}>
-          <View style={styles.label_icon_container}>
-            {iconPlacement === "left" && renderItemIcon}
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={() => onPress(item)}
+      onPressIn={() => setFocused(true)}
+      onPressOut={() => setFocused(false)}
+    >
+      <Item {...itemProps} focused={focused} selected={selected}>
+        <View style={styles.label_icon_container}>
+          {iconPlacement === "left" && renderItemIcon}
 
-            {label ? (
-              <ItemLabel
-                {...labelBaseProps}
-                label={label ?? null}
-                focused={focused}
-                selected={selected}
-              />
-            ) : null}
-          </View>
+          {label ? (
+            <ItemLabel
+              {...labelBaseProps}
+              label={label ?? null}
+              focused={focused}
+              selected={selected}
+            />
+          ) : null}
+        </View>
 
-          {selected ? (
-            <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
-          ) : (
-            iconPlacement === "right" && renderItemIcon
-          )}
-        </Item>
-      </TouchableOpacity>
-    </View>
+        {selected ? (
+          <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
+        ) : (
+          iconPlacement === "right" && renderItemIcon
+        )}
+      </Item>
+    </TouchableOpacity>
   );
 }

package/Components/ModalComponent/Header/index.tsx

@@ -8,13 +8,18 @@ import { PluginConfiguration } from "../index";
 type Props = {
   dismiss: () => void;
   configuration: PluginConfiguration;
-  width: number;
   onLayout?: (event: LayoutChangeEvent) => void;
   summary?: string;
   title?: string;
 };
 
 const styles = StyleSheet.create({
+  noFlex: {
+    flex: 0,
+  },
+  flex: {
+    flex: 1,
+  },
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -22,7 +27,7 @@ const styles = StyleSheet.create({
 });
 
 export function ModalHeader(props: Props) {
-  const { configuration, dismiss, width, onLayout, summary, title } = props;
+  const { configuration, dismiss, onLayout, summary, title } = props;
 
   const closeButtonProps = useMemo<CloseButtonProps>(
     () => ({
@@ -55,15 +60,11 @@ export function ModalHeader(props: Props) {
 
   return (
     <View onLayout={onLayout} style={styles.container}>
-      <View
-        style={{
-          width: width - buttonsContainerWidth,
-        }}
-      >
+      <View style={styles.flex}>
         {title ? <Title {...titleProps} /> : null}
         {summary ? <Title {...summaryProps} /> : null}
       </View>
-      <View style={{ width: buttonsContainerWidth }}>
+      <View style={[styles.noFlex, { width: buttonsContainerWidth }]}>
         <CloseButton {...closeButtonProps} />
       </View>
     </View>

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -6,11 +6,15 @@ import * as R from "ramda";
 import uuid from "uuid/v4";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
-  isApplePlatform,
   isTV,
   platformSelect,
   isAndroidTVPlatform,
+  isTvOSPlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  isAudioItem,
+  isInlineTV as isInlineTVUtil,
+} from "@applicaster/zapp-react-native-utils/playerUtils";
 
 import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
@@ -21,7 +25,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { PlayerStateContext } from "../../Contexts/PlayerStateContext";
-import { isAppleTV } from "../../Helpers/Platform";
+
 import {
   QUICK_BRICK_EVENTS,
   QuickBrickEvent,
@@ -96,6 +100,11 @@ const focusableBottomContainerId = "player-container-bottom";
 
 const isAndroidTV = isAndroidTVPlatform();
 
+const isTvOS = isTvOSPlatform();
+
+// height for container with additional content below player
+const INLINE_CONTAINER_CONTENT_HEIGHT = 400;
+
 const withBorderHack = () => {
   if (isAndroidTV) {
     /* @HACK: see GH#7269 */
@@ -125,7 +134,7 @@ const webStyles = {
     flex: "initial",
   },
   inlineRiver: {
-    height: 400,
+    height: INLINE_CONTAINER_CONTENT_HEIGHT,
   },
 };
 
@@ -143,7 +152,7 @@ const nativeStyles = {
     flex: 1,
   },
   inlineRiver: {
-    height: 400,
+    height: INLINE_CONTAINER_CONTENT_HEIGHT,
   },
 };
 
@@ -163,12 +172,11 @@ const renderApplePlayer = ({
   videoStyle,
   playNextData,
 }) => {
-  const { title, summary } = item || {};
-
-  if (!isAppleTV() || !player) {
+  if (!isTvOS || !player) {
     return null;
   }
 
+  // render audio_player for tvos
   if (isAudioContent) {
     return (
       <AudioPlayer
@@ -182,6 +190,8 @@ const renderApplePlayer = ({
     return null;
   }
 
+  const { title, summary } = item || {};
+
   return (
     <ProgramInfo
       title={title}
@@ -192,21 +202,6 @@ const renderApplePlayer = ({
   );
 };
 
-const renderRestPlayers = ({ item, showAudioPlayer, pluginConfiguration }) => {
-  if (isApplePlatform()) {
-    return null;
-  }
-
-  return (
-    showAudioPlayer && (
-      <AudioPlayer
-        audio_item={item}
-        plugin_configuration={pluginConfiguration}
-      />
-    )
-  );
-};
-
 const PlayerContainerComponent = (props: Props) => {
   const {
     Player,
@@ -336,7 +331,7 @@ const PlayerContainerComponent = (props: Props) => {
 
       setState({ error: errorObj });
 
-      if (!isAppleTV()) {
+      if (!isTvOS) {
         setTimeout(() => {
           close();
         }, 800);
@@ -493,9 +488,7 @@ const PlayerContainerComponent = (props: Props) => {
   // TODO: Skip hook call on TV platform
   useBackHandler(backHandler);
 
-  const isAudioContent =
-    typeof item?.content?.type === "string" &&
-    item?.content?.type.includes("audio");
+  const isAudioContent = isAudioItem(item);
 
   useEffect(() => {
     if (!isAudioContent) {
@@ -569,10 +562,7 @@ const PlayerContainerComponent = (props: Props) => {
 
   const uri = item?.content ? item.content?.src : null;
 
-  const isInlineTV =
-    screenData?.ui_components &&
-    screenData?.ui_components?.length > 0 &&
-    isTV();
+  const isInlineTV = isInlineTVUtil(screenData);
 
   const inline =
     [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
@@ -597,7 +587,7 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (screen_background_color) {
+    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -615,6 +605,7 @@ const PlayerContainerComponent = (props: Props) => {
     tv_component_container_height,
     screen_background_color,
     isInlineTV,
+    mode,
   ]);
 
   const applePlayerProps = {
@@ -626,12 +617,6 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
-  const restPlayerProps = {
-    item,
-    showAudioPlayer: isAudioContent,
-    pluginConfiguration,
-  };
-
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -707,8 +692,6 @@ const PlayerContainerComponent = (props: Props) => {
                       </Player>
                     </PlayerFocusableWrapperView>
 
-                    {renderRestPlayers(restPlayerProps)}
-
                     {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
@@ -732,12 +715,12 @@ const PlayerContainerComponent = (props: Props) => {
                             screenId={screenData.id}
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
-                            cellTapAction={(event) => onCellTap(event)}
-                            extraAnchorPointYOffset={-600}
+                            cellTapAction={onCellTap}
+                            extraAnchorPointYOffset={0}
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}
                             componentsMapExtraProps={{
-                              isNestedComponentsMap: R.T,
+                              isNestedComponentsMap: true,
                             }}
                           />
                         )}

package/Components/PlayerImageBackground/index.tsx

@@ -28,7 +28,7 @@ const PlayerImageBackgroundComponent = ({
   defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
+    () => ({ uri: imageSrcFromMediaItem(entry, [imageKey]) }),
     [imageKey, entry]
   );
 

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, Platform, FlatList } from "react-native";
+import { View, StyleSheet, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -24,6 +24,10 @@ import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-com
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useShallow } from "zustand/react/shallow";
 
+import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const isAndroid = isAndroidPlatform();
+
 type Props = {
   feed: ZappFeed;
   groupId?: string;
@@ -273,12 +277,12 @@ function ComponentsMapComponent(props: Props) {
             }}
             // Fix for WebView rerender crashes on Android API 28+
             // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-            overScrollMode={Platform.OS === "android" ? "never" : "auto"}
+            overScrollMode={isAndroid ? "never" : "auto"}
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
             stickyHeaderIndices={stickyHeaderIndices}
+            removeClippedSubviews={isAndroid}
             onLayout={handleOnLayout}
-            removeClippedSubviews
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}

package/Components/River/RiverItem.tsx

@@ -39,6 +39,10 @@ function getFeedUrl(feed: ZappFeed, index: number) {
   }
 }
 
+const isNextIndex = (index, readyIndex) => {
+  return readyIndex + 1 >= index;
+};
+
 /**
  * useLoadingState for RiverItemComponent
  * takes currentIndex and loadingState as arguments
@@ -48,12 +52,12 @@ const useLoadingState = (
   loadingState: RiverItemType["loadingState"]
 ) => {
   const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
-    loadingState.getValue().index + 1 === currentIndex
+    isNextIndex(currentIndex, loadingState.getValue().index)
   );
 
   useEffect(() => {
     const subscription = loadingState.subscribe(({ index }) => {
-      if (index + 1 === currentIndex) {
+      if (isNextIndex(currentIndex, index)) {
         setReadyToBeDisplayed(true);
       }
     });
@@ -61,7 +65,7 @@ const useLoadingState = (
     return () => {
       subscription.unsubscribe();
     };
-  }, [loadingState, currentIndex]);
+  }, [currentIndex]);
 
   return readyToBeDisplayed;
 };
@@ -147,7 +151,7 @@ function RiverItemComponent(props: RiverItemType) {
       component={item}
       componentIndex={index}
       onLoadFailed={onLoadFailed}
-      onLoadFinished={() => onLoadFinished(index)} // Keeping it here to don't break the plugins.
+      onLoadFinished={() => onLoadFinished(index)}
       groupId={groupId}
       feedUrl={feedUrl}
       isLast={isLast}

package/Components/River/TV/River.tsx

@@ -26,7 +26,6 @@ type Props = {
   componentsMapExtraProps?: any;
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
-  extraOffset: number;
   river?: ZappRiver | ZappEntry;
 };
 
@@ -39,7 +38,6 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
-    extraOffset,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -120,7 +118,6 @@ export const River = (props: Props) => {
     <GeneralContentScreen
       feed={feedData}
       screenId={screenId}
-      extraOffset={extraOffset}
       isScreenWrappedInContainer={isInsideContainer}
       extraAnchorPointYOffset={extraAnchorPointYOffset}
       componentsMapExtraProps={componentsMapExtraProps}

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -145,7 +145,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       onScrollEndDrag={[Function]}
       overScrollMode="auto"
       refreshControl={null}
-      removeClippedSubviews={true}
+      removeClippedSubviews={false}
       renderItem={[Function]}
       scrollEventThrottle={16}
       scrollIndicatorInsets={

package/Components/RouteManager/TestId.tsx

@@ -12,11 +12,7 @@ const styles = StyleSheet.create({
 
 export function TestId({ screenId, children }: Props) {
   return (
-    <View
-      testID={screenId}
-      accessibilityLabel={screenId}
-      style={styles.container}
-    >
+    <View testID={screenId} style={styles.container}>
       {children}
     </View>
   );

package/Components/RouteManager/__tests__/__snapshots__/routeManager.test.js.snap

@@ -2,7 +2,6 @@
 
 exports[`<RouteManager /> renders correctly 1`] = `
 <View
-  accessibilityLabel="A1234"
   style={
     {
       "flex": 1,

package/Components/RouteManager/__tests__/testId.test.js

@@ -24,9 +24,5 @@ describe("TestId", () => {
     );
 
     expect(wrapper.getByTestId(screenId)).toBeTruthy();
-
-    expect(wrapper.getByTestId(screenId).props.accessibilityLabel).toEqual(
-      screenId
-    );
   });
 });

package/Components/Screen/TV/__tests__/index.web.test.tsx

@@ -0,0 +1,26 @@
+const {
+  useScreenBackgroundColor,
+} = require("@applicaster/zapp-react-native-utils/reactHooks/screen");
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  useScreenBackgroundColor: jest.fn(),
+  useNavbarState: jest.fn().mockReturnValue({ visible: true }),
+}));
+
+describe("TV Screen Component", () => {
+  it("uses the useScreenBackgroundColor hook with the correct screen ID", () => {
+    useScreenBackgroundColor.mockReturnValue("#FF0000");
+
+    expect(useScreenBackgroundColor("test-screen-id")).toBe("#FF0000");
+
+    // Verify the hook was called with the correct screen ID
+    expect(useScreenBackgroundColor).toHaveBeenCalledWith("test-screen-id");
+  });
+
+  it("returns 'transparent' when the screen background color is not defined", () => {
+    useScreenBackgroundColor.mockReturnValue("transparent");
+
+    // Verify the hook returns 'transparent'
+    expect(useScreenBackgroundColor("test-screen-id")).toBe("transparent");
+  });
+});

package/Components/Screen/__tests__/Screen.test.tsx

@@ -68,21 +68,21 @@ jest.mock(
   })
 );
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData",
-  () => ({
-    useScreenData: jest.fn(() => ({
-      id: "testId",
-      navigations: [{ id: "testId", category: "nav_bar" }],
-    })),
-  })
-);
-
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
+  useIsScreenActive: jest.fn().mockReturnValue(true),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useCurrentScreenData: jest.fn(() => ({
+    id: "testId",
+  })),
+  useNavbarState: jest.fn(() => ({
+    title: "Test Title",
+  })),
+  useScreenData: jest.fn(() => ({
+    id: "testId",
+    navigations: [{ id: "testId", category: "nav_bar" }],
   })),
   useNavigation: jest.fn(() => ({
     canGoBack: () => false,
@@ -91,7 +91,15 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
     screenData: { id: "testId" },
     data: { screen: { id: "testId" } },
   })),
-  useIsScreenActive: jest.fn().mockReturnValue(true),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
+  useDimensions: jest.fn(() => ({
+    width: 1920,
+    height: 1080,
+  })),
+  useIsTablet: jest.fn(() => false),
 }));
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks/usePickFromState", () => {

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
     pathname="/river/testId"
     selected="testId"
     testID="navBar"
-    title=""
+    title="Test Title"
   />
   <View>
     <View
@@ -48,7 +48,7 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
     pathname="/river/testId"
     selected="testId"
     testID="navBar"
-    title=""
+    title="Test Title"
   />
   <View>
     <View

package/Components/TopMarginApplicator/TopMarginApplicator.tsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { View, ViewProps, ViewStyle } from "react-native";
+import { View, ViewStyle } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 interface IProps {
   targetScreenId?: string;
   children?: React.ReactNode;
   style?: ViewStyle;
-  extraOffset?: number;
+  extraVerticalOffset: Option<number>;
 }
 
-type CombinedProps = IProps & ViewProps;
 /**
  * The MarginTop is essentially a feature used for managing the visibility of components on your screen.
  * A more accurate term for this might be something like a 'component visibility threshold' or 'cut-off point'.
@@ -47,7 +47,7 @@ export const useMarginTop = (targetScreenId: string): number => {
 
   // Empty string means that value is blank in the CMS. Fallback to theme
   if (String(screenData?.styles?.screen_margin_top) === "") {
-    return Number(theme.screen_margin_top);
+    return toNumberWithDefault(0, theme.screen_margin_top);
   }
 
   /**
@@ -58,28 +58,29 @@ export const useMarginTop = (targetScreenId: string): number => {
    */
   if (screenData?.styles?.screen_margin_top === undefined) {
     if (isGeneralContentScreen || supportsUiComponents) {
-      return Number(theme.screen_margin_top);
+      return toNumberWithDefault(0, theme.screen_margin_top);
     }
 
     return 0;
   }
 
-  return Number(screenData?.styles?.screen_margin_top);
+  return toNumberWithDefault(0, screenData?.styles?.screen_margin_top);
 };
 
-export const TopMarginApplicator: React.FC<CombinedProps> = (
-  props: CombinedProps
-) => {
-  const extraOffset = props?.extraOffset ?? 0;
+export const TopMarginApplicator: React.FC<IProps> = ({
+  targetScreenId,
+  style,
+  children,
+  extraVerticalOffset,
+}: IProps) => {
+  const extraOffset = toNumberWithDefault(0, extraVerticalOffset);
 
   // HACK: Remove extraOffset when focusIssue with absolute elements is fixed on tvos
-  const marginTop = useMarginTop(props.targetScreenId) + extraOffset;
-  const style = { ...((props.style as {}) || {}), marginTop };
+  const marginTop = useMarginTop(targetScreenId);
 
-  // Then, spread the rest of the props on your returned JSX.
   return (
-    <View {...props} style={style}>
-      {props.children}
+    <View style={[style, { marginTop: marginTop + extraOffset }]}>
+      {children}
     </View>
   );
 };

package/Components/Transitioner/Scene.tsx

@@ -36,6 +36,7 @@ export function CurrentScreenContextProvider({
   screenData: NavigationScreenData;
 }) {
   const { pathname, isActive = false, screenData } = props;
+  console.log("CurrentScreenContextProvider", { screenData });
 
   const [initialScreenData, setInitialScreenData] = React.useState(screenData);
 

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -94,7 +94,7 @@ export const AnimationView = ({
   const isAudioItem = React.useMemo(
     () =>
       videoModalItem?.content?.type?.includes?.("audio") ||
-      videoModalItem?.type?.value === "audio",
+      videoModalItem?.type?.value?.includes?.("audio"),
     [videoModalItem]
   );
 
@@ -107,7 +107,6 @@ export const AnimationView = ({
     progressBarHeight,
     isTablet,
     isTabletLandscape,
-    inlineAudioPlayer,
     tabletLandscapePlayerTopPosition,
   });
 

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -17,6 +17,7 @@ export enum PlayerAnimationStateEnum {
   maximize = "maximize",
   drag_player = "drag_player",
   drag_scroll = "drag_scroll",
+  appear_as_docked = "appear_as_docked",
 }
 
 export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;