@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5071825192 → 14.0.0-alpha.5621117258

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -52,7 +52,7 @@ type Props = {
 };
 
 export function AudioPlayer(props: Props) {
-  const { audio_item, plugin_configuration, style } = props;
+  const { audio_item, plugin_configuration } = props;
   const { extensions, title, summary } = audio_item;
 
   const getProp = useCallback(
@@ -164,7 +164,7 @@ export function AudioPlayer(props: Props) {
   ]);
 
   return (
-    <AudioPlayerLayout artwork={artwork} config={config} style={style || {}}>
+    <AudioPlayerLayout artwork={artwork} config={config}>
       <Channel srcImage={config?.channelIcon} config={config} />
       <Title title={title} config={config} />
       <Summary summary={summary} config={config} />

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { View, ImageBackground, Animated, ViewStyle } from "react-native";
+import { View, ImageBackground, Animated } from "react-native";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -17,10 +17,9 @@ type Props = {
     artworkBorderRadius: Option<number>;
   };
   children: React.ReactNode;
-  style: ViewStyle;
 };
 
-export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
+export function AudioPlayerLayout({ artwork, config, children }: Props) {
   const fadeAnimation = useRef(new Animated.Value(0)).current;
 
   const fadeAudioPlayerIn = () => {
@@ -33,9 +32,9 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
 
   const { isRTL, backgroundColor, backgroundImage } = config;
 
-  const backgroundImageSource = { uri: backgroundImage };
+  const backgroundImageSource = { uri: backgroundImage || artwork };
 
-  const backgroundColorStyle = backgroundImage
+  const backgroundColorStyle = backgroundImageSource.uri
     ? "transparent"
     : backgroundColor;
 
@@ -67,7 +66,8 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
     native: {
       backgroundColor: backgroundColorStyle,
       overflow: "hidden",
-      ...style,
+      width: "100%",
+      height: "100%",
     },
     samsung_tv: {
       position: "absolute",

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -6,7 +6,9 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
   style={
     {
       "backgroundColor": "transparent",
+      "height": "100%",
       "overflow": "hidden",
+      "width": "100%",
     }
   }
 >
@@ -15,8 +17,10 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     style={
       {
         "backgroundColor": "transparent",
+        "height": "100%",
         "opacity": 0,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -56,7 +60,9 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
         style={
           {
             "backgroundColor": "transparent",
+            "height": "100%",
             "overflow": "hidden",
+            "width": "100%",
           }
         }
       />

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

@@ -6,7 +6,9 @@ exports[`<AudioPlayerLayout /> renders correctly 1`] = `
   style={
     {
       "backgroundColor": "transparent",
+      "height": "100%",
       "overflow": "hidden",
+      "width": "100%",
     }
   }
 >
@@ -15,8 +17,10 @@ exports[`<AudioPlayerLayout /> renders correctly 1`] = `
     style={
       {
         "backgroundColor": "transparent",
+        "height": "100%",
         "opacity": 0,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -56,7 +60,9 @@ exports[`<AudioPlayerLayout /> renders correctly 1`] = `
         style={
           {
             "backgroundColor": "transparent",
+            "height": "100%",
             "overflow": "hidden",
+            "width": "100%",
           }
         }
       />

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

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

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

@@ -52,7 +52,6 @@ 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,6 +105,11 @@ 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 */
@@ -127,7 +132,7 @@ const webStyles = {
   playerScreen: {
     flex: 1,
     height: "100vh",
-    background: "black",
+    backgroundColor: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -135,9 +140,6 @@ const webStyles = {
   },
   inlineRiver: {
     height: INLINE_CONTAINER_CONTENT_HEIGHT,
-
-    borderWidth: 4,
-    borderColor: "yellow",
   },
 };
 
@@ -568,8 +570,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 }),
@@ -590,7 +593,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;
     }
 
@@ -640,14 +647,17 @@ const PlayerContainerComponent = (props: Props) => {
                 preferredFocus
                 shouldUsePreferredFocus
                 groupId={groupId}
+                pointerEvents={mode === "MINIMIZED" ? "box-none" : "auto"}
               >
                 {/* Video player and components */}
                 <View
                   style={styles.playerScreen}
                   testID={"player-screen-container"}
+                  pointerEvents={mode === "MINIMIZED" ? "box-none" : "auto"}
                 >
                   {/* Player container */}
                   <View
+                    pointerEvents={mode === "MINIMIZED" ? "box-none" : "auto"}
                     style={[
                       styles.playerWrapper,
                       // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals
@@ -719,11 +729,13 @@ const PlayerContainerComponent = (props: Props) => {
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
                             cellTapAction={onCellTap}
-                            extraAnchorPointYOffset={-600}
+                            extraAnchorPointYOffset={
+                              EXTRA_ANCHOR_POINT_Y_OFFSET
+                            }
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}
                             componentsMapExtraProps={{
-                              isNestedComponentsMap: true,
+                              isNestedComponentsMap: R.T,
                             }}
                           />
                         )}

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -281,8 +281,8 @@ function ComponentsMapComponent(props: Props) {
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
             stickyHeaderIndices={stickyHeaderIndices}
-            removeClippedSubviews={isAndroid}
             onLayout={handleOnLayout}
+            removeClippedSubviews={isAndroid}
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
@@ -303,6 +303,10 @@ function ComponentsMapComponent(props: Props) {
             onMomentumScrollEnd={_onMomentumScrollEnd}
             onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
+            maintainVisibleContentPosition={{
+              minIndexForVisible: 0,
+              autoscrollToTopThreshold: 10,
+            }}
             {...scrollViewExtraProps}
           />
         </ViewportTracker>

package/Components/River/RiverItem.tsx

@@ -39,10 +39,6 @@ function getFeedUrl(feed: ZappFeed, index: number) {
   }
 }
 
-const isNextIndex = (index, readyIndex) => {
-  return readyIndex + 1 >= index;
-};
-
 /**
  * useLoadingState for RiverItemComponent
  * takes currentIndex and loadingState as arguments
@@ -52,20 +48,24 @@ const useLoadingState = (
   loadingState: RiverItemType["loadingState"]
 ) => {
   const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
-    isNextIndex(currentIndex, loadingState.getValue().index)
+    loadingState.getValue().index + 1 >= currentIndex
   );
 
   useEffect(() => {
     const subscription = loadingState.subscribe(({ index }) => {
-      if (isNextIndex(currentIndex, index)) {
+      if (index + 1 >= currentIndex) {
         setReadyToBeDisplayed(true);
       }
     });
 
+    if (loadingState.getValue().index + 1 >= currentIndex) {
+      setReadyToBeDisplayed(true);
+    }
+
     return () => {
       subscription.unsubscribe();
     };
-  }, [currentIndex]);
+  }, [loadingState, currentIndex]);
 
   return readyToBeDisplayed;
 };
@@ -151,7 +151,7 @@ function RiverItemComponent(props: RiverItemType) {
       component={item}
       componentIndex={index}
       onLoadFailed={onLoadFailed}
-      onLoadFinished={() => onLoadFinished(index)}
+      onLoadFinished={() => onLoadFinished(index)} // Keeping it here to don't break the plugins.
       groupId={groupId}
       feedUrl={feedUrl}
       isLast={isLast}

package/Components/River/TV/River.tsx

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

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -135,6 +135,12 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       getItemCount={[Function]}
       initialNumToRender={3}
       keyExtractor={[Function]}
+      maintainVisibleContentPosition={
+        {
+          "autoscrollToTopThreshold": 10,
+          "minIndexForVisible": 0,
+        }
+      }
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
       onLayout={[Function]}

package/Components/TopMarginApplicator/TopMarginApplicator.tsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { View, ViewStyle } from "react-native";
+import { View, ViewProps, 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;
-  extraVerticalOffset: Option<number>;
+  extraOffset?: 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 toNumberWithDefault(0, theme.screen_margin_top);
+    return Number(theme.screen_margin_top);
   }
 
   /**
@@ -58,29 +58,28 @@ export const useMarginTop = (targetScreenId: string): number => {
    */
   if (screenData?.styles?.screen_margin_top === undefined) {
     if (isGeneralContentScreen || supportsUiComponents) {
-      return toNumberWithDefault(0, theme.screen_margin_top);
+      return Number(theme.screen_margin_top);
     }
 
     return 0;
   }
 
-  return toNumberWithDefault(0, screenData?.styles?.screen_margin_top);
+  return Number(screenData?.styles?.screen_margin_top);
 };
 
-export const TopMarginApplicator: React.FC<IProps> = ({
-  targetScreenId,
-  style,
-  children,
-  extraVerticalOffset,
-}: IProps) => {
-  const extraOffset = toNumberWithDefault(0, extraVerticalOffset);
+export const TopMarginApplicator: React.FC<CombinedProps> = (
+  props: CombinedProps
+) => {
+  const extraOffset = props?.extraOffset ?? 0;
 
   // HACK: Remove extraOffset when focusIssue with absolute elements is fixed on tvos
-  const marginTop = useMarginTop(targetScreenId);
+  const marginTop = useMarginTop(props.targetScreenId) + extraOffset;
+  const style = { ...((props.style as {}) || {}), marginTop };
 
+  // Then, spread the rest of the props on your returned JSX.
   return (
-    <View style={[style, { marginTop: marginTop + extraOffset }]}>
-      {children}
+    <View {...props} style={style}>
+      {props.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;
   }