@applicaster/zapp-react-native-ui-components 16.0.0-alpha.8443457654 → 16.0.0-alpha.8525514228

package/Components/GeneralContentScreen/hookAdapter/validationHelper.ts

@@ -0,0 +1,72 @@
+import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { log_error, log_info } from "./logger";
+
+type ParseKey = { key: string; namespace?: string };
+
+export function parseKeyEntries(input: string): ParseKey[] {
+  return input.split(",").flatMap((item) => {
+    const trimmed = item.trim();
+
+    return trimmed ? getNamespaceAndKey(trimmed) : [];
+  });
+}
+
+export const getKeyToSkipHook = async (key: string, namespace?: string) => {
+  const value = await sessionStorage.getItem(key, namespace);
+
+  if (value) {
+    return value;
+  }
+
+  return await localStorage.getItem(key, namespace);
+};
+
+export const shouldSkipHook = async (
+  skipHookIfKeysExist?: string
+): Promise<boolean> => {
+  if (!skipHookIfKeysExist?.trim()) {
+    log_info("shouldSkipHook: No skipping condition provided");
+
+    return false;
+  }
+
+  const keyEntries = parseKeyEntries(skipHookIfKeysExist);
+
+  if (keyEntries.length === 0) {
+    log_info("shouldSkipHook: No valid keys provided");
+
+    return false;
+  }
+
+  for (const entry of keyEntries) {
+    try {
+      const value = await getKeyToSkipHook(entry.key, entry.namespace);
+
+      if (value) {
+        log_info(
+          `shouldSkipHook: Hook will be skipped due to: ${
+            entry.namespace ?? ""
+          } ${entry.key}. Finishing hook flow`
+        );
+
+        return true;
+      }
+    } catch (error) {
+      log_error(
+        `shouldSkipHook: Error: ${error.message} checking key: ${
+          entry.namespace ?? ""
+        } ${entry.key}`,
+        { error }
+      );
+    }
+  }
+
+  log_info(
+    // eslint-disable-next-line max-len
+    "shouldSkipHook: No skipping condition met, none of the provided keys found in storage, proceeding with hook"
+  );
+
+  return false;
+};

package/Components/GeneralContentScreen/hookFocus/index.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+type Props = {
+  children: React.ReactElement;
+};
+
+/**
+ * On native platforms the river `ComponentsMap` registers its own initial focus,
+ * so a hook-presented general content screen needs no extra focus wrapper here.
+ * The web counterpart (`index.web.tsx`) recreates the content focus group that
+ * the `River` wrapper would normally provide.
+ */
+export const HookContentFocusGroup = ({ children }: Props) => <>{children}</>;

package/Components/GeneralContentScreen/hookFocus/index.web.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { shallow } from "zustand/shallow";
+
+import { FocusableGroup } from "../../FocusableGroup";
+import {
+  useContentId,
+  useNavbarId,
+  usePathname,
+} from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useZappHookModalStore } from "../../../Contexts/ZappHookModalContext";
+
+import { useInitialFocus } from "../../Screen/TV/hooks";
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});
+
+type Props = {
+  children: React.ReactElement;
+};
+
+/**
+ * A general content screen presented as a full-screen hook is rendered straight
+ * through `ComponentsMap`, bypassing the web `River` wrapper. That wrapper is what
+ * normally creates the `quick-brick-content` FocusableGroup (with `preferredFocus`)
+ * the focus manager relies on and what lets initial focus land on the content.
+ *
+ * Without it the hook screen renders but nothing is focusable on web TV. This
+ * recreates that content group and triggers initial focus, mirroring `River`.
+ */
+const FocusedHookContent = ({ children }: Props) => {
+  const contentId = useContentId();
+  const navbarId = useNavbarId();
+  const pathname = usePathname();
+
+  useInitialFocus();
+
+  return (
+    <FocusableGroup
+      id={contentId}
+      // Nest under the hook-modal route so the focus manager treats this as the
+      // active screen's content node; `useInitialFocus` targets the same route.
+      groupId={pathname}
+      nextFocusUp={navbarId}
+      preferredFocus
+      shouldUsePreferredFocus
+      style={styles.container}
+    >
+      {React.cloneElement(children, { groupId: contentId })}
+    </FocusableGroup>
+  );
+};
+
+export const HookContentFocusGroup = ({ children }: Props) => {
+  const isRunningInBackground = useZappHookModalStore(
+    (state) => state.isRunningInBackground,
+    shallow
+  );
+
+  // A hook presented full screen (either as a `/hooks/<id>` screen or a
+  // full-screen modal) needs the content focus group. Only background runs,
+  // which render invisibly, must be left alone so they don't steal focus.
+  if (isRunningInBackground) {
+    return <>{children}</>;
+  }
+
+  return <FocusedHookContent>{children}</FocusedHookContent>;
+};

