@applicaster/zapp-react-native-ui-components 12.0.0-rc.1 → 12.0.0-rc.100

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/BaseFocusable/index.tsx

@@ -66,14 +66,14 @@ export class BaseFocusable<
     const { initialFocus } = this.props;
 
     if (initialFocus) {
-      focusManager.setupInitialFocus(this.getId());
+      focusManager.setFocus(this.getId());
     }
   }
 
   getId(props?: { id: string; groupId: string }) {
-    const { id, groupId = null } = props || this.props;
+    const { id } = props || this.props;
 
-    return groupId ? `${groupId}-${id}` : id;
+    return id;
   }
 
   getRect() {

package/Components/Cell/Cell.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
+import { join, merge, path } from "ramda";
 import { View } from "react-native";
 
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
@@ -11,6 +11,7 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
   item: {
@@ -66,6 +67,10 @@ type Props = {
   behavior: Behavior;
 };
 
+type State = {
+  hasFocusableInside: boolean;
+};
+
 const baseCellStyles = {
   height: "100%",
   display: "flex",
@@ -77,7 +82,7 @@ const touchableStyles = {
   height: "100%",
 } as const;
 
-export class CellComponent extends React.Component<Props> {
+export class CellComponent extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -87,6 +92,10 @@ export class CellComponent extends React.Component<Props> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
+
+    this.state = {
+      hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
+    };
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -105,8 +114,8 @@ export class CellComponent extends React.Component<Props> {
       onPress(item, index);
     } else {
       const { item, navigator, component, appData } = this.props;
-      const itemTargetScreen = R.path(["screen_type"], item);
-      const componentTargetScreen = R.path(["data", "target"], component);
+      const itemTargetScreen = path(["screen_type"], item);
+      const componentTargetScreen = path(["data", "target"], component);
       const itemType = getItemType(item, appData?.layoutVersion);
 
       sendSelectCellEvent(item, component, item.title, index);
@@ -116,7 +125,7 @@ export class CellComponent extends React.Component<Props> {
         componentTargetScreen &&
         !itemTargetScreen
       ) {
-        navigator.push(R.merge(item, { screen_type: componentTargetScreen }));
+        navigator.push(merge(item, { screen_type: componentTargetScreen }));
 
         return;
       }
@@ -139,6 +148,10 @@ export class CellComponent extends React.Component<Props> {
         shouldScrollVertically?.(mouse, focusable, id, title)
       ) {
         this.scrollVertically(focusable);
+
+        const accessibilityManager = AccessibilityManager.getInstance();
+        // Text from DSP should be localized already
+        accessibilityManager.readText({ text: title });
       }
     }
   }
@@ -187,6 +200,16 @@ export class CellComponent extends React.Component<Props> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
+  componentDidUpdate(prevProps: Readonly<Props>) {
+    if (prevProps.item !== this.props.item) {
+      this.setState({
+        hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
+          this.props.item
+        ),
+      });
+    }
+  }
+
   render() {
     const {
       item,
@@ -202,12 +225,12 @@ export class CellComponent extends React.Component<Props> {
       groupId,
       isFocusable = true,
       skipFocusManagerRegistration,
-      behavior
+      behavior,
     } = this.props;
 
     const { id } = item;
 
-    const focusableId = R.join("-", [component?.id, id, index]);
+    const focusableId = join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;
@@ -215,9 +238,7 @@ export class CellComponent extends React.Component<Props> {
       this.onFocus(focusable, mouse);
     };
 
-    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
-
-    if (hasFocusableInside) {
+    if (this.state.hasFocusableInside) {
       return (
         <CellWithFocusable
           CellRenderer={CellRenderer}
@@ -263,7 +284,7 @@ export class CellComponent extends React.Component<Props> {
                   item,
                   focused: this.isCellFocused(focused),
                   scrollTo: this.scrollToIndex(event),
-                  behavior
+                  behavior,
                 }}
               />
             );

package/Components/Cell/CellWithFocusable.tsx

@@ -3,15 +3,25 @@ import * as React from "react";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
 import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
 
-const useCellFocusedState = (groupId: string, id: string) => {
+const useCellFocusedState = (
+  skipFocusManagerRegistration: boolean,
+  groupId: string,
+  id: string
+) => {
   const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
 
   React.useEffect(() => {
-    const isGroupItemFocused = () =>
-      setCurrentCellFocused(focusManager.isGroupItemFocused(groupId, id));
+    const isGroupItemFocused = () => {
+      if (!skipFocusManagerRegistration) {
+        const isFocused = focusManager.isGroupItemFocused(groupId, id);
+        setCurrentCellFocused(isFocused);
+      }
+    };
 
     const handler = () => {
       // tvOS hack for properly checking focus
@@ -29,24 +39,24 @@ const useCellFocusedState = (groupId: string, id: string) => {
     return () => {
       focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
     };
-  }, [groupId]);
+  }, [groupId, skipFocusManagerRegistration]);
 
   return currentCellFocused;
 };
 
 type Props = {
-  item: ZappEntry,
-  CellRenderer: React.ComponentType<{ item: Object, state: string }>,
-  id: string,
-  groupId: string,
-  onFocus: Function,
-  index: number,
-  scrollTo: Function,
-  preferredFocus?: boolean,
-  skipFocusManagerRegistration?: boolean,
-  isFocusable?: boolean,
-  behavior: Behavior,
-  selected?: boolean,
+  item: ZappEntry;
+  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  id: string;
+  groupId: string;
+  onFocus: Function;
+  index: number;
+  scrollTo: Function;
+  preferredFocus?: boolean;
+  skipFocusManagerRegistration?: boolean;
+  isFocusable?: boolean;
+  behavior: Behavior;
+  focused?: boolean;
 };
 
 export function CellWithFocusable(props: Props) {
@@ -62,11 +72,21 @@ export function CellWithFocusable(props: Props) {
     skipFocusManagerRegistration,
     isFocusable,
     behavior,
-    selected
+    focused,
   } = props;
 
-  const isFocused = useCellFocusedState(groupId, id);
-  const state = useCellState({ id: item.id, behavior, focused: isFocused, selected });
+  const isFocused = useCellFocusedState(
+    skipFocusManagerRegistration,
+    groupId,
+    id
+  );
+
+  const state = useCellState({
+    id: item.id,
+    behavior,
+    focused: isFocused || toBooleanWithDefaultFalse(focused),
+  });
+
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
 
   // for horizontal scrolling
@@ -95,6 +115,7 @@ export function CellWithFocusable(props: Props) {
       preferredFocus={preferredFocus}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
       isFocusable={isFocusable}
+      focused={focused}
     />
   );
 }

package/Components/Cell/TvOSCellComponent.tsx

@@ -226,13 +226,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
   hasReceivedFocus() {}
 
-  scrollTo(index) {
-    // Workaround for HL autoscroll/autoloop feature, we scroll manually on tvOS.
-    // Should be removed after refactoring autoscroll/autoloop feature
-    if (this.props.component?.component_type !== "horizontal_list_qb") {
-      this.props?.scrollToIndex?.(index);
-    }
-  }
+  scrollTo() {}
 
   render() {
     const {
@@ -249,7 +243,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       hasReceivedFocus,
       groupId,
       isFocusable,
-      behavior
+      behavior,
     } = this.props;
 
     const { id } = item;
@@ -279,7 +273,9 @@ export class TvOSCellComponent extends React.Component<Props, State> {
             index={index}
             scrollTo={this.scrollTo}
             preferredFocus={preferredFocus}
+            focused={this.props.focused}
             behavior={behavior}
+            isFocusable={isFocusable}
           />
         </View>
       );
@@ -310,7 +306,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
                   item,
                   focused: this.props.focused || selectedCell || focused,
                   scrollTo: this.scrollTo,
-                  behavior
+                  behavior,
                 }}
               />
             );

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/Focusable/Focusable.tsx

@@ -4,6 +4,7 @@ import * as R from "ramda";
 import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
+import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 
 type Props = {
   initialFocus?: boolean;
@@ -23,7 +24,7 @@ type Props = {
   style?: React.CSSProperties;
 };
 
-export class Focusable extends BaseFocusable<Props> {
+class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
@@ -198,3 +199,7 @@ export class Focusable extends BaseFocusable<Props> {
     );
   }
 }
+
+const FocusableWithFocusableContext = withFocusableContext(Focusable);
+
+export { FocusableWithFocusableContext as Focusable };

package/Components/FocusableCell/index.tsx

@@ -3,12 +3,12 @@ import { Platform } from "react-native";
 import { useCellState } from "../MasterCell/utils";
 
 type Props = {
-  index: number,
-  item: ZappEntry,
-  focused: boolean,
-  scrollTo?: (index: number) => void,
-  CellRenderer: React.ComponentType<{ item: Object, state: string }>,
-  behavior: Behavior
+  index: number;
+  item: ZappEntry;
+  focused: boolean;
+  scrollTo?: (index: number) => void;
+  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  behavior: Behavior;
 };
 
 const isAndroid = Platform.OS === "android";
@@ -20,7 +20,7 @@ export function FocusableCell(props: Props) {
     CellRenderer,
     focused,
     scrollTo = null,
-    behavior
+    behavior,
   } = props;
 
   const state = useCellState({ id: item.id, behavior, focused });

package/Components/FocusableGroup/index.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 
 import { BaseFocusable } from "../BaseFocusable";
+import { FocusableGroupContextProvider } from "../../Contexts/FocusableGroupContext";
+import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 
 type Props = {
   testID?: string;
@@ -26,9 +28,10 @@ type Props = {
   nextFocusLeft?: any;
   nextFocusRight?: any;
   onLayout?: any;
+  excludeFromFocusSearching?: boolean;
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroup extends BaseFocusable<Props> {
   constructor(props) {
     super(props);
     this.isGroup = true;
@@ -81,8 +84,14 @@ export class FocusableGroup extends BaseFocusable<Props> {
         style={style}
         ref={this.ref}
       >
-        {children}
+        <FocusableGroupContextProvider id={id}>
+          {children}
+        </FocusableGroupContextProvider>
       </div>
     );
   }
 }
+
+const FocusableGroupWithFocusableContext = withFocusableContext(FocusableGroup);
+
+export { FocusableGroupWithFocusableContext as FocusableGroup };

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";