@applicaster/zapp-react-native-ui-components 16.0.0-rc.3 → 16.0.0-rc.30

package/Components/Screen/TV/index.web.tsx

@@ -21,7 +21,7 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { ScreenResolver } from "../../ScreenResolver";
-import { useInitialFocus } from "./hooks";
+import { useInitialFocus, useAfterPaint } from "./hooks";
 import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { FreezeWithCallback } from "../../FreezeWithCallback";
@@ -157,6 +157,13 @@ export const Screen = ({ route, Components }: Props) => {
 
   const isScreenActive = useIsScreenActive();
 
+  // We need to render menu first and then proceed with screen content,
+  // otherwise screen will stay black until everything is loaded and screen
+  // rendering put huge load the CPU pushing rendering even further.
+  // With this approach, menu will be rendered immediately and screen content
+  // will be rendered after paint, which makes it more responsive and prevents black screen.
+  const isContentReady = useAfterPaint();
+
   return (
     <FreezeWithCallback freeze={!isScreenActive} onRelease={onRelease}>
       <View style={[styles.container, { backgroundColor }]}>
@@ -167,12 +174,14 @@ export const Screen = ({ route, Components }: Props) => {
             navigationProps={navigationProps}
           />
         </NavBarContainer>
-        <ScreenResolver
-          screenType={screenType}
-          screenId={screenId}
-          screenData={screenData}
-          groupId={route}
-        />
+        {isContentReady ? (
+          <ScreenResolver
+            screenType={screenType}
+            screenId={screenId}
+            screenData={screenData}
+            groupId={route}
+          />
+        ) : null}
       </View>
     </FreezeWithCallback>
   );

package/Components/Screen/index.tsx

@@ -18,10 +18,13 @@ import {
   useScreenData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
+import {
+  isValidColor,
+  isTransparentColor,
+} from "@applicaster/zapp-react-native-utils/colorUtils";
 
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
-import { isValidColor } from "./utils";
 import { useWaitForValidOrientation } from "./hooks";
 
 const screenStyles = {
@@ -82,9 +85,10 @@ export function Screen(_props: Props) {
   const style = React.useMemo(
     () => ({
       ...screenStyles,
-      backgroundColor: isValidColor(backgroundColor)
-        ? backgroundColor
-        : theme.app_background_color,
+      backgroundColor:
+        isValidColor(backgroundColor) && !isTransparentColor(backgroundColor)
+          ? backgroundColor
+          : theme.app_background_color,
     }),
     [theme.app_background_color, backgroundColor]
   );

package/Components/ScreenRevealManager/Overlay.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Animated, StyleSheet } from "react-native";
+
+import { BackgroundImage } from "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage";
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    position: "absolute",
+  },
+});
+
+export const Overlay = ({
+  opacity,
+  backgroundColor,
+}: {
+  opacity: Animated.Value;
+  backgroundColor: string;
+}) => {
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          opacity,
+          backgroundColor,
+        },
+      ]}
+      testID="animated-component"
+    >
+      <BackgroundImage />
+    </Animated.View>
+  );
+};

