@multiplayer-app/session-recorder-browser 2.0.84-beta.0 → 2.0.87
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/config/defaults.js +9 -0
- package/dist/config/session-recorder.js +10 -1
- package/dist/index.js +84 -23
- package/dist/index.umd.js +84 -23
- package/dist/sessionWidget/UIManager.js +7 -4
- package/dist/sessionWidget/buttonStateConfigs.d.ts +15 -0
- package/dist/sessionWidget/buttonStateConfigs.js +40 -0
- package/dist/sessionWidget/index.js +17 -18
- package/dist/types/session-recorder.d.ts +18 -0
- package/package.json +6 -4
package/dist/config/defaults.js
CHANGED
|
@@ -33,6 +33,15 @@ export const DEFAULT_WIDGET_TEXT_CONFIG = {
|
|
|
33
33
|
submitDialogCommentPlaceholder: 'Add a message...',
|
|
34
34
|
submitDialogSubmitText: 'Save',
|
|
35
35
|
submitDialogCancelText: 'Cancel',
|
|
36
|
+
buttonTooltipIdle: 'Record an issue',
|
|
37
|
+
buttonTooltipRecording: 'The session is recording. Click to end.',
|
|
38
|
+
buttonTooltipCancel: 'Click to cancel',
|
|
39
|
+
buttonTooltipSent: 'We\'ve sent it over! Thanks!',
|
|
40
|
+
buttonTooltipLoading: 'Starting to record...',
|
|
41
|
+
buttonTooltipContinuousDebugging: 'You’re continuously recording.',
|
|
42
|
+
saveContinuousRecordingSavingText: 'Saving recording...',
|
|
43
|
+
saveContinuousRecordingSavedText: 'Saved',
|
|
44
|
+
saveContinuousRecordingErrorText: 'Error saving the recording',
|
|
36
45
|
};
|
|
37
46
|
export const BASE_CONFIG = {
|
|
38
47
|
apiKey: '',
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { WidgetButtonPlacement } from '../types';
|
|
2
2
|
import { BASE_CONFIG } from './defaults';
|
|
3
3
|
import { getMaskingConfig } from './masking';
|
|
4
|
-
import { isValidString, isValidNumber, isValidBoolean, isValidArray, isValidEnum
|
|
4
|
+
import { isValidString, isValidNumber, isValidBoolean, isValidArray, isValidEnum } from './validators';
|
|
5
5
|
const getWidgetTextOverridesConfig = (config, defaultConfig) => {
|
|
6
6
|
if (!config || typeof config !== 'object') {
|
|
7
7
|
return defaultConfig;
|
|
@@ -27,6 +27,15 @@ const getWidgetTextOverridesConfig = (config, defaultConfig) => {
|
|
|
27
27
|
submitDialogCommentPlaceholder: isValidString(config.submitDialogCommentPlaceholder, defaultConfig.submitDialogCommentPlaceholder),
|
|
28
28
|
submitDialogSubmitText: isValidString(config.submitDialogSubmitText, defaultConfig.submitDialogSubmitText),
|
|
29
29
|
submitDialogCancelText: isValidString(config.submitDialogCancelText, defaultConfig.submitDialogCancelText),
|
|
30
|
+
buttonTooltipIdle: isValidString(config.buttonTooltipIdle, defaultConfig.buttonTooltipIdle),
|
|
31
|
+
buttonTooltipRecording: isValidString(config.buttonTooltipRecording, defaultConfig.buttonTooltipRecording),
|
|
32
|
+
buttonTooltipCancel: isValidString(config.buttonTooltipCancel, defaultConfig.buttonTooltipCancel),
|
|
33
|
+
buttonTooltipSent: isValidString(config.buttonTooltipSent, defaultConfig.buttonTooltipSent),
|
|
34
|
+
buttonTooltipLoading: isValidString(config.buttonTooltipLoading, defaultConfig.buttonTooltipLoading),
|
|
35
|
+
buttonTooltipContinuousDebugging: isValidString(config.buttonTooltipContinuousDebugging, defaultConfig.buttonTooltipContinuousDebugging),
|
|
36
|
+
saveContinuousRecordingSavingText: isValidString(config.saveContinuousRecordingSavingText, defaultConfig.saveContinuousRecordingSavingText),
|
|
37
|
+
saveContinuousRecordingSavedText: isValidString(config.saveContinuousRecordingSavedText, defaultConfig.saveContinuousRecordingSavedText),
|
|
38
|
+
saveContinuousRecordingErrorText: isValidString(config.saveContinuousRecordingErrorText, defaultConfig.saveContinuousRecordingErrorText),
|
|
30
39
|
};
|
|
31
40
|
};
|
|
32
41
|
export const getSessionRecorderConfig = (c) => {
|
package/dist/index.js
CHANGED
|
@@ -7061,7 +7061,7 @@ const CONTINUOUS_DEBUGGING_TIMEOUT = 60000; // 1 minutes
|
|
|
7061
7061
|
const DEBUG_SESSION_MAX_DURATION_SECONDS = 10 * 60 + 30; // TODO: move to shared config otel core
|
|
7062
7062
|
const REMOTE_SESSION_RECORDING_START = 'remote-session-recording:start';
|
|
7063
7063
|
const REMOTE_SESSION_RECORDING_STOP = 'remote-session-recording:stop';
|
|
7064
|
-
const PACKAGE_VERSION_EXPORT = "2.0.
|
|
7064
|
+
const PACKAGE_VERSION_EXPORT = "2.0.87" || 0;
|
|
7065
7065
|
// Regex patterns for OpenTelemetry ignore URLs
|
|
7066
7066
|
const OTEL_IGNORE_URLS = [
|
|
7067
7067
|
// Traces endpoint
|
|
@@ -7132,6 +7132,15 @@ const DEFAULT_WIDGET_TEXT_CONFIG = {
|
|
|
7132
7132
|
submitDialogCommentPlaceholder: 'Add a message...',
|
|
7133
7133
|
submitDialogSubmitText: 'Save',
|
|
7134
7134
|
submitDialogCancelText: 'Cancel',
|
|
7135
|
+
buttonTooltipIdle: 'Record an issue',
|
|
7136
|
+
buttonTooltipRecording: 'The session is recording. Click to end.',
|
|
7137
|
+
buttonTooltipCancel: 'Click to cancel',
|
|
7138
|
+
buttonTooltipSent: 'We\'ve sent it over! Thanks!',
|
|
7139
|
+
buttonTooltipLoading: 'Starting to record...',
|
|
7140
|
+
buttonTooltipContinuousDebugging: 'You’re continuously recording.',
|
|
7141
|
+
saveContinuousRecordingSavingText: 'Saving recording...',
|
|
7142
|
+
saveContinuousRecordingSavedText: 'Saved',
|
|
7143
|
+
saveContinuousRecordingErrorText: 'Error saving the recording',
|
|
7135
7144
|
};
|
|
7136
7145
|
const BASE_CONFIG = {
|
|
7137
7146
|
apiKey: '',
|
|
@@ -7302,6 +7311,15 @@ const getWidgetTextOverridesConfig = (config, defaultConfig) => {
|
|
|
7302
7311
|
submitDialogCommentPlaceholder: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.submitDialogCommentPlaceholder, defaultConfig.submitDialogCommentPlaceholder),
|
|
7303
7312
|
submitDialogSubmitText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.submitDialogSubmitText, defaultConfig.submitDialogSubmitText),
|
|
7304
7313
|
submitDialogCancelText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.submitDialogCancelText, defaultConfig.submitDialogCancelText),
|
|
7314
|
+
buttonTooltipIdle: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipIdle, defaultConfig.buttonTooltipIdle),
|
|
7315
|
+
buttonTooltipRecording: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipRecording, defaultConfig.buttonTooltipRecording),
|
|
7316
|
+
buttonTooltipCancel: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipCancel, defaultConfig.buttonTooltipCancel),
|
|
7317
|
+
buttonTooltipSent: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipSent, defaultConfig.buttonTooltipSent),
|
|
7318
|
+
buttonTooltipLoading: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipLoading, defaultConfig.buttonTooltipLoading),
|
|
7319
|
+
buttonTooltipContinuousDebugging: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipContinuousDebugging, defaultConfig.buttonTooltipContinuousDebugging),
|
|
7320
|
+
saveContinuousRecordingSavingText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.saveContinuousRecordingSavingText, defaultConfig.saveContinuousRecordingSavingText),
|
|
7321
|
+
saveContinuousRecordingSavedText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.saveContinuousRecordingSavedText, defaultConfig.saveContinuousRecordingSavedText),
|
|
7322
|
+
saveContinuousRecordingErrorText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.saveContinuousRecordingErrorText, defaultConfig.saveContinuousRecordingErrorText),
|
|
7305
7323
|
};
|
|
7306
7324
|
};
|
|
7307
7325
|
const getSessionRecorderConfig = (c) => {
|
|
@@ -11127,8 +11145,9 @@ class UIManager {
|
|
|
11127
11145
|
* tooltip, and inner HTML content (Record icon)
|
|
11128
11146
|
*/
|
|
11129
11147
|
setRecorderButtonProps() {
|
|
11148
|
+
var _a;
|
|
11130
11149
|
this.recorderButton.className = 'mp-session-debugger-button';
|
|
11131
|
-
this.recorderButton.dataset.tooltip = 'Record an issue';
|
|
11150
|
+
this.recorderButton.dataset.tooltip = (_a = this.widgetTextOverrides.buttonTooltipIdle) !== null && _a !== void 0 ? _a : 'Record an issue';
|
|
11132
11151
|
(0,_utils__WEBPACK_IMPORTED_MODULE_0__.insertTrustedHTML)(this.recorderButton, `${_templates_icons__WEBPACK_IMPORTED_MODULE_1__.RecordIcon}`);
|
|
11133
11152
|
}
|
|
11134
11153
|
/**
|
|
@@ -11153,8 +11172,7 @@ class UIManager {
|
|
|
11153
11172
|
* The popover includes a logo, heading, and start recording button.
|
|
11154
11173
|
*/
|
|
11155
11174
|
setInitialPopoverProps() {
|
|
11156
|
-
this.initialPopover.className =
|
|
11157
|
-
'mp-session-debugger-popover mp-initial-popover hidden';
|
|
11175
|
+
this.initialPopover.className = 'mp-session-debugger-popover mp-initial-popover hidden';
|
|
11158
11176
|
(0,_utils__WEBPACK_IMPORTED_MODULE_0__.insertTrustedHTML)(this.initialPopover, (0,_templates_initialPopover__WEBPACK_IMPORTED_MODULE_3__.initialPopoverTemplate)(this.widgetTextOverrides, this.showContinuousRecording));
|
|
11159
11177
|
}
|
|
11160
11178
|
/**
|
|
@@ -11174,12 +11192,15 @@ class UIManager {
|
|
|
11174
11192
|
* @param isLoading - Whether the popover button should show a loading state.
|
|
11175
11193
|
*/
|
|
11176
11194
|
setPopoverLoadingState(isLoading) {
|
|
11195
|
+
var _a, _b;
|
|
11177
11196
|
const button = this.initialPopover.querySelector('.mp-session-debugger-popover-button');
|
|
11178
11197
|
if (!button) {
|
|
11179
11198
|
return;
|
|
11180
11199
|
}
|
|
11181
11200
|
button.classList.toggle('disabled', isLoading);
|
|
11182
|
-
button.textContent = isLoading
|
|
11201
|
+
button.textContent = isLoading
|
|
11202
|
+
? ((_a = this.widgetTextOverrides.buttonTooltipLoading) !== null && _a !== void 0 ? _a : 'Starting to record...')
|
|
11203
|
+
: ((_b = this.widgetTextOverrides.startRecordingButtonText) !== null && _b !== void 0 ? _b : 'Start recording');
|
|
11183
11204
|
}
|
|
11184
11205
|
setTimerValue(time) {
|
|
11185
11206
|
const timerElement = this.recordingOverlay.querySelector('.timer');
|
|
@@ -11238,9 +11259,10 @@ class UIManager {
|
|
|
11238
11259
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
11239
11260
|
/* harmony export */ ButtonState: () => (/* binding */ ButtonState),
|
|
11240
11261
|
/* harmony export */ ContinuousRecordingSaveButtonState: () => (/* binding */ ContinuousRecordingSaveButtonState),
|
|
11241
|
-
/* harmony export */
|
|
11242
|
-
/* harmony export */
|
|
11262
|
+
/* harmony export */ getButtonStates: () => (/* binding */ getButtonStates),
|
|
11263
|
+
/* harmony export */ getContinuousRecordingSaveButtonStates: () => (/* binding */ getContinuousRecordingSaveButtonStates)
|
|
11243
11264
|
/* harmony export */ });
|
|
11265
|
+
/* unused harmony exports buttonStates, continuousRecordingSaveButtonStates */
|
|
11244
11266
|
/* harmony import */ var _templates_icons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./templates/icons */ "./src/sessionWidget/templates/icons.ts");
|
|
11245
11267
|
|
|
11246
11268
|
/**
|
|
@@ -11327,6 +11349,46 @@ const continuousRecordingSaveButtonStates = {
|
|
|
11327
11349
|
classes: [],
|
|
11328
11350
|
},
|
|
11329
11351
|
};
|
|
11352
|
+
const buttonTooltipOverrideKeys = {
|
|
11353
|
+
[ButtonState.IDLE]: 'buttonTooltipIdle',
|
|
11354
|
+
[ButtonState.RECORDING]: 'buttonTooltipRecording',
|
|
11355
|
+
[ButtonState.CANCEL]: 'buttonTooltipCancel',
|
|
11356
|
+
[ButtonState.SENT]: 'buttonTooltipSent',
|
|
11357
|
+
[ButtonState.LOADING]: 'buttonTooltipLoading',
|
|
11358
|
+
[ButtonState.CONTINUOUS_DEBUGGING]: 'buttonTooltipContinuousDebugging',
|
|
11359
|
+
};
|
|
11360
|
+
const continuousSaveTextOverrideKeys = {
|
|
11361
|
+
[ContinuousRecordingSaveButtonState.IDLE]: 'saveLastSnapshotButtonText',
|
|
11362
|
+
[ContinuousRecordingSaveButtonState.SAVING]: 'saveContinuousRecordingSavingText',
|
|
11363
|
+
[ContinuousRecordingSaveButtonState.SAVED]: 'saveContinuousRecordingSavedText',
|
|
11364
|
+
[ContinuousRecordingSaveButtonState.ERROR]: 'saveContinuousRecordingErrorText',
|
|
11365
|
+
};
|
|
11366
|
+
function getButtonStates(overrides) {
|
|
11367
|
+
var _a;
|
|
11368
|
+
const resolved = { ...buttonStates };
|
|
11369
|
+
for (const state of Object.keys(buttonStates)) {
|
|
11370
|
+
const overrideKey = buttonTooltipOverrideKeys[state];
|
|
11371
|
+
resolved[state] = {
|
|
11372
|
+
...buttonStates[state],
|
|
11373
|
+
tooltip: (_a = overrides[overrideKey]) !== null && _a !== void 0 ? _a : buttonStates[state].tooltip,
|
|
11374
|
+
};
|
|
11375
|
+
}
|
|
11376
|
+
return resolved;
|
|
11377
|
+
}
|
|
11378
|
+
function getContinuousRecordingSaveButtonStates(overrides) {
|
|
11379
|
+
var _a;
|
|
11380
|
+
const resolved = {
|
|
11381
|
+
...continuousRecordingSaveButtonStates,
|
|
11382
|
+
};
|
|
11383
|
+
for (const state of Object.keys(continuousRecordingSaveButtonStates)) {
|
|
11384
|
+
const overrideKey = continuousSaveTextOverrideKeys[state];
|
|
11385
|
+
resolved[state] = {
|
|
11386
|
+
...continuousRecordingSaveButtonStates[state],
|
|
11387
|
+
textContent: (_a = overrides[overrideKey]) !== null && _a !== void 0 ? _a : continuousRecordingSaveButtonStates[state].textContent,
|
|
11388
|
+
};
|
|
11389
|
+
}
|
|
11390
|
+
return resolved;
|
|
11391
|
+
}
|
|
11330
11392
|
|
|
11331
11393
|
|
|
11332
11394
|
/***/ },
|
|
@@ -11525,7 +11587,7 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
11525
11587
|
this._buttonState = newState;
|
|
11526
11588
|
if (!this.isBrowser)
|
|
11527
11589
|
return;
|
|
11528
|
-
const { icon, tooltip, classes, excludeClasses } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.
|
|
11590
|
+
const { icon, tooltip, classes, excludeClasses } = (0,_buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.getButtonStates)(this._widgetTextOverrides)[newState];
|
|
11529
11591
|
if (newState === _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CANCEL) {
|
|
11530
11592
|
(_a = this.buttonDraggabilityObserver) === null || _a === void 0 ? void 0 : _a.observe(this.recorderButton, {
|
|
11531
11593
|
attributes: true,
|
|
@@ -11563,7 +11625,8 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
11563
11625
|
type: 'error',
|
|
11564
11626
|
message: this._error,
|
|
11565
11627
|
button: {
|
|
11566
|
-
text: 'Close',
|
|
11628
|
+
text: 'Close',
|
|
11629
|
+
onClick: () => this.hideToast(),
|
|
11567
11630
|
},
|
|
11568
11631
|
});
|
|
11569
11632
|
}
|
|
@@ -11710,7 +11773,7 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
11710
11773
|
return;
|
|
11711
11774
|
const saveButton = this.initialPopover.querySelector('#mp-save-continuous-debug-session');
|
|
11712
11775
|
if (saveButton) {
|
|
11713
|
-
const { textContent, disabled } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.
|
|
11776
|
+
const { textContent, disabled } = (0,_buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.getContinuousRecordingSaveButtonStates)(this._widgetTextOverrides)[state];
|
|
11714
11777
|
saveButton.disabled = disabled;
|
|
11715
11778
|
saveButton.textContent = textContent;
|
|
11716
11779
|
}
|
|
@@ -11738,14 +11801,11 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
11738
11801
|
return;
|
|
11739
11802
|
this.buttonDraggabilityObserver = new MutationObserver((mutationsList) => {
|
|
11740
11803
|
for (const mutation of mutationsList) {
|
|
11741
|
-
if (mutation.type === 'attributes' &&
|
|
11742
|
-
mutation.attributeName === 'class') {
|
|
11804
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
11743
11805
|
const oldClassName = mutation.oldValue;
|
|
11744
11806
|
const newClassName = mutation.target['className'];
|
|
11745
|
-
if (((oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')) &&
|
|
11746
|
-
|
|
11747
|
-
((newClassName === null || newClassName === void 0 ? void 0 : newClassName.includes('no-draggable')) &&
|
|
11748
|
-
!(oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')))) {
|
|
11807
|
+
if (((oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')) && !newClassName.includes('no-draggable')) ||
|
|
11808
|
+
((newClassName === null || newClassName === void 0 ? void 0 : newClassName.includes('no-draggable')) && !(oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')))) {
|
|
11749
11809
|
// draggable mode was changed
|
|
11750
11810
|
this.initialPopoverVisible = false;
|
|
11751
11811
|
this.finalPopoverVisible = false;
|
|
@@ -11839,7 +11899,12 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
11839
11899
|
popoverBottom = VIEWPORT_HEIGHT - top + _constants__WEBPACK_IMPORTED_MODULE_3__.POPOVER_DISTANCE_FROM_BUTTON + (isDraggable ? 0 : _constants__WEBPACK_IMPORTED_MODULE_3__.NON_DRAGGABLE_OFFSET);
|
|
11840
11900
|
popoverRight = VIEWPORT_WIDTH - right;
|
|
11841
11901
|
if (popoverBottom + POPOVER_HEIGHT > VIEWPORT_HEIGHT) {
|
|
11842
|
-
popoverBottom =
|
|
11902
|
+
popoverBottom =
|
|
11903
|
+
VIEWPORT_HEIGHT -
|
|
11904
|
+
bottom -
|
|
11905
|
+
POPOVER_HEIGHT -
|
|
11906
|
+
_constants__WEBPACK_IMPORTED_MODULE_3__.POPOVER_DISTANCE_FROM_BUTTON -
|
|
11907
|
+
(isDraggable ? 0 : _constants__WEBPACK_IMPORTED_MODULE_3__.NON_DRAGGABLE_OFFSET);
|
|
11843
11908
|
}
|
|
11844
11909
|
if (popoverRight + _constants__WEBPACK_IMPORTED_MODULE_3__.POPOVER_WIDTH > VIEWPORT_WIDTH) {
|
|
11845
11910
|
popoverRight = VIEWPORT_WIDTH - left - _constants__WEBPACK_IMPORTED_MODULE_3__.POPOVER_WIDTH;
|
|
@@ -11942,9 +12007,7 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
11942
12007
|
this.onCancel();
|
|
11943
12008
|
}
|
|
11944
12009
|
this.initialPopoverVisible = false;
|
|
11945
|
-
this.buttonState = this._continuousRecording
|
|
11946
|
-
? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CONTINUOUS_DEBUGGING
|
|
11947
|
-
: _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.IDLE;
|
|
12010
|
+
this.buttonState = this._continuousRecording ? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CONTINUOUS_DEBUGGING : _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.IDLE;
|
|
11948
12011
|
if (typeof document !== 'undefined') {
|
|
11949
12012
|
document.removeEventListener('click', this.handleClickOutside);
|
|
11950
12013
|
}
|
|
@@ -12011,9 +12074,7 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
12011
12074
|
}
|
|
12012
12075
|
}
|
|
12013
12076
|
else {
|
|
12014
|
-
this.buttonState = this._initialPopoverVisible
|
|
12015
|
-
? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.IDLE
|
|
12016
|
-
: _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CANCEL;
|
|
12077
|
+
this.buttonState = this._initialPopoverVisible ? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.IDLE : _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CANCEL;
|
|
12017
12078
|
this.initialPopoverVisible = !this._initialPopoverVisible;
|
|
12018
12079
|
}
|
|
12019
12080
|
if (typeof document !== 'undefined') {
|
package/dist/index.umd.js
CHANGED
|
@@ -21494,7 +21494,7 @@ const CONTINUOUS_DEBUGGING_TIMEOUT = 60000; // 1 minutes
|
|
|
21494
21494
|
const DEBUG_SESSION_MAX_DURATION_SECONDS = 10 * 60 + 30; // TODO: move to shared config otel core
|
|
21495
21495
|
const REMOTE_SESSION_RECORDING_START = 'remote-session-recording:start';
|
|
21496
21496
|
const REMOTE_SESSION_RECORDING_STOP = 'remote-session-recording:stop';
|
|
21497
|
-
const PACKAGE_VERSION_EXPORT = "2.0.
|
|
21497
|
+
const PACKAGE_VERSION_EXPORT = "2.0.87" || 0;
|
|
21498
21498
|
// Regex patterns for OpenTelemetry ignore URLs
|
|
21499
21499
|
const OTEL_IGNORE_URLS = [
|
|
21500
21500
|
// Traces endpoint
|
|
@@ -21566,6 +21566,15 @@ const DEFAULT_WIDGET_TEXT_CONFIG = {
|
|
|
21566
21566
|
submitDialogCommentPlaceholder: 'Add a message...',
|
|
21567
21567
|
submitDialogSubmitText: 'Save',
|
|
21568
21568
|
submitDialogCancelText: 'Cancel',
|
|
21569
|
+
buttonTooltipIdle: 'Record an issue',
|
|
21570
|
+
buttonTooltipRecording: 'The session is recording. Click to end.',
|
|
21571
|
+
buttonTooltipCancel: 'Click to cancel',
|
|
21572
|
+
buttonTooltipSent: 'We\'ve sent it over! Thanks!',
|
|
21573
|
+
buttonTooltipLoading: 'Starting to record...',
|
|
21574
|
+
buttonTooltipContinuousDebugging: 'You’re continuously recording.',
|
|
21575
|
+
saveContinuousRecordingSavingText: 'Saving recording...',
|
|
21576
|
+
saveContinuousRecordingSavedText: 'Saved',
|
|
21577
|
+
saveContinuousRecordingErrorText: 'Error saving the recording',
|
|
21569
21578
|
};
|
|
21570
21579
|
const BASE_CONFIG = {
|
|
21571
21580
|
apiKey: '',
|
|
@@ -21739,6 +21748,15 @@ const getWidgetTextOverridesConfig = (config, defaultConfig) => {
|
|
|
21739
21748
|
submitDialogCommentPlaceholder: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.submitDialogCommentPlaceholder, defaultConfig.submitDialogCommentPlaceholder),
|
|
21740
21749
|
submitDialogSubmitText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.submitDialogSubmitText, defaultConfig.submitDialogSubmitText),
|
|
21741
21750
|
submitDialogCancelText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.submitDialogCancelText, defaultConfig.submitDialogCancelText),
|
|
21751
|
+
buttonTooltipIdle: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipIdle, defaultConfig.buttonTooltipIdle),
|
|
21752
|
+
buttonTooltipRecording: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipRecording, defaultConfig.buttonTooltipRecording),
|
|
21753
|
+
buttonTooltipCancel: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipCancel, defaultConfig.buttonTooltipCancel),
|
|
21754
|
+
buttonTooltipSent: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipSent, defaultConfig.buttonTooltipSent),
|
|
21755
|
+
buttonTooltipLoading: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipLoading, defaultConfig.buttonTooltipLoading),
|
|
21756
|
+
buttonTooltipContinuousDebugging: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.buttonTooltipContinuousDebugging, defaultConfig.buttonTooltipContinuousDebugging),
|
|
21757
|
+
saveContinuousRecordingSavingText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.saveContinuousRecordingSavingText, defaultConfig.saveContinuousRecordingSavingText),
|
|
21758
|
+
saveContinuousRecordingSavedText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.saveContinuousRecordingSavedText, defaultConfig.saveContinuousRecordingSavedText),
|
|
21759
|
+
saveContinuousRecordingErrorText: (0,_validators__WEBPACK_IMPORTED_MODULE_3__.isValidString)(config.saveContinuousRecordingErrorText, defaultConfig.saveContinuousRecordingErrorText),
|
|
21742
21760
|
};
|
|
21743
21761
|
};
|
|
21744
21762
|
const getSessionRecorderConfig = (c) => {
|
|
@@ -25589,8 +25607,9 @@ class UIManager {
|
|
|
25589
25607
|
* tooltip, and inner HTML content (Record icon)
|
|
25590
25608
|
*/
|
|
25591
25609
|
setRecorderButtonProps() {
|
|
25610
|
+
var _a;
|
|
25592
25611
|
this.recorderButton.className = 'mp-session-debugger-button';
|
|
25593
|
-
this.recorderButton.dataset.tooltip = 'Record an issue';
|
|
25612
|
+
this.recorderButton.dataset.tooltip = (_a = this.widgetTextOverrides.buttonTooltipIdle) !== null && _a !== void 0 ? _a : 'Record an issue';
|
|
25594
25613
|
(0,_utils__WEBPACK_IMPORTED_MODULE_0__.insertTrustedHTML)(this.recorderButton, `${_templates_icons__WEBPACK_IMPORTED_MODULE_1__.RecordIcon}`);
|
|
25595
25614
|
}
|
|
25596
25615
|
/**
|
|
@@ -25615,8 +25634,7 @@ class UIManager {
|
|
|
25615
25634
|
* The popover includes a logo, heading, and start recording button.
|
|
25616
25635
|
*/
|
|
25617
25636
|
setInitialPopoverProps() {
|
|
25618
|
-
this.initialPopover.className =
|
|
25619
|
-
'mp-session-debugger-popover mp-initial-popover hidden';
|
|
25637
|
+
this.initialPopover.className = 'mp-session-debugger-popover mp-initial-popover hidden';
|
|
25620
25638
|
(0,_utils__WEBPACK_IMPORTED_MODULE_0__.insertTrustedHTML)(this.initialPopover, (0,_templates_initialPopover__WEBPACK_IMPORTED_MODULE_3__.initialPopoverTemplate)(this.widgetTextOverrides, this.showContinuousRecording));
|
|
25621
25639
|
}
|
|
25622
25640
|
/**
|
|
@@ -25636,12 +25654,15 @@ class UIManager {
|
|
|
25636
25654
|
* @param isLoading - Whether the popover button should show a loading state.
|
|
25637
25655
|
*/
|
|
25638
25656
|
setPopoverLoadingState(isLoading) {
|
|
25657
|
+
var _a, _b;
|
|
25639
25658
|
const button = this.initialPopover.querySelector('.mp-session-debugger-popover-button');
|
|
25640
25659
|
if (!button) {
|
|
25641
25660
|
return;
|
|
25642
25661
|
}
|
|
25643
25662
|
button.classList.toggle('disabled', isLoading);
|
|
25644
|
-
button.textContent = isLoading
|
|
25663
|
+
button.textContent = isLoading
|
|
25664
|
+
? ((_a = this.widgetTextOverrides.buttonTooltipLoading) !== null && _a !== void 0 ? _a : 'Starting to record...')
|
|
25665
|
+
: ((_b = this.widgetTextOverrides.startRecordingButtonText) !== null && _b !== void 0 ? _b : 'Start recording');
|
|
25645
25666
|
}
|
|
25646
25667
|
setTimerValue(time) {
|
|
25647
25668
|
const timerElement = this.recordingOverlay.querySelector('.timer');
|
|
@@ -25701,9 +25722,10 @@ class UIManager {
|
|
|
25701
25722
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
25702
25723
|
/* harmony export */ ButtonState: () => (/* binding */ ButtonState),
|
|
25703
25724
|
/* harmony export */ ContinuousRecordingSaveButtonState: () => (/* binding */ ContinuousRecordingSaveButtonState),
|
|
25704
|
-
/* harmony export */
|
|
25705
|
-
/* harmony export */
|
|
25725
|
+
/* harmony export */ getButtonStates: () => (/* binding */ getButtonStates),
|
|
25726
|
+
/* harmony export */ getContinuousRecordingSaveButtonStates: () => (/* binding */ getContinuousRecordingSaveButtonStates)
|
|
25706
25727
|
/* harmony export */ });
|
|
25728
|
+
/* unused harmony exports buttonStates, continuousRecordingSaveButtonStates */
|
|
25707
25729
|
/* harmony import */ var _templates_icons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./templates/icons */ "./src/sessionWidget/templates/icons.ts");
|
|
25708
25730
|
|
|
25709
25731
|
/**
|
|
@@ -25790,6 +25812,46 @@ const continuousRecordingSaveButtonStates = {
|
|
|
25790
25812
|
classes: [],
|
|
25791
25813
|
},
|
|
25792
25814
|
};
|
|
25815
|
+
const buttonTooltipOverrideKeys = {
|
|
25816
|
+
[ButtonState.IDLE]: 'buttonTooltipIdle',
|
|
25817
|
+
[ButtonState.RECORDING]: 'buttonTooltipRecording',
|
|
25818
|
+
[ButtonState.CANCEL]: 'buttonTooltipCancel',
|
|
25819
|
+
[ButtonState.SENT]: 'buttonTooltipSent',
|
|
25820
|
+
[ButtonState.LOADING]: 'buttonTooltipLoading',
|
|
25821
|
+
[ButtonState.CONTINUOUS_DEBUGGING]: 'buttonTooltipContinuousDebugging',
|
|
25822
|
+
};
|
|
25823
|
+
const continuousSaveTextOverrideKeys = {
|
|
25824
|
+
[ContinuousRecordingSaveButtonState.IDLE]: 'saveLastSnapshotButtonText',
|
|
25825
|
+
[ContinuousRecordingSaveButtonState.SAVING]: 'saveContinuousRecordingSavingText',
|
|
25826
|
+
[ContinuousRecordingSaveButtonState.SAVED]: 'saveContinuousRecordingSavedText',
|
|
25827
|
+
[ContinuousRecordingSaveButtonState.ERROR]: 'saveContinuousRecordingErrorText',
|
|
25828
|
+
};
|
|
25829
|
+
function getButtonStates(overrides) {
|
|
25830
|
+
var _a;
|
|
25831
|
+
const resolved = { ...buttonStates };
|
|
25832
|
+
for (const state of Object.keys(buttonStates)) {
|
|
25833
|
+
const overrideKey = buttonTooltipOverrideKeys[state];
|
|
25834
|
+
resolved[state] = {
|
|
25835
|
+
...buttonStates[state],
|
|
25836
|
+
tooltip: (_a = overrides[overrideKey]) !== null && _a !== void 0 ? _a : buttonStates[state].tooltip,
|
|
25837
|
+
};
|
|
25838
|
+
}
|
|
25839
|
+
return resolved;
|
|
25840
|
+
}
|
|
25841
|
+
function getContinuousRecordingSaveButtonStates(overrides) {
|
|
25842
|
+
var _a;
|
|
25843
|
+
const resolved = {
|
|
25844
|
+
...continuousRecordingSaveButtonStates,
|
|
25845
|
+
};
|
|
25846
|
+
for (const state of Object.keys(continuousRecordingSaveButtonStates)) {
|
|
25847
|
+
const overrideKey = continuousSaveTextOverrideKeys[state];
|
|
25848
|
+
resolved[state] = {
|
|
25849
|
+
...continuousRecordingSaveButtonStates[state],
|
|
25850
|
+
textContent: (_a = overrides[overrideKey]) !== null && _a !== void 0 ? _a : continuousRecordingSaveButtonStates[state].textContent,
|
|
25851
|
+
};
|
|
25852
|
+
}
|
|
25853
|
+
return resolved;
|
|
25854
|
+
}
|
|
25793
25855
|
|
|
25794
25856
|
|
|
25795
25857
|
/***/ },
|
|
@@ -25991,7 +26053,7 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
25991
26053
|
this._buttonState = newState;
|
|
25992
26054
|
if (!this.isBrowser)
|
|
25993
26055
|
return;
|
|
25994
|
-
const { icon, tooltip, classes, excludeClasses } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.
|
|
26056
|
+
const { icon, tooltip, classes, excludeClasses } = (0,_buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.getButtonStates)(this._widgetTextOverrides)[newState];
|
|
25995
26057
|
if (newState === _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CANCEL) {
|
|
25996
26058
|
(_a = this.buttonDraggabilityObserver) === null || _a === void 0 ? void 0 : _a.observe(this.recorderButton, {
|
|
25997
26059
|
attributes: true,
|
|
@@ -26029,7 +26091,8 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
26029
26091
|
type: 'error',
|
|
26030
26092
|
message: this._error,
|
|
26031
26093
|
button: {
|
|
26032
|
-
text: 'Close',
|
|
26094
|
+
text: 'Close',
|
|
26095
|
+
onClick: () => this.hideToast(),
|
|
26033
26096
|
},
|
|
26034
26097
|
});
|
|
26035
26098
|
}
|
|
@@ -26176,7 +26239,7 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
26176
26239
|
return;
|
|
26177
26240
|
const saveButton = this.initialPopover.querySelector('#mp-save-continuous-debug-session');
|
|
26178
26241
|
if (saveButton) {
|
|
26179
|
-
const { textContent, disabled } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.
|
|
26242
|
+
const { textContent, disabled } = (0,_buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.getContinuousRecordingSaveButtonStates)(this._widgetTextOverrides)[state];
|
|
26180
26243
|
saveButton.disabled = disabled;
|
|
26181
26244
|
saveButton.textContent = textContent;
|
|
26182
26245
|
}
|
|
@@ -26204,14 +26267,11 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
26204
26267
|
return;
|
|
26205
26268
|
this.buttonDraggabilityObserver = new MutationObserver((mutationsList) => {
|
|
26206
26269
|
for (const mutation of mutationsList) {
|
|
26207
|
-
if (mutation.type === 'attributes' &&
|
|
26208
|
-
mutation.attributeName === 'class') {
|
|
26270
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
26209
26271
|
const oldClassName = mutation.oldValue;
|
|
26210
26272
|
const newClassName = mutation.target['className'];
|
|
26211
|
-
if (((oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')) &&
|
|
26212
|
-
|
|
26213
|
-
((newClassName === null || newClassName === void 0 ? void 0 : newClassName.includes('no-draggable')) &&
|
|
26214
|
-
!(oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')))) {
|
|
26273
|
+
if (((oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')) && !newClassName.includes('no-draggable')) ||
|
|
26274
|
+
((newClassName === null || newClassName === void 0 ? void 0 : newClassName.includes('no-draggable')) && !(oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')))) {
|
|
26215
26275
|
// draggable mode was changed
|
|
26216
26276
|
this.initialPopoverVisible = false;
|
|
26217
26277
|
this.finalPopoverVisible = false;
|
|
@@ -26305,7 +26365,12 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
26305
26365
|
popoverBottom = VIEWPORT_HEIGHT - top + _constants__WEBPACK_IMPORTED_MODULE_3__.POPOVER_DISTANCE_FROM_BUTTON + (isDraggable ? 0 : _constants__WEBPACK_IMPORTED_MODULE_3__.NON_DRAGGABLE_OFFSET);
|
|
26306
26366
|
popoverRight = VIEWPORT_WIDTH - right;
|
|
26307
26367
|
if (popoverBottom + POPOVER_HEIGHT > VIEWPORT_HEIGHT) {
|
|
26308
|
-
popoverBottom =
|
|
26368
|
+
popoverBottom =
|
|
26369
|
+
VIEWPORT_HEIGHT -
|
|
26370
|
+
bottom -
|
|
26371
|
+
POPOVER_HEIGHT -
|
|
26372
|
+
_constants__WEBPACK_IMPORTED_MODULE_3__.POPOVER_DISTANCE_FROM_BUTTON -
|
|
26373
|
+
(isDraggable ? 0 : _constants__WEBPACK_IMPORTED_MODULE_3__.NON_DRAGGABLE_OFFSET);
|
|
26309
26374
|
}
|
|
26310
26375
|
if (popoverRight + _constants__WEBPACK_IMPORTED_MODULE_3__.POPOVER_WIDTH > VIEWPORT_WIDTH) {
|
|
26311
26376
|
popoverRight = VIEWPORT_WIDTH - left - _constants__WEBPACK_IMPORTED_MODULE_3__.POPOVER_WIDTH;
|
|
@@ -26408,9 +26473,7 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
26408
26473
|
this.onCancel();
|
|
26409
26474
|
}
|
|
26410
26475
|
this.initialPopoverVisible = false;
|
|
26411
|
-
this.buttonState = this._continuousRecording
|
|
26412
|
-
? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CONTINUOUS_DEBUGGING
|
|
26413
|
-
: _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.IDLE;
|
|
26476
|
+
this.buttonState = this._continuousRecording ? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CONTINUOUS_DEBUGGING : _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.IDLE;
|
|
26414
26477
|
if (typeof document !== 'undefined') {
|
|
26415
26478
|
document.removeEventListener('click', this.handleClickOutside);
|
|
26416
26479
|
}
|
|
@@ -26477,9 +26540,7 @@ class SessionWidget extends _observable__WEBPACK_IMPORTED_MODULE_0__.Observable
|
|
|
26477
26540
|
}
|
|
26478
26541
|
}
|
|
26479
26542
|
else {
|
|
26480
|
-
this.buttonState = this._initialPopoverVisible
|
|
26481
|
-
? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.IDLE
|
|
26482
|
-
: _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CANCEL;
|
|
26543
|
+
this.buttonState = this._initialPopoverVisible ? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.IDLE : _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_8__.ButtonState.CANCEL;
|
|
26483
26544
|
this.initialPopoverVisible = !this._initialPopoverVisible;
|
|
26484
26545
|
}
|
|
26485
26546
|
if (typeof document !== 'undefined') {
|
|
@@ -34,8 +34,9 @@ export class UIManager {
|
|
|
34
34
|
* tooltip, and inner HTML content (Record icon)
|
|
35
35
|
*/
|
|
36
36
|
setRecorderButtonProps() {
|
|
37
|
+
var _a;
|
|
37
38
|
this.recorderButton.className = 'mp-session-debugger-button';
|
|
38
|
-
this.recorderButton.dataset.tooltip = 'Record an issue';
|
|
39
|
+
this.recorderButton.dataset.tooltip = (_a = this.widgetTextOverrides.buttonTooltipIdle) !== null && _a !== void 0 ? _a : 'Record an issue';
|
|
39
40
|
insertTrustedHTML(this.recorderButton, `${RecordIcon}`);
|
|
40
41
|
}
|
|
41
42
|
/**
|
|
@@ -60,8 +61,7 @@ export class UIManager {
|
|
|
60
61
|
* The popover includes a logo, heading, and start recording button.
|
|
61
62
|
*/
|
|
62
63
|
setInitialPopoverProps() {
|
|
63
|
-
this.initialPopover.className =
|
|
64
|
-
'mp-session-debugger-popover mp-initial-popover hidden';
|
|
64
|
+
this.initialPopover.className = 'mp-session-debugger-popover mp-initial-popover hidden';
|
|
65
65
|
insertTrustedHTML(this.initialPopover, initialPopoverTemplate(this.widgetTextOverrides, this.showContinuousRecording));
|
|
66
66
|
}
|
|
67
67
|
/**
|
|
@@ -81,12 +81,15 @@ export class UIManager {
|
|
|
81
81
|
* @param isLoading - Whether the popover button should show a loading state.
|
|
82
82
|
*/
|
|
83
83
|
setPopoverLoadingState(isLoading) {
|
|
84
|
+
var _a, _b;
|
|
84
85
|
const button = this.initialPopover.querySelector('.mp-session-debugger-popover-button');
|
|
85
86
|
if (!button) {
|
|
86
87
|
return;
|
|
87
88
|
}
|
|
88
89
|
button.classList.toggle('disabled', isLoading);
|
|
89
|
-
button.textContent = isLoading
|
|
90
|
+
button.textContent = isLoading
|
|
91
|
+
? ((_a = this.widgetTextOverrides.buttonTooltipLoading) !== null && _a !== void 0 ? _a : 'Starting to record...')
|
|
92
|
+
: ((_b = this.widgetTextOverrides.startRecordingButtonText) !== null && _b !== void 0 ? _b : 'Start recording');
|
|
90
93
|
}
|
|
91
94
|
setTimerValue(time) {
|
|
92
95
|
const timerElement = this.recordingOverlay.querySelector('.timer');
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { WidgetTextOverridesConfig } from '../types';
|
|
1
2
|
/**
|
|
2
3
|
* ButtonState defines the possible states of the recorder button.
|
|
3
4
|
* It includes IDLE, RECORDING, CANCEL, SENT and LOADING states.
|
|
@@ -16,6 +17,17 @@ export declare enum ContinuousRecordingSaveButtonState {
|
|
|
16
17
|
SAVED = "SAVED",
|
|
17
18
|
ERROR = "ERROR"
|
|
18
19
|
}
|
|
20
|
+
type ButtonStateConfig = {
|
|
21
|
+
icon: string;
|
|
22
|
+
tooltip: string;
|
|
23
|
+
classes: string[];
|
|
24
|
+
excludeClasses: string[];
|
|
25
|
+
};
|
|
26
|
+
type ContinuousRecordingSaveButtonConfig = {
|
|
27
|
+
textContent: string;
|
|
28
|
+
disabled: boolean;
|
|
29
|
+
classes: string[];
|
|
30
|
+
};
|
|
19
31
|
/**
|
|
20
32
|
* buttonStates object provides properties for each button state:
|
|
21
33
|
* IDLE, RECORDING, CANCEL, and SENT.
|
|
@@ -80,4 +92,7 @@ export declare const continuousRecordingSaveButtonStates: {
|
|
|
80
92
|
classes: never[];
|
|
81
93
|
};
|
|
82
94
|
};
|
|
95
|
+
export declare function getButtonStates(overrides: WidgetTextOverridesConfig): Record<ButtonState, ButtonStateConfig>;
|
|
96
|
+
export declare function getContinuousRecordingSaveButtonStates(overrides: WidgetTextOverridesConfig): Record<ContinuousRecordingSaveButtonState, ContinuousRecordingSaveButtonConfig>;
|
|
97
|
+
export {};
|
|
83
98
|
//# sourceMappingURL=buttonStateConfigs.d.ts.map
|
|
@@ -83,4 +83,44 @@ export const continuousRecordingSaveButtonStates = {
|
|
|
83
83
|
classes: [],
|
|
84
84
|
},
|
|
85
85
|
};
|
|
86
|
+
const buttonTooltipOverrideKeys = {
|
|
87
|
+
[ButtonState.IDLE]: 'buttonTooltipIdle',
|
|
88
|
+
[ButtonState.RECORDING]: 'buttonTooltipRecording',
|
|
89
|
+
[ButtonState.CANCEL]: 'buttonTooltipCancel',
|
|
90
|
+
[ButtonState.SENT]: 'buttonTooltipSent',
|
|
91
|
+
[ButtonState.LOADING]: 'buttonTooltipLoading',
|
|
92
|
+
[ButtonState.CONTINUOUS_DEBUGGING]: 'buttonTooltipContinuousDebugging',
|
|
93
|
+
};
|
|
94
|
+
const continuousSaveTextOverrideKeys = {
|
|
95
|
+
[ContinuousRecordingSaveButtonState.IDLE]: 'saveLastSnapshotButtonText',
|
|
96
|
+
[ContinuousRecordingSaveButtonState.SAVING]: 'saveContinuousRecordingSavingText',
|
|
97
|
+
[ContinuousRecordingSaveButtonState.SAVED]: 'saveContinuousRecordingSavedText',
|
|
98
|
+
[ContinuousRecordingSaveButtonState.ERROR]: 'saveContinuousRecordingErrorText',
|
|
99
|
+
};
|
|
100
|
+
export function getButtonStates(overrides) {
|
|
101
|
+
var _a;
|
|
102
|
+
const resolved = { ...buttonStates };
|
|
103
|
+
for (const state of Object.keys(buttonStates)) {
|
|
104
|
+
const overrideKey = buttonTooltipOverrideKeys[state];
|
|
105
|
+
resolved[state] = {
|
|
106
|
+
...buttonStates[state],
|
|
107
|
+
tooltip: (_a = overrides[overrideKey]) !== null && _a !== void 0 ? _a : buttonStates[state].tooltip,
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
return resolved;
|
|
111
|
+
}
|
|
112
|
+
export function getContinuousRecordingSaveButtonStates(overrides) {
|
|
113
|
+
var _a;
|
|
114
|
+
const resolved = {
|
|
115
|
+
...continuousRecordingSaveButtonStates,
|
|
116
|
+
};
|
|
117
|
+
for (const state of Object.keys(continuousRecordingSaveButtonStates)) {
|
|
118
|
+
const overrideKey = continuousSaveTextOverrideKeys[state];
|
|
119
|
+
resolved[state] = {
|
|
120
|
+
...continuousRecordingSaveButtonStates[state],
|
|
121
|
+
textContent: (_a = overrides[overrideKey]) !== null && _a !== void 0 ? _a : continuousRecordingSaveButtonStates[state].textContent,
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
return resolved;
|
|
125
|
+
}
|
|
86
126
|
//# sourceMappingURL=buttonStateConfigs.js.map
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { Observable } from '../observable';
|
|
2
2
|
import { insertTrustedHTML, injectStylesIntoShadowRoot, formatTimeForSessionTimer } from '../utils';
|
|
3
3
|
import { SessionState } from '../types';
|
|
4
|
-
import { POPOVER_WIDTH, NON_DRAGGABLE_OFFSET, POPOVER_DISTANCE_FROM_BUTTON
|
|
4
|
+
import { POPOVER_WIDTH, NON_DRAGGABLE_OFFSET, POPOVER_DISTANCE_FROM_BUTTON } from './constants';
|
|
5
5
|
import { DEFAULT_WIDGET_TEXT_CONFIG } from '../config';
|
|
6
6
|
import { isBrowser, isBrowserExtension } from '../global';
|
|
7
7
|
import { UIManager } from './UIManager';
|
|
8
8
|
import { DragManager } from './dragManager';
|
|
9
|
-
import { ButtonState,
|
|
9
|
+
import { ButtonState, getButtonStates, getContinuousRecordingSaveButtonStates, } from './buttonStateConfigs';
|
|
10
10
|
// Import styles as string for shadow DOM injection
|
|
11
11
|
import widgetStyles from './styles/index.scss?raw';
|
|
12
12
|
import './styles/button.scss';
|
|
@@ -16,7 +16,7 @@ export class SessionWidget extends Observable {
|
|
|
16
16
|
this._buttonState = newState;
|
|
17
17
|
if (!this.isBrowser)
|
|
18
18
|
return;
|
|
19
|
-
const { icon, tooltip, classes, excludeClasses } =
|
|
19
|
+
const { icon, tooltip, classes, excludeClasses } = getButtonStates(this._widgetTextOverrides)[newState];
|
|
20
20
|
if (newState === ButtonState.CANCEL) {
|
|
21
21
|
(_a = this.buttonDraggabilityObserver) === null || _a === void 0 ? void 0 : _a.observe(this.recorderButton, {
|
|
22
22
|
attributes: true,
|
|
@@ -54,7 +54,8 @@ export class SessionWidget extends Observable {
|
|
|
54
54
|
type: 'error',
|
|
55
55
|
message: this._error,
|
|
56
56
|
button: {
|
|
57
|
-
text: 'Close',
|
|
57
|
+
text: 'Close',
|
|
58
|
+
onClick: () => this.hideToast(),
|
|
58
59
|
},
|
|
59
60
|
});
|
|
60
61
|
}
|
|
@@ -201,7 +202,7 @@ export class SessionWidget extends Observable {
|
|
|
201
202
|
return;
|
|
202
203
|
const saveButton = this.initialPopover.querySelector('#mp-save-continuous-debug-session');
|
|
203
204
|
if (saveButton) {
|
|
204
|
-
const { textContent, disabled } =
|
|
205
|
+
const { textContent, disabled } = getContinuousRecordingSaveButtonStates(this._widgetTextOverrides)[state];
|
|
205
206
|
saveButton.disabled = disabled;
|
|
206
207
|
saveButton.textContent = textContent;
|
|
207
208
|
}
|
|
@@ -229,14 +230,11 @@ export class SessionWidget extends Observable {
|
|
|
229
230
|
return;
|
|
230
231
|
this.buttonDraggabilityObserver = new MutationObserver((mutationsList) => {
|
|
231
232
|
for (const mutation of mutationsList) {
|
|
232
|
-
if (mutation.type === 'attributes' &&
|
|
233
|
-
mutation.attributeName === 'class') {
|
|
233
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
234
234
|
const oldClassName = mutation.oldValue;
|
|
235
235
|
const newClassName = mutation.target['className'];
|
|
236
|
-
if (((oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')) &&
|
|
237
|
-
|
|
238
|
-
((newClassName === null || newClassName === void 0 ? void 0 : newClassName.includes('no-draggable')) &&
|
|
239
|
-
!(oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')))) {
|
|
236
|
+
if (((oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')) && !newClassName.includes('no-draggable')) ||
|
|
237
|
+
((newClassName === null || newClassName === void 0 ? void 0 : newClassName.includes('no-draggable')) && !(oldClassName === null || oldClassName === void 0 ? void 0 : oldClassName.includes('no-draggable')))) {
|
|
240
238
|
// draggable mode was changed
|
|
241
239
|
this.initialPopoverVisible = false;
|
|
242
240
|
this.finalPopoverVisible = false;
|
|
@@ -330,7 +328,12 @@ export class SessionWidget extends Observable {
|
|
|
330
328
|
popoverBottom = VIEWPORT_HEIGHT - top + POPOVER_DISTANCE_FROM_BUTTON + (isDraggable ? 0 : NON_DRAGGABLE_OFFSET);
|
|
331
329
|
popoverRight = VIEWPORT_WIDTH - right;
|
|
332
330
|
if (popoverBottom + POPOVER_HEIGHT > VIEWPORT_HEIGHT) {
|
|
333
|
-
popoverBottom =
|
|
331
|
+
popoverBottom =
|
|
332
|
+
VIEWPORT_HEIGHT -
|
|
333
|
+
bottom -
|
|
334
|
+
POPOVER_HEIGHT -
|
|
335
|
+
POPOVER_DISTANCE_FROM_BUTTON -
|
|
336
|
+
(isDraggable ? 0 : NON_DRAGGABLE_OFFSET);
|
|
334
337
|
}
|
|
335
338
|
if (popoverRight + POPOVER_WIDTH > VIEWPORT_WIDTH) {
|
|
336
339
|
popoverRight = VIEWPORT_WIDTH - left - POPOVER_WIDTH;
|
|
@@ -433,9 +436,7 @@ export class SessionWidget extends Observable {
|
|
|
433
436
|
this.onCancel();
|
|
434
437
|
}
|
|
435
438
|
this.initialPopoverVisible = false;
|
|
436
|
-
this.buttonState = this._continuousRecording
|
|
437
|
-
? ButtonState.CONTINUOUS_DEBUGGING
|
|
438
|
-
: ButtonState.IDLE;
|
|
439
|
+
this.buttonState = this._continuousRecording ? ButtonState.CONTINUOUS_DEBUGGING : ButtonState.IDLE;
|
|
439
440
|
if (typeof document !== 'undefined') {
|
|
440
441
|
document.removeEventListener('click', this.handleClickOutside);
|
|
441
442
|
}
|
|
@@ -502,9 +503,7 @@ export class SessionWidget extends Observable {
|
|
|
502
503
|
}
|
|
503
504
|
}
|
|
504
505
|
else {
|
|
505
|
-
this.buttonState = this._initialPopoverVisible
|
|
506
|
-
? ButtonState.IDLE
|
|
507
|
-
: ButtonState.CANCEL;
|
|
506
|
+
this.buttonState = this._initialPopoverVisible ? ButtonState.IDLE : ButtonState.CANCEL;
|
|
508
507
|
this.initialPopoverVisible = !this._initialPopoverVisible;
|
|
509
508
|
}
|
|
510
509
|
if (typeof document !== 'undefined') {
|
|
@@ -305,6 +305,24 @@ export interface WidgetTextOverridesConfig {
|
|
|
305
305
|
submitDialogSubmitText?: string;
|
|
306
306
|
/** Text for the cancel button in dialog */
|
|
307
307
|
submitDialogCancelText?: string;
|
|
308
|
+
/** Tooltip when the recorder button is idle */
|
|
309
|
+
buttonTooltipIdle?: string;
|
|
310
|
+
/** Tooltip while a session is recording */
|
|
311
|
+
buttonTooltipRecording?: string;
|
|
312
|
+
/** Tooltip when cancel is available */
|
|
313
|
+
buttonTooltipCancel?: string;
|
|
314
|
+
/** Tooltip after the recording was sent */
|
|
315
|
+
buttonTooltipSent?: string;
|
|
316
|
+
/** Tooltip while the recorder is starting */
|
|
317
|
+
buttonTooltipLoading?: string;
|
|
318
|
+
/** Tooltip during continuous debugging */
|
|
319
|
+
buttonTooltipContinuousDebugging?: string;
|
|
320
|
+
/** Label while a continuous recording is being saved */
|
|
321
|
+
saveContinuousRecordingSavingText?: string;
|
|
322
|
+
/** Label after a continuous recording was saved */
|
|
323
|
+
saveContinuousRecordingSavedText?: string;
|
|
324
|
+
/** Label when saving a continuous recording failed */
|
|
325
|
+
saveContinuousRecordingErrorText?: string;
|
|
308
326
|
}
|
|
309
327
|
/**
|
|
310
328
|
* Configuration interface for the ApiService class
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@multiplayer-app/session-recorder-browser",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.87",
|
|
4
4
|
"description": "Multiplayer Fullstack Session Recorder for Browser",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Multiplayer Software, Inc.",
|
|
@@ -28,7 +28,9 @@
|
|
|
28
28
|
"types": "./dist/index.d.ts",
|
|
29
29
|
"import": "./dist/index.js",
|
|
30
30
|
"require": "./dist/index.umd.js"
|
|
31
|
-
}
|
|
31
|
+
},
|
|
32
|
+
"./browser": "./dist/browser/index.js",
|
|
33
|
+
"./exporters": "./dist/exporters/index.js"
|
|
32
34
|
},
|
|
33
35
|
"engines": {
|
|
34
36
|
"node": ">=18",
|
|
@@ -49,7 +51,7 @@
|
|
|
49
51
|
"preversion": "npm run lint",
|
|
50
52
|
"postversion:skip": "git push && git push --tags",
|
|
51
53
|
"build": "rm -rf dist tsconfig.tsbuildinfo && tsc && webpack --config-name esm --config-name umd && node scripts/sync-exports.js",
|
|
52
|
-
"build:browser": "webpack --config-name browser && node scripts/sync-exports.js",
|
|
54
|
+
"build:browser": "webpack --config-name browser && node scripts/patch-canvas-worker.mjs && node scripts/sync-exports.js",
|
|
53
55
|
"build:exporters": "webpack --config-name exporters && node scripts/sync-exports.js",
|
|
54
56
|
"build:extras": "webpack --config-name browser --config-name exporters && node scripts/sync-exports.js",
|
|
55
57
|
"build:all": "rm -rf dist tsconfig.tsbuildinfo && tsc && webpack && node scripts/sync-exports.js",
|
|
@@ -73,7 +75,7 @@
|
|
|
73
75
|
"webpack-cli": "5.1.4"
|
|
74
76
|
},
|
|
75
77
|
"dependencies": {
|
|
76
|
-
"@multiplayer-app/session-recorder-common": "2.0.
|
|
78
|
+
"@multiplayer-app/session-recorder-common": "2.0.87",
|
|
77
79
|
"@opentelemetry/core": "2.0.1",
|
|
78
80
|
"@opentelemetry/exporter-trace-otlp-http": "0.203.0",
|
|
79
81
|
"@opentelemetry/instrumentation": "0.203.0",
|