@applicaster/zapp-react-native-ui-components 15.0.0-alpha.1257410812 → 15.0.0-alpha.1305114721

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

@@ -1,152 +1,123 @@
-import { getPluginIdentifier } from "..";
+import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
-  it("returns the first valid plugin identifier", () => {
-    const configuration = {
-      tv_buttons_button_1_other: "value",
-      tv_buttons_button_1_assign_action:
-        "tv_buttons_button_1_assign_action_value",
-      tv_buttons_button_2_assign_action:
-        "tv_buttons_button_2_assign_action_value",
-    };
-
-    const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
   });
 
-  it("returns the second valid plugin identifier", () => {
+  it("returns the requested slot action identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
-      tv_buttons_button_1_other: "value_1",
       tv_buttons_button_1_assign_action:
         "tv_buttons_button_1_assign_action_value",
-      tv_buttons_button_2_other: "value_2",
-      tv_buttons_button_2_assign_action:
-        "tv_buttons_button_2_assign_action_value",
+      tv_buttons_button_3_assign_action:
+        "tv_buttons_button_3_assign_action_value",
     };
 
-    const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
-  });
+    const slot = 3;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-  it("returns undefined when there are no assign_action keys", () => {
-    const configuration = {};
-    const index = 0;
-
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    expect(result).toBeUndefined();
-  });
-
-  it("skips undefined values and returns the correct plugin identifier", () => {
-    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,
+      slot
+    );
 
     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", () => {
+  it("returns undefined for a disabled or missing slot", () => {
+    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 slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("skips empty string values and returns the first non-empty assign_action", () => {
+  it("returns undefined for empty string values", () => {
+    expect.assertions(2);
+
     const configuration = {
-      tv_buttons_button_1_assign_action: "",
-      tv_buttons_button_2_assign_action: "tv_buttons_button_2_assign_action",
+      tv_buttons_button_2_assign_action: "",
     };
 
-    const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const slot = 2;
 
-    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
-  });
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-  it("returns undefined for negative index", () => {
-    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,
+      slot
+    );
 
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
-  it("returns undefined for out-of-bounds index", () => {
+  it("returns undefined for negative slots", () => {
+    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);
-
-    expect(result).toBeUndefined();
-  });
-
-  it("ignores keys with wrong prefix or format", () => {
-    const configuration = {
-      tv_buttons_button_1_assign_action: "a",
-      tv_buttons_wrongprefix_2_assign_action: "b",
-      tv_buttons_button_x_assign_action: "c",
-    };
+    const slot = -1;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
-  it("returns undefined if all assign_actions are null or empty", () => {
-    const configuration = {
-      tv_buttons_button_1_assign_action: null,
-      tv_buttons_button_2_assign_action: undefined,
-      tv_buttons_button_3_assign_action: "",
-    };
+  it("handles non-string values by returning the configured slot value", () => {
+    expect.assertions(2);
 
-    const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    expect(result).toBeUndefined();
-  });
-
-  it("handles non-string values correctly", () => {
     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);
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
-    expect(getPluginIdentifier(configuration, prefix, 2)).toEqual({
-      nested: "value",
-    });
+    expect(result).toBe(true);
+    expect(memoizedResult).toBe(true);
   });
 });
 
 describe("getPluginIdentifier - when configuration has duplicate values", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
   const prefix = "tv_buttons";
 
   const configuration = {
@@ -154,17 +125,35 @@ 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", () => {
-    const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
+  it("returns the requested slot even when values are identical", () => {
+    expect.assertions(2);
+
+    const slot = 1;
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("returns the second plugin identifier when values are identical", () => {
-    const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
+  it("returns the second slot when values are identical", () => {
+    expect.assertions(2);
+
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 });

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

@@ -1,179 +1,68 @@
-import * as R from "ramda";
 import memoizee from "memoizee";
-
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { getEnabledButtonSlots } from "../../../ActionButtonsCore/selectors";
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../../../ActionButtonsCore/placement";
 
 export const getButtonsCount = (
   configuration: Record<string, unknown>,
   prefix: string
 ): number => {
-  const button1Key = `${prefix}_button_1_button_enabled`;
-  const button2Key = `${prefix}_button_2_button_enabled`;
-  const button3Key = `${prefix}_button_3_button_enabled`;
-
-  return R.toPairs(configuration).filter(
-    ([key, value]) =>
-      [button1Key, button2Key, button3Key].includes(key) && value
-  ).length;
+  return getEnabledButtonSlots(configuration, `${prefix}_button`).length;
 };
 
 export const getPluginIdentifier = (
   configuration: Record<string, unknown>,
   prefix: string,
-  index: number
+  slot: 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++;
-    }
-  }
-
-  return undefined;
-};
+  const value = configuration[
+    `${prefix}_button_${slot}_assign_action`
+  ] as string;
 
-export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier, {
-  primitive: true,
-});
-
-type Label = {
-  name: string;
-};
-
-type LabelContainer = {
-  elements: Array<Label>;
+  return value == null || value === "" ? undefined : value;
 };
 
-type LabelExtraContainer = {
-  elements: Array<LabelContainer>;
-};
-
-const withButtons = (labelName, buttons, labels) => {
-  return labels.reduce((acc, label) => {
-    if (label.name === labelName) {
-      return [...acc, label, buttons];
-    }
-
-    return [...acc, label];
-  }, []);
-};
-
-const withButtonsInContainer = (labelName, buttons, views) => {
-  return views.map((view) => {
-    return {
-      ...view,
-      elements: view.elements.reduce((acc, label) => {
-        if (label.name === labelName) {
-          return [...acc, label, buttons];
-        }
-
-        return [...acc, label];
-      }, []),
-    };
-  });
-};
+export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
 
 export const insertButtonsBetweenLabels = (
   configuration: Record<string, unknown>,
   buttons,
-  labels: Label[] = []
-) => {
-  if (R.isNil(buttons)) {
-    return labels;
-  }
-
-  const position = R.pathOr(
-    undefined,
-    ["tv_buttons_container_position"],
-    configuration
+  labels = []
+) =>
+  insertBetweenLabels(
+    {
+      position: configuration.tv_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: true,
+      appendWhenMissing: true,
+    },
+    buttons,
+    labels
   );
 
-  if (position === "on_top") {
-    return [buttons, ...labels];
-  }
-
-  const labelsWithButtons = withButtons(position, buttons, labels);
-
-  if (R.equals(labelsWithButtons, labels)) {
-    // put buttons after all labels by default
-    return [...labels, buttons];
-  }
-
-  return labelsWithButtons;
-};
-
 export const insertButtonsBetweenLabelContainers = (
   configuration: Record<string, unknown>,
   buttons,
-  labelContainers: Array<LabelExtraContainer> = []
-) => {
-  if (R.isNil(buttons)) {
-    return labelContainers;
-  }
-
-  if (R.isEmpty(labelContainers)) {
-    return [buttons];
-  }
-
-  const position = R.pathOr(
-    undefined,
-    ["tv_buttons_container_position"],
-    configuration
+  labelContainers = []
+) =>
+  insertBetweenLabelContainers(
+    {
+      position: configuration.tv_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: true,
+      appendWhenMissing: true,
+    },
+    buttons,
+    labelContainers
   );
 
-  if (position === "on_top") {
-    const firstContainerLabels = R.lensPath([0, "elements"]);
-
-    return R.over(firstContainerLabels, R.prepend(buttons), labelContainers);
-  }
-
-  const labelContainersWithButtons = labelContainers.map((labelContainer) => {
-    return {
-      ...labelContainer,
-      elements: withButtonsInContainer(
-        position,
-        buttons,
-        labelContainer.elements
-      ),
-    };
-  });
-
-  if (R.equals(labelContainersWithButtons, labelContainers)) {
-    // put buttons in last container
-    const lastContainerLabels = R.lensPath([
-      labelContainers.length - 1,
-      "elements",
-    ]);
-
-    return R.over(lastContainerLabels, R.append(buttons), labelContainers);
-  }
-
-  return labelContainersWithButtons;
-};
-
-export const mapSelfAlignment = (horizontalPosition) => {
-  switch (horizontalPosition) {
-    case "left":
-      return "flex-start";
-    case "right":
-      return "flex-end";
-    case "center":
-      return "center";
-    default:
-      return "flex-start";
-  }
-};
-
 export const getTextTransform = (textTransform: string) => {
-  if (R.isNil(textTransform) || R.isEmpty(textTransform)) {
+  if (textTransform == null || textTransform === "") {
     return "none";
   }
 

package/Components/MasterCell/elementMapper.tsx

@@ -19,6 +19,7 @@ const focusableTypes = new Set([
   "View",
   "ButtonContainerView",
   "FocusableView",
+  "PressableView",
   "CollapsibleTextContainer",
   "BorderContainerView",
 ]);

package/Components/OfflineHandler/NotificationView/NotificationView.lg.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNetworkStatusLocalizations } from "./utils";
 
 type Props = {
   children?: React.ReactNode;
@@ -10,13 +12,6 @@ type Props = {
 
 const NOTIF_DURATION = 4500;
 
-export const ONLINE_MSG = "You are back online";
-
-export const OFFLINE_MSG = "No internet connection";
-
-const EXTRA_OFFLINE_MSG = "Please check your connection";
-const EXTRA_ONLINE_MSG = "Feel free to continue where you left off";
-
 const styles: Record<any, React.CSSProperties> = {
   body: {
     position: "absolute",
@@ -47,6 +42,9 @@ const styles: Record<any, React.CSSProperties> = {
 export const NotificationView = (props: Props) => {
   const { children, hidden, dismiss, previousOnline, online } = props;
 
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const storedLocalizations = useNetworkStatusLocalizations();
+
   const [open, setOpen] = React.useState<boolean | null>(null);
 
   const timeout = React.useRef<NodeJS.Timeout>();
@@ -84,8 +82,18 @@ export const NotificationView = (props: Props) => {
   }, [hidden, online]);
 
   const showOnlineMsg = wentOnline || online;
-  const MSG = showOnlineMsg ? ONLINE_MSG : OFFLINE_MSG;
-  const EXTRA_MSG = showOnlineMsg ? EXTRA_ONLINE_MSG : EXTRA_OFFLINE_MSG;
+
+  const MSG = showOnlineMsg
+    ? (theme?.online_notification_title ??
+      storedLocalizations?.online_notification_title)
+    : (theme?.offline_notification_title ??
+      storedLocalizations?.offline_notification_title);
+
+  const EXTRA_MSG = showOnlineMsg
+    ? (theme?.online_notification_subtitle ??
+      storedLocalizations?.online_notification_subtitle)
+    : (theme?.offline_notification_subtitle ??
+      storedLocalizations?.offline_notification_subtitle);
 
   return (
     <div onClick={onClose}>

package/Components/OfflineHandler/NotificationView/NotificationView.samsung.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNetworkStatusLocalizations } from "./utils";
 
 type Props = {
   children?: React.ReactNode;
@@ -9,12 +11,6 @@ type Props = {
 
 const DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE = 4500; // ms
 
-const ONLINE_TITLE = "You are back online";
-const ONLINE_SUBTITLE = "Feel free to continue where you left off";
-
-const OFFLINE_TITLE = "No internet connection";
-const OFFLINE_SUBTITLE = "Please check your connection";
-
 const styles: Record<any, React.CSSProperties> = {
   body: {
     position: "absolute",
@@ -47,6 +43,9 @@ let timer: NodeJS.Timeout;
 export const NotificationView = (props: Props) => {
   const { children, dismiss, previousOnline = true, online } = props;
 
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const storedLocalizations = useNetworkStatusLocalizations();
+
   const [shown, setShown] = React.useState<boolean>(false);
 
   const onClose = () => {
@@ -79,8 +78,17 @@ export const NotificationView = (props: Props) => {
     }
   }, [online, previousOnline]);
 
-  const title = online ? ONLINE_TITLE : OFFLINE_TITLE;
-  const subtitle = online ? ONLINE_SUBTITLE : OFFLINE_SUBTITLE;
+  const title = online
+    ? (theme?.online_notification_title ??
+      storedLocalizations?.online_notification_title)
+    : (theme?.offline_notification_title ??
+      storedLocalizations?.offline_notification_title);
+
+  const subtitle = online
+    ? (theme?.online_notification_subtitle ??
+      storedLocalizations?.online_notification_subtitle)
+    : (theme?.offline_notification_subtitle ??
+      storedLocalizations?.offline_notification_subtitle);
 
   return (
     <div onClick={onClose}>

package/Components/OfflineHandler/NotificationView/utils.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+
+export const NETWORK_STATUS_LOCALIZATIONS_KEY = "network_status_localizations";
+
+export const THEME_STORAGE_NAMESPACE = "quick-brick-theme";
+
+export function useNetworkStatusLocalizations() {
+  const [storedLocalizations, setStoredLocalizations] = React.useState<Record<
+    string,
+    string
+  > | null>(null);
+
+  React.useEffect(() => {
+    async function loadStoredLocalizations() {
+      try {
+        const stored = await sessionStorage.getItem(
+          NETWORK_STATUS_LOCALIZATIONS_KEY,
+          THEME_STORAGE_NAMESPACE
+        );
+
+        if (stored) {
+          setStoredLocalizations(stored);
+        }
+      } catch (error) {
+        console.error("Error loading network status localizations", error);
+      }
+    }
+
+    loadStoredLocalizations();
+  }, []);
+
+  return storedLocalizations;
+}

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -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";
@@ -61,7 +60,6 @@ import {
   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>;
@@ -274,13 +272,6 @@ const PlayerContainerComponent = (props: Props) => {
     );
   }, [playerManager.isRegistered()]);
 
-  const { isRestricted } = useRestrictMobilePlayback({
-    player,
-    entry: item,
-    pluginConfiguration,
-    close,
-  });
-
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
   const onPlayNextPerformNextVideoPlay = React.useCallback(() => {
@@ -347,12 +338,6 @@ const PlayerContainerComponent = (props: Props) => {
       playerContainerLogger.error(errorObj);
 
       setState({ error: errorObj });
-
-      if (!isTvOS) {
-        setTimeout(() => {
-          close();
-        }, 800);
-      }
     },
     [close]
   );
@@ -670,7 +655,7 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      {isRestricted ? null : (
+                      {!Player ? null : (
                         <Player
                           source={{
                             uri,
@@ -703,8 +688,6 @@ const PlayerContainerComponent = (props: Props) => {
                         </Player>
                       )}
                     </PlayerFocusableWrapperView>
-
-                    {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
                   {isInlineTV && context.showComponentsContainer ? (