@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5933014273 → 12.0.0-alpha.6158046395

package/Components/Cell/Cell.tsx

@@ -276,13 +276,20 @@ export class CellComponent extends React.Component<Props, State> {
           skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused, event) => {
+            const isFocused = this.isCellFocused(focused);
+
+            if (isFocused) {
+              const accessibilityManager = AccessibilityManager.getInstance();
+              accessibilityManager.readText({ text: item.title });
+            }
+
             return (
               <FocusableCell
                 {...{
                   index,
                   CellRenderer,
                   item,
-                  focused: this.isCellFocused(focused),
+                  focused: isFocused,
                   scrollTo: this.scrollToIndex(event),
                   behavior,
                 }}

package/Components/Focusable/__tests__/index.android.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { render, act } from "@testing-library/react-native";
+import { Touchable } from "../../Touchable";
+
+const mockUseIsRTL = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+}));
+
+const mockUseFocusManager = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/focusManager", () => ({
+  useFocusManager: mockUseFocusManager,
+}));
+
+const mockUsePrevious = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => ({
+  usePrevious: mockUsePrevious,
+}));
+
+const { Focusable } = require("../index.android");
+
+describe("Focusable", () => {
+  const mockFocusManager = {
+    isFocused: jest.fn(),
+    onDisableFocusChange: jest.fn(),
+    registerFocusable: jest.fn(),
+    focusedId: "test-id",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseIsRTL.mockReturnValue(false);
+    mockUseFocusManager.mockReturnValue(mockFocusManager);
+    mockUsePrevious.mockReturnValue(false);
+  });
+
+  it("updates disableFocus state when disableFocus prop changes", () => {
+    const { rerender } = render(
+      <Focusable id="test-id" disableFocus={false}>
+        <Touchable testID="touchable" />
+      </Focusable>
+    );
+
+    rerender(
+      <Focusable id="test-id" disableFocus={true}>
+        <Touchable testID="touchable" />
+      </Focusable>
+    );
+
+    expect(mockFocusManager.onDisableFocusChange).toHaveBeenCalledWith(
+      "test-id"
+    );
+  });
+
+  it("calls focusManager.registerFocusable on mount and unregisters on unmount", () => {
+    const unregister = jest.fn();
+    mockFocusManager.registerFocusable.mockReturnValue(unregister);
+
+    const { unmount } = render(
+      <Focusable id="test-id">
+        <Touchable testID="touchable" />
+      </Focusable>
+    );
+
+    expect(mockFocusManager.registerFocusable).toHaveBeenCalled();
+    act(() => unmount());
+    expect(unregister).toHaveBeenCalled();
+  });
+});

package/Components/Focusable/index.android.tsx

