@applicaster/zapp-react-native-ui-components 14.0.0-alpha.4517121861 → 14.0.0-alpha.4520122433

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -1,28 +1,58 @@
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/StorageSingleSelectProvider";
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/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";
 import get from "lodash/get";
-
-const parseContextKey = (key: string): string | null => {
-  if (!key?.startsWith("@{ctx/")) return null;
-
-  return key.substring("@{ctx/".length, key.length - 1);
+import { ScreenMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenStateMultiSelectProvider";
+import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+
+const parseContextKey = (
+  key: string,
+  context: string = "ctx"
+): string | null => {
+  if (!key?.startsWith(`@{${context}/`)) return null;
+
+  return key.substring(`@{${context}/`.length, key.length - 1);
 };
 
 const getDataSourceProvider = (
-  behavior: Behavior
+  behavior: Behavior,
+  screenRoute: string,
+  screenStateStore: ReturnType<typeof useScreenStateStore>
 ): BehaviorSubject<string[] | string> | null => {
   if (!behavior) return null;
 
   const selection = String(behavior.current_selection);
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "multi") {
+      return ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+
+    if (behavior.select_mode === "single") {
+      return ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+  }
+
   const contextKey = parseContextKey(selection);
 
   if (contextKey) {
+    // TODO: Add storage scope to behavior
     if (behavior.select_mode === "multi") {
       return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
     }
@@ -41,6 +71,8 @@ const getDataSourceProvider = (
 
 export const useBehaviorUpdate = (behavior: Behavior) => {
   const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
+  const screenRoute = useRoute()?.pathname || "";
+  const screenStateStore = useScreenStateStore();
   const player = usePlayer();
 
   const triggerUpdate = () => setLastUpdate(Date.now());
@@ -48,7 +80,11 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
   useEffect(() => {
     if (!behavior) return;
 
-    const dataSource = getDataSourceProvider(behavior);
+    const dataSource = getDataSourceProvider(
+      behavior,
+      screenRoute,
+      screenStateStore
+    );
 
     if (dataSource) {
       const subscription = dataSource.subscribe(triggerUpdate);
@@ -72,10 +108,17 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
 
 // We cant use async in this function (its inside render),
 // so we rely on useBehaviorUpdate to update current value and trigger re-render
-export const isCellSelected = (
-  item: ZappEntry,
-  behavior?: Behavior
-): boolean => {
+export const isCellSelected = ({
+  item,
+  screenRoute,
+  screenStateStore,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  screenStateStore: ReturnType<typeof useScreenStateStore>;
+  behavior?: Behavior;
+}): boolean => {
   if (!behavior) return false;
 
   const id = behavior.selector ? get(item, behavior.selector) : item.id;
@@ -99,7 +142,32 @@ export const isCellSelected = (
   }
 
   const selection = String(behavior.current_selection);
-  const contextKey = parseContextKey(selection);
+
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "single") {
+      const selectedItem = ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getValue();
+
+      return selectedItem === String(id);
+    }
+
+    if (behavior.select_mode === "multi") {
+      const selectedItems = ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getSelectedItems();
+
+      return selectedItems?.includes(String(id));
+    }
+  }
+
+  const contextKey = parseContextKey(selection, "ctx");
 
   if (contextKey) {
     if (behavior.select_mode === "single") {

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,10 +192,6 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
-  return isCellSelected(item, behavior);
-};
-
 export const useCellState = ({
   item,
   behavior,
@@ -204,9 +202,17 @@ export const useCellState = ({
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
+  const router = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const _isSelected = useMemo(
-    () => isSelected(item, behavior),
+    () =>
+      isCellSelected({
+        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

@@ -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
@@ -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(() => {
@@ -410,7 +423,10 @@ const PlayerContainerComponent = (props: Props) => {
       id: playerContainerId,
       listener: {
         onVideoEnd,
-        onError,
+        onError: (err: Error) => {
+          // Adapt Error to the expected shape for onError
+          onError({ error: err });
+        },
         onLoad,
         onPlayerClose: close,
         onPlayerDetached: close,
@@ -509,16 +525,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 +571,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 +594,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 +628,8 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
+  const pointerEventsProp = mode === "MINIMIZED" ? "box-none" : "auto";
+
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -627,9 +640,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 +650,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}