@applicaster/zapp-react-native-ui-components 13.0.0-alpha.2886020207 → 13.0.0-alpha.3003916059

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 (6) hide show
  1. package/Components/AudioPlayer/AudioPlayer.tsx +0 -7
  2. package/Components/AudioPlayer/AudioPlayerLayout.tsx +6 -7
  3. package/Components/AudioPlayer/helpers.tsx +0 -1
  4. package/Components/ModalComponent/BottomSheetModalContent.tsx +30 -34
  5. package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx +1 -0
  6. package/package.json +5 -5
package/Components/AudioPlayer/AudioPlayer.tsx CHANGED
@@ -22,7 +22,6 @@ type Props = {
22
22
  audio_player_title_color?: string;
23
23
  audio_player_summary_color?: string;
24
24
  audio_player_rtl?: boolean;
25
- audio_player_background_image_query?: string;
26
25
  audio_player_background_image_default_color?: string;
27
26
  start_time?: string;
28
27
  end_time?: string;
@@ -33,7 +32,6 @@ type Props = {
33
32
  audio_player_title_color?: string;
34
33
  audio_player_summary_color?: string;
35
34
  audio_player_rtl?: string;
36
- audio_player_background_image_query?: string;
37
35
  audio_player_background_image_default_color?: string;
38
36
  audio_player_background_image?: string;
39
37
  audio_player_artwork_aspect_ratio?: string;
@@ -75,10 +73,6 @@ export function AudioPlayer(props: Props) {
75
73
  const channelIcon = getProp("audio_player_channel_icon");
76
74
  const rtlFlag = getProp("audio_player_rtl");
77
75
 
78
- const audioPlayerBackgroundImageQuery = getProp(
79
- "audio_player_background_image_query"
80
- );
81
-
82
76
  const audioPlayerBackgroundImageDefaultColor = getProp(
83
77
  "audio_player_background_image_default_color"
84
78
  );
@@ -159,7 +153,6 @@ export function AudioPlayer(props: Props) {
159
153
  runTimeFontSize,
160
154
  artworkAspectRatio,
161
155
  channelIcon,
162
- audioPlayerBackgroundImageQuery,
163
156
  audioPlayerBackgroundImageDefaultColor,
164
157
  };
165
158
  }, [getProp]);
package/Components/AudioPlayer/AudioPlayerLayout.tsx CHANGED
@@ -32,7 +32,7 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
32
32
 
33
33
  const { isRTL, backgroundColor, backgroundImage } = config;
34
34
 
35
- const backgroundImg = { uri: backgroundImage };
35
+ const backgroundImageSource = { uri: backgroundImage };
36
36
 
37
37
  const backgroundColorStyle = backgroundImage
38
38
  ? "transparent"
@@ -103,9 +103,8 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
103
103
  justifyContent: "center",
104
104
  },
105
105
  android_tv: {
106
- position: "absolute",
107
- width: 1920,
108
- height: 1080,
106
+ width: "100%",
107
+ height: "100%",
109
108
  alignItems: "center",
110
109
  justifyContent: "center",
111
110
  },
@@ -146,9 +145,9 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
146
145
  },
147
146
  });
148
147
 
149
- const audioPlayerLayoutTV = backgroundImg?.uri ? (
148
+ const audioPlayerLayoutTV = backgroundImageSource?.uri ? (
150
149
  <ImageBackground
151
- source={backgroundImg}
150
+ source={backgroundImageSource}
152
151
  style={backgroundImgStyles}
153
152
  resizeMode="cover"
154
153
  >
@@ -178,7 +177,7 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
178
177
  ]}
179
178
  >
180
179
  <ImageBackground
181
- source={backgroundImg}
180
+ source={backgroundImageSource}
182
181
  style={backgroundImgStyles}
183
182
  resizeMode="cover"
184
183
  >
package/Components/AudioPlayer/helpers.tsx CHANGED
@@ -4,7 +4,6 @@ const defaults = {
4
4
  audio_player_background_color: "black",
5
5
  audio_player_artwork_aspect_ratio: "1:1",
6
6
  audio_player_rtl: false,
7
- audio_player_background_image_query: "",
8
7
  audio_player_background_image_default_color: "",
9
8
  };
10
9
 
package/Components/ModalComponent/BottomSheetModalContent.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback, useEffect, useMemo, useRef } from "react";
2
- import { View, ScrollView, StyleSheet, Platform } from "react-native";
2
+ import { View, ScrollView } from "react-native";
3
3
  import { Button } from "./Button";
4
4
  import { ItemIconProps } from "./Button/ItemIcon";
5
5
  import { ItemProps } from "./Button/Item";
@@ -9,7 +9,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
9
9
 
10
10
  import type { PluginConfiguration } from "./";
11
11
 
12
- import { ModalHeader } from "./Header";
12
+ import { ModalHeader as DefaultModalHeader } from "./Header";
13
13
  import { useSafeAreaInsets } from "react-native-safe-area-context";
