@applicaster/zapp-react-native-ui-components 15.0.0-rc.14 → 15.0.0-rc.140

package/Components/VideoLive/LiveImageManager.ts

@@ -4,9 +4,14 @@ import {
   playerManager,
 } 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 { loggerLiveImageManager } from "./loggerHelper";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { Component } from "react";
+import {
+  executePreloadHooks,
+  PreloadHookConfig,
+} from "../MasterCell/DefaultComponents/LiveImage/executePreloadHooks";
 
 const TIMEOUT_FOR_DELAY_CHECK_PLAYER_POSITION = 500; // ms
 
@@ -40,13 +45,21 @@ type Position = {
   right: number;
 };
 
+type PlayerFactoryConfig = {
+  player: any; // React ref for native view
+  playerId: string;
+  muted: boolean;
+  playerPluginId: string;
+  screenConfig: Record<string, any>;
+  entry: ZappEntry; // original entry, used as fallback if no hooks
+};
+
 type LiveImageProps = {
-  player: Player;
   playerId: string;
   setMode?: (type: LiveImageType) => void;
-  component: Component;
-  // TODO: ...primary, powerCell, tvGallery, etc.
-  // type: string;
+  preloadHooks?: PreloadHookConfig[];
+  factoryConfig: PlayerFactoryConfig;
+  tag: string;
 };
 
 // Disabled because we have only unmute button but no play/pause state anymore
@@ -85,7 +98,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   public register = (item: LiveImage): (() => void) => {
     this.items.push(item);
-    log_debug(`register: live image ${playerInfo(item.player)}`);
+    log_debug(`register: live image ${item.playerId} - ${item.tag}`);
 
     // TV only Start playing video once registered
     if (isTV()) {
@@ -96,15 +109,13 @@ export class LiveImageManager implements PlayerLifecycleListener {
   };
 
   public unregister = (item: LiveImage) => {
-    log_debug(`unregister: live-image ${playerInfo(item.player)}`);
+    log_debug(`unregister: live-image ${item.playerId} - ${item.tag}`);
 
     if (this.currentlyPlaying === item) {
       this.currentlyPlaying = null;
 
       log_debug(
-        `unregister: currently playing live-image was destroyed, ${playerInfo(
-          item.player
-        )}`
+        `unregister: currently playing live-image was destroyed, ${item.playerId} - ${item.tag}`
       );
 
       // TODO: Maybe start another one
@@ -118,7 +129,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
         item,
         playerId: this.currentlyPlaying?.playerId,
         primaryPlayerId: this.primaryPlayer?.playerId,
-        entry: item.getPlayer().getEntry(),
+        entry: item.getPlayer()?.getEntry(),
       },
     });
   };
