@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 15.1.0-rc.2

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/getPluginIdentifier.test.ts

@@ -1,15 +1,9 @@
-import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
+import { getPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
-  beforeAll(() => {
-    memoizedGetPluginIdentifier.clear();
-  });
-
-  it("returns the first valid plugin identifier", () => {
-    expect.assertions(2);
-
+  it("get first plugin identifier", () => {
     const configuration = {
       tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
@@ -19,21 +13,13 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
+    const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
-    expect(memoizedResult).toEqual(result);
   });
 
-  it("returns the second valid plugin identifier", () => {
-    expect.assertions(2);
-
+  it("get second plugin identifier", () => {
     const configuration = {
       tv_buttons_button_1_other: "value_1",
       tv_buttons_button_1_assign_action:
@@ -44,216 +30,24 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
+    const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
-    expect(memoizedResult).toEqual(result);
   });
 
-  it("returns undefined when there are no assign_action keys", () => {
-    expect.assertions(2);
-
+  it("get undefined if no assign_actions at all", () => {
     const configuration = {};
-    const index = 0;
-
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("skips undefined values and returns the correct plugin identifier", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
-      tv_buttons_button_2_assign_action: undefined,
-      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
-    };
-
-    const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
-    expect(memoizedResult).toEqual(result);
-  });
-
-  it("handles missing intermediate keys and returns the correct plugin identifier", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
-      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
-    };
-
-    const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
-    expect(memoizedResult).toEqual(result);
-  });
-
-  it("skips empty string values and returns the first non-empty assign_action", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "",
-      tv_buttons_button_2_assign_action: "tv_buttons_button_2_assign_action",
-    };
 
     const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
-    expect(memoizedResult).toEqual(result);
-  });
-
-  it("returns undefined for negative index", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "a",
-      tv_buttons_button_2_assign_action: "b",
-    };
 
-    const index = -1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
     expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("returns undefined for out-of-bounds index", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "a",
-      tv_buttons_button_2_assign_action: "b",
-    };
-
-    const index = 5;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("ignores keys with wrong prefix or format", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "a",
-      tv_buttons_wrongprefix_2_assign_action: "b",
-      tv_buttons_button_x_assign_action: "c",
-    };
-
-    const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("returns undefined if all assign_actions are null or empty", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: null,
-      tv_buttons_button_2_assign_action: undefined,
-      tv_buttons_button_3_assign_action: "",
-    };
-
-    const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("handles non-string values correctly", () => {
-    expect.assertions(6);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: 123,
-      tv_buttons_button_2_assign_action: true,
-      tv_buttons_button_3_assign_action: { nested: "value" },
-    };
-
-    expect(getPluginIdentifier(configuration, prefix, 0)).toEqual(123);
-    expect(getPluginIdentifier(configuration, prefix, 1)).toEqual(true);
-
-    expect(getPluginIdentifier(configuration, prefix, 2)).toEqual({
-      nested: "value",
-    });
-
-    expect(memoizedGetPluginIdentifier(configuration, prefix, 0)).toEqual(123);
-    expect(memoizedGetPluginIdentifier(configuration, prefix, 1)).toEqual(true);
-
-    expect(memoizedGetPluginIdentifier(configuration, prefix, 2)).toEqual({
-      nested: "value",
-    });
   });
 });
 
-describe("getPluginIdentifier - when configuration has duplicate values", () => {
-  beforeAll(() => {
-    memoizedGetPluginIdentifier.clear();
-  });
-
+describe("getPluginIdentifier - when configuration has same values for different keys", () => {
   const prefix = "tv_buttons";
 
   const configuration = {
@@ -261,35 +55,19 @@ describe("getPluginIdentifier - when configuration has duplicate values", () =>
     tv_buttons_button_2_assign_action: "navigation_action",
   };
 
-  it("returns the first plugin identifier when values are identical", () => {
-    expect.assertions(2);
-
+  it("get first plugin identifier", () => {
     const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
+    const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
-    expect(memoizedResult).toEqual(result);
   });
 
-  it("returns the second plugin identifier when values are identical", () => {
-    expect.assertions(2);
-
+  it("get second plugin identifier", () => {
     const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
+    const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
-    expect(memoizedResult).toEqual(result);
   });
 });

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

@@ -1,7 +1,7 @@
 import * as R from "ramda";
-import memoizee from "memoizee";
 
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 export const getButtonsCount = (
   configuration: Record<string, unknown>,
@@ -21,26 +21,22 @@ export const getPluginIdentifier = (
   configuration: Record<string, unknown>,
   prefix: string,
   index: number
-): string | undefined => {
-  const re = new RegExp(`${prefix}_button_\\d_assign_action`);
-  let count = 0;
-
-  for (const [key, value] of Object.entries(configuration)) {
-    if (
-      key.startsWith(`${prefix}_button`) &&
-      re.test(key) &&
-      value != null &&
-      value !== ""
-    ) {
-      if (count === index) return value as string;
-      count++;
-    }
-  }
+): string => {
+  const match = `${prefix}_button_\\d_assign_action`;
+  const re = new RegExp(match);
 
-  return undefined;
-};
+  const rejectNils = R.compose(R.path([index]), R.filter(isNotNil));
 
-export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
+  return rejectNils(
+    R.toPairs(configuration)
+      .filter(([key]) => R.startsWith(`${prefix}_button`, key))
+      .map(([key, value]) => {
+        const matched = key.match(re);
+
+        return matched ? value : undefined;
+      })
+  );
+};
 
 type Label = {
   name: string;

package/Components/Navigator/StackNavigator.tsx

@@ -6,11 +6,16 @@ import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigati
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import { StyleSheet } from "react-native";
 
 import { Screen } from "../Screen/TV/index.web";
 import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});
+
 type Components = {
   NavBar: React.ComponentType<any>;
   Background: React.ComponentType<any>;
@@ -41,6 +46,7 @@ export const StackNavigator = ({ Components }: Props) => {
         preferredFocus={isLast(index, mainStack.length)}
         excludeFromFocusSearching
         key={routeId}
+        style={styles.container}
       >
         <ScreenDataContext.Provider value={state}>
           <PathnameContext.Provider value={route}>

package/Components/OfflineHandler/NotificationView/NotificationView.tsx

@@ -8,7 +8,7 @@ import {
   TouchableWithoutFeedback,
 } from "react-native";
 
-import { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { useNotificationHeight } from "../utils";
@@ -46,7 +46,7 @@ export const NotificationView = ({
   online = true,
   dismiss,
 }: Props) => {
-  const plugins = usePlugins();
+  const { plugins } = usePickFromState(["plugins"]);
   const { statusHeight, notificationHeight } = useNotificationHeight();
 
   const offlinePlugin = R.find(

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

@@ -8,24 +8,25 @@ import {
   offlinePhrase,
 } from "../NotificationView";
 
-jest.mock("@applicaster/zapp-react-native-redux", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
-  usePlugins: () => [
-    {
-      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", () => ({
+  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", () => ({

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

@@ -8,45 +8,36 @@ const mockPreviousValue = null;
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
   return {
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/connection"
-    ),
     useConnectionInfo: jest.fn(() => mockConnectionStatus),
   };
 });
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => {
   return {
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/utils"
-    ),
     usePrevious: jest.fn(() => mockPreviousValue),
   };
 });
 
-const mock_storeObj = {
-  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"),
-  usePlugins: () => mock_storeObj.plugins,
-  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("react-native-safe-area-context", () => ({

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -17,7 +17,7 @@ import {
 
 import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useBackHandler,
   useNavigation,
@@ -46,7 +46,6 @@ import {
   PlayerContainerContextProvider,
 } from "./PlayerContainerContext";
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
-import { ErrorDisplay } from "./ErrorDisplay";
 import { PlayerFocusableWrapperView } from "./WappersView/PlayerFocusableWrapperView";
 import { FocusableGroupMainContainerId } from "./index";
 import { isPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypeMatchers";
@@ -60,8 +59,6 @@ import {
   PlayerNativeCommandTypes,
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
-import { useAppData } from "@applicaster/zapp-react-native-redux";
-import { useRestrictMobilePlayback } from "./useRestrictMobilePlayback";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -111,7 +108,7 @@ const withBorderHack = () => {
     /* @HACK: see GH#7269 */
     return {
       borderWidth: 1,
-      borderColor: "transparent",
+      borderColor: "black",
     };
   }
 
@@ -240,7 +237,7 @@ const PlayerContainerComponent = (props: Props) => {
   const [isLoadingNextVideo, setIsLoadingNextVideo] = React.useState(false);
 
   const navigator = useNavigation();
-  const { isTabletPortrait } = useAppData();
+  const { appData } = usePickFromState(["appData"]);
   const prevItemId = usePrevious(item?.id);
   const screenData = useTargetScreenData(item);
   const { setVisible: showNavBar } = useSetNavbarState();
@@ -265,21 +262,7 @@ const PlayerContainerComponent = (props: Props) => {
 
     showNavBar(true);
     navigator.goBack();
-  }, [isModal, state.playerId, showNavBar, navigator]);
-
-  const pluginConfiguration = React.useMemo(() => {
-    return (
-      playerManager.getPluginConfiguration() ||
-      R.prop("__plugin_configuration", Player)
-    );
-  }, [playerManager.isRegistered()]);
-
-  const { isRestricted } = useRestrictMobilePlayback({
-    player,
-    entry: item,
-    pluginConfiguration,
-    close,
-  });
+  }, [isModal, navigator.goBack, state.playerId, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -347,12 +330,6 @@ const PlayerContainerComponent = (props: Props) => {
       playerContainerLogger.error(errorObj);
 
       setState({ error: errorObj });
-
-      if (!isTvOS) {
-        setTimeout(() => {
-          close();
-        }, 800);
-      }
     },
     [close]
   );
@@ -471,6 +448,13 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, []);
 
+  const pluginConfiguration = React.useMemo(() => {
+    return (
+      playerManager.getPluginConfiguration() ||
+      R.prop("__plugin_configuration", Player)
+    );
+  }, [playerManager.isRegistered()]);
+
   const disableMiniPlayer = React.useMemo(() => {
     return pluginConfiguration?.disable_mini_player_when_inline;
   }, [pluginConfiguration]);
@@ -670,7 +654,7 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      {isRestricted ? null : (
+                      {Player ? (
                         <Player
                           source={{
                             uri,
@@ -685,7 +669,7 @@ const PlayerContainerComponent = (props: Props) => {
                           fullscreen={mode === VideoModalMode.FULLSCREEN}
                           inline={inline}
                           isModal={isModal}
-                          isTabletPortrait={isTabletPortrait}
+                          isTabletPortrait={appData.isTabletPortrait}
                           muted={false}
                           playableItem={item}
                           playerEvent={playerEvent}
@@ -701,10 +685,8 @@ const PlayerContainerComponent = (props: Props) => {
                         >
                           {renderApplePlayer(applePlayerProps)}
                         </Player>
-                      )}
+                      ) : null}
                     </PlayerFocusableWrapperView>
-
-                    {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
                   {isInlineTV && context.showComponentsContainer ? (

package/Components/PreloaderWrapper/__tests__/index.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { PreloaderWrapper } from "..";
+
+describe("PreloaderWrapper", () => {
+  it("renders children when preloader is hidden", () => {
+    const { getByText } = render(
+      <PreloaderWrapper showPreloader={false}>
+        <Text>content</Text>
+      </PreloaderWrapper>
+    );
+
+    expect(getByText("content")).toBeDefined();
+  });
+
+  it("renders null when preloader is shown", () => {
+    const { queryByText } = render(
+      <PreloaderWrapper showPreloader>
+        <Text>content</Text>
+      </PreloaderWrapper>
+    );
+
+    expect(queryByText("content")).toBeNull();
+  });
+});

package/Components/PreloaderWrapper/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+type PreloaderWrapperProps = {
+  showPreloader?: boolean;
+  children?: React.ReactNode;
+};
+
+export const PreloaderWrapper: React.FC<PreloaderWrapperProps> = ({
+  showPreloader = false,
+  children,
+}) => {
+  return !showPreloader ? children : null;
+};
+
+export default PreloaderWrapper;

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -281,7 +281,6 @@ function ComponentsMapComponent(props: Props) {
           >
             <ViewportTracker>
               <FlatList
-                testID="components-map-flat-list"
                 ref={(ref) => {
                   flatListRef.current = ref;
                 }}
@@ -313,10 +312,10 @@ function ComponentsMapComponent(props: Props) {
                 onScrollEndDrag={_onScrollEndDrag}
                 scrollEventThrottle={16}
                 {...scrollViewExtraProps}
+                /* When wrapped in a parent ScrollView (e.g. tabs),
+                this FlatList doesn't scroll so onEndReached can fire repeatedly;
+                skip it here and let the parent ScrollView emit scroll-end instead. */
                 onEndReached={
-                  /* When wrapped in a parent ScrollView (e.g. tabs),
-                  this FlatList doesn't scroll so onEndReached can fire repeatedly;
-                  skip it here and let the parent ScrollView emit scroll-end instead. */
                   isScreenWrappedInContainer
                     ? undefined
                     : () => {