@multiplayer-app/session-recorder-browser 1.2.32 → 1.2.34

package/dist/index.umd.js

@@ -24317,7 +24317,7 @@ const DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE = 100000;
 const SESSION_RESPONSE = 'multiplayer-debug-session-response';
 const CONTINUOUS_DEBUGGING_TIMEOUT = 60000; // 1 minutes
 const DEBUG_SESSION_MAX_DURATION_SECONDS = 10 * 60 + 30; // TODO: move to shared config otel core
-const PACKAGE_VERSION_EXPORT = "1.2.32" || 0;
+const PACKAGE_VERSION_EXPORT = "1.2.34" || 0;
 // Regex patterns for OpenTelemetry ignore URLs
 const OTEL_IGNORE_URLS = [
     // Traces endpoint
@@ -26756,41 +26756,75 @@ class SessionRecorder extends lib0_observable__WEBPACK_IMPORTED_MODULE_14__.Obse
      * Register session widget event listeners for controlling session actions
      */
     _registerWidgetEvents() {
-        this._sessionWidget.on('toggle', (state, comment) => {
+        this._sessionWidget.on('start', () => {
             this.error = '';
-            if (state) {
-                this.start(_multiplayer_app_session_recorder_common__WEBPACK_IMPORTED_MODULE_11__.SessionType.MANUAL);
-            }
-            else {
-                this.stop(comment === null || comment === void 0 ? void 0 : comment.trim());
-            }
+            this._handleStart();
+        });
+        this._sessionWidget.on('stop', (comment) => {
+            this.error = '';
+            this._handleStop(comment);
         });
         this._sessionWidget.on('pause', () => {
             this.error = '';
-            this.pause();
+            this._handlePause();
         });
         this._sessionWidget.on('resume', () => {
             this.error = '';
-            this.resume();
+            this._handleResume();
         });
         this._sessionWidget.on('cancel', () => {
             this.error = '';
-            this.cancel();
+            this._handleCancel();
         });
         this._sessionWidget.on('continuous-debugging', (enabled) => {
             this.error = '';
             if (enabled) {
-                this.start(_multiplayer_app_session_recorder_common__WEBPACK_IMPORTED_MODULE_11__.SessionType.CONTINUOUS);
+                this._handleContinuousDebugging();
             }
             else {
-                this.stop();
+                this._handleStop();
             }
         });
         this._sessionWidget.on('save', () => {
             this.error = '';
-            this.save();
+            this._handleSave();
         });
     }
+    _handleStart() {
+        if (this.sessionState === _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.stopped) {
+            this.start(_multiplayer_app_session_recorder_common__WEBPACK_IMPORTED_MODULE_11__.SessionType.MANUAL);
+        }
+    }
+    _handleStop(comment) {
+        if (this.sessionState === _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.started || this.sessionState === _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.paused) {
+            this.stop(comment);
+        }
+    }
+    _handlePause() {
+        if (this.sessionState === _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.started) {
+            this.pause();
+        }
+    }
+    _handleResume() {
+        if (this.sessionState === _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.paused) {
+            this.resume();
+        }
+    }
+    _handleCancel() {
+        if (this.sessionState === _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.started || this.sessionState === _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.paused) {
+            this.cancel();
+        }
+    }
+    _handleSave() {
+        if (this.sessionState === _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.started && this.continuousRecording) {
+            this.save();
+        }
+    }
+    _handleContinuousDebugging() {
+        if (this.sessionState === _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.stopped) {
+            this.start(_multiplayer_app_session_recorder_common__WEBPACK_IMPORTED_MODULE_11__.SessionType.CONTINUOUS);
+        }
+    }
     /**
      * Register session limit reaching listeners for controlling session end
      */
@@ -26847,6 +26881,7 @@ class SessionRecorder extends lib0_observable__WEBPACK_IMPORTED_MODULE_14__.Obse
         }
         catch (error) {
             this.error = error.message;
+            this.sessionState = _types__WEBPACK_IMPORTED_MODULE_3__.SessionState.stopped;
             if (this.continuousRecording) {
                 this.sessionType = _multiplayer_app_session_recorder_common__WEBPACK_IMPORTED_MODULE_11__.SessionType.MANUAL;
             }
@@ -27290,6 +27325,7 @@ class DragManager {
         this.isDragging = false;
         this.dragStarted = false;
         this.isOnLeftHalfOfScreen = false;
+        this.isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
         this.recorderButton = recorderButton;
         this.recorderPlacement = recorderPlacement;
         this.onDragEnd = onDragEnd;
@@ -27297,10 +27333,14 @@ class DragManager {
         this.onRecordingButtonClick = onRecordingButtonClick;
     }
     init() {
+        if (!this.isBrowser)
+            return;
         this.loadStoredPosition();
         this.setupDragListeners();
     }
     loadStoredPosition() {
+        if (!this.isBrowser || typeof window === 'undefined' || typeof localStorage === 'undefined')
+            return;
         const savedPosition = localStorage.getItem(_constants__WEBPACK_IMPORTED_MODULE_0__.POSITION_STATE_KEY);
         if (!savedPosition) {
             return;
@@ -27331,11 +27371,15 @@ class DragManager {
         });
     }
     savePosition(r, b) {
+        if (!this.isBrowser || typeof window === 'undefined' || typeof localStorage === 'undefined')
+            return;
         const right = (r / window.innerWidth) * 100;
         const bottom = (b / window.innerHeight) * 100;
         localStorage.setItem(_constants__WEBPACK_IMPORTED_MODULE_0__.POSITION_STATE_KEY, JSON.stringify({ right, bottom }));
     }
     setupDragListeners() {
+        if (!this.isBrowser || typeof document === 'undefined' || typeof window === 'undefined')
+            return;
         this.recorderButton.addEventListener('mousedown', (e) => {
             const onMouseUp = () => {
                 const isDraggable = !this.recorderButton.classList.contains('no-draggable');
@@ -27430,29 +27474,37 @@ class DragManager {
 
 class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observable {
     set buttonState(newState) {
+        var _a, _b;
         this._buttonState = newState;
+        if (!this.isBrowser)
+            return;
         const { icon, tooltip, classes, excludeClasses } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.buttonStates[newState];
         if (newState === _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CANCEL) {
-            this.buttonDraggabilityObserver.observe(this.recorderButton, {
+            (_a = this.buttonDraggabilityObserver) === null || _a === void 0 ? void 0 : _a.observe(this.recorderButton, {
                 attributes: true,
                 attributeOldValue: true,
                 attributeFilter: ['class'],
             });
         }
         else {
-            this.buttonDraggabilityObserver.disconnect();
+            (_b = this.buttonDraggabilityObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
         }
+        this.uiManager.setPopoverLoadingState(newState === _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.LOADING);
         this.updateButton(icon, tooltip, excludeClasses, classes);
     }
     set initialPopoverVisible(v) {
         var _a;
         this._initialPopoverVisible = v;
-        (_a = this.initialPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
+        if (this.isBrowser) {
+            (_a = this.initialPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
+        }
     }
     set finalPopoverVisible(v) {
         var _a;
         this._finalPopoverVisible = v;
-        (_a = this.finalPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
+        if (this.isBrowser) {
+            (_a = this.finalPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
+        }
     }
     get error() {
         return this._error;
@@ -27471,6 +27523,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
     }
     set isStarted(v) {
         this._isStarted = v;
+        if (!this.isBrowser)
+            return;
         if (!this.showRecorderButton && v && !this._continuousRecording) {
             this.overlay.classList.remove('hidden');
             this.makeOverlayDraggable();
@@ -27490,7 +27544,6 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
             else {
                 this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CONTINUOUS_DEBUGGING;
             }
-            this.uiManager.setPopoverLoadingState(false);
         }
         else {
             this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
@@ -27498,6 +27551,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
     }
     set isPaused(v) {
         this._isPaused = v;
+        if (!this.isBrowser)
+            return;
         if (this._isInitialized && !this.showRecorderButton && v && !this._continuousRecording) {
             this.overlay.classList.add('hidden');
             this.submitSessionDialog.classList.remove('hidden');
@@ -27541,6 +27596,18 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
                 }
             }
         };
+        this.isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+        if (!this.isBrowser) {
+            // Create dummy elements for SSR to prevent crashes
+            this.recorderButton = {};
+            this.initialPopover = {};
+            this.finalPopover = {};
+            this.overlay = {};
+            this.toast = {};
+            this.submitSessionDialog = {};
+            this.uiManager = {};
+            return;
+        }
         this.recorderButton = document.createElement('button');
         this.initialPopover = document.createElement('div');
         this.finalPopover = document.createElement('div');
@@ -27579,6 +27646,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         }
     }
     updateContinuousRecordingState(checked, disabled = false) {
+        if (!this.isBrowser)
+            return;
         const toggleCheckbox = this.initialPopover.querySelector('#mp-session-debugger-continuous-debugging-checkbox');
         if (toggleCheckbox) {
             toggleCheckbox.checked = checked;
@@ -27586,6 +27655,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         }
     }
     updateSaveContinuousDebugSessionState(state) {
+        if (!this.isBrowser)
+            return;
         const saveButton = this.initialPopover.querySelector('#mp-save-continuous-debug-session');
         if (saveButton) {
             const { textContent, disabled } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.continuousRecordingSaveButtonStates[state];
@@ -27599,15 +27670,21 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
      * @param duration - Duration in milliseconds to show the toast (default: 10000ms)
      */
     showToast(config, duration = 10000) {
+        if (!this.isBrowser)
+            return;
         this.uiManager.showToast(config, duration);
     }
     /**
      * Hides the currently displayed toast message
      */
     hideToast() {
+        if (!this.isBrowser)
+            return;
         this.uiManager.hideToast();
     }
     observeButtonDraggableMode() {
+        if (!this.isBrowser)
+            return;
         this.buttonDraggabilityObserver = new MutationObserver((mutationsList) => {
             for (const mutation of mutationsList) {
                 if (mutation.type === 'attributes' &&
@@ -27629,6 +27706,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
     init(options) {
         if (this._isInitialized)
             return;
+        if (!this.isBrowser)
+            return;
         this._isInitialized = true;
         this.showRecorderButton = options.showWidget;
         this._showContinuousRecording = options.showContinuousRecording;
@@ -27668,6 +27747,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         this.addEventListeners();
     }
     appendElements(elements) {
+        if (!this.isBrowser || typeof document === 'undefined')
+            return;
         const rootWrapper = document.createElement('mp-root');
         rootWrapper.classList.add('mp-root-wrapper');
         rootWrapper.setAttribute('data-rr-ignore', 'true');
@@ -27675,6 +27756,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         document.body.appendChild(rootWrapper);
     }
     addRecorderDragFunctionality() {
+        if (!this.isBrowser)
+            return;
         this.dragManager = new _dragManager__WEBPACK_IMPORTED_MODULE_2__.DragManager(this.recorderButton, this._recorderPlacement, () => {
             if (this._isPaused) {
                 this.finalPopoverVisible = true;
@@ -27683,6 +27766,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         this.dragManager.init();
     }
     updatePopoverPosition() {
+        if (!this.isBrowser || typeof window === 'undefined')
+            return;
         const { top, right, bottom, left } = this.recorderButton.getBoundingClientRect();
         const isDraggable = !this.recorderButton.classList.contains('no-draggable');
         const POPOVER_HEIGHT = this._isStarted ? 400 : 300;
@@ -27719,6 +27804,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         });
     }
     addEventListeners() {
+        if (!this.isBrowser)
+            return;
         const events = [];
         if (this.showRecorderButton) {
             events.push({
@@ -27776,34 +27863,47 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         });
     }
     handleStopRecording() {
+        if (!this.isBrowser)
+            return;
         this.onStop();
         this.handleUIReseting();
     }
     handleUIReseting() {
+        if (!this.isBrowser)
+            return;
         this.finalPopoverVisible = false;
         this.resetRecordingButton();
     }
     handleCloseInitialPopover() {
+        if (!this.isBrowser)
+            return;
         if (this._buttonState === _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.LOADING) {
             this.onCancel();
-            this.uiManager.setPopoverLoadingState(false);
         }
         this.initialPopoverVisible = false;
         this.buttonState = this._continuousRecording
             ? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CONTINUOUS_DEBUGGING
             : _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
-        document.removeEventListener('click', this.handleClickOutside);
+        if (typeof document !== 'undefined') {
+            document.removeEventListener('click', this.handleClickOutside);
+        }
     }
     handleCloseFinalPopover() {
         this.onResume();
     }
     onRequestError() {
+        if (!this.isBrowser)
+            return;
         this.initialPopoverVisible = false;
         this.finalPopoverVisible = false;
         this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
-        document.removeEventListener('click', this.handleClickOutside);
+        if (typeof document !== 'undefined') {
+            document.removeEventListener('click', this.handleClickOutside);
+        }
     }
     handleDismissRecording() {
+        if (!this.isBrowser)
+            return;
         this.onCancel();
         this.finalPopoverVisible = !this._finalPopoverVisible;
         this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
@@ -27822,6 +27922,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         (_a = element === null || element === void 0 ? void 0 : element.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.addEventListener(event, handler);
     }
     onRecordingButtonClick(e) {
+        if (!this.isBrowser)
+            return;
         if (this.buttonClickExternalHandler) {
             const shouldPropagate = this.buttonClickExternalHandler();
             if (shouldPropagate === false) {
@@ -27853,15 +27955,17 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
                 : _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CANCEL;
             this.initialPopoverVisible = !this._initialPopoverVisible;
         }
-        if (this._initialPopoverVisible || this._finalPopoverVisible) {
-            document.addEventListener('click', this.handleClickOutside);
-        }
-        else {
-            document.removeEventListener('click', this.handleClickOutside);
+        if (typeof document !== 'undefined') {
+            if (this._initialPopoverVisible || this._finalPopoverVisible) {
+                document.addEventListener('click', this.handleClickOutside);
+            }
+            else {
+                document.removeEventListener('click', this.handleClickOutside);
+            }
         }
     }
     updateButton(innerHTML, tooltip, excludeClasses, classes) {
-        if (!this.recorderButton)
+        if (!this.isBrowser || !this.recorderButton)
             return;
         (0,_utils__WEBPACK_IMPORTED_MODULE_0__.insertTrustedHTML)(this.recorderButton, `${innerHTML}`);
         this.recorderButton.dataset['tooltip'] = tooltip;
@@ -27883,15 +27987,16 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
     }
     startRecording() {
         this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.LOADING;
-        this.uiManager.setPopoverLoadingState(true);
         this.onStart();
     }
     onStart() {
         if (!this.recorderButton)
             return;
-        this.emit('toggle', [true]);
+        this.emit('start', []);
     }
     onStop() {
+        if (!this.isBrowser)
+            return;
         if (this.showRecorderButton && !this.recorderButton)
             return;
         this.submitSessionDialog.classList.add('hidden');
@@ -27899,16 +28004,18 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
             ? this.commentTextarea
             : this.submitSessionDialog.querySelector('#mp-recording-comment');
         if (commentElement) {
-            this.emit('toggle', [false, commentElement.value]);
+            this.emit('stop', [commentElement.value]);
             commentElement.value = '';
             return;
         }
-        this.emit('toggle', [false, '']);
+        this.emit('stop', []);
     }
     onPause() {
         this.emit('pause', []);
     }
     onResume() {
+        if (!this.isBrowser)
+            return;
         this.finalPopoverVisible = false;
         if (!this._continuousRecording) {
             this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.RECORDING;
@@ -27919,28 +28026,35 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         }
     }
     onCancel() {
+        if (!this.isBrowser)
+            return;
         this.submitSessionDialog.classList.add('hidden');
         this.emit('cancel', []);
     }
     enable() {
-        if (!this.recorderButton)
+        if (!this.isBrowser || !this.recorderButton)
             return;
         this.recorderButton.disabled = false;
         this.recorderButton.style.opacity = '1';
     }
     disable() {
-        if (!this.recorderButton)
+        if (!this.isBrowser || !this.recorderButton)
             return;
         this.recorderButton.disabled = true;
         this.recorderButton.style.opacity = '0.5';
     }
     destroy() {
-        if (!this.recorderButton)
+        if (!this.isBrowser || !this.recorderButton || typeof document === 'undefined')
             return;
-        document.body.removeChild(this.recorderButton);
+        const rootWrapper = document.querySelector('.mp-root-wrapper');
+        if (rootWrapper && rootWrapper.contains(this.recorderButton)) {
+            document.body.removeChild(rootWrapper);
+        }
         document.removeEventListener('click', this.handleClickOutside);
     }
     startTimer() {
+        if (!this.isBrowser)
+            return;
         if (this.timerInterval) {
             clearInterval(this.timerInterval);
             this.timerInterval = null;
@@ -27959,6 +28073,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         }
     }
     makeOverlayDraggable() {
+        if (!this.isBrowser || typeof document === 'undefined')
+            return;
         const element = this.overlay;
         const dragHandle = element.querySelector('.mp-drag-handle');
         if (!dragHandle)