@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 15.1.0-alpha.1852552014

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,20 @@ type Position = {
   right: number;
 };
 
+type PlayerFactoryConfig = {
+  player: any; // React ref for native view
+  playerId: string;
+  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 +97,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 +108,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 +128,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 +140,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 +162,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 +196,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 +228,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 +236,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 +244,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 +295,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
     setUserCellPlayerMutedPreference(true);
 
-    this.items.forEach((liveImage) => liveImage.player.mute());
+    this.items.forEach((liveImage) => liveImage.mute());
   };
 
   public unmuteAll = () => {
@@ -266,16 +303,36 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
     setUserCellPlayerMutedPreference(false);
 
-    this.items.forEach((liveImage) => liveImage.player.unmute());
+    this.items.forEach((liveImage) => liveImage.unmute());
+  };
+
+  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);
+    }
   };
 
-  public checkPlayerPosition = (item: LiveImage) => {
+  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 +448,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 +483,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 +505,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 +517,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 +560,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 +573,117 @@ 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;
+
+  mute = () => {
+    this.initiallyMuted = true;
+    this.player?.mute();
+  };
+
+  unmute = () => {
+    this.initiallyMuted = false;
+    this.player?.unmute();
+  };
+
+  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.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 = this.createPreparedPlayer()
+      .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;
+  }
+
+  private async createPreparedPlayer(): Promise<boolean> {
+    let entry = this.factoryConfig.entry;
+
+    if (this.preloadHooks?.length) {
+      const result = await executePreloadHooks({
+        preloadHooks: this.preloadHooks,
+        entry,
+      });
+
+      if (!result) return false;
+
+      this.processedEntry = result;
+      entry = result;
+    }
+
+    const factoryItem = await playerFactory({
+      player: this.factoryConfig.player,
+      playerId: this.factoryConfig.playerId,
+      autoplay: false,
+      entry,
+      muted: this.initiallyMuted,
+      playerPluginId: this.factoryConfig.playerPluginId,
+      screenConfig: this.factoryConfig.screenConfig,
+      playerRole: PlayerRole.Cell,
+    });
+
+    if (!factoryItem) {
+      throw new Error(
+        `Player factory returned null (playerId: ${this.factoryConfig.playerId}, playerPluginId: ${this.factoryConfig.playerPluginId})`
+      );
+    }
+
+    this.player = factoryItem.controller;
+    this.component = factoryItem.Component;
     this.player.addListener({ id: "live-image", listener: this });
+
+    return true;
   }
 
-  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,38 @@ 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,
+      preloadHooks,
+      factoryConfig: {
+        player: ref,
+        playerId,
+        playerPluginId: playerPluginId,
+        screenConfig: screenConfig,
+        entry: item,
+      },
+      tag: item.title?.toString(),
     });
+  }, [playerId, preloadHooks, playerPluginId, screenConfig, item]);
 
-    if (playerFactoryItem) {
-      return new LiveImage({
-        playerId,
-        player: playerFactoryItem.controller,
-        component: playerFactoryItem?.Component,
-      });
-    } else {
-      throw new Error("Player factory item is null");
-    }
-  }, [playerId, item.id, playerPluginId, screenConfig]);
+  // Keep the muted state in sync with user preference and player state
+  liveImageItem.initiallyMuted = muted;
 
   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 +163,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 +247,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 +273,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 +310,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 +338,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/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -4,10 +4,7 @@ import { Animated, Dimensions } from "react-native";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 
 import { useConfiguration } from "../utils";
-import {
-  useAppData,
-  usePlugins,
-} from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { isBottomTabVisible } from "../../Screen/navigationHandler";
 
 import {
@@ -21,6 +18,7 @@ import {
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
 import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useIsTablet as getIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux";
 
 export type ModalAnimationContextT = {
   yTranslate: React.MutableRefObject<Animated.AnimatedInterpolation<number>>;
@@ -66,7 +64,9 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     screenData,
   } = useNavigation();
 
-  const { isTabletPortrait } = useAppData();
+  const isTabletPortrait = useAppSelector(
+    (state) => state.appData.isTabletPortrait
+  );
 
   const plugins = usePlugins();
 

package/Components/VideoModal/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook, waitFor } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
@@ -13,20 +13,16 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return false initially, that changes after 1 second", async () => {
+  it("should return false initially, that changes after 1 second", () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
     expect(result.current).toBe(false);
 
-    act(() => {
-      jest.advanceTimersByTime(1000);
-    });
+    jest.advanceTimersByTime(1000);
 
-    await waitFor(() => {
-      expect(result.current).toBe(true);
-    });
+    expect(result.current).toBe(true);
   });
 
   it("should return false when isPip is true", () => {
@@ -45,7 +41,7 @@ describe("useDelayedPlayerDetails", () => {
     expect(result.current).toBe(false);
   });
 
-  it("should return true for tablet regardless of other flags", async () => {
+  it("should return true for tablet regardless of other flags", () => {
     (useIsTablet as jest.Mock).mockReturnValue(true);
 
     const { result } = renderHook(() =>
@@ -56,12 +52,8 @@ describe("useDelayedPlayerDetails", () => {
       })
     );
 
-    act(() => {
-      jest.advanceTimersByTime(1000);
-    });
+    jest.advanceTimersByTime(1000);
 
-    await waitFor(() => {
-      expect(result.current).toBe(true);
-    });
+    expect(result.current).toBe(true);
   });
 });