@applicaster/zapp-react-native-ui-components 13.0.0-alpha.7223526501 → 13.0.0-alpha.7586259907

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 (54) hide show
  1. package/Components/AnimatedInOut/index.tsx +3 -5
  2. package/Components/AudioPlayer/AudioPlayer.tsx +7 -0
  3. package/Components/AudioPlayer/helpers.tsx +1 -0
  4. package/Components/Cell/Cell.tsx +3 -13
  5. package/Components/Cell/CellWithFocusable.tsx +18 -14
  6. package/Components/Cell/CellWrapper.ts +5 -0
  7. package/Components/Cell/styles.ts +17 -0
  8. package/Components/ErrorScreen/index.tsx +8 -0
  9. package/Components/FocusableCell/index.tsx +1 -1
  10. package/Components/FocusableGroup/FocusableTvOS.tsx +3 -6
  11. package/Components/FocusableGroup/index.tsx +0 -1
  12. package/Components/HandlePlayable/HandlePlayable.tsx +21 -27
  13. package/Components/Layout/TV/ScreenContainer.tsx +8 -1
  14. package/Components/Layout/TV/ScreenLayoutContextProvider.tsx +5 -0
  15. package/Components/Layout/TV/__tests__/ScreenContainer.test.tsx +2 -1
  16. package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx +4 -3
  17. package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts +11 -7
  18. package/Components/MasterCell/utils/behaviorProvider.ts +136 -0
  19. package/Components/MasterCell/utils/index.ts +8 -134
  20. package/Components/ModalComponent/Button/assets.ts +1 -1
  21. package/Components/OfflineHandler/utils/index.ts +1 -1
  22. package/Components/PlayerContainer/PlayerContainer.tsx +17 -6
  23. package/Components/PlayerImageBackground/index.tsx +4 -24
  24. package/Components/River/ComponentsMap/ComponentsMap.tsx +4 -0
  25. package/Components/River/ComponentsMap/hooks/useLoadingState.ts +3 -3
  26. package/Components/Screen/TV/index.web.tsx +5 -6
  27. package/Components/Screen/hooks.ts +3 -6
  28. package/Components/TrackedView/index.tsx +1 -0
  29. package/Components/Transitioner/AnimationManager.js +15 -15
  30. package/Components/VideoLive/PlayerLiveImageComponent.tsx +4 -0
  31. package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap +1 -0
  32. package/Components/VideoLive/animationUtils.ts +4 -7
  33. package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx +1 -1
  34. package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx +33 -19
  35. package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx +3 -3
  36. package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx +17 -4
  37. package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx +2 -2
  38. package/Components/VideoModal/PlayerWrapper.tsx +26 -3
  39. package/Components/VideoModal/VideoModal.tsx +19 -4
  40. package/Contexts/FocusableGroupContext/withFocusableContext.tsx +4 -10
  41. package/Contexts/HeaderOffsetContext/index.tsx +4 -6
  42. package/Contexts/ScreenContext/index.tsx +3 -10
  43. package/Contexts/ScreenLayoutContext/index.tsx +5 -3
  44. package/Decorators/RiverResolver/index.tsx +5 -7
  45. package/Decorators/ZappPipesDataConnector/index.tsx +4 -30
  46. package/package.json +5 -9
  47. package/tsconfig.json +2 -3
  48. package/.babelrc +0 -8
  49. package/Components/Cell/CellStyles/FallbackCellStyle/index.js +0 -157
  50. package/Components/Cell/CellStyles/Hero/index.js +0 -111
  51. package/Components/Cell/CellStyles/ScreenSelector/index.js +0 -68
  52. package/Components/Cell/CellStyles/cellStylesResolver.ts +0 -19
  53. package/Components/Cell/CellStyles/colors.js +0 -40
  54. 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
- };