@applicaster/zapp-react-native-ui-components 14.0.12-rc.0 → 14.0.13-rc.0

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,17 +1,13 @@
 import * as React from "react";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import {
-  useDimensions,
-  useIsTablet as isTablet,
-  useNavigation,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { 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;
@@ -26,13 +22,6 @@ 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,
@@ -94,27 +83,23 @@ export function HandlePlayable({
     });
   }, [casting]);
 
-  const { width: screenWidth, height: screenHeight } =
-    useDimensions(dimensionsContext);
-
   const modalSize = useModalSize();
 
-  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 isOrientationReady = useWaitForValidOrientation();
+
+  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
+    };
+
+    return {
+      width: getDimensionValue(modalSize.width),
+      height: getDimensionValue(modalSize.height),
+    } as ViewStyle;
+  }, [modalSize, isModal, mode, isOrientationReady]);
 
   const Component = playable?.Component;
 

package/Components/HandlePlayable/utils.ts

@@ -5,6 +5,14 @@ import {
 
 import { CHROMECAST_PLUGIN_ID, YOUTUBE_PLUGIN_ID } from "./const";
 import { omit } from "@applicaster/zapp-react-native-utils/utils";
+import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+
+const { Logger } = getXray();
+
+const logger = new Logger(
+  "QuickBrick",
+  "packages/zapp-react-native-ui-components/Components/HandlePlayable"
+);
 
 const getPlayerModuleProperties = (PlayerModule: ZappPlugin) => {
   if (PlayerModule?.Component && typeof PlayerModule.Component === "object") {
@@ -52,10 +60,25 @@ export const getPlayer = (
     if (type) {
       PlayerModule = findPluginByIdentifier(type, plugins)?.module;
 
+      if (!PlayerModule) {
+        logger.error({
+          message:
+            "PlayerModule is undefined – type mapping may be wrong or type not set for player",
+          data: {
+            type,
+            screen_id,
+            item_type_value: item?.type?.value,
+          },
+        });
+
+        return [null, {}];
+      }
+
       return getPlayerWithModuleProperties(PlayerModule);
     }
   }
 
+  // TODO: Probably should be removed, Youtube plugin is deprecated
   if (item?.content?.type === "youtube-id") {
     PlayerModule = findYoutubePlugin(plugins)?.module;
 
@@ -70,5 +93,13 @@ export const getPlayer = (
     )
   );
 
+  if (!PlayerModule) {
+    logger.error({
+      message: "PlayerModule is undefined – playable plugin not found",
+    });
+
+    return [null, {}];
+  }
+
   return getPlayerWithModuleProperties(PlayerModule);
 };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -661,36 +661,38 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      <Player
-                        source={{
-                          uri,
-                          entry: item,
-                        }}
-                        focused={isInlineTV ? true : undefined}
-                        autoplay={true}
-                        controls={false}
-                        disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
-                        entry={item}
-                        fullscreen={mode === VideoModalMode.FULLSCREEN}
-                        inline={inline}
-                        isModal={isModal}
-                        isTabletPortrait={appData.isTabletPortrait}
-                        muted={false}
-                        playableItem={item}
-                        playerEvent={playerEvent}
-                        playerId={state.playerId}
-                        pluginConfiguration={pluginConfiguration}
-                        ref={playerRef}
-                        toggleFullscreen={toggleFullscreen}
-                        style={videoStyle}
-                        playNextData={playNextData}
-                        setNextVideoPreloadThresholdPercentage={
-                          setNextVideoPreloadThresholdPercentage
-                        }
-                      >
-                        {renderApplePlayer(applePlayerProps)}
-                      </Player>
+                      {Player ? (
+                        <Player
+                          source={{
+                            uri,
+                            entry: item,
+                          }}
+                          focused={isInlineTV ? true : undefined}
+                          autoplay={true}
+                          controls={false}
+                          disableCastAction={disableCastAction}
+                          docked={navigator.isVideoModalDocked()}
+                          entry={item}
+                          fullscreen={mode === VideoModalMode.FULLSCREEN}
+                          inline={inline}
+                          isModal={isModal}
+                          isTabletPortrait={appData.isTabletPortrait}
+                          muted={false}
+                          playableItem={item}
+                          playerEvent={playerEvent}
+                          playerId={state.playerId}
+                          pluginConfiguration={pluginConfiguration}
+                          ref={playerRef}
+                          toggleFullscreen={toggleFullscreen}
+                          style={videoStyle}
+                          playNextData={playNextData}
+                          setNextVideoPreloadThresholdPercentage={
+                            setNextVideoPreloadThresholdPercentage
+                          }
+                        >
+                          {renderApplePlayer(applePlayerProps)}
+                        </Player>
+                      ) : null}
                     </PlayerFocusableWrapperView>
 
                     {state.error ? <ErrorDisplay error={state.error} /> : null}

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

@@ -14,6 +14,7 @@ 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,15 +5,85 @@ 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 = () => {
-  const { width: screenWidth, height } = useDimensions("screen", {
-    fullDimensions: true,
+  // 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({
     updateForInactiveScreens: false,
   });
 

package/Components/Screen/index.tsx

@@ -93,7 +93,13 @@ export function Screen(_props: Props) {
   const isActive = useIsScreenActive();
 
   const ref = React.useRef(null);
-  const isReady = useWaitForValidOrientation();
+  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;
 
   React.useEffect(() => {
     if (ref.current && isActive && isReady) {

package/Components/Transitioner/Scene.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from "react";
+import React 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,19 +94,13 @@ function SceneComponent({
     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]);
+  // 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 isAnimating = animating && overlayStyle;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.12-rc.0",
+  "version": "14.0.13-rc.0",
   "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-rc.0",
-    "@applicaster/zapp-react-native-bridge": "14.0.12-rc.0",
-    "@applicaster/zapp-react-native-redux": "14.0.12-rc.0",
-    "@applicaster/zapp-react-native-utils": "14.0.12-rc.0",
+    "@applicaster/applicaster-types": "14.0.13-rc.0",
+    "@applicaster/zapp-react-native-bridge": "14.0.13-rc.0",
+    "@applicaster/zapp-react-native-redux": "14.0.13-rc.0",
+    "@applicaster/zapp-react-native-utils": "14.0.13-rc.0",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",