@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 14.0.0-rc.90

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,17 +1,16 @@
 import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
-import { useDispatch } from "react-redux";
 
 import {
   useLayoutPresets,
-  useZappPipesFeeds,
-} from "@applicaster/zapp-react-native-redux/hooks";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 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 {
   ZappPipesEntryContext,
   ZappPipesScreenContext,
@@ -24,9 +23,13 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
 
 import { produce } from "immer";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 // types reference
 
-declare type CurationEntry = { preset_name: string; feed_url: string };
+declare interface CurationEntry {
+  preset_name: string;
+  feed_url: string;
+}
 
 type Feeds = Record<string, ZappPipesData>;
 
@@ -122,8 +125,6 @@ export const getFinalComponents = (
 export const useCurationAPI = (
   components: Array<ZappUIComponent>
 ): ZappUIComponent[] => {
-  const dispatch = useDispatch();
-
   const smartComponents = useMemo(
     () => components?.filter?.(isSmartComponent) ?? [],
     [components]
@@ -141,17 +142,15 @@ export const useCurationAPI = (
       const url = path(SOURCE_PATH, component);
       const mapping = path(MAPPING_PATH, component);
 
-      map[component.id] = mapping
-        ? getInflatedDataSourceUrl({
-            source: url,
-            contexts: {
-              entry: entryContext,
-              screen: screenContext,
-              search: getSearchContext(searchContext, mapping),
-            },
-            mapping,
-          })
-        : url;
+      map[component.id] = getInflatedDataSourceUrl({
+        source: url,
+        contexts: {
+          entry: entryContext,
+          screen: screenContext,
+          search: getSearchContext(searchContext, mapping),
+        },
+        mapping,
+      });
     });
 
     return map;
@@ -159,19 +158,21 @@ export const useCurationAPI = (
 
   const urls = useMemo<string[]>(() => Object.values(urlsMap), [urlsMap]);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   useEffect(() => {
     urls.forEach((url, index) => {
       if (url) {
-        dispatch(loadPipesData(url, { clearCache: false }));
+        loadPipesDataDispatcher(url, { clearCache: false });
       } else {
         logger.log_error("Curation url is empty", {
           componentId: smartComponents?.[index]?.id,
         });
       }
     });
-  }, [urls]);
+  }, [urls, loadPipesDataDispatcher]);
 
-  const feeds = useZappPipesFeeds(urls);
+  const feeds = useZappPipesFeed(urls);
   const layoutPresets = useLayoutPresets();
 
   const enrichedComponents = useMemo(() => {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,18 +1,17 @@
 import * as React from "react";
-import * as R from "ramda";
-import {
-  findPluginByType,
-  findPluginByIdentifier,
-} from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useDimensions,
+  useIsTablet as isTablet,
   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";
 
 type Props = {
   item: ZappEntry;
@@ -23,80 +22,40 @@ type Props = {
   groupId?: string;
 };
 
-const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
-const CHROMECAST_PLUGIN_ID = "chromecast_qb";
-
-const getPlayerWithModuleProperties = (
-  PlayerModule: ZappPlugin
-): [ZappPlugin, PlayerModuleProperties] => {
-  const getPlayerModuleProperties = R.ifElse(
-    R.is(Object) && R.has("Component"),
-    R.omit(["Component"]),
-    () => ({})
-  );
-
-  return [
-    PlayerModule?.Component || PlayerModule,
-    getPlayerModuleProperties(PlayerModule),
-  ];
-};
-
-const getPlayer = (
-  item: ZappEntry,
-  state
-): [ZappPlugin, PlayerModuleProperties] => {
-  const {
-    plugins,
-    contentTypes,
-    rivers,
-    appData: { layoutVersion },
-  } = state;
-
-  let PlayerModule;
-
-  if (layoutVersion === "v2") {
-    const { screen_id } = contentTypes?.[item?.type?.value] || {};
-    const { type } = rivers?.[screen_id] || {};
-
-    if (type) {
-      PlayerModule = findPluginByIdentifier(type, plugins)?.module;
-
-      return getPlayerWithModuleProperties(PlayerModule);
-    }
-  }
-
-  if (item?.content?.type === "youtube-id") {
-    PlayerModule = findPluginByIdentifier(YOUTUBE_PLUGIN_ID, plugins)?.module;
-
-    return getPlayerWithModuleProperties(PlayerModule);
-  }
-
-  PlayerModule = findPluginByType(
-    "playable",
-    plugins.filter(({ identifier }) => identifier !== YOUTUBE_PLUGIN_ID)
-  );
-
-  return getPlayerWithModuleProperties(PlayerModule);
-};
-
 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 state = usePickFromState();
+  const { plugins, contentTypes, rivers, appData } = usePickFromState([
+    "plugins",
+    "contentTypes",
+    "rivers",
+    "appData",
+  ]);
 
   const { closeVideoModal } = useNavigation();
 
-  const [Player, playerModuleProperties] = getPlayer(item, state);
+  const [Player, playerModuleProperties] = getPlayer(item, {
+    plugins,
+    contentTypes,
+    rivers,
+    appData,
+  });
 
-  const { module: CastPlugin } =
-    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins, true) || {};
+  const { module: CastPlugin } = findCastPlugin(plugins);
 
   const [playable, setPlayable] =
     React.useState<Nullable<PlayableComponent>>(null);
@@ -135,19 +94,25 @@ export function HandlePlayable({
     });
   }, [casting]);
 
-  const { width: screenWidth, height: screenHeight } = useDimensions("window");
+  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,
-    }),
+    () =>
+      ({
+        width: isModal
+          ? modalSize.width
+          : mode === "PIP"
+            ? "100%"
+            : screenWidth,
+        height: isModal
+          ? modalSize.height
+          : mode === "PIP"
+            ? "100%"
+            : screenHeight,
+      }) as ViewStyle,
     [screenWidth, screenHeight, modalSize, isModal, mode]
   );
 

