@applicaster/zapp-react-native-ui-components 13.0.0-alpha.1724095599 → 13.0.0-alpha.1731130113

package/Components/ModalComponent/utils.ts

@@ -1,15 +1,18 @@
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { PluginConfiguration } from "./index";
+import { PluginConfiguration } from "./";
+import { ItemIconProps } from "./Button/ItemIcon";
+import { ItemLabelProps } from "./Button/ItemLabel";
+import { ItemProps } from "./Button/Item";
 
 export function defaultItemProps(
   config: PluginConfiguration,
   maxWidth: number
-) {
+): ItemProps {
   const {
     modal_bottom_sheet_item_background_color,
     modal_bottom_sheet_item_focus_background_color,
     modal_bottom_sheet_item_selected_background_color,
-    modal_bottom_sheet_item_focusected_background_color,
+    modal_bottom_sheet_item_focused_selected_background_color,
     modal_bottom_sheet_item_corner_radius,
     modal_bottom_sheet_item_margin_bottom,
     modal_bottom_sheet_item_margin_left,
@@ -25,8 +28,8 @@ export function defaultItemProps(
     backgroundColor: modal_bottom_sheet_item_background_color,
     focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
     selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
-    focusectedBackgroundColor:
-      modal_bottom_sheet_item_focusected_background_color,
+    focusedSelectedBackgroundColor:
+      modal_bottom_sheet_item_focused_selected_background_color,
     borderRadius: modal_bottom_sheet_item_corner_radius,
     marginBottom: modal_bottom_sheet_item_margin_bottom,
     marginTop: modal_bottom_sheet_item_margin_top,
@@ -43,7 +46,7 @@ export function defaultItemProps(
 export function defaultItemLabelProps(
   config: PluginConfiguration,
   sheetWidth: number
-) {
+): ItemLabelProps {
   const {
     modal_bottom_sheet_item_label_android_letter_spacing,
     modal_bottom_sheet_item_label_ios_letter_spacing,
@@ -103,7 +106,9 @@ export function defaultItemLabelProps(
   };
 }
 
-export function defaultItemIconProps(config: PluginConfiguration) {
+export function defaultItemIconProps(
+  config: PluginConfiguration
+): ItemIconProps {
   const {
     modal_bottom_sheet_item_icon_height,
     modal_bottom_sheet_item_icon_width,
@@ -124,3 +129,46 @@ export function defaultItemIconProps(config: PluginConfiguration) {
     marginRight: modal_bottom_sheet_item_icon_margin_right,
   };
 }
+
+export function getItemIconProps(
+  theme: PluginConfiguration,
+  iconProps?: ((theme: PluginConfiguration) => ItemIconProps) | ItemIconProps
+) {
+  if (iconProps) {
+    return typeof iconProps === "function" ? iconProps(theme) : iconProps;
+  }
+
+  return defaultItemIconProps(theme);
+}
+
+export function getItemLabelProps(
+  theme: PluginConfiguration,
+  width: number,
+  labelProps?:
+    | ((theme: PluginConfiguration, width: number) => ItemLabelProps)
+    | ItemLabelProps
+) {
+  if (labelProps) {
+    return typeof labelProps === "function"
+      ? labelProps(theme, width)
+      : labelProps;
+  }
+
+  return defaultItemLabelProps(theme, width);
+}
+
+export function getItemProps(
+  theme: PluginConfiguration,
+  width: number,
+  itemProps?:
+    | ((theme: PluginConfiguration, width: number) => ItemProps)
+    | ItemProps
+) {
+  if (itemProps) {
+    return typeof itemProps === "function"
+      ? itemProps(theme, width)
+      : itemProps;
+  }
+
+  return defaultItemProps(theme, width);
+}

package/Components/OfflineHandler/utils/index.ts

@@ -57,7 +57,7 @@ export const useNotificationHeight = () => {
 
   const navBarHeight = platformSelect({ ios: 44, android: 56 });
 
-  const statusHeight = Platform.OS === "android" ? 0 : insets.top;
+  const statusHeight = insets.top;
   const notificationHeight = statusHeight + navBarHeight;
 
   return { statusHeight, notificationHeight };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -6,10 +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";
@@ -20,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,
@@ -93,6 +98,25 @@ export type PlayNextData = {
 
 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 */
+    return {
+      borderWidth: 1,
+      borderColor: "transparent",
+    };
+  }
+
+  return {};
+};
+
 // Styles
 const webStyles = {
   focusableGroup: {
@@ -110,7 +134,7 @@ const webStyles = {
     flex: "initial",
   },
   inlineRiver: {
-    height: 400,
+    height: INLINE_CONTAINER_CONTENT_HEIGHT,
   },
 };
 
@@ -128,7 +152,7 @@ const nativeStyles = {
     flex: 1,
   },
   inlineRiver: {
-    height: 400,
+    height: INLINE_CONTAINER_CONTENT_HEIGHT,
   },
 };
 
@@ -148,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
@@ -167,6 +190,8 @@ const renderApplePlayer = ({
     return null;
   }
 
+  const { title, summary } = item || {};
+
   return (
     <ProgramInfo
       title={title}
@@ -177,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,
@@ -321,7 +331,7 @@ const PlayerContainerComponent = (props: Props) => {
 
       setState({ error: errorObj });
 
-      if (!isAppleTV()) {
+      if (!isTvOS) {
         setTimeout(() => {
           close();
         }, 800);
@@ -335,9 +345,9 @@ const PlayerContainerComponent = (props: Props) => {
 
     const resumeTime = Number(item?.extensions?.resumeTime);
 
-    // TODO: This is temp hack, will be removed on next pr with player refactoring
+    // Сhecking that the player itself knows where to start playing, and there is no need to call seekTo after returning from the Сhromecast
     if (
-      !!playerManager.getActivePlayer()?.getContinueWatchingOffset === false &&
+      !playerManager.getActivePlayer()?.hasResumePosition() &&
       !isNaN(resumeTime)
     ) {
       player?.seekTo(resumeTime);
@@ -478,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) {
@@ -514,6 +522,12 @@ const PlayerContainerComponent = (props: Props) => {
   useEffect(() => {
     playerEvent("source_changed", { item });
 
+    return () => {
+      playerEvent("player_did_close", { item });
+    };
+  }, [item?.id, Player]);
+
+  useEffect(() => {
     if (!isModal) {
       showNavBar(false);
     }
@@ -523,13 +537,11 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     return () => {
-      playerEvent("player_did_close", { item });
-
       if (!isModal) {
         showNavBar(true);
       }
     };
-  }, [showNavBar, /* added as suggested: */ item?.id, isModal, Player]);
+  }, [showNavBar, isModal, Player]);
 
   useEffect(() => {
     if (prevItemId && !R.equals(prevItemId, item?.id)) {
@@ -550,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) ||
@@ -578,7 +587,7 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (screen_background_color) {
+    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -596,6 +605,7 @@ const PlayerContainerComponent = (props: Props) => {
     tv_component_container_height,
     screen_background_color,
     isInlineTV,
+    mode,
   ]);
 
   const applePlayerProps = {
@@ -607,12 +617,6 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
-  const restPlayerProps = {
-    item,
-    showAudioPlayer: isAudioContent,
-    pluginConfiguration,
-  };
-
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -640,7 +644,14 @@ const PlayerContainerComponent = (props: Props) => {
                   testID={"player-screen-container"}
                 >
                   {/* Player container */}
-                  <View style={styles.playerWrapper} testID={"player-wrapper"}>
+                  <View
+                    style={[
+                      styles.playerWrapper,
+                      // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals
+                      withBorderHack(),
+                    ]}
+                    testID={"player-wrapper"}
+                  >
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
@@ -681,8 +692,6 @@ const PlayerContainerComponent = (props: Props) => {
                       </Player>
                     </PlayerFocusableWrapperView>
 
-                    {renderRestPlayers(restPlayerProps)}
-
                     {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
@@ -706,7 +715,7 @@ const PlayerContainerComponent = (props: Props) => {
                             screenId={screenData.id}
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
-                            cellTapAction={(event) => onCellTap(event)}
+                            cellTapAction={onCellTap}
                             extraAnchorPointYOffset={-600}
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}

package/Components/PlayerImageBackground/index.tsx

@@ -39,7 +39,7 @@ const PlayerImageBackgroundComponent = ({
   return (
     <View
       style={
-        playerAnimationState === PlayerAnimationStateEnum.maximaze
+        playerAnimationState === PlayerAnimationStateEnum.maximize
           ? defaultImageDimensions
           : style
       }

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;
@@ -34,6 +38,7 @@ type Props = {
   getStaticComponentFeed: any;
   pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
   refreshingPipesV1?: boolean;
+  stickyHeaderIndices?: number[];
 };
 
 const styles = StyleSheet.create({
@@ -61,6 +66,7 @@ function ComponentsMapComponent(props: Props) {
     // TODO: Remove when pipes v1 is deprecated.
     pullToRefreshPipesV1RefreshingStateUpdater,
     refreshingPipesV1,
+    stickyHeaderIndices,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -271,11 +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}
             onLayout={handleOnLayout}
-            removeClippedSubviews
+            removeClippedSubviews={isAndroid}
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
@@ -296,6 +303,10 @@ function ComponentsMapComponent(props: Props) {
             onMomentumScrollEnd={_onMomentumScrollEnd}
             onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
+            maintainVisibleContentPosition={{
+              minIndexForVisible: 0,
+              autoscrollToTopThreshold: 10,
+            }}
             {...scrollViewExtraProps}
           />
         </ViewportTracker>

package/Components/River/ComponentsMap/hooks/useLoadingState.ts

@@ -28,10 +28,10 @@ type Return = {
 // TODO: Take this value from Zapp configuration, when feature is added to GeneralScreen
 const SHOULD_FAIL_ON_COMPONENT_LOADING = false;
 
-const createLoadingStateObservable = () =>
+const createLoadingStateObservable = (count: number) =>
   new BehaviorSubject<LoadingState>({
     index: -1,
-    done: false,
+    done: count === 0,
     waitForAllComponents: SHOULD_FAIL_ON_COMPONENT_LOADING,
   });
 
@@ -43,7 +43,7 @@ export const useLoadingState = (
   const [loadingError, setLoadingError] = React.useState(null);
 
   const loadingState = useRefWithInitialValue<BehaviorSubject<LoadingState>>(
-    createLoadingStateObservable
+    () => createLoadingStateObservable(count)
   );
 
   const arePreviousComponentsLoaded = React.useCallback((index) => {

package/Components/River/RiverItem.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import * as R from "ramda";
+import { isGroup } from "@applicaster/zapp-react-native-utils/componentsUtils";
 
 import { applyDecorators } from "../../Decorators";
 
@@ -47,16 +48,20 @@ const useLoadingState = (
   loadingState: RiverItemType["loadingState"]
 ) => {
   const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
-    loadingState.getValue().index + 1 === currentIndex
+    loadingState.getValue().index + 1 >= currentIndex
   );
 
   useEffect(() => {
     const subscription = loadingState.subscribe(({ index }) => {
-      if (index + 1 === currentIndex) {
+      if (index + 1 >= currentIndex) {
         setReadyToBeDisplayed(true);
       }
     });
 
+    if (loadingState.getValue().index + 1 >= currentIndex) {
+      setReadyToBeDisplayed(true);
+    }
+
     return () => {
       subscription.unsubscribe();
     };
@@ -112,7 +117,7 @@ function RiverItemComponent(props: RiverItemType) {
       jsOnly: true,
     });
 
-    if (!CellRenderer && item.component_type !== "group-qb") {
+    if (!CellRenderer && !isGroup(item)) {
       riverLogger.warning({
         message: "Cell Renderer is null - will fallback to default cell",
         data: { item, CellRenderer },

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

@@ -135,6 +135,12 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       getItemCount={[Function]}
       initialNumToRender={3}
       keyExtractor={[Function]}
+      maintainVisibleContentPosition={
+        {
+          "autoscrollToTopThreshold": 10,
+          "minIndexForVisible": 0,
+        }
+      }
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
       onLayout={[Function]}
@@ -145,7 +151,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/TV/index.web.tsx

@@ -92,6 +92,10 @@ const getNavigations = ({
   return fallbackNavigations;
 };
 
+const onRelease = () => {
+  focusManager.setInitialFocus();
+};
+
 export const Screen = ({ route, Components }: Props) => {
   if (isNilOrEmpty(route)) {
     throw Error("Required props: route is missing");
@@ -152,12 +156,7 @@ export const Screen = ({ route, Components }: Props) => {
   const isScreenActive = useIsScreenActive();
 
   return (
-    <FreezeWithCallback
-      freeze={!isScreenActive}
-      onRelease={() => {
-        focusManager.setInitialFocus();
-      }}
-    >
+    <FreezeWithCallback freeze={!isScreenActive} onRelease={onRelease}>
       <View style={[styles.container, { backgroundColor }]}>
         <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
           <NavBar

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