@applicaster/zapp-react-native-ui-components 13.0.0-rc.98 → 13.0.0

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/tv/Artwork.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+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({
+  container: {
+    marginHorizontal: 24,
+  },
+  image: {
+    width: 400,
+    height: 400,
+  },
+});
+
+type Props = {
+  srcImage: string;
+  config?: {
+    titleColor: string;
+    summaryColor: string;
+    backgroundColor: string;
+    backgroundImage: string;
+    isRTL: boolean;
+    artworkBorderRadius: Option<number>;
+  };
+};
+
+export function Artwork({ srcImage, config }: Props) {
+  const borderRadius = toNumberWithDefaultZero(config.artworkBorderRadius);
+
+  return (
+    <View style={styles.container}>
+      <QBImage
+        fadeDuration={0}
+        source={{ uri: srcImage }}
+        style={[styles.image, { borderRadius }]}
+        resizeMode="cover"
+      />
+    </View>
+  );
+}

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,166 @@
+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: {
+          margin: "auto",
+          display: "flex",
+          flexWrap: "wrap",
+          width: "100vw",
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        lg_tv: {
+          margin: "auto",
+          display: "flex",
+          flexWrap: "wrap",
+          width: "100vw",
+          flex: 1,
+          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,5 +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 = {
@@ -18,7 +21,6 @@ type Props = {
 
 const containerStyles = ({ isRTL }) => ({
   width: 600,
-  height: 40,
   justifyContent: directionStyles(isRTL)
     .justifyContent as ViewStyle["justifyContent"],
 });
@@ -31,17 +33,22 @@ const textStyles = ({
 }) => ({
   color: summaryColor,
   opacity: 0.8,
-  fontSize: runTimeFontSize ? Number(runTimeFontSize) : 20,
+  fontSize: toNumberWithDefault(20, runTimeFontSize),
   fontFamily: runTimeFontFamily || null,
   ...directionStyles(isRTL),
 });
 
 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,5 +1,7 @@
 import React from "react";
-import { View, Text, TextStyle } from "react-native";
+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: {
@@ -14,11 +16,12 @@ type Props = {
   summary: string | number;
 };
 
-const containerStyles = {
-  width: 600,
-  height: 80,
-  marginBottom: 30,
-};
+const styles = StyleSheet.create({
+  container: {
+    width: 600,
+    marginBottom: 30,
+  },
+});
 
 const textStyles = ({
   summaryColor,
@@ -26,8 +29,8 @@ const textStyles = ({
   summaryFontFamily,
   summaryFontSize,
 }) => ({
-  textAlign: (isRTL ? "left" : "right") as TextStyle["textAlign"],
-  fontSize: summaryFontSize ? Number(summaryFontSize) : 20,
+  textAlign: (isRTL ? "right" : "left") as TextStyle["textAlign"],
+  fontSize: toNumberWithDefault(20, summaryFontSize),
   color: summaryColor,
   fontWeight: "600" as TextStyle["fontWeight"],
   opacity: 0.8,
@@ -35,9 +38,13 @@ const textStyles = ({
 });
 
 export function Summary({ summary, config }: Props) {
+  if (isNilOrEmpty(summary)) {
+    return null;
+  }
+
   return (
-    <View style={containerStyles}>
-      <Text style={textStyles(config)} numberOfLines={2}>
+    <View style={styles.container}>
+      <Text style={textStyles(config)} numberOfLines={3}>
         {summary}
       </Text>
     </View>

package/Components/AudioPlayer/tv/Title.tsx

@@ -0,0 +1,46 @@
+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: {
+    titleColor: string;
+    summaryColor: string;
+    backgroundColor: string;
+    backgroundImage: string;
+    isRTL: boolean;
+    titleFontFamily: string;
+    titleFontSize: number;
+  };
+  title: string | number;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 600,
+    marginBottom: 12,
+  },
+});
+
+const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
+  textAlign: (isRTL ? "right" : "left") as TextStyle["textAlign"],
+  fontSize: toNumberWithDefault(38, titleFontSize),
+  fontWeight: "600" as TextStyle["fontWeight"],
+  color: titleColor,
+  fontFamily: titleFontFamily || null,
+});
+
+export function Title({ title, config }: Props) {
+  if (isNilOrEmpty(title)) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <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",
@@ -20,7 +20,7 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
         "fontSize": 20,
         "justifyContent": "flex-start",
         "opacity": 0.8,
-        "textAlign": "right",
+        "textAlign": "left",
       }
     }
   >
@@ -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",
@@ -49,7 +49,7 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
         "fontSize": 20,
         "justifyContent": "flex-end",
         "opacity": 0.8,
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

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

@@ -17,10 +17,15 @@ exports[`<Artwork /> renders correctly 1`] = `
       }
     }
     style={
-      {
-        "height": 400,
-        "width": 400,
-      }
+      [
+        {
+          "height": 400,
+          "width": 400,
+        },
+        {
+          "borderRadius": 0,
+        },
+      ]
     }
   />
 </View>