package/Components/HandlePlayable/const.ts

@@ -0,0 +1,3 @@
+export const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
+
+export const CHROMECAST_PLUGIN_ID = "chromecast_qb";

package/Components/HandlePlayable/utils.ts

@@ -0,0 +1,74 @@
+import {
+  findPluginByIdentifier,
+  findPluginByType,
+} from "@applicaster/zapp-react-native-utils/pluginUtils";
+
+import { CHROMECAST_PLUGIN_ID, YOUTUBE_PLUGIN_ID } from "./const";
+import { omit } from "@applicaster/zapp-react-native-utils/utils";
+
+const getPlayerModuleProperties = (PlayerModule: ZappPlugin) => {
+  if (PlayerModule?.Component && typeof PlayerModule.Component === "object") {
+    return omit(["Component"], PlayerModule);
+  }
+
+  return {};
+};
+
+export const getPlayerWithModuleProperties = (
+  PlayerModule: ZappPlugin
+): [ZappPlugin, PlayerModuleProperties] => {
+  return [
+    PlayerModule?.Component || PlayerModule,
+    getPlayerModuleProperties(PlayerModule),
+  ];
+};
+
+export const findCastPlugin = (plugins: ZappPlugin[]) =>
+  findPluginByIdentifier(CHROMECAST_PLUGIN_ID, plugins, true) || {};
+
+export const findYoutubePlugin = (plugins: ZappPlugin[]) =>
+  findPluginByIdentifier(YOUTUBE_PLUGIN_ID, plugins, true) || {};
+
+export const getPlayer = (
+  item: ZappEntry,
+  {
+    plugins,
+    contentTypes,
+    rivers,
+    appData: { layoutVersion },
+  }: {
+    plugins: ZappPlugin[];
+    contentTypes: Record<string, any>;
+    rivers: Record<string, any>;
+    appData: { layoutVersion: string };
+  }
+): [ZappPlugin, PlayerModuleProperties] => {
+  let PlayerModule;
+
+  if (layoutVersion === "v2") {
+    const screen_id = contentTypes?.[item?.type?.value]?.screen_id;
+    const type = rivers?.[screen_id]?.type;
+
+    if (type) {
+      PlayerModule = findPluginByIdentifier(type, plugins)?.module;
+
+      return getPlayerWithModuleProperties(PlayerModule);
+    }
+  }
+
+  if (item?.content?.type === "youtube-id") {
+    PlayerModule = findYoutubePlugin(plugins)?.module;
+
+    return getPlayerWithModuleProperties(PlayerModule);
+  }
+
+  PlayerModule = findPluginByType(
+    "playable",
+    (plugins as any[]).filter(
+      ({ identifier }: { identifier: string }) =>
+        identifier !== YOUTUBE_PLUGIN_ID
+    )
+  );
+
+  return getPlayerWithModuleProperties(PlayerModule);
+};

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks/usePickFromState";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { getBackgroundImageUrl } from "../utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 

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

@@ -7,7 +7,6 @@ import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/
 import configureStore from "redux-mock-store";
 import Layout from "../index.web";
 
-// mock useTheme to provide app_background_color
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
   useTheme: () => ({
     app_background_color: "#000000",

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -23,6 +23,7 @@ type Props = {
   style: ViewStyle;
   testID?: string;
   accessibilityLabel?: string;
+  accessibilityHint?: string;
   cellUUID?: string;
   extraProps?: Record<string, any>;
 };
@@ -48,7 +49,9 @@ function getAssetValue(asset, flavour, fallbackAsset = null) {
   return asset.src || fallbackAsset;
 }
 
-export function ActionButton(props: Props) {
+export const ActionButton = React.memo(function ActionButtonComponent(
+  props: Props
+) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
 
@@ -98,6 +101,7 @@ export function ActionButton(props: Props) {
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityHint={props?.accessibilityHint}
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >
@@ -118,4 +122,4 @@ export function ActionButton(props: Props) {
       )}
     </TouchableOpacity>
   );
-}
+});

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -4,7 +4,7 @@ import * as R from "ramda";
 import { TouchableOpacity } from "react-native";
 // import { SvgUri } from "react-native-svg";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";

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

@@ -2,10 +2,8 @@ import React, { useMemo } from "react";
 import { ImageStyle } from "react-native";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 const { Logger } = getXray();
 
@@ -45,11 +43,6 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const actionContext = useActions(pluginIdentifier);
 
-  const accessibilityManager = useAccessibilityManager({});
-
-  const { ttsLabel = "" } =
-    actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
-
   const onPress = (event) => {
     event?.preventDefault?.();
 
@@ -67,39 +60,11 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
   const handleFocus = (focusable) => {
     const focusedButtonId = getFocusedButtonId(focusable);
 
-    wrapperRef?.current?.measure((x, y, width, height, pageX, pageY) => {
-      const top = pageY;
-      const bottom = top + height;
-      const left = pageX;
-      const right = left + width;
-
-      const boundingRect = {
-        x,
-        y,
-        pageX,
-        pageY,
-        width,
-        height,
-        top,
-        bottom,
-        left,
-        right,
-      };
-
-      otherProps?.onToggleFocus?.({
-        focusable: {
-          getRect: R.always(boundingRect),
-        },
-        focusedButtonId,
-        mouse: focusable.mouse,
-      });
+    otherProps?.onToggleFocus?.({
+      focusable: wrapperRef.current,
+      focusedButtonId,
+      mouse: focusable.mouse,
     });
-
-    if (ttsLabel) {
-      accessibilityManager.readText({
-        text: ttsLabel,
-      });
-    }
   };
 
   const handleBlur = (_focusable, _direction) => {

package/Components/MasterCell/DefaultComponents/Image/hoc/withDimensions.tsx

@@ -20,7 +20,7 @@ const withAppliedDimensions = (style: Style) => (source: Source) => ({
 });
 
 export const withDimensionsHOC = (Component) => {
-  return function WithDimensions(props: { style: any }) {
+  return function WithDimensions(props: Record<string, unknown>) {
     const theme = useTheme<BaseThemePropertiesMobile>();
 
     const useDownScalingImages = toBooleanWithDefaultFalse(

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

@@ -13,7 +13,7 @@ export const ImageContainer = (props: Props) => {
   const isActive = useIsScreenActive();
 
   const Component =
-    isVideoPreviewEnabled(props) && isActive ? LiveImage : PureImage;
+    isVideoPreviewEnabled(props as Props) && isActive ? LiveImage : PureImage;
 
   return <Component {...props} />;
 };

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

@@ -28,17 +28,10 @@ interface Props {
   onAsyncRender: () => void;
 }
 
-const SecondaryImageComponent = (props: Props) => {
-  const {
-    uri,
-    style,
-    displayMode,
-    imageSizing,
-    fitPosition,
-    fixedHeight,
-    fixedWidth,
-    onAsyncRender,
-  } = props;
+/** Secondary Image Dynamic does not render until the image is loaded */
+const SecondaryImageDynamic = (props: Props) => {
+  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+    props;
 
   const imageDimension = useGetImageDimensions(
     uri,
@@ -46,13 +39,9 @@ const SecondaryImageComponent = (props: Props) => {
     isImageSizingFit(imageSizing) ? undefined : (style.height as number)
   );
 
-  const containerHeight = isDisplayModeFixed(displayMode)
-    ? fixedHeight
-    : imageDimension?.height;
+  const containerHeight = imageDimension?.height;
 
-  const containerWidth = isDisplayModeFixed(displayMode)
-    ? fixedWidth
-    : style?.width;
+  const containerWidth = style?.width;
 
   if (isNil(imageDimension?.aspectRatio)) {
     return null;
@@ -80,4 +69,63 @@ const SecondaryImageComponent = (props: Props) => {
   );
 };
 
+/** Secondary Image Fixed does not render  the image until the image is loaded, but keep container rendered */
+const SecondaryImageFixed = (props: Props) => {
+  const {
+    uri,
+    style,
+    displayMode,
+    imageSizing,
+    fitPosition,
+    fixedHeight,
+    fixedWidth,
+    onAsyncRender,
+  } = props;
+
+  const imageDimension = useGetImageDimensions(
+    uri,
+    style.width as number,
+    isImageSizingFit(imageSizing) ? undefined : (style.height as number)
+  );
+
+  return (
+    <View style={style} onLayout={onAsyncRender}>
+      {isNil(imageDimension?.aspectRatio) ? null : (
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight: fixedHeight,
+              containerWidth: fixedWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+const SecondaryImageComponent = (props: Props) => {
+  const { uri, displayMode } = props;
+
+  if (!uri) {
+    return null;
+  }
+
+  const isFixed = isDisplayModeFixed(displayMode);
+
+  return isFixed ? (
+    <SecondaryImageFixed {...props} />
+  ) : (
+    <SecondaryImageDynamic {...props} />
+  );
+};
+
 export const SecondaryImage = withAsyncRenderHOC(SecondaryImageComponent);

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

@@ -4,9 +4,26 @@ import { render } from "@testing-library/react-native";
 import { SecondaryImage } from "../Image";
 
 describe("SecondaryImage - Image", () => {
-  it("SecondaryImage should not render if no aspect ratio", async () => {
+  it("SecondaryImage should not render if no uri", async () => {
     const wrapper = await render(
-      <SecondaryImage uri="" style={{ width: 100 }} />
+      <SecondaryImage
+        displayMode="dynamic"
+        uri={undefined}
+        style={{ width: 100 }}
+      />
+    );
+
+    expect(wrapper.toJSON()).toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should not render if no aspect ratio (dynamic)", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="dynamic"
+        uri="someurl"
+        style={{ width: 100 }}
+      />
     );
 
     expect(wrapper.toJSON()).toEqual(null);
@@ -16,7 +33,8 @@ describe("SecondaryImage - Image", () => {
   it("SecondaryImage should render if known dimensions", async () => {
     const wrapper = await render(
       <SecondaryImage
-        uri=""
+        uri="someUrl"
+        displayMode="dynamic"
         style={{ width: 100, height: 100, borderRadius: 10 }}
       />
     );

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

@@ -1,6 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio 1`] = `null`;
+exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio (dynamic) 1`] = `null`;
+
+exports[`SecondaryImage - Image SecondaryImage should not render if no uri 1`] = `null`;
 
 exports[`SecondaryImage - Image SecondaryImage should render if known dimensions 1`] = `
 <View
@@ -14,10 +16,11 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   }
 >
   <Image
+    displayMode="dynamic"
     onAsyncRender={[Function]}
     source={
       {
-        "uri": "",
+        "uri": "someUrl",
       }
     }
     style={
@@ -28,7 +31,7 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
         "width": 100,
       }
     }
-    uri=""
+    uri="someUrl"
   />
 </View>
 `;