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

package/Components/AudioPlayer/tv/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AudioPlayerTV /> renders correctly 1`] = `
+<View
+  accessibilityIgnoresInvertColors={true}
+>
+  <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
+      style={
+        {
+          "marginHorizontal": 24,
+        }
+      }
+    >
+      <Image
+        fadeDuration={0}
+        resizeMode="cover"
+        source={
+          {
+            "uri": "artwork_url",
+          }
+        }
+        style={
+          [
+            {
+              "height": 400,
+              "width": 400,
+            },
+            {
+              "borderRadius": 0,
+            },
+          ]
+        }
+      />
+    </View>
+    <View>
+      <View
+        style={
+          {
+            "height": 72,
+            "marginBottom": 30,
+            "width": 128,
+          }
+        }
+      >
+        <Image
+          fadeDuration={0}
+          source={
+            {
+              "uri": "https://example.com",
+            }
+          }
+          style={
+            {
+              "height": 72,
+              "width": 128,
+            }
+          }
+        />
+      </View>
+      <View
+        style={
+          {
+            "height": 100,
+            "marginBottom": 12,
+            "width": 600,
+          }
+        }
+      >
+        <Text
+          numberOfLines={2}
+          style={
+            {
+              "color": "white",
+              "fontFamily": null,
+              "fontSize": 38,
+              "fontWeight": "600",
+              "textAlign": "right",
+            }
+          }
+        >
+          tittle
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "height": 80,
+            "marginBottom": 30,
+            "width": 600,
+          }
+        }
+      >
+        <Text
+          numberOfLines={2}
+          style={
+            {
+              "color": "white",
+              "fontFamily": null,
+              "fontSize": 20,
+              "fontWeight": "600",
+              "opacity": 0.8,
+              "textAlign": "right",
+            }
+          }
+        >
+          Summary
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "height": 40,
+            "justifyContent": "flex-end",
+            "width": 600,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "alignItems": "flex-start",
+              "color": "white",
+              "flexDirection": "row-reverse",
+              "fontFamily": null,
+              "fontSize": 20,
+              "justifyContent": "flex-end",
+              "opacity": 0.8,
+              "textAlign": "right",
+            }
+          }
+        >
+          10:10 - 11:11
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

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

