@applicaster/zapp-react-native-utils 15.0.0-rc.98 → 15.1.0-alpha.1852552014

package/pipesUtils/withPipesEndpoint.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef, RefObject } from "react";
+import URL from "url";
+
+import { useBuildPipesUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
+
+/**
+ * Merges the query params resolved from a pipes endpoint context into the url.
+ * Returns the url unchanged when there is nothing to merge.
+ */
+export function buildUrlWithQuery(url: string, requestParams): string {
+  if (!url || !requestParams?.params) {
+    return url;
+  }
+
+  const parsedURL = URL.parse(url, true);
+
+  parsedURL.query = { ...parsedURL.query, ...requestParams.params };
+  parsedURL.search = null;
+
+  return URL.format(parsedURL);
+}
+
+type Props = {
+  uri: string;
+} & Record<string, unknown>;
+
+/**
+ * HOC that resolves the wrapped component's `uri` against its matching Zapp
+ * Pipes endpoint. Endpoint context keys are added as query params (merged into
+ * the uri) and as request `headers`. Rendering is deferred until the context
+ * has been resolved so the component never loads without its required headers.
+ */
+export function withPipesEndpoint(Component) {
+  function WithPipesEndpoint(props: Props, ref: RefObject<unknown>) {
+    const { requestParams } = useBuildPipesUrl({ url: props.uri });
+
+    if (requestParams !== null) {
+      const urlWithQuery = buildUrlWithQuery(props.uri, requestParams);
+
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          uri={urlWithQuery}
+          headers={requestParams.headers || {}}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  return forwardRef(WithPipesEndpoint);
+}

package/playerUtils/index.ts

@@ -9,6 +9,16 @@ import { Dimensions } from "react-native";
 
 export { getPlayerActionButtons } from "./getPlayerActionButtons";
 
+export const HLS_MIME_TYPES = [
+  "application/x-mpegURL",
+  "application/vnd.apple.mpegurl",
+];
+
+export const STREAMING_VIDEO_MIME_TYPES = [
+  ...HLS_MIME_TYPES,
+  "application/dash+xml",
+];
+
 /**
  * Gets duration value from player manager, and from extensions
  * then checks whether the value from either is a not a valid number
@@ -27,7 +37,7 @@ export function isLiveLegacy(content) {
   ]);
 
   const durationFromExt = R.path(["extensions", "duration"], content);
-  const durationFromMgr = playerManager.getDuration();
+  const durationFromMgr = playerManager.getInstanceController()?.getDuration();
   const duration = Math.floor(durationFromExt || durationFromMgr);
 
   const isLive = R.anyPass([isNotaValidNumber, R.lte(R.__, 0)])(duration);
@@ -71,7 +81,9 @@ function isLiveByManager(): boolean {
     return true;
   }
 
-  const durationFromPlayerManager = playerManager.getDuration();
+  const durationFromPlayerManager = playerManager
+    .getInstanceController()
+    ?.getDuration();
 
   return isLiveByDuration(durationFromPlayerManager);
 }
@@ -80,6 +92,16 @@ export function isLive(entry: ZappEntry): boolean {
   return isEntryLive(entry) || isLiveByManager();
 }
 
+export const isVideoItem = (item: Option<ZappEntry>) => {
+  const contentType = item?.content?.type;
+
+  return (
+    isString(contentType) &&
+    (contentType.includes("video") ||
+      STREAMING_VIDEO_MIME_TYPES.includes(contentType))
+  );
+};
+
 export const isAudioItem = (item: Option<ZappEntry>) => {
   if (
     isString(item?.content?.type) &&

package/pluginUtils/index.ts

@@ -6,7 +6,6 @@ import { deprecationMessage } from "../appUtils";
 
 import { pluginUtilsLogger } from "./logger";
 import { platformSelect } from "../reactUtils";
-import { get } from "../utils";
 
 type PluginModule = any;
 type Plugin = {
@@ -30,10 +29,7 @@ export function getComponentModule({
   components: ComponentsMap;
   plugins: Plugin[] | QuickBrickPlugin[];
 }) {
-  const component = R.compose(
-    R.prop(R.__, components),
-    toPascalCase
-  )(componentType);
+  const component = components[toPascalCase(componentType)];
 
   if (component) {
     return component;
@@ -60,7 +56,9 @@ export function findComponentByType({
     ? R.compose(...R.reverse(decorators))
     : decorators;
 
-  const component = getComponentModule({ componentType, components, plugins });
+  const module = getComponentModule({ componentType, components, plugins });
+
+  const component = module?.Component || module;
 
   return R.unless(R.isNil, applyDecorators)(component);
 }
@@ -255,6 +253,3 @@ const getPluginType = R.pathOr("unknown_plugin_type", [
 
 export const isPlayerPlugin = (routeState): boolean =>
   getPluginType(routeState) === "player";
-
-export const getPluginModuleUrlScheme = (plugin) =>
-  get(plugin, ["module", "urlScheme"]);

package/reactHooks/advertising/index.ts

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import * as R from "ramda";
 
 import { useNavigation } from "../navigation";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { dismissModal, openModal } from "../../modalState";
 
@@ -16,7 +16,7 @@ const ModalContainer = platformSelect({
 
 export function useAdvertisingInterstitial() {
   const { screenData, currentRoute } = useNavigation();
-  const plugins = usePlugins();
+  const { plugins } = usePickFromState();
 
   return useEffect(() => {
     // TODD: typing problem: fix any type

package/reactHooks/app/__tests__/useAppState.test.ts

@@ -1,5 +1,5 @@
 import EventEmitter from "events";
-import { renderHook, act } from "@testing-library/react-native";
+import { renderHook, act } from "@testing-library/react-hooks";
 import { useAppState } from "../useAppState";
 
 const emitter = new EventEmitter();

package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
-import { renderHook, act, waitFor } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
+import { act, waitFor } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { useTrackedView } from "../useTrackedView";

package/reactHooks/casting/index.ts

@@ -0,0 +1 @@
+export { useIsCasting } from "./useIsCasting";

package/reactHooks/casting/useIsCasting.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
+
+const fakeEntry: any = {
+  title: "Chromecast use is casting fake entry",
+  id: "quick-brick-use-is-casting-fake-entry",
+};
+
+/**
+ * Returns the cast action state connection status, does not update when app is in background on Apple platforms
+ * On other platforms, it continues to check the cast action state even when the app is in background
+ */
+export const useIsCasting = () => {
+  const actionContext = useActions(CHROMECAST_IDENTIFIER);
+  const appState = useAppState();
+  const isAppInForeground = appState === "active";
+  const shouldOnlyUpdateInForeground = isApplePlatform();
+
+  const [castActionState, setCastActionState] = React.useState(
+    !actionContext ? null : actionContext.initialEntryState(fakeEntry)
+  );
+
+  React.useEffect(() => {
+    if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+      if (actionContext && castActionState === null) {
+        setCastActionState(actionContext.initialEntryState(fakeEntry));
+      }
+    }
+  }, [
+    actionContext,
+    setCastActionState,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  React.useEffect(() => {
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext?.addListener(String(fakeEntry.id), (state) => {
+        // Only check foreground state on Apple platforms
+        if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+          setCastActionState(state);
+        }
+      });
+    }
+  }, [
+    setCastActionState,
+    actionContext,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  return !!castActionState?.connected;
+};

package/reactHooks/cell-click/__tests__/index.test.js

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { cleanup, renderHook, waitFor } from "@testing-library/react-native";
+import { cleanup, renderHook } from "@testing-library/react-hooks";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
 import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
 
+import { waitFor } from "@testing-library/react-native";
+
 const mockNavigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),

package/reactHooks/componentsMap/index.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+
+const layoutReducer = (state, { payload }) => {
+  return state.map((item, index, _state) => ({
+    height: index === payload.index ? payload.height : item.height,
+    y:
+      index > 0
+        ? _state.slice(0, index).reduce((acc, value) => acc + value.height, 0)
+        : 0,
+  }));
+};
+
+export const useComponentsLayout = (count, onFinishLoadingVisible) => {
+  const [itemsLayout, dispatchItemLayout] = React.useReducer(
+    layoutReducer,
+    Array.from({ length: count }, () => ({ height: 0, y: 0 }))
+  );
+
+  const notified = React.useRef(false);
+  const [listHeight, setListHeight] = React.useState<number>(0);
+
+  const onItemLayout = React.useCallback(
+    (index) => (event) => {
+      const { height } = event.nativeEvent.layout;
+      dispatchItemLayout({ payload: { index, height } });
+    },
+    []
+  );
+
+  const onListLayout = React.useCallback((event) => {
+    const { height } = event.nativeEvent.layout;
+    setListHeight(height);
+  }, []);
+
+  React.useEffect(() => {
+    if (!notified.current) {
+      const finishLoadingVisible = !!itemsLayout.find(
+        (item) => item.y > listHeight
+      );
+
+      if (finishLoadingVisible) {
+        notified.current = true;
+        onFinishLoadingVisible?.();
+      }
+    }
+  }, [itemsLayout, listHeight]);
+
+  return React.useMemo(
+    () => ({
+      onItemLayout,
+      onListLayout,
+    }),
+    []
+  );
+};

package/reactHooks/configuration/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { renderHook, cleanup } from "@testing-library/react-native";
+import { renderHook, cleanup } from "@testing-library/react-hooks";
 import { ConfigurationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfigutaionContext";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 

package/reactHooks/connection/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook, cleanup } from "@testing-library/react-native";
+import { renderHook, cleanup } from "@testing-library/react-hooks";
 import { NetworkStatusContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NetworkStatusContext";
 
 const MockNetInfo = {

package/reactHooks/debugging/__tests__/index.test.js

@@ -27,20 +27,20 @@ describe("Debug utils", () => {
     it("should create new timer if timer with a label does not exist", () => {
       performanceNowMock.mockReturnValue(1000);
       time("timer1");
-      expect(timers.timer1).toBeDefined();
-      expect(timers.timer1.startTime).toBe(1000);
+      expect(timers["timer1"]).toBeDefined();
+      expect(timers["timer1"].startTime).toBe(1000);
     });
 
     it("should update start time of timer if timer with a label exists", () => {
       // First call to time()
       performanceNowMock.mockReturnValue(1000);
       time("timer1");
-      const previousStartTime = timers.timer1.startTime;
+      const previousStartTime = timers["timer1"].startTime;
 
       // Second call to time()
       performanceNowMock.mockReturnValue(2000);
       time("timer1");
-      const currentStartTime = timers.timer1.startTime;
+      const currentStartTime = timers["timer1"].startTime;
 
       expect(previousStartTime).toBe(1000);
       expect(currentStartTime).toBe(2000);

package/reactHooks/device/useIsTablet.tsx

@@ -1,23 +1,28 @@
 /* eslint react-native/split-platform-components: off */
 
 import { Platform, PlatformIOSStatic, NativeModules } from "react-native";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { F as alwaysFalse } from "ramda";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-export const useIsTablet = (): boolean => {
-  const platform = Platform.OS;
+const useIsTabletIos = (): boolean => {
+  const { isPad } = Platform as PlatformIOSStatic;
 
-  if (platform === "ios") {
-    const { isPad } = Platform as PlatformIOSStatic;
-
-    return Boolean(isPad);
-  }
-
-  if (platform === "android") {
-    const initialProps =
-      NativeModules.QuickBrickCommunicationModule?.initialProps;
+  return isPad;
+};
 
-    return toBooleanWithDefaultFalse(initialProps?.is_tablet);
-  }
+const useIsTabletAndroid = (): boolean => {
+  const { initialProps } = NativeModules.QuickBrickCommunicationModule;
 
-  return false;
+  return toBooleanWithDefaultFalse(initialProps?.is_tablet);
 };
+
+export const useIsTablet = platformSelect({
+  ios: useIsTabletIos,
+  android: useIsTabletAndroid,
+  lg_tv: alwaysFalse,
+  samsung_tv: alwaysFalse,
+  android_tv: alwaysFalse,
+  tvos: alwaysFalse,
+  default: alwaysFalse,
+});

package/reactHooks/device/useMemoizedIsTablet.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useIsTablet } from "./useIsTablet";
-import { useAppData } from "@applicaster/zapp-react-native-redux";
 
 export const useMemoizedIsTablet = () => {
   const isTablet = useIsTablet();
@@ -14,9 +14,9 @@ export const useMemoizedIsTablet = () => {
 };
 
 export const useIsTabletLandscape = (): boolean => {
-  const { isTabletPortrait } = useAppData();
+  const { appData } = usePickFromState(["appData"]);
 
   const isTablet = useIsTablet();
 
-  return isTablet && !isTabletPortrait;
+  return isTablet && !appData.isTabletPortrait;
 };

package/reactHooks/events/index.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { scrollEndReached$ } from "@applicaster/zapp-react-native-ui-components/events";
+import { filter } from "rxjs/operators";
+
+/**
+ * Subscribe to scroll-end-reached and call loadNextData only when this item is last in the river.
+ * Use in Grid/List so they load next page when the user scrolls to the end (river or tabs scroll container).
+ */
+export function useScrollEndReachedLoadNext(
+  isLast: boolean,
+  loadNextData: () => void
+): void {
+  React.useEffect(() => {
+    const sub = scrollEndReached$.pipe(filter(() => isLast)).subscribe(() => {
+      loadNextData();
+    });
+
+    return () => sub.unsubscribe();
+  }, [isLast, loadNextData]);
+}

package/reactHooks/feed/__tests__/useBatchLoading.test.tsx

@@ -1,7 +1,8 @@
-import { renderHook, waitFor } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
 import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { waitFor } from "@testing-library/react-native";
 
 jest.mock("../../navigation");
 
@@ -15,11 +16,7 @@ jest.mock(
   })
 );
 
-const getWrapper =
-  (store) =>
-  ({ children }) => (
-    <WrappedWithProviders store={store}>{children}</WrappedWithProviders>
-  );
+const wrapper = WrappedWithProviders;
 
 describe("useBatchLoading", () => {
   const data = [
@@ -66,7 +63,8 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper: getWrapper(store),
+      wrapper,
+      initialProps: { store },
     });
 
     const actions = (appStore.getStore() as any).getActions();
@@ -86,7 +84,7 @@ describe("useBatchLoading", () => {
     });
   });
 
-  it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", async () => {
+  it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", () => {
     const store = {
       zappPipes: {
         url1: {
@@ -112,14 +110,13 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper: getWrapper(store),
+      wrapper,
+      initialProps: { store },
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    await waitFor(() => {
-      expect(actions).toHaveLength(1);
-    });
+    expect(actions).toHaveLength(1);
 
     expect(actions[0]).toMatchObject({
       type: "ZAPP_PIPES_REQUEST_START",
@@ -127,7 +124,7 @@ describe("useBatchLoading", () => {
     });
   });
 
-  it("loadPipesData has been called when no data cached", async () => {
+  it("loadPipesData has been called when no data cached", () => {
     const store = {
       zappPipes: {},
       test: "true",
@@ -137,17 +134,16 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper: getWrapper(store),
+      wrapper,
+      initialProps: { store },
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    await waitFor(() => {
-      expect(actions).toHaveLength(3);
-    });
+    expect(actions).toHaveLength(3);
   });
 
-  it("initial batch ready when all initial items loaded", async () => {
+  it("initial batch ready when all initial items loaded", () => {
     const store = {
       zappPipes: {
         url1: {
@@ -173,15 +169,13 @@ describe("useBatchLoading", () => {
 
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
-      { wrapper: getWrapper(store) }
+      { wrapper, initialProps: { store } }
     );
 
-    await waitFor(() => {
-      expect(result.current).toBe(true);
-    });
+    expect(result.current).toBe(true);
   });
 
-  it("gallery-qb: loadPipesData should be called only once for first component in the gallery", async () => {
+  it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
     const store = {
       zappPipes: {},
       test: "true",
@@ -204,17 +198,16 @@ describe("useBatchLoading", () => {
     ];
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper: getWrapper(store),
+      wrapper,
+      initialProps: { store },
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    await waitFor(() => {
-      expect(actions).toHaveLength(1);
-    });
+    expect(actions).toHaveLength(1);
   });
 
-  it("gallery-qb: initial batch ready when all initial items loaded", async () => {
+  it("gallery-qb: initial batch ready when all initial items loaded", () => {
     const store = {
       zappPipes: {
         url1: {
@@ -240,12 +233,10 @@ describe("useBatchLoading", () => {
 
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
-      { wrapper: getWrapper(store) }
+      { wrapper, initialProps: { store } }
     );
 
-    await waitFor(() => {
-      expect(result.current).toBe(true);
-    });
+    expect(result.current).toBe(true);
   });
 });
 

package/reactHooks/feed/__tests__/useBuildPipesUrl.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import { encodeParams } from "@applicaster/zapp-pipes-v2-client/src/utils";
 
 const appData = {
@@ -42,26 +42,26 @@ describe("useBuildPipesUrl", () => {
       build: jest.fn(() => Promise.resolve(buildResult)),
     };
 
-    const { result } = renderHook(() =>
+    const { result, waitForNextUpdate } = renderHook(() =>
       useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
     expect(result.current.requestParams).toBeNull();
 
-    await waitFor(() => {
-      expect(result.current.requestParams).toEqual(
-        expect.objectContaining({
-          params: {
-            version: appData.version_name,
-            ctx: encodeParams({ platform: appData.platform }),
-          },
-          headers: {
-            SDK: appData.sdk_version,
-          },
-        })
-      );
-    });
+    await waitForNextUpdate();
+
+    expect(result.current.requestParams).toEqual(
+      expect.objectContaining({
+        params: {
+          version: appData.version_name,
+          ctx: encodeParams({ platform: appData.platform }),
+        },
+        headers: {
+          SDK: appData.sdk_version,
+        },
+      })
+    );
   });
 
   it("returns empty object if url is not in endpoints", async () => {
@@ -81,15 +81,15 @@ describe("useBuildPipesUrl", () => {
       build: jest.fn(() => Promise.resolve(buildResult)),
     };
 
-    const { result } = renderHook(() =>
+    const { result, waitForNextUpdate } = renderHook(() =>
       useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");
     expect(result.current.requestParams).toBeNull();
 
-    await waitFor(() => {
-      expect(result.current.requestParams).toEqual({});
-    });
+    await waitForNextUpdate();
+
+    expect(result.current.requestParams).toEqual({});
   });
 });