@applicaster/zapp-react-native-ui-components 16.0.0-rc.12 → 16.0.0-rc.120

package/Decorators/ZappPipesDataConnector/__tests__/screenToolboxUnavailable.test.ts

@@ -0,0 +1,53 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+// Fails the screen toolbox as a build without the X-Ray bridge does. Others (player, loaded with
+// the toolbox's imports) register, or the helper would never let the screen toolbox try.
+const mockRegister = jest.fn((toolbox) =>
+  toolbox.name === "screen"
+    ? Promise.reject(new Error("no bridge"))
+    : Promise.resolve()
+);
+
+// The X-Ray mock (__mocks__/@applicaster/quick-brick-xray) has no toolbox API: give it one.
+require("@applicaster/quick-brick-xray").registerReactToolbox = mockRegister;
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: () => undefined },
+}));
+
+const { useScreenToolboxRecord } = require("../screenToolbox");
+
+const mount = (id: string) =>
+  renderHook(() =>
+    useScreenToolboxRecord({ id }, "home", 0, undefined, "/river/home")
+  );
+
+const mounted = () => {
+  // Other toolboxes (player) may register first.
+  const { tools } = mockRegister.mock.calls.find(
+    ([toolbox]) => toolbox.name === "screen"
+  )[0];
+
+  return tools
+    .find((tool) => tool.name === "current")
+    .handler({ pathname: "/river/home" }).mounted;
+};
+
+describe("screenToolbox without the X-Ray bridge", () => {
+  it("drops its records and stops recording", async () => {
+    mount("c1");
+
+    // Let the failed registration settle.
+    await act(async () => {});
+
+    expect(mounted()).toEqual([]);
+
+    mount("c2");
+
+    expect(mounted()).toEqual([]);
+
+    expect(
+      mockRegister.mock.calls.filter(([toolbox]) => toolbox.name === "screen")
+    ).toHaveLength(1);
+  });
+});

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -5,7 +5,9 @@ import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/naviga
 import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { ResolverSelector } from "./ResolverSelector";
