@applicaster/quick-brick-core 13.0.0-alpha.1124981321 → 13.0.0-alpha.1173186260

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -1,21 +1,20 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { Handle, HandleProps } from "./Handle";
 import { DraggableBottomSheet } from "./DraggableBottomSheet";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 type Props = {
   children: React.ReactChild;
   backgroundColor: string;
   cornerRadius: number;
-  contentHeight: number;
   maxHeight: number;
   maxWidth: number;
   visible: boolean;
   handleProps: HandleProps;
   closeToast: () => void;
   dimensions: { width: number; height: number };
-  paddingBottom: number;
 };
 
 const styles = StyleSheet.create({
@@ -34,9 +33,7 @@ export function ModalBottomSheetFrame(props: Props) {
     maxWidth,
     visible,
     handleProps,
-    contentHeight,
     dimensions,
-    paddingBottom,
   } = props;
 
   const extraStyles = {
@@ -44,13 +41,22 @@ export function ModalBottomSheetFrame(props: Props) {
     borderTopLeftRadius: cornerRadius,
     borderTopRightRadius: cornerRadius,
     maxHeight,
-    paddingBottom,
     maxWidth: Math.min(Number(maxWidth), dimensions.width),
   };
 
+  const [height, setHeight] = React.useState(0);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+
+    if (height !== 0) {
+      setHeight((oldHeight) => oldHeight || height);
+    }
+  };
+
   return (
     <DraggableBottomSheet
-      sheetHeight={contentHeight}
+      sheetHeight={height}
       visible={visible}
       dismiss={props.closeToast}
       hasHeader={handleProps.enabled}
@@ -58,7 +64,13 @@ export function ModalBottomSheetFrame(props: Props) {
       maxWidth={maxWidth}
       {...dimensions}
     >
-      <View style={[styles.toastFrameContainer, extraStyles]}>{children}</View>
+      <SafeAreaView
+        edges={["left", "right", "bottom"]}
+        style={[styles.toastFrameContainer, extraStyles]}
+        onLayout={onLayout}
+      >
+        <View>{children}</View>
+      </SafeAreaView>
     </DraggableBottomSheet>
   );
 }

package/App/ModalProvider/ModalBottomSheet/Overlay.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleSheet, TouchableOpacity, Easing, View } from "react-native";
 
 import { AnimatedInOut } from "@applicaster/zapp-react-native-ui-components/Components/AnimatedInOut";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { dismissModal } from "@applicaster/zapp-react-native-utils/modalState";
 
 type Props = {
   overlayColor: string;
@@ -35,21 +35,19 @@ const fadeInAnimation = {
   delay,
 };
 
-const animationConfig = (onAnimationEnd) => ({
+const animationConfig = {
   in: fadeInAnimation,
   out: {
     ...fadeInAnimation,
-    onAnimationEnd,
+    onAnimationEnd: dismissModal,
   },
-});
+};
 
 export function Overlay(props: Props) {
-  const navigator = useNavigation();
-
   return (
     <AnimatedInOut
       visible={props.visible}
-      animationConfig={animationConfig(navigator.closeModalBottomSheet)}
+      animationConfig={animationConfig}
       staticStyles={styles.container}
     >
       <TouchableOpacity

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -3,8 +3,8 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { View, StyleSheet, Keyboard } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Keyboard, StyleSheet, View } from "react-native";
 
 import { Overlay } from "./Overlay";
 import { ModalBottomSheetFrame } from "./ModalBottomSheetFrame";
@@ -38,50 +38,36 @@ export function ModalBottomSheet(props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigator = useNavigation();
   const dimensions = useDimensions();
-  const [sheetHeight, setSheetHeight] = useState(0);
   const [visible, setVisible] = useState(true);
   const dismiss = () => setVisible(false);
   const { bottom = defaultBottomOffset } = useSafeAreaInsets();
 
-  const bottomOffset = bottom + dimensions.statusBarHeight;
+  const bottomOffset = bottom;
 
   const {
     modal_bottom_sheet_background_color: sheetBackgroundColor,
     modal_bottom_sheet_overlay_color: sheetOverlayColor,
     modal_bottom_sheet_top_corner_radius: sheetCornerRadius,
-    modal_bottom_sheet_max_height: sheetMaxHeight,
     modal_bottom_sheet_handle: sheetHandleEnabled,
     modal_bottom_sheet_handle_color: sheetHandleColor,
     modal_bottom_sheet_handle_focus_color: sheetHandleFocusedColor,
     modal_bottom_sheet_tablet_max_width: sheetTabletMaxWidth,
   } = theme;
 
+  const sheetMaxHeight = dimensions.height * 0.75; // Set a default max height
+
   const {
     ModalBottomSheetContent = ModalComponent,
     modalBottomSheetContentProps,
   } = props;
 
-  const onLayout = useCallback(({ nativeEvent }) => {
-    const calculatedHeight = nativeEvent?.layout?.height;
-
-    if (calculatedHeight > 0 && sheetHeight === 0) {
-      setSheetHeight(Math.min(calculatedHeight, sheetMaxHeight));
-    }
-  }, []);
-
   useEffect(() => {
     Keyboard.dismiss();
   }, []);
 
   const isTablet = useIsTablet();
 
-  const maxWidth = useMemo(
-    () =>
-      isTablet
-        ? Math.max(sheetTabletMaxWidth, dimensions.width)
-        : dimensions.width,
-    [isTablet]
-  );
+  const maxWidth = isTablet ? sheetTabletMaxWidth : dimensions.width;
 
   return (
     <View style={styles.container}>
@@ -93,12 +79,10 @@ export function ModalBottomSheet(props: Props) {
       <ModalBottomSheetFrame
         backgroundColor={sheetBackgroundColor}
         cornerRadius={sheetCornerRadius}
-        contentHeight={sheetHeight + bottomOffset}
         maxHeight={sheetMaxHeight + bottomOffset}
-        paddingBottom={bottomOffset}
         maxWidth={maxWidth}
         dimensions={dimensions}
-        visible={visible && sheetHeight > 0}
+        visible={visible}
         closeToast={dismiss}
         handleProps={{
           enabled: sheetHandleEnabled,
@@ -106,18 +90,15 @@ export function ModalBottomSheet(props: Props) {
           focusedColor: sheetHandleFocusedColor,
         }}
       >
-        <View onLayout={onLayout}>
-          <ModalBottomSheetContent
-            width={
-              Math.min(sheetTabletMaxWidth, dimensions.width) ||
-              dimensions.width
-            }
-            maxHeight={sheetMaxHeight}
-            {...modalBottomSheetContentProps}
-            dismiss={dismiss}
-            currentRoute={navigator.currentRoute}
-          />
-        </View>
+        <ModalBottomSheetContent
+          width={
+            Math.min(sheetTabletMaxWidth, dimensions.width) || dimensions.width
+          }
+          maxHeight={sheetMaxHeight}
+          {...modalBottomSheetContentProps}
+          dismiss={dismiss}
+          currentRoute={navigator.currentRoute}
+        />
       </ModalBottomSheetFrame>
     </View>
   );

package/App/ModalProvider/ModalPresenter.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Modal, ModalProps } from "react-native";
 
-type Props = {
+type Props = ModalProps & {
   children: React.ReactChild;
   ModalContainer?: React.FC<ModalProps> | React.ComponentClass<ModalProps>;
   visible: boolean;

package/App/ModalProvider/index.tsx

@@ -6,10 +6,10 @@ import { ModalChildrenWrapper } from "./ModalChildrenWrapper";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { ScreenContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
-import { useModalStore } from "@applicaster/zapp-react-native-utils/modalState";
+import { useModalStoreState } from "@applicaster/zapp-react-native-utils/modalState";
 
 export function ModalProvider() {
-  const { modalState } = useModalStore();
+  const modalState = useModalStoreState();
 
   const [modalVisible, setModalVisible] = React.useState(false);
   const [modalShown, setModalShown] = React.useState(false);
@@ -35,12 +35,15 @@ export function ModalProvider() {
 
   const pathname = `${ROUTE_TYPES.MODAL}/${modalScreenProps?.screenId}`;
 
+  const shouldShowModal = modalVisible && modalState?.visible;
+
   return (
     <PathnameContext.Provider value={pathname}>
       <ScreenContextProvider pathname={pathname}>
         <ModalPresenter
-          visible={modalVisible && modalState?.visible}
+          visible={shouldShowModal}
           {...modalState?.options}
+          statusBarTranslucent
         >
           <ModalChildrenWrapper>
             <ModalContent modalScreenProps={modalScreenProps} />

package/App/NavigationProvider/NavigationProvider.tsx

@@ -49,6 +49,7 @@ import { coreAppLogger } from "../logger";
 import {
   getPlatform,
   isTV,
+  isVizioPlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useConnectionInfo } from "@applicaster/zapp-react-native-utils/reactHooks/connection";
 import {
@@ -57,16 +58,26 @@ import {
   legacyScreenData,
   openExternalUrl,
 } from "./utils";
-import { debounce } from "@applicaster/zapp-react-native-utils/functionUtils";
+import {
+  debounce,
+  getJsonReplacer,
+} from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { findParent } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappPipesContext/ZappPipesEntryContext";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 import { inflateUrl } from "@applicaster/zapp-react-native-ui-components/Components/LinkHandler/LinkHandler";
-import { useModalStore } from "@applicaster/zapp-react-native-utils/modalState";
+import {
+  dismissModal,
+  modalStore,
+  openModal,
+} from "@applicaster/zapp-react-native-utils/modalState";
 import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
 import { Hook } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager/Hook";
+import { URLSchemeContext } from "../DeepLinking/URLSchemeListener/URLSchemeContextProvider";
+
+import { loadingOverlayManager } from "../LoadingOverlay";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
@@ -86,6 +97,8 @@ const navigationActions = {
 const platform = getPlatform();
 
 export function NavigationProvider({ children }: Props) {
+  const { url: deepLinkURL } = React.useContext(URLSchemeContext);
+
   const {
     appData: { layoutVersion },
     rivers,
@@ -114,8 +127,6 @@ export function NavigationProvider({ children }: Props) {
 
   const { context } = React.useContext(ZappPipesEntryContext.Context);
 
-  const { openModal, dismissModal } = useModalStore();
-
   const playNextOverlayState = React.useRef();
 
   const online = useConnectionInfo(true);
@@ -141,7 +152,7 @@ export function NavigationProvider({ children }: Props) {
   );
 
   const getModalState: () => ModalState = () => {
-    const { modalState } = useModalStore.getState();
+    const { modalState } = modalStore.getState();
 
     return modalState;
   };
@@ -385,7 +396,7 @@ export function NavigationProvider({ children }: Props) {
     }
 
     if (hookPlugin.isModalHook()) {
-      navigator.openModal({
+      openModal({
         item: payload,
         props: { screenType: "hooks" },
         options: { ModalContainer: hookPlugin.getModalContainer() },
@@ -393,6 +404,8 @@ export function NavigationProvider({ children }: Props) {
     } else {
       dispatch(push(route, { entry: payload, screen: hookPlugin }));
     }
+
+    closeLoadingOverlay();
   };
 
   const handleHookError = ({ error, hookPlugin, callback }, dispose) => {
@@ -403,7 +416,7 @@ export function NavigationProvider({ children }: Props) {
     }
 
     if (hookPlugin.isModalHook()) {
-      navigator.dismissModal();
+      dismissModal();
     } else {
       goBack(true, true);
     }
@@ -411,9 +424,11 @@ export function NavigationProvider({ children }: Props) {
     if (callback && typeof callback === "function") {
       callback();
     }
+
+    closeLoadingOverlay();
   };
 
-  const handleHookCancel = ({ hookPlugin, callback }, dispose) => {
+  const handleHookCancel = ({ hookPlugin, callback, abort }, dispose) => {
     dispose();
     setStartUpHooks(false);
 
@@ -421,21 +436,29 @@ export function NavigationProvider({ children }: Props) {
       callback();
     }
 
-    if (hookPlugin.isModalHook()) {
-      navigator.dismissModal();
-    } else {
-      goBack(true, true);
+    if (!abort) {
+      if (hookPlugin.isModalHook()) {
+        dismissModal();
+      } else {
+        goBack(true, true);
+      }
     }
+
+    closeLoadingOverlay();
   };
 
   const handleHookSuccess = ({ hookPlugin, callback }) => {
     callback?.();
 
     if (hookPlugin.isModalHook()) {
-      navigator.dismissModal();
+      dismissModal();
     }
   };
 
+  const handleBackgroundHook = () => {
+    openLoadingOverlay();
+  };
+
   const checkStartUpHooks = React.useMemo(() => {
     if (!pluginConfigurations) return false;
 
@@ -505,6 +528,8 @@ export function NavigationProvider({ children }: Props) {
       );
 
       callback?.();
+
+      closeLoadingOverlay();
     };
 
   const offlinePlugin = React.useMemo(() => {
@@ -619,6 +644,7 @@ export function NavigationProvider({ children }: Props) {
           .on(HOOKS_EVENTS.ERROR, handleHookError)
           .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
           .on(HOOKS_EVENTS.SUCCESS, handleHookSuccess)
+          .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
           .on(
             HOOKS_EVENTS.COMPLETE,
             handleHookComplete(navigationAction, targetRoute, {
@@ -634,6 +660,14 @@ export function NavigationProvider({ children }: Props) {
     },
   });
 
+  const openLoadingOverlay = React.useCallback(() => {
+    deepLinkURL && isVizioPlatform() && loadingOverlayManager.show();
+  }, [deepLinkURL]);
+
+  const closeLoadingOverlay = React.useCallback(() => {
+    loadingOverlayManager.hide();
+  }, []);
+
   const openPiP = React.useCallback(() => {
     dispatch(setVideoPiP());
   }, []);
@@ -654,33 +688,6 @@ export function NavigationProvider({ children }: Props) {
     }
   }, [state?.options?.videoModal?.previousMode]);
 
-  const openModalBottomSheet = React.useCallback(
-    ({
-      ModalBottomSheetContent,
-      modalBottomSheetContentProps,
-      props = {},
-      options = {},
-    }) => {
-      openModal({
-        item: {
-          ModalBottomSheetContent,
-          modalBottomSheetContentProps,
-        },
-        props,
-        options: {
-          animationType: "none",
-          animated: false,
-          ...options,
-        },
-      });
-    },
-    [openModal]
-  );
-
-  const closeModalBottomSheet = React.useCallback(() => {
-    dismissModal();
-  }, [dismissModal]);
-
   const getNestedEntry = () => state?.location?.state?.nested?.entry ?? null;
 
   // It will only work for the regular stack and pathname, It won't work for modals
@@ -721,8 +728,6 @@ export function NavigationProvider({ children }: Props) {
       openModal,
       dismissModal,
       getModalState,
-      openModalBottomSheet,
-      closeModalBottomSheet,
       videoModalState: state.options.videoModal,
       openVideoModal,
       closeVideoModal,
@@ -739,7 +744,15 @@ export function NavigationProvider({ children }: Props) {
       getStackForPathname,
       mainStack: state.stack.mainStack,
     }),
-    [rivers, plugins, JSON.stringify(state), appLaunched, startUpHooks]
+    [
+      rivers,
+      plugins,
+      // TODO: Compare entire screen data from state must be removed
+      // State size could be large ~150kb and take 80ms on android tv on 8 rails
+      JSON.stringify(state, getJsonReplacer()),
+      appLaunched,
+      startUpHooks,
+    ]
   );
 
   // when running the tests, we pass the dispatch function

package/App/NavigationProvider/__tests__/navigationProvider.test.tsx

@@ -461,48 +461,4 @@ describe("<NavigationProvider />", () => {
       });
     });
   });
-
-  describe("modal feature", () => {
-    it("sets the modalState when opening a modal", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-      act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.get).toMatchSnapshot();
-    });
-
-    it("removes the visible flag when dismissing a modal", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-      act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-      act(() => view.props.navigator.dismissModal());
-      expect(view.props.navigator.getModalState().visible).toBeFalsy();
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-    });
-
-    it("should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-
-      act(() =>
-        view.props.navigator.openModalBottomSheet({
-          ModalBottomSheetContent: rivers.A1234,
-          modalBottomSheetContentProps: { some: "props" },
-        })
-      );
-
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-      act(() => view.props.navigator.closeModalBottomSheet());
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-    });
-  });
 });

package/App/NetworkStatusProvider/utils.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/tizen-tv-webapis" />
 import * as R from "ramda";
 
 import { NetInfoState } from "@react-native-community/netinfo";

package/App/StoreConnector/__tests__/storeConnector.test.js

@@ -1,19 +1,19 @@
 import * as React from "react";
 import * as ReactIs from "react-is";
 import { View, Text } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 
 import { storeConnector } from "../index";
+import { Provider } from "react-redux";
 
 const styles = { foo: "bar" };
 const components = { grid: jest.fn() };
 const rivers = { A123: { name: "home", id: "A123" } };
 const appSettings = { bundleIdentifier: "com.app.test" };
 
-const Component = () => (
-  <View>
+const Component = (props) => (
+  <View testID="test-comp" {...props}>
     <Text>I'm a component</Text>
   </View>
 );
@@ -28,7 +28,6 @@ const store = configureStore()({
 describe("storeConnector", () => {
   it("returns a Component", () => {
     const WrappedComponent = storeConnector(Component);
-
     expect(ReactIs.isValidElementType(WrappedComponent)).toBe(true);
 
     expect(WrappedComponent).toEqual(
@@ -41,12 +40,19 @@ describe("storeConnector", () => {
 
   it("passes the props to the component", () => {
     const WrappedComponent = storeConnector(Component);
-    const wrapper = shallow(<WrappedComponent store={store} />).dive();
-    const wrapperProps = wrapper.first().props();
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(wrapperProps).toHaveProperty("components", components);
-    expect(wrapperProps).toHaveProperty("rivers", rivers);
-    expect(wrapperProps).toHaveProperty("appSettings", appSettings);
+    const { getByText, getByTestId } = render(
+      <Provider store={store}>
+        <WrappedComponent />
+      </Provider>
+    );
+
+    expect(getByText("I'm a component")).toBeTruthy();
+
+    expect(getByTestId("test-comp").props).toMatchObject({
+      appSettings,
+      components,
+      rivers,
+    });
   });
 });