@applicaster/zapp-react-native-ui-components 15.0.0-alpha.2060204268 → 15.0.0-alpha.2210182446

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -5,8 +5,6 @@ import {
   usePlugins,
 } from "@applicaster/zapp-react-native-redux/hooks";
 import {
-  useDimensions,
-  useIsTablet as isTablet,
   useNavigation,
   useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
@@ -15,8 +13,8 @@ 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;
@@ -31,13 +29,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,
@@ -97,27 +88,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

@@ -277,7 +277,6 @@ const PlayerContainerComponent = (props: Props) => {
   const { isRestricted } = useRestrictMobilePlayback({
     player,
     entry: item,
-    pluginConfiguration,
     close,
   });
 
@@ -670,7 +669,7 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      {isRestricted ? null : (
+                      {!Player || isRestricted ? null : (
                         <Player
                           source={{
                             uri,

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -1,27 +1,50 @@
 import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
 import NetInfo from "@react-native-community/netinfo";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { log_info } from "./logger";
+import { isTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 type RestrictMobilePlaybackProps = {
   player?: Player;
   entry?: ZappEntry;
-  pluginConfiguration?: Record<string, string>;
   close: () => void;
 };
 
 export const useRestrictMobilePlayback = ({
   player,
   entry,
-  pluginConfiguration,
   close,
 }: RestrictMobilePlaybackProps): { isRestricted: boolean } => {
   const dialogVisibleRef = useRef<boolean>(false);
   const theme = useTheme();
+  const plugins = usePlugins();
+
+  const restrictMobilePlugin = useMemo(
+    () =>
+      plugins.find((p) => p.identifier === "quick-brick-hook-restrict-mobile"),
+    [plugins]
+  );
+
+  const localizations = useMemo(
+    () => restrictMobilePlugin?.configuration?.localizations,
+    [restrictMobilePlugin]
+  );
+
+  const localize = useCallback(
+    (key: string) => {
+      const l = localizations && getLocalizations({ localizations });
+
+      return (l && l[key]) || "";
+    },
+    [localizations]
+  );
 
   useEffect(() => {
     return () => {
@@ -38,8 +61,13 @@ export const useRestrictMobilePlayback = ({
       return false;
     }
 
-    return player && entry?.extensions?.connection_restricted;
-  }, [player, entry]);
+    // Only restrict if the plugin exists
+    if (!restrictMobilePlugin) {
+      return false;
+    }
+
+    return player && isTrue(entry?.extensions?.connection_restricted);
+  }, [player, entry, restrictMobilePlugin]);
 
   const [isRestricted, setIsRestricted] = useState<boolean>(
     isConnectionRestricted
@@ -55,16 +83,17 @@ export const useRestrictMobilePlayback = ({
         "Stopping player due to mobile restriction, connection_restricted: true"
       );
 
-      player?.close();
+      player?.closeNativePlayer();
+      playerManager?.invokeHandler("close");
 
       dialogVisibleRef.current = true;
 
       showAlertDialog({
         title:
-          pluginConfiguration?.mobile_connection_restricted_alert_title ||
+          localize("restrict_mobile_playback_error_title") ||
           "Restricted Connection Type",
         message:
-          pluginConfiguration?.mobile_connection_restricted_alert_message ||
+          localize("restrict_mobile_playback_error_message") ||
           "This content can only be viewed over a Wi-Fi or LAN network.",
         okButtonText: theme.ok_button || "OK",
         completion: () => {
@@ -91,7 +120,8 @@ export const useRestrictMobilePlayback = ({
   }, [
     close,
     entry?.extensions?.connection_restricted,
-    pluginConfiguration,
+    localizations,
+    localize,
     player,
     theme.ok_button,
     isConnectionRestricted,

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

@@ -11,6 +11,7 @@ const mockIsOrientationCompatible = jest.fn(() => true);
 jest.mock("react-native-safe-area-context", () => ({
   ...jest.requireActual("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

@@ -92,7 +92,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/Components/Viewport/ViewportAware/index.tsx

@@ -32,7 +32,7 @@ function getTestDimensions(testDimensions) {
   return (process.env.NODE_ENV === "test" && testDimensions) || null;
 }
 
-function ViewportAwareComponent(props: Props, ref) {
+function ViewportAwareComponent(props: Props, forwardedRef) {
   const viewportEvents = useViewportEventsContext();
 
   const {
@@ -47,13 +47,22 @@ function ViewportAwareComponent(props: Props, ref) {
     getTestDimensions(testDimensions) || initialDimensions
   );
 
+  const localRef = React.useRef(null);
+
   const [viewportChangeEvent, setViewportChangeEvent] = React.useState(null);
 
-  function assignRef(_ref) {
-    if (_ref && !ref) {
-      ref = _ref;
-    }
-  }
+  const assignRef = React.useCallback(
+    (_ref) => {
+      localRef.current = _ref;
+
+      if (typeof forwardedRef === "function") {
+        forwardedRef(_ref);
+      } else if (forwardedRef) {
+        forwardedRef.current = _ref;
+      }
+    },
+    [forwardedRef]
+  );
 
   const checkInViewport = (viewportChangeEvent, layoutEvent) => {
     const inVerticalViewport = Utils.isInViewport(
@@ -94,7 +103,7 @@ function ViewportAwareComponent(props: Props, ref) {
   const onViewportChange = (viewportChangeEvent) => {
     setViewportChangeEvent(viewportChangeEvent);
 
-    const nodeHandle = findNodeHandle(ref);
+    const nodeHandle = findNodeHandle(localRef.current);
 
     if (!nodeHandle) {
       return;

package/package.json

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