@applicaster/zapp-react-native-ui-components 14.0.0-alpha.6242515303 → 14.0.0-alpha.6391068513

package/Components/MasterCell/utils/index.ts

@@ -8,6 +8,8 @@ import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -190,8 +192,18 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
-  return isCellSelected(item, behavior);
+export const isSelected = ({
+  item,
+  screenRoute,
+  screenStateStore,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  screenStateStore: ScreenStateStore;
+  behavior?: Behavior;
+}) => {
+  return isCellSelected({ item, screenRoute, screenStateStore, behavior });
 };
 
 export const useCellState = ({
@@ -204,9 +216,17 @@ export const useCellState = ({
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
+  const router = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const _isSelected = useMemo(
-    () => isSelected(item, behavior),
+    () =>
+      isSelected({
+        item,
+        screenRoute: router?.pathname,
+        screenStateStore,
+        behavior,
+      }),
     [behavior, item, lastUpdate]
   );
 

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

@@ -19,29 +19,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 }),

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
@@ -88,7 +92,7 @@ export const VideoModalMode = {
   MAXIMIZED: "MAXIMIZED",
   MINIMIZED: "MINIMIZED",
   FULLSCREEN: "FULLSCREEN",
-};
+} as const;
 
 export type PlayNextData = {
   state: PlayNextState;
@@ -127,7 +131,7 @@ const webStyles = {
   playerScreen: {
     flex: 1,
     height: "100vh",
-    background: "black",
+    backgroundColor: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -145,7 +149,6 @@ const nativeStyles = {
   },
   playerScreen: {
     flex: 1,
-    backgroundColor: "black",
     overflow: "hidden",
   },
   playerWrapper: {
@@ -260,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 });
 
@@ -390,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(() => {
@@ -509,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 });
 
@@ -565,8 +568,9 @@ const PlayerContainerComponent = (props: Props) => {
   const isInlineTV = isInlineTVUtil(screenData);
 
   const inline =
-    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
-    isInlineTV;
+    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(
+      mode as any
+    ) || isInlineTV;
 
   const value = React.useMemo(
     () => ({ playerId: state.playerId }),
@@ -587,7 +591,11 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
+    if (
+      screen_background_color &&
+      mode !== VideoModalMode.FULLSCREEN &&
+      isTV()
+    ) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -617,6 +625,8 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
+  const pointerEventsProp = mode === "MINIMIZED" ? "box-none" : "auto";
+
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -627,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}
@@ -637,14 +647,17 @@ const PlayerContainerComponent = (props: Props) => {
                 preferredFocus
                 shouldUsePreferredFocus
                 groupId={groupId}
+                pointerEvents={pointerEventsProp}
               >
                 {/* Video player and components */}
                 <View
                   style={styles.playerScreen}
                   testID={"player-screen-container"}
+                  pointerEvents={pointerEventsProp}
                 >
                   {/* Player container */}
                   <View
+                    pointerEvents={pointerEventsProp}
                     style={[
                       styles.playerWrapper,
                       // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals

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";

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -286,7 +286,6 @@ function ComponentsMapComponent(props: Props) {
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
-            listKey={riverId}
             keyExtractor={keyExtractor}
             renderItem={renderRiverItem}
             data={riverComponents}

package/Components/River/RefreshControl.tsx

@@ -10,11 +10,13 @@ import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/locali
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useCurrentScreenData";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-import { useDispatch } from "react-redux";
 import { useShallow } from "zustand/react/shallow";
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  ZappPipes,
+  useAppDispatch,
+} from "@applicaster/zapp-react-native-redux";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -61,7 +63,7 @@ export const usePullToRefresh = (
 ) => {
   const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const [refreshing, setRefreshing] = React.useState(false);
 
@@ -81,7 +83,7 @@ export const usePullToRefresh = (
     if (refreshing && !isPipesV1) {
       feeds.forEach((feed) => {
         dispatch(
-          loadPipesData(feed, {
+          ZappPipes.loadPipesData(feed, {
             silentRefresh: true,
             clearCache: true,
             callback: () => {

package/Components/River/TV/River.tsx

@@ -4,10 +4,6 @@ import * as React from "react";
 import { Text } from "react-native";
 import * as R from "ramda";
 
-import {
-  useFeedLoader,
-  useLayoutVersion,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
@@ -21,6 +17,7 @@ type Props = {
   screenId: string;
   screenData: ZappRiver | ZappEntry;
   feedUrl?: string;
+  feedData?: PipesDataObject["data"];
   extraProps?: any;
   screenResolverExtraProps?: any;
   componentsMapExtraProps?: any;
@@ -32,7 +29,7 @@ type Props = {
 export const River = (props: Props) => {
   const {
     screenId,
-    feedUrl,
+    feedData,
     extraProps,
     screenResolverExtraProps,
     componentsMapExtraProps,
@@ -46,7 +43,6 @@ export const River = (props: Props) => {
     useSetNavbarState();
 
   const rivers = useRivers();
-  const isV2 = useLayoutVersion({ isV2: true });
 
   const river = React.useMemo(() => rivers?.[screenId], [screenId]);
 
@@ -55,17 +51,6 @@ export const River = (props: Props) => {
     [screenId]
   );
 
-  const connectedScreenUrl = React.useMemo(() => {
-    // Avoid using feedUrl or content.src on layouts v2
-    if (isV2) return null;
-
-    return feedUrl || R.path(["content", "src"], screenData);
-  }, [feedUrl, screenData]);
-
-  const { data: feedData } = useFeedLoader({
-    feedUrl: connectedScreenUrl,
-  });
-
   const stringOrEmpty = (value: string | number | undefined): string =>
     R.isNil(value) ? "" : String(value);
 

package/Components/River/TV/index.tsx

@@ -2,8 +2,10 @@ import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
 import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
+import { withRiverDataLoader } from "./withRiverDataLoader";
 
 export const River = compose(
   withTvEventHandler,
-  withComponentsMapOffsetContext
+  withComponentsMapOffsetContext,
+  withRiverDataLoader
 )(RiverComponent);

package/Components/River/TV/withPipesV1DataLoader.tsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { path } from "ramda";
+
+import {
+  useFeedLoader,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+
+type Props = {
+  screenId: string;
+  screenData: ZappRiver | ZappEntry;
+  feedUrl?: string;
+  river?: ZappRiver | ZappEntry;
+};
+
+export const withPipesV1DataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithPipesV1DataLoaderComponent(props: Props) {
+    const { screenId, feedUrl } = props;
+
+    const rivers = useRivers();
+
+    const river = React.useMemo(() => rivers?.[screenId], [screenId]);
+
+    const screenData = React.useMemo(
+      () => props.screenData || props.river || river,
+      [screenId]
+    );
+
+    const connectedScreenUrl = useMemo(() => {
+      // Avoid using feedUrl or content.src on layouts v2
+
+      return feedUrl || path(["content", "src"], screenData);
+    }, [feedUrl, screenData]);
+
+    const { data: feedData } = useFeedLoader({
+      feedUrl: connectedScreenUrl,
+    });
+
+    return <WrappedComponent {...props} feedData={feedData} />;
+  };
+};

package/Components/River/TV/withRiverDataLoader.tsx

@@ -0,0 +1,17 @@
+import { useLayoutVersion } from "@applicaster/zapp-react-native-utils/reactHooks";
+import React from "react";
+import { withPipesV1DataLoader } from "./withPipesV1DataLoader";
+
+export const withRiverDataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithRiverDataLoaderComponent(props) {
+    const isV2 = useLayoutVersion({ isV2: true });
+
+    if (isV2) {
+      return <WrappedComponent {...props} />;
+    }
+
+    return withPipesV1DataLoader(WrappedComponent)(props);
+  };
+};

package/Components/River/TV/withTVEventHandler.tsx

@@ -8,7 +8,7 @@ export const withTvEventHandler = (Component) => {
   return function WithTVEventHandler(props) {
     const navigator = useNavigation();
 
-    const remoteHandler = (_, event) => {
+    const remoteHandler = (event) => {
       const { eventType } = event;
 
       const canGoBack = navigator.canGoBack();

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

@@ -159,6 +159,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     >
       <View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >
@@ -174,6 +175,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >

package/Components/River/index.tsx

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { withRiver } from "../../Decorators/RiverResolver";
 import { withNavigator } from "../../Decorators/Navigator";

package/Components/Screen/__tests__/Screen.test.tsx

@@ -68,12 +68,33 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/state/useRivers",
+  () => ({
+    useRivers: jest.fn(() => ({
+      rivers: [{ id: "testId", name: "Test River" }],
+    })),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useIsScreenActive: jest.fn().mockReturnValue(true),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
+    data: { screen: { id: "testId" } },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
@@ -84,17 +105,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
     id: "testId",
     navigations: [{ id: "testId", category: "nav_bar" }],
   })),
-  useNavigation: jest.fn(() => ({
-    canGoBack: () => false,
-    currentRoute: "/river/testId",
-    activeRiver: { id: "testId" },
-    screenData: { id: "testId" },
-    data: { screen: { id: "testId" } },
-  })),
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
-  })),
   useDimensions: jest.fn(() => ({
     width: 1920,
     height: 1080,
@@ -102,10 +112,11 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks/usePickFromState", () => {
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
   const View = jest.requireActual("react-native").View;
 
   return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
     usePickFromState: () => ({
       plugins: [
         {