@@ -130,9 +141,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   public onViewportEnter = (item: LiveImage) => {
     log_debug(
-      `onViewportEnter: live-image ${playerInfo(
-        item.player
-      )}, primary ${playerInfo(this.primaryPlayer)}`
+      `onViewportEnter: live-image ${item.playerId} - ${item.tag}, primary ${playerInfo(this.primaryPlayer)} - position:${item.positionToString()}`
     );
 
     if (!isTV()) {
@@ -154,9 +163,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   public onViewportLeave = (item: LiveImage) => {
     log_debug(
-      `onViewportLeave: live-image playerId: ${playerInfo(
-        item.player
-      )}, primary ${playerInfo(this.primaryPlayer)}`
+      `onViewportLeave: live-image ${item.playerId} - ${item.tag}, primary ${playerInfo(this.primaryPlayer)} - position:${item.positionToString()}`
     );
 
     this.pauseItem(item);
@@ -190,20 +197,29 @@ export class LiveImageManager implements PlayerLifecycleListener {
     this.items.find((i) => i.playerId === playerId) || null;
 
   private pauseItem = (item: LiveImage) => {
-    log_debug(`pauseItem: live-image ${playerInfo(item.player)}`);
+    log_debug(`pauseItem: live-image ${item.playerId} - ${item.tag}`);
+
+    if (!item.player) {
+      // Player not yet created (e.g. hooks still running) — just reset mode
+      item.setMode?.(LiveImageType.Image);
+
+      if (item === this.currentlyPlaying) {
+        this.currentlyPlaying = null;
+      }
+
+      return;
+    }
 
     if (!item.player.playerState.isReadyToPlay) {
       log_debug(
-        `playItem: live-image not ready, will start playback after loading, ${playerInfo(
-          item.player
-        )}`
+        `pauseItem: live-image not ready, ${item.playerId} - ${item.tag}`
       );
     } else {
-      item.player?.pause();
+      item.player.pause();
     }
 
     // Fake close event, because we unmount native view
-    item.player?.onPlayerClose();
+    item.player.onPlayerClose();
     item.setMode?.(LiveImageType.Image);
 
     if (item === this.currentlyPlaying) {
@@ -213,9 +229,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   public playLiveImage = (item: LiveImage) => {
     log_debug(
-      `playLiveImage: live-image ${playerInfo(
-        item.player
-      )}, primary ${playerInfo(this.primaryPlayer)}`
+      `playLiveImage: live-image ${item.playerId} - ${item.tag}, primary ${playerInfo(this.primaryPlayer)}`
     );
 
     if (this.primaryPlayer) {
@@ -223,7 +237,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
     }
 
     if (this.currentlyPlaying) {
-      if (this.currentlyPlaying?.player?.playerId === item.player.playerId) {
+      if (this.currentlyPlaying.playerId === item.playerId) {
         return;
       } else {
         this.pauseItem(this.currentlyPlaying);
@@ -231,18 +245,42 @@ export class LiveImageManager implements PlayerLifecycleListener {
     }
 
     this.currentlyPlaying = item;
-    item.setMode?.(LiveImageType.Video);
 
-    if (item.player.playerState.isReadyToPlay) {
-      item.player.play();
-    }
+    item
+      .prepareForPlayback()
+      .then((result) => {
+        if (!result) {
+          log_error(
+            `Failed to prepare live image ${item.playerId} - ${item.tag} for playback: prepareForPlayback returned false`
+          );
+
+          this.currentlyPlaying = null;
+          item.setMode?.(LiveImageType.Image);
+
+          return;
+        }
+
+        // Guard: item might have been replaced while hooks were running
+        if (this.currentlyPlaying !== item) return;
+
+        item.setMode?.(LiveImageType.Video);
+
+        if (item.player?.playerState.isReadyToPlay) {
+          item.player.play();
+        }
+      })
+      .catch((error) => {
+        log_error(
+          `Failed to prepare live image ${item.playerId} - ${item.tag} for playback: ${error?.message}`
+        );
+
+        this.onLiveImageError(item, error);
+      });
   };
 
   public pauseLiveImage = (item: LiveImage) => {
     log_debug(
-      `pauseLiveImage: live-image playerId: ${playerInfo(
-        item.player
-      )}, primary ${playerInfo(this.primaryPlayer)}`
+      `pauseLiveImage: live-image ${item.playerId} - ${item.tag}, primary ${playerInfo(this.primaryPlayer)}`
     );
 
     this.pauseItem(item);
@@ -258,7 +296,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
     setUserCellPlayerMutedPreference(true);
 
-    this.items.forEach((liveImage) => liveImage.player.mute());
+    this.items.forEach((liveImage) => liveImage.player?.mute());
   };
 
   public unmuteAll = () => {
@@ -266,16 +304,36 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
     setUserCellPlayerMutedPreference(false);
 
-    this.items.forEach((liveImage) => liveImage.player.unmute());
+    this.items.forEach((liveImage) => liveImage.player?.unmute());
   };
 
-  public checkPlayerPosition = (item: LiveImage) => {
+  public onViewPositionChanged = (item: LiveImage) => {
+    log_debug(
+      `onViewPositionChanged: live-image ${item.playerId} - ${item.tag}, primary ${playerInfo(this.primaryPlayer)} - position:${item.positionToString()}`
+    );
+
+    if (!isTV()) {
+      // mobile only
+      // we have to delay running checkPlayerPosition, because sometimes on fast scrolling we get wrong order onEnter, then onLeave.
+      // which could cause select wrong item to play
+
+      this.cancelCheckPlayerPositionTimeout();
+
+      this.checkPlayerPositionTimeout = setTimeout(() => {
+        this.cancelCheckPlayerPositionTimeout();
+
+        this.checkPlayerPosition(item);
+      }, TIMEOUT_FOR_DELAY_CHECK_PLAYER_POSITION);
+    } else {
+      this.checkPlayerPosition(item);
+    }
+  };
+
+  private checkPlayerPosition = (item: LiveImage) => {
     this.cancelCheckPlayerPositionTimeout();
 
     log_debug(
-      `checkPlayerPosition: live-image playerId: ${playerInfo(
-        item.player
-      )}, primary ${playerInfo(this.primaryPlayer)}`
+      `checkPlayerPosition: live-image ${item.playerId} - ${item.tag}, primary ${playerInfo(this.primaryPlayer)}`
     );
 
     const playerItem = this.findNextPlayableItem();
@@ -391,7 +449,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
         item,
         playerId: this.currentlyPlaying?.playerId,
         primaryPlayerId: this.primaryPlayer?.playerId,
-        entry: item.getPlayer().getEntry(),
+        entry: item.getPlayer()?.getEntry(),
       },
     });
   };
@@ -426,7 +484,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
           item,
           playerId: this.currentlyPlaying?.playerId,
           primaryPlayerId: this.primaryPlayer?.playerId,
-          entry: item.getPlayer().getEntry(),
+          entry: item.getPlayer()?.getEntry(),
         },
       });
   };
@@ -448,7 +506,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
       this.currentlyPlaying = null;
 
       log_debug(
-        `onLiveImageError: currentitem: ${currentItem.playerId} was removed`
+        `onLiveImageError: currentItem: ${currentItem.playerId} - ${currentItem.tag} was removed`
       );
 
       // TODO: ...Maybe player some other item
@@ -460,8 +518,8 @@ export class LiveImageManager implements PlayerLifecycleListener {
         item,
         error,
         playerId: currentItem?.playerId,
-        primaryPlayerId: currentItem?.playerId,
-        entry: item.getPlayer().getEntry(),
+        primaryPlayerId: this.primaryPlayer?.playerId,
+        entry: item.getPlayer()?.getEntry(),
       },
     });
   };
