@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 14.0.0-rc.91

package/Components/AnimatedInOut/index.tsx

@@ -4,9 +4,7 @@ import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/uti
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-type AnimatedInterpolatedStyle =
-  | Animated.AnimatedInterpolation
-  | [{ [Key: string]: Animated.AnimatedInterpolation }];
+type AnimatedInterpolatedStyle = any;
 
 type AnimationConfig = {
   duration: number;
@@ -43,32 +41,57 @@ export function AnimatedInOut({
   children,
 }: Props) {
   const [animatedValue] = React.useState(new Animated.Value(visible ? 1 : 0));
-  const [animating, setAnimating] = React.useState(undefined);
+  const animationRef = React.useRef<Animated.CompositeAnimation | null>(null);
+  const delayTimerRef = React.useRef<NodeJS.Timeout | null>(null);
 
   const previousVisible = usePrevious(toBooleanWithDefaultFalse(visible));
 
-  function startAnimation(toValue, config) {
-    if (animating) {
-      animating.reset();
-    }
+  const startAnimation = React.useCallback(
+    (toValue: number, config: AnimationConfig) => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+
+      const { duration, easing, delay = 0, onAnimationEnd = noop } = config;
 
-    const { duration, easing, delay = 0, onAnimationEnd = noop } = config;
+      const runAnimation = () => {
+        animationRef.current = Animated.timing(animatedValue, {
+          duration,
+          toValue,
+          easing,
+          useNativeDriver: true,
+        });
 
-    const compositeAnimation = Animated.timing(animatedValue, {
-      duration,
-      toValue,
-      easing,
-      delay,
-      useNativeDriver: true,
-    }).start(() => {
-      setAnimating(undefined);
-      onAnimationEnd();
-    });
+        animationRef.current.start(({ finished }) => {
+          if (finished) {
+            animationRef.current = null;
+            onAnimationEnd();
+          }
+        });
+      };
 
-    setAnimating(compositeAnimation);
-  }
+      if (delay > 0) {
+        delayTimerRef.current = setTimeout(runAnimation, delay);
+      } else {
+        runAnimation();
+      }
+    },
+    [animatedValue]
+  );
 
   React.useEffect(() => {
+    if (previousVisible === undefined) {
+      animatedValue.setValue(visible ? 1 : 0);
+
+      return;
+    }
+
     if (!previousVisible && visible) {
       startAnimation(1.0, getAnimation(animationConfig, "in"));
     }
@@ -76,7 +99,29 @@ export function AnimatedInOut({
     if (previousVisible && !visible) {
       startAnimation(0.0, getAnimation(animationConfig, "out"));
     }
-  }, [visible, previousVisible]);
+  }, [
+    visible,
+    previousVisible,
+    animatedValue,
+    startAnimation,
+    animationConfig,
+  ]);
+
+  React.useEffect(() => {
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+
+      animatedValue.stopAnimation();
+    };
+  }, [animatedValue]);
 
   const styles = visible
     ? getAnimation(animationConfig, "in").styles
@@ -84,7 +129,7 @@ export function AnimatedInOut({
 
   return (
     <Animated.View
-      renderToHardwareTextureAndroid={animating}
+      renderToHardwareTextureAndroid={!!animationRef.current}
       style={[styles(animatedValue), staticStyles]}
     >
       {children}

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: ViewStyle = 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",