package/Components/ScreenRevealManager/__tests__/Overlay.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Animated } from "react-native";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage",
+  () => {
+    const { Text } = require("react-native");
+
+    return {
+      BackgroundImage: () => (
+        <Text testID="background-image">BackgroundImage</Text>
+      ),
+    };
+  }
+);
+
+import { Overlay } from "../Overlay";
+
+const flattenStyle = (style: unknown): Record<string, unknown> => {
+  if (!style) {
+    return {};
+  }
+
+  if (Array.isArray(style)) {
+    return style.reduce<Record<string, unknown>>(
+      (acc, item) => ({ ...acc, ...flattenStyle(item) }),
+      {}
+    );
+  }
+
+  if (typeof style === "object") {
+    return style as Record<string, unknown>;
+  }
+
+  return {};
+};
+
+describe("Overlay", () => {
+  it("renders the animated overlay container", () => {
+    const opacity = new Animated.Value(1);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#000000" />
+    );
+
+    expect(getByTestId("animated-component")).toBeTruthy();
+  });
+
+  it("applies opacity and backgroundColor to the overlay", () => {
+    const opacity = new Animated.Value(0.5);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#ff0000" />
+    );
+
+    const style = flattenStyle(getByTestId("animated-component").props.style);
+
+    expect(style.backgroundColor).toBe("#ff0000");
+    expect(style.opacity).toBe(0.5);
+  });
+
+  it("positions the overlay with absolute fill layout", () => {
+    const opacity = new Animated.Value(1);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#000000" />
+    );
+
+    const style = flattenStyle(getByTestId("animated-component").props.style);
+
+    expect(style.position).toBe("absolute");
+    expect(style.top).toBe(0);
+    expect(style.left).toBe(0);
+    expect(style.right).toBe(0);
+    expect(style.bottom).toBe(0);
+  });
+
+  it("renders BackgroundImage inside the overlay", () => {
+    const opacity = new Animated.Value(1);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#000000" />
+    );
+
+    expect(getByTestId("background-image")).toBeTruthy();
+  });
+});

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { Animated, StyleSheet } from "react-native";
+import { Animated } from "react-native";
+
 import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { Overlay } from "./Overlay";
 
 import { ScreenRevealManager } from "./ScreenRevealManager";
 import {
@@ -10,13 +12,6 @@ import {
   emitScreenRevealManagerIsNotReadyToShow,
 } from "./utils";
 
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    position: "absolute",
-  },
-});
-
 export const TIMEOUT = 300; // 300 ms
 
 const HIDDEN = 0; // opacity = 0
