@applicaster/zapp-react-native-utils 15.1.0-rc.8 → 15.1.0
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/actionsExecutor/ActionExecutorContext.tsx +23 -2
- package/analyticsUtils/AnalyticsEvents/sendMenuClickEvent.ts +2 -2
- package/analyticsUtils/PlayerAnalyticsManager.ts +11 -1
- package/analyticsUtils/__tests__/analyticsMapper.test.ts +35 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testACP_events.json +1 -1
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testBlockUnlistedParams_rules.json +1 -1
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testEmptyRenameKeepsName_events.json +4 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testEmptyRenameKeepsName_rules.json +6 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testEventRegex_events.json +3 -9
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testIgnoreOrdering_events.json +18 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testIgnoreOrdering_rules.json +16 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexEventNoFallback_events.json +4 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexEventNoFallback_rules.json +6 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexMultiGroupRename_events.json +4 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexMultiGroupRename_rules.json +6 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexNonNamedFullMatch_events.json +4 -0
- package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexNonNamedFullMatch_rules.json +6 -0
- package/analyticsUtils/__tests__/fixtures/index.js +20 -0
- package/analyticsUtils/analyticsMapper.ts +4 -1
- package/analyticsUtils/playerAnalyticsTracker.ts +26 -3
- package/appUtils/HooksManager/index.ts +3 -8
- package/cellUtils/index.ts +3 -5
- package/colorUtils/__tests__/isTransparentColor.test.ts +76 -0
- package/colorUtils/__tests__/isValidColor.test.ts +70 -0
- package/colorUtils/index.ts +50 -0
- package/manifestUtils/keys.js +1 -0
- package/manifestUtils/platformIsTV.js +1 -0
- package/package.json +2 -2
- package/pipesUtils/__tests__/buildUrlWithQuery.test.ts +33 -0
- package/pipesUtils/__tests__/withPipesEndpoint.test.tsx +56 -0
- package/pipesUtils/index.ts +1 -0
- package/pipesUtils/withPipesEndpoint.tsx +54 -0
- package/playerUtils/index.ts +4 -2
- package/riverComponetsMeasurementProvider/index.tsx +12 -8
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
} from "./ActionExecutor";
|
|
8
8
|
import {
|
|
9
9
|
batchRemoveAllFromNamespaceForStorage,
|
|
10
|
+
batchRemoveFromStorage,
|
|
10
11
|
batchSave,
|
|
11
12
|
} from "../zappFrameworkUtils/localStorageHelper";
|
|
12
13
|
import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
|
|
@@ -37,6 +38,10 @@ import {
|
|
|
37
38
|
} from "./StorageActions";
|
|
38
39
|
|
|
39
40
|
import { screenSetVariable, screenToggleFlag } from "./ScreenActions";
|
|
41
|
+
import {
|
|
42
|
+
StorageValuesToAdd,
|
|
43
|
+
StorageValuesToRemove,
|
|
44
|
+
} from "../zappFrameworkUtils/types";
|
|
40
45
|
|
|
41
46
|
export const { log_error, log_info, log_debug } = createLogger({
|
|
42
47
|
subsystem: "ActionExecutorContext",
|
|
@@ -87,7 +92,7 @@ function findParentComponent(
|
|
|
87
92
|
|
|
88
93
|
const prepareDefaultActions = (actionExecutor) => {
|
|
89
94
|
actionExecutor.registerAction("localStorageSet", async (action) => {
|
|
90
|
-
const namespaces = action.options.content;
|
|
95
|
+
const namespaces: StorageValuesToAdd = action.options.content;
|
|
91
96
|
await batchSave(namespaces, localStorage);
|
|
92
97
|
// TODO: Add support for ownershipKey and ownershipNamespace
|
|
93
98
|
|
|
@@ -95,13 +100,29 @@ const prepareDefaultActions = (actionExecutor) => {
|
|
|
95
100
|
});
|
|
96
101
|
|
|
97
102
|
actionExecutor.registerAction("sessionStorageSet", async (action) => {
|
|
98
|
-
const namespaces = action.options.content;
|
|
103
|
+
const namespaces: StorageValuesToAdd = action.options.content;
|
|
99
104
|
await batchSave(namespaces, sessionStorage);
|
|
100
105
|
// TODO: Add support for ownershipKey and ownershipNamespace
|
|
101
106
|
|
|
102
107
|
return ActionResult.Success;
|
|
103
108
|
});
|
|
104
109
|
|
|
110
|
+
actionExecutor.registerAction("localStorageRemove", async (action) => {
|
|
111
|
+
const namespaces: StorageValuesToRemove = action.options.content;
|
|
112
|
+
await batchRemoveFromStorage(namespaces, localStorage);
|
|
113
|
+
// TODO: Add support for ownershipKey and ownershipNamespace
|
|
114
|
+
|
|
115
|
+
return ActionResult.Success;
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
actionExecutor.registerAction("sessionStorageRemove", async (action) => {
|
|
119
|
+
const namespaces: StorageValuesToRemove = action.options.content;
|
|
120
|
+
await batchRemoveFromStorage(namespaces, sessionStorage);
|
|
121
|
+
// TODO: Add support for ownershipKey and ownershipNamespace
|
|
122
|
+
|
|
123
|
+
return ActionResult.Success;
|
|
124
|
+
});
|
|
125
|
+
|
|
105
126
|
actionExecutor.registerAction(
|
|
106
127
|
"refreshComponent",
|
|
107
128
|
async (_action, context) => {
|
|
@@ -6,9 +6,9 @@ import { postAnalyticEvent } from "../manager";
|
|
|
6
6
|
import { ANALYTICS_CORE_EVENTS } from "../events";
|
|
7
7
|
|
|
8
8
|
type AnalyticsDefaultHelperProperties = {
|
|
9
|
-
analyticsScreenData
|
|
9
|
+
analyticsScreenData?: AnalyticsScreenProperties;
|
|
10
10
|
extraProps: any;
|
|
11
|
-
props;
|
|
11
|
+
props?: any;
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
export const sendMenuClickEvent = ({
|
|
@@ -23,6 +23,15 @@ class PlayerAnalyticsTrackerFactory {
|
|
|
23
23
|
return new PlayerAnalyticsTracker();
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
+
|
|
27
|
+
onPlayerRegistered(tracker: PlayerAnalyticsTrackerI, player: Player) {
|
|
28
|
+
tracker.setPlayer(player);
|
|
29
|
+
tracker.onPlayerPresented();
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
onPlayerUnRegistered(tracker?: PlayerAnalyticsTrackerI) {
|
|
33
|
+
tracker?.onPlayerClosed();
|
|
34
|
+
}
|
|
26
35
|
}
|
|
27
36
|
|
|
28
37
|
export class PlayerAnalyticsManager implements PlayerLifecycleListener {
|
|
@@ -70,7 +79,7 @@ export class PlayerAnalyticsManager implements PlayerLifecycleListener {
|
|
|
70
79
|
}
|
|
71
80
|
|
|
72
81
|
const tracker = this.getTracker(player.playerId);
|
|
73
|
-
|
|
82
|
+
this.trackerFactory.onPlayerRegistered(tracker, player);
|
|
74
83
|
|
|
75
84
|
const analyticsListener = new AnalyticPlayerListener({
|
|
76
85
|
analyticsTracker: tracker,
|
|
@@ -84,6 +93,7 @@ export class PlayerAnalyticsManager implements PlayerLifecycleListener {
|
|
|
84
93
|
};
|
|
85
94
|
|
|
86
95
|
onUnRegistered = (player: Player) => {
|
|
96
|
+
this.trackerFactory.onPlayerUnRegistered(this.trackers[player.playerId]);
|
|
87
97
|
player.removeListener(AnalyticPlayerListener.analyticsListenerID);
|
|
88
98
|
delete this.trackers[player.playerId];
|
|
89
99
|
};
|
|
@@ -74,4 +74,39 @@ describe("Analytics Mapper", () => {
|
|
|
74
74
|
const rules = fixtures.ACPEventRules;
|
|
75
75
|
await setConfigRunMapTest(rules, fixtures.ACPEventEvents);
|
|
76
76
|
});
|
|
77
|
+
|
|
78
|
+
it("Does not let an ignore rule short-circuit later events", async () => {
|
|
79
|
+
await setConfigRunMapTest(
|
|
80
|
+
fixtures.ignoreOrderingRules,
|
|
81
|
+
fixtures.ignoreOrderingEvents
|
|
82
|
+
);
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
it("Keeps the original name when rename is empty", async () => {
|
|
86
|
+
await setConfigRunMapTest(
|
|
87
|
+
fixtures.emptyRenameRules,
|
|
88
|
+
fixtures.emptyRenameEvents
|
|
89
|
+
);
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
it("Renames via a regex with no named groups", async () => {
|
|
93
|
+
await setConfigRunMapTest(
|
|
94
|
+
fixtures.regexNonNamedFullMatchRules,
|
|
95
|
+
fixtures.regexNonNamedFullMatchEvents
|
|
96
|
+
);
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
it("Substitutes every named group in a regex rename", async () => {
|
|
100
|
+
await setConfigRunMapTest(
|
|
101
|
+
fixtures.regexMultiGroupRenameRules,
|
|
102
|
+
fixtures.regexMultiGroupRenameEvents
|
|
103
|
+
);
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
it("Does not fall back to event match when a regex rule does not match", async () => {
|
|
107
|
+
await setConfigRunMapTest(
|
|
108
|
+
fixtures.regexEventNoFallbackRules,
|
|
109
|
+
fixtures.regexEventNoFallbackEvents
|
|
110
|
+
);
|
|
111
|
+
});
|
|
77
112
|
});
|
|
@@ -2,17 +2,11 @@
|
|
|
2
2
|
{
|
|
3
3
|
"first": {
|
|
4
4
|
"name": "Screen viewed: Ads & redirects",
|
|
5
|
-
"params": {
|
|
6
|
-
"ignored_param": "removed_value",
|
|
7
|
-
"kept_param": "kept_value"
|
|
8
|
-
}
|
|
5
|
+
"params": {}
|
|
9
6
|
},
|
|
10
7
|
"second": {
|
|
11
8
|
"name": "Screen Ads & redirects",
|
|
12
|
-
"params": {
|
|
13
|
-
"ignored_param": "removed_value",
|
|
14
|
-
"kept_param": "kept_value"
|
|
15
|
-
}
|
|
9
|
+
"params": {}
|
|
16
10
|
}
|
|
17
11
|
}
|
|
18
|
-
]
|
|
12
|
+
]
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"rules": [
|
|
3
|
+
{
|
|
4
|
+
"event": "player_presented",
|
|
5
|
+
"ignore": true,
|
|
6
|
+
"strategy": "allowUnlisted"
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"event": "screen_view",
|
|
10
|
+
"ignore": false,
|
|
11
|
+
"rename": "page_view",
|
|
12
|
+
"strategy": "allowUnlisted"
|
|
13
|
+
}
|
|
14
|
+
],
|
|
15
|
+
"strategy": "allowUnlisted"
|
|
16
|
+
}
|
|
@@ -14,6 +14,16 @@ import blockUnlistedEventEvents from "./analytics_mapper_testBlockUnlistedEvents
|
|
|
14
14
|
import blockUnlistedEventRules from "./analytics_mapper_testBlockUnlistedEvents_rules.json";
|
|
15
15
|
import ACPEventEvents from "./analytics_mapper_testACP_events.json";
|
|
16
16
|
import ACPEventRules from "./analytics_mapper_testACP_rules.json";
|
|
17
|
+
import emptyRenameRules from "./analytics_mapper_testEmptyRenameKeepsName_rules.json";
|
|
18
|
+
import emptyRenameEvents from "./analytics_mapper_testEmptyRenameKeepsName_events.json";
|
|
19
|
+
import ignoreOrderingRules from "./analytics_mapper_testIgnoreOrdering_rules.json";
|
|
20
|
+
import ignoreOrderingEvents from "./analytics_mapper_testIgnoreOrdering_events.json";
|
|
21
|
+
import regexEventNoFallbackRules from "./analytics_mapper_testRegexEventNoFallback_rules.json";
|
|
22
|
+
import regexEventNoFallbackEvents from "./analytics_mapper_testRegexEventNoFallback_events.json";
|
|
23
|
+
import regexMultiGroupRenameRules from "./analytics_mapper_testRegexMultiGroupRename_rules.json";
|
|
24
|
+
import regexMultiGroupRenameEvents from "./analytics_mapper_testRegexMultiGroupRename_events.json";
|
|
25
|
+
import regexNonNamedFullMatchRules from "./analytics_mapper_testRegexNonNamedFullMatch_rules.json";
|
|
26
|
+
import regexNonNamedFullMatchEvents from "./analytics_mapper_testRegexNonNamedFullMatch_events.json";
|
|
17
27
|
|
|
18
28
|
export const fixtures = {
|
|
19
29
|
renameRules,
|
|
@@ -32,4 +42,14 @@ export const fixtures = {
|
|
|
32
42
|
blockUnlistedEventRules,
|
|
33
43
|
ACPEventEvents,
|
|
34
44
|
ACPEventRules,
|
|
45
|
+
emptyRenameRules,
|
|
46
|
+
emptyRenameEvents,
|
|
47
|
+
ignoreOrderingRules,
|
|
48
|
+
ignoreOrderingEvents,
|
|
49
|
+
regexEventNoFallbackRules,
|
|
50
|
+
regexEventNoFallbackEvents,
|
|
51
|
+
regexMultiGroupRenameRules,
|
|
52
|
+
regexMultiGroupRenameEvents,
|
|
53
|
+
regexNonNamedFullMatchRules,
|
|
54
|
+
regexNonNamedFullMatchEvents,
|
|
35
55
|
};
|
|
@@ -76,7 +76,10 @@ class StateHolder {
|
|
|
76
76
|
delete this.pluckedParams[prefix];
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
// Stringify so values match the native iOS/Android mappers (which coerce
|
|
80
|
+
// analyticsCustomProperties values to strings) — keeps GA4 data consistent
|
|
81
|
+
// across web/LG/Samsung and native platforms.
|
|
82
|
+
return this._cap?.[suffix]?.toString() ?? null;
|
|
80
83
|
}
|
|
81
84
|
|
|
82
85
|
private async getFromLocalAndSession(
|
|
@@ -4,8 +4,14 @@ import { isTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
|
|
|
4
4
|
import { postAnalyticEvent } from "./manager";
|
|
5
5
|
import { isLive } from "../playerUtils";
|
|
6
6
|
import { extensionsEvents } from "./AnalyticsEvents/helper";
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
AD_EVENT,
|
|
9
|
+
EVENT_TYPES,
|
|
10
|
+
GENERAL_EVENT,
|
|
11
|
+
PLAYER_DISPLAY_STATES,
|
|
12
|
+
} from "./events";
|
|
8
13
|
import { Player } from "../appUtils/playerManager/player";
|
|
14
|
+
import { isNil } from "@applicaster/zapp-react-native-utils/utils";
|
|
9
15
|
|
|
10
16
|
export interface PlayerAnalyticsTrackerI {
|
|
11
17
|
handleAnalyticEvent(
|
|
@@ -13,6 +19,8 @@ export interface PlayerAnalyticsTrackerI {
|
|
|
13
19
|
eventData?: QuickBrickPlayer.EventData
|
|
14
20
|
): void;
|
|
15
21
|
setPlayer(player: Player): void;
|
|
22
|
+
onPlayerPresented(): void;
|
|
23
|
+
onPlayerClosed(): void;
|
|
16
24
|
}
|
|
17
25
|
|
|
18
26
|
export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
|
|
@@ -26,6 +34,15 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
|
|
|
26
34
|
this.player = player;
|
|
27
35
|
}
|
|
28
36
|
|
|
37
|
+
onPlayerPresented() {
|
|
38
|
+
this.handleAnalyticEvent(GENERAL_EVENT.player_presented);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
onPlayerClosed() {
|
|
42
|
+
this.handleAnalyticEvent(GENERAL_EVENT.session_end);
|
|
43
|
+
this.handleAnalyticEvent(GENERAL_EVENT.player_closed);
|
|
44
|
+
}
|
|
45
|
+
|
|
29
46
|
isAdBreak(event: string): boolean {
|
|
30
47
|
const adBreakEvents = [
|
|
31
48
|
AD_EVENT.ad_break_start,
|
|
@@ -180,7 +197,8 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
|
|
|
180
197
|
this.entry?.extensions?.free || this.entry?.extensions?.isFree;
|
|
181
198
|
|
|
182
199
|
const title = this.entry?.title;
|
|
183
|
-
const
|
|
200
|
+
const isStreamLive = isLive(this.entry);
|
|
201
|
+
const streamType = isStreamLive ? "live" : "vod"; // Todo: determine other types, channel, podcast, aod
|
|
184
202
|
|
|
185
203
|
const currentPosition = this.getCurrentPosition(
|
|
186
204
|
event,
|
|
@@ -201,6 +219,7 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
|
|
|
201
219
|
);
|
|
202
220
|
|
|
203
221
|
const playerState = this.getPlayerState();
|
|
222
|
+
const playerType = this.player?.playerPluginId;
|
|
204
223
|
|
|
205
224
|
const analyticsCustomProperties = extensionsEvents(this.entry?.extensions);
|
|
206
225
|
|
|
@@ -210,7 +229,11 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
|
|
|
210
229
|
name: title,
|
|
211
230
|
media_type: mediaType,
|
|
212
231
|
stream_type: streamType,
|
|
213
|
-
|
|
232
|
+
player_type: playerType,
|
|
233
|
+
// We do not pass duration for live streams anymore (it's now seekableDuration),
|
|
234
|
+
// but we can't mark it as optional in Analytics Mapper yet,
|
|
235
|
+
// so we set it to -1 for live streams
|
|
236
|
+
duration: isStreamLive && isNil(mediaDuration) ? -1 : mediaDuration,
|
|
214
237
|
current_position: currentPosition,
|
|
215
238
|
player_state: playerState,
|
|
216
239
|
stream_format: contentType,
|
|
@@ -90,7 +90,7 @@ export function HooksManager({
|
|
|
90
90
|
}: HookManagerArgs): HookManager {
|
|
91
91
|
hooksManagerLogger.addContext({ targetScreenId: targetScreen.id });
|
|
92
92
|
|
|
93
|
-
function logHookEvent(func, message, data) {
|
|
93
|
+
function logHookEvent(func, message, data = {}) {
|
|
94
94
|
func({
|
|
95
95
|
message,
|
|
96
96
|
data: __DEV__ ? data : null,
|
|
@@ -347,7 +347,6 @@ export function HooksManager({
|
|
|
347
347
|
`hookCallback: send app to background, cancelled flow blocker hook ${hookPlugin["identifier"]} on home screen`,
|
|
348
348
|
{
|
|
349
349
|
payload,
|
|
350
|
-
hook: hookPlugin,
|
|
351
350
|
}
|
|
352
351
|
);
|
|
353
352
|
|
|
@@ -362,17 +361,13 @@ export function HooksManager({
|
|
|
362
361
|
`hookCallback: hook successfully finished: ${hookPlugin["identifier"]}`,
|
|
363
362
|
{
|
|
364
363
|
payload,
|
|
365
|
-
hook: hookPlugin,
|
|
366
364
|
}
|
|
367
365
|
);
|
|
368
366
|
|
|
369
367
|
if (!callback) {
|
|
370
368
|
logHookEvent(
|
|
371
|
-
hooksManagerLogger.
|
|
372
|
-
`hookCallback: ${hookPlugin
|
|
373
|
-
{
|
|
374
|
-
hookPlugin,
|
|
375
|
-
}
|
|
369
|
+
hooksManagerLogger.debug,
|
|
370
|
+
`hookCallback: ${hookPlugin.identifier} is missing \`callback\`, using hookCallback(default one)`
|
|
376
371
|
);
|
|
377
372
|
|
|
378
373
|
callback = hookCallback;
|
package/cellUtils/index.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as R from "ramda";
|
|
2
2
|
import { dayjs } from "../dateUtils";
|
|
3
|
-
import validateColor from "validate-color";
|
|
4
3
|
|
|
4
|
+
import { isValidColor } from "@applicaster/zapp-react-native-utils/colorUtils";
|
|
5
5
|
import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
|
|
6
6
|
import {
|
|
7
7
|
capitalize,
|
|
@@ -468,15 +468,13 @@ export const getColorFromData = ({
|
|
|
468
468
|
data,
|
|
469
469
|
valueFromLayout,
|
|
470
470
|
}: GetColorFromData): string => {
|
|
471
|
-
|
|
472
|
-
// https://github.com/dreamyguy/validate-color/issues/44
|
|
473
|
-
if (validateColor(valueFromLayout.replace(".00", ""))) {
|
|
471
|
+
if (isValidColor(valueFromLayout)) {
|
|
474
472
|
return valueFromLayout;
|
|
475
473
|
}
|
|
476
474
|
|
|
477
475
|
const pathValue = R.path(valueFromLayout.split("."), data);
|
|
478
476
|
|
|
479
|
-
if (pathValue &&
|
|
477
|
+
if (pathValue && isValidColor(pathValue)) {
|
|
480
478
|
return pathValue;
|
|
481
479
|
}
|
|
482
480
|
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { isTransparentColor } from "..";
|
|
2
|
+
|
|
3
|
+
describe("isTransparentColor", () => {
|
|
4
|
+
it("returns true for transparent keyword and rgba colors with zero alpha", () => {
|
|
5
|
+
const transparentColors = [
|
|
6
|
+
"transparent",
|
|
7
|
+
"rgba(0,0,0,0)",
|
|
8
|
+
"rgba(255, 255, 255, 0)",
|
|
9
|
+
"rgba(0,0,0,0.0)",
|
|
10
|
+
"rgba(0,0,0,0.00)",
|
|
11
|
+
"rgba(0,0,0, 0)",
|
|
12
|
+
"hsla(0,0%,0%,0)",
|
|
13
|
+
];
|
|
14
|
+
|
|
15
|
+
expect.assertions(transparentColors.length);
|
|
16
|
+
|
|
17
|
+
transparentColors.forEach((color) => {
|
|
18
|
+
expect(isTransparentColor(color)).toBe(true);
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
it("returns false for valid colors that are not fully transparent", () => {
|
|
23
|
+
const nonTransparentColors = [
|
|
24
|
+
"red",
|
|
25
|
+
"#fff",
|
|
26
|
+
"#ffffff",
|
|
27
|
+
"rgb(0,0,0)",
|
|
28
|
+
"rgba(0,0,0)",
|
|
29
|
+
"rgba(0,0,0,0.5)",
|
|
30
|
+
"rgba(255, 255, 255, 0.3)",
|
|
31
|
+
"rgba(255, 255, 255, 1.0)",
|
|
32
|
+
"rgba(239,239,239,1.0)",
|
|
33
|
+
"currentColor",
|
|
34
|
+
"inherit",
|
|
35
|
+
"#00000000",
|
|
36
|
+
"#fff0",
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
expect.assertions(nonTransparentColors.length);
|
|
40
|
+
|
|
41
|
+
nonTransparentColors.forEach((color) => {
|
|
42
|
+
expect(isTransparentColor(color)).toBe(false);
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
it("returns false for case variants of the transparent keyword", () => {
|
|
47
|
+
expect(isTransparentColor("Transparent")).toBe(false);
|
|
48
|
+
expect(isTransparentColor("TRANSPARENT")).toBe(false);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
it("returns false for invalid color strings", () => {
|
|
52
|
+
const invalidColors = [
|
|
53
|
+
"invalid",
|
|
54
|
+
"",
|
|
55
|
+
"#gggggg",
|
|
56
|
+
"#fff.00",
|
|
57
|
+
"unset",
|
|
58
|
+
" rgba(0,0,0,0) ",
|
|
59
|
+
"transparent ",
|
|
60
|
+
];
|
|
61
|
+
|
|
62
|
+
expect.assertions(invalidColors.length);
|
|
63
|
+
|
|
64
|
+
invalidColors.forEach((color) => {
|
|
65
|
+
expect(isTransparentColor(color)).toBe(false);
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
it("returns false for nullish and non-string values", () => {
|
|
70
|
+
expect(isTransparentColor(undefined)).toBe(false);
|
|
71
|
+
expect(isTransparentColor(null)).toBe(false);
|
|
72
|
+
expect(isTransparentColor(123)).toBe(false);
|
|
73
|
+
expect(isTransparentColor({})).toBe(false);
|
|
74
|
+
expect(isTransparentColor([])).toBe(false);
|
|
75
|
+
});
|
|
76
|
+
});
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { isValidColor } from "..";
|
|
2
|
+
|
|
3
|
+
describe("isValidColor", () => {
|
|
4
|
+
it("returns true for valid hex colors", () => {
|
|
5
|
+
const validHexColors = ["#fff", "#ffffff", "#FF0000", "#000", "#abc123"];
|
|
6
|
+
|
|
7
|
+
expect.assertions(validHexColors.length);
|
|
8
|
+
|
|
9
|
+
validHexColors.forEach((color) => {
|
|
10
|
+
expect(isValidColor(color)).toBe(true);
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
it("returns true for valid rgb and rgba colors", () => {
|
|
15
|
+
const validRgbColors = [
|
|
16
|
+
"rgb(255,0,0)",
|
|
17
|
+
"rgb(255, 0, 0)",
|
|
18
|
+
"rgba(255,0,0,0.5)",
|
|
19
|
+
"rgba(255, 0, 0, 0.5)",
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
expect.assertions(validRgbColors.length);
|
|
23
|
+
|
|
24
|
+
validRgbColors.forEach((color) => {
|
|
25
|
+
expect(isValidColor(color)).toBe(true);
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
it("returns true for valid named and special CSS colors", () => {
|
|
30
|
+
const validNamedColors = ["red", "transparent", "currentColor", "inherit"];
|
|
31
|
+
|
|
32
|
+
expect.assertions(validNamedColors.length);
|
|
33
|
+
|
|
34
|
+
validNamedColors.forEach((color) => {
|
|
35
|
+
expect(isValidColor(color)).toBe(true);
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it("returns true for valid hsl colors", () => {
|
|
40
|
+
expect(isValidColor("hsl(0, 100%, 50%)")).toBe(true);
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
it("returns false for invalid color strings", () => {
|
|
44
|
+
const invalidColors = [
|
|
45
|
+
"invalid",
|
|
46
|
+
"",
|
|
47
|
+
"#gggggg",
|
|
48
|
+
"#fff.00",
|
|
49
|
+
"unset",
|
|
50
|
+
undefined,
|
|
51
|
+
null,
|
|
52
|
+
];
|
|
53
|
+
|
|
54
|
+
expect.assertions(invalidColors.length);
|
|
55
|
+
|
|
56
|
+
invalidColors.forEach((color) => {
|
|
57
|
+
expect(isValidColor(color)).toBe(false);
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
it("returns true for valid rgb and rgba colors", () => {
|
|
62
|
+
const validRgbColors = ["rgba(239,239,239,1.0)"];
|
|
63
|
+
|
|
64
|
+
expect.assertions(validRgbColors.length);
|
|
65
|
+
|
|
66
|
+
validRgbColors.forEach((color) => {
|
|
67
|
+
expect(isValidColor(color)).toBe(true);
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
});
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import validateColor from "validate-color";
|
|
2
|
+
import { isNil } from "@applicaster/zapp-react-native-utils/utils";
|
|
3
|
+
import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
|
|
4
|
+
|
|
5
|
+
const normalizeRgbaAlpha = (color: string): string => {
|
|
6
|
+
return color.replace(
|
|
7
|
+
/^rgba\(([^)]+),\s*(\d+(?:\.\d+)?)\s*\)$/i,
|
|
8
|
+
(_, rgb, alpha) => {
|
|
9
|
+
const alphaValue = parseFloat(alpha);
|
|
10
|
+
|
|
11
|
+
if (!Number.isFinite(alphaValue) || !Number.isInteger(alphaValue)) {
|
|
12
|
+
return color;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return `rgba(${rgb},${alphaValue})`;
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export const isValidColor = (color: string): boolean => {
|
|
21
|
+
if (isNil(color) || !isString(color)) {
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (validateColor(color)) {
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// validate-color rejects integer alpha values written as floats (e.g. 1.0)
|
|
30
|
+
// https://github.com/dreamyguy/validate-color/issues/44
|
|
31
|
+
const normalizedColor = normalizeRgbaAlpha(color);
|
|
32
|
+
|
|
33
|
+
return normalizedColor !== color && validateColor(normalizedColor);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
function isRgbaAlphaZero(color: string): boolean {
|
|
37
|
+
const layers = color
|
|
38
|
+
.replace("rgba(", "")
|
|
39
|
+
.replace(")", "")
|
|
40
|
+
.split(",")
|
|
41
|
+
.map((layer) => layer.trim());
|
|
42
|
+
|
|
43
|
+
return Number(layers[3]) === 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export const isTransparentColor = (color: string): boolean => {
|
|
47
|
+
return (
|
|
48
|
+
isValidColor(color) && (color === "transparent" || isRgbaAlphaZero(color))
|
|
49
|
+
);
|
|
50
|
+
};
|
package/manifestUtils/keys.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-utils",
|
|
3
|
-
"version": "15.1.0
|
|
3
|
+
"version": "15.1.0",
|
|
4
4
|
"description": "Applicaster Zapp React Native utilities package",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"homepage": "https://github.com/applicaster/quickbrick#readme",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@applicaster/applicaster-types": "15.1.0
|
|
30
|
+
"@applicaster/applicaster-types": "15.1.0",
|
|
31
31
|
"buffer": "^5.2.1",
|
|
32
32
|
"camelize": "^1.0.0",
|
|
33
33
|
"dayjs": "^1.11.10",
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { buildUrlWithQuery } from "../withPipesEndpoint";
|
|
2
|
+
|
|
3
|
+
describe("buildUrlWithQuery", () => {
|
|
4
|
+
it("returns the url unchanged when requestParams is null", () => {
|
|
5
|
+
expect(buildUrlWithQuery("https://foo.com/path", null)).toBe(
|
|
6
|
+
"https://foo.com/path"
|
|
7
|
+
);
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
it("returns the url unchanged when requestParams has no params", () => {
|
|
11
|
+
expect(buildUrlWithQuery("https://foo.com/path", { headers: {} })).toBe(
|
|
12
|
+
"https://foo.com/path"
|
|
13
|
+
);
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
it("returns the url unchanged when url is empty", () => {
|
|
17
|
+
expect(buildUrlWithQuery("", { params: { a: "1" } })).toBe("");
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
it("appends params to a url with no existing query", () => {
|
|
21
|
+
expect(
|
|
22
|
+
buildUrlWithQuery("https://foo.com/path", { params: { token: "abc" } })
|
|
23
|
+
).toBe("https://foo.com/path?token=abc");
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
it("merges params with an existing query string", () => {
|
|
27
|
+
expect(
|
|
28
|
+
buildUrlWithQuery("https://foo.com/path?existing=1", {
|
|
29
|
+
params: { token: "abc" },
|
|
30
|
+
})
|
|
31
|
+
).toBe("https://foo.com/path?existing=1&token=abc");
|
|
32
|
+
});
|
|
33
|
+
});
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { render } from "@testing-library/react-native";
|
|
3
|
+
import { Text } from "react-native";
|
|
4
|
+
|
|
5
|
+
const mockedUseBuildPipesUrl = jest.fn();
|
|
6
|
+
|
|
7
|
+
jest.mock("@applicaster/zapp-react-native-utils/reactHooks/feed", () => ({
|
|
8
|
+
useBuildPipesUrl: (args) => mockedUseBuildPipesUrl(args),
|
|
9
|
+
}));
|
|
10
|
+
|
|
11
|
+
const { withPipesEndpoint } = require("../withPipesEndpoint");
|
|
12
|
+
|
|
13
|
+
// eslint-disable-next-line react/display-name
|
|
14
|
+
const Wrapped = React.forwardRef((props: any, _ref) => (
|
|
15
|
+
<Text testID="wrapped">{`${props.uri}|${JSON.stringify(props.headers)}`}</Text>
|
|
16
|
+
));
|
|
17
|
+
|
|
18
|
+
describe("withPipesEndpoint", () => {
|
|
19
|
+
afterEach(() => jest.clearAllMocks());
|
|
20
|
+
|
|
21
|
+
it("renders nothing while the endpoint context is resolving", () => {
|
|
22
|
+
mockedUseBuildPipesUrl.mockReturnValue({ requestParams: null });
|
|
23
|
+
|
|
24
|
+
const Decorated = withPipesEndpoint(Wrapped);
|
|
25
|
+
const { queryByTestId } = render(<Decorated uri="https://foo.com" />);
|
|
26
|
+
|
|
27
|
+
expect(queryByTestId("wrapped")).toBeNull();
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
it("passes the uri through unchanged when there are no params", () => {
|
|
31
|
+
mockedUseBuildPipesUrl.mockReturnValue({ requestParams: {} });
|
|
32
|
+
|
|
33
|
+
const Decorated = withPipesEndpoint(Wrapped);
|
|
34
|
+
const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
|
|
35
|
+
|
|
36
|
+
expect(getByTestId("wrapped").props.children).toBe(
|
|
37
|
+
"https://foo.com/path|{}"
|
|
38
|
+
);
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
it("merges resolved params into the uri and forwards headers", () => {
|
|
42
|
+
mockedUseBuildPipesUrl.mockReturnValue({
|
|
43
|
+
requestParams: {
|
|
44
|
+
params: { token: "abc" },
|
|
45
|
+
headers: { Authorization: "Bearer xyz" },
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
const Decorated = withPipesEndpoint(Wrapped);
|
|
50
|
+
const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
|
|
51
|
+
|
|
52
|
+
expect(getByTestId("wrapped").props.children).toBe(
|
|
53
|
+
'https://foo.com/path?token=abc|{"Authorization":"Bearer xyz"}'
|
|
54
|
+
);
|
|
55
|
+
});
|
|
56
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { withPipesEndpoint, buildUrlWithQuery } from "./withPipesEndpoint";
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React, { forwardRef, RefObject } from "react";
|
|
2
|
+
import URL from "url";
|
|
3
|
+
|
|
4
|
+
import { useBuildPipesUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Merges the query params resolved from a pipes endpoint context into the url.
|
|
8
|
+
* Returns the url unchanged when there is nothing to merge.
|
|
9
|
+
*/
|
|
10
|
+
export function buildUrlWithQuery(url: string, requestParams): string {
|
|
11
|
+
if (!url || !requestParams?.params) {
|
|
12
|
+
return url;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const parsedURL = URL.parse(url, true);
|
|
16
|
+
|
|
17
|
+
parsedURL.query = { ...parsedURL.query, ...requestParams.params };
|
|
18
|
+
parsedURL.search = null;
|
|
19
|
+
|
|
20
|
+
return URL.format(parsedURL);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
type Props = {
|
|
24
|
+
uri: string;
|
|
25
|
+
} & Record<string, unknown>;
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* HOC that resolves the wrapped component's `uri` against its matching Zapp
|
|
29
|
+
* Pipes endpoint. Endpoint context keys are added as query params (merged into
|
|
30
|
+
* the uri) and as request `headers`. Rendering is deferred until the context
|
|
31
|
+
* has been resolved so the component never loads without its required headers.
|
|
32
|
+
*/
|
|
33
|
+
export function withPipesEndpoint(Component) {
|
|
34
|
+
function WithPipesEndpoint(props: Props, ref: RefObject<unknown>) {
|
|
35
|
+
const { requestParams } = useBuildPipesUrl({ url: props.uri });
|
|
36
|
+
|
|
37
|
+
if (requestParams !== null) {
|
|
38
|
+
const urlWithQuery = buildUrlWithQuery(props.uri, requestParams);
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<Component
|
|
42
|
+
ref={ref}
|
|
43
|
+
{...props}
|
|
44
|
+
uri={urlWithQuery}
|
|
45
|
+
headers={requestParams.headers || {}}
|
|
46
|
+
/>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return forwardRef(WithPipesEndpoint);
|
|
54
|
+
}
|
package/playerUtils/index.ts
CHANGED
|
@@ -37,7 +37,7 @@ export function isLiveLegacy(content) {
|
|
|
37
37
|
]);
|
|
38
38
|
|
|
39
39
|
const durationFromExt = R.path(["extensions", "duration"], content);
|
|
40
|
-
const durationFromMgr = playerManager.getDuration();
|
|
40
|
+
const durationFromMgr = playerManager.getInstanceController()?.getDuration();
|
|
41
41
|
const duration = Math.floor(durationFromExt || durationFromMgr);
|
|
42
42
|
|
|
43
43
|
const isLive = R.anyPass([isNotaValidNumber, R.lte(R.__, 0)])(duration);
|
|
@@ -81,7 +81,9 @@ function isLiveByManager(): boolean {
|
|
|
81
81
|
return true;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
const durationFromPlayerManager = playerManager
|
|
84
|
+
const durationFromPlayerManager = playerManager
|
|
85
|
+
.getInstanceController()
|
|
86
|
+
?.getDuration();
|
|
85
87
|
|
|
86
88
|
return isLiveByDuration(durationFromPlayerManager);
|
|
87
89
|
}
|
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { NativeModules,
|
|
2
|
+
import { NativeModules, View, StyleSheet } from "react-native";
|
|
3
3
|
import { getXray } from "@applicaster/zapp-react-native-utils/logger";
|
|
4
4
|
|
|
5
|
-
import { isApplePlatform, isWeb } from "../reactUtils";
|
|
5
|
+
import { isApplePlatform, isWeb, isTV } from "../reactUtils";
|
|
6
6
|
import { useRivers } from "../reactHooks";
|
|
7
7
|
|
|
8
|
+
const isTVPlatform = isTV();
|
|
9
|
+
|
|
10
|
+
const styles = StyleSheet.create({
|
|
11
|
+
container: isTVPlatform
|
|
12
|
+
? {
|
|
13
|
+
flex: 1,
|
|
14
|
+
}
|
|
15
|
+
: undefined,
|
|
16
|
+
});
|
|
17
|
+
|
|
8
18
|
const layoutReducer = (state, { payload }) => {
|
|
9
19
|
return state.map((item, index, _state) => ({
|
|
10
20
|
height: index === payload.index ? payload.height : item.height,
|
|
@@ -30,12 +40,6 @@ type MeasurementContext = {
|
|
|
30
40
|
onLayout: (index: number) => (event) => void;
|
|
31
41
|
};
|
|
32
42
|
|
|
33
|
-
const styles = StyleSheet.create({
|
|
34
|
-
container: {
|
|
35
|
-
flex: 1,
|
|
36
|
-
},
|
|
37
|
-
});
|
|
38
|
-
|
|
39
43
|
const { Logger } = getXray();
|
|
40
44
|
|
|
41
45
|
const logger = new Logger("general", "ui");
|