@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5222319560 → 14.0.0-alpha.5234792518

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

@@ -20,7 +20,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;
 };

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

@@ -20,11 +20,11 @@ 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) =>

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/River/RiverItem.tsx

@@ -13,6 +13,9 @@ import { riverLogger } from "./logger";
 import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import type { BehaviorSubject } from "rxjs";
+import {
+  useCallBackNavigationAction
+} from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/callbackNavigationAction";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -85,6 +88,7 @@ function RiverItemComponent(props: RiverItemType) {
     loadingState,
   } = props;
 
+  const navigationActionCallback = useCallBackNavigationAction(item);
   const readyToBeDisplayed = useLoadingState(index, loadingState);
 
   const feedUrl = getFeedUrl(feed, index);
@@ -155,6 +159,7 @@ function RiverItemComponent(props: RiverItemType) {
       groupId={groupId}
       feedUrl={feedUrl}
       isLast={isLast}
+      navigationActionCallback={navigationActionCallback}
     />
   );
 }

package/Components/Screen/__tests__/navigationHandler.test.ts

@@ -3,61 +3,172 @@ import { isMenuVisible } from "../navigationHandler";
 describe("NavigationHandler", () => {
   describe("isMenuVisible", () => {
     it("returns false when the route is a player route", () => {
-      const menuVisible = isMenuVisible("/playable/some_vod_item", {});
+      const menuVisible = isMenuVisible("/playable/some_vod_item", {}, [
+        {
+          identifier: "quick-brick-bottom-tabs",
+          category: "menu",
+          name: "Bottom Tabs",
+        },
+      ]);
+
       expect(menuVisible).toBe(false);
     });
 
     describe("when screen is a hook", () => {
       it("returns true if the `showNavBar` flag is set to true", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              showNavBar: true,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                showNavBar: true,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(true);
       });
 
       it("returns true if presentFullScreen flag is set to false", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              presentFullScreen: false,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: false,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(true);
       });
 
       it("returns false if presentFullScreen flag is set to true", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              presentFullScreen: true,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: true,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(false);
       });
     });
 
     it("returns false if the screen's general settings allow screen presentation", () => {
-      const menuVisible = isMenuVisible("", {
-        general: {
-          allow_screen_plugin_presentation: true,
+      const menuVisible = isMenuVisible(
+        "",
+        {
+          general: {
+            allow_screen_plugin_presentation: true,
+          },
+          navigations: [
+            {
+              navigation_type: "quick-brick-bottom-tabs",
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ],
         },
-      });
+        [
+          {
+            identifier: "quick-brick-bottom-tabs",
+            category: "menu",
+            name: "Bottom Tabs",
+          },
+        ]
+      );
 
       expect(menuVisible).toBe(false);
     });
 
-    it("returns true otherwise", () => {
-      const menuVisible = isMenuVisible("", {});
+    it("returns false otherwise", () => {
+      const menuVisible = isMenuVisible(
+        "any",
+        {
+          navigations: [
+            {
+              navigation_type: "quick-brick-bottom-tabs",
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ],
+        },
+        [
+          {
+            identifier: "quick-brick-bottom-tabs",
+            category: "menu",
+            name: "Bottom Tabs",
+          },
+        ]
+      );
+
       expect(menuVisible).toBe(true);
     });
+
+    it("returns false otherwise", () => {
+      const menuVisible = isMenuVisible("", {}, [
+        {
+          identifier: "quick-brick-bottom-tabs",
+          category: "menu",
+          name: "Bottom Tabs",
+        },
+      ]);
+
+      expect(menuVisible).toBe(false);
+    });
   });
 });

package/Components/Screen/navigationHandler.ts

@@ -1,3 +1,5 @@
+import { resolveNavigationPlugin } from "@applicaster/zapp-react-native-utils/navigationUtils";
+
 /**
  * This function helps to decide wether the menu should be presented on the screen
  * based on route and / or screen Data
@@ -14,12 +16,28 @@
  * @param {Object} screenData payload associated with the currently presented screen
  * @returns {Boolean}
  */
-export function isMenuVisible(route, screenData) {
+export function isMenuVisible(route, screenData, plugins) {
+  const plugin = resolveNavigationPlugin({
+    category: "menu",
+    navigations:
+      screenData?.navigations || screenData?.targetScreen?.navigations,
+    plugins,
+  });
+
+  const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
+
+  if (!isBottomTabsPlugin) {
+    return false;
+  }
+
   if (route.includes("playable")) {
     return false;
   }
 
-  if (screenData.type === "qb_search_screen") {
+  if (
+    screenData.type === "qb_search_screen" ||
+    screenData?.targetScreen?.type === "qb_search_screen"
+  ) {
     return false;
   }
 

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/VideoModal/ModalAnimation/AnimatedScrollModal.web.tsx

@@ -0,0 +1,294 @@
+import React from "react";
+import { Animated, StyleSheet, View } from "react-native";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import {
+  PlayerAnimationStateEnum,
+  useModalAnimationContext,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+
+import {
+  resetScrollAnimatedValues,
+  setScrollModalAnimatedValue,
+} from "./utils";
+
+import { DURATION_TO_MINIMIZE } from "./const";
+
+const getAnimatedConfig = (toValue) => {
+  return {
+    toValue,
+    duration: DURATION_TO_MINIMIZE,
+    useNativeDriver: true,
+  };
+};
+
+const generalStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const AnimatedScrollModalComponent = ({ children }: Props) => {
+  const {
+    isActiveGesture,
+    playerAnimationState,
+    setPlayerAnimationState,
+    resetPlayerAnimationState,
+    animatedValues: {
+      lastScrollY,
+      dragScrollY,
+      dragVideoPlayerY,
+      translateYOffset,
+    },
+    lastScrollYValue,
+    scrollPosition,
+    modalSnapPoints,
+    setLastSnap,
+    setStartComponentsAnimation,
+  } = useModalAnimationContext();
+
+  const [enableGesture, setIEnableGesture] = React.useState<boolean>(true);
+
+  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
+    useNavigation();
+
+  const {
+    mode: videoModalMode,
+    previousMode: previousVideoModalMode,
+    item: videoModalItem,
+  } = videoModalState;
+
+  const isMaximizedModal: boolean = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal: boolean = videoModalMode === "MINIMIZED";
+  const previousItemId = usePrevious(videoModalItem?.id);
+
+  const isNotMinimizeMaximazeAnimation =
+    playerAnimationState !== PlayerAnimationStateEnum.minimize &&
+    playerAnimationState !== PlayerAnimationStateEnum.maximize;
+
+  const isAudioItem = React.useMemo(
+    () =>
+      videoModalItem?.content?.type?.includes?.("audio") ||
+      videoModalItem?.type?.value === "audio",
+    [videoModalItem]
+  );
+
+  const onRegisterLastScroll = Animated.event(
+    [{ nativeEvent: { contentOffset: { y: lastScrollY } } }],
+    { useNativeDriver: true }
+  );
+
+  const onScroll = React.useCallback(({ nativeEvent }) => {
+    scrollPosition.current = nativeEvent.contentOffset.y;
+  }, []);
+
+  // Workaround for onMomentumScrollEnd issue
+  // https://github.com/facebook/react-native/issues/32696#issuecomment-1104217223
+  const canMomentum = React.useRef(false);
+
+  const onMomentumScrollBegin = React.useCallback(() => {
+    canMomentum.current = true;
+  }, []);
+
+  const onMomentumScrollEnd = React.useCallback(
+    ({ nativeEvent }) => {
+      if (canMomentum.current && !isActiveGesture) {
+        if (nativeEvent.contentOffset.y === 0) {
+          resetScrollAnimatedValues(
+            lastScrollY,
+            lastScrollYValue,
+            dragScrollY,
+            dragVideoPlayerY
+          );
+
+          setIEnableGesture(true);
+        } else {
+          setIEnableGesture(false);
+        }
+
+        canMomentum.current = false;
+      }
+    },
+    [isActiveGesture]
+  );
+
+  React.useEffect(() => {
+    return () => {
+      scrollPosition.current = 0;
+
+      resetScrollAnimatedValues(
+        lastScrollY,
+        lastScrollYValue,
+        dragScrollY,
+        dragVideoPlayerY
+      );
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (
+      videoModalMode === "MAXIMIZED" &&
+      !enableGesture &&
+      scrollPosition.current === 0
+    ) {
+      setIEnableGesture(true);
+    }
+
+    if (
+      videoModalMode === "MINIMIZED" &&
+      previousVideoModalMode === "MAXIMIZED"
+    ) {
+      // set animation to the minimize values if moving from the player to another screen
+      if (playerAnimationState === null) {
+        setScrollModalAnimatedValue(
+          translateYOffset,
+          modalSnapPoints[1],
+          setLastSnap
+        );
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+      }
+    } else if (
+      playerAnimationState === null &&
+      ((previousItemId === videoModalItem?.id &&
+        videoModalMode === "MAXIMIZED" &&
+        (previousVideoModalMode === "MINIMIZED" ||
+          previousVideoModalMode === "MAXIMIZED")) ||
+        (previousItemId !== videoModalItem?.id &&
+          videoModalMode !== "FULLSCREEN"))
+    ) {
+      setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
+    }
+  }, [videoModalMode, previousVideoModalMode, videoModalItem]);
+
+  React.useEffect(() => {
+    if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
+      if (
+        (scrollPosition.current === 0 &&
+          (lastScrollY as any)._value !== 0 &&
+          (dragScrollY as any)._value === 0 &&
+          (dragVideoPlayerY as any)._value === 0) ||
+        (scrollPosition.current !== 0 &&
+          ((dragScrollY as any)._value !== 0 ||
+            (dragVideoPlayerY as any)._value !== 0))
+      ) {
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+      }
+
+      Animated.timing(
+        translateYOffset,
+        getAnimatedConfig(modalSnapPoints[1])
+      ).start(() => {
+        minimiseVideoModal();
+
+        setScrollModalAnimatedValue(
+          translateYOffset,
+          modalSnapPoints[1],
+          setLastSnap
+        );
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+
+        resetPlayerAnimationState();
+      });
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
+      Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
+        maximiseVideoModal();
+        setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+
+        resetPlayerAnimationState();
+      });
+    }
+  }, [playerAnimationState]);
+
+  React.useEffect(() => {
+    const lastScrollYListenerId = lastScrollY.addListener(({ value }) => {
+      lastScrollYValue.current = value;
+    });
+
+    const dragListenerId = dragScrollY.addListener(({ value }) => {
+      const preparedValue =
+        isMinimizedModal && value >= 0
+          ? 0
+          : Math.round(isAudioItem ? Math.abs(value) : value);
+
+      if (
+        preparedValue > 0 &&
+        scrollPosition.current === 0 &&
+        playerAnimationState !== PlayerAnimationStateEnum.drag_player &&
+        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
+      ) {
+        isMinimizedModal && setStartComponentsAnimation(true);
+        setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
+      }
+    });
+
+    return () => {
+      lastScrollY.removeListener(lastScrollYListenerId);
+      dragScrollY.removeListener(dragListenerId);
+    };
+  }, [playerAnimationState, isAudioItem, isMinimizedModal]);
+
+  const scrollEnabled = isMaximizedModal && isNotMinimizeMaximazeAnimation;
+
+  return (
+    <View style={generalStyles.container}>
+      <View pointerEvents="box-none">
+        <Animated.View>
+          <Animated.ScrollView
+            scrollEnabled={scrollEnabled}
+            bounces={false}
+            onScrollBeginDrag={onRegisterLastScroll}
+            onScroll={onScroll}
+            onMomentumScrollBegin={onMomentumScrollBegin}
+            onMomentumScrollEnd={onMomentumScrollEnd}
+            scrollEventThrottle={1}
+            showsVerticalScrollIndicator={false}
+          >
+            {children}
+          </Animated.ScrollView>
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+export const AnimatedScrollModal = ({ children }: Props) => {
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component =
+    !isTV() && visible ? AnimatedScrollModalComponent : React.Fragment;
+
+  return <Component>{children}</Component>;
+};

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.web.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { Animated, StyleSheet } from "react-native";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const generalStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: "100%",
+    position: "absolute",
+    zIndex: 201,
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const AnimatedVideoPlayer = ({ children }: Props) => {
+  const {
+    playerAnimationState,
+    setPlayerAnimationState,
+    animatedValues: { translateYOffset, dragVideoPlayerY },
+    modalSnapPoints,
+    setStartComponentsAnimation,
+  } = useModalAnimationContext();
+
+  const {
+    videoModalState: { mode: videoModalMode },
+  } = useNavigation();
+
+  const isMaximazedModal = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal = videoModalMode === "MINIMIZED";
+
+  React.useEffect(() => {
+    const dragVideoPlayerYListenerId = dragVideoPlayerY.addListener(
+      ({ value }) => {
+        if (
+          (isMinimizedModal && value >= 0) ||
+          (isMaximazedModal && value <= 0)
+        ) {
+          if (playerAnimationState === PlayerAnimationStateEnum.drag_player) {
+            translateYOffset.setValue(
+              modalSnapPoints[isMinimizedModal ? 1 : 0]
+            );
+          }
+        } else {
+          const preparedValue = Math.round(Math.abs(value));
+
+          if (
+            preparedValue > 0 &&
+            playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
+          ) {
+            if (playerAnimationState !== PlayerAnimationStateEnum.drag_player) {
+              isMinimizedModal && setStartComponentsAnimation(true);
+              setPlayerAnimationState(PlayerAnimationStateEnum.drag_player);
+            }
+
+            translateYOffset.setValue(
+              isMaximazedModal
+                ? preparedValue
+                : modalSnapPoints[1] - preparedValue
+            );
+          }
+        }
+      }
+    );
+
+    return () => {
+      dragVideoPlayerY.removeListener(dragVideoPlayerYListenerId);
+    };
+  }, [playerAnimationState, isMinimizedModal, isMaximazedModal]);
+
+  return (
+    <Animated.View style={generalStyles.container}>{children}</Animated.View>
+  );
+};
+
+export const AnimatedVideoPlayerComponent = ({ children }: Props) => {
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component = !isTV() && visible ? AnimatedVideoPlayer : React.Fragment;
+
+  return <Component>{children}</Component>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.5222319560",
+  "version": "14.0.0-alpha.5234792518",
   "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.5222319560",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5222319560",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5222319560",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5222319560",
+    "@applicaster/applicaster-types": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5234792518",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"