@applicaster/zapp-react-native-utils 12.0.0-alpha.9262886003 → 12.0.0-alpha.9433151351
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/appUtils/HooksManager/index.js +3 -1
- package/appUtils/playerManager/conts.ts +5 -0
- package/appUtils/playerManager/player.ts +34 -0
- package/appUtils/playerManager/playerFactory.ts +12 -10
- package/appUtils/playerManager/playerNative.ts +4 -0
- package/cellUtils/index.ts +2 -2
- package/manifestUtils/index.js +5 -1
- package/manifestUtils/secondaryImage/index.js +18 -15
- package/package.json +2 -2
- package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts +2 -0
- package/reactHooks/autoscrolling/__tests__/{useTrackedView.test.ts → useTrackedView.test.tsx} +18 -1
- package/reactHooks/layout/__tests__/{index.test.js → index.test.tsx} +44 -29
- package/reactHooks/layout/getDeviceInfo/index.ts +4 -2
- package/reactHooks/layout/types/index.ts +2 -0
- package/reactHooks/layout/useDimensions/useDimensions.ts +13 -7
- package/reactHooks/navigation/__mocks__/index.ts +2 -0
- package/reactHooks/navigation/index.ts +65 -20
- package/reactHooks/resolvers/__tests__/useCellResolver.test.tsx +3 -1
- package/reactHooks/screen/useTargetScreenData.ts +7 -0
|
@@ -270,7 +270,9 @@ export function HooksManager({
|
|
|
270
270
|
});
|
|
271
271
|
|
|
272
272
|
const isHookInHomescreen = payload?.home;
|
|
273
|
-
|
|
273
|
+
|
|
274
|
+
const isHookFlowBlocker =
|
|
275
|
+
hookPlugin?.module?.isFlowBlocker?.() ?? false;
|
|
274
276
|
|
|
275
277
|
// TODO: We technically need to also support the case where there is more than one hook in the stack,
|
|
276
278
|
// if needed we could add differentiation explicit user cancellation (when we should go to background) and other types of cancellation
|
|
@@ -20,6 +20,11 @@ export enum SharedPlayerCallBacksKeys {
|
|
|
20
20
|
OnPlayerMute = "onPlayerMute",
|
|
21
21
|
OnPlayerUnmute = "onPlayerUnmute",
|
|
22
22
|
|
|
23
|
+
onVideoFullscreenPlayerDidDismiss = "onVideoFullscreenPlayerDidDismiss",
|
|
24
|
+
onVideoFullscreenPlayerDidPresent = "onVideoFullscreenPlayerDidPresent",
|
|
25
|
+
onVideoFullscreenPlayerWillDismiss = "onVideoFullscreenPlayerWillDismiss",
|
|
26
|
+
onVideoFullscreenPlayerWillPresent = "onVideoFullscreenPlayerWillPresent",
|
|
27
|
+
|
|
23
28
|
OnAdBegin = "onAdBegin",
|
|
24
29
|
OnAdBreakBegin = "onAdBreakBegin",
|
|
25
30
|
OnAdBreakEnd = "onAdBreakEnd",
|
|
@@ -414,6 +414,32 @@ export class Player {
|
|
|
414
414
|
});
|
|
415
415
|
};
|
|
416
416
|
|
|
417
|
+
onVideoFullscreenPlayerWillDismiss = () => {
|
|
418
|
+
this.invokeListenersUpdate({
|
|
419
|
+
callbackName:
|
|
420
|
+
SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillDismiss,
|
|
421
|
+
});
|
|
422
|
+
};
|
|
423
|
+
|
|
424
|
+
onVideoFullscreenPlayerDidDismiss = () => {
|
|
425
|
+
this.invokeListenersUpdate({
|
|
426
|
+
callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidDismiss,
|
|
427
|
+
});
|
|
428
|
+
};
|
|
429
|
+
|
|
430
|
+
onVideoFullscreenPlayerWillPresent = () => {
|
|
431
|
+
this.invokeListenersUpdate({
|
|
432
|
+
callbackName:
|
|
433
|
+
SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillPresent,
|
|
434
|
+
});
|
|
435
|
+
};
|
|
436
|
+
|
|
437
|
+
onVideoFullscreenPlayerDidPresent = () => {
|
|
438
|
+
this.invokeListenersUpdate({
|
|
439
|
+
callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidPresent,
|
|
440
|
+
});
|
|
441
|
+
};
|
|
442
|
+
|
|
417
443
|
public invokeListenersUpdate = ({
|
|
418
444
|
callbackName,
|
|
419
445
|
event = {},
|
|
@@ -634,6 +660,12 @@ export class Player {
|
|
|
634
660
|
onBufferStart: this.onBufferStart,
|
|
635
661
|
onBufferComplete: this.onBufferComplete,
|
|
636
662
|
|
|
663
|
+
onPlayerClose: this.onPlayerClose,
|
|
664
|
+
onVideoFullscreenPlayerWillPresent: this.onVideoFullscreenPlayerWillPresent,
|
|
665
|
+
onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
|
|
666
|
+
onVideoFullscreenPlayerWillDismiss: this.onVideoFullscreenPlayerWillDismiss,
|
|
667
|
+
onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
|
|
668
|
+
|
|
637
669
|
// Ads Callbacks:
|
|
638
670
|
onAdBegin: this.onAdBegin,
|
|
639
671
|
onAdBreakBegin: this.onAdBreakBegin,
|
|
@@ -693,4 +725,6 @@ export class Player {
|
|
|
693
725
|
isFullScreenSupported(): boolean {
|
|
694
726
|
return true;
|
|
695
727
|
}
|
|
728
|
+
|
|
729
|
+
public supportsNativeControls = (): boolean => false;
|
|
696
730
|
}
|
|
@@ -9,21 +9,23 @@ type PlayerFactoryItem = {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
type PlayerFactoryProps = {
|
|
12
|
-
player: any
|
|
13
|
-
playerId: string
|
|
14
|
-
autoplay: boolean
|
|
15
|
-
entry: ZappEntry
|
|
16
|
-
muted: boolean
|
|
17
|
-
playerPluginId: string
|
|
18
|
-
screenConfig: Record<string, any
|
|
19
|
-
playerRole: PlayerRole
|
|
20
|
-
}
|
|
12
|
+
player: any;
|
|
13
|
+
playerId: string;
|
|
14
|
+
autoplay: boolean;
|
|
15
|
+
entry: ZappEntry;
|
|
16
|
+
muted: boolean;
|
|
17
|
+
playerPluginId: string;
|
|
18
|
+
screenConfig: Record<string, any>;
|
|
19
|
+
playerRole: PlayerRole;
|
|
20
|
+
};
|
|
21
21
|
|
|
22
22
|
interface PlayerConstructor {
|
|
23
23
|
new (params: any): Player;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
export const playerFactory = (
|
|
26
|
+
export const playerFactory = (
|
|
27
|
+
config: PlayerFactoryProps
|
|
28
|
+
): PlayerFactoryItem | null => {
|
|
27
29
|
const IDENTIFIER = config?.playerPluginId;
|
|
28
30
|
|
|
29
31
|
if (!IDENTIFIER) {
|
|
@@ -5,6 +5,7 @@ import { Player } from "./player";
|
|
|
5
5
|
import { findNodeHandle, NativeModules } from "react-native";
|
|
6
6
|
import { isApplePlatform } from "../../reactUtils";
|
|
7
7
|
import { PlayerRole } from "./conts";
|
|
8
|
+
import { toBooleanWithDefaultFalse } from "../../booleanUtils";
|
|
8
9
|
|
|
9
10
|
const RNPlayerManager = {
|
|
10
11
|
QuickBrickPlayerPlugin: isApplePlatform()
|
|
@@ -291,4 +292,7 @@ export class PlayerNative extends Player {
|
|
|
291
292
|
|
|
292
293
|
return !(isFullScreenAudioPlayer && this.isAudioItem());
|
|
293
294
|
};
|
|
295
|
+
|
|
296
|
+
supportsNativeControls = (): boolean =>
|
|
297
|
+
toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
|
|
294
298
|
}
|
package/cellUtils/index.ts
CHANGED
|
@@ -182,8 +182,8 @@ export const getHeight = (width, aspectRatio) => {
|
|
|
182
182
|
* @returns {string} duration
|
|
183
183
|
*/
|
|
184
184
|
|
|
185
|
-
export const getDurationInMinutes = (seconds
|
|
186
|
-
if (seconds
|
|
185
|
+
export const getDurationInMinutes = (seconds?: number): string => {
|
|
186
|
+
if (!seconds) return "00:00";
|
|
187
187
|
const minutes = Math.floor(Number(seconds) / 60);
|
|
188
188
|
const secondsReminder = Math.floor(Number(seconds)) % 60;
|
|
189
189
|
const pad = (num: number): string => `${num < 10 ? "0" : ""}${num}`;
|
package/manifestUtils/index.js
CHANGED
|
@@ -22,7 +22,11 @@ const {
|
|
|
22
22
|
const { buttonKey } = require("./buttons");
|
|
23
23
|
const { tvBadges } = require("./tvBadges");
|
|
24
24
|
const { mobileProgressBar, tvProgressBar } = require("./progressBar");
|
|
25
|
-
|
|
25
|
+
|
|
26
|
+
const {
|
|
27
|
+
secondaryImage,
|
|
28
|
+
getUpdatedSecondaryImageKeys,
|
|
29
|
+
} = require("./secondaryImage");
|
|
26
30
|
|
|
27
31
|
module.exports = {
|
|
28
32
|
fontKey,
|
|
@@ -132,29 +132,32 @@ function secondaryImage({
|
|
|
132
132
|
|
|
133
133
|
const POSITION_OVER_IMAGE = toSnakeCase(position_over_image);
|
|
134
134
|
|
|
135
|
-
const getUpdatedSecondaryImageKeys = (secondaryImageManifest) =>
|
|
136
|
-
|
|
135
|
+
const getUpdatedSecondaryImageKeys = (secondaryImageManifest) =>
|
|
136
|
+
secondaryImageManifest.fields.reduce((acc, item) => {
|
|
137
|
+
const key = item.key;
|
|
137
138
|
|
|
138
|
-
|
|
139
|
+
const conditionalFields = (item.conditional_fields || []).map(
|
|
140
|
+
(field) => field.key
|
|
141
|
+
);
|
|
139
142
|
|
|
140
|
-
|
|
141
|
-
|
|
143
|
+
const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
|
|
144
|
+
const updatedKey = field.replace("secondary_image_", "nested_image_");
|
|
145
|
+
|
|
146
|
+
return {
|
|
147
|
+
...acc,
|
|
148
|
+
[updatedKey]: field,
|
|
149
|
+
};
|
|
150
|
+
}, {});
|
|
151
|
+
|
|
152
|
+
const updatedKey = key.replace("secondary_image_", "nested_image_");
|
|
142
153
|
|
|
143
154
|
return {
|
|
144
155
|
...acc,
|
|
145
|
-
|
|
156
|
+
...updatedConditionalFields,
|
|
157
|
+
[updatedKey]: key,
|
|
146
158
|
};
|
|
147
159
|
}, {});
|
|
148
160
|
|
|
149
|
-
const updatedKey = key.replace("secondary_image_", "nested_image_");
|
|
150
|
-
|
|
151
|
-
return {
|
|
152
|
-
...acc,
|
|
153
|
-
...updatedConditionalFields,
|
|
154
|
-
[updatedKey]: key,
|
|
155
|
-
};
|
|
156
|
-
}, {});
|
|
157
|
-
|
|
158
161
|
module.exports = {
|
|
159
162
|
secondaryImage,
|
|
160
163
|
getUpdatedSecondaryImageKeys,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-utils",
|
|
3
|
-
"version": "12.0.0-alpha.
|
|
3
|
+
"version": "12.0.0-alpha.9433151351",
|
|
4
4
|
"description": "Applicaster Zapp React Native utilities package",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"homepage": "https://github.com/applicaster/quickbrick#readme",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@applicaster/applicaster-types": "12.0.0-alpha.
|
|
31
|
+
"@applicaster/applicaster-types": "12.0.0-alpha.9433151351",
|
|
32
32
|
"buffer": "^5.2.1",
|
|
33
33
|
"camelize": "^1.0.0",
|
|
34
34
|
"create-react-context": "^0.2.3",
|
package/reactHooks/autoscrolling/__tests__/{useTrackedView.test.ts → useTrackedView.test.tsx}
RENAMED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
1
3
|
import { act, renderHook } from "@testing-library/react-hooks";
|
|
4
|
+
import { Provider } from "react-redux";
|
|
5
|
+
import configureStore from "redux-mock-store";
|
|
2
6
|
|
|
3
7
|
const mockUpdateComponentsPositions = jest.fn();
|
|
4
8
|
|
|
@@ -17,11 +21,24 @@ jest.mock(
|
|
|
17
21
|
|
|
18
22
|
jest.useFakeTimers();
|
|
19
23
|
|
|
24
|
+
jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
|
|
25
|
+
|
|
26
|
+
const mockStore = configureStore();
|
|
27
|
+
|
|
28
|
+
const store = mockStore({ appData: {} });
|
|
29
|
+
|
|
30
|
+
const Wrapper = ({ children }: { children: React.ReactChild }) => (
|
|
31
|
+
/* @ts-ignore */
|
|
32
|
+
<Provider store={store}>{children}</Provider>
|
|
33
|
+
);
|
|
34
|
+
|
|
20
35
|
const { useTrackedView } = require("../useTrackedView");
|
|
21
36
|
|
|
22
37
|
describe("useTrackCurrentAutoScrollingElement", () => {
|
|
23
38
|
it("should update position for selected component", async () => {
|
|
24
|
-
const { result } = renderHook(() => useTrackedView("123")
|
|
39
|
+
const { result } = renderHook(() => useTrackedView("123"), {
|
|
40
|
+
wrapper: Wrapper,
|
|
41
|
+
});
|
|
25
42
|
|
|
26
43
|
// Fast-forward until all timers have been executed
|
|
27
44
|
jest.advanceTimersByTime(3000);
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
1
3
|
import { cleanup, renderHook } from "@testing-library/react-hooks";
|
|
4
|
+
import { Provider } from "react-redux";
|
|
5
|
+
import configureStore from "redux-mock-store";
|
|
2
6
|
|
|
3
7
|
import * as ReactNative from "react-native";
|
|
4
8
|
|
|
@@ -44,22 +48,47 @@ jest.mock("../../../reactUtils", () => ({
|
|
|
44
48
|
|
|
45
49
|
jest.mock("../../navigation", () => ({
|
|
46
50
|
useNavigation: () => null,
|
|
51
|
+
useIsScreenActive: () => true,
|
|
47
52
|
}));
|
|
48
53
|
|
|
49
54
|
const { Dimensions } = require("react-native");
|
|
50
|
-
const { useDimensions } = require("
|
|
55
|
+
const { useDimensions } = require("..");
|
|
56
|
+
|
|
57
|
+
const mockStore = configureStore();
|
|
58
|
+
|
|
59
|
+
const getWrapper = () => {
|
|
60
|
+
const store = mockStore({ appData: {} });
|
|
61
|
+
|
|
62
|
+
const Wrapper = ({ children }: { children: React.ReactChild }) => (
|
|
63
|
+
/* @ts-ignore */
|
|
64
|
+
<Provider store={store}>{children}</Provider>
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
return Wrapper;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
const testHook = (context, params?) => {
|
|
71
|
+
const wrapper = getWrapper();
|
|
72
|
+
|
|
73
|
+
const {
|
|
74
|
+
result,
|
|
75
|
+
result: { current: dimensions },
|
|
76
|
+
} = renderHook(() => useDimensions(context, params), {
|
|
77
|
+
wrapper,
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
return { result, dimensions };
|
|
81
|
+
};
|
|
51
82
|
|
|
52
83
|
describe("useDimensions", () => {
|
|
53
84
|
it("renders", () => {
|
|
54
|
-
const { result } =
|
|
55
|
-
useDimensions("window", { fullDimensions: true })
|
|
56
|
-
);
|
|
85
|
+
const { result } = testHook("window", { fullDimensions: true });
|
|
57
86
|
|
|
58
87
|
expect(result).toBeDefined();
|
|
59
88
|
});
|
|
60
89
|
|
|
61
90
|
it("sets event listener", () => {
|
|
62
|
-
|
|
91
|
+
testHook("window", { fullDimensions: true });
|
|
63
92
|
|
|
64
93
|
expect(Dimensions.addEventListener).toBeCalledWith(
|
|
65
94
|
"change",
|
|
@@ -68,16 +97,14 @@ describe("useDimensions", () => {
|
|
|
68
97
|
});
|
|
69
98
|
|
|
70
99
|
it("removes event listener", () => {
|
|
71
|
-
|
|
100
|
+
testHook("window", { fullDimensions: true });
|
|
72
101
|
cleanup();
|
|
73
102
|
|
|
74
103
|
expect(mockRemoveFn).toBeCalled();
|
|
75
104
|
});
|
|
76
105
|
|
|
77
106
|
it("Returns full dimensions object", () => {
|
|
78
|
-
const {
|
|
79
|
-
result: { current: dimensions },
|
|
80
|
-
} = renderHook(() => useDimensions("window", { fullDimensions: true }));
|
|
107
|
+
const { dimensions } = testHook("window", { fullDimensions: true });
|
|
81
108
|
|
|
82
109
|
expect(dimensions).toHaveProperty("height");
|
|
83
110
|
expect(dimensions).toHaveProperty("width");
|
|
@@ -86,20 +113,17 @@ describe("useDimensions", () => {
|
|
|
86
113
|
});
|
|
87
114
|
|
|
88
115
|
it("Returns shorthand dimensions object", () => {
|
|
89
|
-
const {
|
|
90
|
-
result: { current: dimensions },
|
|
91
|
-
} = renderHook(() => useDimensions("window"));
|
|
116
|
+
const { dimensions } = testHook("window");
|
|
92
117
|
|
|
93
118
|
expect(dimensions).toHaveProperty("height");
|
|
94
119
|
expect(dimensions).toHaveProperty("width");
|
|
95
120
|
});
|
|
96
121
|
|
|
97
122
|
it("Returns the device info object", () => {
|
|
98
|
-
const {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
);
|
|
123
|
+
const { dimensions } = testHook("window", {
|
|
124
|
+
fullDimensions: true,
|
|
125
|
+
deviceInfo: true,
|
|
126
|
+
});
|
|
103
127
|
|
|
104
128
|
expect(dimensions).toHaveProperty("height");
|
|
105
129
|
expect(dimensions).toHaveProperty("width");
|
|
@@ -112,10 +136,7 @@ describe("useDimensions", () => {
|
|
|
112
136
|
it("applies the scale on TV, and screen context", () => {
|
|
113
137
|
tv_flag = true;
|
|
114
138
|
const { screen } = mocked_return_value(tv_flag);
|
|
115
|
-
|
|
116
|
-
const {
|
|
117
|
-
result: { current: dimensions },
|
|
118
|
-
} = renderHook(() => useDimensions("screen"));
|
|
139
|
+
const { dimensions } = testHook("screen");
|
|
119
140
|
|
|
120
141
|
expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
|
|
121
142
|
expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
|
|
@@ -127,10 +148,7 @@ describe("useDimensions", () => {
|
|
|
127
148
|
it("doesn't apply the scale on mobile with screen context", () => {
|
|
128
149
|
tv_flag = false;
|
|
129
150
|
const { screen } = mocked_return_value(tv_flag);
|
|
130
|
-
|
|
131
|
-
const {
|
|
132
|
-
result: { current: dimensions },
|
|
133
|
-
} = renderHook(() => useDimensions("screen"));
|
|
151
|
+
const { dimensions } = testHook("screen");
|
|
134
152
|
|
|
135
153
|
expect(dimensions).toHaveProperty("height", screen.height);
|
|
136
154
|
expect(dimensions).toHaveProperty("width", screen.width);
|
|
@@ -140,10 +158,7 @@ describe("useDimensions", () => {
|
|
|
140
158
|
it("doesn't apply the scale on TV with window context", () => {
|
|
141
159
|
tv_flag = true;
|
|
142
160
|
const { window } = mocked_return_value(tv_flag);
|
|
143
|
-
|
|
144
|
-
const {
|
|
145
|
-
result: { current: dimensions },
|
|
146
|
-
} = renderHook(() => useDimensions("window"));
|
|
161
|
+
const { dimensions } = testHook("window");
|
|
147
162
|
|
|
148
163
|
expect(dimensions).toHaveProperty("height", window.height);
|
|
149
164
|
expect(dimensions).toHaveProperty("width", window.width);
|
|
@@ -3,13 +3,15 @@ import { isTablet } from "../isTablet";
|
|
|
3
3
|
/**
|
|
4
4
|
* Returns an object with additional device info that can be used to determine if tablet
|
|
5
5
|
* @param {Number} dimensions - Dimensions object passed to the function
|
|
6
|
+
* @param {Object} appData - application data object passed to the function
|
|
6
7
|
* @returns {DeviceInfo} deviceInfo - returns an object with scale, isTablet, and orientation
|
|
7
8
|
*/
|
|
8
|
-
export const getDeviceInfo = (dimensions) => {
|
|
9
|
+
export const getDeviceInfo = (dimensions, appData) => {
|
|
9
10
|
const scale = dimensions?.scale;
|
|
10
11
|
const isLandscape = dimensions?.width > dimensions?.height;
|
|
11
12
|
const orientation = isLandscape ? "landscape" : "portrait";
|
|
12
13
|
const tablet = isTablet(dimensions, orientation) || false;
|
|
14
|
+
const isTabletLandscape = tablet && !appData?.isTabletPortrait;
|
|
13
15
|
|
|
14
|
-
return { scale, isTablet: tablet, orientation };
|
|
16
|
+
return { scale, isTablet: tablet, orientation, isTabletLandscape };
|
|
15
17
|
};
|
|
@@ -2,6 +2,7 @@ type DeviceInfo = {
|
|
|
2
2
|
isTablet: boolean;
|
|
3
3
|
scale: number;
|
|
4
4
|
orientation: string;
|
|
5
|
+
isTabletLandscape: boolean;
|
|
5
6
|
};
|
|
6
7
|
|
|
7
8
|
type RNDimensions = {
|
|
@@ -20,6 +21,7 @@ export type Options = {
|
|
|
20
21
|
excludeStatusBar?: boolean;
|
|
21
22
|
rounded?: boolean;
|
|
22
23
|
deviceInfo?: boolean;
|
|
24
|
+
updateForInactiveScreens?: boolean;
|
|
23
25
|
};
|
|
24
26
|
|
|
25
27
|
export type Context = "window" | "screen";
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
2
2
|
|
|
3
3
|
import * as R from "ramda";
|
|
4
4
|
|
|
5
5
|
import { Dimensions, Platform, StatusBar } from "react-native";
|
|
6
|
+
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
|
|
7
|
+
|
|
6
8
|
import { isTV } from "../../../reactUtils";
|
|
7
9
|
|
|
8
10
|
import { Options, UseDimensions } from "../types";
|
|
9
11
|
import { getDeviceInfo } from "../getDeviceInfo";
|
|
10
12
|
import { getInitialDimensions } from "./helpers";
|
|
13
|
+
import { useIsScreenActive } from "../../navigation";
|
|
11
14
|
|
|
12
15
|
function compensateForScaleIfNeeded(context) {
|
|
13
16
|
return function () {
|
|
@@ -32,8 +35,11 @@ const statusBarHeight = StatusBar?.currentHeight;
|
|
|
32
35
|
*/
|
|
33
36
|
export const useDimensions: UseDimensions = (
|
|
34
37
|
context = "window",
|
|
35
|
-
fullDimensions = { fullDimensions: false }
|
|
38
|
+
fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
|
|
36
39
|
) => {
|
|
40
|
+
const isActive = useIsScreenActive();
|
|
41
|
+
const { appData } = usePickFromState(["appData"]);
|
|
42
|
+
|
|
37
43
|
if (typeof fullDimensions === "boolean") {
|
|
38
44
|
// eslint-disable-next-line no-console
|
|
39
45
|
console.warn(
|
|
@@ -47,7 +53,7 @@ export const useDimensions: UseDimensions = (
|
|
|
47
53
|
: { ...fullDimensions };
|
|
48
54
|
|
|
49
55
|
const [dimensions, setDimensions] = useState(getInitialDimensions(context));
|
|
50
|
-
const deviceInfo = useRef(getDeviceInfo(dimensions));
|
|
56
|
+
const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
|
|
51
57
|
|
|
52
58
|
const applyOptions = R.compose(
|
|
53
59
|
R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
|
|
@@ -73,7 +79,7 @@ export const useDimensions: UseDimensions = (
|
|
|
73
79
|
|
|
74
80
|
if (newDimensions.width === newDimensions.height) {
|
|
75
81
|
/**
|
|
76
|
-
* Ignoring case
|
|
82
|
+
* Ignoring case occurred on iOS when Dimensions.get sometimes returning
|
|
77
83
|
* wrong `window` sizes
|
|
78
84
|
* when switch background -> foreground state.
|
|
79
85
|
* ( TODO fix when 1:1 aspect ratio will be used )
|
|
@@ -81,8 +87,8 @@ export const useDimensions: UseDimensions = (
|
|
|
81
87
|
|
|
82
88
|
// eslint-disable-next-line no-console
|
|
83
89
|
console.log("change: wrong values - width equal to height, ignoring");
|
|
84
|
-
} else {
|
|
85
|
-
deviceInfo.current = getDeviceInfo(newDimensions);
|
|
90
|
+
} else if (isActive || options.updateForInactiveScreens) {
|
|
91
|
+
deviceInfo.current = getDeviceInfo(newDimensions, appData);
|
|
86
92
|
setDimensions(newDimensions);
|
|
87
93
|
}
|
|
88
94
|
};
|
|
@@ -92,7 +98,7 @@ export const useDimensions: UseDimensions = (
|
|
|
92
98
|
return () => {
|
|
93
99
|
activeSubscription.remove();
|
|
94
100
|
};
|
|
95
|
-
}, []);
|
|
101
|
+
}, [isActive]);
|
|
96
102
|
|
|
97
103
|
const memoizedDimensions = useMemo(() => {
|
|
98
104
|
return { ...applyOptions(dimensions), statusBarHeight };
|
|
@@ -23,3 +23,5 @@ export const useNavigation = jest.fn(() => ({
|
|
|
23
23
|
export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
|
|
24
24
|
|
|
25
25
|
export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
|
|
26
|
+
|
|
27
|
+
export const useIsScreenActive = jest.fn().mockReturnValue(true);
|
|
@@ -19,9 +19,9 @@ import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Co
|
|
|
19
19
|
import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
|
|
20
20
|
import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
|
|
21
21
|
import {
|
|
22
|
+
getNavigationProps,
|
|
22
23
|
getRiverFromRoute,
|
|
23
24
|
getTargetRoute,
|
|
24
|
-
getNavigationProps,
|
|
25
25
|
} from "../../navigationUtils";
|
|
26
26
|
import { platformSelect } from "../../reactUtils";
|
|
27
27
|
import { useConnectionInfo } from "../connection";
|
|
@@ -146,6 +146,15 @@ export const useRoute = (): {
|
|
|
146
146
|
pathname: string;
|
|
147
147
|
} => {
|
|
148
148
|
const pathname = usePathname() || "";
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* compose `useRoute()` output data
|
|
152
|
+
*/
|
|
153
|
+
const composeRouteData = (screenData: VariousScreenData) => ({
|
|
154
|
+
screenData,
|
|
155
|
+
pathname,
|
|
156
|
+
});
|
|
157
|
+
|
|
149
158
|
const navigator = useNavigation();
|
|
150
159
|
|
|
151
160
|
const { plugins, contentTypes, rivers } = usePickFromState([
|
|
@@ -157,9 +166,7 @@ export const useRoute = (): {
|
|
|
157
166
|
const currentStack = navigator.getStackForPathname(pathname);
|
|
158
167
|
const { modalState } = useModalStore();
|
|
159
168
|
const hookModalState = useZappHooksModalState();
|
|
160
|
-
|
|
161
169
|
const modalScreenData = modalState.screen;
|
|
162
|
-
|
|
163
170
|
const hookModalScreenData = hookModalState.state.screenData?.payload;
|
|
164
171
|
|
|
165
172
|
const videoModalScreenData =
|
|
@@ -193,35 +200,58 @@ export const useRoute = (): {
|
|
|
193
200
|
// if path is hook grab screenData from screenData
|
|
194
201
|
|
|
195
202
|
if (isModalPathname(pathname)) {
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
return { screenData, pathname };
|
|
203
|
+
return composeRouteData(modalScreenData ?? ({} as ZappEntry));
|
|
199
204
|
}
|
|
200
205
|
|
|
201
206
|
if (isVideoModalPathname(pathname)) {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
return { screenData, pathname };
|
|
207
|
+
return composeRouteData(videoModalScreenData as LegacyNavigationScreenData);
|
|
205
208
|
}
|
|
206
209
|
|
|
207
210
|
if (isHookModalPathname(pathname)) {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
return { screenData, pathname };
|
|
211
|
+
return composeRouteData(hookModalScreenData);
|
|
211
212
|
}
|
|
212
213
|
|
|
213
214
|
if (isHookPathname(pathname)) {
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
215
|
+
/**
|
|
216
|
+
* HACK
|
|
217
|
+
*
|
|
218
|
+
* This condition relies on hacky approach to get the current hook screen data
|
|
219
|
+
* using navigator.screenData for some cases.
|
|
220
|
+
* This is used when hook is in sequence.
|
|
221
|
+
*/
|
|
222
|
+
|
|
223
|
+
// case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
|
|
224
|
+
if (!currentStack) {
|
|
225
|
+
return composeRouteData(navigator.screenData);
|
|
226
|
+
}
|
|
218
227
|
|
|
219
|
-
|
|
220
|
-
|
|
228
|
+
const isValidHookInCurrentRouteScreenData =
|
|
229
|
+
"hookPlugin" in currentRouteScreenData &&
|
|
230
|
+
!!currentRouteScreenData.hookPlugin?.module;
|
|
231
|
+
|
|
232
|
+
let screenData;
|
|
221
233
|
|
|
222
|
-
|
|
234
|
+
// case 2: stack has valid hook data
|
|
235
|
+
if (isValidHookInCurrentRouteScreenData) {
|
|
236
|
+
screenData = currentRouteScreenData;
|
|
237
|
+
}
|
|
223
238
|
|
|
224
|
-
|
|
239
|
+
const navigatorScreenData = navigator.screenData as NavigatorEntry;
|
|
240
|
+
|
|
241
|
+
// case 3: current hookPlugin is missing weight, but navigator.screenData has weight, use navigator.screenData
|
|
242
|
+
if (
|
|
243
|
+
screenData.hookPlugin.identifier ===
|
|
244
|
+
navigatorScreenData?.hookPlugin?.identifier &&
|
|
245
|
+
!screenData.hookPlugin?.weight &&
|
|
246
|
+
navigatorScreenData?.hookPlugin?.weight
|
|
247
|
+
) {
|
|
248
|
+
screenData = navigator.screenData;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
return composeRouteData(screenData);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
return composeRouteData(currentRouteScreenData);
|
|
225
255
|
};
|
|
226
256
|
|
|
227
257
|
type Callbacks = Partial<{
|
|
@@ -446,3 +476,18 @@ export const useGetBottomTabBarHeight = (): number => {
|
|
|
446
476
|
|
|
447
477
|
return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
|
|
448
478
|
};
|
|
479
|
+
|
|
480
|
+
// If current screen is active/focused (visible to the user)
|
|
481
|
+
export const useIsScreenActive = () => {
|
|
482
|
+
const pathname = usePathname();
|
|
483
|
+
const { currentRoute, videoModalState } = useNavigation();
|
|
484
|
+
|
|
485
|
+
if (
|
|
486
|
+
videoModalState.visible &&
|
|
487
|
+
["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
|
|
488
|
+
) {
|
|
489
|
+
return false;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
return pathname === currentRoute;
|
|
493
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { View } from "react-native";
|
|
3
|
-
import {
|
|
3
|
+
import { cleanup, renderHook } from "@testing-library/react-hooks";
|
|
4
4
|
import configureStore from "redux-mock-store";
|
|
5
5
|
import { Provider } from "react-redux";
|
|
6
6
|
|
|
@@ -12,6 +12,8 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
|
|
|
12
12
|
useIsRTL: jest.fn(() => mock_rtl_flag),
|
|
13
13
|
}));
|
|
14
14
|
|
|
15
|
+
jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
|
|
16
|
+
|
|
15
17
|
const { useCellResolver } = require("../useCellResolver");
|
|
16
18
|
|
|
17
19
|
describe("cellResolver", () => {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
|
|
3
3
|
import * as R from "ramda";
|
|
4
|
+
import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
|
|
4
5
|
|
|
5
6
|
export function getTargetScreenData(
|
|
6
7
|
entry: ZappEntry,
|
|
@@ -35,6 +36,12 @@ export function getTargetScreenData(
|
|
|
35
36
|
return rivers?.[screenId];
|
|
36
37
|
}
|
|
37
38
|
|
|
39
|
+
export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
|
|
40
|
+
const { rivers, contentTypes } = appStore.get(["rivers", "contentTypes"]);
|
|
41
|
+
|
|
42
|
+
return getTargetScreenData(entry, rivers, contentTypes);
|
|
43
|
+
}
|
|
44
|
+
|
|
38
45
|
export const useTargetScreenData = (entry: ZappEntry) => {
|
|
39
46
|
const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);
|
|
40
47
|
|