@@ -93,17 +88,11 @@ export const withScreenRevealManager = (Component) => {
           onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
         />
         {isShowOverlay ? (
-          <Animated.View
-            style={[
-              styles.container,
-              {
-                opacity: opacityRef.current,
-                // TODO: we should support background image as well, but for now we will use background color from theme
-                backgroundColor:
-                  props.backgroundColor ?? theme.app_background_color,
-              },
-            ]}
-            testID="animated-component"
+          <Overlay
+            opacity={opacityRef.current}
+            backgroundColor={
+              props.backgroundColor ?? theme.app_background_color
+            }
           />
         ) : null}
       </>

package/Components/VideoLive/LiveImageManager.ts

@@ -48,7 +48,6 @@ type Position = {
 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
@@ -296,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 = () => {
@@ -304,7 +303,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
     setUserCellPlayerMutedPreference(false);
 
-    this.items.forEach((liveImage) => liveImage.player?.unmute());
+    this.items.forEach((liveImage) => liveImage.unmute());
   };
 
   public onViewPositionChanged = (item: LiveImage) => {
@@ -574,6 +573,20 @@ 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";
@@ -611,48 +624,7 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
       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;
-    })()
+    this._preparePromise = this.createPreparedPlayer()
       .then((result) => {
         this._preparePromise = null;
 
@@ -672,6 +644,45 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     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 | null => {
     return this.player;
   };

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -126,14 +126,16 @@ const PlayerLiveImageComponent = (props: Props) => {
       factoryConfig: {
         player: ref,
         playerId,
-        muted,
         playerPluginId: playerPluginId,
         screenConfig: screenConfig,
         entry: item,
       },
       tag: item.title?.toString(),
     });
-  }, [playerId, preloadHooks, muted, playerPluginId, screenConfig, item]);
+  }, [playerId, preloadHooks, playerPluginId, screenConfig, item]);
+
+  // Keep the muted state in sync with user preference and player state
+  liveImageItem.initiallyMuted = muted;
 
   React.useEffect(() => {
     liveImageItem.setMode = setModeDebounced;

package/Components/VideoModal/utils.ts

@@ -10,6 +10,7 @@ import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { create } from "zustand";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { selectPluginConfigurationsByPluginId } from "@applicaster/zapp-react-native-redux";
+import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 
 export const useConfiguration = () => {
   const {
@@ -18,6 +19,7 @@ export const useConfiguration = () => {
 
   const rivers = useRivers();
   const contentTypes = useContentTypes();
+  const player = usePlayer();
 
   const targetScreenId = contentTypes?.[item?.type?.value]?.screen_id;
   const targetScreenConfiguration = rivers?.[targetScreenId];
@@ -26,7 +28,10 @@ export const useConfiguration = () => {
     selectPluginConfigurationsByPluginId(state, targetScreenConfiguration?.type)
   );
 
-  const playerPluginConfig = playerManager.getPluginConfiguration();
+  const playerPluginConfig =
+    player?.getPluginConfiguration() ??
+    playerManager.getInstanceController()?.getPluginConfiguration() ??
+    {};
 
   const config = mergeRight(playerPluginConfig, {
     ...configuration_json,

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
-
+import { StyleSheet, SafeAreaView as RNSafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
 import BackButton from "./Buttons/BackButton";
 import BarTitle from "./BarTitle";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   screenStyles: {
@@ -23,6 +24,11 @@ const defaultState: NavBarState = {
   title: "",
 };
 
+const SafeAreaViewPlatform = platformSelect({
+  ios: RNSafeAreaView,
+  android: SafeAreaView,
+});
+
 const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   const isRTL = useIsRTL();
 
@@ -44,14 +50,15 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View
+    <SafeAreaViewPlatform
+      edges={["top", "left", "right"]}
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-Container"
+      testID="BarView-safeAreaView"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaViewPlatform>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-Container").props.style).toContainEqual({
+    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Contexts/CachedDimensionsContext/__tests__/index.test.ts

@@ -0,0 +1,154 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+type DimensionsStore = {
+  setState: (
+    partial: { dimensions: Record<string, unknown>; ids: string[] },
+    replace?: boolean
+  ) => void;
+};
+
+const createdStores: DimensionsStore[] = [];
+
+jest.mock("zustand", () => {
+  const actual = jest.requireActual<typeof import("zustand")>("zustand");
+
+  return {
+    ...actual,
+    create: ((initializer: Parameters<typeof actual.create>[0]) => {
+      const store = actual.create(initializer);
+      createdStores.push(store);
+
+      return store;
+    }) as typeof actual.create,
+  };
+});
+
+import { useCachedDimensions } from "../index";
+
+const resetStore = () => {
+  const store = createdStores[createdStores.length - 1];
+
+  act(() => {
+    store?.setState({ dimensions: {}, ids: [] });
+  });
+};
+
+describe("useCachedDimensions", () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  describe("getCachedDimensions", () => {
+    it("returns default dimensions when id has no cached value", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: undefined,
+        height: undefined,
+      });
+    });
+
+    it("returns cached dimensions after setCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+      const dimensions = { width: 100, height: 200 };
+
+      act(() => {
+        result.current.setCachedDimensions(dimensions);
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual(dimensions);
+    });
+  });
+
+  describe("setCachedDimensions", () => {
+    it("updates dimensions for the hook id", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 50, height: 75 });
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: 50,
+        height: 75,
+      });
+    });
+
+    it("shares cached dimensions between hook instances with the same id", () => {
+      const { result: first } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 10, height: 20 });
+      });
+
+      expect(second.current.getCachedDimensions()).toEqual({
+        width: 10,
+        height: 20,
+      });
+    });
+  });
+
+  describe("getLastCachedDimensions", () => {
+    it("returns undefined when no dimensions have been cached", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getLastCachedDimensions()).toBeUndefined();
+    });
+
+    it("returns the most recently cached dimensions across ids", () => {
+      const { result: first } = renderHook(() => useCachedDimensions("first"));
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("second")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        second.current.setCachedDimensions({ width: 200, height: 200 });
+      });
+
+      expect(first.current.getLastCachedDimensions()).toEqual({
+        width: 200,
+        height: 200,
+      });
+    });
+
+    it("returns the latest dimensions when the same id is updated multiple times", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 300, height: 400 });
+      });
+
+      expect(result.current.getLastCachedDimensions()).toEqual({
+        width: 300,
+        height: 400,
+      });
+    });
+  });
+
+  describe("return value", () => {
+    it("exposes getCachedDimensions, setCachedDimensions, and getLastCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current).toEqual({
+        getCachedDimensions: expect.any(Function),
+        setCachedDimensions: expect.any(Function),
+        getLastCachedDimensions: expect.any(Function),
+      });
+    });
+  });
+});