@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5351122050 → 14.0.0-alpha.5365702091

package/Components/Cell/Cell.tsx

@@ -8,6 +8,7 @@ import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { CellFocusedStateContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
 
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
@@ -15,6 +16,7 @@ import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUt
 import { styles } from "./styles";
 
 type Props = {
+  dataLength: number;
   item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
@@ -67,9 +69,12 @@ type Props = {
 
 type State = {
   hasFocusableInside: boolean;
+  cellFocused: boolean;
 };
 
 export class CellComponent extends React.Component<Props, State> {
+  accessibilityManager: AccessibilityManager;
+
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -79,10 +84,14 @@ export class CellComponent extends React.Component<Props, State> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
+    this.handleAccessibilityFocus = this.handleAccessibilityFocus.bind(this);
 
     this.state = {
       hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
+      cellFocused: false,
     };
+
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -130,6 +139,8 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     if (isFocusable) {
+      this.setState({ cellFocused: true });
+
       if (
         shouldUpdate &&
         shouldScrollVertically?.(mouse, focusable, id, title)
@@ -139,7 +150,9 @@ export class CellComponent extends React.Component<Props, State> {
     }
   }
 
-  onBlur() {}
+  onBlur() {
+    this.setState({ cellFocused: false });
+  }
 
   willReceiveFocus() {}
 
@@ -183,6 +196,25 @@ export class CellComponent extends React.Component<Props, State> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
+  handleAccessibilityFocus(index, dataLength) {
+    // For loop scrolling, calculate the correct logical index
+    const logicalIndex = dataLength ? index % dataLength : index;
+
+    const positionLabel = dataLength
+      ? `item ${logicalIndex + 1} of ${dataLength}`
+      : "";
+
+    if (this.state.hasFocusableInside) {
+      this.accessibilityManager.readText({
+        text: " ",
+      });
+    } else {
+      this.accessibilityManager.readText({
+        text: `${positionLabel}`,
+      });
+    }
+  }
+
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
@@ -191,6 +223,8 @@ export class CellComponent extends React.Component<Props, State> {
         ),
       });
     }
+
+    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
   }
 
   render() {
@@ -212,7 +246,6 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     const { id } = item;
-
     const focusableId = join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
@@ -223,73 +256,67 @@ export class CellComponent extends React.Component<Props, State> {
 
     if (this.state.hasFocusableInside) {
       return (
-        <CellWithFocusable
-          CellRenderer={CellRenderer}
-          item={item}
-          id={focusableId}
-          groupId={groupId || component?.id}
-          onFocus={handleFocus}
-          index={index}
-          scrollTo={this.scrollToIndex()}
-          isFocusable={isFocusable}
-          skipFocusManagerRegistration={skipFocusManagerRegistration}
-          behavior={behavior}
-        />
+        <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
+          <CellWithFocusable
+            CellRenderer={CellRenderer}
+            item={item}
+            id={focusableId}
+            groupId={groupId || component?.id}
+            onFocus={handleFocus}
+            onBlur={onBlur || this.onBlur}
+            index={index}
+            scrollTo={this.scrollToIndex()}
+            isFocusable={isFocusable}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
+            behavior={behavior}
+          />
+        </CellFocusedStateContextProvider>
       );
     }
 
     return (
-      <View
-        testID={`${component?.id}-${id}`}
-        accessible={false}
-        style={styles.touchableCell}
-      >
-        <Focusable
-          id={focusableId}
-          groupId={groupId || component?.id}
-          onFocus={handleFocus}
-          onBlur={onBlur || this.onBlur}
-          onPress={this.onPress}
-          willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
-          hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
-          preferredFocus={preferredFocus}
-          offsetUpdater={offsetUpdater}
-          style={styles.baseCell}
-          isFocusable={isFocusable}
-          skipFocusManagerRegistration={skipFocusManagerRegistration}
+      <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
+        <View
+          testID={`${component?.id}-${id}`}
+          accessible={false}
+          style={styles.touchableCell}
         >
-          {(focused, event) => {
-            const isFocused = this.isCellFocused(focused);
-
-            if (isFocused) {
-              const accessibilityManager = AccessibilityManager.getInstance();
-
-              const accessibilityTitle =
-                item?.extensions?.accessibility?.label || item?.title || "";
-
-              const accessibilityHint =
-                item?.extensions?.accessibility?.hint || "";
-
-              accessibilityManager.readText({
-                text: `${accessibilityTitle} ${accessibilityHint}`,
-              });
-            }
-
-            return (
-              <FocusableCell
-                {...{
-                  index,
-                  CellRenderer,
-                  item,
-                  focused: isFocused,
-                  scrollTo: this.scrollToIndex(event),
-                  behavior,
-                }}
-              />
-            );
-          }}
-        </Focusable>
-      </View>
+          <Focusable
+            id={focusableId}
+            groupId={groupId || component?.id}
+            onFocus={handleFocus}
+            onBlur={onBlur || this.onBlur}
+            onPress={this.onPress}
+            willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
+            hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
+            preferredFocus={preferredFocus}
+            offsetUpdater={offsetUpdater}
+            style={styles.baseCell}
+            isFocusable={isFocusable}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
+            {...this.accessibilityManager.getButtonAccessibilityProps(
+              item?.extensions?.accessibility?.label || item?.title
+            )}
+          >
+            {(focused, event) => {
+              const isFocused = this.isCellFocused(focused);
+
+              return (
+                <FocusableCell
+                  {...{
+                    index,
+                    CellRenderer,
+                    item,
+                    focused: isFocused,
+                    scrollTo: this.scrollToIndex(event),
+                    behavior,
+                  }}
+                />
+              );
+            }}
+          </Focusable>
+        </View>
+      </CellFocusedStateContextProvider>
     );
   }
 }

package/Components/Cell/CellWithFocusable.tsx

@@ -14,6 +14,7 @@ type Props = {
   id: string;
   groupId: string;
   onFocus: Function;
+  onBlur?: Function;
   index: number;
   scrollTo: Function;
   preferredFocus?: boolean;
@@ -33,6 +34,7 @@ export function CellWithFocusable(props: Props) {
     id,
     groupId,
     onFocus,
+    onBlur = noop,
     scrollTo = noop,
     preferredFocus,
     skipFocusManagerRegistration,
@@ -78,6 +80,7 @@ export function CellWithFocusable(props: Props) {
   const onGroupBlur = React.useCallback(() => {
     if (!skipFocusManagerRegistration) {
       setIsFocused(false);
+      onBlur?.();
     }
   }, [skipFocusManagerRegistration]);
 

package/Components/FeedLoader/FeedLoader.tsx

@@ -8,7 +8,7 @@ type Props = {
     typeof import("@applicaster/zapp-react-native-utils/reactHooks/feed").useLoadPipesDataDispatch
   >;
   feedUrl: string;
-  children: (feed: ZappFeed) => React.ComponentType<any>;
+  children: (feed: ZappFeed) => React.ReactNode;
   onFeedLoaded: (feed: ZappFeed) => {};
   onError: (error: ZappPipesData["error"]) => {};
   refreshing: boolean;

package/Components/Focusable/Focusable.tsx

@@ -6,6 +6,7 @@ import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focu
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 import { StyleSheet, ViewStyle } from "react-native";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
   initialFocus?: boolean;
@@ -20,7 +21,7 @@ type Props = {
   onPressOut?: () => void;
   onLongPress?: () => void;
   handleFocus?: ({ mouse }: { mouse: boolean }) => void;
-  children: (boolean, string) => React.ComponentType<any>;
+  children: (boolean, string) => React.ReactNode;
   selected?: boolean;
   style?: ViewStyle[] | ViewStyle;
 };
@@ -29,6 +30,7 @@ class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
+  accessibilityManager: AccessibilityManager;
 
   constructor(props) {
     super(props);
@@ -43,6 +45,8 @@ class Focusable extends BaseFocusable<Props> {
     this.resetLongPressTimeout = this.resetLongPressTimeout.bind(this);
     this.longPress = this.longPress.bind(this);
     this.press = this.press.bind(this);
+
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   /**
@@ -123,12 +127,15 @@ class Focusable extends BaseFocusable<Props> {
   }
 
   render() {
-    const { children, style, ...otherProps } = this.props;
+    const { children, style } = this.props;
     const { focused } = this.state;
 
     const id = this.getId();
     const focusableId = `focusable-${id}`;
 
+    const accessibilityProps =
+      this.accessibilityManager.getWebAccessibilityProps(this.props);
+
     return (
       <div
         id={focusableId}
@@ -141,7 +148,7 @@ class Focusable extends BaseFocusable<Props> {
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
         style={StyleSheet.flatten(style) as any as React.CSSProperties}
-        {...otherProps}
+        {...accessibilityProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/Focusable/FocusableTvOS.tsx

@@ -19,7 +19,7 @@ type Props = {
   onPress?: (nativeEvent: any) => void;
   onFocus?: (nativeEvent: any) => void;
   onBlur?: (nativeEvent: any) => void;
-  children: (focused?: boolean) => React.ReactNode;
+  children: ((focused?: boolean) => React.ReactNode) | React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;
   selected?: boolean;
@@ -204,7 +204,7 @@ export class Focusable extends BaseFocusable<Props> {
         {...this.nextFocusableReactTags}
         {...otherProps}
       >
-        {R.is(Function, children) ? children(focused) : children}
+        {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>
     );
   }

package/Components/Focusable/Touchable.tsx

@@ -9,7 +9,8 @@ type Props = {
   onLongPress?: (ref: FocusManager.TouchableRef) => void;
   onFocus?: (
     ref: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onBlur?: (
     ref: FocusManager.TouchableRef,
@@ -39,9 +40,10 @@ export class Touchable extends React.Component<Props> {
 
   onFocus(
     focusableRef: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ): void {
-    this.props?.onFocus?.(focusableRef, options);
+    this.props?.onFocus?.(focusableRef, options, context);
   }
 
   onBlur(

package/Components/Focusable/index.android.tsx

@@ -22,7 +22,8 @@ type Props = {
   onPress?: (ref: FocusManager.FocusableRef) => void;
   onFocus?: (
     ref: FocusManager.FocusableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) => void;
   onBlur?: (
     ref: FocusManager.FocusableRef,
@@ -32,6 +33,7 @@ type Props = {
   onPressOut?: (ref: FocusManager.FocusableRef) => void;
   onLongPress?: (ref: FocusManager.FocusableRef) => void;
   onRegister?: () => void;
+  onUnregister?: () => void;
   isFocusableCell?: boolean;
   /** only for FocusableScrollView */
   onSetIsFocusable?: (isFocusable: boolean) => void;
@@ -70,6 +72,7 @@ function FocusableComponent(props: Props, forwardedRef) {
     onPressOut,
     onLongPress,
     onRegister = noop,
+    onUnregister = noop,
     isFocusableCell = true,
     onSetIsFocusable,
   } = props;
@@ -113,9 +116,10 @@ function FocusableComponent(props: Props, forwardedRef) {
 
       return () => {
         unregister();
+        onUnregister();
       };
     }
-  }, [id, onRegister, isFocusableCell, parentFocusableId]);
+  }, [id, onRegister, onUnregister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -125,9 +129,9 @@ function FocusableComponent(props: Props, forwardedRef) {
   }
 
   const _onFocus = React.useCallback(
-    (ref, options) => {
+    (ref, options, context) => {
       setFocused(true);
-      onFocus?.(ref, options);
+      onFocus?.(ref, options, context);
     },
     [onFocus]
   );

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -22,7 +22,7 @@ type FocusableGroupNativeEvent = {
 
 type Props = {
   id: string;
-  children: (arg1: boolean) => React.ComponentType<any>;
+  children: React.ReactNode;
   isFocusDisabled: boolean;
   isWithMemory: boolean;
   focusGroupRef: React.Component;

package/Components/FocusableList/FocusableItem.tsx

@@ -10,7 +10,8 @@ type FocusableItemComponentProps = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: FocusableItemComponentProps["item"]; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onListElementFocus?: (any, RenderItemProps, Direction) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
@@ -45,8 +46,8 @@ const FocusableItemComponent = ({
   const renderArgs = { item, index };
 
   const onFocusHandler = React.useCallback(
-    (element, direction) => {
-      onFocus?.(element, renderArgs, direction);
+    (element, options, context) => {
+      onFocus?.(element, renderArgs, options, context);
     },
     [item, onFocus]
   );

package/Components/FocusableList/FocusableListItemWrapper.tsx

@@ -17,7 +17,8 @@ type Props = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: Item; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
   ) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
   onListElementPress?: (any, RenderItemProps) => void;

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

@@ -10,15 +10,25 @@ export const useCellState = (id: string) => {
   );
 
   React.useEffect(() => {
-    const handler = (focusable) => {
+    const focusHandler = (focusable) => {
       const isChildren = focusManager.isFocusableChildOf(focusable, id);
+
       setCurrentCellFocused(isChildren);
     };
 
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+    focusManager.on(FOCUS_EVENTS.FOCUS, focusHandler);
+
+    const resetHandler = ({ focusedId }) => {
+      if (id === focusedId) {
+        setCurrentCellFocused(false);
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.RESET, resetHandler);
 
     return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, focusHandler);
+      focusManager.removeHandler(FOCUS_EVENTS.RESET, resetHandler);
     };
   }, [id]);
 

package/Components/FocusableList/index.tsx

@@ -20,27 +20,34 @@ import { FocusableScrollView } from "../FocusableScrollView";
 const mapIndexed = R.addIndex(R.map);
 
 export type IListRenderItem<ItemT> = (
-  info: IListRenderItemInfo<ItemT> & {
+  info: {
     focused: boolean;
     onLoadFinished: () => void;
     onLoadFailed: () => void;
-  }
+  } & IListRenderItemInfo<ItemT>
 ) => React.ReactElement | null;
 
 export const getFocusableId = (parentId, index) =>
   `${parentId}___index:${index}`;
 
+type Item = ZappEntry | ZappUIComponent | any;
+
 export type Props<ItemT> = FlatListProps<ItemT> & {
   id?: number | string;
   horizontal?: boolean;
   loop?: boolean;
   numColumns?: number;
   data: ZappEntry[] | ZappUIComponent[] | any[];
-  onListElementFocus?: (any, RenderItemProps, Direction) => void;
-  onListElementBlur?: (any, RenderItemProps, Direction) => void;
-  onListElementPress?: (any, RenderItemProps) => void;
-  onListElementPressOut?: (any, RenderItemProps) => void;
-  onListElementLongPress?: (any, RenderItemProps) => void;
+  onListElementFocus?: (
+    element: FocusManager.FocusableRef,
+    renderItemProps: { item: Item; index: number },
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
+  ) => void;
+  onListElementBlur?: (element, renderItemProps, direction) => void;
+  onListElementPress?: (element, renderItemProps) => void;
+  onListElementPressOut?: (element, renderItemProps) => void;
+  onListElementLongPress?: (element, renderItemProps) => void;
   focusableItemProps?: any;
   focused?: boolean;
   initialScrollIndex?: number;
@@ -138,11 +145,11 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const onFocus = React.useCallback(
-    (element, renderArgs, direction) => {
+    (element, renderArgs, options, context) => {
       const { index } = renderArgs;
 
       updateFocusedIndex?.(index);
-      onListElementFocus?.(element, renderArgs, direction);
+      onListElementFocus?.(element, renderArgs, options, context);
     },
     [onListElementFocus, updateFocusedIndex]
   );

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

@@ -4,7 +4,6 @@ import { Focusable } from "@applicaster/zapp-react-native-ui-components/Componen
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 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();
 
@@ -44,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?.();
 
@@ -71,12 +65,6 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
       focusedButtonId,
       mouse: focusable.mouse,
     });
-
-    if (ttsLabel) {
-      accessibilityManager.readText({
-        text: ttsLabel,
-      });
-    }
   };
 
   const handleBlur = (_focusable, _direction) => {

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

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

@@ -11,6 +11,8 @@ import { withScaledLineHeight } from "./utils";
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { CellFocusedStateContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = {
   style: any;
@@ -35,10 +37,9 @@ const _Text = ({
 }: Props) => {
   const _label = useTextLabel({ label, entry });
   const isMeasurement = React.useContext(MeasurementPortalContext);
+  const cellFocused = React.useContext(CellFocusedStateContext);
 
-  if (isNilOrEmpty(_label)) {
-    return null;
-  }
+  const accessibilityManager = useAccessibilityManager({});
 
   // set maximum possible height for the text in case of measurement
   const height =
@@ -46,6 +47,27 @@ const _Text = ({
       ? toNumber(otherProps.numberOfLines) * toNumber(style.lineHeight)
       : undefined;
 
+  const textLabel = dateTransformEnabled
+    ? dateFormat(dateTransform, label)
+    : textTransform(transformText, _label);
+
+  React.useLayoutEffect(() => {
+    // For FocusableCells with action buttons
+    if (otherProps.state) {
+      if (otherProps.state === "focused" && cellFocused === true) {
+        accessibilityManager.addHeading(textLabel);
+      }
+    } else {
+      if (cellFocused === true) {
+        accessibilityManager.addHeading(textLabel);
+      }
+    }
+  }, [cellFocused, otherProps.state, textLabel]);
+
+  if (isNilOrEmpty(_label)) {
+    return null;
+  }
+
   return (
     <Text
       style={[
@@ -55,9 +77,7 @@ const _Text = ({
       allowFontScaling={false}
       {...withoutLabel(otherProps)}
     >
-      {dateTransformEnabled
-        ? dateFormat(dateTransform, label)
-        : textTransform(transformText, _label)}
+      {textLabel}
     </Text>
   );
 };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -423,7 +423,10 @@ const PlayerContainerComponent = (props: Props) => {
       id: playerContainerId,
       listener: {
         onVideoEnd,
-        onError,
+        onError: (err: Error) => {
+          // Adapt Error to the expected shape for onError
+          onError({ error: err });
+        },
         onLoad,
         onPlayerClose: close,
         onPlayerDetached: close,

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -19,9 +19,9 @@ describe("ScreenRevealManager", () => {
 
     const manager = new ScreenRevealManager(componentsToRender, mockCallback);
 
-    expect(manager["numberOfComponentsWaitToLoadBeforePresent"]).toBe(3);
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
 
-    expect(manager["renderingState"]).toEqual([
+    expect(manager.renderingState).toEqual([
       COMPONENT_LOADING_STATE.UNKNOWN,
       COMPONENT_LOADING_STATE.UNKNOWN,
       COMPONENT_LOADING_STATE.UNKNOWN,

package/Components/Tabs/TV/Tabs.android.tsx

@@ -62,7 +62,7 @@ const TabsComponent = ({
   );
 
   const renderItem = useCallback(
-    ({ item, index, focused }) => {
+    ({ item, index, focused }: { item: any; index: any; focused?: any }) => {
       const itemId = generateFocusableId(getId(item));
 
       const isSelected = R.equals(index, selectedEntryIndex);

package/Components/TextInputTv/__tests__/__snapshots__/TextInputTv.test.js.snap

@@ -2,6 +2,19 @@
 
 exports[`<TextInputTv /> renders 1`] = `
 <input
+  accessibilityProps={
+    {
+      "accessibilityHint": "Enter text into Search",
+      "accessibilityLabel": "Search",
+      "accessibilityRole": "searchbox",
+      "accessible": true,
+      "aria-description": "Enter text into Search",
+      "aria-label": "Search",
+      "aria-role": "searchbox",
+      "role": "searchbox",
+      "tabindex": 0,
+    }
+  }
   testID="TextInput-tv"
 />
 `;

package/Components/TextInputTv/index.tsx

@@ -4,6 +4,7 @@ import { Appearance, Platform, StyleSheet, TextInput } from "react-native";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = Partial<{
   style: any;
@@ -42,6 +43,8 @@ function TextInputTV(props: Props, ref) {
   const [colorScheme, setColorScheme] = useState(getInitialColorScheme());
   const isRTL = useIsRTL();
 
+  const accessibilityManager = useAccessibilityManager({});
+
   const onColorChange = useCallback(
     ({ colorScheme: color }) => {
       if (color !== colorScheme) {
@@ -153,6 +156,13 @@ function TextInputTV(props: Props, ref) {
       ])
     )(props);
 
+  const getAccessibilityProps = () => {
+    return {
+      accessibilityProps:
+        accessibilityManager.getInputAccessibilityProps("Search"),
+    };
+  };
+
   const inputProps = {
     ...getProps(),
     ...getStyle(),
@@ -161,6 +171,7 @@ function TextInputTV(props: Props, ref) {
     ...getSecureTextEntry(),
     ...getOnEndEditing(),
     ...getOnPress(),
+    ...getAccessibilityProps(),
   };
 
   if (

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { Animated, Dimensions } from "react-native";
 
 import {
@@ -163,31 +163,51 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <ReactContext.Provider
-      value={{
-        yTranslate,
-        startComponentsAnimation,
-        setStartComponentsAnimation,
-        isActiveGesture: playerAnimationState !== null,
-        playerAnimationState,
-        setPlayerAnimationState,
-        resetPlayerAnimationState,
-        minimisedHeight,
-        animatedValues: {
+      value={useMemo(
+        () => ({
+          yTranslate,
+          startComponentsAnimation,
+          setStartComponentsAnimation,
+          isActiveGesture: playerAnimationState !== null,
+          playerAnimationState,
+          setPlayerAnimationState,
+          resetPlayerAnimationState,
+          minimisedHeight,
+          animatedValues: {
+            lastScrollY,
+            dragScrollY,
+            dragVideoPlayerY,
+            translateYOffset,
+          },
+          lastScrollYValue,
+          scrollPosition,
+          modalSnapPoints,
+          lastSnap,
+          setLastSnap,
+          tabletLandscapePlayerTopPosition,
+          setTabletLandscapePlayerTopPosition,
+          startComponentsAnimationDistance,
+          progressBarHeight,
+        }),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+          startComponentsAnimation,
+          playerAnimationState,
+          minimisedHeight,
           lastScrollY,
           dragScrollY,
           dragVideoPlayerY,
           translateYOffset,
-        },
-        lastScrollYValue,
-        scrollPosition,
-        modalSnapPoints,
-        lastSnap,
-        setLastSnap,
-        tabletLandscapePlayerTopPosition,
-        setTabletLandscapePlayerTopPosition,
-        startComponentsAnimationDistance,
-        progressBarHeight,
-      }}
+          lastSnap,
+          modalSnapPoints,
+          lastScrollYValue,
+          scrollPosition,
+          tabletLandscapePlayerTopPosition,
+          startComponentsAnimationDistance,
+          progressBarHeight,
+          isLiveItem,
+        ]
+      )}
     >
       {children}
     </ReactContext.Provider>

package/Components/VideoModal/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -2,6 +2,8 @@ import { renderHook } from "@testing-library/react-hooks";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
+jest.useFakeTimers();
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn().mockReturnValue(false),
 }));
@@ -11,11 +13,15 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return true initially", () => {
+  it("should return false initially, that changes after 1 second", () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
+    expect(result.current).toBe(false);
+
+    jest.advanceTimersByTime(1000);
+
     expect(result.current).toBe(true);
   });
 
@@ -46,6 +52,8 @@ describe("useDelayedPlayerDetails", () => {
       })
     );
 
+    jest.advanceTimersByTime(1000);
+
     expect(result.current).toBe(true);
   });
 });

package/Components/VideoModal/hooks/useDelayedPlayerDetails.ts

@@ -1,22 +1,26 @@
+// const showPlayerDetails = (
+//   isInline: boolean,
+//   isDocked: boolean,
+//   isPip: boolean,
+//   isTablet: boolean
+// ) => {
+//   return showDetails({
+//     isMobile: !isTablet,
+//     isInline,
+//     isDocked,
+//     isPip,
+//   });
+// };
+
+import * as React from "react";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 import { showDetails } from "./utils";
 
-type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };
+const TIMEOUT = 1000; // ms
 
-const showPlayerDetails = (
-  isInline: boolean,
-  isDocked: boolean,
-  isPip: boolean,
-  isTablet: boolean
-) => {
-  return showDetails({
-    isMobile: !isTablet,
-    isInline,
-    isDocked,
-    isPip,
-  });
-};
+type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };
 
 /**
  * Custom hook to determine whether to show player details with a delay.
@@ -32,7 +36,28 @@ export const useDelayedPlayerDetails = ({
   isDocked,
   isPip,
 }: Props): boolean => {
+  const [shouldShowDetails, setShouldShowDetails] = React.useState(false);
+
   const isTablet = useIsTablet();
 
-  return showPlayerDetails(isInline, isDocked, isPip, isTablet);
+  React.useEffect(() => {
+    const subscription = withTimeout$(TIMEOUT).subscribe({
+      next: () => {
+        setShouldShowDetails(() => {
+          return showDetails({
+            isMobile: !isTablet,
+            isInline,
+            isDocked,
+            isPip,
+          });
+        });
+      },
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [isDocked, isTablet, isInline, isPip]);
+
+  return shouldShowDetails;
 };

package/Components/VideoModal/hooks/utils/__tests__/showDetails.test.ts

@@ -12,7 +12,7 @@ describe("showDetails", () => {
     expect(result).toBe(false);
   });
 
-  it("should return false if isDocked is true", () => {
+  it("should return true if isDocked & mobile", () => {
     const result = showDetails({
       isMobile: true,
       isInline: true,
@@ -20,7 +20,7 @@ describe("showDetails", () => {
       isPip: false,
     });
 
-    expect(result).toBe(false);
+    expect(result).toBe(true);
   });
 
   it("should return true if isMobile is true and isInline is true", () => {

package/Components/VideoModal/hooks/utils/index.ts

@@ -52,6 +52,10 @@ export const showDetails = ({
   }
 
   if (isDocked) {
+    if (isMobile) {
+      return true;
+    }
+
     return false;
   }
 

package/Contexts/CellFocusedStateContext/index.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+
+export const CellFocusedStateContext = React.createContext<boolean>(false);
+
+export const CellFocusedStateContextProvider = ({
+  cellFocused,
+  children,
+}: {
+  cellFocused: boolean;
+  children: ReactNode;
+}) => {
+  return (
+    <CellFocusedStateContext.Provider value={cellFocused}>
+      {children}
+    </CellFocusedStateContext.Provider>
+  );
+};
+
+export function withCellFocusedStateContext(
+  Component: React.ComponentType<any>
+) {
+  return function WithCellFocusedStateContextWrapper(props) {
+    const cellFocusedState = React.useContext(CellFocusedStateContext);
+
+    return <Component {...props} cellFocusedState={cellFocusedState} />;
+  };
+}

package/events/index.ts

@@ -3,4 +3,6 @@ export enum QBUIComponentEvents {
   topMenuBarTV_onFocus = "topMenuBarTV_onFocus",
   navigatorReplaceItem = "navigatorReplaceItem",
   scrollVerticallyToInitialOffset = "scrollVerticallyToInitialOffset",
+  focusOnSelectedTab = "focusOnSelectedTab",
+  focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.5351122050",
+  "version": "14.0.0-alpha.5365702091",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.5351122050",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5351122050",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5351122050",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5351122050",
+    "@applicaster/applicaster-types": "14.0.0-alpha.5365702091",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5365702091",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5365702091",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5365702091",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"