@@ -3,7 +3,7 @@
 exports[`<Channel /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 72,
       "marginBottom": 30,
       "width": 128,
@@ -13,12 +13,12 @@ exports[`<Channel /> renders correctly 1`] = `
   <Image
     fadeDuration={0}
     source={
-      Object {
+      {
         "uri": "https://example.com",
       }
     }
     style={
-      Object {
+      {
         "height": 72,
         "width": 128,
       }

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

@@ -3,7 +3,7 @@
 exports[`<Summary /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 80,
       "marginBottom": 30,
       "width": 600,
@@ -13,13 +13,13 @@ exports[`<Summary /> renders correctly 1`] = `
   <Text
     numberOfLines={2}
     style={
-      Object {
+      {
         "color": "white",
         "fontFamily": null,
         "fontSize": 20,
         "fontWeight": "600",
         "opacity": 0.8,
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

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

@@ -3,7 +3,7 @@
 exports[`<Title /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 100,
       "marginBottom": 12,
       "width": 600,
@@ -13,12 +13,12 @@ exports[`<Title /> renders correctly 1`] = `
   <Text
     numberOfLines={2}
     style={
-      Object {
+      {
         "color": "white",
         "fontFamily": null,
         "fontSize": 38,
         "fontWeight": "600",
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
 import { Artwork } from "../Artwork";
 
@@ -16,9 +15,8 @@ const artWorkProps = {
 };
 
 describe("<Artwork />", () => {
-  const wrapper = shallow(<Artwork {...artWorkProps} />);
-
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const { toJSON } = render(<Artwork {...artWorkProps} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/audioPlayer.test.js

@@ -1,8 +1,11 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
-import { AudioPlayer } from "../AudioPlayer";
+import { AudioPlayerTV } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
+  useArtworkImage: jest.fn(() => "artwork_url"),
+}));
 
 const audioPlayerProps = {
   audio_item: {
@@ -46,10 +49,9 @@ const audioPlayerProps = {
   styles: {},
 };
 
-describe("<AudioPlayer />", () => {
-  const wrapper = shallow(<AudioPlayer {...audioPlayerProps} />);
-
+describe("<AudioPlayerTV />", () => {
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const { toJSON } = render(<AudioPlayerTV {...audioPlayerProps} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/channel.test.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
 import { Channel } from "../Channel";
 
@@ -16,9 +15,8 @@ const channelProps = {
 };
 
 describe("<Channel />", () => {
-  const wrapper = shallow(<Channel {...channelProps} />);
-
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const { toJSON } = render(<Channel {...channelProps} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/summary.test.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
 import { Summary } from "../Summary";
 
@@ -16,9 +15,8 @@ const summaryProps = {
 };
 
 describe("<Summary />", () => {
-  const wrapper = shallow(<Summary {...summaryProps} />);
-
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const { toJSON } = render(<Summary {...summaryProps} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/title.test.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
 import { Title } from "../Title";
 
@@ -16,9 +15,8 @@ const titleProps = {
 };
 
 describe("<Title />", () => {
-  const wrapper = shallow(<Title {...titleProps} />);
-
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const { toJSON } = render(<Title {...titleProps} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/{helpers.tsx → tv/helpers.tsx}

@@ -2,10 +2,8 @@ const defaults = {
   audio_player_title_color: "white",
   audio_player_summary_color: "white",
   audio_player_background_color: "black",
-  audio_player_artwork_aspect_ratio: "1:1",
+  audio_player_background_image: undefined,
   audio_player_rtl: false,
-  magic_background: false,
-  audio_player_background_image_query: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
@@ -27,14 +25,14 @@ export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
 const LTR = {
   flexDirection: "row",
   justifyContent: "flex-start",
-  textAlign: "right",
+  textAlign: "left",
   alignItems: "flex-end",
 };
 
 const RTL = {
   flexDirection: "row-reverse",
   justifyContent: "flex-end",
-  textAlign: "left",
+  textAlign: "right",
   alignItems: "flex-start",
 };
 

package/Components/AudioPlayer/{AudioPlayer.tsx → tv/index.tsx}

@@ -1,62 +1,24 @@
 import React, { useCallback, useMemo } from "react";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { AudioPlayerTVLayout } from "./Layout";
 
-import { AudioPlayerLayout } from "./AudioPlayerLayout";
 import { Channel } from "./Channel";
 import { Title } from "./Title";
 import { Summary } from "./Summary";
 import { Runtime } from "./Runtime";
 import { getPropertyFromEntryOrConfig } from "./helpers";
-import { ViewStyle } from "react-native";
-
-type Props = {
-  audio_item: ZappEntry & {
-    extensions?: {
-      audio_player_artwork_aspect_ratio?: string;
-      audio_player_background_image?: string;
-      audio_player_background_color?: string;
-      audio_player_channel_icon?: string;
-      audio_player_title_color?: string;
-      audio_player_summary_color?: string;
-      audio_player_rtl?: boolean;
-      magic_background?: boolean;
-      audio_player_background_image_query?: string;
-      start_time?: string;
-      end_time?: string;
-    };
-  };
-  plugin_configuration: {
-    audio_player_background_color?: string;
-    audio_player_title_color?: string;
-    audio_player_summary_color?: string;
-    audio_player_rtl?: string;
-    magic_background?: string;
-    audio_player_background_image_query?: string;
-    audio_player_background_image?: string;
-    audio_player_artwork_aspect_ratio?: string;
-    lg_tv_audio_player_title_font_family?: string;
-    lg_tv_audio_player_title_font_size?: number;
-    lg_tv_audio_player_summary_font_family?: string;
-    lg_tv_audio_player_summary_font_size?: number;
-    samsung_tv_audio_player_title_font_family?: string;
-    samsung_tv_audio_player_title_font_size?: number;
-    samsung_tv_audio_player_summary_font_family?: string;
-    samsung_tv_audio_player_summary_font_size?: number;
-    tv_os_audio_player_title_font_family?: string;
-    tv_os_audio_player_title_font_size?: number;
-    tv_os_audio_player_summary_font_family?: string;
-    tv_os_audio_player_summary_font_size?: number;
-  };
-  style?: ViewStyle;
-};
-
-export function AudioPlayer(props: Props) {
-  const { audio_item, plugin_configuration, style } = props;
+
+import { Props } from "../types";
+
+export function AudioPlayerTV(props: Props) {
+  const { audio_item, plugin_configuration, style = {} } = props;
   const { extensions, title, summary } = audio_item;
 
+  const artwork = useArtworkImage(audio_item);
+
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
       entry: audio_item,
@@ -66,19 +28,14 @@ export function AudioPlayer(props: Props) {
   );
 
   const config = useMemo(() => {
-    // Checking if we are recieving items from the DSP
+    // Checking if we are receiving items from the DSP
     const titleColor = getProp("audio_player_title_color");
     const summaryColor = getProp("audio_player_summary_color");
     const backgroundColor = getProp("audio_player_background_color");
     const backgroundImage = getProp("audio_player_background_image");
-    const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
-    const magicBackground = getProp("magic_background");
-
-    const audioPlayerBackgroundImageQuery = getProp(
-      "audio_player_background_image_query"
-    );
+    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
@@ -154,23 +111,17 @@ export function AudioPlayer(props: Props) {
       summaryFontSize,
       runTimeFontFamily,
       runTimeFontSize,
-      artworkAspectRatio,
       channelIcon,
-      magicBackground,
-      audioPlayerBackgroundImageQuery,
+      artworkBorderRadius,
     };
   }, [getProp]);
 
-  const artwork = imageSrcFromMediaItem(audio_item, [
-    config?.artworkAspectRatio,
-  ]);
-
   return (
-    <AudioPlayerLayout artwork={artwork} config={config} style={style || {}}>
+    <AudioPlayerTVLayout artwork={artwork} config={config} style={style}>
       <Channel srcImage={config?.channelIcon} config={config} />
       <Title title={title} config={config} />
       <Summary summary={summary} config={config} />
       <Runtime {...extensions} config={config} />
-    </AudioPlayerLayout>
+    </AudioPlayerTVLayout>
   );
 }

package/Components/AudioPlayer/types.ts

@@ -0,0 +1,40 @@
+import { ViewStyle } from "react-native";
+
+export type Props = {
+  audio_item: ZappEntry & {
+    extensions?: {
+      audio_player_artwork_aspect_ratio?: string;
+      audio_player_background_image?: string;
+      audio_player_background_color?: string;
+      audio_player_channel_icon?: string;
+      audio_player_title_color?: string;
+      audio_player_summary_color?: string;
+      audio_player_rtl?: boolean;
+      audio_player_background_image_default_color?: string;
+      start_time?: string;
+      end_time?: string;
+    };
+  };
+  plugin_configuration: {
+    audio_player_background_color?: string;
+    audio_player_title_color?: string;
+    audio_player_summary_color?: string;
+    audio_player_rtl?: string;
+    audio_player_background_image_default_color?: string;
+    audio_player_background_image?: string;
+    audio_player_artwork_aspect_ratio?: string;
+    lg_tv_audio_player_title_font_family?: string;
+    lg_tv_audio_player_title_font_size?: number;
+    lg_tv_audio_player_summary_font_family?: string;
+    lg_tv_audio_player_summary_font_size?: number;
+    samsung_tv_audio_player_title_font_family?: string;
+    samsung_tv_audio_player_title_font_size?: number;
+    samsung_tv_audio_player_summary_font_family?: string;
+    samsung_tv_audio_player_summary_font_size?: number;
+    tv_os_audio_player_title_font_family?: string;
+    tv_os_audio_player_title_font_size?: number;
+    tv_os_audio_player_summary_font_family?: string;
+    tv_os_audio_player_summary_font_size?: number;
+  };
+  style?: ViewStyle;
+};

package/Components/BaseFocusable/index.ios.ts

@@ -25,7 +25,7 @@ type Props = {
 };
 
 export class BaseFocusable<
-  T extends Props = Props
+  T extends Props = Props,
 > extends BaseFocusableInterface<T> {
   constructor(props) {
     super(props);