@@ -503,10 +561,10 @@ export class LiveImageManager implements PlayerLifecycleListener {
 LiveImageManager.instance;
 
 export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
-  public player: Player;
-  public setMode: (type: LiveImageType) => void;
-  // Will be replaced with rects
+  public player: Player | null = null;
+  public setMode?: (type: LiveImageType) => void;
   public isFullyVisible: boolean = false;
+  public tag: string;
   public position: Position = {
     centerX: 0,
     centerY: 0,
@@ -516,18 +574,105 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     left: 0,
   };
 
+  positionToString() {
+    if (!this.position) {
+      return "position not set";
+    }
+
+    const { centerX, centerY, top, bottom, left, right } = this.position;
+
+    return `centerX: ${centerX.toFixed(2)}, centerY: ${centerY.toFixed(2)}, top: ${top.toFixed(2)}, bottom: ${bottom.toFixed(2)}, left: ${left.toFixed(2)}, right: ${right.toFixed(2)}`;
+  }
+
   readonly playerId: string;
-  readonly component: Component;
+  public component: any = null;
+
+  private factoryConfig: PlayerFactoryConfig;
+  public preloadHooks?: PreloadHookConfig[];
+  public processedEntry: ZappEntry | null = null;
+  private _preparePromise: Promise<boolean> | null = null;
 
   constructor(props: LiveImageProps) {
-    this.player = props.player;
     this.setMode = props.setMode;
-    this.playerId = this.player.playerId;
-    this.component = props.component;
-    this.player.addListener({ id: "live-image", listener: this });
+    this.playerId = props.playerId;
+    this.preloadHooks = props.preloadHooks;
+    this.factoryConfig = props.factoryConfig;
+    this.tag = props.tag || "untagged";
+  }
+
+  async prepareForPlayback(): Promise<boolean> {
+    // Already prepared — player exists
+    if (this.player) {
+      return true;
+    }
+
+    // Deduplicate: if preparation is already in flight, await the same promise
+    if (this._preparePromise) {
+      return this._preparePromise;
+    }
+
+    this._preparePromise = (async (): Promise<boolean> => {
+      // 1. Run hooks if configured
+      let entry = this.factoryConfig.entry;
+
+      if (this.preloadHooks?.length) {
+        const result = await executePreloadHooks({
+          preloadHooks: this.preloadHooks,
+          entry,
+        });
+
+        if (result) {
+          this.processedEntry = result;
+          entry = result;
+        } else {
+          return false;
+        }
+      }
+
+      // 2. Create the player with the correct entry
+      const factoryItem = playerFactory({
+        player: this.factoryConfig.player,
+        playerId: this.factoryConfig.playerId,
+        autoplay: false,
+        entry,
+        muted: this.factoryConfig.muted,
+        playerPluginId: this.factoryConfig.playerPluginId,
+        screenConfig: this.factoryConfig.screenConfig,
+        playerRole: PlayerRole.Cell,
+      });
+
+      if (!factoryItem) {
+        throw new Error("Player factory returned null");
+      }
+
+      this.player = factoryItem.controller;
+      this.component = factoryItem.Component;
+
+      // 3. Register callbacks — player now exists
+      this.player.addListener({ id: "live-image", listener: this });
+
+      return true;
+    })()
+      .then((result) => {
+        this._preparePromise = null;
+
+        return result;
+      })
+      .catch((error) => {
+        this._preparePromise = null;
+
+        log_error(
+          `prepareForPlayback: live-image ${this.playerId}, error preparing for playback: ${error?.message}`,
+          { error }
+        );
+
+        throw error;
+      });
+
+    return this._preparePromise;
   }
 
-  public getPlayer = (): Player => {
+  public getPlayer = (): Player | null => {
     return this.player;
   };
 

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -7,8 +7,6 @@ import { AppState, AppStateStatus, View } from "react-native";
 import { TrackedView } from "../TrackedView";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 
-import { playerFactory } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
-
 import {
   isApplePlatform,
   isTV,
@@ -22,15 +20,15 @@ import { AnimatedInOut } from "@applicaster/zapp-react-native-ui-components/Comp
 import { overlayFadeIn } from "./animationUtils";
 import { loggerLiveImageComponent } from "./loggerHelper";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
 import { getAutoplaySettings } from "./utils";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
+import { PreloadHookConfig } from "../MasterCell/DefaultComponents/LiveImage/executePreloadHooks";
 
 const { log_error, log_debug } = loggerLiveImageComponent;
 
-const isMeasurement = (item: ZappEntry) =>
-  isString(item.id) && item.id.startsWith("pre-measurement-");
+const isMeasurement = (itemId: string | number | null): boolean =>
+  isString(itemId) && itemId.startsWith("pre-measurement-");
 
 // Pixels by which the view can slightly extend outside the viewport and still be considered fully visible.
 const CLIP_THRESHOLD = 10;
@@ -44,6 +42,7 @@ type Props = {
   screenConfig: Record<string, any>;
   audioMutedByDefault?: boolean;
   uri: string; // cover image url
+  preloadHooks?: PreloadHookConfig[];
 };
 
 const PlayerLiveImageComponent = (props: Props) => {
@@ -116,43 +115,36 @@ const PlayerLiveImageComponent = (props: Props) => {
     }
 
     entryToViewIdMapping.current[nativeTag] = { itemId: item.id };
-  }, [trackViewRef.current, item.id, mode]);
+  }, [item.id, mode]);
 
