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

package/Components/AudioPlayer/index.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+import { AudioPlayerTV } from "./tv";
+import { AudioPlayerMobile } from "./mobile";
+
+import { Props } from "./types";
+
+export function AudioPlayer(props: Props) {
+  if (isTV()) {
+    return <AudioPlayerTV {...props} />;
+  }
+
+  return <AudioPlayerMobile {...props} />;
+}

package/Components/AudioPlayer/mobile/Layout.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import {
+  View,
+  ImageBackground,
+  Animated,
+  ViewStyle,
+  StyleSheet,
+} from "react-native";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const THREE_SECONDS = 3000;
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+});
+
+type Props = {
+  backgroundImageSource: { uri: string };
+  style: ViewStyle;
+};
+
+export function AudioPlayerMobileLayout({
+  backgroundImageSource,
+  style,
+}: Props) {
+  const fadeAnimation = useRef(new Animated.Value(0)).current;
+
+  const mainContainerStyles = platformSelect({
+    native: {
+      backgroundColor: "transparent",
+      overflow: "hidden",
+      ...style,
+    },
+  });
+
+  React.useEffect(() => {
+    Animated.timing(fadeAnimation, {
+      toValue: 1,
+      duration: THREE_SECONDS,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  return (
+    <View style={mainContainerStyles} pointerEvents="none">
+      <Animated.View
+        style={[
+          mainContainerStyles,
+          {
+            opacity: fadeAnimation,
+          },
+        ]}
+      >
+        <ImageBackground
+          source={backgroundImageSource}
+          style={styles.flex}
+          resizeMode="cover"
+        >
+          <View style={mainContainerStyles} />
+        </ImageBackground>
+      </Animated.View>
+    </View>
+  );
+}

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<AudioPlayer /> renders correctly 1`] = `
+exports[`<AudioPlayerMobileLayout /> renders correctly 1`] = `
 <View
   pointerEvents="none"
   style={
@@ -32,7 +32,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
         resizeMode="cover"
         source={
           {
-            "uri": "https://example.com",
+            "uri": "background_image_url",
           }
         }
         style={

package/Components/AudioPlayer/mobile/__tests__/audioPlayerMobileLayout.test.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { AudioPlayerMobileLayout } from "../Layout";
+
+const audioPlayerLayoutProps = {
+  backgroundImageSource: { uri: "background_image_url" },
+};
+
+describe("<AudioPlayerMobileLayout />", () => {
+  it("renders correctly", () => {
+    const { toJSON } = render(
+      <AudioPlayerMobileLayout {...audioPlayerLayoutProps} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/Components/AudioPlayer/mobile/index.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
+
+import { AudioPlayerMobileLayout } from "./Layout";
+import { Props } from "../types";
+
+export function AudioPlayerMobile(props: Props) {
+  const { audio_item, style = {} } = props;
+
+  const backgroundImageSource = useBackgroundImage(audio_item);
+
+  return (
+    <AudioPlayerMobileLayout
+      backgroundImageSource={backgroundImageSource}
+      style={style}
+    />
+  );
+}

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Image, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 const styles = StyleSheet.create({
@@ -29,7 +30,7 @@ export function Artwork({ srcImage, config }: Props) {
 
   return (
     <View style={styles.container}>
-      <Image
+      <QBImage
         fadeDuration={0}
         source={{ uri: srcImage }}
         style={[styles.image, { borderRadius }]}

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Image } from "react-native";
+import { Image } from "react-native";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   srcImage: string;
@@ -15,17 +16,16 @@ type Props = {
 const imageStyles = {
   width: 128,
   height: 72,
-};
 
-const containerStyles = {
-  ...imageStyles,
   marginBottom: 30,
 };
 
 export function Channel({ srcImage }: Props) {
+  if (isNilOrEmpty(srcImage)) {
+    return null;
+  }
+
   return (
-    <View style={containerStyles}>
-      <Image fadeDuration={0} source={{ uri: srcImage }} style={imageStyles} />
-    </View>
+    <Image fadeDuration={0} source={{ uri: srcImage }} style={imageStyles} />
   );
 }

package/Components/AudioPlayer/tv/Layout.tsx

@@ -0,0 +1,168 @@
+import * as React from "react";
+import { ImageBackground, View, ViewStyle } from "react-native";
+
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+import { Artwork } from "./Artwork";
+import { directionStyles } from "./helpers";
+
+type Props = {
+  artwork: string;
+  config: {
+    titleColor: string;
+    summaryColor: string;
+    backgroundImageOverlay?: string;
+    backgroundColor: string;
+    backgroundImage: Option<string>;
+    isRTL: boolean;
+    artworkBorderRadius: Option<number>;
+  };
+  children: React.ReactNode;
+  style: ViewStyle;
+};
+
+const backgroundImgStyles = platformSelect({
+  tvos: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  android_tv: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  web: {
+    position: "absolute",
+    margin: "auto",
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%",
+    height: "100%",
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export function AudioPlayerTVLayout({
+  artwork,
+  config,
+  children,
+  style,
+}: Props) {
+  const { backgroundColor, backgroundImage, backgroundImageOverlay, isRTL } =
+    config;
+
+  const backgroundImageSource = { uri: backgroundImage };
+
+  const backgroundColorStyle = backgroundImage
+    ? "transparent"
+    : backgroundColor;
+
+  const textContainerStyles = platformSelect({
+    tvos: {
+      justifyContent: "center",
+      alignItems: directionStyles(isRTL).justifyContent,
+    },
+    android_tv: {
+      justifyContent: "center",
+      alignItems: directionStyles(isRTL).justifyContent,
+    },
+    web: {
+      justifyContent: "center",
+      alignItems: directionStyles(isRTL).justifyContent,
+    },
+  });
+
+  const mainContainerStyles = React.useMemo(
+    () =>
+      platformSelect({
+        tvos: {
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        android_tv: {
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        web: {
+          width: 1920,
+          height: 1080,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        native: {
+          backgroundColor: backgroundColorStyle,
+          overflow: "hidden",
+          ...style,
+        },
+        samsung_tv: {
+          position: "absolute",
+          margin: "auto",
+          display: "flex",
+          flexWrap: "wrap",
+          height: "100vh",
+          width: "100vw",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        lg_tv: {
+          position: "absolute",
+          margin: "auto",
+          display: "flex",
+          flexWrap: "wrap",
+          height: "100vh",
+          width: "100vw",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+      }),
+    [backgroundColorStyle, isRTL, style]
+  );
+
+  const backgroundOverlayStyles = React.useMemo(
+    () => ({
+      backgroundColor: backgroundImageOverlay,
+    }),
+    [backgroundImageOverlay]
+  );
+
+  if (backgroundImage) {
+    return (
+      <ImageBackground
+        source={backgroundImageSource}
+        style={backgroundImgStyles}
+        resizeMode="cover"
+      >
+        <View style={[mainContainerStyles, backgroundOverlayStyles]}>
+          <Artwork srcImage={artwork} config={config} />
+          <View style={textContainerStyles}>{children}</View>
+        </View>
+      </ImageBackground>
+    );
+  }
+
+  return (
+    <View style={mainContainerStyles}>
+      <Artwork srcImage={artwork} config={config} />
+      <View style={textContainerStyles}>{children}</View>
+    </View>
+  );
+}

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

@@ -1,6 +1,8 @@
 import React from "react";
 import { View, Text, ViewStyle, TextStyle } from "react-native";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { directionStyles } from "./helpers";
 
 type Props = {
@@ -19,7 +21,6 @@ type Props = {
 
 const containerStyles = ({ isRTL }) => ({
   width: 600,
-  height: 40,
   justifyContent: directionStyles(isRTL)
     .justifyContent as ViewStyle["justifyContent"],
 });
@@ -38,11 +39,16 @@ const textStyles = ({
 });
 
 export function Runtime({ start_time, end_time, config }: Props) {
+  if (isNilOrEmpty(start_time) && isNilOrEmpty(end_time)) {
+    return null;
+  }
+
   return (
     <View style={containerStyles({ isRTL: config.isRTL })}>
       {!!start_time && !!end_time && (
         <Text
           style={textStyles(config) as TextStyle}
+          numberOfLines={1}
         >{`${start_time} - ${end_time}`}</Text>
       )}
     </View>

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, TextStyle, StyleSheet } from "react-native";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   config: {
@@ -18,7 +19,6 @@ type Props = {
 const styles = StyleSheet.create({
   container: {
     width: 600,
-    height: 80,
     marginBottom: 30,
   },
 });
@@ -38,9 +38,13 @@ const textStyles = ({
 });
 
 export function Summary({ summary, config }: Props) {
+  if (isNilOrEmpty(summary)) {
+    return null;
+  }
+
   return (
     <View style={styles.container}>
-      <Text style={textStyles(config)} numberOfLines={2}>
+      <Text style={textStyles(config)} numberOfLines={3}>
         {summary}
       </Text>
     </View>

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, TextStyle, StyleSheet } from "react-native";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   config: {
@@ -18,7 +19,6 @@ type Props = {
 const styles = StyleSheet.create({
   container: {
     width: 600,
-    height: 100,
     marginBottom: 12,
   },
 });
@@ -32,9 +32,13 @@ const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
 });
 
 export function Title({ title, config }: Props) {
+  if (isNilOrEmpty(title)) {
+    return null;
+  }
+
   return (
     <View style={styles.container}>
-      <Text style={textStyles(config)} numberOfLines={2}>
+      <Text style={textStyles(config)} numberOfLines={3}>
         {title}
       </Text>
     </View>

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

@@ -4,13 +4,13 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
 <View
   style={
     {
-      "height": 40,
       "justifyContent": "flex-start",
       "width": 600,
     }
   }
 >
   <Text
+    numberOfLines={1}
     style={
       {
         "alignItems": "flex-end",
@@ -33,13 +33,13 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
 <View
   style={
     {
-      "height": 40,
       "justifyContent": "flex-end",
       "width": 600,
     }
   }
 >
   <Text
+    numberOfLines={1}
     style={
       {
         "alignItems": "flex-start",

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",

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

@@ -4,14 +4,13 @@ exports[`<Title /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 100,
       "marginBottom": 12,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

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 }) {

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,20 +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 artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
-    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(
@@ -152,23 +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/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

@@ -135,9 +135,6 @@ const webStyles = {
   },
   inlineRiver: {
     height: INLINE_CONTAINER_CONTENT_HEIGHT,
-
-    borderWidth: 4,
-    borderColor: "yellow",
   },
 };
 
@@ -719,7 +716,7 @@ const PlayerContainerComponent = (props: Props) => {
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
                             cellTapAction={onCellTap}
-                            extraAnchorPointYOffset={-600}
+                            extraAnchorPointYOffset={0}
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}
                             componentsMapExtraProps={{

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.5071825192",
+  "version": "14.0.0-alpha.5395814692",
   "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.5071825192",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5071825192",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5071825192",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5071825192",
+    "@applicaster/applicaster-types": "14.0.0-alpha.5395814692",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5395814692",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5395814692",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5395814692",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -1,202 +0,0 @@
-import React, { useRef } from "react";
-import { View, ImageBackground, Animated, ViewStyle } from "react-native";
-
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-import { Artwork } from "./Artwork";
-import { directionStyles } from "./helpers";
-
-type Props = {
-  artwork?: string;
-  config: {
-    titleColor: string;
-    summaryColor: string;
-    backgroundColor: string;
-    backgroundImage: string;
-    isRTL: boolean;
-    artworkBorderRadius: Option<number>;
-  };
-  children: React.ReactNode;
-  style: ViewStyle;
-};
-
-export function AudioPlayerLayout({ artwork, config, children, style }: 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 backgroundColorStyle = backgroundImage
-    ? "transparent"
-    : backgroundColor;
-
-  const mainContainerStyles = platformSelect({
-    tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    web: {
-      width: 1920,
-      height: 1080,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    native: {
-      backgroundColor: backgroundColorStyle,
-      overflow: "hidden",
-      ...style,
-    },
-    samsung_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    lg_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-  });
-
-  const backgroundImgStyles = platformSelect({
-    tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    web: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100%",
-      height: "100%",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    native: {
-      flex: 1,
-    },
-  });
-
-  const textContainerStyles = platformSelect({
-    tvos: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    android_tv: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    web: {
-      margin: 10,
-      height: "100vh",
-      alignItems: directionStyles(isRTL).justifyContent,
-      justifyContent: "center",
-    },
-  });
-
-  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 && <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/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

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

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

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

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

@@ -1,26 +0,0 @@
-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/index.ts

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