package/Components/GeneralContentScreen/index.ts

@@ -1 +1,3 @@
 export { GeneralContentScreen } from "./GeneralContentScreen";
+
+export { GeneralContentScreenHookAdapter } from "./GeneralContentScreenHookAdapter";

package/Components/Layout/FullWidthRow.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row" },
+  basis: {
+    maxWidth: "100%",
+    flexBasis: "100%",
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * Constrains its child to exactly the available parent width.
+ *
+ * UI components such as Hero and List render their items inside a parent
+ * `ScrollView` (e.g. when wrapped by tabs). A child placed directly in a
+ * scroll container can size itself to its own content rather than to the
+ * viewport, which causes items to be measured at a stale width and resize
+ * unexpectedly after layout changes such as device rotation.
+ *
+ * Wrapping the content in a `flexDirection: "row"` parent with a
+ * `flexBasis: "100%"` / `maxWidth: "100%"` child forces the child to
+ * re-derive its width from the parent on every layout pass instead of
+ * caching a measured pixel width, keeping it full-width and stable.
+ *
+ * @param children - The content to render at full parent width.
+ */
+export function FullWidthRow({ children }: Props) {
+  return (
+    <View style={styles.row}>
+      <View style={styles.basis}>{children}</View>
+    </View>
+  );
+}

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Button.ts

@@ -1,4 +1,7 @@
-import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { Asset } from "./Asset";
@@ -10,6 +13,7 @@ import {
   getPressableStyles,
   getTextLabelStyles,
 } from "./utils";
+import { Spacer } from "./Spacer";
 
 const displayModeStyle = (value) => {
   const mode = value("display_mode") || "dynamic";
@@ -68,6 +72,9 @@ export const Button = ({
   const testID = `mobile_action_button_${index + 1}`;
   const actionIdentifier = getSlotBasedValue("assign_action");
   const assetAlignment = getValue("asset_alignment") || "left";
+  const hasHorizontalAlignment = ["left", "right"].includes(assetAlignment);
+  const vGutter = toNumberWithDefaultZero(getValue("vertical_gutter"));
+  const hGutter = toNumberWithDefaultZero(getValue("horizontal_gutter"));
   const actionAssetFlavour = getValue("action_asset_flavour");
   const contentsAlignment = getValue("contents_alignment") || "center";
 
@@ -102,7 +109,12 @@ export const Button = ({
             testID,
           })
         : null,
-
+      Spacer({
+        enabled: assetEnabled && labelEnabled,
+        style: hasHorizontalAlignment
+          ? { width: hGutter }
+          : { height: vGutter },
+      }),
       labelEnabled
         ? TextLabelsContainer({
             style: getTextLabelStyles(getValue),

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Spacer.ts

@@ -1,16 +1,18 @@
 type Props = {
   enabled?: boolean;
+  style?: object;
 };
 
-export const Spacer = ({ enabled = false }: Props = {}) => {
+export const Spacer = ({
+  enabled = false,
+  style = { flex: 1 },
+}: Props = {}) => {
   if (!enabled) {
     return null;
   }
 
   return {
     type: "View",
-    style: {
-      flex: 1,
-    },
+    style,
   };
 };

package/Components/MasterCell/dataAdapter.ts

@@ -1,5 +1,6 @@
 import * as R from "ramda";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 import { functionForName } from "./MappingFunctions";
 import { resolveColor } from "./utils";
@@ -52,7 +53,8 @@ export function configInflater(
     additionalProps?: Record<string, any>;
     data?: Array<{ propName: string; func: Function; args: any[] }>;
     elements?: any[];
-  }
+  },
+  allowDynamicColorsOutsideExtensions: boolean
 ) {
   const props = data.reduce(
     (acc, curr) => {
@@ -68,13 +70,13 @@ export function configInflater(
 
   if (Array.isArray(elements)) {
     adjustedElements = elements.map((element) =>
-      configInflater(entry, element as any)
+      configInflater(entry, element as any, allowDynamicColorsOutsideExtensions)
     );
   }
 
   return {
     type,
-    style: resolveColor(entry, style),
+    style: resolveColor(entry, style, allowDynamicColorsOutsideExtensions),
     props,
     elements: adjustedElements,
   };
@@ -98,9 +100,17 @@ function resolveElementsNode(entry, state, elements) {
 }
 
 export function defaultDataAdapter(elements) {
-  return function elementsBuilder({ entry, state = "default" }) {
+  return function elementsBuilder({
+    entry,
+    state = "default",
+    allowDynamicColorsOutsideExtensions,
+  }) {
     return resolveElementsNode(entry, state, elements).map((element) =>
-      configInflater(entry, element)
+      configInflater(
+        entry,
+        element,
+        toBooleanWithDefaultFalse(allowDynamicColorsOutsideExtensions)
+      )
     );
   };
 }

package/Components/MasterCell/index.tsx

@@ -2,7 +2,10 @@ import * as R from "ramda";
 import * as React from "react";
 import { v4 as uuid } from "uuid";
 
+import { isHorizontalList } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/utils";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenState } from "@applicaster/zapp-react-native-utils/screenState";
 import { defaultComponents } from "./DefaultComponents";
 import { defaultDataAdapter } from "./dataAdapter";
@@ -34,8 +37,8 @@ type MasterCellBuilderOptions = {
   containerStyle: any;
   cellOptions?: {
     isRTL?: boolean;
-    generateId?: () => string;
     skipButtons?: boolean;
+    component?: ZappComponent;
   };
 };
 
@@ -46,7 +49,7 @@ export function masterCellBuilder({
   containerStyle = defaultContainerStyle,
   cellOptions = {},
 }: MasterCellBuilderOptions) {
-  const { generateId = uuid, skipButtons = false } = cellOptions;
+  const { skipButtons = false, component } = cellOptions;
 
   const componentsMap = R.merge(defaultComponents, components);
   const { View } = componentsMap;
@@ -65,6 +68,7 @@ export function masterCellBuilder({
    */
   function MasterCell({ item, state, ...otherProps }: Props) {
     const { screenData } = useRoute();
+    const theme = useTheme();
 
     const screenId =
       screenData && "targetScreen" in screenData
@@ -85,14 +89,35 @@ export function masterCellBuilder({
         elementsBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
+          allowDynamicColorsOutsideExtensions:
+            theme?.allow_dynamic_colors_outside_extensions,
         }),
-      [state, item, entryIsSelected] // Assuming that item won't mutate
+      [
+        state,
+        item,
+        entryIsSelected,
+        theme?.allow_dynamic_colors_outside_extensions,
+      ] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);
 
-    const cellUUID = React.useMemo<string>(generateId, [
-      generateId,
+    const cellUUID = React.useMemo<string>(() => {
+      const isLiveImage = isVideoPreviewEnabled({
+        enable_video_preview: component?.rules?.enable_video_preview,
+        player_screen_id: component?.rules?.player_screen_id,
+      });
+
+      const isHL = isHorizontalList(component);
+
+      return isHL && isLiveImage
+        ? `${component?.id}-${component?.styles?.cell_plugin_configuration_id}`
+        : uuid();
+    }, [
+      component?.id,
+      component?.styles?.cell_plugin_configuration_id,
+      component?.rules?.enable_video_preview,
+      component?.rules?.player_screen_id,
       screenId,
       item?.id,
     ]);