-  const { screenConfig, playerPluginId } = props;
+  const { screenConfig, playerPluginId, preloadHooks } = props;
 
   const liveImageItem: LiveImage = React.useMemo(() => {
-    const playerFactoryItem = playerFactory({
-      player: ref,
+    return new LiveImage({
       playerId,
-      autoplay: false,
-      entry: item,
-      muted, // Initial muted state, not needed in dependencies
-      playerPluginId: playerPluginId,
-      screenConfig: screenConfig,
-      playerRole: PlayerRole.Cell,
-    });
-
-    if (playerFactoryItem) {
-      return new LiveImage({
+      preloadHooks,
+      factoryConfig: {
+        player: ref,
         playerId,
-        player: playerFactoryItem.controller,
-        component: playerFactoryItem?.Component,
-      });
-    } else {
-      throw new Error("Player factory item is null");
-    }
-  }, [playerId, item.id, playerPluginId, screenConfig]);
+        muted,
+        playerPluginId: playerPluginId,
+        screenConfig: screenConfig,
+        entry: item,
+      },
+      tag: item.title?.toString(),
+    });
+  }, [playerId, preloadHooks, muted, playerPluginId, screenConfig, item]);
 
   React.useEffect(() => {
     liveImageItem.setMode = setModeDebounced;
   }, [setModeDebounced, liveImageItem]);
 
