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

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,22 +1,13 @@
 import * as React from "react";
-import {
-  useAppData,
-  useContentTypes,
-  usePlugins,
-} from "@applicaster/zapp-react-native-redux/hooks";
-import {
-  useDimensions,
-  useIsTablet as isTablet,
-  useNavigation,
-  useRivers,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 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,23 +22,18 @@ 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,
   mode,
   groupId,
 }: Props): React.ReactElement | null {
-  const plugins = usePlugins();
-  const contentTypes = useContentTypes();
-  const rivers = useRivers();
-  const appData = useAppData();
+  const { plugins, contentTypes, rivers, appData } = usePickFromState([
+    "plugins",
+    "contentTypes",
+    "rivers",
+    "appData",
+  ]);
 
   const { closeVideoModal } = useNavigation();
 
@@ -97,27 +83,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/HookRenderer/HookRenderer.tsx

@@ -6,7 +6,12 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useHookAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { PresentationType } from "../ScreenResolver";
+
+import { componentsLogger } from "../../Helpers/logger";
+
+const logger = componentsLogger.addSubsystem("HookRenderer");
+
+const HOOK_PRESENTATION_TYPE = "Hook";
 
 type Props = {
   focused?: boolean;
@@ -15,20 +20,17 @@ type Props = {
   callback: hookCallback;
 };
 
-export const HookRenderer = (props: Props) => {
-  const {
-    focused,
-    screenData: { payload, hookPlugin },
-    callback,
-  } = props;
-
-  const { setVisible: showNavBar } = useSetNavbarState();
+const HookRenderer = (props: Props) => {
+  const { focused, screenData, callback } = props;
+  const { payload, hookPlugin } = screenData;
 
   const {
     module: { Component: HookComponent, presentFullScreen },
     configuration,
   } = hookPlugin;
 
+  const { setVisible: showNavBar } = useSetNavbarState();
+
   useHookAnalytics(props);
 
   const isNavBarVisible = useIsNavBarVisible();
@@ -63,8 +65,36 @@ export const HookRenderer = (props: Props) => {
         hookPlugin,
         focused,
         parentFocus,
-        presentationType: PresentationType.Hook,
+        presentationType: HOOK_PRESENTATION_TYPE,
       }}
     />
   );
 };
+
+/**
+ * Guard component to prevent rendering HookRenderer when screenData or hookPlugin is missing. This is to avoid potential crashes due to missing data.
+ */
+const HookRendererGuard = (props: Props) => {
+  React.useEffect(() => {
+    if (!props.screenData) {
+      logger.error(
+        "HookRenderer received no screenData, screen cannot be rendered"
+      );
+    } else if (!props.screenData.hookPlugin) {
+      logger.error(
+        "HookRenderer received screenData with no hookPlugin, screen cannot be rendered",
+        {
+          screenData: props.screenData,
+        }
+      );
+    }
+  }, [props.screenData]);
+
+  if (!props.screenData || !props.screenData.hookPlugin) {
+    return null;
+  }
+
+  return <HookRenderer {...props} />;
+};
+
+export { HookRendererGuard as HookRenderer };

package/Components/HookRenderer/__tests__/HookRenderer.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { HookRenderer } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isTV: jest.fn(() => false),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useBackHandler: jest.fn(),
+  useIsNavBarVisible: jest.fn(() => true),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useHookAnalytics: jest.fn(),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useSetNavbarState: jest.fn(() => ({
+    setVisible: jest.fn(),
+  })),
+}));
+
+describe("HookRenderer", () => {
+  it("returns null when hookPlugin is missing", () => {
+    const { toJSON } = render(
+      <HookRenderer callback={jest.fn()} screenData={{ payload: {} } as any} />
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+
+  it("passes Hook presentationType to rendered hook component", () => {
+    const HookComponent = (props) => (
+      <View testID="hook-component" {...props} />
+    );
+
+    const { getByTestId } = render(
+      <HookRenderer
+        callback={jest.fn()}
+        screenData={{
+          payload: { foo: "bar" },
+          hookPlugin: {
+            module: {
+              Component: HookComponent,
+              presentFullScreen: false,
+            },
+            configuration: {},
+          },
+        }}
+      />
+    );
+
+    expect(getByTestId("hook-component").props.presentationType).toBe("Hook");
+  });
+});

package/Components/Layout/FullWidthRow.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row" },
+  basis: {
+    maxWidth: "100%",
+    flexBasis: "100%",
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * Constrains its child to exactly the available parent width.
+ *
+ * UI components such as Hero and List render their items inside a parent
+ * `ScrollView` (e.g. when wrapped by tabs). A child placed directly in a
+ * scroll container can size itself to its own content rather than to the
+ * viewport, which causes items to be measured at a stale width and resize
+ * unexpectedly after layout changes such as device rotation.
+ *
+ * Wrapping the content in a `flexDirection: "row"` parent with a
+ * `flexBasis: "100%"` / `maxWidth: "100%"` child forces the child to
+ * re-derive its width from the parent on every layout pass instead of
+ * caching a measured pixel width, keeping it full-width and stable.
+ *
+ * @param children - The content to render at full parent width.
+ */
+export function FullWidthRow({ children }: Props) {
+  return (
+    <View style={styles.row}>
+      <View style={styles.basis}>{children}</View>
+    </View>
+  );
+}

package/Components/Layout/TV/ScreenContainer.tsx

@@ -18,7 +18,7 @@ import {
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { NavBarContainer } from "./NavBarContainer";
 
 type ComponentsExtraProps = {
@@ -111,7 +111,11 @@ export const ScreenContainer = React.memo(function ScreenContainer({
   const { activeRiver } = navigator;
   const { title, visible } = useNavbarState();
 
-  const plugins = usePlugins();
+  const { plugins = [] } = usePickFromState([
+    "appState",
+    "remoteConfigurations",
+    "plugins",
+  ]);
 
   const navigationProps = getNavigationProps({
     navigator,
@@ -129,6 +133,11 @@ export const ScreenContainer = React.memo(function ScreenContainer({
     []
   );
 
+  // We need to render menu first and then proceed with screen content,
+  // otherwise screen will stay black until everything is loaded and screen
+  // rendering put huge load the CPU pushing rendering even further.
+  // With this approach, menu will be rendered immediately and screen content
+  // will be rendered after paint, which makes it more responsive and prevents black screen.
   const [navBarReady, setNavBarReady] = React.useState(false);
 
   const navBarContainer = (

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,13 +2,17 @@
 
 exports[`Layout TV renders 1`] = `
 <View
-  backgroundColor="#000000"
   testID="background-component"
 >
   <View
     excludeFromFocusSearching={true}
     id="/river/A1234"
     preferredFocus={true}
+    style={
+      {
+        "flex": 1,
+      }
+    }
   >
     <View
       Components={

package/Components/Layout/TV/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { LayoutContainer } from "./LayoutContainer";
@@ -9,8 +9,6 @@ import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
-import { LayoutBackground } from "./LayoutBackground";
-import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -30,7 +28,9 @@ type Props = {
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
 
-  const appReady = useAppSelector(selectAppReady);
+  const { appState: { appReady = false } = {} } = usePickFromState([
+    "appState",
+  ]);
 
   if (!appReady) {
     return null;
@@ -39,7 +39,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   return (
     <LayoutContainer>
       <ScreenLayoutContextProvider>
-        <LayoutBackground Background={Components.Background}>
+        <Components.Background>
           <ScreenDataContext.Provider value={navigator.data}>
             <PathnameContext.Provider value={navigator.currentRoute}>
               <ScreenContextProvider pathname={navigator.currentRoute}>
@@ -52,7 +52,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
               </ScreenContextProvider>
             </PathnameContext.Provider>
           </ScreenDataContext.Provider>
-        </LayoutBackground>
+        </Components.Background>
       </ScreenLayoutContextProvider>
     </LayoutContainer>
   );

package/Components/Layout/TV/index.web.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
+import { pathOr } from "ramda";
 
-import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
-import { LayoutBackground } from "./LayoutBackground";
-import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -17,7 +16,8 @@ type Props = {
 };
 
 const Layout = ({ Components }: Props) => {
-  const appReady = useAppSelector(selectAppReady);
+  const { appState } = usePickFromState(["appState"]);
+  const appReady = pathOr(false, ["appReady"], appState);
 
   if (!appReady) {
     return null;
@@ -25,9 +25,9 @@ const Layout = ({ Components }: Props) => {
 
   return (
     <ScreenLayoutContextProvider>
-      <LayoutBackground Background={Components.Background}>
+      <Components.Background>
         <StackNavigator Components={Components} />
-      </LayoutBackground>
+      </Components.Background>
     </ScreenLayoutContextProvider>
   );
 };

package/Components/LinkHandler/LinkHandler.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   inflateString,
   objectToReadableString,
@@ -40,7 +40,7 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const plugins = usePlugins();
+  const { plugins } = usePickFromState(["rivers", "plugins"]);
 
   const ScreenPlugin = findPluginByIdentifier(
     WEBVIEW_SCREEN_IDENTIFIER,

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -135,11 +135,17 @@ export const BorderContainerView = (props: Props) => {
 
   const isImageOnlyCell = useMemo(
     () =>
-      state === "focused" &&
+      !hasFocusableInside(entry) &&
       !hasTextLabels &&
-      !isMeasurement?.measuringInProgress &&
-      !hasFocusableInside(entry),
-    [entry, hasTextLabels, state, isMeasurement?.measuringInProgress]
+      state === "focused" &&
+      !isMeasurement?.measuringInProgress,
+    [
+      hasFocusableInside,
+      entry,
+      hasTextLabels,
+      state,
+      isMeasurement?.measuringInProgress,
+    ]
   );
 
   useEffect(() => {

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

@@ -32,7 +32,6 @@ export default function Image({
   placeholderImage,
   entry,
   withDimensions,
-  source: sourceProp,
   ...otherProps
 }: Props) {
   const [showDefault, setShowDefault] = React.useState(false);
@@ -49,10 +48,7 @@ export default function Image({
     entry,
     showDefault,
     placeholderImage: placeholderImage || "",
-    otherProps: {
-      source: sourceProp,
-      state: otherProps.state,
-    },
+    otherProps,
   });
 
   const onError = React.useCallback(() => {

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
+import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
-import { equals } from "@applicaster/zapp-react-native-utils/utils";
 
 type Source = {
   uri: string;
@@ -25,19 +25,11 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
-  source: sourceProp,
   ...otherProps
 }: Props) {
   const [error, setErrorState] = React.useState(null);
 
-  const source = useImageSource({
-    uri,
-    entry,
-    otherProps: {
-      source: sourceProp,
-      state: otherProps.state,
-    },
-  });
+  const source = useImageSource({ uri, entry, otherProps });
 
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
@@ -57,7 +49,7 @@ function Image({
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...otherProps}
+      {...omit(["source"], otherProps)}
     />
   );
 }

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

@@ -23,17 +23,9 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
-  source: sourceProp,
   ...otherProps
 }: Props) {
-  const source = useImageSource({
-    uri,
-    entry,
-    otherProps: {
-      source: sourceProp,
-      state: otherProps.state,
-    },
-  });
+  const source = useImageSource({ uri, entry, otherProps });
 
   const updatedSource = source ? withDimensions(source) : { uri: "" };
 

package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts

@@ -1,21 +1,19 @@
 import * as React from "react";
+import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
-type Source = { context?: string; uri?: string } | null | undefined;
 
-const getSourceContext = (source: Source) => source?.context;
-const getSourceUri = (source: Source) => source?.uri;
+const getSourceContext = path(["source", "context"]);
+const getSourceUri = path(["source", "uri"]);
+const getState = path(["state"]);
 
-export const useImageSource = ({
-  uri,
-  entry,
-  otherProps: { source, state: uriState },
-}): Return => {
-  const uriContext = getSourceContext(source);
+export const useImageSource = ({ uri, entry, otherProps }): Return => {
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 
@@ -40,7 +38,7 @@ export const useImageSource = ({
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(source);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -49,7 +47,7 @@ export const useImageSource = ({
   return null;
 };
 
-const getSource = (uri, showDefault, placeholderImage, source) => {
+const getSource = (uri, showDefault, placeholderImage, otherProps) => {
   const placeholderName = placeholderImage || "";
 
   const defaultPath = {
@@ -62,7 +60,7 @@ const getSource = (uri, showDefault, placeholderImage, source) => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(source);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -76,9 +74,10 @@ export const useImageSourceWithDefault = ({
   entry,
   showDefault,
   placeholderImage,
-  otherProps: { state: uriState, source },
+  otherProps,
 }): Return => {
-  const uriContext = getSourceContext(source);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 
@@ -99,5 +98,5 @@ export const useImageSourceWithDefault = ({
     return extractAsset(!isTV(), entryStateLocal.asset, uriState);
   }
 
-  return getSource(uri, showDefault, placeholderImage, source);
+  return getSource(uri, showDefault, placeholderImage, otherProps);
 };