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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/Components/AudioPlayer/Artwork.tsx +17 -12
  2. package/Components/AudioPlayer/AudioPlayer.tsx +2 -0
  3. package/Components/AudioPlayer/AudioPlayerLayout.tsx +5 -5
  4. package/Components/AudioPlayer/__tests__/__snapshots__/artWork.test.js.snap +9 -4
  5. package/package.json +5 -5
package/Components/AudioPlayer/Artwork.tsx CHANGED
@@ -1,5 +1,16 @@
1
1
  import React from "react";
2
- import { View, Image } from "react-native";
2
+ import { View, Image, StyleSheet } from "react-native";
3
+ import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
4
+
5
+ const styles = StyleSheet.create({
6
+ container: {
7
+ marginHorizontal: 24,
8
+ },
9
+ image: {
10
+ width: 400,
11
+ height: 400,
12
+ },
13
+ });
3
14
 
4
15
  type Props = {
5
16
  srcImage: string;
@@ -9,25 +20,19 @@ type Props = {
9
20
  backgroundColor: string;
10
21
  backgroundImage: string;
11
22
  isRTL: boolean;
23
+ artworkBorderRadius: Option<number>;
12
24
  };
13
25
  };
14
26
 
15
- const containerStyles = {
16
- marginHorizontal: 24,
17
- };
18
-
19
- const imageStyles = {
20
- width: 400,
21
- height: 400,
22
- };
27
+ export function Artwork({ srcImage, config }: Props) {
28
+ const borderRadius = toNumberWithDefaultZero(config.artworkBorderRadius);
23
29
 
24
- export function Artwork({ srcImage }: Props) {
25
30
  return (
26
- <View style={containerStyles}>
31
+ <View style={styles.container}>
27
32
  <Image
28
33
  fadeDuration={0}
29
34
  source={{ uri: srcImage }}
30
- style={imageStyles}
35
+ style={[styles.image, { borderRadius }]}
31
36
  resizeMode="cover"
32
37
  />
33
38
  </View>
package/Components/AudioPlayer/AudioPlayer.tsx CHANGED
@@ -72,6 +72,7 @@ export function AudioPlayer(props: Props) {
72
72
  const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
73
73
  const channelIcon = getProp("audio_player_channel_icon");
74
74
  const rtlFlag = getProp("audio_player_rtl");
75
+ const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
75
76
 
76
77
  const audioPlayerBackgroundImageDefaultColor = getProp(
77
78
  "audio_player_background_image_default_color"
@@ -154,6 +155,7 @@ export function AudioPlayer(props: Props) {
154
155
  artworkAspectRatio,
155
156
  channelIcon,
156
157
  audioPlayerBackgroundImageDefaultColor,
158
+ artworkBorderRadius,
157
159
  };
158
160
  }, [getProp]);
159
161
 
package/Components/AudioPlayer/AudioPlayerLayout.tsx CHANGED
@@ -14,6 +14,7 @@ type Props = {
14
14
  backgroundColor: string;
15
15
  backgroundImage: string;
16
16
  isRTL: boolean;
17
+ artworkBorderRadius: Option<number>;
17
18
  };
18
19
  children: React.ReactNode;
19
20
  style: ViewStyle;
@@ -40,17 +41,16 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
40
41
 
41
42
  const mainContainerStyles = platformSelect({
42
43
  tvos: {
43
- width: 1920,
44
- height: 1080,
44
+ width: "100%",
45
+ height: "100%",
45
46
  alignItems: "center",
46
47
  justifyContent: "center",
47
48
  flexDirection: directionStyles(isRTL).flexDirection,
48
49
  backgroundColor: backgroundColorStyle,
49
50
  },
50
51
  android_tv: {
51
- position: "absolute",
52
- width: 1920,
53
- height: 1080,
52
+ width: "100%",
53
+ height: "100%",
54
54
  alignItems: "center",
55
55
  justifyContent: "center",
56
56
  flexDirection: directionStyles(isRTL).flexDirection,
package/Components/AudioPlayer/__tests__/__snapshots__/artWork.test.js.snap CHANGED
@@ -17,10 +17,15 @@ exports[`<Artwork /> renders correctly 1`] = `
17
17
  }
18
18
  }
19
19
  style={
20
- {
21
- "height": 400,
22
- "width": 400,
23
- }
20
+ [
21
+ {
22
+ "height": 400,
23
+ "width": 400,
24
+ },
25
+ {
26
+ "borderRadius": 0,
27
+ },
28
+ ]
24
29
  }
25
30
  />
26
31
  </View>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/zapp-react-native-ui-components",
3
- "version": "13.0.0-rc.132",
3
+ "version": "13.0.0-rc.134",
4
4
  "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -31,10 +31,10 @@
31
31
  "redux-mock-store": "^1.5.3"
32
32
  },
33
33
  "dependencies": {
34
- "@applicaster/applicaster-types": "13.0.0-rc.132",
35
- "@applicaster/zapp-react-native-bridge": "13.0.0-rc.132",
36
- "@applicaster/zapp-react-native-redux": "13.0.0-rc.132",
37
- "@applicaster/zapp-react-native-utils": "13.0.0-rc.132",
34
+ "@applicaster/applicaster-types": "13.0.0-rc.134",
35
+ "@applicaster/zapp-react-native-bridge": "13.0.0-rc.134",
36
+ "@applicaster/zapp-react-native-redux": "13.0.0-rc.134",
37
+ "@applicaster/zapp-react-native-utils": "13.0.0-rc.134",
38
38
  "promise": "^8.3.0",
39
39
  "react-router-native": "^5.1.2",
40
40
  "url": "^0.11.0",