@applicaster/zapp-react-native-ui-components 14.0.0-alpha.8387612031 → 14.0.0-alpha.9119252693

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/mobile/Layout.tsx

@@ -17,11 +17,14 @@ const styles = StyleSheet.create({
 });
 
 type Props = {
-  backgroundImage: string;
+  backgroundImageSource: { uri: string };
   style: ViewStyle;
 };
 
-export function AudioPlayerMobileLayout({ backgroundImage, style }: Props) {
+export function AudioPlayerMobileLayout({
+  backgroundImageSource,
+  style,
+}: Props) {
   const fadeAnimation = useRef(new Animated.Value(0)).current;
 
   const mainContainerStyles = platformSelect({
@@ -51,7 +54,7 @@ export function AudioPlayerMobileLayout({ backgroundImage, style }: Props) {
         ]}
       >
         <ImageBackground
-          source={{ uri: backgroundImage }}
+          source={backgroundImageSource}
           style={styles.flex}
           resizeMode="cover"
         >

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

@@ -6,7 +6,9 @@ exports[`<AudioPlayerMobileLayout /> renders correctly 1`] = `
   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": "background_image_url",
           }
         }
         style={
@@ -56,7 +60,9 @@ exports[`<AudioPlayerMobileLayout /> renders correctly 1`] = `
         style={
           {
             "backgroundColor": "transparent",
+            "height": "100%",
             "overflow": "hidden",
+            "width": "100%",
           }
         }
       />

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

@@ -4,7 +4,7 @@ import { render } from "@testing-library/react-native";
 import { AudioPlayerMobileLayout } from "../Layout";
 
 const audioPlayerLayoutProps = {
-  backgroundColor: "black",
+  backgroundImageSource: { uri: "background_image_url" },
 };
 
 describe("<AudioPlayerMobileLayout />", () => {

package/Components/AudioPlayer/mobile/index.tsx

@@ -1,23 +1,18 @@
 import * as React from "react";
-import { getBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
+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, plugin_configuration, style = {} } = props;
+  const { audio_item, style = {} } = props;
 
-  const backgroundImage = React.useMemo(
-    () =>
-      getBackgroundImage({
-        entry: audio_item,
-        plugin_configuration,
-      }),
-    [audio_item, plugin_configuration]
-  );
+  const backgroundImageSource = useBackgroundImage(audio_item);
 
   return (
-    <AudioPlayerMobileLayout backgroundImage={backgroundImage} style={style} />
+    <AudioPlayerMobileLayout
+      backgroundImageSource={backgroundImageSource}
+      style={style}
+    />
   );
 }

package/Components/AudioPlayer/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/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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, ImageBackground, ViewStyle } from "react-native";
+import { ImageBackground, View, ViewStyle } from "react-native";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -11,6 +11,7 @@ type Props = {
   config: {
     titleColor: string;
     summaryColor: string;
+    backgroundImageOverlay?: string;
     backgroundColor: string;
     backgroundImage: Option<string>;
     isRTL: boolean;
@@ -20,13 +21,40 @@ type Props = {
   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 { isRTL, backgroundColor, backgroundImage } = config;
+  const { backgroundColor, backgroundImage, backgroundImageOverlay, isRTL } =
+    config;
 
   const backgroundImageSource = { uri: backgroundImage };
 
@@ -34,108 +62,87 @@ export function AudioPlayerTVLayout({
     ? "transparent"
     : backgroundColor;
 
-  const mainContainerStyles = platformSelect({
+  const textContainerStyles = platformSelect({
     tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
       justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
+      alignItems: directionStyles(isRTL).justifyContent,
     },
     android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
       justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
+      alignItems: directionStyles(isRTL).justifyContent,
     },
     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,
+      alignItems: directionStyles(isRTL).justifyContent,
     },
   });
 
-  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",
-    },
-  });
+  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 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 backgroundOverlayStyles = React.useMemo(
+    () => ({
+      backgroundColor: backgroundImageOverlay,
+    }),
+    [backgroundImageOverlay]
+  );
 
   if (backgroundImage) {
     return (
@@ -144,7 +151,7 @@ export function AudioPlayerTVLayout({
         style={backgroundImgStyles}
         resizeMode="cover"
       >
-        <View style={mainContainerStyles}>
+        <View style={[mainContainerStyles, backgroundOverlayStyles]}>
           <Artwork srcImage={artwork} config={config} />
           <View style={textContainerStyles}>{children}</View>
         </View>

package/Components/AudioPlayer/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/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/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>