14
14
 
15
15
  type ModalComponentProps = {
@@ -22,6 +22,7 @@ type ModalComponentProps = {
22
22
  title?: string;
23
23
  maxHeight?: number;
24
24
  dismiss: () => void;
25
+ headerComponent?: React.ComponentType;
25
26
  buttonComponent?: React.ComponentType;
26
27
  iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
27
28
  itemProps?:
@@ -39,12 +40,6 @@ type ModalComponentProps = {
39
40
  iconPlacement?: "left" | "right";
40
41
  };
41
42
 
42
- const styles = StyleSheet.create({
43
- container: {
44
- maxHeight: "100%",
45
- },
46
- });
47
-
48
43
  export function BottomSheetModalContent(props: ModalComponentProps) {
49
44
  const {
50
45
  items,
@@ -54,9 +49,11 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
54
49
  dismiss,
55
50
  summary,
56
51
  title,
52
+ headerComponent: ModalHeader = DefaultModalHeader,
57
53
  buttonComponent: ButtonComponent = Button,
58
- getSelectedItemIcon = (theme) =>
59
- theme.modal_bottom_sheet_item_selected_icon,
54
+ getSelectedItemIcon = ({
55
+ modal_bottom_sheet_item_selected_icon,
56
+ }: BaseThemePropertiesMobile) => modal_bottom_sheet_item_selected_icon,
60
57
  getDefaultItemIcon = () => null,
61
58
  iconPlacement,
62
59
  } = props;
@@ -96,12 +93,10 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
96
93
 
97
94
  return (
98
95
  <View
99
- style={[
100
- styles.container,
101
- {
102
- paddingTop: paddingTop,
103
- },
104
- ]}
96
+ style={{
97
+ maxHeight: props.maxHeight,
98
+ paddingTop: paddingTop,
99
+ }}
105
100
  >
106
101
  <ModalHeader
107
102
  dismiss={dismiss}
@@ -111,26 +106,27 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
111
106
  />
112
107
  <ScrollView
113
108
  contentContainerStyle={{
114
- paddingBottom:
115
- Platform.OS === "ios" ? paddingBottom + bottomInset : paddingBottom,
109
+ paddingBottom: paddingBottom + bottomInset,
116
110
  }}
117
111
  >
118
- {items.map((item, index) => (
119
- <ButtonComponent
120
- key={index}
121
- configuration={theme}
122
- selectedItem={current_selection}
123
- item={item}
124
- onPress={handlePress}
125
- label={theme[item?.label] ?? item?.label}
126
- iconBaseProps={iconBaseProps}
127
- itemBaseProps={itemBaseProps}
128
- labelBaseProps={labelBaseProps}
129
- selectedItemIcon={getSelectedItemIcon(theme)}
130
- defaultItemIcon={getDefaultItemIcon(theme)}
131
- iconPlacement={iconPlacement}
132
- />
133
- ))}
112
+ {items.map((item, index) =>
113
+ item ? (
114
+ <ButtonComponent
115
+ key={index}
116
+ configuration={theme}
117
+ selectedItem={current_selection}
118
+ item={item}
119
+ onPress={handlePress}
120
+ label={theme[item?.label] ?? item?.label}
121
+ iconBaseProps={iconBaseProps}
122
+ itemBaseProps={itemBaseProps}
123
+ labelBaseProps={labelBaseProps}
124
+ selectedItemIcon={getSelectedItemIcon(theme)}
125
+ defaultItemIcon={getDefaultItemIcon(theme)}
126
+ iconPlacement={iconPlacement}
127
+ />
128
+ ) : null
129
+ )}
134
130
  </ScrollView>
135
131
  </View>
136
132
  );
package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx CHANGED
@@ -17,6 +17,7 @@ export enum PlayerAnimationStateEnum {
17
17
  maximize = "maximize",
18
18
  drag_player = "drag_player",
19
19
  drag_scroll = "drag_scroll",
20
+ appear_as_docked = "appear_as_docked",
20
21
  }
21
22
 
22
23
  export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/zapp-react-native-ui-components",
3
- "version": "13.0.0-alpha.2886020207",
3
+ "version": "13.0.0-alpha.3003916059",
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-alpha.2886020207",
35
- "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.2886020207",
36
- "@applicaster/zapp-react-native-redux": "13.0.0-alpha.2886020207",
37
- "@applicaster/zapp-react-native-utils": "13.0.0-alpha.2886020207",
34
+ "@applicaster/applicaster-types": "13.0.0-alpha.3003916059",
35
+ "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.3003916059",
36
+ "@applicaster/zapp-react-native-redux": "13.0.0-alpha.3003916059",
37
+ "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3003916059",
38
38
  "promise": "^8.3.0",
39
39
  "react-router-native": "^5.1.2",
40
40
  "url": "^0.11.0",