@applicaster/zapp-react-native-ui-components 15.0.0-alpha.2004137882 → 15.0.0-alpha.2120060090

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,9 +10,13 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
-import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
+import {
+  emitFocused,
+  emitNativeRegistered,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+
 type Props = {
   id: string;
   groupId: 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);
   }
 

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -2,6 +2,9 @@ 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({
@@ -34,15 +37,15 @@ 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 }) {
+  onRegistered = ({ nativeEvent }) => {
     const groupId = nativeEvent?.groupId;
     const id = nativeEvent?.itemId;
 
     emitNativeRegistered({ id, groupId, isGroup: true });
-  }
+  };
 
   render() {
     const {
@@ -83,3 +86,20 @@ export class FocusableGroup extends BaseFocusable<Props> {
     );
   }
 }
+
+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/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/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 {
@@ -35,6 +35,8 @@ 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"];
@@ -53,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;
   }
@@ -130,11 +135,22 @@ export const useCurationAPI = (
     [components]
   );
 
-  const { pathname } = useRoute();
-  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
+  const screenContextType = screenContext?.type;
+
+  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);
 };

package/Components/MasterCell/DefaultComponents/SecondaryImage/Image.tsx

@@ -3,8 +3,8 @@ import { isNil } from "ramda";
 import { ImageStyle, View } from "react-native";
 import {
   FIT_POSITION,
-  IMAGE_SIZING_FIT,
   IMAGE_SIZING_FILL,
+  IMAGE_SIZING_FIT,
 } from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
 import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
@@ -25,49 +25,51 @@ interface Props {
   fitPosition: typeof FIT_POSITION;
   fixedWidth: number;
   fixedHeight: number;
-  onAsyncRender: () => void;
+  onAsyncRender?: () => void;
 }
 
 /** Secondary Image Dynamic does not render until the image is loaded */
-const SecondaryImageDynamic = (props: Props) => {
-  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
-    props;
+const SecondaryImageDynamic = withAsyncRenderHOC(
+  (props: Props & { onAsyncRender: () => void }) => {
+    const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+      props;
 
-  const imageDimension = useGetImageDimensions(
-    uri,
-    style.width as number,
-    isImageSizingFit(imageSizing) ? undefined : (style.height as number)
-  );
+    const imageDimension = useGetImageDimensions(
+      uri,
+      style.width as number,
+      isImageSizingFit(imageSizing) ? undefined : (style.height as number)
+    );
 
-  const containerHeight = imageDimension?.height;
+    const containerHeight = imageDimension?.height;
 
-  const containerWidth = style?.width;
+    const containerWidth = style?.width;
 
-  if (isNil(imageDimension?.aspectRatio)) {
-    return null;
-  }
+    if (isNil(imageDimension?.aspectRatio)) {
+      return null;
+    }
 
-  return (
-    <View style={style} onLayout={onAsyncRender}>
-      <Image
-        {...props}
-        source={{ uri }}
-        style={{
-          ...getStyle({
-            imageSizing,
-            fitPosition,
-            displayMode,
-            imageDimension,
-            containerHeight,
-            containerWidth,
-          }),
-          borderRadius: style.borderRadius,
-          aspectRatio: imageDimension.aspectRatio,
-        }}
-      />
-    </View>
-  );
-};
+    return (
+      <View style={style} onLayout={onAsyncRender}>
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight,
+              containerWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      </View>
+    );
+  }
+);
 
 /** Secondary Image Fixed does not render  the image until the image is loaded, but keep container rendered */
 const SecondaryImageFixed = (props: Props) => {
@@ -79,7 +81,6 @@ const SecondaryImageFixed = (props: Props) => {
     fitPosition,
     fixedHeight,
     fixedWidth,
-    onAsyncRender,
   } = props;
 
   const imageDimension = useGetImageDimensions(
@@ -89,7 +90,7 @@ const SecondaryImageFixed = (props: Props) => {
   );
 
   return (
-    <View style={style} onLayout={onAsyncRender}>
+    <View style={style}>
       {isNil(imageDimension?.aspectRatio) ? null : (
         <Image
           {...props}
@@ -128,4 +129,4 @@ const SecondaryImageComponent = (props: Props) => {
   );
 };
 
-export const SecondaryImage = withAsyncRenderHOC(SecondaryImageComponent);
+export const SecondaryImage = SecondaryImageComponent;

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/Image.test.tsx

@@ -10,6 +10,10 @@ describe("SecondaryImage - Image", () => {
         displayMode="dynamic"
         uri={undefined}
         style={{ width: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
       />
     );
 
@@ -23,6 +27,10 @@ describe("SecondaryImage - Image", () => {
         displayMode="dynamic"
         uri="someurl"
         style={{ width: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
       />
     );
 
@@ -36,6 +44,93 @@ describe("SecondaryImage - Image", () => {
         uri="someUrl"
         displayMode="dynamic"
         style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should render in fixed mode without image until loaded", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="fixed"
+        uri="someurl"
+        style={{ width: 100, height: 100, borderRadius: 5 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should not render in dynamic mode without image", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="dynamic"
+        uri={null}
+        style={{ width: 100, height: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should render in fixed mode with known dimensions", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="fixed"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage dynamic mode should call onAsyncRender when provided", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="dynamic"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+  });
+
+  it("SecondaryImage fixed mode should not use async render props", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="fixed"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
       />
     );