@applicaster/zapp-react-native-ui-components 13.0.0-alpha.7330390362 → 13.0.0-alpha.7620873141

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

@@ -5,6 +5,14 @@ import { render } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 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",
+  }),
+}));
 
 const withoutChildren = omit(["children"]);
 
@@ -16,8 +24,6 @@ jest.mock("../../../Screen/TV/index.web", () => {
   };
 });
 
-const Layout = require("../index.web").default;
-
 const mockStore = configureStore()({
   appState: { appReady: true },
 });

package/Components/Layout/TV/index.tsx

@@ -1,10 +1,7 @@
 import * as React from "react";
-import * as R from "ramda";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
-import { getBackgroundImageUrl } from "../utils";
 import { LayoutContainer } from "./LayoutContainer";
 import { ScreenContainer } from "./ScreenContainer";
 
@@ -12,6 +9,7 @@ import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
+import { LayoutBackground } from "./LayoutBackground";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -19,7 +17,6 @@ type Components = {
 };
 
 type ComponentsExtraProps = {
-  Background?: Record<string, any>;
   NavBar?: Record<string, any>;
 };
 
@@ -31,17 +28,10 @@ type Props = {
 
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
-  const theme = useTheme();
 
-  const { appState: { appReady = false } = {}, remoteConfigurations } =
-    usePickFromState(["appState", "remoteConfigurations", "plugins"]);
-
-  const backgroundColor = React.useMemo(() => theme.app_background_color, []);
-
-  const backgroundImageUrl = React.useMemo(
-    () => getBackgroundImageUrl(remoteConfigurations),
-    [remoteConfigurations]
-  );
+  const { appState: { appReady = false } = {} } = usePickFromState([
+    "appState",
+  ]);
 
   if (!appReady) {
     return null;
@@ -50,11 +40,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   return (
     <LayoutContainer>
       <ScreenLayoutContextProvider>
-        <Components.Background
-          backgroundColor={backgroundColor}
-          backgroundImageUrl={backgroundImageUrl}
-          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-        >
+        <LayoutBackground Background={Components.Background}>
           <ScreenDataContext.Provider value={navigator.data}>
             <PathnameContext.Provider value={navigator.currentRoute}>
               <ScreenContextProvider pathname={navigator.currentRoute}>
@@ -67,7 +53,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
               </ScreenContextProvider>
             </PathnameContext.Provider>
           </ScreenDataContext.Provider>
-        </Components.Background>
+        </LayoutBackground>
       </ScreenLayoutContextProvider>
     </LayoutContainer>
   );

package/Components/Layout/TV/index.web.tsx

@@ -5,6 +5,7 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
+import { LayoutBackground } from "./LayoutBackground";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -25,7 +26,9 @@ const Layout = ({ Components }: Props) => {
 
   return (
     <ScreenLayoutContextProvider>
-      <StackNavigator Components={Components} />
+      <LayoutBackground Background={Components.Background}>
+        <StackNavigator Components={Components} />
+      </LayoutBackground>
     </ScreenLayoutContextProvider>
   );
 };

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -4,7 +4,6 @@ import { TouchableOpacity, ViewStyle } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";
-
 type Props = {
   item: ZappEntry | ZappFeed;
   flavour?: "flavour_1" | "flavour_2";
@@ -69,7 +68,7 @@ export function ActionButton(props: Props) {
     if (!((actionDisabled || !actionContext) && actionState !== null)) {
       setActionState(actionContext.initialEntryState(item));
     }
-  }, [actionDisabled, item?.id, actionContext, action]);
+  }, [actionDisabled, item?.id, actionContext, action, setActionState]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
@@ -85,7 +84,7 @@ export function ActionButton(props: Props) {
         setActionState(state);
       });
     }
-  }, [item?.id]);
+  }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
   const AssetComponent = actionState?.asset;

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

