@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.
Files changed (88) hide show
  1. package/Components/AnimatedInOut/index.tsx +3 -5
  2. package/Components/AudioPlayer/AudioPlayer.tsx +5 -9
  3. package/Components/AudioPlayer/AudioPlayerLayout.tsx +8 -9
  4. package/Components/AudioPlayer/helpers.tsx +1 -2
  5. package/Components/Cell/Cell.tsx +3 -13
  6. package/Components/Cell/CellWithFocusable.tsx +21 -15
  7. package/Components/Cell/CellWrapper.tsx +18 -0
  8. package/Components/Cell/styles.ts +17 -0
  9. package/Components/CellRendererResolver/index.ts +2 -1
  10. package/Components/ErrorScreen/index.tsx +8 -0
  11. package/Components/FocusableCell/index.tsx +1 -1
  12. package/Components/FocusableGroup/FocusableTvOS.tsx +3 -6
  13. package/Components/FocusableGroup/index.tsx +0 -1
  14. package/Components/GeneralContentScreen/GeneralContentScreen.tsx +3 -0
  15. package/Components/GeneralContentScreen/utils/useCurationAPI.ts +4 -2
  16. package/Components/GeneralContentScreen/utils/useEventAlerts.ts +30 -0
  17. package/Components/HandlePlayable/HandlePlayable.tsx +21 -27
  18. package/Components/Layout/TV/LayoutBackground.tsx +28 -0
  19. package/Components/Layout/TV/ScreenContainer.tsx +8 -2
  20. package/Components/Layout/TV/ScreenLayoutContextProvider.tsx +5 -0
  21. package/Components/Layout/TV/__tests__/ScreenContainer.test.tsx +2 -1
  22. package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap +15 -10
  23. package/Components/Layout/TV/__tests__/index.test.tsx +8 -2
  24. package/Components/Layout/TV/index.tsx +6 -20
  25. package/Components/Layout/TV/index.web.tsx +4 -1
  26. package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx +4 -3
  27. package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts +11 -7
  28. package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const.ts +3 -0
  29. package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/index.ts +6 -6
  30. package/Components/MasterCell/utils/behaviorProvider.ts +136 -0
  31. package/Components/MasterCell/utils/index.ts +8 -134
  32. package/Components/ModalComponent/BottomSheetModalContent.tsx +66 -54
  33. package/Components/ModalComponent/Button/Item.tsx +6 -5
  34. package/Components/ModalComponent/Button/assets.ts +1 -1
  35. package/Components/ModalComponent/Button/index.tsx +45 -62
  36. package/Components/ModalComponent/Header/index.tsx +9 -8
  37. package/Components/ModalComponent/utils.ts +55 -7
  38. package/Components/OfflineHandler/utils/index.ts +1 -1
  39. package/Components/PlayerContainer/PlayerContainer.tsx +55 -46
  40. package/Components/PlayerImageBackground/index.tsx +4 -24
  41. package/Components/River/ComponentsMap/ComponentsMap.tsx +18 -3
  42. package/Components/River/ComponentsMap/hooks/useLoadingState.ts +3 -3
  43. package/Components/River/RiverItem.tsx +25 -5
  44. package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap +7 -1
  45. package/Components/RouteManager/TestId.tsx +1 -5
  46. package/Components/RouteManager/__tests__/__snapshots__/routeManager.test.js.snap +0 -1
  47. package/Components/RouteManager/__tests__/testId.test.js +0 -4
  48. package/Components/Screen/TV/__tests__/index.web.test.tsx +26 -0
  49. package/Components/Screen/TV/index.web.tsx +5 -6
  50. package/Components/Screen/__tests__/Screen.test.tsx +22 -14
  51. package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap +2 -2
  52. package/Components/Screen/hooks.ts +3 -6
  53. package/Components/TopMarginApplicator/TopMarginApplicator.tsx +2 -3
  54. package/Components/TrackedView/index.tsx +1 -0
  55. package/Components/Transitioner/AnimationManager.js +15 -15
  56. package/Components/VideoLive/PlayerLiveImageComponent.tsx +4 -0
  57. package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap +1 -0
  58. package/Components/VideoLive/animationUtils.ts +4 -7
  59. package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx +1 -1
  60. package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx +35 -19
  61. package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx +3 -3
  62. package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx +38 -14
  63. package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx +11 -3
  64. package/Components/VideoModal/ModalAnimation/__tests__/getMoveUpValue.test.ts +108 -0
  65. package/Components/VideoModal/ModalAnimation/const.ts +5 -0
  66. package/Components/VideoModal/ModalAnimation/index.ts +2 -0
  67. package/Components/VideoModal/ModalAnimation/utils.ts +30 -0
  68. package/Components/VideoModal/PlayerDetails.tsx +9 -4
  69. package/Components/VideoModal/PlayerWrapper.tsx +35 -22
  70. package/Components/VideoModal/VideoModal.tsx +19 -4
  71. package/Components/VideoModal/__tests__/__snapshots__/PlayerDetails.test.tsx.snap +2 -40
  72. package/Components/VideoModal/utils.ts +3 -4
  73. package/Components/ZappUIComponent/index.tsx +4 -4
  74. package/Contexts/FocusableGroupContext/withFocusableContext.tsx +4 -10
  75. package/Contexts/HeaderOffsetContext/index.tsx +4 -6
  76. package/Contexts/ScreenContext/index.tsx +3 -10
  77. package/Contexts/ScreenLayoutContext/index.tsx +5 -3
  78. package/Decorators/RiverResolver/index.tsx +5 -7
  79. package/Decorators/ZappPipesDataConnector/index.tsx +4 -30
  80. package/package.json +5 -9
  81. package/tsconfig.json +2 -3
  82. package/.babelrc +0 -8
  83. package/Components/Cell/CellStyles/FallbackCellStyle/index.js +0 -157
  84. package/Components/Cell/CellStyles/Hero/index.js +0 -111
  85. package/Components/Cell/CellStyles/ScreenSelector/index.js +0 -68
  86. package/Components/Cell/CellStyles/cellStylesResolver.ts +0 -19
  87. package/Components/Cell/CellStyles/colors.js +0 -40
  88. 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
- };