@applicaster/zapp-react-native-ui-components 14.0.0-alpha.3140225604 → 14.0.0-alpha.3216572828

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,17 +1,18 @@
 import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
-import { useDispatch } from "react-redux";
 
 import {
+  ZappPipes,
+  useAppDispatch,
   useLayoutPresets,
-  useZappPipesFeeds,
-} from "@applicaster/zapp-react-native-redux/hooks";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+
 import {
   ZappPipesEntryContext,
   ZappPipesScreenContext,
@@ -26,7 +27,10 @@ import {
 import { produce } from "immer";
 // types reference
 
-declare type CurationEntry = { preset_name: string; feed_url: string };
+declare interface CurationEntry {
+  preset_name: string;
+  feed_url: string;
+}
 
 type Feeds = Record<string, ZappPipesData>;
 
@@ -122,7 +126,7 @@ export const getFinalComponents = (
 export const useCurationAPI = (
   components: Array<ZappUIComponent>
 ): ZappUIComponent[] => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const smartComponents = useMemo(
     () => components?.filter?.(isSmartComponent) ?? [],
@@ -162,7 +166,7 @@ export const useCurationAPI = (
   useEffect(() => {
     urls.forEach((url, index) => {
       if (url) {
-        dispatch(loadPipesData(url, { clearCache: false }));
+        dispatch(ZappPipes.loadPipesData(url, { clearCache: false }));
       } else {
         logger.log_error("Curation url is empty", {
           componentId: smartComponents?.[index]?.id,
@@ -171,7 +175,7 @@ export const useCurationAPI = (
     });
   }, [urls]);
 
-  const feeds = useZappPipesFeeds(urls);
+  const feeds = useZappPipesFeed(urls);
   const layoutPresets = useLayoutPresets();
 
   const enrichedComponents = useMemo(() => {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -14,6 +14,7 @@ import {
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
+import { ViewStyle } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
@@ -150,14 +151,19 @@ export function HandlePlayable({
   const modalSize = useModalSize();
 
   const style = React.useMemo(
-    () => ({
-      width: isModal ? modalSize.width : mode === "PIP" ? "100%" : screenWidth,
-      height: isModal
-        ? modalSize.height
-        : mode === "PIP"
-          ? "100%"
-          : screenHeight,
-    }),
+    () =>
+      ({
+        width: isModal
+          ? modalSize.width
+          : mode === "PIP"
+            ? "100%"
+            : screenWidth,
+        height: isModal
+          ? modalSize.height
+          : mode === "PIP"
+            ? "100%"
+            : screenHeight,
+      }) as ViewStyle,
     [screenWidth, screenHeight, modalSize, isModal, mode]
   );
 

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks/usePickFromState";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { getBackgroundImageUrl } from "../utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 

package/Components/Layout/TV/__tests__/index.test.tsx

@@ -7,7 +7,6 @@ import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/
 import configureStore from "redux-mock-store";
 import Layout from "../index.web";
 
-// mock useTheme to provide app_background_color
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
   useTheme: () => ({
     app_background_color: "#000000",

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -4,7 +4,7 @@ import * as R from "ramda";
 import { TouchableOpacity } from "react-native";
 // import { SvgUri } from "react-native-svg";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";

package/Components/MasterCell/DefaultComponents/Image/hoc/withDimensions.tsx

@@ -20,7 +20,7 @@ const withAppliedDimensions = (style: Style) => (source: Source) => ({
 });
 
 export const withDimensionsHOC = (Component) => {
-  return function WithDimensions(props: { style: any }) {
+  return function WithDimensions(props: Record<string, unknown>) {
     const theme = useTheme<BaseThemePropertiesMobile>();
 
     const useDownScalingImages = toBooleanWithDefaultFalse(

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

@@ -13,7 +13,7 @@ export const ImageContainer = (props: Props) => {
   const isActive = useIsScreenActive();
 
   const Component =
-    isVideoPreviewEnabled(props) && isActive ? LiveImage : PureImage;
+    isVideoPreviewEnabled(props as Props) && isActive ? LiveImage : PureImage;
 
   return <Component {...props} />;
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { Image } from "react-native";
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
@@ -10,35 +10,35 @@ const CustomImage = require("../Image").default;
 
 describe("image with no source", () => {
   it("Uses provided placeholder image string", () => {
-    const testRenderer = TestRenderer.create(
+    const { UNSAFE_getByType } = render(
       <CustomImage placeholderImage={"foo"} />
     );
 
-    const testInstance = testRenderer.root;
+    const imageComponent = UNSAFE_getByType(Image);
 
-    expect(testInstance.findByType(Image).props.source).toEqual({
+    expect(imageComponent.props.source).toEqual({
       uri: "foo",
     });
   });
 
   it("Uses provided placeholder image object", () => {
-    const testRenderer = TestRenderer.create(
+    const { UNSAFE_getByType } = render(
       <CustomImage placeholderImage={"foo"} />
     );
 
-    const testInstance = testRenderer.root;
+    const imageComponent = UNSAFE_getByType(Image);
 
-    expect(testInstance.findByType(Image).props.source).toEqual({
+    expect(imageComponent.props.source).toEqual({
       uri: "foo",
     });
   });
 
   it("Returns empty string if no image or placeholder defined", () => {
-    const testRenderer = TestRenderer.create(
+    const { UNSAFE_getByType } = render(
       <CustomImage placeholderImage={null} />
     );
 
-    const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toBeUndefined();
+    const imageComponent = UNSAFE_getByType(Image);
+    expect(imageComponent.props.source).toBeUndefined();
   });
 });

package/Components/MasterCell/DefaultComponents/__tests__/text.test.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import RN from "react-native";
-import { Provider } from "react-redux";
-import TestRenderer from "react-test-renderer";
-import configureStoreFn from "redux-mock-store";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const mockUseIsRTL = jest.fn(() => true);
 const mockGetIsRTL = jest.fn(() => true);
@@ -17,7 +15,6 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
 }));
 
 const CustomText = require("../Text").default;
-const mockStore = configureStoreFn();
 
 const defaultProps = {
   entry: {},
@@ -25,16 +22,15 @@ const defaultProps = {
   transformText: "default",
 };
 
-const getRenderedText = (label: string, store: any) => {
+const getRenderedText = (label: string, storeConfig: any) => {
   const props = { ...{ ...defaultProps, label } };
 
-  const testRenderer = TestRenderer.create(
-    <Provider store={store}>
-      <CustomText {...props} />
-    </Provider>
+  const { UNSAFE_getByType } = renderWithProviders(
+    <CustomText {...props} />,
+    storeConfig
   );
 
-  return testRenderer.root.findByType(RN.Text).props.children;
+  return UNSAFE_getByType(RN.Text).props.children;
 };
 
 describe("RTL app: Hebrew text contains english word", () => {
@@ -42,28 +38,32 @@ describe("RTL app: Hebrew text contains english word", () => {
   const textWithNotFirstEnglishWord = "השיר של נועה נועה קירל באירוויזיון Word";
   const textWithoutEnglishWord = "השיר של נועה נועה קירל באירוויזיון";
 
-  const store = mockStore({
+  const storeConfig = {
     remoteConfigurations: { localizations: { he: {} } },
     appData: {
       languageCode: "he",
       countryCode: "IL",
     },
-  });
+  };
 
   it("Hebrew text contains first english word", () => {
-    const renderedText = getRenderedText(textWithFirstEnglishWord, store);
+    const renderedText = getRenderedText(textWithFirstEnglishWord, storeConfig);
     const desiredText = "\u200fWord\u202c השיר של נועה נועה קירל באירוויזיון";
 
     expect(renderedText).toEqual(desiredText);
   });
 
   it("Hebrew text contains not first english word", () => {
-    const renderedText = getRenderedText(textWithNotFirstEnglishWord, store);
+    const renderedText = getRenderedText(
+      textWithNotFirstEnglishWord,
+      storeConfig
+    );
+
     expect(renderedText).toEqual(textWithNotFirstEnglishWord);
   });
 
   it("Hebrew text doesn't contain english word", () => {
-    const renderedText = getRenderedText(textWithoutEnglishWord, store);
+    const renderedText = getRenderedText(textWithoutEnglishWord, storeConfig);
     expect(renderedText).toEqual(textWithoutEnglishWord);
   });
 });
@@ -77,16 +77,16 @@ describe("LTR app: English text", () => {
 
   const englishText = "Test sentence";
 
-  const store = mockStore({
+  const storeConfig = {
     remoteConfigurations: { localizations: { en: {} } },
     appData: {
       languageCode: "en",
       countryCode: "US",
     },
-  });
+  };
 
   it("English text", () => {
-    const renderedText = getRenderedText(englishText, store);
+    const renderedText = getRenderedText(englishText, storeConfig);
     expect(renderedText).toEqual(englishText);
   });
 });

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/index.test.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { View } from "react-native";
-import ReactTestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 import { CollapsibleTextContainer } from "../CollapsibleTextContainer";
 
 describe("CollapsibleTextContainer", () => {
   it("render container+children when label is presented", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer
         backgroundColor="#000000"
         label={"label"}
@@ -16,36 +16,36 @@ describe("CollapsibleTextContainer", () => {
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
 
     expect(result).not.toBeNull();
-    expect(renderer.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("render nothing when label is empty", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer backgroundColor="#000000" label={""} style={{}}>
         <View />
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
     expect(result).toBeNull();
   });
 
   it("render nothing when label is not passed", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer backgroundColor="#000000" label={""} style={{}}>
         <View />
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
     expect(result).toBeNull();
   });
 
   it("render nothing when label is undefined", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer
         backgroundColor="#000000"
         label={undefined}
@@ -55,7 +55,7 @@ describe("CollapsibleTextContainer", () => {
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
     expect(result).toBeNull();
   });
 });

package/Components/MasterCell/elementMapper.tsx

@@ -73,7 +73,6 @@ export function elementMapper(
       : {};
 
     const componentProps = {
-      key,
       style,
       skipButtons: otherProps?.skipButtons,
       emitAsyncElementRegistrate: otherProps?.emitAsyncElementRegistrate,
@@ -91,7 +90,7 @@ export function elementMapper(
     const fn = mapElementWithKey(elementMapper(components, otherProps));
 
     return (
-      <Component {...componentProps}>
+      <Component key={key} {...componentProps}>
         {focusableTypes.has(type) && elements.length > 0
           ? elements.map(fn)
           : null}

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import { Text, Animated } from "react-native";
+import { render } from "@testing-library/react-native";
 
-import renderer from "react-test-renderer";
-
-jest.useFakeTimers();
+import {
+  NotificationView,
+  onlinePhrase,
+  offlinePhrase,
+} from "../NotificationView";
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   usePickFromState: () => ({
@@ -32,39 +35,31 @@ jest.mock("react-native-safe-area-context", () => ({
 
 const dismiss = jest.fn();
 
-const {
-  NotificationView,
-  onlinePhrase,
-  offlinePhrase,
-} = require("../NotificationView");
-
 describe("NotificationView", () => {
   it("Show online message when Online", () => {
-    const component = renderer.create(
-      <NotificationView online dismiss={dismiss} />
-    );
+    const component = render(<NotificationView online dismiss={dismiss} />);
 
-    expect(component.root.findByType(Text).props.children).toBe(onlinePhrase);
+    expect(component.UNSAFE_getByType(Text).props.children).toBe(onlinePhrase);
   });
 
   it("Show offline message when Online", () => {
-    const component = renderer.create(
+    const component = render(
       <NotificationView online={false} dismiss={dismiss} />
     );
 
-    expect(component.root.findByType(Text).props.children).toBe(offlinePhrase);
+    expect(component.UNSAFE_getByType(Text).props.children).toBe(offlinePhrase);
   });
 
   it("When hidden is false to true notification is visible", () => {
-    const component = renderer.create(
+    const component = render(
       <NotificationView online={false} hidden={false} dismiss={dismiss} />
     );
 
-    component.update(
+    component.rerender(
       <NotificationView online={false} hidden={true} dismiss={dismiss} />
     );
 
-    const animatedView = component.root.findByType(Animated.View);
+    const animatedView = component.UNSAFE_getByType(Animated.View);
     const animatedViewStyles = animatedView.props.style;
 
     expect(animatedViewStyles.opacity).toBe(1);

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -21,6 +21,15 @@ exports[`OfflineHandler renders 1`] = `
     }
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
       accessible={true}
       collapsable={false}
       focusable={true}

package/Components/OfflineHandler/__tests__/index.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-
-import renderer, { act } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 jest.useFakeTimers({ legacyFakeTimers: true });
 
@@ -19,29 +18,27 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => {
   };
 });
 
-jest.mock(
-  "@applicaster/zapp-react-native-redux/hooks/usePickFromState",
-  () => ({
-    usePickFromState: () => ({
-      plugins: [
-        {
-          name: "offline experience",
-          identifier: "offline-experience",
-          type: "general",
-          module: {
-            useOfflineExperienceConfiguration: () => ({
-              configurationFields: {},
-              localizations: {
-                offline_toast_message: "No internet connection",
-                online_toast_message: "You are back online",
-              },
-            }),
-          },
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
+  usePickFromState: () => ({
+    plugins: [
+      {
+        name: "offline experience",
+        identifier: "offline-experience",
+        type: "general",
+        module: {
+          useOfflineExperienceConfiguration: () => ({
+            configurationFields: {},
+            localizations: {
+              offline_toast_message: "No internet connection",
+              online_toast_message: "You are back online",
+            },
+          }),
         },
-      ],
-    }),
-  })
-);
+      },
+    ],
+  }),
+}));
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
@@ -51,24 +48,18 @@ describe("OfflineHandler", () => {
   const { OfflineHandler, NotificationView } = require("../");
 
   it("renders", () => {
-    const instance = renderer.create(<OfflineHandler />);
-    expect(instance.toJSON()).toMatchSnapshot();
+    const { toJSON } = render(<OfflineHandler />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("renders Notification mode if component was rendered while online", () => {
     mockConnectionStatus = true;
 
-    let instance;
-
-    act(() => {
-      instance = renderer.create(<OfflineHandler />);
-    });
+    const { rerender, UNSAFE_getByType } = render(<OfflineHandler />);
 
-    act(() => {
-      instance.update(<OfflineHandler />);
-    });
+    rerender(<OfflineHandler />);
 
-    const notificationsView = instance.root.findByType(NotificationView);
+    const notificationsView = UNSAFE_getByType(NotificationView);
     expect(notificationsView).toBeDefined();
   });
 });

package/Components/PlayerContainer/ErrorDisplay/index.ts

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { ErrorDisplayComponent } from "./ErrorDisplay";
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { useEffect, useReducer } from "react";
-// @ts-ignore
-import { TVMenuControl, View, ViewStyle } from "react-native";
+import { View, ViewStyle } from "react-native";
 import * as R from "ramda";
 import uuid from "uuid/v4";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
@@ -62,6 +61,11 @@ import {
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
+import {
+  PlayerNativeCommandTypes,
+  PlayerNativeSendCommand,
+} from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
+
 type Props = {
   Player: React.ComponentType<any>;
   PlayerLoadingView?: React.ComponentType<any>; // 👀 we are not receiving this prop
@@ -259,9 +263,15 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
+    // send command to clear and stop player
+    PlayerNativeSendCommand(
+      PlayerNativeCommandTypes.clearPlayerData,
+      state.playerId
+    );
+
     showNavBar(true);
     navigator.goBack();
-  }, [isModal, navigator.goBack, showNavBar]);
+  }, [isModal, navigator.goBack, state.playerId, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -389,13 +399,17 @@ const PlayerContainerComponent = (props: Props) => {
     }
   };
 
-  const playerRemoteHandler = (event, isLanguageOverlayVisible) => {
-    const { eventType } = event;
+  const playerRemoteHandler = React.useCallback(
+    (isLanguageOverlayVisible = false) =>
+      (event) => {
+        const { eventType } = event;
 
-    if (!isLanguageOverlayVisible && eventType === "menu") {
-      close();
-    }
-  };
+        if (!isLanguageOverlayVisible && eventType === "menu") {
+          close();
+        }
+      },
+    [close]
+  );
 
   // Effects
   useEffect(() => {
@@ -508,16 +522,6 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, [isAudioContent]);
 
-  // Needs to handle back button on Apple TV
-  // https://github.com/facebook/react-native/issues/18930
-  useEffect(() => {
-    TVMenuControl?.enableTVMenuKey();
-
-    return () => {
-      TVMenuControl?.disableTVMenuKey();
-    };
-  }, []);
-
   useEffect(() => {
     playerEvent("source_changed", { item });
 
@@ -633,9 +637,9 @@ const PlayerContainerComponent = (props: Props) => {
         <PlayerContainerContext.Consumer>
           {(context) => (
             <TVEventHandlerComponent
-              tvEventHandler={(_component, event) =>
-                playerRemoteHandler(event, context.isLanguageOverlayVisible)
-              }
+              tvEventHandler={playerRemoteHandler(
+                context.isLanguageOverlayVisible
+              )}
             >
               <FocusableGroup
                 id={FocusableGroupMainContainerId}

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -1,4 +1,4 @@
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";

package/Components/PlayerContainer/index.ts

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 import { PlayerContainer as PlayerContainerComponent } from "./PlayerContainer";