@@ -43,8 +43,6 @@ export default function Image({
   //   toFiniteNumberWithDefault(0, style.height)
   // );
 
-  // const index = R.pathOr(-1, ["item", "index"], otherProps);
-
   const source = useImageSourceWithDefault({
     uri,
     entry,
@@ -53,10 +51,6 @@ export default function Image({
     otherProps,
   });
 
-  // const source = {
-  //   uri: `https://placehold.co/200x200/orange/white.png?text=${index}`,
-  // };
-
   const onError = React.useCallback(() => {
     appendFailedToLoadUri(uri);
     setShowDefault(true);

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
-import * as R from "ramda";
+import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
 
@@ -17,7 +17,7 @@ type Props = Record<string, any> & {
   withDimensions: (source: Source) => Source;
 };
 
-const MemoizedImage = React.memo(RnImage, R.equals);
+const MemoizedImage = React.memo(RnImage, equals);
 
 function Image({
   style,
@@ -31,12 +31,6 @@ function Image({
 
   const source = useImageSource({ uri, entry, otherProps });
 
-  // const index = R.pathOr(-1, ["item", "index"], otherProps);
-
-  // const source = {
-  //   uri: `https://placehold.co/200x200/orange/white.png?text=${index}`,
-  // };
-
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
     setErrorState(null);
@@ -50,11 +44,12 @@ function Image({
 
   return (
     <MemoizedImage
+      key={_source?.uri || "no-image"}
       style={style as ImageStyle}
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...R.omit(["source"], otherProps)}
+      {...omit(["source"], otherProps)}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
+import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
@@ -7,9 +7,13 @@ import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
 
+const getSourceContext = path(["source", "context"]);
+const getSourceUri = path(["source", "uri"]);
+const getState = path(["state"]);
+
 export const useImageSource = ({ uri, entry, otherProps }): Return => {
-  const uriContext = R.path(["source", "context"], otherProps);
-  const uriState = R.path(["state"], otherProps);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 
@@ -34,7 +38,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
     return { uri };
   }
 
-  const uriFromSource = R.path(["source", "uri"], otherProps);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -56,7 +60,7 @@ const getSource = (uri, showDefault, placeholderImage, otherProps) => {
     return { uri };
   }
 
-  const uriFromSource = R.path(["source", "uri"], otherProps);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -72,8 +76,8 @@ export const useImageSourceWithDefault = ({
   placeholderImage,
   otherProps,
 }): Return => {
-  const uriContext = R.path(["source", "context"], otherProps);
-  const uriState = R.path(["state"], otherProps);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 

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

@@ -244,7 +244,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
   return (
     <>
       <Image {...props} applyMaxSize />
-      {isShouldRender && (
+      {isShouldRender ? (
         <View style={[style, positionAbsolute]}>
           <PlayerLiveImage
             uri={props.uri}
@@ -257,7 +257,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
             audioMutedByDefault={audio_muted_by_default}
           />
         </View>
-      )}
+      ) : null}
     </>
   );
 };

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const.ts

@@ -0,0 +1,3 @@
+export const PREFIX = "tv_buttons";
+
+export const BUTTON_PREFIX = `${PREFIX}_button`;

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/index.ts

@@ -1,4 +1,4 @@
-import * as R from "ramda";
+import { times } from "@applicaster/zapp-react-native-utils/utils";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { Button } from "./Button";
@@ -9,13 +9,14 @@ import {
 } from "./utils";
 
 import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { PREFIX, BUTTON_PREFIX } from "./const";
 
 export {
   insertButtonsBetweenLabels,
   insertButtonsBetweenLabelContainers,
 } from "./utils";
 
-const PREFIX = "tv_buttons";
+const buttonId = (index: number) => `${BUTTON_PREFIX}_${index}`;
 
 type Props = {
   value: Function;
@@ -42,7 +43,6 @@ export const TvActionButtons = ({
     return null;
   }
 
-  const prefix1Button = `${PREFIX}_button_1`;
   const independentStyles = value(`${PREFIX}_container_independent_styles`);
 
   return {
@@ -73,11 +73,11 @@ export const TvActionButtons = ({
       buttonsCount,
     },
     elements: compact(
-      R.times((index) => {
-        const prefixSpecificButton = `${PREFIX}_button_${index + 1}`;
+      times((index) => {
+        const prefixSpecificButton = buttonId(index + 1);
 
         return Button({
-          prefix: independentStyles ? prefixSpecificButton : prefix1Button,
+          prefix: independentStyles ? prefixSpecificButton : buttonId(1),
           value,
           platformValue,
           pluginIdentifier: getPluginIdentifier(configuration, PREFIX, index),

package/Components/MasterCell/SharedUI/ProgressBar/hooks/useFillInPercent.ts

@@ -34,7 +34,6 @@ export const useFillInPercent = (entry: ZappEntry): number => {
     React.useState<number>(DEFAULT_FILL);
 
   React.useEffect(() => {
-    // setup progress in UI on mount
     getProgressValue(action, entry, (progress) => {
       setFillInPercent(progress);
     });
@@ -45,17 +44,12 @@ export const useFillInPercent = (entry: ZappEntry): number => {
       return;
     }
 
-    // refresh progress in UI when it was changed in CW
-    const unsubscribe = action?.addDataSourceListener?.(() => {
+    return action?.addDataSourceListener?.(() => {
       getProgressValue(action, entry, (progress) => {
         setFillInPercent(progress);
       });
     });
-
-    return () => {
-      unsubscribe?.();
-    };
-  }, [isActive]);
+  }, [isActive, action, entry, setFillInPercent]);
 
   return fillInPercent;
 };

package/Components/MasterCell/__tests__/__snapshots__/elementMapper.test.js.snap

@@ -3,12 +3,10 @@
 exports[`elementMapper renders the nodes 1`] = `
 <View>
   <View
-    key="View_0"
     testProp={true}
     viewProp={true}
   >
-    <ImageContainer
-      key="0"
+    <View
       style={
         {
           "borderTopLeftRadius": 4,
@@ -20,7 +18,6 @@ exports[`elementMapper renders the nodes 1`] = `
       uri="http://urlOfTheImage.net/img.png"
     />
     <View
-      key="1"
       style={
         {
           "height": 30,
@@ -32,8 +29,7 @@ exports[`elementMapper renders the nodes 1`] = `
       testProp={true}
       viewProp={true}
     >
-      <_Text
-        key="0"
+      <View
         label="Test Entry"
         numberOfLines={1}
         style={
@@ -47,7 +43,6 @@ exports[`elementMapper renders the nodes 1`] = `
       />
     </View>
     <View
-      key="2"
       style={
         {
           "height": 60,
@@ -58,8 +53,7 @@ exports[`elementMapper renders the nodes 1`] = `
       }
       testProp={true}
     >
-      <_Text
-        key="0"
+      <View
         label="Summary of the test entry"
         numberOfLines={2}
         style={
@@ -74,7 +68,6 @@ exports[`elementMapper renders the nodes 1`] = `
       />
     </View>
     <View
-      key="3"
       style={
         {
           "height": 42,
@@ -85,8 +78,7 @@ exports[`elementMapper renders the nodes 1`] = `
       testProp={true}
       viewProp={true}
     >
-      <ImageContainer
-        key="0"
+      <View
         style={
           {
             "height": 42,

package/Components/MasterCell/__tests__/__snapshots__/masterCell.test.js.snap

@@ -1,35 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`masterCellBuilder when using a custom data adapter renders correctly 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    cellUUID="mocked-uuid"
-    key="0"
-    skipButtons={false}
-    style={
-      {
-        "backgroundColor": "#2F2F2F",
-        "borderRadius": 4,
-        "height": 436,
-        "marginRight": 20,
-        "width": 384,
-      }
-    }
-    wrapperRef={
-      {
-        "current": null,
-      }
-    }
-  />
-</View>
-`;
-
 exports[`masterCellBuilder when using custom containerStyle renders correctly 1`] = `
 <View
   style={
@@ -73,202 +43,3 @@ exports[`masterCellBuilder when using custom default components renders correctl
   />
 </mockConstructor>
 `;
-
-exports[`masterCellBuilder when using default options can be invoked as a React Component 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    cellUUID="mocked-uuid"
-    key="0"
-    skipButtons={false}
-    style={
-      {
-        "backgroundColor": "#2F2F2F",
-        "borderRadius": 4,
-        "height": 436,
-        "marginRight": 20,
-        "width": 384,
-      }
-    }
-    whoAmI={
-      {
-        "contentType": "feed",
-        "state": "default",
-      }
-    }
-    wrapperRef={
-      {
-        "current": null,
-      }
-    }
-  >
-    <ImageContainer
-      cellUUID="mocked-uuid"
-      key="0"
-      numberOfLines={1}
-      skipButtons={false}
-      style={
-        {
-          "borderTopLeftRadius": 4,
-          "borderTopRightRadius": 4,
-          "height": 216,
-          "width": 384,
-        }
-      }
-      uri="http://urlOfTheImage.net/img.png"
-    />
-    <View
-      cellUUID="mocked-uuid"
-      key="1"
-      skipButtons={false}
-      style={
-        {
-          "height": 30,
-          "marginHorizontal": 24,
-          "marginTop": 24,
-          "width": 336,
-        }
-      }
-      wrapperRef={
-        {
-          "current": null,
-        }
-      }
-    >
-      <_Text
-        key="0"
-        label="Test Entry"
-        numberOfLines={1}
-        skipButtons={false}
-        style={
-          {
-            "color": "#EFEFEF",
-            "fontSize": 26,
-            "fontStyle": "normal",
-            "fontWeight": "bold",
-          }
-        }
-      />
-    </View>
-    <View
-      cellUUID="mocked-uuid"
-      key="2"
-      skipButtons={false}
-      style={
-        {
-          "height": 60,
-          "marginHorizontal": 24,
-          "marginTop": 10,
-          "width": 336,
-        }
-      }
-      wrapperRef={
-        {
-          "current": null,
-        }
-      }
-    >
-      <_Text
-        key="0"
-        label="Summary of the test entry"
-        numberOfLines={2}
-        skipButtons={false}
-        style={
-          {
-            "color": "#EFEFEF",
-            "fontSize": 24,
-            "fontStyle": "normal",
-            "fontWeight": "normal",
-            "opacity": 0.8,
-          }
-        }
-      />
-    </View>
-    <View
-      cellUUID="mocked-uuid"
-      key="3"
-      skipButtons={false}
-      style={
-        {
-          "height": 42,
-          "margin": 24,
-          "width": 56,
-        }
-      }
-      wrapperRef={
-        {
-          "current": null,
-        }
-      }
-    >
-      <ImageContainer
-        cellUUID="mocked-uuid"
-        key="0"
-        skipButtons={false}
-        style={
-          {
-            "height": 42,
-            "width": 56,
-          }
-        }
-        uri="http://urlOfTheImage.net/channelLogo.png"
-      />
-    </View>
-  </View>
-</View>
-`;
-
-exports[`masterCellBuilder when using default options renders correctly 1`] = `
-<View>
-  <Memo(MasterCell)
-    item={
-      {
-        "author": {
-          "name": "John Doe",
-        },
-        "id": "A1234",
-        "media_group": [
-          {
-            "media_item": [
-              {
-                "key": "image_base",
-                "src": "http://urlOfTheImage.net/img.png",
-              },
-            ],
-            "type": "image",
-          },
-          {
-            "media_item": [
-              {
-                "key": "logo_thumbnail",
-                "src": "http://urlOfTheImage.net/channelLogo.png",
-              },
-            ],
-            "type": "thumbnail",
-          },
-        ],
-        "published": "2019/03/17 02:17:46 +0000",
-        "summary": "Summary of the test entry",
-        "title": "Test Entry",
-        "type": {
-          "value": "feed",
-        },
-      }
-    }
-  />
-</View>
-`;
-
-exports[`masterCellBuilder when using default options returns a function 1`] = `
-{
-  "$$typeof": Symbol(react.memo),
-  "compare": null,
-  "hasFocusableInside": [Function],
-  "type": [Function],
-}
-`;

package/Components/MasterCell/__tests__/elementMapper.test.js

@@ -1,20 +1,33 @@
 import * as R from "ramda";
 import * as React from "react";
 import { View } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 import { elementMapper } from "../elementMapper";
 import { elements } from "./testElements";
 import { defaultComponents } from "../DefaultComponents";
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+);
+
 describe("elementMapper", () => {
   it("renders the nodes", () => {
-    const wrapper = shallow(
+    const wrapper = render(
       <View key={1}>
-        {R.map(elementMapper(defaultComponents, { testProp: true }), elements)}
+        {R.map(
+          elementMapper(
+            Object.entries(defaultComponents).reduce((acc, [key]) => {
+              acc[key] = View;
+
+              return acc;
+            }, {}),
+            { testProp: true }
+          ),
+          elements
+        )}
       </View>
     );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });