@applicaster/zapp-react-native-ui-components 14.0.0-alpha.1473000722 → 14.0.0-alpha.1540936784

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

@@ -1,20 +1,58 @@
 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 { AudioPlayerTVLayout } from "./Layout";
+import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
+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 { Props } from "../types";
-
-export function AudioPlayerTV(props: Props) {
-  const { audio_item, plugin_configuration, style = {} } = props;
+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 } = props;
   const { extensions, title, summary } = audio_item;
 
   const getProp = useCallback(
@@ -26,15 +64,20 @@ export function AudioPlayerTV(props: Props) {
   );
 
   const config = useMemo(() => {
-    // Checking if we are receiving items from the DSP
+    // Checking if we are recieving 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(
@@ -109,27 +152,23 @@ export function AudioPlayerTV(props: Props) {
       summaryFontSize,
       runTimeFontFamily,
       runTimeFontSize,
+      artworkAspectRatio,
       channelIcon,
+      audioPlayerBackgroundImageDefaultColor,
       artworkBorderRadius,
     };
   }, [getProp]);
 
-  const artwork = React.useMemo(
-    () =>
-      getArtworkImage({
-        key: "audio_player_artwork_image_key",
-        entry: audio_item,
-        plugin_configuration,
-      }),
-    [audio_item, plugin_configuration]
-  );
+  const artwork = imageSrcFromMediaItem(audio_item, [
+    config?.artworkAspectRatio,
+  ]);
 
   return (
-    <AudioPlayerTVLayout 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} />
       <Runtime {...extensions} config={config} />
-    </AudioPlayerTVLayout>
+    </AudioPlayerLayout>
   );
 }

package/Components/AudioPlayer/{tv/Layout.tsx → AudioPlayerLayout.tsx}

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { View, ImageBackground, ViewStyle } from "react-native";
+import React, { useRef } from "react";
+import { View, ImageBackground, Animated } from "react-native";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -7,30 +7,34 @@ import { Artwork } from "./Artwork";
 import { directionStyles } from "./helpers";
 
 type Props = {
-  artwork: string;
+  artwork?: string;
   config: {
     titleColor: string;
     summaryColor: string;
     backgroundColor: string;
-    backgroundImage: Option<string>;
+    backgroundImage: string;
     isRTL: boolean;
     artworkBorderRadius: Option<number>;
   };
   children: React.ReactNode;
-  style: ViewStyle;
 };
 
-export function AudioPlayerTVLayout({
-  artwork,
-  config,
-  children,
-  style,
-}: Props) {
+export function AudioPlayerLayout({ artwork, config, children }: Props) {
+  const fadeAnimation = useRef(new Animated.Value(0)).current;
+
+  const fadeAudioPlayerIn = () => {
+    Animated.timing(fadeAnimation, {
+      toValue: 1,
+      duration: 3000,
+      useNativeDriver: true,
+    }).start();
+  };
+
   const { isRTL, backgroundColor, backgroundImage } = config;
 
-  const backgroundImageSource = { uri: backgroundImage };
+  const backgroundImageSource = { uri: backgroundImage || artwork };
 
-  const backgroundColorStyle = backgroundImage
+  const backgroundColorStyle = backgroundImageSource.uri
     ? "transparent"
     : backgroundColor;
 
@@ -62,7 +66,8 @@ export function AudioPlayerTVLayout({
     native: {
       backgroundColor: backgroundColorStyle,
       overflow: "hidden",
-      ...style,
+      width: "100%",
+      height: "100%",
     },
     samsung_tv: {
       position: "absolute",
@@ -114,6 +119,9 @@ export function AudioPlayerTVLayout({
       alignItems: "center",
       justifyContent: "center",
     },
+    native: {
+      flex: 1,
+    },
   });
 
   const textContainerStyles = platformSelect({
@@ -137,25 +145,58 @@ export function AudioPlayerTVLayout({
     },
   });
 
-  if (backgroundImage) {
-    return (
-      <ImageBackground
-        source={backgroundImageSource}
-        style={backgroundImgStyles}
-        resizeMode="cover"
-      >
-        <View style={mainContainerStyles}>
-          <Artwork srcImage={artwork} config={config} />
-          <View style={textContainerStyles}>{children}</View>
-        </View>
-      </ImageBackground>
-    );
-  }
-
-  return (
+  const audioPlayerLayoutTV = backgroundImageSource?.uri ? (
+    <ImageBackground
+      source={backgroundImageSource}
+      style={backgroundImgStyles}
+      resizeMode="cover"
+    >
+      <View style={mainContainerStyles}>
+        {!!artwork && <Artwork srcImage={artwork} config={config} />}
+        <View style={textContainerStyles}>{children}</View>
+      </View>
+    </ImageBackground>
+  ) : (
     <View style={mainContainerStyles}>
-      <Artwork srcImage={artwork} config={config} />
+      {!!artwork && <Artwork srcImage={artwork} config={config} />}
       <View style={textContainerStyles}>{children}</View>
     </View>
   );
+
+  const audioPlayerLayoutMobile = () => {
+    fadeAudioPlayerIn();
+
+    return (
+      <View style={mainContainerStyles} pointerEvents="none">
+        <Animated.View
+          style={[
+            mainContainerStyles,
+            {
+              opacity: fadeAnimation,
+            },
+          ]}
+        >
+          <ImageBackground
+            source={backgroundImageSource}
+            style={backgroundImgStyles}
+            resizeMode="cover"
+          >
+            <View style={mainContainerStyles} />
+          </ImageBackground>
+        </Animated.View>
+      </View>
+    );
+  };
+
+  const audioPlayerLayout = platformSelect({
+    tvos: audioPlayerLayoutTV,
+    android_tv: audioPlayerLayoutTV,
+    web: audioPlayerLayoutTV,
+    samsung_tv: audioPlayerLayoutTV,
+    lg_tv: audioPlayerLayoutTV,
+    ios: audioPlayerLayoutMobile(),
+    android: audioPlayerLayoutMobile(),
+  });
+
+  return audioPlayerLayout;
 }

package/Components/AudioPlayer/{mobile/__tests__/__snapshots__/audioPlayerMobileLayout.test.js.snap → __tests__/__snapshots__/audioPlayer.test.js.snap}

@@ -1,12 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<AudioPlayerMobileLayout /> renders correctly 1`] = `
+exports[`<AudioPlayer /> renders correctly 1`] = `
 <View
   pointerEvents="none"
   style={
     {
       "backgroundColor": "transparent",
+      "height": "100%",
       "overflow": "hidden",
+      "width": "100%",
     }
   }
 >
@@ -15,8 +17,10 @@ exports[`<AudioPlayerMobileLayout /> renders correctly 1`] = `
     style={
       {
         "backgroundColor": "transparent",
+        "height": "100%",
         "opacity": 0,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -32,7 +36,7 @@ exports[`<AudioPlayerMobileLayout /> renders correctly 1`] = `
         resizeMode="cover"
         source={
           {
-            "uri": undefined,
+            "uri": "https://example.com",
           }
         }
         style={
@@ -56,7 +60,9 @@ exports[`<AudioPlayerMobileLayout /> renders correctly 1`] = `
         style={
           {
             "backgroundColor": "transparent",
+            "height": "100%",
             "overflow": "hidden",
+            "width": "100%",
           }
         }
       />

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

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AudioPlayerLayout /> renders correctly 1`] = `
+<View
+  pointerEvents="none"
+  style={
+    {
+      "backgroundColor": "transparent",
+      "height": "100%",
+      "overflow": "hidden",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "height": "100%",
+        "opacity": 0,
+        "overflow": "hidden",
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      accessibilityIgnoresInvertColors={true}
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <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",
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 
-import { AudioPlayerTV } from "..";
+import { AudioPlayer } from "../AudioPlayer";
 
 const audioPlayerProps = {
   audio_item: {
@@ -45,9 +45,9 @@ const audioPlayerProps = {
   styles: {},
 };
 
-describe("<AudioPlayerTV />", () => {
+describe("<AudioPlayer />", () => {
   it("renders correctly", () => {
-    const { toJSON } = render(<AudioPlayerTV {...audioPlayerProps} />);
+    const { toJSON } = render(<AudioPlayer {...audioPlayerProps} />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { AudioPlayerLayout } from "../AudioPlayerLayout";
+
+const audioPlayerLayoutProps = {
+  artwork: "string",
+  config: {
+    titleColor: "white",
+    summaryColor: "white",
+    backgroundColor: "black",
+    backgroundImage: "https://example.com",
+    isRTL: true,
+  },
+  children: [],
+};
+
+describe("<AudioPlayerLayout />", () => {
+  it("renders correctly", () => {
+    const { toJSON } = render(
+      <AudioPlayerLayout {...audioPlayerLayoutProps} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -2,8 +2,9 @@ const defaults = {
   audio_player_title_color: "white",
   audio_player_summary_color: "white",
   audio_player_background_color: "black",
-  audio_player_background_image: undefined,
+  audio_player_artwork_aspect_ratio: "1:1",
   audio_player_rtl: false,
+  audio_player_background_image_default_color: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {

package/Components/AudioPlayer/index.ts

@@ -0,0 +1 @@
+export { AudioPlayer } from "./AudioPlayer";

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 */
@@ -135,9 +140,6 @@ const webStyles = {
   },
   inlineRiver: {
     height: INLINE_CONTAINER_CONTENT_HEIGHT,
-
-    borderWidth: 4,
-    borderColor: "yellow",
   },
 };
 
@@ -148,7 +150,7 @@ const nativeStyles = {
   },
   playerScreen: {
     flex: 1,
-    backgroundColor: "black",
+    background: "black",
     overflow: "hidden",
   },
   playerWrapper: {
@@ -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]}