@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 15.1.0-alpha.1852552014

package/Components/BackgroundImage/BackgroundImage.tv.android.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import {
+  View,
+  StyleSheet,
+  ImageURISource,
+  ImageBackground,
+} from "react-native";
+
+import { ASSETS } from "@applicaster/zapp-react-native-ui-components/Helpers";
+
+const imageSource: ImageURISource = {
+  uri: ASSETS.APP_BACKGROUND_IMAGE,
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  backgroundImage: { width: "100%", height: "100%" },
+});
+
+export function BackgroundImage({ children }: React.PropsWithChildren) {
+  return (
+    <View style={styles.container}>
+      <ImageBackground style={styles.backgroundImage} source={imageSource}>
+        {children}
+      </ImageBackground>
+    </View>
+  );
+}

package/Components/BackgroundImage/BackgroundImage.tv.ios.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { View, StyleSheet, ImageURISource } from "react-native";
+
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+import { ASSETS } from "@applicaster/zapp-react-native-ui-components/Helpers";
+
+const imageSource: ImageURISource = {
+  uri: ASSETS.APP_BACKGROUND_IMAGE,
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  backgroundImage: { width: "100%", height: "100%" },
+});
+
+export function BackgroundImage({ children }: React.PropsWithChildren) {
+  return (
+    <View style={styles.container}>
+      <Image style={styles.backgroundImage} source={imageSource}>
+        {children}
+      </Image>
+    </View>
+  );
+}

package/Components/BackgroundImage/BackgroundImage.tv.web.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { View, ViewStyle } from "react-native";
+
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import {
+  selectRemoteConfigurations,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+
+import { getBackgroundImageUrl } from "../Layout/utils";
+
+const baseBackgroundStyles = (imageUrl, backgroundColor) =>
+  ({
+    position: "absolute",
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    backgroundSize: "cover",
+    background: imageUrl
+      ? `url(${imageUrl}) no-repeat top center ${backgroundColor}`
+      : backgroundColor,
+  }) as ViewStyle;
+
+export const BackgroundImage = ({ children }: React.PropsWithChildren) => {
+  const theme = useTheme();
+
+  const remoteConfigurations = useAppSelector(selectRemoteConfigurations);
+
+  const backgroundColor = theme.app_background_color;
+  const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);
+
+  return (
+    <View
+      id="background"
+      style={baseBackgroundStyles(backgroundImageUrl, backgroundColor)}
+    >
+      {children}
+    </View>
+  );
+};

package/Components/BackgroundImage/index.ts

@@ -0,0 +1,8 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+export const BackgroundImage = platformSelect({
+  tvos: require("./BackgroundImage.tv.ios").BackgroundImage,
+  android_tv: require("./BackgroundImage.tv.android").BackgroundImage,
+  amazon: require("./BackgroundImage.tv.android").BackgroundImage,
+  web: require("./BackgroundImage.tv.web").BackgroundImage,
+});

package/Components/BaseFocusable/index.ios.ts

@@ -22,7 +22,6 @@ type Props = {
   onFocus?: FocusManager.FocusEventCB;
   onBlur?: FocusManager.FocusEventCB;
   selected?: boolean;
-  skipFocusManagerRegistration?: boolean;
 };
 
 export class BaseFocusable<
