@applicaster/zapp-react-native-ui-components 16.0.0-rc.11 → 16.0.0-rc.110

package/Contexts/CachedDimensionsContext/__tests__/index.test.ts

@@ -0,0 +1,154 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+type DimensionsStore = {
+  setState: (
+    partial: { dimensions: Record<string, unknown>; ids: string[] },
+    replace?: boolean
+  ) => void;
+};
+
+const createdStores: DimensionsStore[] = [];
+
+jest.mock("zustand", () => {
+  const actual = jest.requireActual<typeof import("zustand")>("zustand");
+
+  return {
+    ...actual,
+    create: ((initializer: Parameters<typeof actual.create>[0]) => {
+      const store = actual.create(initializer);
+      createdStores.push(store);
+
+      return store;
+    }) as typeof actual.create,
+  };
+});
+
+import { useCachedDimensions } from "../index";
+
+const resetStore = () => {
+  const store = createdStores[createdStores.length - 1];
+
+  act(() => {
+    store?.setState({ dimensions: {}, ids: [] });
+  });
+};
+
+describe("useCachedDimensions", () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  describe("getCachedDimensions", () => {
+    it("returns default dimensions when id has no cached value", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: undefined,
+        height: undefined,
+      });
+    });
+
+    it("returns cached dimensions after setCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+      const dimensions = { width: 100, height: 200 };
+
+      act(() => {
+        result.current.setCachedDimensions(dimensions);
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual(dimensions);
+    });
+  });
+
+  describe("setCachedDimensions", () => {
+    it("updates dimensions for the hook id", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 50, height: 75 });
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: 50,
+        height: 75,
+      });
+    });
+
+    it("shares cached dimensions between hook instances with the same id", () => {
+      const { result: first } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 10, height: 20 });
+      });
+
+      expect(second.current.getCachedDimensions()).toEqual({
+        width: 10,
+        height: 20,
+      });
+    });
+  });
+
+  describe("getLastCachedDimensions", () => {
+    it("returns undefined when no dimensions have been cached", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getLastCachedDimensions()).toBeUndefined();
+    });
+
+    it("returns the most recently cached dimensions across ids", () => {
+      const { result: first } = renderHook(() => useCachedDimensions("first"));
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("second")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        second.current.setCachedDimensions({ width: 200, height: 200 });
+      });
+
+      expect(first.current.getLastCachedDimensions()).toEqual({
+        width: 200,
+        height: 200,
+      });
+    });
+
+    it("returns the latest dimensions when the same id is updated multiple times", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 300, height: 400 });
+      });
+
+      expect(result.current.getLastCachedDimensions()).toEqual({
+        width: 300,
+        height: 400,
+      });
+    });
+  });
+
+  describe("return value", () => {
+    it("exposes getCachedDimensions, setCachedDimensions, and getLastCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current).toEqual({
+        getCachedDimensions: expect.any(Function),
+        setCachedDimensions: expect.any(Function),
+        getLastCachedDimensions: expect.any(Function),
+      });
+    });
+  });
+});

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,6 +1,7 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
 import { useCallback, useMemo } from "react";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
 
 type Dimensions = {
   width: Option<number>;
@@ -10,14 +11,17 @@ type Dimensions = {
 type DimensionsState = {
   dimensions: Record<string, Dimensions>;
   setCachedDimensions: (id: string, dimensions: Dimensions) => void;
+  ids: string[];
 };
 
 const dimensionsStore = create<DimensionsState>((set) => ({
   dimensions: {},
+  ids: [],
   setCachedDimensions: (id, dimensions) =>
     set(
       produce((draft) => {
         draft.dimensions[id] = dimensions;
+        draft.ids.push(id);
       })
     ),
 }));
@@ -28,7 +32,7 @@ const initialDimensions = () => ({
 });
 
 export const useCachedDimensions = (id: string) => {
-  const { dimensions, setCachedDimensions } = useStore(
+  const { dimensions, setCachedDimensions, ids } = useStore(
     dimensionsStore
   ) as DimensionsState;
 
@@ -40,11 +44,22 @@ export const useCachedDimensions = (id: string) => {
     setCachedDimensions(id, newDimensions);
   }, []);
 
+  const getLastCachedDimensions = useCallback(() => {
+    const previousId = last(ids);
+
+    if (!previousId) {
+      return undefined;
+    }
+
+    return dimensions[previousId];
+  }, [dimensions, ids]);
+
   return useMemo(
     () => ({
       getCachedDimensions,
       setCachedDimensions: handleSetCachedDimensions,
+      getLastCachedDimensions,
     }),
-    [getCachedDimensions, handleSetCachedDimensions]
+    [getCachedDimensions, handleSetCachedDimensions, getLastCachedDimensions]
   );
 };

package/Contexts/ModalNavigationContext/__tests__/index.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { withModalNavigationContextProvider } from "../";
+
+describe("withModalNavigationContextProvider", () => {
+  it("does not re-render the wrapped component when props are unchanged", () => {
+    const Component = jest.fn(() => null);
+    const WrappedComponent = withModalNavigationContextProvider(Component);
+    const { rerender } = render(<WrappedComponent title="Modal" />);
+
+    rerender(<WrappedComponent title="Modal" />);
+
+    expect(Component).toHaveBeenCalledTimes(1);
+  });
+});

package/Contexts/ModalNavigationContext/index.tsx

@@ -6,11 +6,11 @@ export function useModalNavigationContext() {
 }
 
 export function withModalNavigationContextProvider(Component) {
-  return function WrappedWithModalNavigationContextProvider(props) {
+  return React.memo(function WrappedWithModalNavigationContextProvider(props) {
     return (
       <ModalNavigationContext.Provider value={true}>
         <Component {...props} />
       </ModalNavigationContext.Provider>
     );
-  };
+  });
 }

package/Helpers/ComponentCellSelectionHelper/index.js

@@ -1,4 +1,3 @@
-import { sendTapCellEvent, sendTapMenuItem } from "../Analytics";
 import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 
@@ -12,7 +11,6 @@ export function onCellPress(
   itemIndex,
   layoutVersion = "v1"
 ) {
-  sendTapCellEvent(entry, component, headerTitle, itemIndex);
   const componentScreenType = screenTypeFromComponent(component);
   const entryScreenType = screenTypeFromEntry(entry);
   const itemType = getItemType(entry, layoutVersion);
@@ -37,7 +35,3 @@ function screenTypeFromComponent(component) {
 function screenTypeFromEntry(entry) {
   return entry && entry.screen_type;
 }
-
-export function onMenuItemFocus({ item, index, isHome }) {
-  sendTapMenuItem({ item, index, isHome });
-}

package/Helpers/index.js

@@ -7,42 +7,3 @@ export const ASSETS = {
     amazon: "tv_app_background",
   }),
 };
-
-export const ANALYTICS_CORE_EVENTS = {
-  TAP_CELL: "Tap Cell",
-  PLAY_VOD_ITEM: "Play VOD Item",
-  VOD_ITEM_PLAY_WAS_TRIGGERED: "VOD Item: Play Was Triggered",
-  CHANNEL_ITEM_PLAY_WAS_TRIGGERED: "Channel Item: Play Was Triggered",
-  PROGRAM_ITEM_PLAY_WAS_TRIGGERED: "Program Item: Play Was Triggered",
-  TAP_MENU_ICON: "Tap Menu Item",
-  HOME_SCREEN_VIEWED: "Home Screen: Viewed",
-  ITEM_NOT_AVAILABLE: "N/A",
-};
-
-export const ANALYTICS_ENTRY_EVENTS = {
-  ITEM_TYPE: "Item Type",
-  ITEM_TITLE: "Item Name",
-  ITEM_ID: "Item ID",
-  ITEM_LINK: "Item Link",
-  ITEM_INDEX: "Item Number",
-  ITEM_TIME_PLAYED: "Item Total Time Played",
-  ITEM_TOTAL_TIME_PLAYED: "Item Total Time Played",
-  ITEM_PLAY_COMPLETED: "Completed",
-  ITEM_CUSTOM_PROPERTY: "Custom Property",
-};
-
-export const ANALYTICS_COMPONENT_EVENTS = {
-  COMPONENT_ID: "Component ID",
-  COMPONENT_TYPE: "Component Type",
-  CELL_STYLE: "Cell Style",
-  HEADER_TITLE: "Header Name",
-  COMPONENT_SOURCE: "Component Source",
-};
-
-export const ANALYTICS_MENU_ITEM_EVENTS = {
-  ITEM_TYPE: "Item Type",
-  ITEM_TITLE: "Item Name",
-  ITEM_ID: "Item ID",
-  ITEM_HOME_SCREEN: "Home Screen",
-  ITEM_INDEX: "Item Number",
-};

package/Hooks/useEntryActionsExpander.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+import {
+  buildEntryActions,
+  EntryActionDeps,
+} from "@applicaster/zapp-react-native-utils/entryActions";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import {
+  useCurrentScreenData,
+  useScreenContext,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+/**
+ * Expands `entry.extensions.entry_action` into invokable actions, against the
+ * screen this hook is called from.
+ *
+ * Entry actions are data on the entry, not an installed capability, so there is
+ * nothing to look up by identifier: the surface showing the entry expands them.
+ * That also decides which screen they execute against — the one whose tree this
+ * hook runs in, rather than whichever screen happened to be current when a
+ * global provider was registered.
+ *
+ * Pass the result to `resolveActionIdentifiers` / `resolvePlayerActions` as
+ * `expandEntryActions`.
+ */
+export function useEntryActionsExpander(): (
+  entry: ZappEntry | ZappFeed
+) => RegisteredAction[] {
+  const { pathname } = useRoute();
+
+  const screenContext = useScreenContext();
+  const screenData = useCurrentScreenData();
+  const screenState = screenContext?.options;
+  const screenStateStore = useScreenStateStore();
+  const actionExecutor = React.useContext(ActionExecutorContext);
+
+  // Read through a ref so the returned expander keeps a stable identity: it
+  // feeds `useMemo` dependency lists on surfaces that re-resolve their actions
+  // on every registry change.
+  const depsRef = React.useRef<EntryActionDeps>();
+
+  depsRef.current = {
+    actionExecutor,
+    actionContext: {
+      screenData,
+      screenState,
+      screenRoute: pathname,
+      screenStateStore,
+      // From the screen context, the way `useCellClick` builds the same bag.
+      // The ZappPipes entry context is a route-keyed map, so reading `.data`
+      // off it was always undefined.
+      screenEntry: screenContext?.entry,
+    },
+  };
+
+  return React.useCallback(
+    (entry: ZappEntry | ZappFeed) => buildEntryActions(entry, depsRef.current),
+    []
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.11",
+  "version": "16.0.0-rc.110",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,12 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.11",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.11",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.11",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.11",
+    "@applicaster/applicaster-types": "16.0.0-rc.110",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.110",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.110",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.110",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
+    "react-native-sortables": "1.7.1",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
   },

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

@@ -1,112 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNetworkStatusLocalizations } from "./utils";
-
-type Props = {
-  children?: React.ReactNode;
-  hidden?: boolean;
-  online?: boolean;
-  previousOnline?: boolean;
-  dismiss: () => void;
-};
-
-const NOTIF_DURATION = 4500;
-
-const styles: Record<any, React.CSSProperties> = {
-  body: {
-    position: "absolute",
-    bottom: 0,
-    width: 1920,
-    height: 200,
-    background:
-      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    color: "#fff",
-    paddingBottom: 15,
-  },
-  title: {
-    fontSize: 28,
-    margin: 0,
-    padding: 0,
-  },
-  subtitle: {
-    fontSize: 20,
-    margin: 0,
-    padding: 0,
-  },
-};
-
-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>();
-  const wentOnline = !previousOnline && props.online;
-
-  const onClose = () => {
-    setOpen(false);
-    dismiss();
-  };
-
-  const closeNotification = () => {
-    clearTimeout(timeout.current as NodeJS.Timeout);
-
-    timeout.current = setTimeout(() => {
-      setOpen(false);
-    }, NOTIF_DURATION);
-  };
-
-  const openNotification = () => {
-    if (!open && !hidden) {
-      setOpen(true);
-    }
-  };
-
-  const handleNotificationChange = () => {
-    if (open !== null) {
-      openNotification();
-    }
-
-    closeNotification();
-  };
-
-  React.useEffect(() => {
-    handleNotificationChange();
-  }, [hidden, online]);
-
-  const showOnlineMsg = wentOnline || online;
-
-  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}>
-      {children}
-      {open ? (
-        <div style={styles.body}>
-          <div style={styles.title}>
-            <h2>{MSG}</h2>
-          </div>
-
-          <h4 style={styles.subtitle}>{EXTRA_MSG}</h4>
-        </div>
-      ) : null}
-    </div>
-  );
-};

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

