@applicaster/zapp-react-native-ui-components 14.0.0-alpha.1661204539 → 14.0.0-alpha.2175196485

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -1,202 +0,0 @@
-import React, { useRef } from "react";
-import { View, ImageBackground, Animated, 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;
-    backgroundColor: string;
-    backgroundImage: string;
-    isRTL: boolean;
-  };
-  children: React.ReactNode;
-  style: ViewStyle;
-};
-
-export function AudioPlayerLayout({ artwork, config, children, style }: 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 };
-
-  const backgroundColorStyle = backgroundImage
-    ? "transparent"
-    : backgroundColor;
-
-  const mainContainerStyles = platformSelect({
-    tvos: {
-      width: 1920,
-      height: 1080,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    android_tv: {
-      position: "absolute",
-      width: 1920,
-      height: 1080,
-      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",
-      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: 1920,
-      height: 1080,
-      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/Title.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { View, Text, TextStyle } from "react-native";
-
-type Props = {
-  config: {
-    titleColor: string;
-    summaryColor: string;
-    backgroundColor: string;
-    backgroundImage: string;
-    isRTL: boolean;
-    titleFontFamily: string;
-    titleFontSize: number;
-  };
-  title: string | number;
-};
-
-const containerStyles = {
-  width: 600,
-  height: 100,
-  marginBottom: 12,
-};
-
-const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
-  textAlign: (isRTL ? "left" : "right") as TextStyle["textAlign"],
-  fontSize: titleFontSize ? Number(titleFontSize) : 38,
-  fontWeight: "600" as TextStyle["fontWeight"],
-  color: titleColor,
-  fontFamily: titleFontFamily || null,
-});
-
-export function Title({ title, config }: Props) {
-  return (
-    <View style={containerStyles}>
-      <Text style={textStyles(config)} numberOfLines={2}>
-        {title}
-      </Text>
-    </View>
-  );
-}

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AudioPlayerLayout /> renders correctly 1`] = `
-<View
-  pointerEvents="none"
-  style={
-    {
-      "backgroundColor": "transparent",
-      "overflow": "hidden",
-    }
-  }
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "opacity": 0,
-        "overflow": "hidden",
-      }
-    }
-  >
-    <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",
-            "overflow": "hidden",
-          }
-        }
-      />
-    </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";

package/Components/VideoModal/hooks/useBackgroundColor.ts

@@ -1,10 +0,0 @@
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useConfiguration } from "../utils";
-
-export const useBackgroundColor = (): string => {
-  const { modal_background_color: modalBackgroundColor } = useConfiguration();
-
-  const theme = useTheme<BaseThemePropertiesMobile>();
-
-  return modalBackgroundColor || theme?.status_background_color;
-};