+import { useScreenToolboxRecord } from "./screenToolbox";
 import { ComponentDataSourceContext } from "./types";
 
 type Props = {
@@ -22,7 +24,7 @@ export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
-    const { screenData } = useRoute();
+    const { screenData, pathname } = useRoute();
     const plugins = usePlugins();
     const screenContextData = useScreenContext();
 
@@ -53,6 +55,16 @@ export function zappPipesDataConnector(
 
     const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
 
+    const parent = useUIComponentContext() as { id?: string } | null;
+
+    const toolboxRecord = useScreenToolboxRecord(
+      component,
+      riverId,
+      componentIndex,
+      parent?.id,
+      pathname
+    );
+
     // Prepare context for resolvers
     const resolverProps: ComponentDataSourceContext = {
       component,
@@ -71,9 +83,12 @@ export function zappPipesDataConnector(
 
     return (
       <ResolverSelector {...resolverProps}>
-        {(zappPipesDataProps) => (
-          <Component {...props} {...zappPipesDataProps} />
-        )}
+        {(zappPipesDataProps) => {
+          // A plain field on the toolbox record, read only when the agent asks: no render.
+          toolboxRecord.feed = zappPipesDataProps.zappPipesData;
+
+          return <Component {...props} {...zappPipesDataProps} />;
+        }}
       </ResolverSelector>
     );
   };

package/Decorators/ZappPipesDataConnector/screenToolbox.ts

@@ -0,0 +1,384 @@
+import { useEffect, useMemo } from "react";
+import { Platform } from "react-native";
+import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import {
+  registerXrayToolbox,
+  XrayToolSpec,
+} from "@applicaster/zapp-react-native-utils/logger/xrayToolbox";
+import { modalStore } from "@applicaster/zapp-react-native-utils/modalState";
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
+import { getXrayNavigator } from "@applicaster/zapp-react-native-utils/navigationUtils/xrayNavigator";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { zappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
+
+import { ZappPipesData } from "./types";
+
+/**
+ * X-Ray `screen.*` toolbox: what the current screen shows — its river components in order, the
+ * feed each one loaded and the entries it displays. Every river component, on every platform,
+ * goes through the zappPipes decorator, which writes a record here on mount and drops it on
+ * unmount: a plain Set, nothing subscribes to it, so it never renders anything. Records are
+ * dropped for good once X-Ray turns out to have no toolbox bridge (release builds).
+ *
+ * Screens that are not rivers (screen plugins, hooks, the player) report what renders them,
+ * read from navigation and the modal stores; a plugin with state of its own registers its own
+ * toolbox, as the player does.
+ *
+ * Mounted is not visible (lists are virtualised): which rows and cells are on screen comes from
+ * the native `ui.inspect`. River rows carry testID `component-<componentId>` (mobile, tvOS,
+ * Android TV) and cells carry their entry id in their testID.
+ */
+
+type ComponentRecord = {
+  component: ZappUIComponent;
+  riverId: string;
+  index?: number;
+  parentId?: string;
+  pathname: string;
+  /** Written on each render: the data the component was given, after item filter and limit. */
+  feed?: ZappPipesData;
+};
+
+/** What a route shows; `screenType` is how ScreenResolver renders it. */
+type RouteState = {
+  screenType?: string;
+  screen?: any;
+  entry?: Partial<ZappEntry>;
+  nested?: { screen?: ZappRiver };
+};
+
+/** A screen presented over the navigation stack. `covers` is false when it is out of the way. */
+type Layer = RouteState & { pathname: string; covers: boolean };
+
+const records = new Set<ComponentRecord>();
+
+/** Set once registration failed: X-Ray has no toolbox bridge, so nothing will ever read records. */
+let unavailable = false;
+
+const DEFAULT_ENTRIES_LIMIT = 10;
+
+const toLimit = (value: unknown) =>
+  typeof value === "number" && value >= 0 ? value : DEFAULT_ENTRIES_LIMIT;
+
+/** The hooks modal, with the pathname ZappHooksModal gives it; hidden while it runs in the background. */
+const hooksModalLayer = (): Layer | undefined => {
+  const { state, isHooksExecutionInProgress, isRunningInBackground } =
+    zappHookModalStore.getState();
+
+  if (!isHooksExecutionInProgress || !state.path) return undefined;
+
+  const hookPlugin = state.screenData?.hookPlugin;
+
+  return {
+    pathname: `${ROUTE_TYPES.HOOKS_MODAL}/${hookPlugin ? hookPlugin.name : ""}`,
+    covers:
+      !isRunningInBackground && hookPlugin?.module?.presentFullScreen !== false,
+    screenType: "hooks",
+    screen: hookPlugin,
+    entry: state.screenData?.payload as ZappEntry,
+  };
+};
+
+/** The modal screen or bottom sheet, with the pathname and props ModalProvider gives it. */
+const modalLayer = (): Layer | undefined => {
+  const { visible, screen, props } = modalStore.getState().modalState;
+
+  if (!visible || !screen) return undefined;
+
+  const { screenId, screenType, entry, screenData } = {
+    screenId: screen.id,
+    screenType: "river",
+    ...props,
+  } as Record<string, any>;
+
+  // A modal hook (and the ad interstitial) presents a { hookPlugin, payload } wrapper.
+  const isHook = screenType === "hooks";
+
+  return {
+    pathname: `${ROUTE_TYPES.MODAL}/${screenId}`,
+    covers: true,
+    screenType,
+    screen: isHook ? (screen.hookPlugin ?? screenData?.hookPlugin) : screen,
+    entry: isHook ? screen.payload : entry,
+  };
+};
+
+const videoModalLayer = (): Layer | undefined => {
+  const videoModal = getXrayNavigator()?.videoModalState;
+
+  if (!videoModal?.visible) return undefined;
+
+  return {
+    pathname: `${ROUTE_TYPES.VIDEO_MODAL}/${videoModal.item?.id}`,
+    covers: videoModal.mode !== "MINIMIZED",
+    screenType: "playable",
+    entry: videoModal.item,
+  };
+};
+
+/**
+ * Topmost first: the hooks modal and modals are native RN Modals, drawn over the video modal.
+ * Only layers this platform renders: the mobile layout renders the hooks and video modals, and
+ * ModalProvider renders nothing on web.
+ */
+const presentedLayers = () => {
+  const web = Platform.OS === "web";
+  const mobile = !web && !isTV();
+
+  return [
+    mobile && hooksModalLayer(),
+    !web && modalLayer(),
+    mobile && videoModalLayer(),
+  ].filter((layer): layer is Layer => Boolean(layer));
+};
+
+/** The pathname of what is on top: a covering presented layer, else the stack top. */
+export const getTopPathname = (): string | undefined =>
+  presentedLayers().find((layer) => layer.covers)?.pathname ??
+  getXrayNavigator()?.getPathname();
+
+/** What the route at `pathname` shows. Presented layers are not on the stack: their stores hold them. */
+const routeState = (pathname: string): RouteState => {
+  const layer = presentedLayers().find((item) => item.pathname === pathname);
+
+  if (layer) return layer;
+
+  // Not presented any more (a stale modal pathname): nothing to describe.
+  if (!pathname.startsWith("/")) return {};
+
+  const state = getXrayNavigator()?.getStackForPathname(pathname)?.state;
+
+  // A stack route ends in <screenType>/<screenId>.
+  const screenType = pathname.split("/").slice(-2)[0];
+
+  return {
+    screenType,
+    ...state,
+    // A hook screen's entry is the { payload } wrapper it was pushed with.
+    entry:
+      screenType === "hooks"
+        ? ((state?.entry as any)?.payload ?? state?.entry)
+        : state?.entry,
+  };
+};
+
+/** Screen types ScreenResolver renders itself rather than through a screen plugin. */
+const BUILT_IN_KINDS = {
+  playable: "player",
+  link: "link",
+  favorites: "favorites",
+};
+
+/**
+ * What renders the screen, as ScreenResolver picks it: a river of components, a built-in screen,
+ * a hook plugin, or a screen plugin (a river whose type is a plugin identifier, or a route whose
+ * screen type is one).
+ */
+const describeKind = ({
+  screenType,
+  screen,
+}: RouteState): { kind: string; identifier?: string } => {
+  if (!screenType) return { kind: "none" };
+
+  if (screen?.modalBottomSheetContentProps) return { kind: "bottomSheet" };
+
+  if (screenType === "hooks") {
+    return { kind: "hook", identifier: screen?.identifier };
+  }
+
+  if (BUILT_IN_KINDS[screenType]) return { kind: BUILT_IN_KINDS[screenType] };
+
+  if (screenType !== "river") return { kind: "plugin", identifier: screenType };
+
+  return screen?.type === "general_content"
+    ? { kind: "river" }
+    : { kind: "plugin", identifier: screen?.type };
+};
+
+const describePlugin = (identifier?: string) => {
+  if (!identifier) return null;
+
+  const plugins = (appStore.get("plugins") ?? []) as QuickBrickPlugin[];
+
+  return {
+    identifier,
+    name: plugins.find((plugin) => plugin.identifier === identifier)?.name,
+  };
+};
+
+const describeFeed = (feed?: ZappPipesData) => {
+  if (!feed?.url) return null;
+
+  const error = feed.error as { message?: string } | undefined;
+
+  return {
+    url: feed.url,
+    state: error ? "error" : feed.loading ? "loading" : "loaded",
+    ...(error && { error: error.message ?? String(error) }),
+    count: feed.data?.entry?.length ?? 0,
+  };
+};
+
+const byIndex = (a: ComponentRecord, b: ComponentRecord) =>
+  (a.index ?? 0) - (b.index ?? 0);
+
+/** Components in order, a group's children nested under it (they share the river and its indexes). */
+const describeComponents = (
+  mounted: ComponentRecord[],
+  belongs: (record: ComponentRecord) => boolean,
+  limit: number
+) =>
+  mounted
+    .filter(belongs)
+    .sort(byIndex)
+    .map((record) => {
+      const children = describeComponents(
+        mounted,
+        (child) => child.parentId === record.component.id,
+        limit
+      );
+
+      return {
+        index: record.index,
+        id: record.component.id,
+        type: record.component.component_type,
+        name: record.component.name,
+        feed: describeFeed(record.feed),
+        entries: (record.feed?.data?.entry ?? [])
+          .slice(0, limit)
+          .map((entry, index) => ({ index, id: entry.id, title: entry.title })),
+        ...(children.length > 0 && { children }),
+      };
+    });
+
+const describeRiverComponents = (mounted: ComponentRecord[], limit: number) => {
+  const ids = new Set(mounted.map((record) => record.component.id));
+
+  return describeComponents(
+    mounted,
+    (record) => !record.parentId || !ids.has(record.parentId),
+    limit
+  );
+};
+
+const describeScreen = (pathname: string, limit: number) => {
+  const state = routeState(pathname);
+  const { screen, entry, nested } = state;
+  const { kind, identifier } = describeKind(state);
+  const plugin = describePlugin(identifier);
+
+  const mounted = Array.from(records).filter(
+    (record) => record.pathname === pathname
+  );
+
+  const riverIds = R.uniq(mounted.map((record) => record.riverId));
+  const rivers = appStore.get("rivers") as Record<string, ZappRiver>;
+
+  return {
+    pathname,
+    screen: {
+      kind,
+      ...(screen && { id: screen.id, name: screen.name, type: screen.type }),
+      ...(plugin && { plugin }),
+    },
+    ...(nested?.screen && {
+      nested: {
+        id: nested.screen.id,
+        name: nested.screen.name,
+        type: nested.screen.type,
+      },
+    }),
+    entry: entry ? { id: entry.id, title: entry.title } : null,
+    rivers: riverIds.map((riverId) => ({
+      id: riverId,
+      name: rivers?.[riverId]?.name,
+      type: rivers?.[riverId]?.type,
+      components: describeRiverComponents(
+        mounted.filter((record) => record.riverId === riverId),
+        limit
+      ),
+    })),
+  };
+};
+
+const tools: XrayToolSpec[] = [
+  {
+    name: "current",
+    description:
+      "The screen on top (hooks modal, modal or bottom sheet, video modal unless docked, else stack top) " +
+      "or the one at `pathname`: what renders it (kind river, plugin, hook, player, link, favorites, " +
+      "bottomSheet, and the plugin), its river components in order (a group's children nested) with " +
+      "their feed (url, state, count) and first entries. " +
+      "Lists mount ahead of the viewport, so a component here may be off screen: use the native " +
+      "ui.inspect for what is visible (row testID component-<id>; cell testIDs contain the entry id).",
+    parameters: [
+      {
+        name: "pathname",
+        type: "string",
+        description:
+          "A mounted screen's route (see mounted); defaults to the top one.",
+      },
+      {
+        name: "limit",
+        type: "number",
+        description: `Entries per component, default ${DEFAULT_ENTRIES_LIMIT}.`,
+      },
+    ],
+    handler: ({ pathname, limit }) => {
+      const target =
+        typeof pathname === "string" && pathname ? pathname : getTopPathname();
+
+      if (!target) throw new Error("Navigation is not available yet");
+
+      return {
+        ...describeScreen(target, toLimit(limit)),
+        mounted: R.uniq(Array.from(records, (record) => record.pathname)),
+      };
+    },
+  },
+];
+
+const registerScreenToolbox = () =>
+  registerXrayToolbox({
+    name: "screen",
+    description:
+      "What the current screen shows: what renders it, river components, their feeds and entries.",
+    tools,
+  });
+
+/**
+ * Keeps a record of a mounted river component for the toolbox. Returns the record so the caller
+ * can attach the feed data it renders with.
+ */
+export const useScreenToolboxRecord = (
+  component: ZappUIComponent,
+  riverId: string,
+  index: number | undefined,
+  parentId: string | undefined,
+  pathname: string
+): ComponentRecord => {
+  const record = useMemo(
+    () => ({ component, riverId, index, parentId, pathname }),
+    [component, riverId, index, parentId, pathname]
+  );
+
+  useEffect(() => {
+    if (unavailable) return;
+
+    registerScreenToolbox().then((registered) => {
+      if (!registered) {
+        unavailable = true;
+        records.clear();
+      }
+    });
+
+    records.add(record);
+
+    return () => {
+      records.delete(record);
+    };
+  }, [record]);
+
+  return record;
+};

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.12",
+  "version": "16.0.0-rc.120",
   "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.12",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.12",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.12",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.12",
+    "@applicaster/applicaster-types": "16.0.0-rc.120",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.120",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.120",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.120",
     "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"
   },