@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5621117258 → 14.0.0-alpha.6242515303

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -1,202 +0,0 @@
-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/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

@@ -1,72 +0,0 @@
-// 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

@@ -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";