@applicaster/zapp-react-native-ui-components 16.0.0-alpha.9225550512 → 16.0.0-alpha.9506982263

package/Components/MasterCell/DefaultComponents/Image/hoc/utils/index.ts

@@ -1,15 +1,85 @@
-import {
-  toFiniteNumberWithDefault,
-  toNumber,
-} from "@applicaster/zapp-react-native-utils/numberUtils";
+import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { isNil } from "ramda";
+import { coreLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-const dimensionRegex = /\b(width|height)=(\d+)\b/gi;
+const imageResizingLogger = coreLogger
+  ?.addSubsystem("components")
+  ?.addSubsystem("ImageResizing");
 
+const TEMPLATE_REGEX = /{{(width|height)}}/gi;
+const UNRESOLVED_PLACEHOLDER_REGEX = /{{[^}]*}}?/;
+const INVALID_PLACEHOLDER_EXTRACT_REGEX = /{{([^}]*)}}?/g;
+const ALLOWED_PLACEHOLDERS = ["width", "height"];
+
+/**
+ * Merges query-param string `paramsString` into `baseUrl`.
+ * Params from `paramsString` override any existing params with the same key.
+ */
+export const mergeQueryParams = (
+  baseUrl: string,
+  paramsString: string
+): string => {
+  try {
+    const urlObj = new URL(baseUrl);
+    const newParams = new URLSearchParams(paramsString);
+
+    newParams.forEach((value, key) => {
+      urlObj.searchParams.set(key, value);
+    });
+
+    return urlObj.toString();
+  } catch {
+    // If URL parsing fails, return original
+    return baseUrl;
+  }
+};
+
+/**
+ * Extracts unresolved placeholder names from a param pair and logs a warning.
+ */
+const logInvalidPlaceholders = (pair: string): void => {
+  const invalidNames: string[] = [];
+  let match: RegExpExecArray | null;
+
+  // Reset lastIndex before using the global regex
+  INVALID_PLACEHOLDER_EXTRACT_REGEX.lastIndex = 0;
+
+  while ((match = INVALID_PLACEHOLDER_EXTRACT_REGEX.exec(pair)) !== null) {
+    const name = match[1];
+
+    if (!ALLOWED_PLACEHOLDERS.includes(name?.toLowerCase())) {
+      invalidNames.push(name);
+    }
+  }
+
+  if (invalidNames.length > 0) {
+    imageResizingLogger?.warning({
+      message: `Image resizing: invalid placeholder(s) found: ${invalidNames.map((n) => `{{${n}}}`).join(", ")}. Allowed placeholders are: {{width}}, {{height}}. The param "${pair}" was ignored.`,
+      data: { pair, invalidNames, allowedPlaceholders: ALLOWED_PLACEHOLDERS },
+    });
+  }
+};
+
+/**
+ * Parses a dimension mapping template string (query param format) and injects
+ * the resolved width/height values into the given URL.
+ *
+ * The template uses `{{width}}` and `{{height}}` placeholders.
+ * It is treated as query-param key=value pairs (e.g. "w={{width}}&h={{height}}"
+ * or "size={{width}}x{{height}}").
+ *
+ * Resolved params are **merged** into the original URL – existing params with
+ * the same key are replaced; new ones are appended.
+ *
+ * Invalid mappings (containing unresolved placeholders like `{{heit}}` or
+ * malformed `{{heit}`) are silently dropped and logged as warnings.
+ * A leading `?` in the template is stripped.
+ */
 export const withDimensions = (
   url: Option<string>,
   width: Option<number | string>,
-  height: Option<number | string>
+  height: Option<number | string>,
+  dimensionMappingTemplate?: Option<string>
 ) => {
   if (isNil(url)) {
     return url;
@@ -22,23 +92,48 @@ export const withDimensions = (
   const newWidth = Math.trunc(toFiniteNumberWithDefault(0, width));
   const newHeight = Math.trunc(toFiniteNumberWithDefault(0, height));
 
-  return url.replace(dimensionRegex, (match, name, originalValue) => {
-    if (name.toLocaleLowerCase() === "width" && newWidth > 0) {
-      const originalWidth = toNumber(originalValue);
+  if (newWidth <= 0 && newHeight <= 0) {
+    return url;
+  }
+
+  // Strip leading `?` and whitespace from the template
+  const template = dimensionMappingTemplate?.trim()?.replace(/^\?/, "");
 
-      if (originalWidth > 0 && originalWidth > newWidth) {
-        return `${name}=${newWidth}`;
-      }
-    }
+  if (!template) {
+    return url;
+  }
 
-    if (name.toLocaleLowerCase() === "height" && newHeight > 0) {
-      const originalHeight = toNumber(originalValue);
+  // Replace {{width}} / {{height}} placeholders in the template
+  const resolvedTemplate = template.replace(TEMPLATE_REGEX, (_match, name) => {
+    if (name.toLowerCase() === "width") {
+      return newWidth > 0 ? String(newWidth) : _match;
+    }
 
-      if (originalHeight > 0 && originalHeight > newHeight) {
-        return `${name}=${newHeight}`;
-      }
+    if (name.toLowerCase() === "height") {
+      return newHeight > 0 ? String(newHeight) : _match;
     }
 
-    return match;
+    return _match;
   });
+
+  // Filter out param pairs that still contain unresolved / malformed placeholders
+  const cleanedParams = resolvedTemplate
+    .split("&")
+    .filter((pair) => {
+      if (UNRESOLVED_PLACEHOLDER_REGEX.test(pair)) {
+        logInvalidPlaceholders(pair);
+
+        return false;
+      }
+
+      return true;
+    })
+    .join("&");
+
+  if (!cleanedParams) {
+    return url;
+  }
+
+  // Parse the resolved template as query params and merge into URL
+  return mergeQueryParams(url, cleanedParams);
 };

package/Components/MasterCell/DefaultComponents/Image/hoc/withDimensions.tsx

@@ -14,25 +14,36 @@ type Style = {
   height: Option<number | string>;
 };
 
-const withAppliedDimensions = (style: Style) => (source: Source) => ({
-  ...source,
-  uri: withDimensions(source?.uri, style?.width, style?.height),
-});
+const withAppliedDimensions =
+  (style: Style, dimensionMappingTemplate: string) => (source: Source) => ({
+    ...source,
+    uri: withDimensions(
+      source?.uri,
+      style?.width,
+      style?.height,
+      dimensionMappingTemplate
+    ),
+  });
 
 export const withDimensionsHOC = (Component) => {
   return function WithDimensions(props: Record<string, unknown>) {
     const theme = useTheme<BaseThemePropertiesMobile>();
 
-    const useDownScalingImages = toBooleanWithDefaultFalse(
-      theme.use_downscaling_images
+    const useImageResizing = toBooleanWithDefaultFalse(
+      theme.use_image_resizing ?? theme.use_downscaling_images
     );
 
+    const dimensionMappingTemplate = theme.image_resizing_template;
+
     return (
       <Component
         {...props}
         withDimensions={
-          useDownScalingImages
-            ? withAppliedDimensions((props?.style || {}) as Style)
+          useImageResizing
+            ? withAppliedDimensions(
+                (props?.style || {}) as Style,
+                dimensionMappingTemplate
+              )
             : identity
         }
       />

package/Components/ModalComponent/BottomSheetDragArea.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import { View } from "react-native";
+import { useBottomSheet } from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+/**
+ * Turns its children into a drag zone for the enclosing DraggableBottomSheet:
+ * dragging here moves/dismisses the sheet (used for the modal header bar).
+ * Outside a sheet (no context) it renders children unchanged.
+ */
+export const BottomSheetDragArea = ({
+  children,
+}: {
+  children: React.ReactElement;
+}) => {
+  const sheet = useBottomSheet();
+
+  // Outside a sheet (no context) render children unchanged.
+  if (!sheet) return children;
+
+  return (
+    <PanGestureHandler
+      simultaneousHandlers={[sheet.masterDrawerRef]}
+      shouldCancelWhenOutside={false}
+      onGestureEvent={sheet.onDragGestureEvent}
+      onHandlerStateChange={sheet.onDragStateChange}
+    >
+      {/* Old-API PanGestureHandler needs a host-component child; children may
+          be a function component (e.g. ModalHeader), so wrap in a View. */}
+      <View>{children}</View>
+    </PanGestureHandler>
+  );
+};

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -6,11 +6,11 @@ import { ItemProps } from "./Button/Item";
 import { ItemLabelProps } from "./Button/ItemLabel";
 import { getItemIconProps, getItemLabelProps, getItemProps } from "./utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
 import type { PluginConfiguration } from "./";
 
 import { ModalHeader as DefaultModalHeader } from "./Header";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BottomSheetDragArea } from "./BottomSheetDragArea";
 
 type ModalComponentProps = {
   items: any[];
@@ -55,8 +55,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent: ModalHeader = DefaultModalHeader,
-
+    headerComponent = DefaultModalHeader,
     scrollViewContent = null,
 
     buttonComponent: ButtonComponent = Button,
@@ -72,6 +71,8 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
+  const Header = headerComponent;
+
   useEffect(() => {
     if (currentRoute !== route.current) {
       props.dismiss();
@@ -107,13 +108,20 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
         paddingTop: paddingTop,
       }}
     >
-      <ModalHeader
-        dismiss={dismiss}
-        configuration={theme}
-        summary={summary}
-        title={title}
-      />
+      {Header ? (
+        <BottomSheetDragArea>
+          <Header
+            dismiss={dismiss}
+            configuration={theme}
+            summary={summary}
+            title={title}
+          />
+        </BottomSheetDragArea>
+      ) : null}
       <ScrollView
+        overScrollMode="never"
+        bounces={false}
+        showsVerticalScrollIndicator={false}
         contentContainerStyle={{
           paddingBottom: paddingBottom + bottomInset,
         }}
@@ -123,7 +131,6 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
               scrollViewContent.renderItem(item, index)
             )
           : null}
-
         {!scrollViewContent &&
           items.map((item, index) =>
             item ? (

package/Components/ModalComponent/__tests__/BottomSheetDragArea.test.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, screen } from "@testing-library/react-native";
+import { BottomSheetDragArea } from "../BottomSheetDragArea";
+import { BottomSheetContext } from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+// Reveal PanGestureHandler and capture its props.
+jest.mock("react-native-gesture-handler", () => {
+  const { View } = require("react-native");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  return {
+    __esModule: true,
+    ...actual,
+    PanGestureHandler: ({
+      children,
+      onGestureEvent,
+      onHandlerStateChange,
+      simultaneousHandlers,
+    }: any) => (
+      <View
+        testID="drag-pan"
+        onGestureEvent={onGestureEvent}
+        onHandlerStateChange={onHandlerStateChange}
+        simultaneousHandlers={simultaneousHandlers}
+      >
+        {children}
+      </View>
+    ),
+  };
+});
+
+const makeValue = () => ({
+  scrollRef: React.createRef<any>(),
+  masterDrawerRef: React.createRef<any>(),
+  drawerRef: React.createRef<any>(),
+  onScroll: jest.fn(),
+  setBodyDragEnabled: jest.fn(),
+  onDragGestureEvent: jest.fn(),
+  onDragStateChange: jest.fn(),
+});
+
+describe("BottomSheetDragArea", () => {
+  it("wraps children in a sheet-wired PanGestureHandler when inside a sheet", () => {
+    const value = makeValue();
+
+    render(
+      <BottomSheetContext.Provider value={value}>
+        <BottomSheetDragArea>
+          <Text testID="child">hi</Text>
+        </BottomSheetDragArea>
+      </BottomSheetContext.Provider>
+    );
+
+    const pan = screen.getByTestId("drag-pan");
+    expect(pan.props.onGestureEvent).toBe(value.onDragGestureEvent);
+    expect(pan.props.onHandlerStateChange).toBe(value.onDragStateChange);
+
+    expect(pan.props.simultaneousHandlers).toEqual([value.masterDrawerRef]);
+
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+
+  it("renders children bare when used outside a sheet", () => {
+    render(
+      <BottomSheetDragArea>
+        <Text testID="child">hi</Text>
+      </BottomSheetDragArea>
+    );
+
+    expect(screen.queryByTestId("drag-pan")).toBeNull();
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+});

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -9,6 +9,7 @@ import {
   platformSelect,
   isAndroidTVPlatform,
   isTvOSPlatform,
+  isApplePlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
   isAudioItem,
@@ -60,6 +61,7 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
+import { PLAYER_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -188,12 +190,10 @@ const renderApplePlayer = ({
     return null;
   }
 
-  const { title, summary } = item || {};
-
+  // Title/Subtitle are not resolved here: `ProgramInfo` reads them from the
+  // player manager's content channel via `usePlayerContent`.
   return (
     <ProgramInfo
-      title={title}
-      subtitle={summary}
       plugin_configuration={pluginConfiguration}
       videoStyle={videoStyle}
     />
@@ -282,12 +282,16 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     log_debug(
-      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}`
+      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}, outgoing item id: ${item?.id}`
     );
 
+    playNextOverlayState.hidePlayNext();
+
+    playerEvent(PLAYER_EVENTS.PlayNextTriggered, { id: item?.id });
+
     setIsLoadingNextVideo(true);
     playEntry(playNextOverlayState.entry);
-  }, [playNextOverlayState]);
+  }, [playNextOverlayState, item?.id]);
 
   const playNextData: Nullable<PlayNextData> = React.useMemo(() => {
     if (!playNextOverlayState) {
@@ -495,7 +499,7 @@ const PlayerContainerComponent = (props: Props) => {
   const isAudioContent = isAudioItem(item);
 
   useEffect(() => {
-    if (!isAudioContent) {
+    if (!isAudioContent && isApplePlatform()) {
       sendQuickBrickEvent(
         QUICK_BRICK_EVENTS.IDLE_TIMER_DISABLED as QuickBrickEvent,
         {

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -7,12 +7,11 @@ import * as React from "react";
 import { Text, TextStyle, View, ViewStyle } from "react-native";
 import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
+import { usePlayerContent } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent";
 import * as programStyles from "./styles";
 
 type Props = {
   logo?: string;
-  title: string;
-  subtitle: string;
   isAudioContent: boolean;
   styles: {};
   plugin_configuration: {
@@ -28,13 +27,13 @@ const defaultColor = "#EFEFEF";
 
 function ProgramInfoComponent({
   logo,
-  title = "",
-  subtitle = "",
   isAudioContent,
   styles,
   plugin_configuration = {},
   videoStyle = {},
 }: Props) {
+  const { title = "", summary: subtitle = "" } = usePlayerContent();
+
   const platformKey = styleKeys.style_namespace;
 
   const colorTitle =

package/Components/PlayerContainer/__tests__/PlayerContainer.test.tsx

@@ -17,16 +17,37 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  // Defaults to `false` for the hardware-back-handling tests below, which
+  // key off `isTV`. The ProgramInfo/content-context describe block below
+  // overrides this per test (`isTV()` is also what PlayerContainer's
+  // `playerContentValue` uses to pick TV vs mobile data keys, decoupled
+  // from `isTvOSPlatform` below).
   isTV: jest.fn(() => false),
   isAndroidTVPlatform: jest.fn(() => false),
-  isTvOSPlatform: jest.fn(() => false),
+  // `isTvOSPlatform` backs a module-level constant in PlayerContainer.tsx that
+  // is read once at import time, so it must already be `true` here in order
+  // to exercise `renderApplePlayer`'s tvOS-only ProgramInfo branch in this
+  // test file. It does not affect the hardware-back-handling tests below,
+  // which key off `isTV` instead.
+  isTvOSPlatform: jest.fn(() => true),
+  isApplePlatform: jest.fn(() => true),
   platformSelect: jest.fn(({ native }) => native),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => ({
-  isAudioItem: jest.fn(() => false),
-  isInlineTV: jest.fn(() => false),
-}));
+jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => {
+  // Keep the real data-key resolver (createConfigValueGetter,
+  // resolvePlayerContentText, VIDEO_PLAYER_CONTENT_DATA_KEYS) so the tvOS
+  // ProgramInfo data-key tests exercise actual resolution logic, not a stub.
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/playerUtils"
+  );
+
+  return {
+    ...actual,
+    isAudioItem: jest.fn(() => false),
+    isInlineTV: jest.fn(() => false),
+  };
+});
 
 jest.mock(
   "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent",
@@ -75,6 +96,11 @@ jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
   sendQuickBrickEvent: jest.fn(),
 }));
 
+// Stubbed so PlayerContainer can render without ProgramInfo's own
+// redux/style plumbing. It no longer needs to capture Title/Subtitle: those
+// come from the player manager's content channel, and the key-set selection
+// they depend on is covered directly in
+// `playerManager/__tests__/playerContent.test.ts`.
 jest.mock("../ProgramInfo", () => ({
   ProgramInfo: () => null,
 }));
@@ -142,14 +168,33 @@ jest.mock(
 jest.mock("../PlayerContainerContext", () => {
   const ReactActual = require("react");
 
+  const PlayerContainerContext = ReactActual.createContext({
+    isLanguageOverlayVisible: false,
+    bottomFocusableId: "bottom",
+    showComponentsContainer: false,
+    refs: null,
+  });
+
   return {
-    PlayerContainerContext: ReactActual.createContext({
-      isLanguageOverlayVisible: false,
-      bottomFocusableId: "bottom",
-      showComponentsContainer: false,
-      refs: null,
-    }),
-    PlayerContainerContextProvider: ({ children }) => children,
+    PlayerContainerContext,
+    // Mirrors just enough of the real provider for these tests: renders an
+    // actual `PlayerContainerContext.Provider` so the real
+    // `PlayerContainerContext.Consumer` inside PlayerContainer.tsx sees the
+    // container fields a real provider would give it, instead of a bare
+    // `({ children }) => children` passthrough.
+    PlayerContainerContextProvider: ({ children }: any) =>
+      ReactActual.createElement(
+        PlayerContainerContext.Provider,
+        {
+          value: {
+            isLanguageOverlayVisible: false,
+            bottomFocusableId: "bottom",
+            showComponentsContainer: false,
+            refs: null,
+          },
+        },
+        children
+      ),
   };
 });
 
@@ -200,7 +245,14 @@ const { __player: mockPlayer } = jest.requireMock(
   "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer"
 );
 
-const Player = React.forwardRef(() => null);
+const { isTV: mockIsTV } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/reactUtils"
+);
+
+// Renders children so that `renderApplePlayer`'s returned <ProgramInfo>
+// element (passed as this component's `children` prop) actually mounts —
+// otherwise React never invokes the ProgramInfo function component at all.
+const Player = React.forwardRef((props: any, _ref) => props.children ?? null);
 
 const item = {
   id: "entry-1",
@@ -234,6 +286,7 @@ const pressHardwareBack = () => {
 describe("PlayerContainer hardware back handling", () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockIsTV.mockReturnValue(false);
     mockBackHandlerRef.current = null;
     mockPlayer.getPluginConfiguration.mockReturnValue({});
     mockPlayer.isPaused.mockReturnValue(false);

package/Components/VideoLive/LiveImageManager.ts

@@ -5,7 +5,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { setUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
 import { playerFactory } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
-import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
+import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 import { loggerLiveImageManager } from "./loggerHelper";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {

package/package.json

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