@@ -1,107 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNetworkStatusLocalizations } from "./utils";
-
-type Props = {
-  children?: React.ReactNode;
-  online?: boolean;
-  previousOnline?: boolean;
-  dismiss: () => void;
-};
-
-const DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE = 4500; // ms
-
-const styles: Record<any, React.CSSProperties> = {
-  body: {
-    position: "absolute",
-    top: 0,
-    width: 1920,
-    height: 200,
-    background:
-      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    color: "#fff",
-    paddingTop: 15,
-  },
-  title: {
-    fontSize: 28,
-    margin: 0,
-    padding: 0,
-  },
-  subtitle: {
-    fontSize: 20,
-    margin: 0,
-    padding: 0,
-  },
-};
-
-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 = () => {
-    setShown(false);
-    dismiss();
-  };
-
-  React.useEffect(() => {
-    if (previousOnline && online) {
-      return;
-    }
-
-    if (!previousOnline && !online) {
-      return;
-    }
-
-    if (previousOnline && !online) {
-      // went to offline
-      clearTimeout(timer);
-      setShown(true);
-    }
-
-    if (!previousOnline && online) {
-      // back to online
-      setShown(true);
-
-      timer = setTimeout(() => {
-        setShown(false);
-      }, DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE);
-    }
-  }, [online, previousOnline]);
-
-  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}>
-      {children}
-      {shown ? (
-        <div style={styles.body}>
-          <div style={styles.title}>
-            <h2>{title}</h2>
-          </div>
-
-          <h4 style={styles.subtitle}>{subtitle}</h4>
-        </div>
-      ) : null}
-    </div>
-  );
-};