@player-ui/react 0.3.0-next.3 → 0.3.0-next.5
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/dist/index.cjs.js +160 -45
- package/dist/index.d.ts +107 -41
- package/dist/index.esm.js +144 -44
- package/package.json +5 -7
- package/src/app.tsx +8 -12
- package/src/asset/index.tsx +49 -0
- package/src/hooks.tsx +13 -13
- package/src/index.tsx +3 -1
- package/src/manager/managed-player.tsx +16 -16
- package/src/manager/request-time.tsx +2 -2
- package/src/manager/types.ts +4 -4
- package/src/player.tsx +51 -48
- package/src/plugins/tapstate-plugin.ts +2 -2
- package/src/utils/helpers.ts +50 -0
- package/src/utils/index.tsx +6 -0
- package/src/utils/player-context.ts +23 -0
- package/src/utils/shared-constants.tsx +15 -0
- package/src/utils/url.ts +22 -0
- package/src/utils/use-asset-props.tsx +9 -0
- package/src/utils/use-logger.ts +14 -0
- package/src/utils/desc.d.ts +0 -2
package/dist/index.cjs.js
CHANGED
|
@@ -2,20 +2,119 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var React = require('react');
|
|
6
5
|
var player = require('@player-ui/player');
|
|
7
|
-
var
|
|
8
|
-
var reactErrorBoundary = require('react-error-boundary');
|
|
9
|
-
var reactUtils = require('@player-ui/react-utils');
|
|
6
|
+
var React = require('react');
|
|
10
7
|
var tapableTs = require('tapable-ts');
|
|
11
8
|
var reactSubscribe = require('@player-ui/react-subscribe');
|
|
12
9
|
var partialMatchRegistry = require('@player-ui/partial-match-registry');
|
|
10
|
+
var reactErrorBoundary = require('react-error-boundary');
|
|
13
11
|
var metricsPlugin = require('@player-ui/metrics-plugin');
|
|
14
12
|
|
|
15
13
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
14
|
|
|
17
15
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
16
|
|
|
17
|
+
var __defProp$3 = Object.defineProperty;
|
|
18
|
+
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
19
|
+
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
20
|
+
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
21
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
22
|
+
var __spreadValues$3 = (a, b) => {
|
|
23
|
+
for (var prop in b || (b = {}))
|
|
24
|
+
if (__hasOwnProp$3.call(b, prop))
|
|
25
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
26
|
+
if (__getOwnPropSymbols$3)
|
|
27
|
+
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
28
|
+
if (__propIsEnum$3.call(b, prop))
|
|
29
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
30
|
+
}
|
|
31
|
+
return a;
|
|
32
|
+
};
|
|
33
|
+
const AssetContext = React__default["default"].createContext({});
|
|
34
|
+
const ReactAsset = (props) => {
|
|
35
|
+
const { registry } = React__default["default"].useContext(AssetContext);
|
|
36
|
+
let unwrapped;
|
|
37
|
+
if ("type" in props && "id" in props) {
|
|
38
|
+
unwrapped = props;
|
|
39
|
+
} else if ("asset" in props) {
|
|
40
|
+
unwrapped = props.asset;
|
|
41
|
+
}
|
|
42
|
+
if (!unwrapped || typeof unwrapped !== "object" || (unwrapped == null ? void 0 : unwrapped.type) === void 0) {
|
|
43
|
+
throw Error(`Cannot determine asset type.`);
|
|
44
|
+
}
|
|
45
|
+
const Impl = registry == null ? void 0 : registry.get(unwrapped);
|
|
46
|
+
if (!Impl) {
|
|
47
|
+
throw Error(`No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}`);
|
|
48
|
+
}
|
|
49
|
+
return /* @__PURE__ */ React__default["default"].createElement(Impl, __spreadValues$3({}, unwrapped));
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const PlayerContext = React__default["default"].createContext({});
|
|
53
|
+
const usePlayer = () => {
|
|
54
|
+
const { player } = React__default["default"].useContext(PlayerContext);
|
|
55
|
+
return player;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const noopLogger = new player.NoopLogger();
|
|
59
|
+
function useLogger() {
|
|
60
|
+
var _a;
|
|
61
|
+
const player = usePlayer();
|
|
62
|
+
return (_a = player == null ? void 0 : player.logger) != null ? _a : noopLogger;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function useAssetProps(asset) {
|
|
66
|
+
return {
|
|
67
|
+
id: asset.id,
|
|
68
|
+
"data-asset-type": asset.type
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function trimSlashes(str) {
|
|
73
|
+
return str.replace(/^\/+|\/+$/g, "");
|
|
74
|
+
}
|
|
75
|
+
function removeEmptyValuesFromObject(obj) {
|
|
76
|
+
return Object.keys(obj).reduce((acc, key) => {
|
|
77
|
+
const value = obj[key];
|
|
78
|
+
if (value !== null && value !== void 0) {
|
|
79
|
+
acc[key] = value;
|
|
80
|
+
}
|
|
81
|
+
return acc;
|
|
82
|
+
}, {});
|
|
83
|
+
}
|
|
84
|
+
function isEmptyObject(obj) {
|
|
85
|
+
return Object.keys(obj).length === 0 && obj.constructor === Object;
|
|
86
|
+
}
|
|
87
|
+
function isFunction(maybeFn) {
|
|
88
|
+
return Boolean(maybeFn instanceof Function || typeof maybeFn === "function");
|
|
89
|
+
}
|
|
90
|
+
function callOrReturn(maybeFn, fnArgs) {
|
|
91
|
+
if (isFunction(maybeFn)) {
|
|
92
|
+
return maybeFn(fnArgs);
|
|
93
|
+
}
|
|
94
|
+
return maybeFn;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
function buildUrl(url, params = {}) {
|
|
98
|
+
const baseUrl = new URL(url);
|
|
99
|
+
if (params && isEmptyObject(params)) {
|
|
100
|
+
return baseUrl.toString();
|
|
101
|
+
}
|
|
102
|
+
Object.keys(params).forEach((key) => {
|
|
103
|
+
const value = params[key];
|
|
104
|
+
baseUrl.searchParams.append(key, String(value));
|
|
105
|
+
});
|
|
106
|
+
return baseUrl.toString();
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
function useGetConstantByType(type, key) {
|
|
110
|
+
const player = usePlayer();
|
|
111
|
+
return player == null ? void 0 : player.constantsController.getConstants(key, type);
|
|
112
|
+
}
|
|
113
|
+
function useGetConstant(key) {
|
|
114
|
+
const player = usePlayer();
|
|
115
|
+
return player == null ? void 0 : player.constantsController.getConstants(key, "constants");
|
|
116
|
+
}
|
|
117
|
+
|
|
19
118
|
var __defProp$2 = Object.defineProperty;
|
|
20
119
|
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
21
120
|
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
@@ -32,8 +131,8 @@ var __spreadValues$2 = (a, b) => {
|
|
|
32
131
|
}
|
|
33
132
|
return a;
|
|
34
133
|
};
|
|
35
|
-
const
|
|
36
|
-
return /* @__PURE__ */ React__default["default"].createElement(
|
|
134
|
+
const ReactPlayer$1 = ({ view }) => {
|
|
135
|
+
return /* @__PURE__ */ React__default["default"].createElement(ReactAsset, __spreadValues$2({}, view));
|
|
37
136
|
};
|
|
38
137
|
|
|
39
138
|
class OnUpdatePlugin {
|
|
@@ -83,10 +182,10 @@ var __async$1 = (__this, __arguments, generator) => {
|
|
|
83
182
|
step((generator = generator.apply(__this, __arguments)).next());
|
|
84
183
|
});
|
|
85
184
|
};
|
|
86
|
-
const WEB_PLAYER_VERSION = "0.3.0-next.
|
|
87
|
-
const COMMIT = "
|
|
185
|
+
const WEB_PLAYER_VERSION = "0.3.0-next.5";
|
|
186
|
+
const COMMIT = "2dcac81d456ce1e2953669f18e6c7c05cd763fd7";
|
|
88
187
|
const _window = typeof window === "undefined" ? void 0 : window;
|
|
89
|
-
class
|
|
188
|
+
class ReactPlayer {
|
|
90
189
|
constructor(options) {
|
|
91
190
|
this.assetRegistry = new partialMatchRegistry.Registry();
|
|
92
191
|
this.hooks = {
|
|
@@ -109,24 +208,24 @@ class WebPlayer {
|
|
|
109
208
|
const playerPlugins = plugins.filter((p) => Boolean(p.apply));
|
|
110
209
|
this.player = (_b = options == null ? void 0 : options.player) != null ? _b : new player.Player({ plugins: playerPlugins });
|
|
111
210
|
plugins.forEach((plugin) => {
|
|
112
|
-
if (plugin.
|
|
113
|
-
plugin.
|
|
211
|
+
if (plugin.applyReact) {
|
|
212
|
+
plugin.applyReact(this);
|
|
114
213
|
}
|
|
115
214
|
});
|
|
116
215
|
onUpdatePlugin.apply(this.player);
|
|
117
216
|
this.Component = this.hooks.webComponent.call(this.createReactComp());
|
|
118
|
-
this.
|
|
217
|
+
this.reactPlayerInfo = {
|
|
119
218
|
playerVersion: this.player.getVersion(),
|
|
120
219
|
playerCommit: this.player.getCommit(),
|
|
121
|
-
|
|
122
|
-
|
|
220
|
+
reactPlayerVersion: WEB_PLAYER_VERSION,
|
|
221
|
+
reactPlayerCommit: COMMIT
|
|
123
222
|
};
|
|
124
223
|
}
|
|
125
224
|
getPlayerVersion() {
|
|
126
|
-
return this.
|
|
225
|
+
return this.reactPlayerInfo.playerVersion;
|
|
127
226
|
}
|
|
128
227
|
getPlayerCommit() {
|
|
129
|
-
return this.
|
|
228
|
+
return this.reactPlayerInfo.playerCommit;
|
|
130
229
|
}
|
|
131
230
|
findPlugin(symbol) {
|
|
132
231
|
var _a;
|
|
@@ -134,20 +233,20 @@ class WebPlayer {
|
|
|
134
233
|
}
|
|
135
234
|
registerPlugin(plugin) {
|
|
136
235
|
var _a;
|
|
137
|
-
if (!plugin.
|
|
236
|
+
if (!plugin.applyReact)
|
|
138
237
|
return;
|
|
139
|
-
plugin.
|
|
238
|
+
plugin.applyReact(this);
|
|
140
239
|
(_a = this.options.plugins) == null ? void 0 : _a.push(plugin);
|
|
141
240
|
}
|
|
142
|
-
|
|
143
|
-
return this.
|
|
241
|
+
getReactPlayerVersion() {
|
|
242
|
+
return this.reactPlayerInfo.reactPlayerVersion;
|
|
144
243
|
}
|
|
145
|
-
|
|
146
|
-
return this.
|
|
244
|
+
getReactPlayerCommit() {
|
|
245
|
+
return this.reactPlayerInfo.reactPlayerCommit;
|
|
147
246
|
}
|
|
148
247
|
createReactComp() {
|
|
149
|
-
const ActualPlayerComp = this.hooks.playerComponent.call(
|
|
150
|
-
const
|
|
248
|
+
const ActualPlayerComp = this.hooks.playerComponent.call(ReactPlayer$1);
|
|
249
|
+
const ReactPlayerComponent = () => {
|
|
151
250
|
const view = reactSubscribe.useSubscribedState(this.viewUpdateSubscription);
|
|
152
251
|
if (this.options.suspend) {
|
|
153
252
|
this.viewUpdateSubscription.suspend();
|
|
@@ -160,9 +259,9 @@ class WebPlayer {
|
|
|
160
259
|
playerState.fail(err);
|
|
161
260
|
}
|
|
162
261
|
}
|
|
163
|
-
}, /* @__PURE__ */ React__default["default"].createElement(
|
|
262
|
+
}, /* @__PURE__ */ React__default["default"].createElement(PlayerContext.Provider, {
|
|
164
263
|
value: { player: this.player }
|
|
165
|
-
}, /* @__PURE__ */ React__default["default"].createElement(
|
|
264
|
+
}, /* @__PURE__ */ React__default["default"].createElement(AssetContext.Provider, {
|
|
166
265
|
value: {
|
|
167
266
|
registry: this.assetRegistry
|
|
168
267
|
}
|
|
@@ -170,7 +269,7 @@ class WebPlayer {
|
|
|
170
269
|
view
|
|
171
270
|
}))));
|
|
172
271
|
};
|
|
173
|
-
return
|
|
272
|
+
return ReactPlayerComponent;
|
|
174
273
|
}
|
|
175
274
|
setWaitForNextViewUpdate() {
|
|
176
275
|
const shouldCallResetHook = this.options.suspend && this.hooks.onBeforeViewReset.isUsed();
|
|
@@ -186,6 +285,7 @@ class WebPlayer {
|
|
|
186
285
|
}));
|
|
187
286
|
}
|
|
188
287
|
}
|
|
288
|
+
const WebPlayer = ReactPlayer;
|
|
189
289
|
|
|
190
290
|
class StateTapPlugin {
|
|
191
291
|
constructor(callback) {
|
|
@@ -199,11 +299,11 @@ class StateTapPlugin {
|
|
|
199
299
|
}
|
|
200
300
|
}
|
|
201
301
|
|
|
202
|
-
const
|
|
302
|
+
const useReactPlayer = (options) => {
|
|
203
303
|
const [playerState, setPlayerState] = React__default["default"].useState(player.NOT_STARTED_STATE);
|
|
204
|
-
const
|
|
304
|
+
const reactPlayer = React__default["default"].useMemo(() => {
|
|
205
305
|
var _a;
|
|
206
|
-
const
|
|
306
|
+
const rp = new ReactPlayer({
|
|
207
307
|
player: options == null ? void 0 : options.player,
|
|
208
308
|
plugins: [
|
|
209
309
|
...(_a = options == null ? void 0 : options.plugins) != null ? _a : [],
|
|
@@ -211,11 +311,11 @@ const useWebPlayer = (options) => {
|
|
|
211
311
|
],
|
|
212
312
|
suspend: options == null ? void 0 : options.suspend
|
|
213
313
|
});
|
|
214
|
-
return
|
|
314
|
+
return rp;
|
|
215
315
|
}, []);
|
|
216
|
-
const { player: player$1 } =
|
|
316
|
+
const { player: player$1 } = reactPlayer;
|
|
217
317
|
return {
|
|
218
|
-
|
|
318
|
+
reactPlayer,
|
|
219
319
|
player: player$1,
|
|
220
320
|
playerState
|
|
221
321
|
};
|
|
@@ -338,7 +438,7 @@ class ManagedState {
|
|
|
338
438
|
value: "not_started",
|
|
339
439
|
context: {
|
|
340
440
|
playerConfig,
|
|
341
|
-
|
|
441
|
+
reactPlayer: new ReactPlayer(playerConfig),
|
|
342
442
|
manager: options.manager
|
|
343
443
|
}
|
|
344
444
|
};
|
|
@@ -357,14 +457,14 @@ class ManagedState {
|
|
|
357
457
|
restart() {
|
|
358
458
|
var _a;
|
|
359
459
|
if (((_a = this.state) == null ? void 0 : _a.value) === "error") {
|
|
360
|
-
const { playerConfig, manager, prevResult,
|
|
460
|
+
const { playerConfig, manager, prevResult, reactPlayer } = this.state.context;
|
|
361
461
|
this.setState({
|
|
362
462
|
value: "completed",
|
|
363
463
|
context: {
|
|
364
464
|
playerConfig,
|
|
365
465
|
manager,
|
|
366
466
|
result: prevResult,
|
|
367
|
-
|
|
467
|
+
reactPlayer
|
|
368
468
|
}
|
|
369
469
|
});
|
|
370
470
|
} else {
|
|
@@ -377,11 +477,11 @@ class ManagedState {
|
|
|
377
477
|
this.callbacks.forEach((c) => {
|
|
378
478
|
c.onState(state);
|
|
379
479
|
});
|
|
380
|
-
const { manager,
|
|
480
|
+
const { manager, reactPlayer, playerConfig } = state.context;
|
|
381
481
|
try {
|
|
382
482
|
const nextState = yield this.processState(state, {
|
|
383
483
|
manager,
|
|
384
|
-
|
|
484
|
+
reactPlayer,
|
|
385
485
|
playerConfig
|
|
386
486
|
});
|
|
387
487
|
if (nextState) {
|
|
@@ -392,7 +492,7 @@ class ManagedState {
|
|
|
392
492
|
value: "error",
|
|
393
493
|
context: {
|
|
394
494
|
manager,
|
|
395
|
-
|
|
495
|
+
reactPlayer,
|
|
396
496
|
playerConfig,
|
|
397
497
|
error: e
|
|
398
498
|
}
|
|
@@ -438,7 +538,7 @@ class ManagedState {
|
|
|
438
538
|
context: __spreadProps(__spreadValues({}, context), {
|
|
439
539
|
flow: state.context.flow,
|
|
440
540
|
prevResult: state.context.prevResult,
|
|
441
|
-
result: state.context.
|
|
541
|
+
result: state.context.reactPlayer.start(state.context.flow)
|
|
442
542
|
})
|
|
443
543
|
};
|
|
444
544
|
}
|
|
@@ -500,12 +600,12 @@ const ManagedPlayer = (props) => {
|
|
|
500
600
|
React__default["default"].useEffect(() => {
|
|
501
601
|
return () => {
|
|
502
602
|
var _a2, _b;
|
|
503
|
-
const playerState = state == null ? void 0 : state.context.
|
|
603
|
+
const playerState = state == null ? void 0 : state.context.reactPlayer.player.getState();
|
|
504
604
|
if ((state == null ? void 0 : state.value) === "running" && (playerState == null ? void 0 : playerState.status) === "in-progress") {
|
|
505
605
|
(_b = (_a2 = props.manager).terminate) == null ? void 0 : _b.call(_a2, playerState.controllers.data.serialize());
|
|
506
606
|
}
|
|
507
607
|
};
|
|
508
|
-
}, [props.manager, state == null ? void 0 : state.context.
|
|
608
|
+
}, [props.manager, state == null ? void 0 : state.context.reactPlayer.player, state == null ? void 0 : state.value]);
|
|
509
609
|
if ((state == null ? void 0 : state.value) === "error") {
|
|
510
610
|
if (props.fallbackComponent) {
|
|
511
611
|
return /* @__PURE__ */ React__default["default"].createElement(props.fallbackComponent, {
|
|
@@ -522,18 +622,33 @@ const ManagedPlayer = (props) => {
|
|
|
522
622
|
throw state.context.error;
|
|
523
623
|
}
|
|
524
624
|
}
|
|
525
|
-
if (state == null ? void 0 : state.context.
|
|
526
|
-
const { Component } = state.context.
|
|
625
|
+
if (state == null ? void 0 : state.context.reactPlayer) {
|
|
626
|
+
const { Component } = state.context.reactPlayer;
|
|
527
627
|
return /* @__PURE__ */ React__default["default"].createElement(Component, null);
|
|
528
628
|
}
|
|
529
629
|
return null;
|
|
530
630
|
};
|
|
531
631
|
|
|
632
|
+
exports.AssetContext = AssetContext;
|
|
532
633
|
exports.ManagedPlayer = ManagedPlayer;
|
|
634
|
+
exports.PlayerContext = PlayerContext;
|
|
635
|
+
exports.ReactAsset = ReactAsset;
|
|
636
|
+
exports.ReactPlayer = ReactPlayer;
|
|
533
637
|
exports.WebPlayer = WebPlayer;
|
|
638
|
+
exports.buildUrl = buildUrl;
|
|
639
|
+
exports.callOrReturn = callOrReturn;
|
|
640
|
+
exports.isEmptyObject = isEmptyObject;
|
|
641
|
+
exports.isFunction = isFunction;
|
|
642
|
+
exports.removeEmptyValuesFromObject = removeEmptyValuesFromObject;
|
|
643
|
+
exports.trimSlashes = trimSlashes;
|
|
644
|
+
exports.useAssetProps = useAssetProps;
|
|
645
|
+
exports.useGetConstant = useGetConstant;
|
|
646
|
+
exports.useGetConstantByType = useGetConstantByType;
|
|
647
|
+
exports.useLogger = useLogger;
|
|
534
648
|
exports.usePersistentStateMachine = usePersistentStateMachine;
|
|
649
|
+
exports.usePlayer = usePlayer;
|
|
650
|
+
exports.useReactPlayer = useReactPlayer;
|
|
535
651
|
exports.useRequestTime = useRequestTime;
|
|
536
|
-
exports.useWebPlayer = useWebPlayer;
|
|
537
652
|
Object.keys(player).forEach(function (k) {
|
|
538
653
|
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
539
654
|
enumerable: true,
|
package/dist/index.d.ts
CHANGED
|
@@ -1,61 +1,74 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import * as _player_ui_player from '@player-ui/player';
|
|
3
|
-
import { Asset, PlayerPlugin, Player, Flow, CompletedState, PlayerFlowState, FlowResult } from '@player-ui/player';
|
|
2
|
+
import { Asset, AssetWrapper, View, PlayerPlugin, Player, Flow, CompletedState, PlayerFlowState, FlowResult, NavigationFlowViewState, Logger } from '@player-ui/player';
|
|
4
3
|
export * from '@player-ui/player';
|
|
5
|
-
import
|
|
4
|
+
import React from 'react';
|
|
6
5
|
import { SyncWaterfallHook, AsyncParallelHook } from 'tapable-ts';
|
|
6
|
+
import { Registry } from '@player-ui/partial-match-registry';
|
|
7
7
|
import * as _player_ui_types from '@player-ui/types';
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
declare type AssetRegistryType = Registry<React.ComponentType<any>>;
|
|
10
|
+
interface ContextType {
|
|
11
|
+
/**
|
|
12
|
+
* A registry of Asset -> React Components
|
|
13
|
+
*/
|
|
14
|
+
registry?: AssetRegistryType;
|
|
15
|
+
}
|
|
16
|
+
declare const AssetContext: React.Context<ContextType>;
|
|
17
|
+
/**
|
|
18
|
+
* A React Component that looks up an implementation from a registry
|
|
19
|
+
*/
|
|
20
|
+
declare const ReactAsset: (props: Asset<string> | AssetWrapper<Asset<string>>) => JSX.Element;
|
|
21
|
+
|
|
22
|
+
interface ReactPlayerProps {
|
|
10
23
|
/**
|
|
11
24
|
* The Content view object to render
|
|
12
25
|
*/
|
|
13
|
-
view:
|
|
26
|
+
view: View;
|
|
14
27
|
}
|
|
15
28
|
|
|
16
29
|
interface DevtoolsGlobals {
|
|
17
30
|
/** A global for a plugin to load to Player for devtools */
|
|
18
31
|
__PLAYER_DEVTOOLS_PLUGIN?: {
|
|
19
|
-
new ():
|
|
32
|
+
new (): ReactPlayerPlugin;
|
|
20
33
|
};
|
|
21
34
|
}
|
|
22
35
|
declare type DevtoolsWindow = typeof window & DevtoolsGlobals;
|
|
23
|
-
interface
|
|
36
|
+
interface ReactPlayerInfo {
|
|
24
37
|
/** Version of the running player */
|
|
25
38
|
playerVersion: string;
|
|
26
|
-
/** Version of the running
|
|
27
|
-
|
|
39
|
+
/** Version of the running reactPlayer */
|
|
40
|
+
reactPlayerVersion: string;
|
|
28
41
|
/** Hash of the HEAD commit used to build the current player version */
|
|
29
42
|
playerCommit: string;
|
|
30
|
-
/** Hash of the HEAD commit used to build the current
|
|
31
|
-
|
|
43
|
+
/** Hash of the HEAD commit used to build the current reactPlayer version */
|
|
44
|
+
reactPlayerCommit: string;
|
|
32
45
|
}
|
|
33
|
-
interface
|
|
46
|
+
interface ReactPlayerPlugin extends Partial<PlayerPlugin> {
|
|
34
47
|
/** The name of this plugin */
|
|
35
48
|
name: string;
|
|
36
49
|
/**
|
|
37
50
|
* Attach listeners to the web-player instance
|
|
38
51
|
*/
|
|
39
|
-
|
|
52
|
+
applyReact?: (reactPlayer: ReactPlayer) => void;
|
|
40
53
|
}
|
|
41
|
-
interface
|
|
54
|
+
interface ReactPlayerOptions {
|
|
42
55
|
/** A headless player instance to use */
|
|
43
56
|
player?: Player;
|
|
44
57
|
/** A set of plugins to apply to this player */
|
|
45
|
-
plugins?: Array<
|
|
58
|
+
plugins?: Array<ReactPlayerPlugin>;
|
|
46
59
|
/**
|
|
47
|
-
* If the underlying
|
|
48
|
-
* It requires that a `React.Suspense` component handler be somewhere in the `
|
|
60
|
+
* If the underlying reactPlayer.Component should use `React.Suspense` to trigger a loading state while waiting for content or content updates.
|
|
61
|
+
* It requires that a `React.Suspense` component handler be somewhere in the `reactPlayer.Component` hierarchy.
|
|
49
62
|
*/
|
|
50
63
|
suspend?: boolean;
|
|
51
64
|
}
|
|
52
|
-
declare type
|
|
53
|
-
/**
|
|
54
|
-
declare class
|
|
55
|
-
readonly options:
|
|
65
|
+
declare type ReactPlayerComponentProps = Record<string, unknown>;
|
|
66
|
+
/** A Player that renders UI through React */
|
|
67
|
+
declare class ReactPlayer {
|
|
68
|
+
readonly options: ReactPlayerOptions;
|
|
56
69
|
readonly player: Player;
|
|
57
70
|
readonly assetRegistry: AssetRegistryType;
|
|
58
|
-
readonly Component: React.ComponentType<
|
|
71
|
+
readonly Component: React.ComponentType<ReactPlayerComponentProps>;
|
|
59
72
|
readonly hooks: {
|
|
60
73
|
/**
|
|
61
74
|
* A hook to create a React Component to be used for Player, regardless of the current flow state
|
|
@@ -66,49 +79,50 @@ declare class WebPlayer {
|
|
|
66
79
|
* It will be called for each view update from the core player.
|
|
67
80
|
* Typically this will just be `Asset`
|
|
68
81
|
*/
|
|
69
|
-
playerComponent: SyncWaterfallHook<[React.ComponentType<
|
|
82
|
+
playerComponent: SyncWaterfallHook<[React.ComponentType<ReactPlayerProps>], Record<string, any>>;
|
|
70
83
|
/**
|
|
71
84
|
* A hook to execute async tasks before the view resets to undefined
|
|
72
85
|
*/
|
|
73
86
|
onBeforeViewReset: AsyncParallelHook<[], Record<string, any>>;
|
|
74
87
|
};
|
|
75
88
|
private viewUpdateSubscription;
|
|
76
|
-
private
|
|
77
|
-
constructor(options?:
|
|
89
|
+
private reactPlayerInfo;
|
|
90
|
+
constructor(options?: ReactPlayerOptions);
|
|
78
91
|
/** Returns the current version of the underlying core Player */
|
|
79
92
|
getPlayerVersion(): string;
|
|
80
93
|
/** Returns the git commit used to build this core Player version */
|
|
81
94
|
getPlayerCommit(): string;
|
|
82
95
|
/** Find instance of [Plugin] that has been registered to the web player */
|
|
83
|
-
findPlugin<Plugin extends
|
|
96
|
+
findPlugin<Plugin extends ReactPlayerPlugin>(symbol: symbol): Plugin | undefined;
|
|
84
97
|
/** Register and apply [Plugin] if one with the same symbol is not already registered. */
|
|
85
|
-
registerPlugin(plugin:
|
|
98
|
+
registerPlugin(plugin: ReactPlayerPlugin): void;
|
|
86
99
|
/** Returns the current version of the running React Player */
|
|
87
|
-
|
|
100
|
+
getReactPlayerVersion(): string;
|
|
88
101
|
/** Returns the git commit used to build the React Player version */
|
|
89
|
-
|
|
102
|
+
getReactPlayerCommit(): string;
|
|
90
103
|
private createReactComp;
|
|
91
104
|
/**
|
|
92
|
-
* Call this method to force the
|
|
105
|
+
* Call this method to force the ReactPlayer to wait for the next view-update before performing the next render.
|
|
93
106
|
* If the `suspense` option is set, this will suspend while an update is pending, otherwise nothing will be rendered.
|
|
94
107
|
*/
|
|
95
108
|
setWaitForNextViewUpdate(): Promise<void>;
|
|
96
109
|
start(flow: Flow): Promise<CompletedState>;
|
|
97
110
|
}
|
|
111
|
+
declare const WebPlayer: typeof ReactPlayer;
|
|
98
112
|
|
|
99
|
-
interface
|
|
113
|
+
interface UseReactPlayerReturn {
|
|
100
114
|
/** The web-player instance */
|
|
101
|
-
|
|
115
|
+
reactPlayer: ReactPlayer;
|
|
102
116
|
/** Player instance */
|
|
103
117
|
player: Player;
|
|
104
118
|
/** The state of Player */
|
|
105
119
|
playerState: PlayerFlowState;
|
|
106
120
|
}
|
|
107
121
|
/**
|
|
108
|
-
* The `
|
|
122
|
+
* The `useReactPlayer` hook is an easy way to integrate the web-player into your React app.
|
|
109
123
|
* Simply supply your config, plugins, and an optional flow, which will be automatically started for you when changed.
|
|
110
124
|
*/
|
|
111
|
-
declare const
|
|
125
|
+
declare const useReactPlayer: (options?: ReactPlayerOptions | undefined) => UseReactPlayerReturn;
|
|
112
126
|
|
|
113
127
|
interface FinalState {
|
|
114
128
|
/** Mark the iteration as complete */
|
|
@@ -143,7 +157,7 @@ interface FallbackProps {
|
|
|
143
157
|
/** The error that caused the failure */
|
|
144
158
|
error?: Error;
|
|
145
159
|
}
|
|
146
|
-
interface ManagedPlayerProps extends
|
|
160
|
+
interface ManagedPlayerProps extends ReactPlayerOptions {
|
|
147
161
|
/** The manager for populating the next flows */
|
|
148
162
|
manager: FlowManager;
|
|
149
163
|
/** A callback when a flow is started */
|
|
@@ -159,9 +173,9 @@ declare type ManagedPlayerContext = {
|
|
|
159
173
|
/** The flow manager */
|
|
160
174
|
manager: FlowManager;
|
|
161
175
|
/** The web-player */
|
|
162
|
-
|
|
176
|
+
reactPlayer: ReactPlayer;
|
|
163
177
|
/** The config for Player */
|
|
164
|
-
playerConfig:
|
|
178
|
+
playerConfig: ReactPlayerOptions;
|
|
165
179
|
};
|
|
166
180
|
declare type ManagedPlayerState = {
|
|
167
181
|
/** The managed player hasn't started yet */
|
|
@@ -254,7 +268,7 @@ declare class ManagedState {
|
|
|
254
268
|
/** the flow manager to use */
|
|
255
269
|
manager: FlowManager;
|
|
256
270
|
/** the config to use when creating a player */
|
|
257
|
-
playerConfig:
|
|
271
|
+
playerConfig: ReactPlayerOptions;
|
|
258
272
|
}): this;
|
|
259
273
|
/** reset starts from nothing */
|
|
260
274
|
reset(): void;
|
|
@@ -268,7 +282,7 @@ declare const usePersistentStateMachine: (options: {
|
|
|
268
282
|
/** the flow manager to use */
|
|
269
283
|
manager: FlowManager;
|
|
270
284
|
/** Player config */
|
|
271
|
-
playerConfig:
|
|
285
|
+
playerConfig: ReactPlayerOptions;
|
|
272
286
|
/** Any middleware for the manager */
|
|
273
287
|
middleware?: ManagerMiddleware;
|
|
274
288
|
}) => {
|
|
@@ -324,7 +338,59 @@ declare const ManagedPlayer: (props: ManagedPlayerProps) => JSX.Element | null;
|
|
|
324
338
|
/** hook to time a promise and add it to the metrics plugin */
|
|
325
339
|
declare const useRequestTime: () => {
|
|
326
340
|
withRequestTime: <Type>(nextPromise: Promise<Type>) => Promise<Type>;
|
|
327
|
-
RequestTimeMetricsPlugin:
|
|
341
|
+
RequestTimeMetricsPlugin: ReactPlayerPlugin;
|
|
328
342
|
};
|
|
329
343
|
|
|
330
|
-
|
|
344
|
+
interface PlayerContextType {
|
|
345
|
+
/**
|
|
346
|
+
* An instance of a headless player
|
|
347
|
+
*/
|
|
348
|
+
player?: Player;
|
|
349
|
+
/** The currently rendered view state */
|
|
350
|
+
viewState?: NavigationFlowViewState;
|
|
351
|
+
}
|
|
352
|
+
declare const PlayerContext: React.Context<PlayerContextType>;
|
|
353
|
+
/**
|
|
354
|
+
* A hook to get the current player
|
|
355
|
+
*/
|
|
356
|
+
declare const usePlayer: () => Player | undefined;
|
|
357
|
+
|
|
358
|
+
/**
|
|
359
|
+
* A hook to get the logger instance from the current player
|
|
360
|
+
*/
|
|
361
|
+
declare function useLogger(): Logger;
|
|
362
|
+
|
|
363
|
+
/** Common props for any dom node */
|
|
364
|
+
declare function useAssetProps(asset: Asset): {
|
|
365
|
+
id: string;
|
|
366
|
+
'data-asset-type': string;
|
|
367
|
+
};
|
|
368
|
+
|
|
369
|
+
/**
|
|
370
|
+
* Trim leading and trailing slashes from string
|
|
371
|
+
*/
|
|
372
|
+
declare function trimSlashes(str: string): string;
|
|
373
|
+
/**
|
|
374
|
+
* Removes any key: value pairs from an object when the value is null or undefined
|
|
375
|
+
*/
|
|
376
|
+
declare function removeEmptyValuesFromObject(obj: Record<string, any>): Record<string, NonNullable<any>>;
|
|
377
|
+
/** Check if the object has no keys */
|
|
378
|
+
declare function isEmptyObject(obj: Record<string, unknown>): boolean;
|
|
379
|
+
/** Check if the argument is a function */
|
|
380
|
+
declare function isFunction<ReturnType>(maybeFn: ReturnType | ((...args: unknown[]) => ReturnType)): maybeFn is (...args: unknown[]) => ReturnType;
|
|
381
|
+
/**
|
|
382
|
+
* Calls function with provided data or returns original value
|
|
383
|
+
*/
|
|
384
|
+
declare function callOrReturn<ReturnType, FnArgs extends Array<unknown> = unknown[], FnType = (...args: FnArgs) => ReturnType>(maybeFn: FnType | ReturnType, fnArgs: FnArgs): ReturnType;
|
|
385
|
+
|
|
386
|
+
/**
|
|
387
|
+
* Combines a URL with any additional parameters
|
|
388
|
+
*/
|
|
389
|
+
declare function buildUrl(url: string, params?: Record<string, unknown>): string;
|
|
390
|
+
|
|
391
|
+
/** Hook to get a constant under a specific namespace */
|
|
392
|
+
declare function useGetConstantByType(type: string, key: string): unknown;
|
|
393
|
+
/** Get a constant under the default namespace */
|
|
394
|
+
declare function useGetConstant(key: string): unknown;
|
|
395
|
+
|
|
396
|
+
export { AssetContext, AssetRegistryType, ContextType, DevtoolsGlobals, DevtoolsWindow, FallbackProps, FinalState, FlowManager, ManagedPlayer, ManagedPlayerContext, ManagedPlayerProps, ManagedPlayerState, ManagerMiddleware, NextState, PlayerContext, PlayerContextType, ReactAsset, ReactPlayer, ReactPlayerComponentProps, ReactPlayerInfo, ReactPlayerOptions, ReactPlayerPlugin, StateChangeCallback, UseReactPlayerReturn, WebPlayer, buildUrl, callOrReturn, isEmptyObject, isFunction, removeEmptyValuesFromObject, trimSlashes, useAssetProps, useGetConstant, useGetConstantByType, useLogger, usePersistentStateMachine, usePlayer, useReactPlayer, useRequestTime };
|