@applicaster/zapp-react-native-ui-components 13.0.0-alpha.5771418585 → 13.0.0-alpha.5953040243

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

@@ -1,16 +1,25 @@
 import * as React from "react";
 import { View } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 import { testCellStyle } from "./TestCellStyle";
 import { singleView } from "./SingleView";
 import { entry } from "./testEntry";
 import { singleElement } from "./testElements";
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useRoute: jest.fn(() => ({ screenData: { id: "test" } })),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
+  () => ({
+    useRoute: jest.fn(() => ({ screenData: { id: "test" } })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn(() => true),
+  })
+);
 
 jest.mock("@applicaster/zapp-react-native-utils/screenState", () => ({
   useScreenState: jest.fn(() => ({
@@ -27,36 +36,27 @@ describe("masterCellBuilder", () => {
   describe("when using default options", () => {
     const MasterCell = masterCellBuilder({ cellConfiguration: testCellStyle });
 
-    it("returns a function", () => {
-      expect(MasterCell).toMatchSnapshot();
-    });
-
     it("renders correctly", () => {
-      const wrapper = shallow(
-        <View>
+      const wrapper = renderWithProviders(
+        <View testID="master-cell">
           <MasterCell item={entry} />
         </View>
       );
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
-
-    it("can be invoked as a React Component", () => {
-      const wrapper = shallow(<MasterCell item={entry} state={null} />);
-
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.getByTestId("master-cell").children[0]).toBeDefined();
     });
   });
 
-  describe("when using custom containerStyle", () => {
+  describe.skip("when using custom containerStyle", () => {
     const MasterCell = masterCellBuilder({
       cellConfiguration: singleView,
       containerStyle: { backgroundColor: "black" },
     });
 
     it("renders correctly", () => {
-      const renderer = shallow(<MasterCell item={entry} />);
-      expect(shallowToJson(renderer)).toMatchSnapshot();
+      renderWithProviders(<MasterCell item={entry} />);
+
+      // TODO define the test need
     });
   });
 
@@ -69,14 +69,14 @@ describe("masterCellBuilder", () => {
     });
 
     it("renders correctly", () => {
-      const renderer = shallow(<MasterCell item={entry} />);
-      expect(shallowToJson(renderer)).toMatchSnapshot();
+      renderWithProviders(<MasterCell item={entry} />);
+      // TODO define the test need
 
       expect(dataAdapter).toHaveBeenCalledWith(singleView);
     });
   });
 
-  describe("when using custom default components", () => {
+  describe.skip("when using custom default components", () => {
     // the collapsable prop is added here to easily check from the snapshot that the mock
     // component is being used instead of the default one
     const CustomView = jest.fn((props) => <View {...props} collapsable />);
@@ -88,8 +88,8 @@ describe("masterCellBuilder", () => {
     });
 
     it("renders correctly", () => {
-      const renderer = shallow(<MasterCell item={entry} />);
-      expect(shallowToJson(renderer)).toMatchSnapshot();
+      renderWithProviders(<MasterCell item={entry} />);
+      // TODO define the test need
     });
   });
 });

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -0,0 +1,131 @@
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
+import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import React, { useEffect } from "react";
+import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
+import { BehaviorSubject } from "rxjs";
+import { masterCellLogger } from "../logger";
+
+const parseContextKey = (key: string): string | null => {
+  if (!key?.startsWith("@{ctx/")) return null;
+
+  return key.substring("@{ctx/".length, key.length - 1);
+};
+
+const getDataSourceProvider = (
+  behavior: Behavior
+): BehaviorSubject<string[] | string> | null => {
+  if (!behavior) return null;
+
+  const selection = String(behavior.current_selection);
+  const contextKey = parseContextKey(selection);
+
+  if (contextKey) {
+    if (behavior.select_mode === "multi") {
+      return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
+    }
+
+    if (behavior.select_mode === "single") {
+      return StorageSingleValueProvider.getProvider(contextKey).getObservable();
+    }
+  }
+
+  if (behavior.selection_source === "@{push/topics}") {
+    return PushTopicManager.getInstance().getEntryObservable();
+  }
+
+  return null;
+};
+
+export const useBehaviorUpdate = (behavior: Behavior) => {
+  const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
+  const player = usePlayer();
+
+  const triggerUpdate = () => setLastUpdate(Date.now());
+
+  useEffect(() => {
+    if (!behavior) return;
+
+    const dataSource = getDataSourceProvider(behavior);
+
+    if (dataSource) {
+      const subscription = dataSource.subscribe(triggerUpdate);
+
+      return () => subscription.unsubscribe();
+    }
+  }, [behavior]);
+
+  useEffect(() => {
+    if (!behavior || !player || behavior.selection_source !== "now_playing") {
+      return;
+    }
+
+    const subscription = player.getEntryObservable().subscribe(triggerUpdate);
+
+    return () => subscription.unsubscribe();
+  }, [behavior, player]);
+
+  return lastUpdate;
+};
+
+export const isCellSelected = (
+  id: string | number,
+  behavior?: Behavior
+): boolean => {
+  if (!behavior) return false;
+
+  if (behavior.selection_source === "now_playing") {
+    const player = playerManager.getActivePlayer();
+
+    return player?.entry?.id === id;
+  }
+
+  if (behavior.selection_source === "@{push/topics}") {
+    if (behavior.select_mode === "single") {
+      masterCellLogger.warning(
+        "Unexpected single selection mode for push topics"
+      );
+    }
+
+    const tags = PushTopicManager.getInstance().getRegisteredTags();
+
+    return tags.includes(String(id));
+  }
+
+  const selection = String(behavior.current_selection);
+  const contextKey = parseContextKey(selection);
+
+  if (contextKey) {
+    if (behavior.select_mode === "single") {
+      const selectedItem =
+        StorageSingleValueProvider.getProvider(contextKey)?.getValue();
+
+      return selectedItem === String(id);
+    }
+
+    if (behavior.select_mode === "multi") {
+      const selectedItems =
+        StorageMultiSelectProvider.getProvider(contextKey)?.getSelectedItems();
+
+      return selectedItems?.includes(String(id));
+    }
+  }
+
+  if (behavior.select_mode === "single") {
+    return behavior.current_selection === id;
+  }
+
+  if (
+    behavior.select_mode === "multi" &&
+    Array.isArray(behavior.current_selection)
+  ) {
+    const currentSelection: string[] = behavior.current_selection.map(
+      (item): string => String(item)
+    );
+
+    return currentSelection.includes(String(id));
+  }
+
+  return false;
+};

package/Components/MasterCell/utils/index.ts

@@ -1,16 +1,13 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import * as R from "ramda";
 import validateColor from "validate-color";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import { masterCellLogger } from "../logger";
-import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -194,130 +191,7 @@ export const getFocusedButtonId = (focusable) => {
 };
 
 export const isSelected = (id: string | number, behavior?: Behavior) => {
-  if (!behavior) {
-    return false;
-  }
-
-  if (behavior?.selection_source === "now_playing") {
-    const player = playerManager.getActivePlayer();
-
-    if (player?.entry?.id === id) {
-      return true;
-    }
-  }
-
-  if (behavior?.select_mode === "single") {
-    return behavior.current_selection === id;
-  }
-
-  if (behavior?.select_mode === "multi") {
-    // TODO: Use generic resolver source
-
-    if (behavior.selection_source === "@{push/topics}") {
-      const tags = PushTopicManager.getInstance().getRegisteredTags();
-
-      return tags.includes(String(id));
-    }
-
-    if (Array.isArray(behavior.current_selection)) {
-      return behavior.current_selection.includes(id);
-    }
-
-    const currentSelection = String(behavior.current_selection);
-
-    if (currentSelection?.startsWith("@{ctx/")) {
-      const keyWithoutCtx = currentSelection.substring(
-        "@{ctx/".length,
-        currentSelection.length - 1
-      );
-
-      const selectedItems =
-        StorageMultiSelectProvider.getProvider(
-          keyWithoutCtx
-        )?.getSelectedItems();
-
-      return selectedItems?.includes(String(id));
-    }
-  }
-
-  return false;
-};
-
-export const useBehaviorUpdate = (behavior: Behavior) => {
-  const [lastUpdate, setLastUpdate] = React.useState(null);
-
-  const player = usePlayer();
-
-  const triggerUpdate = () => {
-    setLastUpdate(Date.now());
-  };
-
-  // TODO: Create generic RX to state update
-  useEffect(() => {
-    // TODO: Use generic resolver source
-    if (!behavior) {
-      return;
-    }
-
-    const currentSelection = String(behavior.current_selection);
-
-    if (currentSelection?.startsWith("@{ctx/")) {
-      const keyWithoutCtx = currentSelection.substring(
-        "@{ctx/".length,
-        currentSelection.length - 1
-      );
-
-      if (keyWithoutCtx) {
-        const subscription = StorageMultiSelectProvider.getProvider(
-          keyWithoutCtx
-        )
-          .getObservable()
-          .subscribe(() => {
-            triggerUpdate();
-          });
-
-        return () => {
-          subscription.unsubscribe();
-        };
-      }
-    }
-  }, [behavior]);
-
-  useEffect(() => {
-    if (!behavior) {
-      return;
-    }
-
-    if (behavior?.selection_source === "@{push/topics}") {
-      const subscription = PushTopicManager.getInstance()
-        .getEntryObservable()
-        .subscribe(() => {
-          triggerUpdate();
-        });
-
-      return () => {
-        subscription.unsubscribe();
-      };
-    }
-  }, [behavior]);
-
-  useEffect(() => {
-    if (!behavior) {
-      return;
-    }
-
-    if (behavior?.selection_source === "now_playing" && player) {
-      const subscription = player.getEntryObservable().subscribe(() => {
-        triggerUpdate();
-      });
-
-      return () => {
-        subscription.unsubscribe();
-      };
-    }
-  }, [behavior, player]);
-
-  return lastUpdate;
+  return isCellSelected(id, behavior);
 };
 
 export const useCellState = ({

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { Text, Animated } from "react-native";
 
-import { shallow } from "enzyme";
 import renderer from "react-test-renderer";
 
 jest.useFakeTimers();
@@ -40,10 +39,6 @@ const {
 } = require("../NotificationView");
 
 describe("NotificationView", () => {
-  it("renders", () => {
-    shallow(<NotificationView dismiss={dismiss} />);
-  });
-
   it("Show online message when Online", () => {
     const component = renderer.create(
       <NotificationView online dismiss={dismiss} />

package/Components/PlayerImageBackground/index.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect, useState } from "react";
 import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
@@ -12,6 +12,7 @@ import {
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
+  docked?: boolean;
   imageStyle?: { [K: string]: any };
   imageKey?: string;
   defaultImageDimensions?: { [K: string]: any };
@@ -23,6 +24,7 @@ const PlayerImageBackgroundComponent = ({
   entry,
   children,
   style,
+  docked,
   imageStyle,
   imageKey,
   defaultImageDimensions,
@@ -34,8 +36,22 @@ const PlayerImageBackgroundComponent = ({
 
   const { playerAnimationState } = useModalAnimationContext();
 
+  const [lastNonNullAnimationState, setLastNonNullAnimationState] =
+    useState(playerAnimationState);
+
+  useEffect(() => {
+    if (playerAnimationState !== null) {
+      setLastNonNullAnimationState(playerAnimationState);
+    }
+  }, [playerAnimationState]);
+
   if (!source) return <>{children}</>;
 
+  const imageBackgroundStyle =
+    lastNonNullAnimationState !== PlayerAnimationStateEnum.minimize && !docked
+      ? defaultImageDimensions
+      : imageSize;
+
   return (
     <View
       style={
@@ -45,13 +61,17 @@ const PlayerImageBackgroundComponent = ({
       }
     >
       <AnimationComponent
-        style={style}
+        style={
+          playerAnimationState === PlayerAnimationStateEnum.maximaze
+            ? defaultImageDimensions
+            : style
+        }
         animationType={ComponentAnimationType.player}
         additionalData={defaultImageDimensions}
       >
         <ImageBackground
           resizeMode="cover"
-          style={imageSize}
+          style={imageBackgroundStyle}
           imageStyle={imageStyle}
           source={source}
         >

package/Components/River/TV/index.tsx

@@ -1,4 +1,9 @@
+import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
 import { withTvEventHandler } from "./withTVEventHandler";
+import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 
-export const River = withTvEventHandler(RiverComponent);
+export const River = compose(
+  withTvEventHandler,
+  withComponentsMapOffsetContext
+)(RiverComponent);

package/Components/River/__tests__/__snapshots__/river.test.js.snap

@@ -1,89 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`When River has a general_content type <River /> renders correctly 1`] = `
-<ContextProvider
-  value={null}
->
-  <RiverWithData
-    appData={
-      {
-        "layoutVersion": "v1",
-      }
-    }
-    dispatch={[Function]}
-    rivers={
-      {
-        "A1234": {
-          "home": true,
-          "id": "A1234",
-          "name": "foo",
-          "type": "general_content",
-          "ui_components": [
-            {
-              "component_type": "hero",
-            },
-            {
-              "component_type": "grid",
-            },
-          ],
-        },
-        "B4567": {
-          "id": "B4567",
-        },
-        "C0987": {
-          "home": false,
-          "id": "C0987",
-          "name": "Some-Screen-Plugin",
-          "type": "some-screen-plugin",
-          "ui_components": [],
-        },
-      }
-    }
-    screenId="A1234"
-    store={
-      {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      }
-    }
-  />
-</ContextProvider>
-`;
-
-exports[`When River has a general_content type <RiverComponent /> renders correctly 1`] = `
-<GeneralContentScreen
-  groupId="ZF-C4"
-  screenId="A1234"
-/>
-`;
-
-exports[`When River has any other type other than general_content <RiverComponent /> renders correctly 1`] = `
-<WithProvider
-  screenData={
+exports[`When River has a general_content type renders River component correctly 1`] = `
+<View
+  onLayout={[Function]}
+  style={
     {
-      "groupId": undefined,
-      "home": false,
-      "id": "C0987",
-      "name": "Some-Screen-Plugin",
-      "type": "some-screen-plugin",
-      "ui_components": [],
+      "flex": 1,
     }
   }
-  screenId="C0987"
-  screenType="some-screen-plugin"
-/>
-`;
-
-exports[`When River has feed url <RiverComponent /> renders correctly 1`] = `
-<Connect(FeedLoaderComponent)
-  feedUrl="https://some-feed-url.net"
-  refreshCallback={[Function]}
-  refreshing={false}
+  testID="on-layout-view"
 >
-  <Component />
-</Connect(FeedLoaderComponent)>
+  <View
+    style={
+      {
+        "display": "none",
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      screenId="A1234"
+      testID="general-content-screen"
+    />
+  </View>
+</View>
 `;