@applicaster/zapp-react-native-ui-components 12.0.0-rc.3 → 12.0.0-rc.31

package/Components/AnimatedInOut/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Animated, EasingFunction, StyleProp, ViewStyle } from "react-native";
-
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type AnimatedInterpolatedStyle =
@@ -35,11 +36,16 @@ function getAnimation(config: AnimatedInConfig, phase: "in" | "out") {
   return config[phase] || config;
 }
 
-export function AnimatedInOut(props: Props) {
-  const { visible, animationConfig, children } = props;
-
+export function AnimatedInOut({
+  visible,
+  animationConfig,
+  staticStyles = {},
+  children,
+}: Props) {
   const [animatedValue] = React.useState(new Animated.Value(visible ? 1 : 0));
-  const [animating, setAnimating] = React.useState(null);
+  const [animating, setAnimating] = React.useState(undefined);
+
+  const previousVisible = usePrevious(toBooleanWithDefaultFalse(visible));
 
   function startAnimation(toValue, config) {
     if (animating) {
@@ -55,7 +61,7 @@ export function AnimatedInOut(props: Props) {
       delay,
       useNativeDriver: true,
     }).start(() => {
-      setAnimating(null);
+      setAnimating(undefined);
       onAnimationEnd();
     });
 
@@ -63,12 +69,14 @@ export function AnimatedInOut(props: Props) {
   }
 
   React.useEffect(() => {
-    if (visible) {
+    if (!previousVisible && visible) {
       startAnimation(1.0, getAnimation(animationConfig, "in"));
-    } else {
+    }
+
+    if (previousVisible && !visible) {
       startAnimation(0.0, getAnimation(animationConfig, "out"));
     }
-  }, [visible, animating]);
+  }, [visible, previousVisible]);
 
   const styles = visible
     ? getAnimation(animationConfig, "in").styles
@@ -77,7 +85,7 @@ export function AnimatedInOut(props: Props) {
   return (
     <Animated.View
       renderToHardwareTextureAndroid={animating}
-      style={[styles(animatedValue), props?.staticStyles || {}]}
+      style={[styles(animatedValue), staticStyles]}
     >
       {children}
     </Animated.View>

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -23,6 +23,7 @@ type Props = {
       audio_player_summary_color?: string;
       audio_player_rtl?: boolean;
       magic_background?: boolean;
+      audio_player_background_image_query?: string;
       start_time?: string;
       end_time?: string;
     };
@@ -33,6 +34,7 @@ type Props = {
     audio_player_summary_color?: string;
     audio_player_rtl?: string;
     magic_background?: string;
+    audio_player_background_image_query?: string;
     audio_player_background_image?: string;
     audio_player_artwork_aspect_ratio?: string;
     lg_tv_audio_player_title_font_family?: string;
@@ -73,6 +75,11 @@ export function AudioPlayer(props: Props) {
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
     const magicBackground = getProp("magic_background");
+
+    const audioPlayerBackgroundImageQuery = getProp(
+      "audio_player_background_image_query"
+    );
+
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -149,7 +156,8 @@ export function AudioPlayer(props: Props) {
       runTimeFontSize,
       artworkAspectRatio,
       channelIcon,
-      magicBackground
+      magicBackground,
+      audioPlayerBackgroundImageQuery,
     };
   }, [getProp]);
 

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -5,6 +5,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
   config={
     Object {
       "artworkAspectRatio": "1:1",
+      "audioPlayerBackgroundImageQuery": "",
       "backgroundColor": "black",
       "backgroundImage": "https://example.com",
       "channelIcon": "https://example.com",
@@ -26,6 +27,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",
@@ -47,6 +49,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",
@@ -68,6 +71,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",
@@ -96,6 +100,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",

package/Components/AudioPlayer/helpers.tsx

@@ -5,6 +5,7 @@ const defaults = {
   audio_player_artwork_aspect_ratio: "1:1",
   audio_player_rtl: false,
   magic_background: false,
+  audio_player_background_image_query: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {

package/Components/ErrorScreen/index.tsx

@@ -3,7 +3,6 @@ import * as R from "ramda";
 import {
   View,
   StyleSheet,
-  Image,
   Text,
   ViewStyle,
   TextStyle,
@@ -13,6 +12,7 @@ import {
 import { defaultAsset } from "./defaultAsset";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 import { Button } from "./Button";
 
 type ButtonProp = {

package/Components/FocusableList/FocusableChild.ts

@@ -1,28 +1,38 @@
 import * as React from "react";
 import { isEqual } from "@applicaster/zapp-react-native-utils/equalUtils";
-import { FocusableContext } from "../Focusable/index.android";
+import { useFocusable } from "../Focusable/index.android";
 import { useCellState } from "./hooks/useCellState.android";
 
-function FocusableChildComponent(props) {
-  const context = React.useContext(FocusableContext);
-
-  const { setIsFocusable } = context || {};
-
-  const nextFocusDown = props.nextFocusDown ?? context.nextFocusDown;
-  const nextFocusUp = props.nextFocusUp ?? context.nextFocusUp;
-  const nextFocusRight = props.nextFocusRight ?? context.nextFocusRight;
-  const nextFocusLeft = props.nextFocusLeft ?? context.nextFocusLeft;
-
-  const parentFocus = React.useMemo(
+/**
+ * returns parent focus from prop or from context
+ * */
+const useParentFocus = (
+  { nextFocusDown, nextFocusUp, nextFocusRight, nextFocusLeft },
+  context
+) =>
+  React.useMemo(
     () => ({
+      nextFocusRight: nextFocusRight ?? context.nextFocusRight,
+      nextFocusDown: nextFocusDown ?? context.nextFocusDown,
+      nextFocusLeft: nextFocusLeft ?? context.nextFocusLeft,
+      nextFocusUp: nextFocusUp ?? context.nextFocusUp,
+    }),
+    [
       nextFocusRight,
       nextFocusDown,
       nextFocusLeft,
       nextFocusUp,
-    }),
-    [nextFocusRight, nextFocusDown, nextFocusLeft, nextFocusUp]
+      context.nextFocusLeft,
+      context.nextFocusRight,
+      context.nextFocusUp,
+      context.nextFocusDown,
+    ]
   );
 
+function FocusableChildComponent(props) {
+  const { setIsFocusable, ...focusableContext } = useFocusable();
+  const parentFocus = useParentFocus(props, focusableContext);
+
   const onLoadFailed = React.useCallback(() => {
     setIsFocusable(false);
   }, []);

package/Components/FocusableList/FocusableItem.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Focusable } from "../Focusable";
+import { Focusable } from "../Focusable/index.android";
 import { FocusableChild } from "./FocusableChild";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { IListRenderItem } from "./index";

package/Components/FocusableList/FocusableListItemWrapper.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { ListRenderItemInfo as IListRenderItemInfo } from "react-native";
+import { FocusableItem } from "./FocusableItem";
+
+export type IListRenderItem<ItemT> = (
+  info: IListRenderItemInfo<ItemT> & {
+    focused: boolean;
+    onLoadFinished: () => void;
+    onLoadFailed: () => void;
+  }
+) => React.ReactElement | null;
+
+type Item = ZappEntry | ZappUIComponent | any;
+
+type Props = {
+  item: Item;
+  onFocus: (
+    element: FocusManager.FocusableRef,
+    renderArgs: { item: Item; index: number },
+    direction: FocusManager.Android.FocusNavigationDirections
+  ) => void;
+  onListElementBlur?: (any, RenderItemProps, Direction) => void;
+  onListElementPress?: (any, RenderItemProps) => void;
+  onListElementLongPress?: (any, RenderItemProps) => void;
+  onListElementPressOut?: (any, RenderItemProps) => void;
+  focusableItemProps: any;
+  id: string;
+  index: number;
+  extraData: any;
+  extraChildrenData: any;
+  renderItem: IListRenderItem<any> | null | undefined;
+  getNextFocus: (index: number) => ParentFocus;
+} & ParentFocus;
+
+export const FocusableListItemWrapper = React.memo(
+  ({
+    onFocus,
+    onListElementBlur,
+    onListElementPress,
+    onListElementLongPress,
+    onListElementPressOut,
+    focusableItemProps,
+    id,
+    getNextFocus,
+    item,
+    index,
+    extraData,
+    extraChildrenData,
+    renderItem,
+  }: Props) => {
+    const nextFocus = getNextFocus(index);
+
+    return (
+      <FocusableItem
+        nextFocusDown={nextFocus.nextFocusDown}
+        nextFocusRight={nextFocus.nextFocusRight}
+        nextFocusLeft={nextFocus.nextFocusLeft}
+        nextFocusUp={nextFocus.nextFocusUp}
+        id={id}
+        focusableItemProps={focusableItemProps}
+        onFocus={onFocus}
+        item={item}
+        index={index}
+        renderItem={renderItem}
+        extraChildrenData={extraChildrenData}
+        extraData={extraData}
+        onListElementBlur={onListElementBlur}
+        onListElementPress={onListElementPress}
+        onListElementLongPress={onListElementLongPress}
+        onListElementPressOut={onListElementPressOut}
+      />
+    );
+  }
+);
+
+FocusableListItemWrapper.displayName = "FocusableListItemWrapper";

package/Components/FocusableList/hooks/useCellState.android.ts

@@ -5,7 +5,9 @@ import { useFocusManager } from "@applicaster/zapp-react-native-utils/focusManag
 export const useCellState = (id: string) => {
   const focusManager = useFocusManager();
 
-  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
+  const [currentCellFocused, setCurrentCellFocused] = React.useState(
+    focusManager.isFocused(id)
+  );
 
   React.useEffect(() => {
     const handler = (focusable) => {

package/Components/FocusableList/index.tsx

@@ -12,8 +12,9 @@ import { ChildrenFocusDeactivatorView } from "../ChildrenFocusDeactivatorView";
 import { useInitialFocus } from "@applicaster/zapp-react-native-utils/focusManager";
 
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { FocusableItem } from "./FocusableItem";
+
 import { useParentFocus, useCheckItemIdsForUnique } from "./hooks";
+import { FocusableListItemWrapper } from "./FocusableListItemWrapper";
 
 const mapIndexed = R.addIndex(R.map);
 
@@ -74,6 +75,8 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     nextFocusLeft: parentNextFocusLeft,
     nextFocusUp: parentNextFocusUp,
 
+    numColumns,
+
     focused: parentFocused,
 
     focusableItemProps,
@@ -103,8 +106,8 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     });
 
   const getFocusableEntryId = React.useCallback(
-    (_entry: ZappEntry, index?: number) => {
-      const entry = R.isNil(index) ? _entry : data[index];
+    (_entry: ZappEntry | null, index?: number) => {
+      const entry = R.isNil(index) ? _entry : data[index as number];
 
       return entry ? getFocusableId(props.id, index) : undefined;
     },
@@ -143,7 +146,6 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   const getNextFocus = React.useCallback(
     (index) => {
       const itemCount = R.length(data);
-      const { numColumns } = props;
 
       const getFocusableEntryIdForIndex = (entryIndex) =>
         getFocusableEntryId(null, entryIndex);
@@ -160,22 +162,23 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
       });
 
       const getGridFocus = () => {
-        const numberOfRows = Math.ceil(itemCount / numColumns);
-        const currentRowIndex = Math.floor(index / numColumns);
+        const _numColumns = toFiniteNumberWithDefault(1, numColumns);
+        const numberOfRows = Math.ceil(itemCount / _numColumns);
+        const currentRowIndex = Math.floor(index / _numColumns);
         const isFirstRow = currentRowIndex === 0;
         const isLastRow = currentRowIndex + 1 === numberOfRows;
-        const isLeftEdge = index % numColumns === 0;
+        const isLeftEdge = index % _numColumns === 0;
 
         const isRightEdge =
-          (index + 1) % numColumns === 0 || itemCount === index + 1;
+          (index + 1) % _numColumns === 0 || itemCount === index + 1;
 
         return {
           nextFocusUp: isFirstRow
             ? nextFocusUp
-            : getFocusableEntryIdForIndex(index - numColumns),
+            : getFocusableEntryIdForIndex(index - _numColumns),
           nextFocusDown: isLastRow
             ? nextFocusDown
-            : getFocusableEntryIdForIndex(index + numColumns),
+            : getFocusableEntryIdForIndex(index + _numColumns),
           nextFocusLeft: isLeftEdge
             ? nextFocusLeft
             : getFocusableEntryIdForIndex(index - 1),
@@ -215,26 +218,24 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   const renderItem = React.useCallback(
     ({ item, index }) => {
       const id = getFocusableId(props.id, index);
-      const nextFocus = getNextFocus(index);
 
       return (
-        <FocusableItem
-          nextFocusDown={nextFocus.nextFocusDown}
-          nextFocusRight={nextFocus.nextFocusRight}
-          nextFocusLeft={nextFocus.nextFocusLeft}
-          nextFocusUp={nextFocus.nextFocusUp}
-          id={id}
+        <FocusableListItemWrapper
+          {...{
+            onFocus,
+            onListElementBlur,
+            onListElementPress,
+            onListElementLongPress,
+            onListElementPressOut,
+          }}
+          renderItem={props.renderItem}
           focusableItemProps={focusableItemProps}
-          onFocus={onFocus}
+          getNextFocus={getNextFocus}
+          id={id}
           item={item}
           index={index}
-          renderItem={props.renderItem}
-          extraChildrenData={props.extraChildrenData}
           extraData={props.extraData}
-          onListElementBlur={onListElementBlur}
-          onListElementPress={onListElementPress}
-          onListElementLongPress={onListElementLongPress}
-          onListElementPressOut={onListElementPressOut}
+          extraChildrenData={props.extraChildrenData}
         />
       );
     },
@@ -287,7 +288,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const initialNumToRender = toFiniteNumberWithDefault(
-    data.length,
+    10,
     flatListProps.initialNumToRender
   );
 

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -52,13 +52,13 @@ export const GeneralContentScreen = ({
       React.useState(actionsInitialStateSetters.length === 0);
 
     useEffect(() => {
-      log_info(
-        `ScreenContainer: starting to check river action provider ready, current status: ${riverActionProvidersReady}`,
-        { actionsInitialStateSetters }
-      );
-
       if (!riverActionProvidersReady) {
         if (actionsInitialStateSetters.length > 0) {
+          log_info(
+            "ScreenContainer: starting to check river action providers to initialize",
+            { actionsInitialStateSetters }
+          );
+
           allSettled(actionsInitialStateSetters).finally(() => {
             log_info(
               "ScreenContainer: action provider ready, completed. Starting to present screen"
@@ -98,13 +98,16 @@ export const GeneralContentScreen = ({
 
   const isReady = useRiverActionProviderReady();
 
+  const contextValue = React.useMemo(
+    () => whenMatchingType(Function, cellTapAction) || onCellTapAction,
+    [typeof cellTapAction === "function" ? cellTapAction : onCellTapAction]
+  );
+
   if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
 
   return (
     <ScreenTrackedViewPositionsContext.Provider>
-      <CellTapContext.Provider
-        value={whenMatchingType(Function, cellTapAction) || onCellTapAction}
-      >
+      <CellTapContext.Provider value={contextValue}>
         <ComponentsMap
           feed={feed}
           riverId={screenId}

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -104,7 +104,7 @@ export function HandlePlayable({
   const [Player, playerModuleProperties] = getPlayer(item, state);
 
   const { module: CastPlugin } =
-    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins) || {};
+    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins, true) || {};
 
   const [playable, setPlayable] =
     React.useState<Nullable<PlayableComponent>>(null);

package/Components/HookRenderer/index.tsx

@@ -1,6 +1,3 @@
-import * as R from "ramda";
-
-import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator/";
 import { HookRenderer as HookRendererComponent } from "./HookRenderer";
 
-export const HookRenderer = R.compose(withNavigator)(HookRendererComponent);
+export const HookRenderer = HookRendererComponent;

package/Components/Image/Image.android.tsx

@@ -1,3 +1,12 @@
-import FastImage from "@applicaster/react-native-fast-image";
+import React from "react";
+import FastImage, {
+  FastImageProps,
+} from "@applicaster/react-native-fast-image";
 
-export const QBImage = FastImage;
+import { useImageSource } from "./utils";
+
+export const QBImage = (props: FastImageProps) => {
+  const source = useImageSource(props.source);
+
+  return <FastImage {...props} source={source} />;
+};

package/Components/Image/Image.tsx

@@ -1,8 +1,24 @@
-import { Image, ImageProps, ImageStyle, StyleProp } from "react-native";
+import React from "react";
+import {
+  Image,
+  ImageBackground,
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+} from "react-native";
 
 export interface Props extends ImageProps {
   style?: StyleProp<ImageStyle> | undefined;
 }
 
 // TODO - React.FC<Props> QBImage should process incoming url and apply any transformations if needed
-export const QBImage = Image;
+export const QBImage = ({
+  children,
+  ...props
+}: Props & { children?: React.ReactNode }) => {
+  if (children) {
+    return <ImageBackground {...props}>{children}</ImageBackground>;
+  }
+
+  return <Image {...props} />;
+};

package/Components/Image/utils/index.ts

@@ -0,0 +1,29 @@
+import { useMemo } from "react";
+
+export const useImageSource = (source) => {
+  return useMemo(() => {
+    if (typeof source === "number") {
+      return source;
+    }
+
+    return {
+      uri: source.uri,
+      headers: source.headers,
+      priority: source.priority,
+      cache: source.cache,
+      maxWidth: source.maxWidth,
+      maxHeight: source.maxHeight,
+    };
+  }, [
+    ...(typeof source === "object"
+      ? [
+          source?.uri,
+          source?.priority,
+          source?.cache,
+          source?.headers,
+          source?.maxWidth,
+          source?.maxHeight,
+        ]
+      : []),
+  ]);
+};

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

@@ -125,25 +125,4 @@ describe("Layout TV", () => {
       expect(bgComponent.props.testProp).toBe(true);
     });
   });
-
-  describe("props passed to navbar component", () => {
-    it("passes correct props", () => {
-      const { getByTestId } = render(
-        <Layout
-          Components={Components}
-          ComponentsExtraProps={{
-            NavBar: { testProp: true },
-          }}
-        >
-          <Screen />
-        </Layout>,
-        { wrapper }
-      );
-
-      const navbarComponent = getByTestId("nav-bar-component");
-      expect(navbarComponent.props.isVisible).toBe(isNavBarVisible);
-      expect(navbarComponent.props.menuPlugin).toBe(plugins[0]);
-      expect(navbarComponent.props.testProp).toBe(true);
-    });
-  });
 });