@applicaster/zapp-react-native-ui-components 16.0.0-alpha.2529997432 → 16.0.0-alpha.2663208063

package/Components/ModalComponent/utils.ts

@@ -1,4 +1,8 @@
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { PluginConfiguration } from "./";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemLabelProps } from "./Button/ItemLabel";
@@ -6,7 +10,8 @@ import { ItemProps } from "./Button/Item";
 
 export function defaultItemProps(
   config: PluginConfiguration,
-  maxWidth: number
+  maxWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemProps {
   const {
     modal_bottom_sheet_item_background_color,
@@ -24,19 +29,31 @@ export function defaultItemProps(
     modal_bottom_sheet_item_padding_top,
   } = config;
 
+  const bgDefault = blockItemStyle?.background?.default;
+
   return {
-    backgroundColor: modal_bottom_sheet_item_background_color,
+    backgroundColor:
+      bgDefault?.backgroundColor || modal_bottom_sheet_item_background_color,
     focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
     selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
     focusedSelectedBackgroundColor:
       modal_bottom_sheet_item_focused_selected_background_color,
-    borderRadius: modal_bottom_sheet_item_corner_radius,
+    borderRadius: toNumberWithDefault(
+      modal_bottom_sheet_item_corner_radius,
+      bgDefault?.borderRadius
+    ),
     marginBottom: modal_bottom_sheet_item_margin_bottom,
     marginTop: modal_bottom_sheet_item_margin_top,
     marginLeft: modal_bottom_sheet_item_margin_left,
     marginRight: modal_bottom_sheet_item_margin_right,
-    paddingTop: modal_bottom_sheet_item_padding_top,
-    paddingBottom: modal_bottom_sheet_item_padding_bottom,
+    paddingTop: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_top,
+      bgDefault?.paddingTop
+    ),
+    paddingBottom: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_bottom,
+      bgDefault?.paddingBottom
+    ),
     paddingRight: modal_bottom_sheet_item_padding_right,
     paddingLeft: modal_bottom_sheet_item_padding_left,
     maxWidth,
@@ -45,7 +62,8 @@ export function defaultItemProps(
 
 export function defaultItemLabelProps(
   config: PluginConfiguration,
-  sheetWidth: number
+  sheetWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemLabelProps {
   const {
     modal_bottom_sheet_item_label_android_letter_spacing,
@@ -72,15 +90,48 @@ export function defaultItemLabelProps(
     modal_bottom_sheet_item_padding_right,
   } = config;
 
-  const maxWidth =
+  const iconWidth = toNumberWithDefaultZero(modal_bottom_sheet_item_icon_width);
+
+  const iconMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_left
+  );
+
+  const iconMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_right
+  );
+
+  const itemMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_left
+  );
+
+  const itemMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_right
+  );
+
+  const itemPaddingLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_left
+  );
+
+  const itemPaddingRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_right
+  );
+
+  const calculatedMaxWidth =
     sheetWidth -
-    (modal_bottom_sheet_item_icon_width +
-      modal_bottom_sheet_item_icon_margin_left +
-      modal_bottom_sheet_item_icon_margin_right +
-      modal_bottom_sheet_item_margin_left +
-      modal_bottom_sheet_item_margin_right +
-      modal_bottom_sheet_item_padding_left +
-      modal_bottom_sheet_item_padding_right);
+    (iconWidth +
+      iconMarginLeft +
+      iconMarginRight +
+      itemMarginLeft +
+      itemMarginRight +
+      itemPaddingLeft +
+      itemPaddingRight);
+
+  const maxWidth =
+    Number.isNaN(calculatedMaxWidth) || calculatedMaxWidth <= 0
+      ? sheetWidth
+      : calculatedMaxWidth;
+
+  const label1Default = blockItemStyle?.textLabel1?.default;
 
   return {
     fontFamily: platformSelect({
@@ -91,8 +142,11 @@ export function defaultItemLabelProps(
       ios: modal_bottom_sheet_item_label_ios_letter_spacing,
       android: modal_bottom_sheet_item_label_android_letter_spacing,
     }),
-    fontSize: modal_bottom_sheet_item_label_font_size,
-    color: modal_bottom_sheet_item_label_font_color,
+    fontSize: toNumberWithDefault(
+      modal_bottom_sheet_item_label_font_size,
+      label1Default?.fontSize
+    ),
+    color: label1Default?.fontColor || modal_bottom_sheet_item_label_font_color,
     focusColor: modal_bottom_sheet_item_label_focus_font_color,
     hoverSelectedColor: modal_bottom_sheet_item_label_hover_selected_font_color,
     selectedColor: modal_bottom_sheet_item_label_selected_font_color,
@@ -146,7 +200,8 @@ export function getItemLabelProps(
   width: number,
   labelProps?:
     | ((theme: PluginConfiguration, width: number) => ItemLabelProps)
-    | ItemLabelProps
+    | ItemLabelProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (labelProps) {
     return typeof labelProps === "function"
@@ -154,7 +209,7 @@ export function getItemLabelProps(
       : labelProps;
   }
 
-  return defaultItemLabelProps(theme, width);
+  return defaultItemLabelProps(theme, width, blockItemStyle);
 }
 
 export function getItemProps(
@@ -162,7 +217,8 @@ export function getItemProps(
   width: number,
   itemProps?:
     | ((theme: PluginConfiguration, width: number) => ItemProps)
-    | ItemProps
+    | ItemProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (itemProps) {
     return typeof itemProps === "function"
@@ -170,5 +226,5 @@ export function getItemProps(
       : itemProps;
   }
 
-  return defaultItemProps(theme, width);
+  return defaultItemProps(theme, width, blockItemStyle);
 }

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