@applicaster/zapp-react-native-ui-components 14.0.0-alpha.1430213104 → 14.0.0-alpha.2308642114

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 (10) hide show
  1. package/Components/AudioPlayer/AudioPlayerLayout.tsx +4 -5
  2. package/Components/AudioPlayer/Runtime.tsx +2 -1
  3. package/Components/AudioPlayer/Summary.tsx +12 -9
  4. package/Components/AudioPlayer/Title.tsx +12 -9
  5. package/Components/AudioPlayer/__tests__/__snapshots__/Runtime.test.js.snap +2 -2
  6. package/Components/AudioPlayer/__tests__/__snapshots__/summary.test.js.snap +1 -1
  7. package/Components/AudioPlayer/__tests__/__snapshots__/title.test.js.snap +1 -1
  8. package/Components/AudioPlayer/helpers.tsx +2 -2
  9. package/Components/GeneralContentScreen/GeneralContentScreen.tsx +43 -20
  10. package/package.json +5 -5
package/Components/AudioPlayer/AudioPlayerLayout.tsx CHANGED
@@ -41,17 +41,16 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
41
41
 
42
42
  const mainContainerStyles = platformSelect({
43
43
  tvos: {
44
- width: 1920,
45
- height: 1080,
44
+ width: "100%",
45
+ height: "100%",
46
46
  alignItems: "center",
47
47
  justifyContent: "center",
48
48
  flexDirection: directionStyles(isRTL).flexDirection,
49
49
  backgroundColor: backgroundColorStyle,
50
50
  },
51
51
  android_tv: {
52
- position: "absolute",
53
- width: 1920,
54
- height: 1080,
52
+ width: "100%",
53
+ height: "100%",
55
54
  alignItems: "center",
56
55
  justifyContent: "center",
57
56
  flexDirection: directionStyles(isRTL).flexDirection,
package/Components/AudioPlayer/Runtime.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { View, Text, ViewStyle, TextStyle } from "react-native";
3
+ import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
3
4
  import { directionStyles } from "./helpers";
4
5
 
5
6
  type Props = {
@@ -31,7 +32,7 @@ const textStyles = ({
31
32
  }) => ({
32
33
  color: summaryColor,
33
34
  opacity: 0.8,
34
- fontSize: runTimeFontSize ? Number(runTimeFontSize) : 20,
35
+ fontSize: toNumberWithDefault(20, runTimeFontSize),
35
36
  fontFamily: runTimeFontFamily || null,
36
37
  ...directionStyles(isRTL),
37
38
  });
package/Components/AudioPlayer/Summary.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- import { View, Text, TextStyle } from "react-native";
2
+ import { View, Text, TextStyle, StyleSheet } from "react-native";
3
+ import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
3
4
 
4
5
  type Props = {
5
6
  config: {
@@ -14,11 +15,13 @@ type Props = {
14
15
  summary: string | number;
15
16
  };
16
17
 
17
- const containerStyles = {
18
- width: 600,
19
- height: 80,
20
- marginBottom: 30,
21
- };
18
+ const styles = StyleSheet.create({
19
+ container: {
20
+ width: 600,
21
+ height: 80,
22
+ marginBottom: 30,
23
+ },
24
+ });
22
25
 
23
26
  const textStyles = ({
24
27
  summaryColor,
@@ -26,8 +29,8 @@ const textStyles = ({
26
29
  summaryFontFamily,
27
30
  summaryFontSize,
28
31
  }) => ({
29
- textAlign: (isRTL ? "left" : "right") as TextStyle["textAlign"],
30
- fontSize: summaryFontSize ? Number(summaryFontSize) : 20,
32
+ textAlign: (isRTL ? "right" : "left") as TextStyle["textAlign"],
33
+ fontSize: toNumberWithDefault(20, summaryFontSize),
31
34
  color: summaryColor,
32
35
  fontWeight: "600" as TextStyle["fontWeight"],
33
36
  opacity: 0.8,
@@ -36,7 +39,7 @@ const textStyles = ({
36
39
 
37
40
  export function Summary({ summary, config }: Props) {
38
41
  return (
39
- <View style={containerStyles}>
42
+ <View style={styles.container}>
40
43
  <Text style={textStyles(config)} numberOfLines={2}>
41
44
  {summary}
42
45
  </Text>
package/Components/AudioPlayer/Title.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- import { View, Text, TextStyle } from "react-native";
2
+ import { View, Text, TextStyle, StyleSheet } from "react-native";
3
+ import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
3
4
 
4
5
  type Props = {
5
6
  config: {
@@ -14,15 +15,17 @@ type Props = {
14
15
  title: string | number;
15
16
  };
16
17
 
17
- const containerStyles = {
18
- width: 600,
19
- height: 100,
20
- marginBottom: 12,
21
- };
18
+ const styles = StyleSheet.create({
19
+ container: {
20
+ width: 600,
21
+ height: 100,
22
+ marginBottom: 12,
23
+ },
24
+ });
22
25
 
23
26
  const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
24
- textAlign: (isRTL ? "left" : "right") as TextStyle["textAlign"],
25
- fontSize: titleFontSize ? Number(titleFontSize) : 38,
27
+ textAlign: (isRTL ? "right" : "left") as TextStyle["textAlign"],
28
+ fontSize: toNumberWithDefault(38, titleFontSize),
26
29
  fontWeight: "600" as TextStyle["fontWeight"],
27
30
  color: titleColor,
28
31
  fontFamily: titleFontFamily || null,
@@ -30,7 +33,7 @@ const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
30
33
 
31
34
  export function Title({ title, config }: Props) {
32
35
  return (
33
- <View style={containerStyles}>
36
+ <View style={styles.container}>
34
37
  <Text style={textStyles(config)} numberOfLines={2}>
35
38
  {title}
36
39
  </Text>
package/Components/AudioPlayer/__tests__/__snapshots__/Runtime.test.js.snap CHANGED
@@ -20,7 +20,7 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
20
20
  "fontSize": 20,
21
21
  "justifyContent": "flex-start",
22
22
  "opacity": 0.8,
23
- "textAlign": "right",
23
+ "textAlign": "left",
24
24
  }
25
25
  }
26
26
  >
@@ -49,7 +49,7 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
49
49
  "fontSize": 20,
50
50
  "justifyContent": "flex-end",
51
51
  "opacity": 0.8,
52
- "textAlign": "left",
52
+ "textAlign": "right",
53
53
  }
54
54
  }
55
55
  >
package/Components/AudioPlayer/__tests__/__snapshots__/summary.test.js.snap CHANGED
@@ -19,7 +19,7 @@ exports[`<Summary /> renders correctly 1`] = `
19
19
  "fontSize": 20,
20
20
  "fontWeight": "600",
21
21
  "opacity": 0.8,
22
- "textAlign": "left",
22
+ "textAlign": "right",
23
23
  }
24
24
  }
25
25
  >
package/Components/AudioPlayer/__tests__/__snapshots__/title.test.js.snap CHANGED
@@ -18,7 +18,7 @@ exports[`<Title /> renders correctly 1`] = `
18
18
  "fontFamily": null,
19
19
  "fontSize": 38,
20
20
  "fontWeight": "600",
21
- "textAlign": "left",
21
+ "textAlign": "right",
22
22
  }
23
23
  }
24
24
  >
package/Components/AudioPlayer/helpers.tsx CHANGED
@@ -26,14 +26,14 @@ export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
26
26
  const LTR = {
27
27
  flexDirection: "row",
28
28
  justifyContent: "flex-start",
29
- textAlign: "right",
29
+ textAlign: "left",
30
30
  alignItems: "flex-end",
31
31
  };
32
32
 
33
33
  const RTL = {
34
34
  flexDirection: "row-reverse",
35
35
  justifyContent: "flex-end",
36
- textAlign: "left",
36
+ textAlign: "right",
37
37
  alignItems: "flex-start",
38
38
  };
39
39
 
package/Components/GeneralContentScreen/GeneralContentScreen.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useEffect } from "react";
2
+ import { View, StyleSheet } from "react-native";
2
3
  import { ComponentsMap } from "../River/ComponentsMap";
3
4
  import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
4
5
  import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
@@ -12,12 +13,23 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
12
13
  import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
13
14
  import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
14
15
  import { useEventAlerts } from "./utils/useEventAlerts";
16
+ import { useScreenBackgroundColor } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
15
17
 
16
18
  const { log_info } = createLogger({
17
19
  category: "ScreenContainer",
18
20
  subsystem: "General",
19
21
  });
20
22
 
23
+ const styles = StyleSheet.create({
24
+ background: {
25
+ position: "absolute",
26
+ left: 0,
27
+ bottom: 0,
28
+ right: 0,
29
+ top: 0,
30
+ },
31
+ });
32
+
21
33
  export const GeneralContentScreen = ({
22
34
  feed,
23
35
  screenId,
@@ -38,6 +50,12 @@ export const GeneralContentScreen = ({
38
50
  const screenData = useScreenData(screenId);
39
51
 
40
52
  const uiComponents = useCurationAPI(screenData?.ui_components);
53
+ const backgroundColor = useScreenBackgroundColor(screenId);
54
+
55
+ const shouldShowBackground = React.useMemo(
56
+ () => backgroundColor && backgroundColor !== "transparent",
57
+ [backgroundColor]
58
+ );
41
59
 
42
60
  const onCellTapAction = useActions(
43
61
  whenMatchingType(String, cellTapAction) ||
@@ -109,25 +127,30 @@ export const GeneralContentScreen = ({
109
127
  if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
110
128
 
111
129
  return (
112
- <ScreenTrackedViewPositionsContext.Provider>
113
- <CellTapContext.Provider value={contextValue}>
114
- <ComponentsMap
115
- feed={feed}
116
- riverId={screenId}
117
- groupId={groupId || `general-content-screen-${screenId}`}
118
- riverComponents={components || uiComponents}
119
- scrollViewExtraProps={scrollViewExtraProps}
120
- getStaticComponentFeed={getStaticComponentFeed}
121
- extraAnchorPointYOffset={extraAnchorPointYOffset}
122
- isScreenWrappedInContainer={isScreenWrappedInContainer}
123
- parentFocus={parentFocus}
124
- focused={focused}
125
- extraOffset={extraOffset}
126
- containerHeight={containerHeight}
127
- preferredFocus={preferredFocus}
128
- {...componentsMapExtraProps}
129
- />
130
- </CellTapContext.Provider>
131
- </ScreenTrackedViewPositionsContext.Provider>
130
+ <>
131
+ {shouldShowBackground ? (
132
+ <View style={[styles.background, { backgroundColor }]} />
133
+ ) : null}
134
+ <ScreenTrackedViewPositionsContext.Provider>
135
+ <CellTapContext.Provider value={contextValue}>
136
+ <ComponentsMap
137
+ feed={feed}
138
+ riverId={screenId}
139
+ groupId={groupId || `general-content-screen-${screenId}`}
140
+ riverComponents={components || uiComponents}
141
+ scrollViewExtraProps={scrollViewExtraProps}
142
+ getStaticComponentFeed={getStaticComponentFeed}
143
+ extraAnchorPointYOffset={extraAnchorPointYOffset}
144
+ isScreenWrappedInContainer={isScreenWrappedInContainer}
145
+ parentFocus={parentFocus}
146
+ focused={focused}
147
+ extraOffset={extraOffset}
148
+ containerHeight={containerHeight}
149
+ preferredFocus={preferredFocus}
150
+ {...componentsMapExtraProps}
151
+ />
152
+ </CellTapContext.Provider>
153
+ </ScreenTrackedViewPositionsContext.Provider>
154
+ </>
132
155
  );
133
156
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/zapp-react-native-ui-components",
3
- "version": "14.0.0-alpha.1430213104",
3
+ "version": "14.0.0-alpha.2308642114",
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": "14.0.0-alpha.1430213104",
35
- "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.1430213104",
36
- "@applicaster/zapp-react-native-redux": "14.0.0-alpha.1430213104",
37
- "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1430213104",
34
+ "@applicaster/applicaster-types": "14.0.0-alpha.2308642114",
35
+ "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.2308642114",
36
+ "@applicaster/zapp-react-native-redux": "14.0.0-alpha.2308642114",
37
+ "@applicaster/zapp-react-native-utils": "14.0.0-alpha.2308642114",
38
38
  "promise": "^8.3.0",
39
39
  "url": "^0.11.0",
40
40
  "uuid": "^3.3.2"