+  // todo: no need for it to be react, can be moved into `player.addListener`
   const { start, end } = React.useMemo(
     () => getAutoplaySettings(item),
     [item.id]
   );
 
-  const controller = liveImageItem.getPlayer();
   const player = usePlayer(playerId);
 
   const _assignRoot = (component) => {
@@ -169,7 +161,7 @@ const PlayerLiveImageComponent = (props: Props) => {
 
   React.useEffect(() => {
     // FIXME - find a more elegant way to disable live-image on cell for measurement
-    if (isMeasurement(item)) {
+    if (isMeasurement(item.id)) {
       return;
     }
 
@@ -253,7 +245,13 @@ const PlayerLiveImageComponent = (props: Props) => {
   }, [item.id]);
 
   React.useEffect(() => {
-    if (isMeasurement(item) || !playerManager) {
+    if (isMeasurement(item.id) || !playerManager) {
+      return;
+    }
+
+    const controller = liveImageItem.getPlayer();
+
+    if (!controller) {
       return;
     }
 
@@ -273,7 +271,7 @@ const PlayerLiveImageComponent = (props: Props) => {
         playerManager.unregisterPlayer(playerId);
       };
     }
-  }, [liveImageItem, playerId, controller, item.id]);
+  }, [liveImageItem, playerId, mode, item.id]);
 
   const onPositionUpdated = React.useCallback(
     (data) => {
@@ -310,7 +308,7 @@ const PlayerLiveImageComponent = (props: Props) => {
           ? LiveImageManager.instance.onViewportEnter(liveImageItem)
           : LiveImageManager.instance.onViewportLeave(liveImageItem);
       } else {
-        LiveImageManager.instance.checkPlayerPosition(liveImageItem);
+        LiveImageManager.instance.onViewPositionChanged(liveImageItem);
       }
     },
     [liveImageItem, dimensions.height, dimensions.width]
@@ -338,11 +336,11 @@ const PlayerLiveImageComponent = (props: Props) => {
           <Player
             autoplay={false}
             ref={_assignRoot}
-            entry={item} // Must be passed first in list
+            entry={liveImageItem.processedEntry || item} // Must be passed first in list
             style={videoStyles}
             playerId={playerId}
             muted={muted}
-            listener={controller?.getListener()}
+            listener={liveImageItem.getPlayer()?.getListener()}
             resizeMode={"cover"}
             {...platformSpecificProps}
           />

package/Components/VideoLive/__tests__/PlayerLiveImageComponent.test.tsx

@@ -120,29 +120,14 @@ describe("PlayerLiveImageComponent", () => {
     // TODO: implement this test
   });
 
-  it("should register the player for normal item", () => {
+  it("should not register the player at mount (lazy creation)", () => {
     render(
       <Wrapper>
         <PlayerLiveImage {...defaultProps} />
       </Wrapper>
     );
 
-    const isPlayerRegistered = playerManager.isPlayerRegistered(
-      defaultProps.playerId
-    );
-
-    expect(isPlayerRegistered).toBe(true);
-  });
-
-  it("should unregister the player for normal item", () => {
-    const component = render(
-      <Wrapper>
-        <PlayerLiveImage {...defaultProps} />
-      </Wrapper>
-    );
-
-    component.unmount();
-
+    // Player is not registered until playback starts (lazy creation)
     const isPlayerRegistered = playerManager.isPlayerRegistered(
       defaultProps.playerId
     );

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
   <View>
     <View
       collapsable={false}
+      renderToHardwareTextureAndroid={false}
       style={
         {
           "opacity": 1,