@applicaster/zapp-react-native-ui-components 14.0.12-alpha.2403570255 → 14.0.12-alpha.5204615553

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,13 +1,17 @@
 import * as React from "react";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useDimensions,
+  useIsTablet as isTablet,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
 import { ViewStyle } from "react-native";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { findCastPlugin, getPlayer } from "./utils";
-import { useWaitForValidOrientation } from "../Screen/hooks";
 
 type Props = {
   item: ZappEntry;
@@ -22,6 +26,13 @@ type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
 
+const dimensionsContext: "window" | "screen" = platformSelect({
+  android_tv: "window",
+  amazon: "window",
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  default: isTablet() ? "window" : "screen", // on tablet, window represents correct values, on phone it's not as the screen could be rotated
+});
+
 export function HandlePlayable({
   item,
   isModal,
@@ -83,23 +94,27 @@ export function HandlePlayable({
     });
   }, [casting]);
 
-  const modalSize = useModalSize();
-
-  const isOrientationReady = useWaitForValidOrientation();
+  const { width: screenWidth, height: screenHeight } =
+    useDimensions(dimensionsContext);
 
-  const style = React.useMemo(() => {
-    const isFullScreenReady =
-      mode === "PIP" || (mode === "FULLSCREEN" && isOrientationReady);
-
-    const getDimensionValue = (value: string | number) => {
-      return isModal ? value : isFullScreenReady ? "100%" : 0; // do not show player, until full screen mode is ready
-    };
+  const modalSize = useModalSize();
 
-    return {
-      width: getDimensionValue(modalSize.width),
-      height: getDimensionValue(modalSize.height),
-    } as ViewStyle;
-  }, [modalSize, isModal, mode, isOrientationReady]);
+  const style = React.useMemo(
+    () =>
+      ({
+        width: isModal
+          ? modalSize.width
+          : mode === "PIP"
+            ? "100%"
+            : screenWidth,
+        height: isModal
+          ? modalSize.height
+          : mode === "PIP"
+            ? "100%"
+            : screenHeight,
+      }) as ViewStyle,
+    [screenWidth, screenHeight, modalSize, isModal, mode]
+  );
 
   const Component = playable?.Component;
 

package/Components/Screen/__tests__/Screen.test.tsx

@@ -14,7 +14,6 @@ const mockIsOrientationCompatible = jest.fn(() => true);
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
-  useSafeAreaFrame: () => ({ x: 0, y: 0, width: 375, height: 812 }),
 }));
 
 jest.mock("../../RouteManager", () => ({

package/Components/Screen/hooks.ts

@@ -5,85 +5,15 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import {
   useCurrentScreenData,
+  useDimensions,
   useRoute,
   useIsTablet,
-  useIsScreenActive,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useMemo, useEffect, useState } from "react";
-import { useSafeAreaFrame } from "react-native-safe-area-context";
-
-type MemoizedSafeAreaFrameWithActiveStateOptions = {
-  updateForInactiveScreens?: boolean;
-  isActive: boolean;
-};
-
-/**
- * Base hook that wraps useSafeAreaFrame with memoization and inactive screen filtering.
- * Requires isActive to be passed explicitly - use useMemoizedSafeAreaFrame for automatic detection.
- *
- * @param options.updateForInactiveScreens - If false, frame won't update when screen is inactive (default: true)
- * @param options.isActive - Whether the screen is currently active
- * @returns The memoized safe area frame { x, y, width, height }
- */
-export const useMemoizedSafeAreaFrameWithActiveState = (
-  options: MemoizedSafeAreaFrameWithActiveStateOptions
-) => {
-  const { updateForInactiveScreens = true, isActive } = options;
-  const frame = useSafeAreaFrame();
-
-  const [memoFrame, setMemoFrame] = useState(frame);
-
-  useEffect(() => {
-    const shouldUpdate = isActive || updateForInactiveScreens;
-
-    const dimensionsChanged =
-      frame.width !== memoFrame.width || frame.height !== memoFrame.height;
-
-    if (shouldUpdate && dimensionsChanged) {
-      setMemoFrame(frame);
-    }
-  }, [
-    frame.width,
-    frame.height,
-    isActive,
-    updateForInactiveScreens,
-    frame,
-    memoFrame.width,
-    memoFrame.height,
-  ]);
-
-  return memoFrame;
-};
-
-type MemoizedSafeAreaFrameOptions = {
-  updateForInactiveScreens?: boolean;
-};
-
-/**
- * Hook that wraps useSafeAreaFrame with memoization and inactive screen filtering.
- * Uses useIsScreenActive() internally to determine active state - use useMemoizedSafeAreaFrameWithActiveState
- * if you need to pass isActive explicitly.
- *
- * @param options.updateForInactiveScreens - If false, frame won't update when screen is inactive (default: true)
- * @returns The memoized safe area frame { x, y, width, height }
- */
-export const useMemoizedSafeAreaFrame = (
-  options: MemoizedSafeAreaFrameOptions = {}
-) => {
-  const { updateForInactiveScreens = true } = options;
-  const isActive = useIsScreenActive();
-
-  return useMemoizedSafeAreaFrameWithActiveState({
-    updateForInactiveScreens,
-    isActive,
-  });
-};
 
 export const useWaitForValidOrientation = () => {
-  // Use memoized safe area frame to synchronize with Scene's dimension source
-  // This prevents race conditions where the orientation check passes before
-  // Scene's memoFrame has updated to the new dimensions
-  const { width: screenWidth, height } = useMemoizedSafeAreaFrame({
+  const { width: screenWidth, height } = useDimensions("screen", {
+    fullDimensions: true,
     updateForInactiveScreens: false,
   });
 

package/Components/Screen/index.tsx

@@ -93,13 +93,7 @@ export function Screen(_props: Props) {
   const isActive = useIsScreenActive();
 
   const ref = React.useRef(null);
-  const isOrientationReady = useWaitForValidOrientation();
-
-  // Playable screens handle their own orientation via the native player plugin,
-  // so we skip the orientation wait gate to avoid a deadlock where the screen
-  // waits for landscape but blocks rendering that would trigger the rotation.
-  const isPlayableRoute = pathname?.includes("/playable");
-  const isReady = isOrientationReady || isPlayableRoute;
+  const isReady = useWaitForValidOrientation();
 
   React.useEffect(() => {
     if (ref.current && isActive && isReady) {

package/Components/Transitioner/Scene.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 import { useScreenOrientationHandler } from "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler";
-import { useMemoizedSafeAreaFrameWithActiveState } from "@applicaster/zapp-react-native-ui-components/Components/Screen/hooks";
 
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
@@ -94,13 +94,19 @@ function SceneComponent({
     isActive,
   });
 
-  // Use shared memoized frame hook - synchronized with useWaitForValidOrientation
-  // to prevent race conditions during orientation changes
-  // Pass isActive from props since Scene knows its active state from Transitioner
-  const memoFrame = useMemoizedSafeAreaFrameWithActiveState({
-    updateForInactiveScreens: false,
-    isActive,
-  });
+  const frame = useSafeAreaFrame();
+
+  const [memoFrame, setMemoFrame] = React.useState(frame);
+
+  useEffect(() => {
+    if (isActive) {
+      setMemoFrame((oldFrame) =>
+        oldFrame.width === frame.width && oldFrame.height === frame.height
+          ? oldFrame
+          : frame
+      );
+    }
+  }, [isActive, frame.width, frame.height]);
 
   const isAnimating = animating && overlayStyle;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.12-alpha.2403570255",
+  "version": "14.0.12-alpha.5204615553",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.12-alpha.2403570255",
-    "@applicaster/zapp-react-native-bridge": "14.0.12-alpha.2403570255",
-    "@applicaster/zapp-react-native-redux": "14.0.12-alpha.2403570255",
-    "@applicaster/zapp-react-native-utils": "14.0.12-alpha.2403570255",
+    "@applicaster/applicaster-types": "14.0.12-alpha.5204615553",
+    "@applicaster/zapp-react-native-bridge": "14.0.12-alpha.5204615553",
+    "@applicaster/zapp-react-native-redux": "14.0.12-alpha.5204615553",
+    "@applicaster/zapp-react-native-utils": "14.0.12-alpha.5204615553",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",