@applicaster/zapp-react-native-ui-components 15.1.14 → 15.1.15-rc.0

package/Components/Screen/navigationHandler.ts

@@ -18,10 +18,9 @@ function shouldShowNavigation(route, screenData) {
     return false;
   }
 
-  if (
-    screenData.type === "qb_search_screen" ||
-    screenData?.targetScreen?.type === "qb_search_screen"
-  ) {
+  const currentScreenData = screenData?.targetScreen || screenData;
+
+  if (currentScreenData.type === "qb_search_screen") {
     return false;
   }
 
@@ -31,10 +30,11 @@ function shouldShowNavigation(route, screenData) {
     return hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true;
   }
 
-  if (
-    screenData?.general?.allow_screen_plugin_presentation ||
-    screenData?.targetScreen?.general?.allow_screen_plugin_presentation
-  ) {
+  if (currentScreenData?.general?.hide_menu) {
+    return false;
+  }
+
+  if (currentScreenData?.general?.allow_screen_plugin_presentation) {
     return false;
   }
 

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/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": "15.1.14",
+  "version": "15.1.15-rc.0",
   "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": "15.1.14",
-    "@applicaster/zapp-react-native-bridge": "15.1.14",
-    "@applicaster/zapp-react-native-redux": "15.1.14",
-    "@applicaster/zapp-react-native-utils": "15.1.14",
+    "@applicaster/applicaster-types": "15.1.15-rc.0",
+    "@applicaster/zapp-react-native-bridge": "15.1.15-rc.0",
+    "@applicaster/zapp-react-native-redux": "15.1.15-rc.0",
+    "@applicaster/zapp-react-native-utils": "15.1.15-rc.0",
     "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/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -1,368 +0,0 @@
-/**
- * Modal Building Block — Action
- *
- * Single-file Expo Snack demo for the Action list item building block spec.
- * Three forms (text only / leading icon + text / leading + text + trailing)
- * are driven by data — no separate variants.
- *
- * Green (configurable): background, title, trailingIcon.chevronAsset
- * White (hardcoded): container padding/gutter, icon size, leading icon assets,
- *   leading/trailing visibility logic from data
- */
-
-import React from "react";
-import { Image, Platform, StyleSheet, Text, View } from "react-native";
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 16,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
-});
-
-// ---------------------------------------------------------------------------
-// Configuration (green / editable fields from spec)
-// ---------------------------------------------------------------------------
-
-export type TextTransform =
-  | "default"
-  | "lowercase"
-  | "uppercase"
-  | "capitalize";
-
-export type BackgroundConfiguration = {
-  defaultColor: string;
-  focusedColor: string;
-  cornerRadius: number;
-};
-
-export type TitleConfiguration = {
-  fontColor: string;
-  focusedFontColor: string;
-  iosFontFamily: string;
-  androidFontFamily: string;
-  fontSize: number;
-  lineHeight: number;
-  iosLetterSpacing: number;
-  androidLetterSpacing: number;
-  textTransform: TextTransform;
-};
-
-export type TrailingIconConfiguration = {
-  chevronAsset?: string;
-};
-
-export type ActionConfiguration = {
-  background: BackgroundConfiguration;
-  title: TitleConfiguration;
-  trailingIcon: TrailingIconConfiguration;
-};
-
-export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
-  defaultColor: "transparent",
-  focusedColor: "rgba(62, 62, 62, 1)",
-  cornerRadius: 12,
-};
-
-export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
-  fontColor: "#FFFFFF",
-  focusedFontColor: "#FFFFFF",
-  iosFontFamily: "SFProText-Semibold",
-  androidFontFamily: "Roboto-Medium",
-  fontSize: 15,
-  lineHeight: 24,
-  iosLetterSpacing: -0.2,
-  androidLetterSpacing: 0,
-  textTransform: "default",
-};
-
-export const DEFAULT_TRAILING_ICON_CONFIGURATION: TrailingIconConfiguration =
-  {};
-
-export const DEFAULT_ACTION_CONFIGURATION: ActionConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  trailingIcon: DEFAULT_TRAILING_ICON_CONFIGURATION,
-};
-
-// ---------------------------------------------------------------------------
-// Data (runtime — controls which elements are shown)
-// ---------------------------------------------------------------------------
-
-export type LeadingActionType =
-  | "addToQueue"
-  | "addToPlaylist"
-  | "favorite"
-  | "share"
-  | "sleepTimer"
-  | "playbackSpeed";
-
-export type ActionData = {
-  title: string;
-  /** When set, leading icon is shown (Enable: On). */
-  leadingActionType?: LeadingActionType;
-  /** When true, trailing chevron is shown (Enable: On). */
-  showTrailingChevron?: boolean;
-};
-
-export type ItemProps = {
-  configuration: ActionConfiguration;
-  data: ActionData;
-  focused?: boolean;
-};
-
-// ---------------------------------------------------------------------------
-// Hardcoded spec values (white fields)
-// ---------------------------------------------------------------------------
-
-const CONTAINER_SPEC = {
-  paddingTop: 13,
-  paddingRight: 10,
-  paddingBottom: 13,
-  paddingLeft: 10,
-  horizontalGutter: 12,
-};
-
-const ICON_SPEC = {
-  width: 24,
-  height: 24,
-};
-
-const DEFAULT_CHEVRON_ASSET =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAXUBlu2bPmPjIeWBeiGDy0Lhrbrh1/qGXqZaxSMglEw0gEA4c+IpUrpYX4AAAAASUVORK5CYII=";
-
-/** Hardcoded: action type → leading icon asset (base64 PNG). */
-const LEADING_ICON_ASSETS: Record<LeadingActionType, string> = {
-  addToQueue:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAUjE/xHAzS3gFgweC0Y+nEwGslkBRFFwTj8LBjNyaNgmAMAJTf+EEEZcS0AAAAASUVORK5CYII=",
-  addToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDBvxHA6MWjFpAvEGkglELKLdgNJmOWkA7C0YBzQAAivu+UKRR1ZIAAAAASUVORK5CYII=",
-  favorite:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKklEQVR42mNgGAWjYBTgBP+xAGLkRi0YQhbgM4wqBo9aMHgsGAWjgCAAALyAZqh4yyZZAAAAAElFTkSuQmCC",
-  share:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
-  sleepTimer:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYUlEQVR42tWUSQ4AIAgD+f+n8eJRliIQ6MmEZTSxJZokvipdXgZpAbzOO17AglIXI7XULxmCoEMwRGuWam6AdRsN4IJYTRH4PIDkhxTA92zUPNBcFDDHaOVR0RJ2LXG9QgemFVK8tpo4PwAAAABJRU5ErkJggg==",
-  playbackSpeed:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
-};
-
-function getTextTransformStyle(
-  textTransform: TextTransform
-): "none" | "lowercase" | "uppercase" | "capitalize" {
-  return textTransform === "default" ? "none" : textTransform;
-}
-
-function shouldShowLeadingIcon(leadingActionType?: LeadingActionType) {
-  return !!leadingActionType;
-}
-
-function shouldShowTrailingIcon(showTrailingChevron?: boolean) {
-  return !!showTrailingChevron;
-}
-
-// ---------------------------------------------------------------------------
-// Inner components
-// ---------------------------------------------------------------------------
-
-type ActionContainerProps = {
-  configuration: BackgroundConfiguration;
-  focused: boolean;
-  children: React.ReactNode;
-};
-
-function ActionContainer({
-  configuration,
-  focused,
-  children,
-}: ActionContainerProps) {
-  return (
-    <View
-      style={{
-        backgroundColor: focused
-          ? configuration.focusedColor
-          : configuration.defaultColor,
-        borderRadius: configuration.cornerRadius,
-        paddingTop: CONTAINER_SPEC.paddingTop,
-        paddingRight: CONTAINER_SPEC.paddingRight,
-        paddingBottom: CONTAINER_SPEC.paddingBottom,
-        paddingLeft: CONTAINER_SPEC.paddingLeft,
-      }}
-    >
-      {children}
-    </View>
-  );
-}
-
-type ActionTitleProps = {
-  title: string;
-  configuration: TitleConfiguration;
-  focused: boolean;
-};
-
-function ActionTitle({ title, configuration, focused }: ActionTitleProps) {
-  const letterSpacing =
-    Platform.OS === "ios"
-      ? configuration.iosLetterSpacing
-      : configuration.androidLetterSpacing;
-
-  return (
-    <Text
-      style={{
-        flex: 1,
-        color: focused
-          ? configuration.focusedFontColor
-          : configuration.fontColor,
-        fontSize: configuration.fontSize,
-        lineHeight: configuration.lineHeight,
-        letterSpacing,
-        fontFamily: Platform.select({
-          ios: configuration.iosFontFamily,
-          android: configuration.androidFontFamily,
-          default: configuration.androidFontFamily,
-        }),
-        textTransform: getTextTransformStyle(configuration.textTransform),
-      }}
-      numberOfLines={1}
-    >
-      {title}
-    </Text>
-  );
-}
-
-type ActionLeadingIconProps = {
-  actionType: LeadingActionType;
-};
-
-function ActionLeadingIcon({ actionType }: ActionLeadingIconProps) {
-  return (
-    <Image
-      source={{ uri: LEADING_ICON_ASSETS[actionType] }}
-      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
-      resizeMode="contain"
-    />
-  );
-}
-
-type ActionTrailingIconProps = {
-  configuration: TrailingIconConfiguration;
-};
-
-function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
-  const asset = configuration.chevronAsset ?? DEFAULT_CHEVRON_ASSET;
-
-  return (
-    <Image
-      source={{ uri: asset }}
-      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
-      resizeMode="contain"
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Item
-// ---------------------------------------------------------------------------
-
-export function Item({ configuration, data, focused = false }: ItemProps) {
-  const { background, title, trailingIcon } = configuration;
-  const { title: label, leadingActionType, showTrailingChevron } = data;
-
-  const showLeading = shouldShowLeadingIcon(leadingActionType);
-  const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
-
-  return (
-    <ActionContainer configuration={background} focused={focused}>
-      <View style={styles.row}>
-        {showLeading ? (
-          <>
-            <ActionLeadingIcon actionType={leadingActionType} />
-            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
-          </>
-        ) : null}
-        <ActionTitle title={label} configuration={title} focused={focused} />
-        {showTrailing ? (
-          <>
-            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
-            <ActionTrailingIcon configuration={trailingIcon} />
-          </>
-        ) : null}
-      </View>
-    </ActionContainer>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Demo
-// ---------------------------------------------------------------------------
-
-export default function App() {
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Action Building Block</Text>
-
-      <Text style={styles.demoLabel}>
-        Leading icon + text — Add To Queue (focused)
-      </Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Add To Queue", leadingActionType: "addToQueue" }}
-        focused
-      />
-
-      <Text style={styles.demoLabel}>
-        Leading icon + text + trailing chevron — Add To Playlist
-      </Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{
-          title: "Add To Playlist",
-          leadingActionType: "addToPlaylist",
-          showTrailingChevron: true,
-        }}
-      />
-
-      <Text style={styles.demoLabel}>Text only — Go To Playlist</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Go To Playlist" }}
-      />
-
-      <Text style={styles.demoLabel}>Leading icon + text — Favorite</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Favorite", leadingActionType: "favorite" }}
-      />
-
-      <Text style={styles.demoLabel}>Leading icon + text — Share</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Share", leadingActionType: "share" }}
-      />
-
-      <Text style={styles.demoLabel}>Text only — Go To Artist</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Go To Artist" }}
-      />
-    </View>
-  );
-}