@openreplay/tracker 11.0.0-beta.1 → 11.0.0

package/cjs/app/index.d.ts

@@ -54,6 +54,7 @@ type AppOptions = {
     sessionStorage: Storage | null;
     forceSingleTab?: boolean;
     disableStringDict?: boolean;
+    assistSocketHost?: string;
     onStart?: StartCallback;
     network?: NetworkOptions;
 } & WebworkerOptions & SessOptions;

package/cjs/app/index.js

@@ -42,7 +42,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '11.0.0-beta.1'; // TODO: version compatability check inside each plugin.
+        this.version = '11.0.0'; // TODO: version compatability check inside each plugin.
         this.compressionThreshold = 24 * 1000;
         this.restartAttempts = 0;
         this.bc = null;
@@ -72,6 +72,7 @@ class App {
             sessionStorage: null,
             disableStringDict: false,
             forceSingleTab: false,
+            assistSocketHost: '',
         }, options);
         if (!this.options.forceSingleTab && globalThis && 'BroadcastChannel' in globalThis) {
             const host = location.hostname.split('.').slice(-2).join('_');

package/cjs/index.js

@@ -162,7 +162,7 @@ class API {
             // no-cors issue only with text/plain or not-set Content-Type
             // req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
             req.send(JSON.stringify({
-                trackerVersion: '11.0.0-beta.1',
+                trackerVersion: '11.0.0',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/cjs/modules/userTesting/index.d.ts

@@ -25,7 +25,7 @@ export default class UserTestManager {
     collapseWidget: () => boolean;
     removeGreeting: () => boolean;
     createGreeting(title: string, micRequired: boolean, cameraRequired: boolean): void;
-    showWidget(description: string, tasks: {
+    showWidget(guidelines: string, tasks: {
         title: string;
         description: string;
         task_id: number;
@@ -33,7 +33,7 @@ export default class UserTestManager {
     }[], inProgress?: boolean): void;
     createTitleSection(): HTMLElement;
     toggleDescriptionVisibility: () => void;
-    createDescriptionSection(description: string): HTMLElement;
+    createDescriptionSection(guidelines: string): HTMLElement;
     currentTaskIndex: number;
     createTasksSection(tasks: {
         title: string;

package/cjs/modules/userTesting/index.js

@@ -140,7 +140,7 @@ class UserTestManager {
         const noticeElement = createElement('div', 'notice', styles.noticeStyle, `Please note that your ${micRequired ? 'audio,' : ''} ${cameraRequired ? 'video,' : ''} ${micRequired || cameraRequired ? 'and' : ''} screen will be recorded for research purposes during this test.`);
         const buttonElement = createElement('div', 'button', styles.buttonStyle, 'Read guidelines to begin');
         this.removeGreeting = () => {
-            this.container.innerHTML = '';
+            // this.container.innerHTML = ''
             if (micRequired || cameraRequired) {
                 void this.userRecorder.startRecording(30, recorder_js_1.Quality.Standard, micRequired, cameraRequired);
             }
@@ -155,13 +155,13 @@ class UserTestManager {
             this.removeGreeting();
             this.durations.testStart = this.app.timestamp();
             void this.signalTest('begin');
-            this.showWidget(((_a = this.test) === null || _a === void 0 ? void 0 : _a.description) || '', ((_b = this.test) === null || _b === void 0 ? void 0 : _b.tasks) || []);
+            this.showWidget(((_a = this.test) === null || _a === void 0 ? void 0 : _a.guidelines) || '', ((_b = this.test) === null || _b === void 0 ? void 0 : _b.tasks) || []);
         };
         this.container.append(titleElement, descriptionElement, noticeElement, buttonElement);
         this.bg.appendChild(this.container);
         document.body.appendChild(this.bg);
     }
-    showWidget(description, tasks, inProgress) {
+    showWidget(guidelines, tasks, inProgress) {
         this.container.innerHTML = '';
         Object.assign(this.bg.style, {
             position: 'fixed',
@@ -179,7 +179,7 @@ class UserTestManager {
         // Create title section
         const titleSection = this.createTitleSection();
         Object.assign(this.container.style, styles.containerWidgetStyle);
-        const descriptionSection = this.createDescriptionSection(description);
+        const descriptionSection = this.createDescriptionSection(guidelines);
         const tasksSection = this.createTasksSection(tasks);
         const stopButton = createElement('div', 'stop_bn_or', styles.stopWidgetStyle, 'Abort Session');
         this.container.append(titleSection, descriptionSection, tasksSection, stopButton);
@@ -234,7 +234,7 @@ class UserTestManager {
         this.collapseWidget = () => toggleWidget(false);
         return title;
     }
-    createDescriptionSection(description) {
+    createDescriptionSection(guidelines) {
         const section = createElement('div', 'description_section_or', styles.descriptionWidgetStyle);
         const titleContainer = createElement('div', 'description_s_title_or', styles.sectionTitleStyle);
         const title = createElement('div', 'title', {}, 'Introduction & Guidelines');
@@ -242,9 +242,10 @@ class UserTestManager {
         const content = createElement('div', 'content', styles.contentStyle);
         const descriptionC = createElement('div', 'text_description', {
             maxHeight: '250px',
-            overflow: 'scroll',
+            overflowY: 'auto',
+            whiteSpace: 'pre-wrap',
         });
-        descriptionC.innerHTML = description;
+        descriptionC.innerHTML = guidelines;
         const button = createElement('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test');
         titleContainer.append(title, icon);
         content.append(descriptionC, button);
@@ -388,21 +389,24 @@ class UserTestManager {
     }
     showEndSection() {
         var _a, _b, _c, _d, _e, _f;
+        let isLoading = true;
         void this.signalTest('done');
         const section = createElement('div', 'end_section_or', styles.endSectionStyle);
         const title = createElement('div', 'end_title_or', {
             fontSize: '1.25rem',
             fontWeight: '500',
         }, ((_a = this.test) === null || _a === void 0 ? void 0 : _a.reqMic) || ((_b = this.test) === null || _b === void 0 ? void 0 : _b.reqCamera) ? 'Uploading test recording...' : 'Thank you! 👍');
-        const description = createElement('div', 'end_description_or', {}, (_d = (_c = this.test) === null || _c === void 0 ? void 0 : _c.conclusion) !== null && _d !== void 0 ? _d : 'Thank you for participating in our user test. Your feedback has been captured and will be used to enhance our website. \n' +
+        const description = createElement('div', 'end_description_or', {}, (_d = (_c = this.test) === null || _c === void 0 ? void 0 : _c.conclusion) !== null && _d !== void 0 ? _d : 'Thank you for participating in our usability test. Your feedback has been captured and will be used to enhance our website. \n' +
             '\n' +
             'We appreciate your time and valuable input.');
+        const button = createElement('div', 'end_button_or', styles.buttonWidgetStyle, 'Uploading session...');
         if (((_e = this.test) === null || _e === void 0 ? void 0 : _e.reqMic) || ((_f = this.test) === null || _f === void 0 ? void 0 : _f.reqCamera)) {
-            this.userRecorder.sendToAPI().then(() => {
+            void this.userRecorder.sendToAPI().then(() => {
                 title.textContent = 'Thank you! 👍';
+                button.textContent = 'End Session';
+                isLoading = false;
             });
         }
-        const button = createElement('div', 'end_button_or', styles.buttonWidgetStyle, 'End Session');
         if (this.taskSection) {
             this.container.removeChild(this.taskSection);
         }
@@ -413,6 +417,9 @@ class UserTestManager {
             this.container.removeChild(this.stopButton);
         }
         button.onclick = () => {
+            if (isLoading)
+                return;
+            window.close();
             document.body.removeChild(this.bg);
         };
         section.append(title, description, button);

package/lib/app/index.d.ts

@@ -54,6 +54,7 @@ type AppOptions = {
     sessionStorage: Storage | null;
     forceSingleTab?: boolean;
     disableStringDict?: boolean;
+    assistSocketHost?: string;
     onStart?: StartCallback;
     network?: NetworkOptions;
 } & WebworkerOptions & SessOptions;

package/lib/app/index.js

@@ -39,7 +39,7 @@ export default class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '11.0.0-beta.1'; // TODO: version compatability check inside each plugin.
+        this.version = '11.0.0'; // TODO: version compatability check inside each plugin.
         this.compressionThreshold = 24 * 1000;
         this.restartAttempts = 0;
         this.bc = null;
@@ -69,6 +69,7 @@ export default class App {
             sessionStorage: null,
             disableStringDict: false,
             forceSingleTab: false,
+            assistSocketHost: '',
         }, options);
         if (!this.options.forceSingleTab && globalThis && 'BroadcastChannel' in globalThis) {
             const host = location.hostname.split('.').slice(-2).join('_');

package/lib/index.js

@@ -157,7 +157,7 @@ export default class API {
             // no-cors issue only with text/plain or not-set Content-Type
             // req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
             req.send(JSON.stringify({
-                trackerVersion: '11.0.0-beta.1',
+                trackerVersion: '11.0.0',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/lib/modules/userTesting/index.d.ts

@@ -25,7 +25,7 @@ export default class UserTestManager {
     collapseWidget: () => boolean;
     removeGreeting: () => boolean;
     createGreeting(title: string, micRequired: boolean, cameraRequired: boolean): void;
-    showWidget(description: string, tasks: {
+    showWidget(guidelines: string, tasks: {
         title: string;
         description: string;
         task_id: number;
@@ -33,7 +33,7 @@ export default class UserTestManager {
     }[], inProgress?: boolean): void;
     createTitleSection(): HTMLElement;
     toggleDescriptionVisibility: () => void;
-    createDescriptionSection(description: string): HTMLElement;
+    createDescriptionSection(guidelines: string): HTMLElement;
     currentTaskIndex: number;
     createTasksSection(tasks: {
         title: string;

package/lib/modules/userTesting/index.js

@@ -138,7 +138,7 @@ export default class UserTestManager {
         const noticeElement = createElement('div', 'notice', styles.noticeStyle, `Please note that your ${micRequired ? 'audio,' : ''} ${cameraRequired ? 'video,' : ''} ${micRequired || cameraRequired ? 'and' : ''} screen will be recorded for research purposes during this test.`);
         const buttonElement = createElement('div', 'button', styles.buttonStyle, 'Read guidelines to begin');
         this.removeGreeting = () => {
-            this.container.innerHTML = '';
+            // this.container.innerHTML = ''
             if (micRequired || cameraRequired) {
                 void this.userRecorder.startRecording(30, Quality.Standard, micRequired, cameraRequired);
             }
@@ -153,13 +153,13 @@ export default class UserTestManager {
             this.removeGreeting();
             this.durations.testStart = this.app.timestamp();
             void this.signalTest('begin');
-            this.showWidget(((_a = this.test) === null || _a === void 0 ? void 0 : _a.description) || '', ((_b = this.test) === null || _b === void 0 ? void 0 : _b.tasks) || []);
+            this.showWidget(((_a = this.test) === null || _a === void 0 ? void 0 : _a.guidelines) || '', ((_b = this.test) === null || _b === void 0 ? void 0 : _b.tasks) || []);
         };
         this.container.append(titleElement, descriptionElement, noticeElement, buttonElement);
         this.bg.appendChild(this.container);
         document.body.appendChild(this.bg);
     }
-    showWidget(description, tasks, inProgress) {
+    showWidget(guidelines, tasks, inProgress) {
         this.container.innerHTML = '';
         Object.assign(this.bg.style, {
             position: 'fixed',
@@ -177,7 +177,7 @@ export default class UserTestManager {
         // Create title section
         const titleSection = this.createTitleSection();
         Object.assign(this.container.style, styles.containerWidgetStyle);
-        const descriptionSection = this.createDescriptionSection(description);
+        const descriptionSection = this.createDescriptionSection(guidelines);
         const tasksSection = this.createTasksSection(tasks);
         const stopButton = createElement('div', 'stop_bn_or', styles.stopWidgetStyle, 'Abort Session');
         this.container.append(titleSection, descriptionSection, tasksSection, stopButton);
@@ -232,7 +232,7 @@ export default class UserTestManager {
         this.collapseWidget = () => toggleWidget(false);
         return title;
     }
-    createDescriptionSection(description) {
+    createDescriptionSection(guidelines) {
         const section = createElement('div', 'description_section_or', styles.descriptionWidgetStyle);
         const titleContainer = createElement('div', 'description_s_title_or', styles.sectionTitleStyle);
         const title = createElement('div', 'title', {}, 'Introduction & Guidelines');
@@ -240,9 +240,10 @@ export default class UserTestManager {
         const content = createElement('div', 'content', styles.contentStyle);
         const descriptionC = createElement('div', 'text_description', {
             maxHeight: '250px',
-            overflow: 'scroll',
+            overflowY: 'auto',
+            whiteSpace: 'pre-wrap',
         });
-        descriptionC.innerHTML = description;
+        descriptionC.innerHTML = guidelines;
         const button = createElement('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test');
         titleContainer.append(title, icon);
         content.append(descriptionC, button);
@@ -386,21 +387,24 @@ export default class UserTestManager {
     }
     showEndSection() {
         var _a, _b, _c, _d, _e, _f;
+        let isLoading = true;
         void this.signalTest('done');
         const section = createElement('div', 'end_section_or', styles.endSectionStyle);
         const title = createElement('div', 'end_title_or', {
             fontSize: '1.25rem',
             fontWeight: '500',
         }, ((_a = this.test) === null || _a === void 0 ? void 0 : _a.reqMic) || ((_b = this.test) === null || _b === void 0 ? void 0 : _b.reqCamera) ? 'Uploading test recording...' : 'Thank you! 👍');
-        const description = createElement('div', 'end_description_or', {}, (_d = (_c = this.test) === null || _c === void 0 ? void 0 : _c.conclusion) !== null && _d !== void 0 ? _d : 'Thank you for participating in our user test. Your feedback has been captured and will be used to enhance our website. \n' +
+        const description = createElement('div', 'end_description_or', {}, (_d = (_c = this.test) === null || _c === void 0 ? void 0 : _c.conclusion) !== null && _d !== void 0 ? _d : 'Thank you for participating in our usability test. Your feedback has been captured and will be used to enhance our website. \n' +
             '\n' +
             'We appreciate your time and valuable input.');
+        const button = createElement('div', 'end_button_or', styles.buttonWidgetStyle, 'Uploading session...');
         if (((_e = this.test) === null || _e === void 0 ? void 0 : _e.reqMic) || ((_f = this.test) === null || _f === void 0 ? void 0 : _f.reqCamera)) {
-            this.userRecorder.sendToAPI().then(() => {
+            void this.userRecorder.sendToAPI().then(() => {
                 title.textContent = 'Thank you! 👍';
+                button.textContent = 'End Session';
+                isLoading = false;
             });
         }
-        const button = createElement('div', 'end_button_or', styles.buttonWidgetStyle, 'End Session');
         if (this.taskSection) {
             this.container.removeChild(this.taskSection);
         }
@@ -411,6 +415,9 @@ export default class UserTestManager {
             this.container.removeChild(this.stopButton);
         }
         button.onclick = () => {
+            if (isLoading)
+                return;
+            window.close();
             document.body.removeChild(this.bg);
         };
         section.append(title, description, button);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "11.0.0-beta.1",
+  "version": "11.0.0",
   "keywords": [
     "logging",
     "replay"