@@ -62,14 +61,10 @@ export class BaseFocusable<
   }
 
   componentDidMount() {
-    const { id, skipFocusManagerRegistration } = this.props;
+    const { id } = this.props;
     const component = this;
     this.node = this.ref.current;
 
-    if (skipFocusManagerRegistration) {
-      return;
-    }
-
     focusManager.register({
       id,
       component: component,
@@ -123,12 +118,7 @@ export class BaseFocusable<
 
   componentWillUnmount() {
     this._isMounted = false;
-    const { id, skipFocusManagerRegistration } = this.props;
-
-    if (skipFocusManagerRegistration) {
-      return;
-    }
-
+    const { id } = this.props;
     focusManager.unregister(id, { group: this.isGroup || false });
   }
 

package/Components/Cell/FocusableWrapper.tsx

@@ -10,7 +10,6 @@ type Props = {
   children: (focused: boolean) => React.ReactNode;
   onFocus: (arg1: any, index?: number) => void;
   onBlur: Callback;
-  skipFocusManagerRegistration?: boolean;
 };
 
 export const FocusableWrapper = ({
@@ -21,7 +20,6 @@ export const FocusableWrapper = ({
   applyWrapper,
   onFocus,
   onBlur,
-  skipFocusManagerRegistration,
 }: Props) => {
   if (applyWrapper) {
     return (
@@ -36,7 +34,6 @@ export const FocusableWrapper = ({
         // @ts-ignore
         offsetUpdater={noop}
         isFocusable
-        skipFocusManagerRegistration={skipFocusManagerRegistration}
       >
         {(focused) => children(focused)}
       </Focusable>

package/Components/Cell/TvOSCellComponent.tsx

@@ -80,7 +80,6 @@ type Props = {
   componentsMapOffset: number;
   applyFocusableWrapper: boolean;
   hasFocusableInside: boolean;
-  skipFocusManagerRegistration?: boolean;
 };
 
 type State = {
@@ -267,7 +266,6 @@ class TvOSCell extends React.Component<Props, State> {
       behavior,
       applyFocusableWrapper,
       hasFocusableInside,
-      skipFocusManagerRegistration,
     } = this.props;
 
     const { id } = item;
@@ -293,7 +291,6 @@ class TvOSCell extends React.Component<Props, State> {
             onFocus={handleFocus}
             onBlur={onBlur || this.onBlur}
             applyWrapper={applyFocusableWrapper}
-            skipFocusManagerRegistration={skipFocusManagerRegistration}
           >
             {(focused) => (
               <CellWithFocusable
@@ -308,7 +305,6 @@ class TvOSCell extends React.Component<Props, State> {
                 focused={focused || this.props.focused}
                 behavior={behavior}
                 isFocusable={isFocusable}
-                skipFocusManagerRegistration={skipFocusManagerRegistration}
               />
             )}
           </FocusableWrapper>
@@ -331,7 +327,6 @@ class TvOSCell extends React.Component<Props, State> {
           offsetUpdater={offsetUpdater}
           style={baseCellStyles}
           isFocusable={isFocusable}
-          skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused) => (
             <FocusableCell

package/Components/CellRendererResolver/index.ts

@@ -83,7 +83,7 @@ export function CellRendererResolver({
 
   if (!cellRendererPlugin && !isGroup(component)) {
     logger.warning({
-      message: "Could not resolve cell builder plugin",
+      message: `Could not resolve cell builder plugin: ${component?.component_type}`,
       data: { component },
     });
   }

package/Components/ComponentResolver/__tests__/componentResolver.test.js

@@ -107,7 +107,7 @@ describe("ComponentResolverComponent", () => {
     expect(mockLogger.warning).toHaveBeenNthCalledWith(
       1,
       expect.objectContaining({
-        message: "Could not resolve cell builder plugin",
+        message: "Could not resolve cell builder plugin: foo",
       })
     );
 

package/Components/Focusable/Focusable.tsx

@@ -8,8 +8,6 @@ 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;
@@ -108,7 +106,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (!isSearchInputId(id)) {
+    if (id !== "search_input_group_id") {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -122,7 +120,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (!isSearchInputId(id)) {
+    if (id !== "search_input_group_id") {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,12 +10,8 @@ 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";
 
-import {
-  emitFocused,
-  emitNativeRegistered,
-} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+function noop() {}
 
 type Props = {
   id: string;
@@ -43,7 +39,6 @@ type Props = {
   hasReceivedFocus: () => void;
   offsetUpdater: (arg1: string, arg2: number) => number;
   style: ViewStyle;
-  skipFocusManagerRegistration?: boolean;
 };
 
 export class Focusable extends BaseFocusable<Props> {
@@ -58,7 +53,6 @@ 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);
   }
 
   /**
@@ -90,9 +84,6 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
-    const id: string = nativeEvent.itemID;
-    emitFocused(id);
-
     onFocus(nativeEvent);
   }
 
@@ -178,13 +169,6 @@ export class Focusable extends BaseFocusable<Props> {
     });
   }
 
-  onRegistered({ nativeEvent }) {
-    const groupId = nativeEvent?.groupId;
-    const id = nativeEvent?.itemId;
-
-    emitNativeRegistered({ id, groupId, isGroup: false });
-  }
-
   render() {
     const {
       children,
@@ -219,7 +203,6 @@ 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,7 +5,6 @@ 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

@@ -1,16 +1,14 @@
 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";
+// TODO: Enable when will be feature flags
+// import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-const { log_verbose } = createLogger({
-  subsystem: "General",
-  category: "FocusableGroup",
-});
+// TODO: Enable when will be feature flags
+// const { log_verbose } = createLogger({
+//   subsystem: "General",
+//   category: "FocusableGroup",
+// });
 
 type FocusableGroupNativeEvent = {
   nativeEvent: {
@@ -37,16 +35,9 @@ type Props = {
   screenData: { screenId: string; parentScreenId: string };
 };
 
-class FocusableGroupComponent extends BaseFocusable<Props> {
+export class FocusableGroup 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,
@@ -59,12 +50,14 @@ class FocusableGroupComponent extends BaseFocusable<Props> {
     } = this.props;
 
     const onGroupFocus = ({ nativeEvent }: FocusableGroupNativeEvent) => {
-      log_verbose("FOCUSABLE_GROUP: onGroupFocus", { nativeEvent });
+      // TODO: Enable when will be feature flags
+      // log_verbose("FOCUSABLE_GROUP: onGroupFocus", { nativeEvent });
       this.onFocus(this.ref, nativeEvent.focusHeading);
     };
 
     const onGroupBlur = ({ nativeEvent }: FocusableGroupNativeEvent) => {
-      log_verbose("FOCUSABLE_GROUP: onGroupBlur", { nativeEvent });
+      // TODO: Enable when will be feature flags
+      // log_verbose("FOCUSABLE_GROUP: onGroupBlur", { nativeEvent });
       this.onBlur(this.ref, nativeEvent.focusHeading);
     };
 
@@ -79,27 +72,9 @@ class FocusableGroupComponent 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-native";
+import { renderHook } from "@testing-library/react-hooks";
 
 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;
+};