@applicaster/zapp-react-native-ui-components 13.0.0-alpha.7223526501 → 13.0.0-alpha.7429912110
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.
- package/Components/AnimatedInOut/index.tsx +3 -5
- package/Components/AudioPlayer/AudioPlayer.tsx +5 -9
- package/Components/AudioPlayer/AudioPlayerLayout.tsx +8 -9
- package/Components/AudioPlayer/helpers.tsx +1 -2
- package/Components/Cell/Cell.tsx +3 -13
- package/Components/Cell/CellWithFocusable.tsx +21 -15
- package/Components/Cell/CellWrapper.tsx +18 -0
- package/Components/Cell/styles.ts +17 -0
- package/Components/CellRendererResolver/index.ts +2 -1
- package/Components/ErrorScreen/index.tsx +8 -0
- package/Components/FocusableCell/index.tsx +1 -1
- package/Components/FocusableGroup/FocusableTvOS.tsx +3 -6
- package/Components/FocusableGroup/index.tsx +0 -1
- package/Components/GeneralContentScreen/GeneralContentScreen.tsx +3 -0
- package/Components/GeneralContentScreen/utils/useCurationAPI.ts +4 -2
- package/Components/GeneralContentScreen/utils/useEventAlerts.ts +30 -0
- package/Components/HandlePlayable/HandlePlayable.tsx +21 -27
- package/Components/Layout/TV/LayoutBackground.tsx +28 -0
- package/Components/Layout/TV/ScreenContainer.tsx +8 -2
- package/Components/Layout/TV/ScreenLayoutContextProvider.tsx +5 -0
- package/Components/Layout/TV/__tests__/ScreenContainer.test.tsx +2 -1
- package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap +15 -10
- package/Components/Layout/TV/__tests__/index.test.tsx +8 -2
- package/Components/Layout/TV/index.tsx +6 -20
- package/Components/Layout/TV/index.web.tsx +4 -1
- package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx +4 -3
- package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts +11 -7
- package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const.ts +3 -0
- package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/index.ts +6 -6
- package/Components/MasterCell/utils/behaviorProvider.ts +136 -0
- package/Components/MasterCell/utils/index.ts +8 -134
- package/Components/ModalComponent/BottomSheetModalContent.tsx +66 -54
- package/Components/ModalComponent/Button/Item.tsx +6 -5
- package/Components/ModalComponent/Button/assets.ts +1 -1
- package/Components/ModalComponent/Button/index.tsx +45 -62
- package/Components/ModalComponent/Header/index.tsx +9 -8
- package/Components/ModalComponent/utils.ts +55 -7
- package/Components/OfflineHandler/utils/index.ts +1 -1
- package/Components/PlayerContainer/PlayerContainer.tsx +55 -46
- package/Components/PlayerImageBackground/index.tsx +4 -24
- package/Components/River/ComponentsMap/ComponentsMap.tsx +18 -3
- package/Components/River/ComponentsMap/hooks/useLoadingState.ts +3 -3
- package/Components/River/RiverItem.tsx +25 -5
- package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap +7 -1
- package/Components/RouteManager/TestId.tsx +1 -5
- package/Components/RouteManager/__tests__/__snapshots__/routeManager.test.js.snap +0 -1
- package/Components/RouteManager/__tests__/testId.test.js +0 -4
- package/Components/Screen/TV/__tests__/index.web.test.tsx +26 -0
- package/Components/Screen/TV/index.web.tsx +5 -6
- package/Components/Screen/__tests__/Screen.test.tsx +22 -14
- package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap +2 -2
- package/Components/Screen/hooks.ts +3 -6
- package/Components/TopMarginApplicator/TopMarginApplicator.tsx +2 -3
- package/Components/TrackedView/index.tsx +1 -0
- package/Components/Transitioner/AnimationManager.js +15 -15
- package/Components/VideoLive/PlayerLiveImageComponent.tsx +4 -0
- package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap +1 -0
- package/Components/VideoLive/animationUtils.ts +4 -7
- package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx +1 -1
- package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx +35 -19
- package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx +3 -3
- package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx +38 -14
- package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx +11 -3
- package/Components/VideoModal/ModalAnimation/__tests__/getMoveUpValue.test.ts +108 -0
- package/Components/VideoModal/ModalAnimation/const.ts +5 -0
- package/Components/VideoModal/ModalAnimation/index.ts +2 -0
- package/Components/VideoModal/ModalAnimation/utils.ts +30 -0
- package/Components/VideoModal/PlayerDetails.tsx +9 -4
- package/Components/VideoModal/PlayerWrapper.tsx +35 -22
- package/Components/VideoModal/VideoModal.tsx +19 -4
- package/Components/VideoModal/__tests__/__snapshots__/PlayerDetails.test.tsx.snap +2 -40
- package/Components/VideoModal/utils.ts +3 -4
- package/Components/ZappUIComponent/index.tsx +4 -4
- package/Contexts/FocusableGroupContext/withFocusableContext.tsx +4 -10
- package/Contexts/HeaderOffsetContext/index.tsx +4 -6
- package/Contexts/ScreenContext/index.tsx +3 -10
- package/Contexts/ScreenLayoutContext/index.tsx +5 -3
- package/Decorators/RiverResolver/index.tsx +5 -7
- package/Decorators/ZappPipesDataConnector/index.tsx +4 -30
- package/package.json +5 -9
- package/tsconfig.json +2 -3
- package/.babelrc +0 -8
- package/Components/Cell/CellStyles/FallbackCellStyle/index.js +0 -157
- package/Components/Cell/CellStyles/Hero/index.js +0 -111
- package/Components/Cell/CellStyles/ScreenSelector/index.js +0 -68
- package/Components/Cell/CellStyles/cellStylesResolver.ts +0 -19
- package/Components/Cell/CellStyles/colors.js +0 -40
- package/Components/Cell/CellStyles/index.js +0 -15
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
getColor,
|
|
3
|
-
ACTIVE_COLOR,
|
|
4
|
-
BACKGROUND_COLOR,
|
|
5
|
-
MAIN_TEXT_COLOR,
|
|
6
|
-
FOCUSED_TEXT_COLOR,
|
|
7
|
-
} from "../colors";
|
|
8
|
-
|
|
9
|
-
const Image = "Image";
|
|
10
|
-
const View = "View";
|
|
11
|
-
const Text = "Text";
|
|
12
|
-
|
|
13
|
-
const containerStyles = (styles) => ({
|
|
14
|
-
flex: 1,
|
|
15
|
-
flexDirection: "column",
|
|
16
|
-
width: 1280,
|
|
17
|
-
height: 436,
|
|
18
|
-
borderRadius: 4,
|
|
19
|
-
backgroundColor: getColor(BACKGROUND_COLOR, styles),
|
|
20
|
-
marginRight: 48,
|
|
21
|
-
marginBottom: 48,
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
const focusedContainerStyles = (styles) => ({
|
|
25
|
-
...containerStyles(styles),
|
|
26
|
-
backgroundColor: getColor(ACTIVE_COLOR, styles),
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
const imageStyle = {
|
|
30
|
-
width: 1280,
|
|
31
|
-
height: 352,
|
|
32
|
-
borderTopRightRadius: 4,
|
|
33
|
-
borderTopLeftRadius: 4,
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
const titleContainerStyles = {
|
|
37
|
-
width: 1184,
|
|
38
|
-
height: 60,
|
|
39
|
-
marginHorizontal: 24,
|
|
40
|
-
marginTop: 24,
|
|
41
|
-
overflow: "hidden",
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
const titleStyles = (styles) => ({
|
|
45
|
-
fontSize: 26,
|
|
46
|
-
color: getColor(MAIN_TEXT_COLOR, styles),
|
|
47
|
-
fontWeight: "bold",
|
|
48
|
-
fontStyle: "normal",
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
const focusedTitleStyles = (styles) => ({
|
|
52
|
-
...titleStyles(styles),
|
|
53
|
-
color: getColor(FOCUSED_TEXT_COLOR, styles),
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
const viewTree = (state, styles) => [
|
|
57
|
-
{
|
|
58
|
-
type: View,
|
|
59
|
-
style:
|
|
60
|
-
state === "focused"
|
|
61
|
-
? focusedContainerStyles(styles)
|
|
62
|
-
: containerStyles(styles),
|
|
63
|
-
elements: [
|
|
64
|
-
{
|
|
65
|
-
type: Image,
|
|
66
|
-
style: imageStyle,
|
|
67
|
-
data: [
|
|
68
|
-
{
|
|
69
|
-
func: "image_src_from_media_item",
|
|
70
|
-
args: ["thumbnail-small"],
|
|
71
|
-
propName: "uri",
|
|
72
|
-
},
|
|
73
|
-
],
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
type: View,
|
|
77
|
-
style: titleContainerStyles,
|
|
78
|
-
elements: [
|
|
79
|
-
{
|
|
80
|
-
type: Text,
|
|
81
|
-
style:
|
|
82
|
-
state === "focused"
|
|
83
|
-
? focusedTitleStyles(styles)
|
|
84
|
-
: titleStyles(styles),
|
|
85
|
-
data: [
|
|
86
|
-
{
|
|
87
|
-
func: "path",
|
|
88
|
-
args: ["title"],
|
|
89
|
-
propName: "label",
|
|
90
|
-
},
|
|
91
|
-
],
|
|
92
|
-
additionalProps: {
|
|
93
|
-
numberOfLines: 2,
|
|
94
|
-
},
|
|
95
|
-
},
|
|
96
|
-
],
|
|
97
|
-
},
|
|
98
|
-
],
|
|
99
|
-
},
|
|
100
|
-
];
|
|
101
|
-
|
|
102
|
-
export const hero = (styles) => ({
|
|
103
|
-
content_types: {
|
|
104
|
-
default: {
|
|
105
|
-
states: {
|
|
106
|
-
default: viewTree("default", styles),
|
|
107
|
-
focused: viewTree("focused", styles),
|
|
108
|
-
},
|
|
109
|
-
},
|
|
110
|
-
},
|
|
111
|
-
});
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
const viewTree = (state) => [
|
|
2
|
-
{
|
|
3
|
-
type: "View",
|
|
4
|
-
style: {
|
|
5
|
-
flex: 1,
|
|
6
|
-
// aspectRatio: 1.0487804878,
|
|
7
|
-
paddingTop: 14,
|
|
8
|
-
paddingBottom: 14,
|
|
9
|
-
paddingRight: 30,
|
|
10
|
-
},
|
|
11
|
-
elements: [
|
|
12
|
-
{
|
|
13
|
-
type: "View",
|
|
14
|
-
|
|
15
|
-
elements: [
|
|
16
|
-
{
|
|
17
|
-
type: "Text",
|
|
18
|
-
|
|
19
|
-
style: {
|
|
20
|
-
// paddingHorizontal: "15%",
|
|
21
|
-
paddingTop: "2%",
|
|
22
|
-
paddingBottom: "2%",
|
|
23
|
-
fontSize: 26,
|
|
24
|
-
lineHeight: 32,
|
|
25
|
-
color:
|
|
26
|
-
state === "focused" || state === "selected"
|
|
27
|
-
? "rgba(239,239,239,1.0)"
|
|
28
|
-
: "rgba(239,239,239,0.61)",
|
|
29
|
-
fontWeight: "700",
|
|
30
|
-
},
|
|
31
|
-
data: [
|
|
32
|
-
{
|
|
33
|
-
func: "path",
|
|
34
|
-
args: ["title"],
|
|
35
|
-
propName: "label",
|
|
36
|
-
},
|
|
37
|
-
],
|
|
38
|
-
additionalProps: {
|
|
39
|
-
numberOfLines: 2,
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
type: "View",
|
|
44
|
-
style: {
|
|
45
|
-
height: 10,
|
|
46
|
-
alignItems: "center",
|
|
47
|
-
justifyContent: "center",
|
|
48
|
-
borderColor: state === "focused" ? "#FC461B" : "transparent",
|
|
49
|
-
borderBottomWidth: 6,
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
],
|
|
53
|
-
},
|
|
54
|
-
],
|
|
55
|
-
},
|
|
56
|
-
];
|
|
57
|
-
|
|
58
|
-
export const screenSelector = {
|
|
59
|
-
content_types: {
|
|
60
|
-
default: {
|
|
61
|
-
states: {
|
|
62
|
-
default: viewTree("default"),
|
|
63
|
-
focused: viewTree("focused"),
|
|
64
|
-
selected: viewTree("selected"),
|
|
65
|
-
},
|
|
66
|
-
},
|
|
67
|
-
},
|
|
68
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as R from "ramda";
|
|
2
|
-
|
|
3
|
-
import { cellStyles } from "./index";
|
|
4
|
-
|
|
5
|
-
type Props = {
|
|
6
|
-
cellStyle: string | null | undefined;
|
|
7
|
-
componentType: string | null | undefined;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export function cellStylesResolver({ cellStyle, componentType }: Props) {
|
|
11
|
-
const componentCellStyles =
|
|
12
|
-
R.prop(componentType, cellStyles) || cellStyles.default;
|
|
13
|
-
|
|
14
|
-
const result =
|
|
15
|
-
R.prop(cellStyle || "fallbackCellStyle", componentCellStyles) ||
|
|
16
|
-
componentCellStyles.fallbackCellStyle;
|
|
17
|
-
|
|
18
|
-
return result;
|
|
19
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
|
|
2
|
-
import * as R from "ramda";
|
|
3
|
-
|
|
4
|
-
export const ACTIVE_COLOR = "ACTIVE_COLOR";
|
|
5
|
-
|
|
6
|
-
export const BACKGROUND_COLOR = "BACKGROUND_COLOR";
|
|
7
|
-
|
|
8
|
-
export const MAIN_TEXT_COLOR = "MAIN_TEXT_COLOR";
|
|
9
|
-
|
|
10
|
-
export const FOCUSED_TEXT_COLOR = "FOCUSED_TEXT_COLOR";
|
|
11
|
-
|
|
12
|
-
const colorKeyPath = (keyName) => ["tv", keyName, "color"];
|
|
13
|
-
|
|
14
|
-
const COLORS = {
|
|
15
|
-
[ACTIVE_COLOR]: {
|
|
16
|
-
path: colorKeyPath("active"),
|
|
17
|
-
default: "#FC461B",
|
|
18
|
-
},
|
|
19
|
-
[BACKGROUND_COLOR]: {
|
|
20
|
-
path: colorKeyPath("background"),
|
|
21
|
-
default: "#2F2F2F",
|
|
22
|
-
},
|
|
23
|
-
[MAIN_TEXT_COLOR]: {
|
|
24
|
-
path: colorKeyPath("main_text"),
|
|
25
|
-
default: "#EFEFEF",
|
|
26
|
-
},
|
|
27
|
-
[FOCUSED_TEXT_COLOR]: {
|
|
28
|
-
path: colorKeyPath("focused_text_color"),
|
|
29
|
-
default: "#FFFFFF",
|
|
30
|
-
},
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
export const getColor = (name, styles) => {
|
|
34
|
-
const colorKeyPath = R.path([name, "path"], COLORS);
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
fixColorHexCode(R.path(colorKeyPath, styles)) ||
|
|
38
|
-
R.path([name, "default"], COLORS)
|
|
39
|
-
);
|
|
40
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { fallbackCellStyle } from "./FallbackCellStyle";
|
|
2
|
-
import { hero } from "./Hero";
|
|
3
|
-
import { screenSelector } from "./ScreenSelector";
|
|
4
|
-
|
|
5
|
-
export const cellStyles = {
|
|
6
|
-
default: {
|
|
7
|
-
default: fallbackCellStyle,
|
|
8
|
-
},
|
|
9
|
-
hero: {
|
|
10
|
-
default: hero,
|
|
11
|
-
},
|
|
12
|
-
screenSelector: {
|
|
13
|
-
default: screenSelector,
|
|
14
|
-
},
|
|
15
|
-
};
|