@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5521273514 → 14.0.0-alpha.5533663133

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

@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AudioPlayerTV /> renders correctly 1`] = `
+<View
+  accessibilityIgnoresInvertColors={true}
+>
+  <Image
+    resizeMode="cover"
+    source={
+      {
+        "uri": "https://example.com",
+      }
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "height": undefined,
+          "width": undefined,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "marginHorizontal": 24,
+        }
+      }
+    >
+      <Image
+        fadeDuration={0}
+        resizeMode="cover"
+        source={
+          {
+            "uri": "artwork_url",
+          }
+        }
+        style={
+          [
+            {
+              "height": 400,
+              "width": 400,
+            },
+            {
+              "borderRadius": 0,
+            },
+          ]
+        }
+      />
+    </View>
+    <View>
+      <Image
+        fadeDuration={0}
+        source={
+          {
+            "uri": "https://example.com",
+          }
+        }
+        style={
+          {
+            "height": 72,
+            "marginBottom": 30,
+            "width": 128,
+          }
+        }
+      />
+      <View
+        style={
+          {
+            "marginBottom": 12,
+            "width": 600,
+          }
+        }
+      >
+        <Text
+          numberOfLines={3}
+          style={
+            {
+              "color": "white",
+              "fontFamily": null,
+              "fontSize": 38,
+              "fontWeight": "600",
+              "textAlign": "right",
+            }
+          }
+        >
+          tittle
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "marginBottom": 30,
+            "width": 600,
+          }
+        }
+      >
+        <Text
+          numberOfLines={3}
+          style={
+            {
+              "color": "white",
+              "fontFamily": null,
+              "fontSize": 20,
+              "fontWeight": "600",
+              "opacity": 0.8,
+              "textAlign": "right",
+            }
+          }
+        >
+          Summary
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "justifyContent": "flex-end",
+            "width": 600,
+          }
+        }
+      >
+        <Text
+          numberOfLines={1}
+          style={
+            {
+              "alignItems": "flex-start",
+              "color": "white",
+              "flexDirection": "row-reverse",
+              "fontFamily": null,
+              "fontSize": 20,
+              "justifyContent": "flex-end",
+              "opacity": 0.8,
+              "textAlign": "right",
+            }
+          }
+        >
+          10:10 - 11:11
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/Components/AudioPlayer/tv/__tests__/__snapshots__/channel.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Channel /> renders correctly 1`] = `
+<Image
+  fadeDuration={0}
+  source={
+    {
+      "uri": "https://example.com",
+    }
+  }
+  style={
+    {
+      "height": 72,
+      "marginBottom": 30,
+      "width": 128,
+    }
+  }
+/>
+`;

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/__snapshots__/summary.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Summary /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 80,
       "marginBottom": 30,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",
@@ -19,7 +18,7 @@ exports[`<Summary /> renders correctly 1`] = `
         "fontSize": 20,
         "fontWeight": "600",
         "opacity": 0.8,
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/__snapshots__/title.test.js.snap

@@ -4,21 +4,20 @@ exports[`<Title /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 100,
       "marginBottom": 12,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",
         "fontFamily": null,
         "fontSize": 38,
         "fontWeight": "600",
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/audioPlayer.test.js

@@ -1,7 +1,11 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 
-import { AudioPlayer } from "../AudioPlayer";
+import { AudioPlayerTV } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
+  useArtworkImage: jest.fn(() => "artwork_url"),
+}));
 
 const audioPlayerProps = {
   audio_item: {
@@ -45,9 +49,9 @@ const audioPlayerProps = {
   styles: {},
 };
 
-describe("<AudioPlayer />", () => {
+describe("<AudioPlayerTV />", () => {
   it("renders correctly", () => {
-    const { toJSON } = render(<AudioPlayer {...audioPlayerProps} />);
+    const { toJSON } = render(<AudioPlayerTV {...audioPlayerProps} />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -2,9 +2,8 @@ const defaults = {
   audio_player_title_color: "white",
   audio_player_summary_color: "white",
   audio_player_background_color: "black",
-  audio_player_artwork_aspect_ratio: "1:1",
+  audio_player_background_image: undefined,
   audio_player_rtl: false,
-  audio_player_background_image_default_color: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
@@ -26,14 +25,14 @@ export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
 const LTR = {
   flexDirection: "row",
   justifyContent: "flex-start",
-  textAlign: "right",
+  textAlign: "left",
   alignItems: "flex-end",
 };
 
 const RTL = {
   flexDirection: "row-reverse",
   justifyContent: "flex-end",
-  textAlign: "left",
+  textAlign: "right",
   alignItems: "flex-start",
 };
 

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

@@ -1,60 +1,24 @@
 import React, { useCallback, useMemo } from "react";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useArtworkImage } 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 artwork = useArtworkImage(audio_item);
+
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
       entry: audio_item,
@@ -64,19 +28,20 @@ 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 audioPlayerBackgroundImageDefaultColor = getProp(
-      "audio_player_background_image_default_color"
+    const backgroundImageOverlay = getProp(
+      "audio_player_background_image_overlay"
     );
 
+    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
+
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -151,22 +116,18 @@ export function AudioPlayer(props: Props) {
       summaryFontSize,
       runTimeFontFamily,
       runTimeFontSize,
-      artworkAspectRatio,
       channelIcon,
-      audioPlayerBackgroundImageDefaultColor,
+      artworkBorderRadius,
+      backgroundImageOverlay,
     };
   }, [getProp]);
 
-  const artwork = imageSrcFromMediaItem(audio_item, [
-    config?.artworkAspectRatio,
-  ]);
-
   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/MasterCell/index.tsx

@@ -86,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
+      [state, item, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

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]}