@applicaster/zapp-react-native-ui-components 14.0.0-alpha.6931095759 → 14.0.0-alpha.7140739134

package/Components/AudioPlayer/{AudioPlayer.tsx → tv/index.tsx}

@@ -1,58 +1,20 @@
 import React, { useCallback, useMemo } from "react";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { getArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { AudioPlayerTVLayout } from "./Layout";
 
-import { AudioPlayerLayout } from "./AudioPlayerLayout";
 import { Channel } from "./Channel";
 import { Title } from "./Title";
 import { Summary } from "./Summary";
 import { Runtime } from "./Runtime";
 import { getPropertyFromEntryOrConfig } from "./helpers";
-import { ViewStyle } from "react-native";
-
-type Props = {
-  audio_item: ZappEntry & {
-    extensions?: {
-      audio_player_artwork_aspect_ratio?: string;
-      audio_player_background_image?: string;
-      audio_player_background_color?: string;
-      audio_player_channel_icon?: string;
-      audio_player_title_color?: string;
-      audio_player_summary_color?: string;
-      audio_player_rtl?: boolean;
-      audio_player_background_image_default_color?: string;
-      start_time?: string;
-      end_time?: string;
-    };
-  };
-  plugin_configuration: {
-    audio_player_background_color?: string;
-    audio_player_title_color?: string;
-    audio_player_summary_color?: string;
-    audio_player_rtl?: string;
-    audio_player_background_image_default_color?: string;
-    audio_player_background_image?: string;
-    audio_player_artwork_aspect_ratio?: string;
-    lg_tv_audio_player_title_font_family?: string;
-    lg_tv_audio_player_title_font_size?: number;
-    lg_tv_audio_player_summary_font_family?: string;
-    lg_tv_audio_player_summary_font_size?: number;
-    samsung_tv_audio_player_title_font_family?: string;
-    samsung_tv_audio_player_title_font_size?: number;
-    samsung_tv_audio_player_summary_font_family?: string;
-    samsung_tv_audio_player_summary_font_size?: number;
-    tv_os_audio_player_title_font_family?: string;
-    tv_os_audio_player_title_font_size?: number;
-    tv_os_audio_player_summary_font_family?: string;
-    tv_os_audio_player_summary_font_size?: number;
-  };
-  style?: ViewStyle;
-};
-
-export function AudioPlayer(props: Props) {
-  const { audio_item, plugin_configuration, style } = props;
+
+import { Props } from "../types";
+
+export function AudioPlayerTV(props: Props) {
+  const { audio_item, plugin_configuration, style = {} } = props;
   const { extensions, title, summary } = audio_item;
 
   const getProp = useCallback(
@@ -64,20 +26,15 @@ export function AudioPlayer(props: Props) {
   );
 
   const config = useMemo(() => {
-    // Checking if we are recieving items from the DSP
+    // Checking if we are receiving items from the DSP
     const titleColor = getProp("audio_player_title_color");
     const summaryColor = getProp("audio_player_summary_color");
     const backgroundColor = getProp("audio_player_background_color");
     const backgroundImage = getProp("audio_player_background_image");
-    const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
     const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
-    const audioPlayerBackgroundImageDefaultColor = getProp(
-      "audio_player_background_image_default_color"
-    );
-
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -152,23 +109,27 @@ export function AudioPlayer(props: Props) {
       summaryFontSize,
       runTimeFontFamily,
       runTimeFontSize,
-      artworkAspectRatio,
       channelIcon,
-      audioPlayerBackgroundImageDefaultColor,
       artworkBorderRadius,
     };
   }, [getProp]);
 
-  const artwork = imageSrcFromMediaItem(audio_item, [
-    config?.artworkAspectRatio,
-  ]);
+  const artwork = React.useMemo(
+    () =>
+      getArtworkImage({
+        key: "audio_player_artwork_image_key",
+        entry: audio_item,
+        plugin_configuration,
+      }),
+    [audio_item, plugin_configuration]
+  );
 
   return (
-    <AudioPlayerLayout artwork={artwork} config={config} style={style || {}}>
+    <AudioPlayerTVLayout artwork={artwork} config={config} style={style}>
       <Channel srcImage={config?.channelIcon} config={config} />
       <Title title={title} config={config} />
       <Summary summary={summary} config={config} />
       <Runtime {...extensions} config={config} />
-    </AudioPlayerLayout>
+    </AudioPlayerTVLayout>
   );
 }

package/Components/AudioPlayer/types.ts

@@ -0,0 +1,40 @@
+import { ViewStyle } from "react-native";
+
+export type Props = {
+  audio_item: ZappEntry & {
+    extensions?: {
+      audio_player_artwork_aspect_ratio?: string;
+      audio_player_background_image?: string;
+      audio_player_background_color?: string;
+      audio_player_channel_icon?: string;
+      audio_player_title_color?: string;
+      audio_player_summary_color?: string;
+      audio_player_rtl?: boolean;
+      audio_player_background_image_default_color?: string;
+      start_time?: string;
+      end_time?: string;
+    };
+  };
+  plugin_configuration: {
+    audio_player_background_color?: string;
+    audio_player_title_color?: string;
+    audio_player_summary_color?: string;
+    audio_player_rtl?: string;
+    audio_player_background_image_default_color?: string;
+    audio_player_background_image?: string;
+    audio_player_artwork_aspect_ratio?: string;
+    lg_tv_audio_player_title_font_family?: string;
+    lg_tv_audio_player_title_font_size?: number;
+    lg_tv_audio_player_summary_font_family?: string;
+    lg_tv_audio_player_summary_font_size?: number;
+    samsung_tv_audio_player_title_font_family?: string;
+    samsung_tv_audio_player_title_font_size?: number;
+    samsung_tv_audio_player_summary_font_family?: string;
+    samsung_tv_audio_player_summary_font_size?: number;
+    tv_os_audio_player_title_font_family?: string;
+    tv_os_audio_player_title_font_size?: number;
+    tv_os_audio_player_summary_font_family?: string;
+    tv_os_audio_player_summary_font_size?: number;
+  };
+  style?: ViewStyle;
+};

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/Text/index.tsx

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

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -716,11 +716,11 @@ const PlayerContainerComponent = (props: Props) => {
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
                             cellTapAction={onCellTap}
-                            extraAnchorPointYOffset={-600}
+                            extraAnchorPointYOffset={0}
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}
                             componentsMapExtraProps={{
-                              isNestedComponentsMap: R.T,
+                              isNestedComponentsMap: true,
                             }}
                           />
                         )}

package/Components/PlayerImageBackground/index.tsx

@@ -28,7 +28,7 @@ const PlayerImageBackgroundComponent = ({
   defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
+    () => ({ uri: imageSrcFromMediaItem(entry, [imageKey]) }),
     [imageKey, entry]
   );
 

package/Components/River/ComponentsMap/ComponentsMap.tsx

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

package/Components/River/RiverItem.tsx

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

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/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -135,12 +135,6 @@ 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, 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/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -71,6 +71,36 @@ exports[`PlayerWrapper renders inline 1`] = `
         }
         testID="test-player-container"
       />
+      <View
+        animationType="componentFade"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          configuration={
+            {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -239,6 +269,36 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
           }
         />
       </View>
+      <View
+        animationType="componentFade"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          configuration={
+            {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            {
+              "id": "test",
+            }
+          }
+          isTablet={true}
+          isTabletLandscape={true}
+          style={
+            {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>

package/Components/VideoModal/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -1,19 +1,9 @@
 import { renderHook } from "@testing-library/react-hooks";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
-import { showDetails } from "../utils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
-  withTimeout$: jest.fn(),
-}));
-
-jest.mock("../utils", () => ({
-  showDetails: jest.fn(),
-}));
-
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useIsTablet: jest.fn(),
+  useIsTablet: jest.fn().mockReturnValue(false),
 }));
 
 describe("useDelayedPlayerDetails", () => {
@@ -21,69 +11,41 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return false initially", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() }),
-    });
-
+  it("should return true initially", () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
-    expect(result.current).toBe(false);
+    expect(result.current).toBe(true);
   });
 
-  it("should return true if showDetails returns true", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(true);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
+  it("should return false when isPip is true", () => {
     const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+      useDelayedPlayerDetails({ isInline: true, isDocked: true, isPip: true })
     );
 
-    expect(result.current).toBe(true);
+    expect(result.current).toBe(false);
   });
 
-  it("should return false if showDetails returns false", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(false);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
+  it("should return false when isDocked is true", () => {
     const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+      useDelayedPlayerDetails({ isInline: true, isDocked: true, isPip: false })
     );
 
     expect(result.current).toBe(false);
   });
 
-  it("should unsubscribe on unmount", () => {
-    const unsubscribeMock = jest.fn();
+  it("should return true for tablet regardless of other flags", () => {
+    (useIsTablet as jest.Mock).mockReturnValue(true);
 
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: unsubscribeMock }),
-    });
-
-    const { unmount } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+    const { result } = renderHook(() =>
+      useDelayedPlayerDetails({
+        isInline: false,
+        isDocked: false,
+        isPip: false,
+      })
     );
 
-    unmount();
-
-    expect(unsubscribeMock).toHaveBeenCalled();
+    expect(result.current).toBe(true);
   });
 });

package/Components/VideoModal/hooks/useDelayedPlayerDetails.ts

@@ -1,13 +1,23 @@
-import * as React from "react";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 import { showDetails } from "./utils";
 
-const TIMEOUT = 100; // ms
-
 type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };
 
+const showPlayerDetails = (
+  isInline: boolean,
+  isDocked: boolean,
+  isPip: boolean,
+  isTablet: boolean
+) => {
+  return showDetails({
+    isMobile: !isTablet,
+    isInline,
+    isDocked,
+    isPip,
+  });
+};
+
 /**
  * Custom hook to determine whether to show player details with a delay.
  *
@@ -22,28 +32,7 @@ export const useDelayedPlayerDetails = ({
   isDocked,
   isPip,
 }: Props): boolean => {
-  const [shouldShowDetails, setShouldShowDetails] = React.useState(false);
-
   const isTablet = useIsTablet();
 
-  React.useEffect(() => {
-    const subscription = withTimeout$(TIMEOUT).subscribe({
-      next: () => {
-        setShouldShowDetails(() => {
-          return showDetails({
-            isMobile: !isTablet,
-            isInline,
-            isDocked,
-            isPip,
-          });
-        });
-      },
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [isDocked, isTablet, isInline, isPip]);
-
-  return shouldShowDetails;
+  return showPlayerDetails(isInline, isDocked, isPip, isTablet);
 };

package/index.d.ts

@@ -24,7 +24,6 @@ type GeneralContentScreenProps = {
   } & Record<string, any>;
   focused?: boolean;
   parentFocus?: ParentFocus;
-  extraOffset?: number;
   containerHeight?: number;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.6931095759",
+  "version": "14.0.0-alpha.7140739134",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.6931095759",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.6931095759",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.6931095759",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.6931095759",
+    "@applicaster/applicaster-types": "14.0.0-alpha.7140739134",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.7140739134",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.7140739134",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.7140739134",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"