@applicaster/zapp-react-native-ui-components 14.0.0-alpha.8419134002 → 14.0.0-alpha.9848043301

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

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

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

@@ -1,24 +1,60 @@
 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 { 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 artwork = useArtworkImage(audio_item);
-
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
       entry: audio_item,
@@ -28,20 +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 backgroundImageOverlay = getProp(
-      "audio_player_background_image_overlay"
+    const audioPlayerBackgroundImageDefaultColor = getProp(
+      "audio_player_background_image_default_color"
     );
 
-    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
-
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -116,18 +152,23 @@ export function AudioPlayerTV(props: Props) {
       summaryFontSize,
       runTimeFontFamily,
       runTimeFontSize,
+      artworkAspectRatio,
       channelIcon,
+      audioPlayerBackgroundImageDefaultColor,
       artworkBorderRadius,
-      backgroundImageOverlay,
     };
   }, [getProp]);
 
+  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/AudioPlayerLayout.tsx

@@ -0,0 +1,202 @@
+import React, { useRef } from "react";
+import { View, ImageBackground, Animated } 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;
+};
+
+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 || artwork };
+
+  const backgroundColorStyle = backgroundImageSource.uri
+    ? "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",
+      width: "100%",
+      height: "100%",
+    },
+    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/{tv/Channel.tsx → Channel.tsx}

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

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

@@ -1,8 +1,6 @@
 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 = {
@@ -21,6 +19,7 @@ type Props = {
 
 const containerStyles = ({ isRTL }) => ({
   width: 600,
+  height: 40,
   justifyContent: directionStyles(isRTL)
     .justifyContent as ViewStyle["justifyContent"],
 });
@@ -39,16 +38,11 @@ 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/{tv/Summary.tsx → Summary.tsx}

@@ -1,7 +1,6 @@
 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: {
@@ -19,6 +18,7 @@ type Props = {
 const styles = StyleSheet.create({
   container: {
     width: 600,
+    height: 80,
     marginBottom: 30,
   },
 });
@@ -38,13 +38,9 @@ const textStyles = ({
 });
 
 export function Summary({ summary, config }: Props) {
-  if (isNilOrEmpty(summary)) {
-    return null;
-  }
-
   return (
     <View style={styles.container}>
-      <Text style={textStyles(config)} numberOfLines={3}>
+      <Text style={textStyles(config)} numberOfLines={2}>
         {summary}
       </Text>
     </View>

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

@@ -1,7 +1,6 @@
 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: {
@@ -19,6 +18,7 @@ type Props = {
 const styles = StyleSheet.create({
   container: {
     width: 600,
+    height: 100,
     marginBottom: 12,
   },
 });
@@ -32,13 +32,9 @@ 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={3}>
+      <Text style={textStyles(config)} numberOfLines={2}>
         {title}
       </Text>
     </View>

package/Components/AudioPlayer/{tv/__tests__ → __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/{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": "background_image_url",
+            "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/__tests__/__snapshots__/channel.test.js.snap

@@ -0,0 +1,28 @@
+// 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/{tv/__tests__ → __tests__}/__snapshots__/summary.test.js.snap

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

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

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