@applicaster/zapp-react-native-ui-components 15.0.0-alpha.3564377339 → 15.0.0-alpha.3634430569

package/Components/Cell/Cell.tsx

@@ -26,11 +26,15 @@ type Props = {
     componentAnchorPointY: number;
     headerOffset?: number;
     extraAnchorPointYOffset?: number;
+    componentPaddingTop?: number;
   }) => void;
   offsetUpdater: (arg1: string, arg2: number, arg3: number) => number;
   componentId: string;
   component: {
     id: string;
+    styles?: {
+      component_padding_top?: number;
+    };
   };
   selected?: boolean;
   CellRenderer: React.FunctionComponent<any> & {
@@ -178,6 +182,8 @@ export class CellComponent extends React.Component<Props, State> {
         componentAnchorPointY,
         headerOffset,
         extraAnchorPointYOffset,
+        componentPaddingTop:
+          this.props?.component?.styles?.component_padding_top,
       });
     }
   }

package/Components/Cell/CellWithFocusable.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { useCellState } from "../MasterCell/utils";
 import { FocusableGroup } from "../FocusableGroup";
@@ -26,6 +27,13 @@ type Props = {
 
 const addPrefix = (id: string) => `focusable-cell-wrapper-${id}`;
 
+const wrapperStyles = {
+  flex: platformSelect({
+    tvos: 1,
+    default: undefined,
+  }),
+};
+
 export function CellWithFocusable(props: Props) {
   const {
     index,
@@ -94,6 +102,7 @@ export function CellWithFocusable(props: Props) {
       onFocus={onGroupFocus}
       onBlur={onGroupBlur}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
+      style={wrapperStyles}
     >
       <CellWrapper style={styles.cellWrapper}>
         <CellRenderer

package/Components/Focusable/Focusable.tsx

@@ -8,6 +8,8 @@ import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withF
 import { StyleSheet, ViewStyle } from "react-native";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
+import { isSearchInputId } from "@applicaster/zapp-react-native-utils/searchUtils";
+
 type Props = {
   initialFocus?: boolean;
   id: string;
@@ -106,7 +108,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -120,7 +122,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,8 +10,12 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-function noop() {}
+import {
+  emitFocused,
+  emitNativeRegistered,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   id: string;
@@ -54,6 +58,7 @@ export class Focusable extends BaseFocusable<Props> {
     this.nextFocusableReactTags = {};
     this.preferredFocus = this.preferredFocus.bind(this);
     this.measureView = this.measureView.bind(this);
+    this.onRegistered = this.onRegistered.bind(this);
   }
 
   /**
@@ -85,6 +90,9 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
+    const id: string = nativeEvent.itemID;
+    emitFocused(id);
+
     onFocus(nativeEvent);
   }
 
@@ -170,6 +178,13 @@ export class Focusable extends BaseFocusable<Props> {
     });
   }
 
+  onRegistered({ nativeEvent }) {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: false });
+  }
+
   render() {
     const {
       children,
@@ -204,6 +219,7 @@ export class Focusable extends BaseFocusable<Props> {
         focusable={isFocusable}
         {...this.nextFocusableReactTags}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>

package/Components/Focusable/__tests__/__snapshots__/FocusableTvOS.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`FocusableTvOS should render correctly 1`] = `
   groupId={null}
   itemId={null}
   onLayout={[Function]}
+  onRegistered={[Function]}
   onViewBlur={[Function]}
   onViewFocus={[Function]}
   onViewPress={[Function]}

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -2,6 +2,10 @@ import * as React from "react";
 import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-components/Components/NativeFocusables";
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/LayoutContext";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
+import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 const { log_verbose } = createLogger({
   subsystem: "General",
@@ -33,9 +37,16 @@ type Props = {
   screenData: { screenId: string; parentScreenId: string };
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroupComponent extends BaseFocusable<Props> {
   public readonly isGroup: boolean = true;
 
+  onRegistered = ({ nativeEvent }) => {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: true });
+  };
+
   render() {
     const {
       children,
@@ -68,9 +79,27 @@ export class FocusableGroup extends BaseFocusable<Props> {
         onGroupBlur={onGroupBlur}
         style={style}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {children}
       </FocusableGroupNative>
     );
   }
 }
+
+export const withFocusDisabled = (Component) => {
+  return function WithFocusDisabled(props) {
+    // @ts-ignore
+    const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
+
+    const { pathname } = useRoute();
+
+    const isPlayerPresented = isScreenPlayable(pathname);
+
+    const blockScreenFocus = isPlayerPresented === false && screenFocusBlocked;
+
+    return <Component {...props} isFocusDisabled={blockScreenFocus} />;
+  };
+};
+
+export const FocusableGroup = withFocusDisabled(FocusableGroupComponent);

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -12,12 +12,26 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useEventAlerts } from "./utils/useEventAlerts";
-
-const { log_info } = createLogger({
+import {
+  selectRiverById,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+import { getScreenDataSource } from "./utils/getScreenDataSource";
+import { ScreenResolverFeedProvider } from "../ScreenResolverFeedProvider/ScreenResolverFeedProvider";
+
+const { log_debug } = createLogger({
   category: "ScreenContainer",
   subsystem: "General",
 });
 
+/** Provides screen-feed from general-screen configuration (if defined) */
+const useFeedData = (id) => {
+  const river = useAppSelector((state) => selectRiverById(state, id));
+  const feedData = getScreenDataSource(river);
+
+  return feedData;
+};
+
 export const GeneralContentScreen = ({
   feed,
   screenId,
@@ -54,20 +68,15 @@ export const GeneralContentScreen = ({
     useEffect(() => {
       if (!riverActionProvidersReady) {
         if (actionsInitialStateSetters.length > 0) {
-          log_info(
-            "ScreenContainer: starting to check river action providers to initialize",
-            { actionsInitialStateSetters }
-          );
-
           allSettled(actionsInitialStateSetters).finally(() => {
-            log_info(
+            log_debug(
               "ScreenContainer: action provider ready, completed. Starting to present screen"
             );
 
             setRiverActionProvidersReady(true);
           });
         } else {
-          log_info(
+          log_debug(
             "ScreenContainer: no action provider to check, completed. Starting to present screen"
           );
 
@@ -108,24 +117,26 @@ export const GeneralContentScreen = ({
   if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
 
   return (
-    <ScreenTrackedViewPositionsContext.Provider>
-      <CellTapContext.Provider value={contextValue}>
-        <ComponentsMap
-          feed={feed}
-          riverId={screenId}
-          groupId={groupId || `general-content-screen-${screenId}`}
-          riverComponents={components || uiComponents}
-          scrollViewExtraProps={scrollViewExtraProps}
-          getStaticComponentFeed={getStaticComponentFeed}
-          extraAnchorPointYOffset={extraAnchorPointYOffset}
-          isScreenWrappedInContainer={isScreenWrappedInContainer}
-          parentFocus={parentFocus}
-          focused={focused}
-          containerHeight={containerHeight}
-          preferredFocus={preferredFocus}
-          {...componentsMapExtraProps}
-        />
-      </CellTapContext.Provider>
-    </ScreenTrackedViewPositionsContext.Provider>
+    <ScreenResolverFeedProvider id={screenId} useFeedData={useFeedData}>
+      <ScreenTrackedViewPositionsContext.Provider>
+        <CellTapContext.Provider value={contextValue}>
+          <ComponentsMap
+            feed={feed}
+            riverId={screenId}
+            groupId={groupId || `general-content-screen-${screenId}`}
+            riverComponents={components || uiComponents}
+            scrollViewExtraProps={scrollViewExtraProps}
+            getStaticComponentFeed={getStaticComponentFeed}
+            extraAnchorPointYOffset={extraAnchorPointYOffset}
+            isScreenWrappedInContainer={isScreenWrappedInContainer}
+            parentFocus={parentFocus}
+            focused={focused}
+            containerHeight={containerHeight}
+            preferredFocus={preferredFocus}
+            {...componentsMapExtraProps}
+          />
+        </CellTapContext.Provider>
+      </ScreenTrackedViewPositionsContext.Provider>
+    </ScreenResolverFeedProvider>
   );
 };

package/Components/GeneralContentScreen/__tests__/GeneralContentScreen.test.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { GeneralContentScreen } from "../GeneralContentScreen";
+
+const mockUseAppSelector = jest.fn();
+const mockSelectRiverById = jest.fn();
+const mockProviderSpy = jest.fn();
+
+jest.mock("../../River/ComponentsMap", () => ({
+  ComponentsMap: () => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    return <View testID="components-map" />;
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => jest.fn()),
+}));
+
+jest.mock("../utils", () => ({
+  logger: { warn: jest.fn() },
+  whenMatchingType: jest.fn((_type, value) => value),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
+  useLayoutVersion: jest.fn(() => false),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData",
+  () => ({
+    useScreenData: jest.fn(() => ({
+      ui_components: [{ id: "ui-component" }],
+      general: {},
+    })),
+  })
+);
+
+jest.mock("../utils/useCurationAPI", () => ({
+  useCurationAPI: jest.fn(() => [{ id: "curation-component" }]),
+}));
+
+jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
+  useRiverInitialState: jest.fn(() => []),
+}));
+
+jest.mock("../utils/useEventAlerts", () => ({
+  useEventAlerts: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  useAppSelector: (...args) => mockUseAppSelector(...args),
+  selectRiverById: (...args) => mockSelectRiverById(...args),
+}));
+
+jest.mock("../utils/getScreenDataSource", () => ({
+  getScreenDataSource: jest.fn(() => ({
+    source: "https://feed",
+    mapping: {},
+  })),
+}));
+
+jest.mock(
+  "../../ScreenResolverFeedProvider/ScreenResolverFeedProvider",
+  () => ({
+    ScreenResolverFeedProvider: ({ id, useFeedData, children }) => {
+      const React = require("react");
+      const { View } = require("react-native");
+
+      mockProviderSpy(id, useFeedData);
+      useFeedData(id);
+
+      return <View testID="screen-resolver-feed-provider">{children}</View>;
+    },
+  })
+);
+
+describe("GeneralContentScreen", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseAppSelector.mockImplementation((selector) => selector({}));
+    mockSelectRiverById.mockReturnValue({ id: "screen-1" });
+  });
+
+  it("wraps content with ScreenResolverFeedProvider and renders ComponentsMap", () => {
+    const { getByTestId } = render(
+      <GeneralContentScreen
+        screenId="screen-1"
+        feed={null}
+        components={[{ id: "component-1" }]}
+      />
+    );
+
+    expect(getByTestId("screen-resolver-feed-provider")).toBeDefined();
+    expect(getByTestId("components-map")).toBeDefined();
+
+    expect(mockProviderSpy).toHaveBeenCalledWith(
+      "screen-1",
+      expect.any(Function)
+    );
+  });
+});

package/Components/GeneralContentScreen/utils/__tests__/getScreenDataSource.test.ts

@@ -0,0 +1,19 @@
+import { getScreenDataSource } from "../getScreenDataSource";
+
+describe("getScreenDataSource", () => {
+  it("returns screen_feed data when present", () => {
+    const result = getScreenDataSource({
+      data: {
+        screen_feed: {
+          source: "https://feed",
+        },
+      },
+    });
+
+    expect(result).toEqual({ source: "https://feed" });
+  });
+
+  it("returns undefined when screen_feed is missing", () => {
+    expect(getScreenDataSource({ data: {} })).toBeUndefined();
+  });
+});

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 import {
   getTransformedPreset,

package/Components/GeneralContentScreen/utils/getScreenDataSource.ts

@@ -0,0 +1,9 @@
+import { get } from "@applicaster/zapp-react-native-utils/utils";
+
+const lookupPath = ["data", "screen_feed"];
+
+export const getScreenDataSource = (
+  screenData: any
+): Option<ZappDataSource> => {
+  return get(screenData, lookupPath) as ZappDataSource | undefined;
+};

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,4 +1,4 @@
-import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
+import { all, equals, isEmpty, path, pluck, prop, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
 
@@ -9,10 +9,9 @@ import {
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import {
-  ZappPipesEntryContext,
   ZappPipesScreenContext,
   ZappPipesSearchContext,
 } from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -24,6 +23,7 @@ import {
 
 import { produce } from "immer";
 import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
+
 // types reference
 
 declare interface CurationEntry {
@@ -36,6 +36,7 @@ type Feeds = Record<string, ZappPipesData>;
 type LayoutPresets = PresetsMapping["presets_mappings"];
 
 const TABS_SCREEN_TYPE = "tabs_screen";
+const QB_TABS_SCREEN_TYPE = "quick-brick-tabs";
 const SMART_COMPONENT_TYPE = "quick-brick-smart-component";
 const SOURCE_PATH = ["data", "source"];
 const MAPPING_PATH = ["data", "mapping"];
@@ -54,7 +55,10 @@ export const getTransformedPreset = (
   const presetComponent = layoutPresets?.[preset?.preset_name];
 
   if (!presetComponent) {
-    logger.log_error("Preset missing or wrong data format", { entry: preset });
+    logger.log_error(
+      `Preset "${preset?.preset_name}" missing or wrong data format`,
+      { entry: preset }
+    );
 
     return;
   }
@@ -131,16 +135,21 @@ export const useCurationAPI = (
     [components]
   );
 
-  const { pathname } = useRoute();
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const isNestedScreen = screenContext?.type === TABS_SCREEN_TYPE;
+  const screenContextType = screenContext?.type;
 
-  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
-    pathname,
-    isNestedScreen
-  );
+  const isNestedScreen =
+    screenContextType === TABS_SCREEN_TYPE ||
+    screenContextType === QB_TABS_SCREEN_TYPE;
+
+  const screenContextData = useScreenContext();
+
+  const entryContext = ((isNestedScreen && screenContextData?.nested?.entry
+    ? screenContextData?.nested?.entry
+    : (screenContextData?.entry?.payload ?? screenContextData?.entry)) ||
+    {}) as ZappEntry;
 
   const urlsMap = useMemo<{ [key: string]: string }>(() => {
     const map = {};

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -5,8 +5,6 @@ import {
   usePlugins,
 } from "@applicaster/zapp-react-native-redux/hooks";
 import {
-  useDimensions,
-  useIsTablet as isTablet,
   useNavigation,
   useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
@@ -15,8 +13,8 @@ import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
 import { ViewStyle } from "react-native";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { findCastPlugin, getPlayer } from "./utils";
+import { useWaitForValidOrientation } from "../Screen/hooks";
 
 type Props = {
   item: ZappEntry;
@@ -31,13 +29,6 @@ type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
 
-const dimensionsContext: "window" | "screen" = platformSelect({
-  android_tv: "window",
-  amazon: "window",
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  default: isTablet() ? "window" : "screen", // on tablet, window represents correct values, on phone it's not as the screen could be rotated
-});
-
 export function HandlePlayable({
   item,
   isModal,
@@ -97,27 +88,23 @@ export function HandlePlayable({
     });
   }, [casting]);
 
-  const { width: screenWidth, height: screenHeight } =
-    useDimensions(dimensionsContext);
-
   const modalSize = useModalSize();
 
-  const style = React.useMemo(
-    () =>
-      ({
-        width: isModal
-          ? modalSize.width
-          : mode === "PIP"
-            ? "100%"
-            : screenWidth,
-        height: isModal
-          ? modalSize.height
-          : mode === "PIP"
-            ? "100%"
-            : screenHeight,
-      }) as ViewStyle,
-    [screenWidth, screenHeight, modalSize, isModal, mode]
-  );
+  const isOrientationReady = useWaitForValidOrientation();
+
+  const style = React.useMemo(() => {
+    const isFullScreenReady =
+      mode === "PIP" || (mode === "FULLSCREEN" && isOrientationReady);
+
+    const getDimensionValue = (value: string | number) => {
+      return isModal ? value : isFullScreenReady ? "100%" : 0; // do not show player, until full screen mode is ready
+    };
+
+    return {
+      width: getDimensionValue(modalSize.width),
+      height: getDimensionValue(modalSize.height),
+    } as ViewStyle;
+  }, [modalSize, isModal, mode, isOrientationReady]);
 
   const Component = playable?.Component;
 

package/Components/HandlePlayable/utils.ts

@@ -5,6 +5,14 @@ import {
 
 import { CHROMECAST_PLUGIN_ID, YOUTUBE_PLUGIN_ID } from "./const";
 import { omit } from "@applicaster/zapp-react-native-utils/utils";
+import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+
+const { Logger } = getXray();
+
+const logger = new Logger(
+  "QuickBrick",
+  "packages/zapp-react-native-ui-components/Components/HandlePlayable"
+);
 
 const getPlayerModuleProperties = (PlayerModule: ZappPlugin) => {
   if (PlayerModule?.Component && typeof PlayerModule.Component === "object") {
@@ -52,10 +60,25 @@ export const getPlayer = (
     if (type) {
       PlayerModule = findPluginByIdentifier(type, plugins)?.module;
 
+      if (!PlayerModule) {
+        logger.error({
+          message:
+            "PlayerModule is undefined – type mapping may be wrong or type not set for player",
+          data: {
+            type,
+            screen_id,
+            item_type_value: item?.type?.value,
+          },
+        });
+
+        return [null, {}];
+      }
+
       return getPlayerWithModuleProperties(PlayerModule);
     }
   }
 
+  // TODO: Probably should be removed, Youtube plugin is deprecated
   if (item?.content?.type === "youtube-id") {
     PlayerModule = findYoutubePlugin(plugins)?.module;
 
@@ -70,5 +93,13 @@ export const getPlayer = (
     )
   );
 
+  if (!PlayerModule) {
+    logger.error({
+      message: "PlayerModule is undefined – playable plugin not found",
+    });
+
+    return [null, {}];
+  }
+
   return getPlayerWithModuleProperties(PlayerModule);
 };