@applicaster/zapp-react-native-ui-components 16.0.0-alpha.3081324238 → 16.0.0-alpha.3202041045

package/Components/ModalComponent/AudioPlayer/utils/mergeStyles.ts

@@ -381,6 +381,22 @@ export function mergeHeaderConfiguration(
 // Button Merging Helpers
 // ---------------------------------------------------------------------------
 
+function fontFamilyName(value: unknown): string | undefined {
+  if (typeof value === "string" && value.trim()) {
+    return value;
+  }
+
+  if (value && typeof value === "object") {
+    const family = (value as { fontFamily?: unknown }).fontFamily;
+
+    if (typeof family === "string" && family.trim()) {
+      return family;
+    }
+  }
+
+  return undefined;
+}
+
 function mergeButtonBackground(
   base: ButtonBackgroundConfiguration,
   defaultOverride?: Record<string, any>,
@@ -399,6 +415,9 @@ function mergeButtonBackground(
     ...(defaultOverride?.backgroundColor
       ? { defaultColor: defaultOverride.backgroundColor }
       : {}),
+    ...(defaultOverride?.inactiveColor
+      ? { inactiveColor: defaultOverride.inactiveColor }
+      : {}),
     ...(focusedColor != null && focusedColor !== "" ? { focusedColor } : {}),
     ...(defaultOverride?.borderRadius !== undefined
       ? { cornerRadius: defaultOverride.borderRadius }
@@ -415,47 +434,62 @@ function mergeButtonBackground(
     ...(defaultOverride?.paddingLeft !== undefined
       ? { paddingLeft: defaultOverride.paddingLeft }
       : {}),
+    ...(defaultOverride?.horizontalGutter !== undefined
+      ? { horizontalGutter: defaultOverride.horizontalGutter }
+      : {}),
   };
 }
 
 function mergeButtonTitle(
   base: ButtonTitleConfiguration,
-  override?: Record<string, any>
+  override?: Record<string, any>,
+  focusedOverride?: Record<string, any>
 ): ButtonTitleConfiguration {
-  if (!override) return base;
+  if (!override && !focusedOverride) return base;
+
+  const fontFamily = fontFamilyName(override?.fontFamily);
+
+  const focusedFontColor =
+    focusedOverride?.fontColor || override?.focusedFontColor;
+
+  const inactiveFontColor = override?.inactiveFontColor;
 
   return {
     ...base,
-    ...(override.fontColor ? { fontColor: override.fontColor } : {}),
-    ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
-    ...(override.lineHeight !== undefined
+    ...(override?.fontColor ? { fontColor: override.fontColor } : {}),
+    ...(focusedFontColor ? { focusedFontColor } : {}),
+    ...(inactiveFontColor ? { inactiveFontColor } : {}),
+    ...(override?.fontSize !== undefined
+      ? { fontSize: override.fontSize }
+      : {}),
+    ...(override?.lineHeight !== undefined
       ? { lineHeight: override.lineHeight }
       : {}),
-    ...(override.fontFamily
+    ...(fontFamily
       ? {
-          iosFontFamily: override.fontFamily,
-          androidFontFamily: override.fontFamily,
+          iosFontFamily: fontFamily,
+          androidFontFamily: fontFamily,
         }
       : {}),
-    ...(override.iosFontFamily
+    ...(override?.iosFontFamily
       ? { iosFontFamily: override.iosFontFamily }
       : {}),
-    ...(override.androidFontFamily
+    ...(override?.androidFontFamily
       ? { androidFontFamily: override.androidFontFamily }
       : {}),
-    ...(override.letterSpacing !== undefined
+    ...(override?.letterSpacing !== undefined
       ? {
           iosLetterSpacing: override.letterSpacing,
           androidLetterSpacing: override.letterSpacing,
         }
       : {}),
-    ...(override.iosLetterSpacing !== undefined
+    ...(override?.iosLetterSpacing !== undefined
       ? { iosLetterSpacing: override.iosLetterSpacing }
       : {}),
-    ...(override.androidLetterSpacing !== undefined
+    ...(override?.androidLetterSpacing !== undefined
       ? { androidLetterSpacing: override.androidLetterSpacing }
       : {}),
-    ...(override.textTransform
+    ...(override?.textTransform
       ? { textTransform: override.textTransform }
       : {}),
   };
@@ -511,13 +545,19 @@ export function mergeButtonConfiguration(
   const titleOverride =
     buttonBlock?.title?.default || actionBlock?.title?.default;
 
+  const titleFocused =
+    buttonBlock?.title?.focused ||
+    buttonBlock?.title?.focus ||
+    actionBlock?.title?.focused ||
+    actionBlock?.title?.focus;
+
   const iconsOverride = buttonBlock?.icons || actionBlock?.icons;
   const leadingOverride = buttonBlock?.leadingIcon || actionBlock?.leadingIcon;
 
   return {
     ...base,
     background: mergeButtonBackground(base.background, bgDefault, bgFocused),
-    title: mergeButtonTitle(base.title, titleOverride),
+    title: mergeButtonTitle(base.title, titleOverride, titleFocused),
     icons: mergeButtonIcons(base.icons, iconsOverride, leadingOverride),
   };
 }

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -90,6 +90,7 @@ type ModalComponentProps = {
   /** Optional body that replaces the items list (header stays DefaultModalHeader). */
   contentComponent?: React.ComponentType<any>;
   contentComponentProps?: Record<string, any>;
+  themePluginId?: string;
   styleOverrides?: ModalBlocksConfig | Record<string, any>;
   measurementPhase?: boolean;
   /** Copy under Next Up when the queue has no upcoming items. */
@@ -115,6 +116,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     iconPlacement,
     contentComponent: ContentComponent,
     contentComponentProps = {},
+    themePluginId: themePluginIdProp,
     measurementPhase = false,
     emptyMessage,
   } = props;
@@ -139,12 +141,14 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     role,
     behavior,
     editableCollection,
-    themePluginId,
+    themePluginId: themePluginIdFromSheet,
   } = useBottomSheetContent({
     onPress,
     viewModel,
   });
 
+  const themePluginId = themePluginIdFromSheet || themePluginIdProp;
+
   const plugins = usePlugins();
 
   const plugin = useMemo(

package/Components/ModalComponent/__tests__/showTextInput.test.ts

@@ -92,4 +92,29 @@ describe("showTextInputAction", () => {
     expect(result).toBe(ActionResult.Error);
     expect(actionExecutor.handleAction).not.toHaveBeenCalled();
   });
+
+  it("forwards themePluginId so the sheet can read plugin button styles", async () => {
+    const action = {
+      type: "showTextInput",
+      options: {
+        headerTitle: "Create New Playlist",
+        inputLabel: "Name your playlist",
+        buttonLabel: "Create",
+        themePluginId: "playlist-experience",
+        actions: [{ type: "sendCloudEvent", options: {} }],
+      },
+    };
+
+    await showTextInputAction(action as any);
+
+    expect(actionExecutor.handleAction).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "openBottomSheet",
+        options: expect.objectContaining({
+          themePluginId: "playlist-experience",
+        }),
+      }),
+      undefined
+    );
+  });
 });

package/Components/ModalComponent/showTextInput.ts

@@ -21,6 +21,7 @@ export async function showTextInputAction(
     validationLabel,
     actions,
     maxLength,
+    themePluginId,
   } = action.options || {};
 
   if (!headerTitle || !buttonLabel || !actions || !actions.length) {
@@ -34,6 +35,7 @@ export async function showTextInputAction(
         header: {
           title: headerTitle,
         },
+        ...(themePluginId ? { themePluginId } : {}),
         content: {
           component: TextInputContent,
           props: {

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -273,7 +273,10 @@ const PlayerContainerComponent = (props: Props) => {
   const playEntry = (entry: ZappEntry) => navigator.replaceTop(entry, { mode });
 
   const onPlayNextPerformNextVideoPlay = React.useCallback(() => {
-    if (!playNextOverlayState.entry) {
+    // The overlay's entry, or the player's when the overlay is not showing yet (X-Ray player.next)
+    const nextEntry = playNextOverlayState?.entry ?? player?.getPlayNextEntry();
+
+    if (!nextEntry) {
       log_warning(
         "onPlayNextPerformNextVideoPlay: playNextOverlayState.entry is not defined"
       );
@@ -282,16 +285,30 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     log_debug(
-      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}, outgoing item id: ${item?.id}`
+      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${nextEntry.title}, id: ${nextEntry.id}, outgoing item id: ${item?.id}`
     );
 
-    playNextOverlayState.hidePlayNext();
+    (
+      playNextOverlayState?.hidePlayNext ??
+      player?.getOverlayObservable()?.hidePlayNext
+    )?.();
 
     playerEvent(PLAYER_EVENTS.PlayNextTriggered, { id: item?.id });
 
     setIsLoadingNextVideo(true);
-    playEntry(playNextOverlayState.entry);
-  }, [playNextOverlayState, item?.id]);
+    playEntry(nextEntry);
+  }, [playNextOverlayState, item?.id, player]);
+
+  // Lets the X-Ray player.next tool run the same Play Next path as the overlay.
+  useEffect(() => {
+    if (!player) return;
+
+    player.playNextHandler = onPlayNextPerformNextVideoPlay;
+
+    return () => {
+      player.playNextHandler = null;
+    };
+  }, [player, onPlayNextPerformNextVideoPlay]);
 
   const playNextData: Nullable<PlayNextData> = React.useMemo(() => {
     if (!playNextOverlayState) {

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

@@ -127,6 +127,8 @@ jest.mock(
       seekTo: jest.fn(),
       getPluginConfiguration: jest.fn(() => ({})),
       getOverlayObservable: jest.fn(() => ({ getPlayNextEntry: () => null })),
+      getPlayNextEntry: jest.fn(() => null),
+      playNextHandler: null,
     };
 
     return {
@@ -335,3 +337,52 @@ describe("PlayerContainer hardware back handling", () => {
     expect(mockNavigator.closeVideoModal).not.toHaveBeenCalled();
   });
 });
+
+describe("PlayerContainer Play Next action for X-Ray player.next", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockIsTV.mockReturnValue(false);
+    mockPlayer.getPluginConfiguration.mockReturnValue({});
+    mockPlayerManager.getPluginConfiguration.mockReturnValue({});
+    mockPlayerManager.on.mockReturnThis();
+    mockPlayerManager.removeHandler.mockReturnThis();
+  });
+
+  it("sets its Play Next action on the player and clears it on unmount", () => {
+    const { unmount } = renderPlayerContainer();
+
+    expect(mockPlayer.playNextHandler).toEqual(expect.any(Function));
+
+    unmount();
+
+    expect(mockPlayer.playNextHandler).toBeNull();
+  });
+
+  it("plays the player's next entry once, with analytics and the overlay hidden, when the overlay is not showing", () => {
+    const next = { id: "entry-2", title: "Next" };
+    const hidePlayNext = jest.fn();
+    mockPlayer.getPlayNextEntry.mockReturnValue(next);
+
+    mockPlayer.getOverlayObservable.mockReturnValue({
+      getPlayNextEntry: () => next,
+      hidePlayNext,
+    });
+
+    renderPlayerContainer();
+
+    mockPlayer.playNextHandler();
+
+    expect(hidePlayNext).toHaveBeenCalledTimes(1);
+
+    expect(mockPlayerManager.invokeHandler).toHaveBeenCalledWith(
+      "play_next_triggered",
+      { id: "entry-1" }
+    );
+
+    expect(mockNavigator.replaceTop).toHaveBeenCalledTimes(1);
+
+    expect(mockNavigator.replaceTop).toHaveBeenCalledWith(next, {
+      mode: VideoModalMode.MAXIMIZED,
+    });
+  });
+});

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -118,7 +118,10 @@ function ComponentsMapComponent(props: Props) {
       };
 
       return (
-        <ScreenLoadingMeasurementsListItemWrapper index={index}>
+        <ScreenLoadingMeasurementsListItemWrapper
+          index={index}
+          testID={`component-${item.id}`}
+        >
           <RiverItem {...riverItemProps} />
         </ScreenLoadingMeasurementsListItemWrapper>
       );

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -213,6 +213,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           <View
             onLayout={[Function]}
             style={{}}
+            testID="component-A1"
           >
             <View />
           </View>
@@ -225,6 +226,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           <View
             onLayout={[Function]}
             style={{}}
+            testID="component-A2"
           />
         </View>
         <View

package/Components/VideoLive/LiveImageManager.ts

@@ -3,7 +3,10 @@ import {
   PlayerLifecycleListener,
   playerManager,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
-import { setUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
+import {
+  getUserCellPlayerMutedPreference,
+  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/const";
 import { loggerLiveImageManager } from "./loggerHelper";
@@ -21,13 +24,15 @@ export type LiveImageManagerEvent =
   | "onEnd"
   | "onStart"
   | "onError"
-  | "onDestroy";
+  | "onDestroy"
+  | "onRegister"
+  | "onPlaybackChange"
+  | "onMuteChange";
 
 export type LiveImageManagerListenerData = {
   id: string;
-  listener: Record<
-    LiveImageManagerEvent,
-    (event?: Record<string, any>) => void
+  listener: Partial<
+    Record<LiveImageManagerEvent, (event?: Record<string, any>) => void>
   >;
 };
 
@@ -54,6 +59,7 @@ type PlayerFactoryConfig = {
 };
 
 type LiveImageProps = {
+  audioMutedByDefault?: boolean;
   playerId: string;
   setMode?: (type: LiveImageType) => void;
   preloadHooks?: PreloadHookConfig[];
@@ -81,9 +87,11 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   protected listeners: Record<
     string,
-    Record<LiveImageManagerEvent, (event?: Record<string, any>) => void>
+    LiveImageManagerListenerData["listener"]
   > = {};
 
+  private mutedSubscriptions = new Map<LiveImage, () => void>();
+
   constructor() {
     playerManager.addLifecycleListener(this);
     this.listeners = {};
@@ -96,8 +104,25 @@ export class LiveImageManager implements PlayerLifecycleListener {
   }
 
   public register = (item: LiveImage): (() => void) => {
+    if (!isTV()) {
+      const muted = !!getUserCellPlayerMutedPreference(item.getMuted());
+
+      if (muted !== item.getMuted()) {
+        muted ? item.mute() : item.unmute();
+      }
+    }
+
     this.items.push(item);
+
+    this.mutedSubscriptions.set(
+      item,
+      item.subscribeMuted(() =>
+        this.invokeListenersUpdate({ callbackName: "onMuteChange" })
+      )
+    );
+
     log_debug(`register: live image ${item.playerId} - ${item.tag}`);
+    this.invokeListenersUpdate({ callbackName: "onRegister" });
 
     // TV only Start playing video once registered
     if (isTV()) {
@@ -109,6 +134,8 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   public unregister = (item: LiveImage) => {
     log_debug(`unregister: live-image ${item.playerId} - ${item.tag}`);
+    this.mutedSubscriptions.get(item)?.();
+    this.mutedSubscriptions.delete(item);
 
     if (this.currentlyPlaying === item) {
       this.currentlyPlaying = null;
@@ -172,6 +199,25 @@ export class LiveImageManager implements PlayerLifecycleListener {
     return this.currentlyPlaying;
   };
 
+  public getEntryMuted = (entryId: string): boolean | undefined => {
+    const matches = (item: LiveImage) => String(item.getEntryId()) === entryId;
+
+    const item =
+      this.currentlyPlaying && matches(this.currentlyPlaying)
+        ? this.currentlyPlaying
+        : this.items.find(matches);
+
+    return item?.getMuted();
+  };
+
+  public getPlayingCellId = (entryId: string): string | undefined => {
+    const item = this.currentlyPlaying;
+
+    return item && String(item.getEntryId()) === entryId && item.isPlaying()
+      ? item.playerId
+      : undefined;
+  };
+
   private findNextPlayableItem = () => {
     if (isTV()) {
       return this.items[this.items.length - 1];
@@ -302,6 +348,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
     setUserCellPlayerMutedPreference(true);
 
     this.items.forEach((liveImage) => liveImage.mute());
+    this.invokeListenersUpdate({ callbackName: "onMuteChange" });
   };
 
   public unmuteAll = () => {
@@ -310,6 +357,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
     setUserCellPlayerMutedPreference(false);
 
     this.items.forEach((liveImage) => liveImage.unmute());
+    this.invokeListenersUpdate({ callbackName: "onMuteChange" });
   };
 
   public onViewPositionChanged = (item: LiveImage) => {
@@ -579,20 +627,67 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     left: 0,
   };
 
-  // Keeps muted state in sync: updates the initial value for deferred
-  // player creation and forwards to the player if it already exists.
-  public initiallyMuted: boolean = true;
+  private muted: boolean;
+  private mutedListeners = new Set<() => void>();
+  private playbackEnded = false;
+
+  getMuted = (): boolean => this.muted;
+
+  getEntryId = () => this.factoryConfig.entry.id;
+
+  isPlaying = (): boolean =>
+    !this.playbackEnded &&
+    !!this.player?.isReadyToPlay() &&
+    this.player.isPlaying();
+
+  subscribeMuted = (listener: () => void): (() => void) => {
+    this.mutedListeners.add(listener);
+
+    return () => this.mutedListeners.delete(listener);
+  };
+
+  private setMuted = (muted: boolean) => {
+    if (this.muted === muted) return;
+
+    this.muted = muted;
+
+    this.mutedListeners.forEach((listener) => {
+      try {
+        listener();
+      } catch (error) {
+        log_error(`Mute listener failed for ${this.playerId}`, { error });
+      }
+    });
+  };
 
   mute = () => {
-    this.initiallyMuted = true;
+    this.setMuted(true);
     this.player?.mute();
   };
 
   unmute = () => {
-    this.initiallyMuted = false;
+    this.setMuted(false);
     this.player?.unmute();
   };
 
+  onPlayerMute = () => this.setMuted(true);
+
+  onPlayerUnmute = () => this.setMuted(false);
+
+  onPlayerResume = () => {
+    this.playbackEnded = false;
+
+    LiveImageManager.instance.invokeListenersUpdate({
+      callbackName: "onPlaybackChange",
+    });
+  };
+
+  onPlayerPause = () => {
+    LiveImageManager.instance.invokeListenersUpdate({
+      callbackName: "onPlaybackChange",
+    });
+  };
+
   positionToString() {
     if (!this.position) {
       return "position not set";
@@ -617,6 +712,10 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     this.preloadHooks = props.preloadHooks;
     this.factoryConfig = props.factoryConfig;
     this.tag = props.tag || "untagged";
+
+    this.muted = isTV()
+      ? false
+      : !!getUserCellPlayerMutedPreference(props.audioMutedByDefault);
   }
 
   async prepareForPlayback(): Promise<boolean> {
@@ -670,7 +769,7 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
       playerId: this.factoryConfig.playerId,
       autoplay: false,
       entry,
-      muted: this.initiallyMuted,
+      muted: this.muted,
       playerPluginId: this.factoryConfig.playerPluginId,
       screenConfig: this.factoryConfig.screenConfig,
       playerRole: PlayerRole.Cell,
@@ -686,6 +785,11 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     this.component = factoryItem.Component;
     this.player.addListener({ id: "live-image", listener: this });
 
+    // A user toggle may have arrived while the async factory was pending.
+    if (this.player.getIsMuted() !== this.muted) {
+      this.muted ? this.player.mute() : this.player.unmute();
+    }
+
     return true;
   }
 
@@ -694,6 +798,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onLoad = (_event) => {
+    this.playbackEnded = false;
+
     log_info(
       `onLoad: live-image, video loaded, switching to video, ${playerInfo(
         this.player
@@ -704,6 +810,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onError = (error: Error) => {
+    this.playbackEnded = true;
+
     log_error(
       `onError: live-image, fail to play, switching back to image. error: ${
         error?.message
@@ -714,6 +822,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onVideoError = (error: Error) => {
+    this.playbackEnded = true;
+
     log_error(
       `onVideoError: live-image, fail to play, switching back to image. error: ${
         error?.message
@@ -724,6 +834,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onVideoEnd = (_event) => {
+    this.playbackEnded = true;
+
     log_info(
       `onVideoEnd: live-image, video completed, switching back to image, ${playerInfo(
         this.player
@@ -734,6 +846,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onPlayerClose = () => {
+    this.playbackEnded = true;
+
     log_info(
       `onPlayerClose: live-image, player closed, switching back to image, ${playerInfo(
         this.player