@applicaster/zapp-react-native-ui-components 13.0.6-alpha.9045435588 → 14.0.0-alpha.1015356256

package/Components/AudioPlayer/tv/Layout.tsx

@@ -110,22 +110,24 @@ export function AudioPlayerTVLayout({
           ...style,
         },
         samsung_tv: {
+          position: "absolute",
           margin: "auto",
           display: "flex",
           flexWrap: "wrap",
+          height: "100vh",
           width: "100vw",
-          flex: 1,
           alignItems: "center",
           justifyContent: "center",
           flexDirection: directionStyles(isRTL).flexDirection,
           backgroundColor: backgroundColorStyle,
         },
         lg_tv: {
+          position: "absolute",
           margin: "auto",
           display: "flex",
           flexWrap: "wrap",
+          height: "100vh",
           width: "100vw",
-          flex: 1,
           alignItems: "center",
           justifyContent: "center",
           flexDirection: directionStyles(isRTL).flexDirection,

package/Components/Cell/index.js

@@ -3,11 +3,15 @@ import * as R from "ramda";
 import { connectToStore } from "@applicaster/zapp-react-native-redux";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import { HorizontalScrollContext, RiverOffsetContext } from "../../Contexts";
+import {
+  HorizontalScrollContext,
+  RiverOffsetContext,
+  ScreenScrollingContext,
+} from "../../Contexts";
+
 import { CellComponent } from "./Cell";
 import { TvOSCellComponent } from "./TvOSCellComponent";
 import { withConsumer } from "../../Contexts/HeaderOffsetContext";
-import { ScreenScrollingContext } from "../../Contexts/ScreenScrollingContext";
 
 import { ScreenLayoutContextConsumer } from "../../Contexts/ScreenLayoutContext";
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";

package/Components/Focusable/Focusable.tsx

@@ -5,6 +5,7 @@ import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
+import { StyleSheet, ViewStyle } from "react-native";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
@@ -22,7 +23,12 @@ type Props = {
   handleFocus?: ({ mouse }: { mouse: boolean }) => void;
   children: (boolean, string) => React.ComponentType<any>;
   selected?: boolean;
-  style?: React.CSSProperties;
+  style?: ViewStyle[] | ViewStyle;
+  "aria-label"?: string;
+  "aria-description"?: string;
+  "aria-role"?: string;
+  role?: string;
+  tabindex?: number;
 };
 
 class Focusable extends BaseFocusable<Props> {
@@ -146,7 +152,7 @@ class Focusable extends BaseFocusable<Props> {
         onMouseUp={this.pressOut}
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
-        style={style}
+        style={StyleSheet.flatten(style) as any as React.CSSProperties}
         {...accessibilityProps}
       >
         {children(focused, { mouse: this.mouse })}

package/Components/Focusable/FocusableiOS.tsx

@@ -12,4 +12,4 @@ function FocusableiOSComponent({ children }: Props) {
   return children;
 }
 
-export const FocusableiOS = React.forwardRef(FocusableiOSComponent);
+export const FocusableiOS = FocusableiOSComponent;

package/Components/Focusable/__tests__/index.android.test.tsx

@@ -38,6 +38,9 @@ describe("Focusable", () => {
   });
 
   it("updates disableFocus state when disableFocus prop changes", () => {
+    const unregister = jest.fn();
+    mockFocusManager.registerFocusable.mockReturnValue(unregister);
+
     const { rerender } = render(
       <Focusable id="test-id" disableFocus={false}>
         <Touchable testID="touchable" />

package/Components/Focusable/index.android.tsx

@@ -43,11 +43,13 @@ export const FocusableContext = React.createContext<
     // eslint-disable-next-line
     setIsFocusable: (enableFocus: boolean) => void;
     ref: FocusManager.FocusableRef;
+    parentFocusableId: Option<string>;
   } & ParentFocus
 >({
   focused: false,
   setIsFocusable: () => {},
   ref: { current: null },
+  parentFocusableId: undefined,
 });
 
 export const useFocusable = () => React.useContext(FocusableContext);
@@ -74,7 +76,7 @@ function FocusableComponent(props: Props, forwardedRef) {
 
   const isRTL = useIsRTL();
   const focusManager = useFocusManager();
-  const { ref: parentFocusable } = useFocusable();
+  const { ref: parentFocusableRef, parentFocusableId } = useFocusable();
   const touchableRef = React.useRef(null);
 
   const [focused, setFocused] = React.useState(() =>
@@ -98,13 +100,14 @@ function FocusableComponent(props: Props, forwardedRef) {
     }
   }, [disableFocus]);
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (id) {
-      const unregister = focusManager.registerFocusable(
+      const unregister = focusManager.registerFocusable({
         touchableRef,
-        parentFocusable,
-        isFocusableCell
-      );
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId,
+      });
 
       onRegister();
 
@@ -112,7 +115,7 @@ function FocusableComponent(props: Props, forwardedRef) {
         unregister();
       };
     }
-  }, [id, onRegister, isFocusableCell]);
+  }, [id, onRegister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -164,8 +167,9 @@ function FocusableComponent(props: Props, forwardedRef) {
       ...parentFocus,
       ref: touchableRef,
       setIsFocusable,
+      parentFocusableId: id,
     };
-  }, [parentFocus, focused]);
+  }, [parentFocus, focused, id]);
 
   return (
     <Touchable

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -30,7 +30,6 @@ export const GeneralContentScreen = ({
   isScreenWrappedInContainer,
   componentsMapExtraProps = {},
   focused,
-  extraOffset,
   parentFocus,
   containerHeight,
   preferredFocus = false,
@@ -122,7 +121,6 @@ export const GeneralContentScreen = ({
           isScreenWrappedInContainer={isScreenWrappedInContainer}
           parentFocus={parentFocus}
           focused={focused}
-          extraOffset={extraOffset}
           containerHeight={containerHeight}
           preferredFocus={preferredFocus}
           {...componentsMapExtraProps}

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import { ImageStyle } from "react-native";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
@@ -67,32 +66,10 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
   const handleFocus = (focusable) => {
     const focusedButtonId = getFocusedButtonId(focusable);
 
-    wrapperRef?.current?.measure((x, y, width, height, pageX, pageY) => {
-      const top = pageY;
-      const bottom = top + height;
-      const left = pageX;
-      const right = left + width;
-
-      const boundingRect = {
-        x,
-        y,
-        pageX,
-        pageY,
-        width,
-        height,
-        top,
-        bottom,
-        left,
-        right,
-      };
-
-      otherProps?.onToggleFocus?.({
-        focusable: {
-          getRect: R.always(boundingRect),
-        },
-        focusedButtonId,
-        mouse: focusable.mouse,
-      });
+    otherProps?.onToggleFocus?.({
+      focusable: wrapperRef.current,
+      focusedButtonId,
+      mouse: focusable.mouse,
     });
 
     if (ttsLabel) {

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -52,6 +52,7 @@ const _Text = ({
         withScaledLineHeight(withFocusedStyles({ style, otherProps })),
         { height },
       ]}
+      allowFontScaling={false}
       {...withoutLabel(otherProps)}
     >
       {dateTransformEnabled

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -88,7 +88,7 @@ export const VideoModalMode = {
   MAXIMIZED: "MAXIMIZED",
   MINIMIZED: "MINIMIZED",
   FULLSCREEN: "FULLSCREEN",
-};
+} as const;
 
 export type PlayNextData = {
   state: PlayNextState;
@@ -105,11 +105,6 @@ const isTvOS = isTvOSPlatform();
 // height for container with additional content below player
 const INLINE_CONTAINER_CONTENT_HEIGHT = 400;
 
-// Default Y offset for anchor points on non-Android TV platforms
-const DEFAULT_OFFSET_Y = -600;
-
-const EXTRA_ANCHOR_POINT_Y_OFFSET = isAndroidTV ? 0 : DEFAULT_OFFSET_Y;
-
 const withBorderHack = () => {
   if (isAndroidTV) {
     /* @HACK: see GH#7269 */
@@ -132,7 +127,7 @@ const webStyles = {
   playerScreen: {
     flex: 1,
     height: "100vh",
-    background: "black",
+    backgroundColor: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -150,7 +145,6 @@ const nativeStyles = {
   },
   playerScreen: {
     flex: 1,
-    backgroundColor: "black",
     overflow: "hidden",
   },
   playerWrapper: {
@@ -570,8 +564,9 @@ const PlayerContainerComponent = (props: Props) => {
   const isInlineTV = isInlineTVUtil(screenData);
 
   const inline =
-    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
-    isInlineTV;
+    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(
+      mode as any
+    ) || isInlineTV;
 
   const value = React.useMemo(
     () => ({ playerId: state.playerId }),
@@ -592,7 +587,11 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
+    if (
+      screen_background_color &&
+      mode !== VideoModalMode.FULLSCREEN &&
+      isTV()
+    ) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -622,6 +621,8 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
+  const pointerEventsProp = mode === "MINIMIZED" ? "box-none" : "auto";
+
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -642,14 +643,17 @@ const PlayerContainerComponent = (props: Props) => {
                 preferredFocus
                 shouldUsePreferredFocus
                 groupId={groupId}
+                pointerEvents={pointerEventsProp}
               >
                 {/* Video player and components */}
                 <View
                   style={styles.playerScreen}
                   testID={"player-screen-container"}
+                  pointerEvents={pointerEventsProp}
                 >
                   {/* Player container */}
                   <View
+                    pointerEvents={pointerEventsProp}
                     style={[
                       styles.playerWrapper,
                       // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals
@@ -721,13 +725,11 @@ const PlayerContainerComponent = (props: Props) => {
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
                             cellTapAction={onCellTap}
-                            extraAnchorPointYOffset={
-                              EXTRA_ANCHOR_POINT_Y_OFFSET
-                            }
+                            extraAnchorPointYOffset={0}
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}
                             componentsMapExtraProps={{
-                              isNestedComponentsMap: R.T,
+                              isNestedComponentsMap: true,
                             }}
                           />
                         )}

package/Components/River/TV/River.tsx

@@ -26,7 +26,6 @@ type Props = {
   componentsMapExtraProps?: any;
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
-  extraOffset: number;
   river?: ZappRiver | ZappEntry;
 };
 
@@ -39,7 +38,6 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
-    extraOffset,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -120,7 +118,6 @@ export const River = (props: Props) => {
     <GeneralContentScreen
       feed={feedData}
       screenId={screenId}
-      extraOffset={extraOffset}
       isScreenWrappedInContainer={isInsideContainer}
       extraAnchorPointYOffset={extraAnchorPointYOffset}
       componentsMapExtraProps={componentsMapExtraProps}

package/Components/TopMarginApplicator/TopMarginApplicator.tsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { View, ViewProps, ViewStyle } from "react-native";
+import { View, ViewStyle } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 interface IProps {
   targetScreenId?: string;
   children?: React.ReactNode;
   style?: ViewStyle;
-  extraOffset?: number;
+  extraVerticalOffset: Option<number>;
 }
 
-type CombinedProps = IProps & ViewProps;
 /**
  * The MarginTop is essentially a feature used for managing the visibility of components on your screen.
  * A more accurate term for this might be something like a 'component visibility threshold' or 'cut-off point'.
@@ -47,7 +47,7 @@ export const useMarginTop = (targetScreenId: string): number => {
 
   // Empty string means that value is blank in the CMS. Fallback to theme
   if (String(screenData?.styles?.screen_margin_top) === "") {
-    return Number(theme.screen_margin_top);
+    return toNumberWithDefault(0, theme.screen_margin_top);
   }
 
   /**
@@ -58,28 +58,29 @@ export const useMarginTop = (targetScreenId: string): number => {
    */
   if (screenData?.styles?.screen_margin_top === undefined) {
     if (isGeneralContentScreen || supportsUiComponents) {
-      return Number(theme.screen_margin_top);
+      return toNumberWithDefault(0, theme.screen_margin_top);
     }
 
     return 0;
   }
 
-  return Number(screenData?.styles?.screen_margin_top);
+  return toNumberWithDefault(0, screenData?.styles?.screen_margin_top);
 };
 
-export const TopMarginApplicator: React.FC<CombinedProps> = (
-  props: CombinedProps
-) => {
-  const extraOffset = props?.extraOffset ?? 0;
+export const TopMarginApplicator: React.FC<IProps> = ({
+  targetScreenId,
+  style,
+  children,
+  extraVerticalOffset,
+}: IProps) => {
+  const extraOffset = toNumberWithDefault(0, extraVerticalOffset);
 
   // HACK: Remove extraOffset when focusIssue with absolute elements is fixed on tvos
-  const marginTop = useMarginTop(props.targetScreenId) + extraOffset;
-  const style = { ...((props.style as {}) || {}), marginTop };
+  const marginTop = useMarginTop(targetScreenId);
 
-  // Then, spread the rest of the props on your returned JSX.
   return (
-    <View {...props} style={style}>
-      {props.children}
+    <View style={[style, { marginTop: marginTop + extraOffset }]}>
+      {children}
     </View>
   );
 };

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Animated } from "react-native";
+import { Animated, Dimensions } from "react-native";
 
 import {
   useSafeAreaInsets,
@@ -23,6 +23,7 @@ export enum PlayerAnimationStateEnum {
 export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
 
 export type ModalAnimationContextT = {
+  yTranslate: React.MutableRefObject<Animated.Value | null>;
   isActiveGesture: boolean;
   playerAnimationState: PlayerAnimationStateT;
   setPlayerAnimationState: (value: PlayerAnimationStateT) => void;
@@ -48,6 +49,7 @@ export type ModalAnimationContextT = {
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
+  yTranslate: React.createRef<Animated.Value | null>(),
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -73,6 +75,10 @@ export const ReactContext = React.createContext<ModalAnimationContextT>({
 });
 
 const Provider = ({ children }: { children: React.ReactNode }) => {
+  const yTranslate = React.useRef(
+    new Animated.Value(Dimensions.get("window").height)
+  );
+
   const [playerAnimationState, setPlayerAnimationState] =
     React.useState<PlayerAnimationStateT>(null);
 
@@ -100,6 +106,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     // Reset player animation state when video modal is closed
     if (!visible) {
       resetPlayerAnimationState();
+      yTranslate.current?.setValue(Dimensions.get("window").height);
     }
   }, [visible, resetPlayerAnimationState]);
 
@@ -141,6 +148,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ReactContext.Provider
       value={{
+        yTranslate,
         startComponentsAnimation,
         setStartComponentsAnimation,
         isActiveGesture: playerAnimationState !== null,

package/Components/VideoModal/PlayerDetails.tsx

@@ -11,6 +11,8 @@ import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactH
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useDelayedPlayerDetails } from "./hooks";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
 
@@ -26,6 +28,10 @@ type Props = {
   isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
   isTablet?: boolean;
+  inline?: any;
+  docked?: boolean;
+  isModal?: boolean;
+  pip?: boolean;
 };
 
 const containerStyle = ({
@@ -42,8 +48,24 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape = false,
   isAudioPlayer,
-  isTablet = false,
+  inline,
+  docked,
+  isModal,
+  pip,
 }: Props) => {
+  const isInlineModal = inline && isModal;
+
+  // Mounting the PlayerDetails component is a resource-intensive process.
+  // Therefore, for performance reasons, we mount it with a delay to make the rotation process as smooth as possible.
+  // The flow is as follows: the rotation occurs first, and then, after a short delay, we mount the PlayerDetails component.
+  // This helps to avoid blocking the rotation and any animations related to the rotation.
+  const isShowPlayerDetails = useDelayedPlayerDetails({
+    isInline: isInlineModal,
+    isDocked: docked,
+    isPip: pip,
+  });
+
+  const isTablet = useIsTablet();
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
 
@@ -79,7 +101,7 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
-  if (isNilOrEmpty(screenData?.ui_components)) {
+  if (isNilOrEmpty(screenData?.ui_components) || !isShowPlayerDetails) {
     return null;
   }