@@ -128,7 +128,10 @@ function FocusableComponent(props: Props, forwardedRef) {
 
   const _onBlur = React.useCallback(
     (ref, options = {}) => {
-      setFocused(false);
+      if (ref.props.id !== focusManager.focusedId) {
+        setFocused(false);
+      }
+
       onBlur?.(ref, options);
     },
     [onBlur]
@@ -148,15 +151,14 @@ function FocusableComponent(props: Props, forwardedRef) {
     [isRTL, nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight]
   );
 
-  const contextState = React.useMemo(
-    () => ({
+  const contextState = React.useMemo(() => {
+    return {
       focused,
       ...parentFocus,
       ref: touchableRef,
       setIsFocusable,
-    }),
-    [parentFocus, focused]
-  );
+    };
+  }, [parentFocus, focused]);
 
   return (
     <Touchable
@@ -173,9 +175,13 @@ function FocusableComponent(props: Props, forwardedRef) {
       {...parentFocus}
     >
       <FocusableContext.Provider value={contextState}>
-        {typeof children === "function"
-          ? children(focused, parentFocus, touchableRef)
-          : children}
+        {React.useMemo(
+          () =>
+            typeof children === "function"
+              ? children(focused, parentFocus, touchableRef)
+              : children,
+          [children, focused, parentFocus]
+        )}
       </FocusableContext.Provider>
     </Touchable>
   );

package/Components/FocusableList/FocusableChild.ts

@@ -31,14 +31,14 @@ const useParentFocus = (
 
 function FocusableChildComponent(props) {
   const { setIsFocusable, ...focusableContext } = useFocusable();
+  const focused = useCellState(props.id);
+
   const parentFocus = useParentFocus(props, focusableContext);
 
   const onLoadFailed = React.useCallback(() => {
     setIsFocusable(false);
   }, []);
 
-  const focused = useCellState(props.id);
-
   return props.renderItem({
     ...props,
     focused,

package/Components/FocusableList/index.tsx

@@ -88,6 +88,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     data = [],
     // eslint-disable-next-line unused-imports/no-unused-vars
     onAllComponentsLoaded, // TODO: re-implement it
+    omitPropsPropagation = [],
   } = props;
 
   useCheckItemIdsForUnique({ componentId: props.id, items: data });
@@ -252,9 +253,9 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     ]
   );
 
-  const flatListProps = React.useMemo(
-    () =>
-      R.omit([
+  const getFlatListProps = React.useCallback(
+    R.omit(
+      [
         "onListElementFocus",
         "onListElementPress",
         "onListElementPressOut",
@@ -267,17 +268,17 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
         "focusableItemProps",
         "renderItem",
         "extraChildrenData",
-        "extraData",
-        "keyExtractor",
         "onAllComponentsLoaded",
         "focused",
         "id",
         "initialFocusDirection",
         "withStateMemory",
         "useSequentialLoading",
-        ...(props.omitPropsPropagation || []),
-      ])(props),
-    [props]
+        ...omitPropsPropagation,
+      ],
+      R.__
+    ),
+    [omitPropsPropagation]
   );
 
   const onEndReached = React.useCallback(
@@ -289,7 +290,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
 
   const initialNumToRender = toFiniteNumberWithDefault(
     10,
-    flatListProps.initialNumToRender
+    props.initialNumToRender
   );
 
   return (
@@ -298,12 +299,10 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
       <FlatList
         focusable={false}
         scrollEnabled={false}
-        extraData={props.extraData}
         ref={ref}
-        {...flatListProps}
+        {...getFlatListProps(props)}
         renderItem={renderItem}
         onEndReached={onEndReached}
-        keyExtractor={props.keyExtractor}
         initialNumToRender={initialNumToRender}
       />
     </ChildrenFocusDeactivatorView>

package/Components/FocusableScrollView/index.tsx

@@ -284,7 +284,7 @@ function FocusableScrollViewComponent(props: Props, ref) {
       };
 
       return (
-        <View onLayout={onItemLayout}>
+        <View key={id} onLayout={onItemLayout}>
           <Focusable
             {...nextFocus}
             onFocus={(element, direction) =>

package/Components/Image/Image.android.tsx

@@ -8,5 +8,5 @@ import { useImageSource } from "./utils";
 export const QBImage = (props: FastImageProps) => {
   const source = useImageSource(props.source);
 
-  return <FastImage {...props} source={source} />;
+  return <FastImage useLastImageAsDefaultSource {...props} source={source} />;
 };

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -66,20 +66,26 @@ export function ActionButton(props: Props) {
   );
 
   useEffect(() => {
-    if (actionDisabled || !actionContext) return;
+    if ((actionDisabled || !actionContext) && actionState !== null) {
+      return null;
+    }
 
     setActionState(actionContext.initialEntryState(item));
-  }, [actionDisabled, item?.id, actionContext]);
+  }, [actionDisabled, item?.id, actionContext, action]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
-      updateState: setActionState,
+      updateState: (state) => {
+        setActionState(state);
+      },
     });
-  }, [actionState, actionContext?.state, setActionState, item?.id]);
+  }, [actionState, actionContext?.state, item?.id]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {
-      return actionContext?.addListener(item.id as string, setActionState);
+      return actionContext?.addListener(item.id as string, (state) => {
+        setActionState(state);
+      });
     }
   }, [item?.id]);
 

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

@@ -3,6 +3,7 @@ import {
   ifElseFocusedSelected,
   ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getPositionStyles } from "./utils";
 
@@ -31,7 +32,11 @@ export const CellBadge = ({
   return {
     type: View, // Cell badge view
     style: {
-      flex: 1,
+      flex: platformSelect({
+        tvos: 0,
+        android_tv: 0,
+        default: 1,
+      }),
       position: "absolute",
       ...getPositionStyles(position, {
         width: value("cell_badge_width"),

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

@@ -47,9 +47,8 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const accessibilityManager = useAccessibilityManager({});
 
-  const { ttsLabel } = actionContext
-    ?.initialEntryState(item)
-    ?.getAccessibility(item);
+  const { ttsLabel = "" } =
+    actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
 
   const onPress = (event) => {
     event?.preventDefault?.();

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

@@ -38,21 +38,22 @@ function Image({
 
   const shouldRenderImg = source && !error;
 
+  // Default placeholder image fallback is empty string because it won't rerender
+  // in case of undefined or {uri: undefined} source
+  // https://github.com/facebook/react-native/issues/9195
   const defaultPlaceHolderImage = React.useMemo(
     () => ({ uri: placeholderImage || "" }),
     [source, error]
   );
 
-  const _source = shouldRenderImg
-    ? withDimensions(source)
-    : defaultPlaceHolderImage;
-
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={_source?.uri ? _source : undefined}
+      source={
+        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
+      }
       {...R.omit(["source"], otherProps)}
     />
   );

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

@@ -31,10 +31,10 @@ function Image({
 
   return (
     <RnImage
-      defaultSource={placeholderImage || ""}
+      defaultSource={placeholderImage || null}
       style={style}
       source={updatedSource}
-      {...R.omit(["source"], otherProps)}
+      {...R.omit(["source", "placeholderImage"], otherProps)}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toBeUndefined();
+    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
   });
 });

package/Components/MasterCell/hooks/useAsyncRendering/MasterCellAsyncRenderManager.ts

@@ -16,13 +16,13 @@ export class MasterCellAsyncRenderManager {
   }
 
   public emitAsyncElementRegistrate = () => {
-    this.asyncElementRegistrate$.next();
+    this.asyncElementRegistrate$.next(null);
 
     return this.decrementAsyncElementRegistrationCount;
   };
 
   public emitAsyncElementLayout = () => {
-    this.asyncElementLayout$.next();
+    this.asyncElementLayout$.next(null);
   };
 
   public decrementAsyncElementRegistrationCount = () => {

package/Components/MasterCell/utils/index.ts

@@ -53,10 +53,9 @@ function resolveColorForProp(entry, style, colorProp) {
   const colorFromProp = style[colorProp];
   const nestedEntryValue = R.path(colorFromProp.split("."), entry);
 
-  if (
-    nestedEntryValue === undefined &&
-    !validateColor(colorFromProp.replace(".00", "")) // https://github.com/dreamyguy/validate-color/issues/44
-  ) {
+  const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
+
+  if (nestedEntryValue === undefined && !validateColor(color)) {
     logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -362,13 +362,15 @@ const PlayerContainerComponent = (props: Props) => {
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
 
-    if (fullscreen) {
-      playerEvent("onFullscreenPlayerWillPresent");
-      navigator.fullscreenVideoModal();
-    } else {
-      playerEvent("onFullscreenPlayerWillDismiss");
-      navigator.maximiseVideoModal();
-    }
+    setTimeout(() => {
+      if (fullscreen) {
+        navigator.fullscreenVideoModal();
+        playerEvent("onFullscreenPlayerWillPresent");
+      } else {
+        navigator.maximiseVideoModal();
+        playerEvent("onFullscreenPlayerWillDismiss");
+      }
+    });
   };
 
   const onCellTap = (entry) => {
@@ -463,6 +465,10 @@ const PlayerContainerComponent = (props: Props) => {
 
     if (mode === VideoModalMode.FULLSCREEN) {
       toggleFullscreen({ fullscreen: false });
+
+      if (!isModal) {
+        playerManager.closeNativePlayer();
+      }
     }
 
     return !!(
@@ -519,7 +525,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     return () => {
-      playerEvent("player_did_close");
+      playerEvent("player_did_close", { item });
 
       if (!isModal) {
         showNavBar(true);

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { update, compose, tail, append, take, identity } from "ramda";
+import { update, compose, tail, append, take, identity, isNil } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -50,6 +50,10 @@ function scenesForBackTransition(props: SceneProps, { scenes }) {
     : [prepareScene(props.children), scenes[0]];
 }
 
+const isModalClosed = (navigator) => {
+  return !!isNil(navigator?.modalData);
+};
+
 type Props = {
   transitionConfig: any;
   children: React.ReactNode;
@@ -313,7 +317,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
-        isActive={scenes[from.index].key === this.props.navigator.currentRoute}
+        isActive={
+          scenes[from.index].key === this.props.navigator.currentRoute &&
+          isModalClosed(this.props.navigator)
+        }
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -329,7 +336,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
-        isActive={scenes[to.index].key === this.props.navigator.currentRoute}
+        isActive={
+          scenes[to.index].key === this.props.navigator.currentRoute &&
+          isModalClosed(this.props.navigator)
+        }
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -31,6 +31,11 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
         playerId="player1"
         resizeMode="cover"
         screenConfig={Object {}}
+        source={
+          Object {
+            "uri": "",
+          }
+        }
         style={Object {}}
       />
     </View>

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -45,15 +45,9 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
   }
 
   React.useEffect(() => {
-    const translateYListener = translateY.addListener(() => {
-      (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-        playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
-        setStartComponentsAnimation(true);
-    });
-
-    return () => {
-      translateYListener && translateY.removeListener(translateYListener);
-    };
+    (playerAnimationState === PlayerAnimationStateEnum.minimize ||
+      playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
+      setStartComponentsAnimation(true);
   }, [playerAnimationState]);
 
   return (

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -66,9 +66,10 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
-  const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
-  const isMinimizedModal = videoModalState.mode === "MINIMIZED";
-  const previousItemId = usePrevious(videoModalState.item?.id);
+  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
+  const isMaximazedModal = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal = videoModalMode === "MINIMIZED";
+  const previousItemId = usePrevious(videoModalItem?.id);
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
@@ -81,9 +82,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
   const isAudioItem = React.useMemo(
     () =>
-      videoModalState.item?.content?.type?.includes?.("audio") ||
-      videoModalState.item?.type?.value === "audio",
-    [videoModalState.item]
+      videoModalItem?.content?.type?.includes?.("audio") ||
+      videoModalItem?.type?.value === "audio",
+    [videoModalItem]
   );
 
   // Refs for components
@@ -114,7 +115,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         const preparedTranslationY =
           Math.abs(translationY) - lastScrollYValue.current;
 
-        if (videoModalState.mode === "MAXIMIZED") {
+        if (videoModalMode === "MAXIMIZED") {
           const endOffsetY =
             lastSnap + preparedTranslationY + dragToss * velocityY + 150;
 
@@ -161,7 +162,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           resetPlayerAnimationState();
       }
     },
-    [lastSnap, modalSnapPoints, playerAnimationState, videoModalState.mode]
+    [lastSnap, modalSnapPoints, playerAnimationState, videoModalMode]
   );
 
   const onScroll = React.useCallback(({ nativeEvent }) => {
@@ -196,10 +197,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   }, []);
 
   React.useEffect(() => {
-    if (
-      videoModalState.mode === "MINIMIZED" &&
-      videoModalState.previousMode === "MAXIMIZED"
-    ) {
+    const { mode, previousMode, item } = videoModalState;
+
+    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
       // set animation to the minimize values if moving from the player to another screen
       if (playerAnimationState === null) {
         setScrollModalAnimatedValue(
@@ -214,21 +214,17 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           dragScrollY,
           dragVideoPlayerY
         );
-      } else {
-        resetPlayerAnimationState();
       }
-    }
-
-    if (
-      (videoModalState.mode === "MAXIMIZED" &&
-        videoModalState.previousMode === "MINIMIZED" &&
-        previousItemId === videoModalState.item?.id) ||
-      previousItemId !== videoModalState.item?.id
+    } else if (
+      playerAnimationState === null &&
+      ((previousItemId === item?.id &&
+        mode === "MAXIMIZED" &&
+        (previousMode === "MINIMIZED" || previousMode === "MAXIMIZED")) ||
+        (previousItemId !== item?.id && mode !== "FULLSCREEN"))
     ) {
       setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
-      setTimeout(() => resetPlayerAnimationState());
     }
-  }, [videoModalState, previousItemId]);
+  }, [videoModalState]);
 
   React.useEffect(() => {
     if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
@@ -253,22 +249,22 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         translateYOffset,
         getAnimatedConfig(modalSnapPoints[1])
       ).start(() => {
-        setTimeout(() => {
-          minimiseVideoModal();
-
-          setScrollModalAnimatedValue(
-            translateYOffset,
-            modalSnapPoints[1],
-            setLastSnap
-          );
-
-          resetScrollAnimatedValues(
-            lastScrollY,
-            lastScrollYValue,
-            dragScrollY,
-            dragVideoPlayerY
-          );
-        }, 150);
+        minimiseVideoModal();
+
+        setScrollModalAnimatedValue(
+          translateYOffset,
+          modalSnapPoints[1],
+          setLastSnap
+        );
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+
+        resetPlayerAnimationState();
       });
     } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
       Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
@@ -285,7 +281,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         resetPlayerAnimationState();
       });
     }
+  }, [playerAnimationState]);
 
+  React.useEffect(() => {
     const lastScrollYListenerId = lastScrollY.addListener(({ value }) => {
       lastScrollYValue.current = value;
     });
@@ -311,7 +309,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       lastScrollY.removeListener(lastScrollYListenerId);
       dragScrollY.removeListener(dragListenerId);
     };
-  }, [playerAnimationState, isAudioItem, modalSnapPoints, isMinimizedModal]);
+  }, [playerAnimationState, isAudioItem, isMinimizedModal]);
 
   const Wrapper = React.useMemo(
     () => (Platform.OS === "android" ? GestureHandlerRootView : View),