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

package/Components/AudioPlayer/Artwork.tsx

@@ -1,5 +1,16 @@
 import React from "react";
-import { View, Image } from "react-native";
+import { View, Image, StyleSheet } from "react-native";
+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;
@@ -9,25 +20,19 @@ type Props = {
     backgroundColor: string;
     backgroundImage: string;
     isRTL: boolean;
+    artworkBorderRadius: Option<number>;
   };
 };
 
-const containerStyles = {
-  marginHorizontal: 24,
-};
-
-const imageStyles = {
-  width: 400,
-  height: 400,
-};
+export function Artwork({ srcImage, config }: Props) {
+  const borderRadius = toNumberWithDefaultZero(config.artworkBorderRadius);
 
-export function Artwork({ srcImage }: Props) {
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Image
         fadeDuration={0}
         source={{ uri: srcImage }}
-        style={imageStyles}
+        style={[styles.image, { borderRadius }]}
         resizeMode="cover"
       />
     </View>

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -72,6 +72,7 @@ export function AudioPlayer(props: Props) {
     const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
+    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
     const audioPlayerBackgroundImageDefaultColor = getProp(
       "audio_player_background_image_default_color"
@@ -154,6 +155,7 @@ export function AudioPlayer(props: Props) {
       artworkAspectRatio,
       channelIcon,
       audioPlayerBackgroundImageDefaultColor,
+      artworkBorderRadius,
     };
   }, [getProp]);
 

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -14,6 +14,7 @@ type Props = {
     backgroundColor: string;
     backgroundImage: string;
     isRTL: boolean;
+    artworkBorderRadius: Option<number>;
   };
   children: React.ReactNode;
   style: ViewStyle;

package/Components/AudioPlayer/__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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-rc.132",
+  "version": "13.0.0-rc.133",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.132",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.132",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.132",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.132",
+    "@applicaster/applicaster-types": "13.0.0-rc.133",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.133",
+    "@applicaster/zapp-react-native-redux": "13.0.0-rc.133",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.133",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",