@openreplay/tracker - npm Package Compare versions

Comparing version 11.0.0 to 11.0.1

CHANGELOG.md

@@ -0,1 +1,5 @@
+# 11.0.1
+
+- minor fixes and refactoring
+
 # 11.0.0
@@ -2,0 +6,0 @@

cjs/app/index.d.ts

@@ -130,2 +130,5 @@ import type Message from './messages.gen.js';
     private _start;
+    onUxtCb: never[];
+    addOnUxtCb(cb: (id: number) => void): void;
+    getUxtId(): number | null;
     /**
@@ -132,0 +135,0 @@ * basically we ask other tabs during constructor

cjs/app/index.js

@@ -45,3 +45,3 @@ "use strict";
         this.activityState = ActivityState.NotActive;
-        this.version = '11.0.0'; // TODO: version compatability check inside each plugin.
+        this.version = '11.0.1'; // TODO: version compatability check inside each plugin.
         this.compressionThreshold = 24 * 1000;
@@ -53,2 +53,3 @@ this.restartAttempts = 0;
         this.delay = 0;
+        this.onUxtCb = [];
         // if (options.onStart !== undefined) {
@@ -206,3 +207,2 @@ //   deprecationWarn("'onStart' option", "tracker.start().then(/* handle session info */)")
         }
-        this.uxtManager = new index_js_1.default(this, uxtStorageKey);
     }
@@ -519,2 +519,5 @@ _debug(context, e) {
             this.restartAttempts = 0;
+            this.uxtManager = this.uxtManager
+                ? this.uxtManager
+                : new index_js_1.default(this, uxtStorageKey);
             let uxtId;
@@ -532,4 +535,16 @@ const savedUxtTag = this.localStorage.getItem(uxtStorageKey);
             }
-            if (uxtId)
-                this.uxtManager.getTest(uxtId, token, Boolean(savedUxtTag));
+            if (uxtId) {
+                if (!this.uxtManager.isActive) {
+                    // eslint-disable-next-line
+                    this.uxtManager.getTest(uxtId, token, Boolean(savedUxtTag)).then((id) => {
+                        if (id) {
+                            this.onUxtCb.forEach((cb) => cb(id));
+                        }
+                    });
+                }
+                else {
+                    // @ts-ignore
+                    this.onUxtCb.forEach((cb) => cb(uxtId));
+                }
+            }
             return SuccessfulStart(onStartInfo);
@@ -548,2 +563,10 @@ })
     }
+    addOnUxtCb(cb) {
+        // @ts-ignore
+        this.onUxtCb.push(cb);
+    }
+    getUxtId() {
+        var _a;
+        return (_a = this.uxtManager) === null || _a === void 0 ? void 0 : _a.getTestId();
+    }
     /**
@@ -550,0 +573,0 @@ * basically we ask other tabs during constructor

cjs/index.d.ts

@@ -50,2 +50,3 @@ import App from './app/index.js';
     getTabId(): string | null;
+    getUxId(): number | null;
     sessionID(): string | null | undefined;
@@ -52,0 +53,0 @@ getSessionURL(options?: {

cjs/index.js

@@ -165,3 +165,3 @@ "use strict";
             req.send(JSON.stringify({
-                trackerVersion: '11.0.0',
+                trackerVersion: '11.0.1',
                 projectKey: options.projectKey,
@@ -242,2 +242,8 @@ doNotTrack,
     }
+    getUxId() {
+        if (this.app === null) {
+            return null;
+        }
+        return this.app.getUxtId();
+    }
     sessionID() {
@@ -244,0 +250,0 @@ (0, utils_js_1.deprecationWarn)("'sessionID' method", "'getSessionID' method", '/');

cjs/modules/userTesting/index.d.ts

@@ -11,2 +11,3 @@ import App from '../../app/index.js';
     private widgetVisible;
+    isActive: boolean;
     private descriptionSection;
@@ -16,10 +17,9 @@ private taskSection;
     private stopButton;
+    private stopButtonContainer;
     private test;
     private testId;
-    private token;
-    private readonly durations;
+    private signalManager;
     constructor(app: App, storageKey: string);
-    signalTask: (taskId: number, status: 'begin' | 'done' | 'skipped', answer?: string) => void | Promise<Response>;
-    signalTest: (status: 'begin' | 'done' | 'skipped') => Promise<Response>;
-    getTest: (id: number, token: string, inProgress?: boolean) => void;
+    getTestId(): number | null;
+    getTest: (id: number, token: string, inProgress?: boolean) => Promise<number | void>;
     hideTaskSection: () => boolean;
@@ -26,0 +26,0 @@ showTaskSection: () => boolean;

cjs/modules/userTesting/index.js

@@ -6,14 +6,4 @@ "use strict";
 const dnd_js_1 = require("./dnd.js");
-function createElement(tag, className, styles, textContent, id) {
-    const element = document.createElement(tag);
-    element.className = className;
-    Object.assign(element.style, styles);
-    if (textContent) {
-        element.textContent = textContent;
-    }
-    if (id) {
-        element.id = id;
-    }
-    return element;
-}
+const utils_js_1 = require("./utils.js");
+const SignalManager_js_1 = require("./SignalManager.js");
 class UserTestManager {
@@ -23,7 +13,8 @@ constructor(app, storageKey) {
         this.storageKey = storageKey;
-        this.bg = createElement('div', 'bg', styles.bgStyle, undefined, '__or_ut_bg');
-        this.container = createElement('div', 'container', styles.containerStyle, undefined, '__or_ut_ct');
+        this.bg = (0, utils_js_1.createElement)('div', 'bg', styles.bgStyle, undefined, '__or_ut_bg');
+        this.container = (0, utils_js_1.createElement)('div', 'container', styles.containerStyle, undefined, '__or_ut_ct');
         this.widgetGuidelinesVisible = true;
         this.widgetTasksVisible = false;
         this.widgetVisible = true;
+        this.isActive = false;
         this.descriptionSection = null;
@@ -33,65 +24,10 @@ this.taskSection = null;
         this.stopButton = null;
+        this.stopButtonContainer = null;
         this.test = null;
         this.testId = null;
-        this.token = null;
-        this.durations = {
-            testStart: 0,
-            tasks: [],
-        };
-        this.signalTask = (taskId, status, answer) => {
-            if (!taskId)
-                return console.error('OR: no task id');
-            const taskStart = this.durations.tasks.find((t) => t.taskId === taskId);
-            const timestamp = this.app.timestamp();
-            const duration = taskStart ? timestamp - taskStart.started : 0;
-            const ingest = this.app.options.ingestPoint;
-            return fetch(`${ingest}/v1/web/uxt/signals/task`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    taskId,
-                    status,
-                    duration,
-                    timestamp,
-                    answer,
-                }),
-            });
-        };
-        this.signalTest = (status) => {
-            const timestamp = this.app.timestamp();
-            if (status === 'begin' && this.testId) {
-                this.app.localStorage.setItem(this.storageKey, this.testId.toString());
-                this.app.localStorage.setItem('or_uxt_test_start', timestamp.toString());
-            }
-            else {
-                this.app.localStorage.removeItem(this.storageKey);
-                this.app.localStorage.removeItem('or_uxt_task_index');
-                this.app.localStorage.removeItem('or_uxt_test_start');
-            }
-            const ingest = this.app.options.ingestPoint;
-            const start = this.durations.testStart || timestamp;
-            const duration = timestamp - start;
-            return fetch(`${ingest}/v1/web/uxt/signals/test`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    status,
-                    duration,
-                    timestamp,
-                }),
-            });
-        };
+        this.signalManager = null;
         this.getTest = (id, token, inProgress) => {
             this.testId = id;
-            this.token = token;
             const ingest = this.app.options.ingestPoint;
-            fetch(`${ingest}/v1/web/uxt/test/${id}`, {
+            return fetch(`${ingest}/v1/web/uxt/test/${id}`, {
                 headers: {
@@ -103,3 +39,5 @@ Authorization: `Bearer ${token}`,
                 .then(({ test }) => {
+                this.isActive = true;
                 this.test = test;
+                this.signalManager = new SignalManager_js_1.default(this.app.options.ingestPoint, () => this.app.timestamp(), token, id, this.storageKey, (k, v) => this.app.localStorage.setItem(k, v), (k) => this.app.localStorage.removeItem(k), (k) => this.app.localStorage.getItem(k), () => this.app.getSessionID());
                 this.createGreeting(test.title, test.reqMic, test.reqCamera);
@@ -114,2 +52,3 @@ if (inProgress) {
             })
+                .then(() => id)
                 .catch((err) => {
@@ -128,21 +67,24 @@ console.log('OR: Error fetching test', err);
         const sessionId = this.app.getSessionID();
-        const savedSessionId = this.app.localStorage.getItem('or_uxt_session_id');
+        const savedSessionId = this.app.localStorage.getItem(utils_js_1.SESSION_ID);
         if (sessionId !== savedSessionId) {
             this.app.localStorage.removeItem(this.storageKey);
-            this.app.localStorage.removeItem('or_uxt_session_id');
-            this.app.localStorage.removeItem('or_uxt_test_id');
-            this.app.localStorage.removeItem('or_uxt_task_index');
-            this.app.localStorage.removeItem('or_uxt_test_start');
+            this.app.localStorage.removeItem(utils_js_1.SESSION_ID);
+            this.app.localStorage.removeItem(utils_js_1.TEST_ID);
+            this.app.localStorage.removeItem(utils_js_1.TASK_IND);
+            this.app.localStorage.removeItem(utils_js_1.TEST_START);
         }
-        const taskIndex = this.app.localStorage.getItem('or_uxt_task_index');
+        const taskIndex = this.app.localStorage.getItem(utils_js_1.TASK_IND);
         if (taskIndex) {
             this.currentTaskIndex = parseInt(taskIndex, 10);
-            this.durations.testStart = parseInt(this.app.localStorage.getItem('or_uxt_test_start'), 10);
         }
     }
+    getTestId() {
+        return this.testId;
+    }
     createGreeting(title, micRequired, cameraRequired) {
-        const titleElement = createElement('div', 'title', styles.titleStyle, title);
-        const descriptionElement = createElement('div', 'description', styles.descriptionStyle, 'Welcome, this session will be recorded. You have complete control, and can stop the session at any time.');
-        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');
+        const titleElement = (0, utils_js_1.createElement)('div', 'title', styles.titleStyle, title);
+        const descriptionElement = (0, utils_js_1.createElement)('div', 'description', styles.descriptionStyle, `Welcome, you're here to help us improve, not to be judged. Your insights matter!\n
+📹 We're recording this browser tab to learn from your experience.
+🎤 Please enable mic and camera if asked, to give us a complete picture.`);
+        const buttonElement = (0, utils_js_1.createElement)('div', 'button', styles.buttonStyle, 'Read guidelines to begin');
         this.removeGreeting = () => {
@@ -154,3 +96,2 @@ // this.container.innerHTML = ''
             this.container.removeChild(buttonElement);
-            this.container.removeChild(noticeElement);
             this.container.removeChild(descriptionElement);
@@ -161,9 +102,15 @@ this.container.removeChild(titleElement);
         buttonElement.onclick = () => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             this.removeGreeting();
-            this.durations.testStart = this.app.timestamp();
-            void this.signalTest('begin');
-            this.showWidget(((_a = this.test) === null || _a === void 0 ? void 0 : _a.guidelines) || '', ((_b = this.test) === null || _b === void 0 ? void 0 : _b.tasks) || []);
+            const durations = (_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.getDurations();
+            if (durations && this.signalManager) {
+                durations.testStart = this.app.timestamp();
+                this.signalManager.setDurations(durations);
+            }
+            void ((_b = this.signalManager) === null || _b === void 0 ? void 0 : _b.signalTest('begin'));
+            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+            Object.assign(this.container.style, styles.containerWidgetStyle);
+            this.showWidget(((_c = this.test) === null || _c === void 0 ? void 0 : _c.guidelines) || '', ((_d = this.test) === null || _d === void 0 ? void 0 : _d.tasks) || []);
         };
-        this.container.append(titleElement, descriptionElement, noticeElement, buttonElement);
+        this.container.append(titleElement, descriptionElement, buttonElement);
         this.bg.appendChild(this.container);
@@ -189,14 +136,21 @@ document.body.appendChild(this.bg);
         const titleSection = this.createTitleSection();
+        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
         Object.assign(this.container.style, styles.containerWidgetStyle);
         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);
+        const stopButton = (0, utils_js_1.createElement)('div', 'stop_bn_or', styles.stopWidgetStyle, 'Abort Session');
+        const stopContainer = (0, utils_js_1.createElement)('div', 'stop_ct_or', { fontSize: '13px!important' });
+        stopContainer.style.fontSize = '13px';
+        stopContainer.append(stopButton);
+        this.container.append(titleSection, descriptionSection, tasksSection, stopContainer);
         this.taskSection = tasksSection;
         this.descriptionSection = descriptionSection;
         this.stopButton = stopButton;
+        this.stopButtonContainer = stopContainer;
         stopButton.onclick = () => {
+            var _a;
             this.userRecorder.discard();
-            void this.signalTest('skipped');
+            void ((_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.signalTest('skipped'));
             document.body.removeChild(this.bg);
+            window.close();
         };
@@ -212,9 +166,18 @@ if (!inProgress) {
         var _a;
-        const title = createElement('div', 'title', styles.titleWidgetStyle);
-        const leftIcon = generateGrid();
-        const titleText = createElement('div', 'title_text', {}, (_a = this.test) === null || _a === void 0 ? void 0 : _a.title);
-        const rightIcon = generateChevron();
+        const title = (0, utils_js_1.createElement)('div', 'title', styles.titleWidgetStyle);
+        const leftIcon = (0, utils_js_1.generateGrid)();
+        const titleText = (0, utils_js_1.createElement)('div', 'title_text', {
+            maxWidth: '19rem',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+            fontSize: 16,
+            lineHeight: 'auto',
+            cursor: 'pointer',
+        }, (_a = this.test) === null || _a === void 0 ? void 0 : _a.title);
+        const rightIcon = (0, utils_js_1.generateChevron)();
         title.append(leftIcon, titleText, rightIcon);
         const toggleWidget = (isVisible) => {
             this.widgetVisible = isVisible;
+            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
             Object.assign(this.container.style, this.widgetVisible
@@ -237,3 +200,3 @@ ? styles.containerWidgetStyle
         };
-        rightIcon.onclick = () => {
+        const collapseWidget = () => {
             Object.assign(rightIcon.style, {
@@ -244,2 +207,4 @@ transform: this.widgetVisible ? 'rotate(0deg)' : 'rotate(180deg)',
         };
+        titleText.onclick = collapseWidget;
+        rightIcon.onclick = collapseWidget;
         (0, dnd_js_1.default)(this.bg, leftIcon);
@@ -250,14 +215,21 @@ this.collapseWidget = () => toggleWidget(false);
     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');
-        const icon = createElement('div', 'icon', styles.symbolIcon, '-');
-        const content = createElement('div', 'content', styles.contentStyle);
-        const descriptionC = createElement('div', 'text_description', {
+        const section = (0, utils_js_1.createElement)('div', 'description_section_or', styles.descriptionWidgetStyle);
+        const titleContainer = (0, utils_js_1.createElement)('div', 'description_s_title_or', styles.sectionTitleStyle);
+        const title = (0, utils_js_1.createElement)('div', 'title', {
+            fontSize: 13,
+            fontWeight: 500,
+            lineHeight: 'auto',
+        }, 'Introduction & Guidelines');
+        const icon = (0, utils_js_1.createElement)('div', 'icon', styles.symbolIcon, '-');
+        const content = (0, utils_js_1.createElement)('div', 'content', styles.contentStyle);
+        const descriptionC = (0, utils_js_1.createElement)('div', 'text_description', {
             maxHeight: '250px',
             overflowY: 'auto',
             whiteSpace: 'pre-wrap',
+            fontSize: 13,
+            color: '#454545',
+            lineHeight: 'auto',
         });
         descriptionC.innerHTML = guidelines;
-        const button = createElement('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test');
+        const button = (0, utils_js_1.createElement)('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test');
         titleContainer.append(title, icon);
@@ -279,11 +251,17 @@ content.append(descriptionC, button);
         button.onclick = () => {
+            var _a, _b, _c;
             toggleDescriptionVisibility();
             if (this.test) {
-                if (this.durations.tasks.findIndex((t) => this.test && t.taskId === this.test.tasks[0].task_id) === -1) {
-                    this.durations.tasks.push({
+                const durations = (_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.getDurations();
+                const taskDurationInd = durations
+                    ? durations.tasks.findIndex((t) => this.test && t.taskId === this.test.tasks[0].task_id)
+                    : null;
+                if (durations && taskDurationInd === -1) {
+                    durations.tasks.push({
                         taskId: this.test.tasks[0].task_id,
                         started: this.app.timestamp(),
                     });
+                    (_b = this.signalManager) === null || _b === void 0 ? void 0 : _b.setDurations(durations);
                 }
-                void this.signalTask(this.test.tasks[0].task_id, 'begin');
+                void ((_c = this.signalManager) === null || _c === void 0 ? void 0 : _c.signalTask(this.test.tasks[0].task_id, 'begin'));
             }
@@ -296,23 +274,29 @@ this.showTaskSection();
     createTasksSection(tasks) {
-        const section = createElement('div', 'task_section_or', styles.descriptionWidgetStyle);
-        const titleContainer = createElement('div', 'description_t_title_or', styles.sectionTitleStyle);
-        const title = createElement('div', 'title', {}, 'Tasks');
-        const icon = createElement('div', 'icon', styles.symbolIcon, '-');
-        const content = createElement('div', 'content', styles.contentStyle);
-        const pagination = createElement('div', 'pagination', styles.paginationStyle);
-        const leftArrow = createElement('span', 'leftArrow', {}, '<');
-        const rightArrow = createElement('span', 'rightArrow', {}, '>');
-        const taskCard = createElement('div', 'taskCard', styles.taskDescriptionCard);
-        const taskText = createElement('div', 'taskText', styles.taskTextStyle);
-        const taskDescription = createElement('div', 'taskDescription', styles.taskDescriptionStyle);
-        const taskButtons = createElement('div', 'taskButtons', styles.taskButtonsRow);
-        const inputTitle = createElement('div', 'taskText', styles.taskTextStyle);
+        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+        Object.assign(this.container.style, styles.containerWidgetStyle);
+        const section = (0, utils_js_1.createElement)('div', 'task_section_or', styles.descriptionWidgetStyle);
+        const titleContainer = (0, utils_js_1.createElement)('div', 'description_t_title_or', styles.sectionTitleStyle);
+        const title = (0, utils_js_1.createElement)('div', 'title', {
+            fontSize: '13px',
+            fontWeight: '500',
+            lineHeight: 'auto',
+        }, 'Tasks');
+        const icon = (0, utils_js_1.createElement)('div', 'icon', styles.symbolIcon, '-');
+        const content = (0, utils_js_1.createElement)('div', 'content', styles.contentStyle);
+        const pagination = (0, utils_js_1.createElement)('div', 'pagination', styles.paginationStyle);
+        // const leftArrow = createElement('span', 'leftArrow', {}, '<')
+        // const rightArrow = createElement('span', 'rightArrow', {}, '>')
+        const taskCard = (0, utils_js_1.createElement)('div', 'taskCard', styles.taskDescriptionCard);
+        const taskText = (0, utils_js_1.createElement)('div', 'taskText', styles.taskTextStyle);
+        const taskDescription = (0, utils_js_1.createElement)('div', 'taskDescription', styles.taskDescriptionStyle);
+        const taskButtons = (0, utils_js_1.createElement)('div', 'taskButtons', styles.taskButtonsRow);
+        const inputTitle = (0, utils_js_1.createElement)('div', 'taskText', styles.taskTextStyle);
         inputTitle.textContent = 'Your answer';
-        const inputArea = createElement('textarea', 'taskDescription', {
+        const inputArea = (0, utils_js_1.createElement)('textarea', 'taskDescription', {
             resize: 'vertical',
         });
-        const inputContainer = createElement('div', 'inputArea', styles.taskDescriptionCard);
+        const inputContainer = (0, utils_js_1.createElement)('div', 'inputArea', styles.taskDescriptionCard);
         inputContainer.append(inputTitle, inputArea);
-        const closePanelButton = createElement('div', 'closePanelButton', styles.taskButtonStyle, 'Collapse panel');
-        const nextButton = createElement('div', 'nextButton', styles.taskButtonBorderedStyle, 'Done, next');
+        const closePanelButton = (0, utils_js_1.createElement)('div', 'closePanelButton', styles.taskButtonStyle, 'Collapse Panel');
+        const nextButton = (0, utils_js_1.createElement)('div', 'nextButton', styles.taskButtonBorderedStyle, 'Done, Next');
         titleContainer.append(title, icon);
@@ -334,9 +318,19 @@ taskCard.append(taskText, taskDescription);
         };
-        pagination.appendChild(leftArrow);
+        // pagination.appendChild(leftArrow)
         tasks.forEach((_, index) => {
-            const pageNumber = createElement('span', `or_task_${index}`, {}, (index + 1).toString());
+            const pageNumber = (0, utils_js_1.createElement)('span', `or_task_${index}`, {
+                outline: '1px solid #efefef',
+                fontSize: '13px',
+                height: '24px',
+                width: '24px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '6.25em',
+            }, (index + 1).toString());
             pageNumber.id = `or_task_${index}`;
             pagination.append(pageNumber);
         });
-        pagination.appendChild(rightArrow);
+        // pagination.appendChild(rightArrow)
         const toggleTasksVisibility = () => {
@@ -376,15 +370,19 @@ this.widgetTasksVisible = !this.widgetTasksVisible;
         nextButton.onclick = () => {
+            var _a, _b, _c, _d;
             const textAnswer = tasks[this.currentTaskIndex].allow_typing ? inputArea.value : undefined;
             inputArea.value = '';
-            void this.signalTask(tasks[this.currentTaskIndex].task_id, 'done', textAnswer);
+            void ((_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.signalTask(tasks[this.currentTaskIndex].task_id, 'done', textAnswer));
             if (this.currentTaskIndex < tasks.length - 1) {
                 this.currentTaskIndex++;
                 updateTaskContent();
-                if (this.durations.tasks.findIndex((t) => t.taskId === tasks[this.currentTaskIndex].task_id) === -1) {
-                    this.durations.tasks.push({
+                const durations = (_b = this.signalManager) === null || _b === void 0 ? void 0 : _b.getDurations();
+                if (durations &&
+                    durations.tasks.findIndex((t) => t.taskId === tasks[this.currentTaskIndex].task_id) === -1) {
+                    durations.tasks.push({
                         taskId: tasks[this.currentTaskIndex].task_id,
                         started: this.app.timestamp(),
                     });
+                    (_c = this.signalManager) === null || _c === void 0 ? void 0 : _c.setDurations(durations);
                 }
-                void this.signalTask(tasks[this.currentTaskIndex].task_id, 'begin');
+                void ((_d = this.signalManager) === null || _d === void 0 ? void 0 : _d.signalTask(tasks[this.currentTaskIndex].task_id, 'begin'));
                 highlightActive();
@@ -408,21 +406,36 @@ }
     showEndSection() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         let isLoading = true;
-        void this.signalTest('done');
-        const section = createElement('div', 'end_section_or', styles.endSectionStyle);
-        const title = createElement('div', 'end_title_or', {
+        void ((_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.signalTest('done'));
+        const section = (0, utils_js_1.createElement)('div', 'end_section_or', styles.endSectionStyle);
+        const title = (0, utils_js_1.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 usability test. Your feedback has been captured and will be used to enhance our website. \n' +
+        }, 'Thank you! 👍');
+        const description = (0, utils_js_1.createElement)('div', 'end_description_or', {}, (_c = (_b = this.test) === null || _b === void 0 ? void 0 : _b.conclusion) !== null && _c !== void 0 ? _c : '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)) {
-            void this.userRecorder.sendToAPI().then(() => {
-                title.textContent = 'Thank you! 👍';
+        const button = (0, utils_js_1.createElement)('div', 'end_button_or', styles.buttonWidgetStyle, 'Submitting Feedback');
+        const spinner = (0, utils_js_1.createSpinner)();
+        button.appendChild(spinner);
+        if (((_d = this.test) === null || _d === void 0 ? void 0 : _d.reqMic) || ((_e = this.test) === null || _e === void 0 ? void 0 : _e.reqCamera)) {
+            void this.userRecorder
+                .sendToAPI()
+                .then(() => {
+                button.removeChild(spinner);
                 button.textContent = 'End Session';
                 isLoading = false;
+            })
+                .catch((err) => {
+                console.error(err);
+                button.removeChild(spinner);
+                button.textContent = 'End Session';
+                isLoading = false;
             });
         }
+        else {
+            button.removeChild(spinner);
+            button.textContent = 'End Session';
+            isLoading = false;
+        }
         if (this.taskSection) {
@@ -434,4 +447,4 @@ this.container.removeChild(this.taskSection);
         }
-        if (this.stopButton) {
-            this.container.removeChild(this.stopButton);
+        if (this.stopButton && this.stopButtonContainer) {
+            this.container.removeChild(this.stopButtonContainer);
         }
@@ -450,47 +463,1 @@ button.onclick = () => {
 exports.default = UserTestManager;
-function generateGrid() {
-    const grid = document.createElement('div');
-    grid.className = 'grid';
-    for (let i = 0; i < 16; i++) {
-        const cell = document.createElement('div');
-        Object.assign(cell.style, {
-            width: '2px',
-            height: '2px',
-            borderRadius: '10px',
-            background: 'white',
-        });
-        cell.className = 'cell';
-        grid.appendChild(cell);
-    }
-    Object.assign(grid.style, {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        gridTemplateRows: 'repeat(4, 1fr)',
-        gap: '2px',
-        cursor: 'grab',
-    });
-    return grid;
-}
-function generateChevron() {
-    const triangle = document.createElement('div');
-    Object.assign(triangle.style, {
-        width: '0',
-        height: '0',
-        borderLeft: '7px solid transparent',
-        borderRight: '7px solid transparent',
-        borderBottom: '7px solid white',
-    });
-    const container = document.createElement('div');
-    container.appendChild(triangle);
-    Object.assign(container.style, {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '16px',
-        height: '16px',
-        cursor: 'pointer',
-        marginLeft: 'auto',
-        transform: 'rotate(180deg)',
-    });
-    return container;
-}

cjs/modules/userTesting/styles.d.ts

@@ -12,2 +12,3 @@ export declare const bgStyle: {
     zIndex: number;
+    fontFamily: string;
 };
@@ -31,2 +32,3 @@ export declare const containerStyle: {
     padding: string;
+    fontFamily: string;
     'border-radius': string;
@@ -55,2 +57,3 @@ border: string;
     lineHeight: string;
+    whiteSpace: string;
 };
@@ -99,2 +102,4 @@ export declare const noticeStyle: {
     gap: string;
+    fontSize: string;
+    lineHeight: string;
 };
@@ -121,4 +126,3 @@ export declare const titleWidgetStyle: {
     width: string;
-    borderRadius: string;
-    border: string;
+    borderBottom: string;
     background: string;
@@ -129,6 +133,4 @@ padding: string;
     fontFamily: string;
-    fontSize: string;
     fontStyle: string;
     fontWeight: string;
-    lineHeight: string;
 };
@@ -142,4 +144,3 @@ export declare const endSectionStyle: {
     width: string;
-    borderRadius: string;
-    border: string;
+    borderBottom: string;
     background: string;
@@ -150,6 +151,4 @@ padding: string;
     fontFamily: string;
-    fontSize: string;
     fontStyle: string;
     fontWeight: string;
-    lineHeight: string;
 };
@@ -185,5 +184,8 @@ export declare const symbolIcon: {
     marginTop: string;
+    marginBottom: string;
     cursor: string;
     display: string;
     fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
 };
@@ -201,13 +203,16 @@ export declare const paginationStyle: {
     display: string;
-    padding: string;
     flexDirection: string;
     alignItems: string;
+    justifyContent: string;
     borderRadius: string;
     outline: string;
+    fontSize: string;
+    height: string;
+    width: string;
 };
 export declare const taskNumberDone: {
     display: string;
-    padding: string;
     flexDirection: string;
     alignItems: string;
+    justifyContent: string;
     borderRadius: string;
@@ -217,2 +222,5 @@ outline: string;
     background: string;
+    fontSize: string;
+    height: string;
+    width: string;
 };
@@ -234,3 +242,4 @@ export declare const taskDescriptionCard: {
 export declare const taskDescriptionStyle: {
-    color: string;
+    fontSize: string;
+    lineHeight: string;
 };
@@ -273,1 +282,9 @@ export declare const taskButtonStyle: {
 };
+export declare const spinnerStyles: {
+    border: string;
+    width: string;
+    height: string;
+    borderRadius: string;
+    borderLeftColor: string;
+    animation: string;
+};

cjs/modules/userTesting/styles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.taskButtonsRow = exports.taskButtonBorderedStyle = exports.taskButtonStyle = exports.taskDescriptionStyle = exports.taskTextStyle = exports.taskDescriptionCard = exports.taskNumberDone = exports.taskNumberActive = exports.paginationStyle = exports.stopWidgetStyle = exports.buttonWidgetStyle = exports.symbolIcon = exports.endSectionStyle = exports.descriptionWidgetStyle = exports.titleWidgetStyle = exports.contentStyle = exports.sectionTitleStyle = exports.buttonStyle = exports.noticeStyle = exports.descriptionStyle = exports.titleStyle = exports.containerWidgetStyle = exports.containerStyle = exports.bgStyle = void 0;
+exports.spinnerStyles = exports.taskButtonsRow = exports.taskButtonBorderedStyle = exports.taskButtonStyle = exports.taskDescriptionStyle = exports.taskTextStyle = exports.taskDescriptionCard = exports.taskNumberDone = exports.taskNumberActive = exports.paginationStyle = exports.stopWidgetStyle = exports.buttonWidgetStyle = exports.symbolIcon = exports.endSectionStyle = exports.descriptionWidgetStyle = exports.titleWidgetStyle = exports.contentStyle = exports.sectionTitleStyle = exports.buttonStyle = exports.noticeStyle = exports.descriptionStyle = exports.titleStyle = exports.containerWidgetStyle = exports.containerStyle = exports.bgStyle = void 0;
 exports.bgStyle = {
@@ -15,2 +15,3 @@ position: 'fixed',
     zIndex: 999999,
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
 };
@@ -20,9 +21,9 @@ exports.containerStyle = {
     flexDirection: 'column',
-    gap: '8px',
+    gap: '2rem',
     alignItems: 'center',
     padding: '1.5rem',
-    borderRadius: '0.375rem',
+    borderRadius: '2px',
     border: '1px solid #D9D9D9',
     background: '#FFF',
-    width: '29rem',
+    width: '22rem',
 };
@@ -32,9 +33,10 @@ exports.containerWidgetStyle = {
     'flex-direction': 'column',
-    gap: '8px',
+    gap: 'unset',
     'align-items': 'center',
-    padding: '1rem',
-    'border-radius': '0.375rem',
+    padding: 'unset',
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    'border-radius': '2px',
     border: '1px solid #D9D9D9',
-    background: '#FFF',
-    width: '29rem',
+    background: 'rgba(255, 255, 255, 0.75)',
+    width: '22rem',
 };
@@ -55,6 +57,7 @@ exports.titleStyle = {
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
+    fontSize: '13px',
     fontStyle: 'normal',
     fontWeight: '400',
-    lineHeight: '1.5rem',
+    lineHeight: 'auto',
+    whiteSpace: 'pre-wrap',
 };
@@ -90,5 +93,5 @@ exports.noticeStyle = {
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    fontSize: '13px',
     fontWeight: '500',
-    lineHeight: '1.375rem',
+    lineHeight: 'auto',
     display: 'flex',
@@ -104,2 +107,4 @@ justifyContent: 'space-between',
     gap: '0.625rem',
+    fontSize: '13px',
+    lineHeight: 'auto',
 };
@@ -111,6 +116,6 @@ // New widget styles
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '1.25rem',
+    fontSize: '16px',
     fontStyle: 'normal',
     fontWeight: '500',
-    lineHeight: '1.75rem',
+    lineHeight: 'auto',
     color: 'white',
@@ -120,4 +125,4 @@ display: 'flex',
     width: '100%',
-    borderRadius: '0.375rem',
-    background: 'rgba(0, 0, 0, 0.60)',
+    borderRadius: '2px',
+    background: 'rgba(0, 0, 0, 0.75)',
     boxSizing: 'border-box',
@@ -129,13 +134,12 @@ };
     width: '100%',
-    borderRadius: '0.375rem',
-    border: '1px solid #D9D9D9',
+    borderBottom: '1px solid #D9D9D9',
     background: '#FFF',
-    padding: '0.625rem 1rem',
+    padding: '0.65rem',
     alignSelf: 'stretch',
     color: '#000',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    // fontSize: '0.875rem',
     fontStyle: 'normal',
     fontWeight: '400',
-    lineHeight: '1.375rem',
+    // lineHeight: '1.375rem',
 };
@@ -171,6 +175,9 @@ exports.endSectionStyle = Object.assign(Object.assign({}, exports.descriptionWidgetStyle), { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.625rem' });
 exports.stopWidgetStyle = {
-    marginTop: '2rem',
+    marginTop: '1rem',
+    marginBottom: '1rem',
     cursor: 'pointer',
     display: 'block',
-    fontWeight: '600',
+    fontWeight: '500',
+    fontSize: '13px!important',
+    lineHeight: 'auto',
 };
@@ -188,13 +195,16 @@ exports.paginationStyle = {
     display: 'flex',
-    padding: '0.0625rem 0.5rem',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: '6.25em',
     outline: '1px solid #394EFF',
+    fontSize: '13px',
+    height: '24px',
+    width: '24px',
 };
 exports.taskNumberDone = {
     display: 'flex',
-    padding: '0.0625rem 0.5rem',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: '6.25em',
@@ -204,2 +214,5 @@ outline: '1px solid #D2DFFF',
     background: '#D2DFFF',
+    fontSize: '13px',
+    height: '24px',
+    width: '24px',
 };
@@ -221,3 +234,4 @@ exports.taskDescriptionCard = {
 exports.taskDescriptionStyle = {
-    color: '#8C8C8C',
+    fontSize: '13px',
+    lineHeight: 'auto',
 };
@@ -230,6 +244,6 @@ exports.taskButtonStyle = {
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    fontSize: '13px',
     fontStyle: 'normal',
     fontWeight: '500',
-    lineHeight: '1.375rem',
+    lineHeight: 'auto',
 };
@@ -244,1 +258,9 @@ exports.taskButtonBorderedStyle = Object.assign(Object.assign({}, exports.taskButtonStyle), { display: 'flex', padding: '0.25rem 0.9375rem', justifyContent: 'center', alignItems: 'center', gap: '0.5rem', borderRadius: '0.25rem', border: '1px solid #394EFF' });
 };
+exports.spinnerStyles = {
+    border: '4px solid rgba(255, 255, 255, 0.4)',
+    width: '16px',
+    height: '16px',
+    borderRadius: '50%',
+    borderLeftColor: '#fff',
+    animation: 'spin 0.5s linear infinite',
+};

lib/app/index.d.ts

@@ -130,2 +130,5 @@ import type Message from './messages.gen.js';
     private _start;
+    onUxtCb: never[];
+    addOnUxtCb(cb: (id: number) => void): void;
+    getUxtId(): number | null;
     /**
@@ -132,0 +135,0 @@ * basically we ask other tabs during constructor

lib/app/index.js

@@ -42,3 +42,3 @@ import { Timestamp, Metadata, UserID, TabChange, TabData } from './messages.gen.js';
         this.activityState = ActivityState.NotActive;
-        this.version = '11.0.0'; // TODO: version compatability check inside each plugin.
+        this.version = '11.0.1'; // TODO: version compatability check inside each plugin.
         this.compressionThreshold = 24 * 1000;
@@ -50,2 +50,3 @@ this.restartAttempts = 0;
         this.delay = 0;
+        this.onUxtCb = [];
         // if (options.onStart !== undefined) {
@@ -203,3 +204,2 @@ //   deprecationWarn("'onStart' option", "tracker.start().then(/* handle session info */)")
         }
-        this.uxtManager = new UserTestManager(this, uxtStorageKey);
     }
@@ -516,2 +516,5 @@ _debug(context, e) {
             this.restartAttempts = 0;
+            this.uxtManager = this.uxtManager
+                ? this.uxtManager
+                : new UserTestManager(this, uxtStorageKey);
             let uxtId;
@@ -529,4 +532,16 @@ const savedUxtTag = this.localStorage.getItem(uxtStorageKey);
             }
-            if (uxtId)
-                this.uxtManager.getTest(uxtId, token, Boolean(savedUxtTag));
+            if (uxtId) {
+                if (!this.uxtManager.isActive) {
+                    // eslint-disable-next-line
+                    this.uxtManager.getTest(uxtId, token, Boolean(savedUxtTag)).then((id) => {
+                        if (id) {
+                            this.onUxtCb.forEach((cb) => cb(id));
+                        }
+                    });
+                }
+                else {
+                    // @ts-ignore
+                    this.onUxtCb.forEach((cb) => cb(uxtId));
+                }
+            }
             return SuccessfulStart(onStartInfo);
@@ -545,2 +560,10 @@ })
     }
+    addOnUxtCb(cb) {
+        // @ts-ignore
+        this.onUxtCb.push(cb);
+    }
+    getUxtId() {
+        var _a;
+        return (_a = this.uxtManager) === null || _a === void 0 ? void 0 : _a.getTestId();
+    }
     /**
@@ -547,0 +570,0 @@ * basically we ask other tabs during constructor

lib/index.d.ts

@@ -50,2 +50,3 @@ import App from './app/index.js';
     getTabId(): string | null;
+    getUxId(): number | null;
     sessionID(): string | null | undefined;
@@ -52,0 +53,0 @@ getSessionURL(options?: {

lib/index.js

@@ -160,3 +160,3 @@ import App, { DEFAULT_INGEST_POINT } from './app/index.js';
             req.send(JSON.stringify({
-                trackerVersion: '11.0.0',
+                trackerVersion: '11.0.1',
                 projectKey: options.projectKey,
@@ -237,2 +237,8 @@ doNotTrack,
     }
+    getUxId() {
+        if (this.app === null) {
+            return null;
+        }
+        return this.app.getUxtId();
+    }
     sessionID() {
@@ -239,0 +245,0 @@ deprecationWarn("'sessionID' method", "'getSessionID' method", '/');

lib/modules/userTesting/index.d.ts

@@ -11,2 +11,3 @@ import App from '../../app/index.js';
     private widgetVisible;
+    isActive: boolean;
     private descriptionSection;
@@ -16,10 +17,9 @@ private taskSection;
     private stopButton;
+    private stopButtonContainer;
     private test;
     private testId;
-    private token;
-    private readonly durations;
+    private signalManager;
     constructor(app: App, storageKey: string);
-    signalTask: (taskId: number, status: 'begin' | 'done' | 'skipped', answer?: string) => void | Promise<Response>;
-    signalTest: (status: 'begin' | 'done' | 'skipped') => Promise<Response>;
-    getTest: (id: number, token: string, inProgress?: boolean) => void;
+    getTestId(): number | null;
+    getTest: (id: number, token: string, inProgress?: boolean) => Promise<number | void>;
     hideTaskSection: () => boolean;
@@ -26,0 +26,0 @@ showTaskSection: () => boolean;

lib/modules/userTesting/index.js

 import * as styles from './styles.js';
 import Recorder, { Quality } from './recorder.js';
 import attachDND from './dnd.js';
-function createElement(tag, className, styles, textContent, id) {
-    const element = document.createElement(tag);
-    element.className = className;
-    Object.assign(element.style, styles);
-    if (textContent) {
-        element.textContent = textContent;
-    }
-    if (id) {
-        element.id = id;
-    }
-    return element;
-}
+import { generateGrid, generateChevron, createSpinner, createElement, TEST_START, TASK_IND, SESSION_ID, TEST_ID, } from './utils.js';
+import SignalManager from './SignalManager.js';
 export default class UserTestManager {
@@ -25,2 +15,3 @@ constructor(app, storageKey) {
         this.widgetVisible = true;
+        this.isActive = false;
         this.descriptionSection = null;
@@ -30,65 +21,10 @@ this.taskSection = null;
         this.stopButton = null;
+        this.stopButtonContainer = null;
         this.test = null;
         this.testId = null;
-        this.token = null;
-        this.durations = {
-            testStart: 0,
-            tasks: [],
-        };
-        this.signalTask = (taskId, status, answer) => {
-            if (!taskId)
-                return console.error('OR: no task id');
-            const taskStart = this.durations.tasks.find((t) => t.taskId === taskId);
-            const timestamp = this.app.timestamp();
-            const duration = taskStart ? timestamp - taskStart.started : 0;
-            const ingest = this.app.options.ingestPoint;
-            return fetch(`${ingest}/v1/web/uxt/signals/task`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    taskId,
-                    status,
-                    duration,
-                    timestamp,
-                    answer,
-                }),
-            });
-        };
-        this.signalTest = (status) => {
-            const timestamp = this.app.timestamp();
-            if (status === 'begin' && this.testId) {
-                this.app.localStorage.setItem(this.storageKey, this.testId.toString());
-                this.app.localStorage.setItem('or_uxt_test_start', timestamp.toString());
-            }
-            else {
-                this.app.localStorage.removeItem(this.storageKey);
-                this.app.localStorage.removeItem('or_uxt_task_index');
-                this.app.localStorage.removeItem('or_uxt_test_start');
-            }
-            const ingest = this.app.options.ingestPoint;
-            const start = this.durations.testStart || timestamp;
-            const duration = timestamp - start;
-            return fetch(`${ingest}/v1/web/uxt/signals/test`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    status,
-                    duration,
-                    timestamp,
-                }),
-            });
-        };
+        this.signalManager = null;
         this.getTest = (id, token, inProgress) => {
             this.testId = id;
-            this.token = token;
             const ingest = this.app.options.ingestPoint;
-            fetch(`${ingest}/v1/web/uxt/test/${id}`, {
+            return fetch(`${ingest}/v1/web/uxt/test/${id}`, {
                 headers: {
@@ -100,3 +36,5 @@ Authorization: `Bearer ${token}`,
                 .then(({ test }) => {
+                this.isActive = true;
                 this.test = test;
+                this.signalManager = new SignalManager(this.app.options.ingestPoint, () => this.app.timestamp(), token, id, this.storageKey, (k, v) => this.app.localStorage.setItem(k, v), (k) => this.app.localStorage.removeItem(k), (k) => this.app.localStorage.getItem(k), () => this.app.getSessionID());
                 this.createGreeting(test.title, test.reqMic, test.reqCamera);
@@ -111,2 +49,3 @@ if (inProgress) {
             })
+                .then(() => id)
                 .catch((err) => {
@@ -125,20 +64,23 @@ console.log('OR: Error fetching test', err);
         const sessionId = this.app.getSessionID();
-        const savedSessionId = this.app.localStorage.getItem('or_uxt_session_id');
+        const savedSessionId = this.app.localStorage.getItem(SESSION_ID);
         if (sessionId !== savedSessionId) {
             this.app.localStorage.removeItem(this.storageKey);
-            this.app.localStorage.removeItem('or_uxt_session_id');
-            this.app.localStorage.removeItem('or_uxt_test_id');
-            this.app.localStorage.removeItem('or_uxt_task_index');
-            this.app.localStorage.removeItem('or_uxt_test_start');
+            this.app.localStorage.removeItem(SESSION_ID);
+            this.app.localStorage.removeItem(TEST_ID);
+            this.app.localStorage.removeItem(TASK_IND);
+            this.app.localStorage.removeItem(TEST_START);
         }
-        const taskIndex = this.app.localStorage.getItem('or_uxt_task_index');
+        const taskIndex = this.app.localStorage.getItem(TASK_IND);
         if (taskIndex) {
             this.currentTaskIndex = parseInt(taskIndex, 10);
-            this.durations.testStart = parseInt(this.app.localStorage.getItem('or_uxt_test_start'), 10);
         }
     }
+    getTestId() {
+        return this.testId;
+    }
     createGreeting(title, micRequired, cameraRequired) {
         const titleElement = createElement('div', 'title', styles.titleStyle, title);
-        const descriptionElement = createElement('div', 'description', styles.descriptionStyle, 'Welcome, this session will be recorded. You have complete control, and can stop the session at any time.');
-        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 descriptionElement = createElement('div', 'description', styles.descriptionStyle, `Welcome, you're here to help us improve, not to be judged. Your insights matter!\n
+📹 We're recording this browser tab to learn from your experience.
+🎤 Please enable mic and camera if asked, to give us a complete picture.`);
         const buttonElement = createElement('div', 'button', styles.buttonStyle, 'Read guidelines to begin');
@@ -151,3 +93,2 @@ this.removeGreeting = () => {
             this.container.removeChild(buttonElement);
-            this.container.removeChild(noticeElement);
             this.container.removeChild(descriptionElement);
@@ -158,9 +99,15 @@ this.container.removeChild(titleElement);
         buttonElement.onclick = () => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             this.removeGreeting();
-            this.durations.testStart = this.app.timestamp();
-            void this.signalTest('begin');
-            this.showWidget(((_a = this.test) === null || _a === void 0 ? void 0 : _a.guidelines) || '', ((_b = this.test) === null || _b === void 0 ? void 0 : _b.tasks) || []);
+            const durations = (_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.getDurations();
+            if (durations && this.signalManager) {
+                durations.testStart = this.app.timestamp();
+                this.signalManager.setDurations(durations);
+            }
+            void ((_b = this.signalManager) === null || _b === void 0 ? void 0 : _b.signalTest('begin'));
+            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+            Object.assign(this.container.style, styles.containerWidgetStyle);
+            this.showWidget(((_c = this.test) === null || _c === void 0 ? void 0 : _c.guidelines) || '', ((_d = this.test) === null || _d === void 0 ? void 0 : _d.tasks) || []);
         };
-        this.container.append(titleElement, descriptionElement, noticeElement, buttonElement);
+        this.container.append(titleElement, descriptionElement, buttonElement);
         this.bg.appendChild(this.container);
@@ -186,2 +133,3 @@ document.body.appendChild(this.bg);
         const titleSection = this.createTitleSection();
+        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
         Object.assign(this.container.style, styles.containerWidgetStyle);
@@ -191,10 +139,16 @@ const descriptionSection = this.createDescriptionSection(guidelines);
         const stopButton = createElement('div', 'stop_bn_or', styles.stopWidgetStyle, 'Abort Session');
-        this.container.append(titleSection, descriptionSection, tasksSection, stopButton);
+        const stopContainer = createElement('div', 'stop_ct_or', { fontSize: '13px!important' });
+        stopContainer.style.fontSize = '13px';
+        stopContainer.append(stopButton);
+        this.container.append(titleSection, descriptionSection, tasksSection, stopContainer);
         this.taskSection = tasksSection;
         this.descriptionSection = descriptionSection;
         this.stopButton = stopButton;
+        this.stopButtonContainer = stopContainer;
         stopButton.onclick = () => {
+            var _a;
             this.userRecorder.discard();
-            void this.signalTest('skipped');
+            void ((_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.signalTest('skipped'));
             document.body.removeChild(this.bg);
+            window.close();
         };
@@ -212,3 +166,11 @@ if (!inProgress) {
         const leftIcon = generateGrid();
-        const titleText = createElement('div', 'title_text', {}, (_a = this.test) === null || _a === void 0 ? void 0 : _a.title);
+        const titleText = createElement('div', 'title_text', {
+            maxWidth: '19rem',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+            fontSize: 16,
+            lineHeight: 'auto',
+            cursor: 'pointer',
+        }, (_a = this.test) === null || _a === void 0 ? void 0 : _a.title);
         const rightIcon = generateChevron();
@@ -218,2 +180,3 @@ title.append(leftIcon, titleText, rightIcon);
             this.widgetVisible = isVisible;
+            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
             Object.assign(this.container.style, this.widgetVisible
@@ -236,3 +199,3 @@ ? styles.containerWidgetStyle
         };
-        rightIcon.onclick = () => {
+        const collapseWidget = () => {
             Object.assign(rightIcon.style, {
@@ -243,2 +206,4 @@ transform: this.widgetVisible ? 'rotate(0deg)' : 'rotate(180deg)',
         };
+        titleText.onclick = collapseWidget;
+        rightIcon.onclick = collapseWidget;
         attachDND(this.bg, leftIcon);
@@ -251,3 +216,7 @@ this.collapseWidget = () => toggleWidget(false);
         const titleContainer = createElement('div', 'description_s_title_or', styles.sectionTitleStyle);
-        const title = createElement('div', 'title', {}, 'Introduction & Guidelines');
+        const title = createElement('div', 'title', {
+            fontSize: 13,
+            fontWeight: 500,
+            lineHeight: 'auto',
+        }, 'Introduction & Guidelines');
         const icon = createElement('div', 'icon', styles.symbolIcon, '-');
@@ -259,2 +228,5 @@ const content = createElement('div', 'content', styles.contentStyle);
             whiteSpace: 'pre-wrap',
+            fontSize: 13,
+            color: '#454545',
+            lineHeight: 'auto',
         });
@@ -279,11 +251,17 @@ descriptionC.innerHTML = guidelines;
         button.onclick = () => {
+            var _a, _b, _c;
             toggleDescriptionVisibility();
             if (this.test) {
-                if (this.durations.tasks.findIndex((t) => this.test && t.taskId === this.test.tasks[0].task_id) === -1) {
-                    this.durations.tasks.push({
+                const durations = (_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.getDurations();
+                const taskDurationInd = durations
+                    ? durations.tasks.findIndex((t) => this.test && t.taskId === this.test.tasks[0].task_id)
+                    : null;
+                if (durations && taskDurationInd === -1) {
+                    durations.tasks.push({
                         taskId: this.test.tasks[0].task_id,
                         started: this.app.timestamp(),
                     });
+                    (_b = this.signalManager) === null || _b === void 0 ? void 0 : _b.setDurations(durations);
                 }
-                void this.signalTask(this.test.tasks[0].task_id, 'begin');
+                void ((_c = this.signalManager) === null || _c === void 0 ? void 0 : _c.signalTask(this.test.tasks[0].task_id, 'begin'));
             }
@@ -296,10 +274,16 @@ this.showTaskSection();
     createTasksSection(tasks) {
+        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+        Object.assign(this.container.style, styles.containerWidgetStyle);
         const section = createElement('div', 'task_section_or', styles.descriptionWidgetStyle);
         const titleContainer = createElement('div', 'description_t_title_or', styles.sectionTitleStyle);
-        const title = createElement('div', 'title', {}, 'Tasks');
+        const title = createElement('div', 'title', {
+            fontSize: '13px',
+            fontWeight: '500',
+            lineHeight: 'auto',
+        }, 'Tasks');
         const icon = createElement('div', 'icon', styles.symbolIcon, '-');
         const content = createElement('div', 'content', styles.contentStyle);
         const pagination = createElement('div', 'pagination', styles.paginationStyle);
-        const leftArrow = createElement('span', 'leftArrow', {}, '<');
-        const rightArrow = createElement('span', 'rightArrow', {}, '>');
+        // const leftArrow = createElement('span', 'leftArrow', {}, '<')
+        // const rightArrow = createElement('span', 'rightArrow', {}, '>')
         const taskCard = createElement('div', 'taskCard', styles.taskDescriptionCard);
@@ -316,4 +300,4 @@ const taskText = createElement('div', 'taskText', styles.taskTextStyle);
         inputContainer.append(inputTitle, inputArea);
-        const closePanelButton = createElement('div', 'closePanelButton', styles.taskButtonStyle, 'Collapse panel');
-        const nextButton = createElement('div', 'nextButton', styles.taskButtonBorderedStyle, 'Done, next');
+        const closePanelButton = createElement('div', 'closePanelButton', styles.taskButtonStyle, 'Collapse Panel');
+        const nextButton = createElement('div', 'nextButton', styles.taskButtonBorderedStyle, 'Done, Next');
         titleContainer.append(title, icon);
@@ -335,9 +319,19 @@ taskCard.append(taskText, taskDescription);
         };
-        pagination.appendChild(leftArrow);
+        // pagination.appendChild(leftArrow)
         tasks.forEach((_, index) => {
-            const pageNumber = createElement('span', `or_task_${index}`, {}, (index + 1).toString());
+            const pageNumber = createElement('span', `or_task_${index}`, {
+                outline: '1px solid #efefef',
+                fontSize: '13px',
+                height: '24px',
+                width: '24px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '6.25em',
+            }, (index + 1).toString());
             pageNumber.id = `or_task_${index}`;
             pagination.append(pageNumber);
         });
-        pagination.appendChild(rightArrow);
+        // pagination.appendChild(rightArrow)
         const toggleTasksVisibility = () => {
@@ -377,15 +371,19 @@ this.widgetTasksVisible = !this.widgetTasksVisible;
         nextButton.onclick = () => {
+            var _a, _b, _c, _d;
             const textAnswer = tasks[this.currentTaskIndex].allow_typing ? inputArea.value : undefined;
             inputArea.value = '';
-            void this.signalTask(tasks[this.currentTaskIndex].task_id, 'done', textAnswer);
+            void ((_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.signalTask(tasks[this.currentTaskIndex].task_id, 'done', textAnswer));
             if (this.currentTaskIndex < tasks.length - 1) {
                 this.currentTaskIndex++;
                 updateTaskContent();
-                if (this.durations.tasks.findIndex((t) => t.taskId === tasks[this.currentTaskIndex].task_id) === -1) {
-                    this.durations.tasks.push({
+                const durations = (_b = this.signalManager) === null || _b === void 0 ? void 0 : _b.getDurations();
+                if (durations &&
+                    durations.tasks.findIndex((t) => t.taskId === tasks[this.currentTaskIndex].task_id) === -1) {
+                    durations.tasks.push({
                         taskId: tasks[this.currentTaskIndex].task_id,
                         started: this.app.timestamp(),
                     });
+                    (_c = this.signalManager) === null || _c === void 0 ? void 0 : _c.setDurations(durations);
                 }
-                void this.signalTask(tasks[this.currentTaskIndex].task_id, 'begin');
+                void ((_d = this.signalManager) === null || _d === void 0 ? void 0 : _d.signalTask(tasks[this.currentTaskIndex].task_id, 'begin'));
                 highlightActive();
@@ -409,5 +407,5 @@ }
     showEndSection() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         let isLoading = true;
-        void this.signalTest('done');
+        void ((_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.signalTest('done'));
         const section = createElement('div', 'end_section_or', styles.endSectionStyle);
@@ -417,14 +415,29 @@ const title = createElement('div', 'end_title_or', {
             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 usability test. Your feedback has been captured and will be used to enhance our website. \n' +
+        }, 'Thank you! 👍');
+        const description = createElement('div', 'end_description_or', {}, (_c = (_b = this.test) === null || _b === void 0 ? void 0 : _b.conclusion) !== null && _c !== void 0 ? _c : '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)) {
-            void this.userRecorder.sendToAPI().then(() => {
-                title.textContent = 'Thank you! 👍';
+        const button = createElement('div', 'end_button_or', styles.buttonWidgetStyle, 'Submitting Feedback');
+        const spinner = createSpinner();
+        button.appendChild(spinner);
+        if (((_d = this.test) === null || _d === void 0 ? void 0 : _d.reqMic) || ((_e = this.test) === null || _e === void 0 ? void 0 : _e.reqCamera)) {
+            void this.userRecorder
+                .sendToAPI()
+                .then(() => {
+                button.removeChild(spinner);
                 button.textContent = 'End Session';
                 isLoading = false;
+            })
+                .catch((err) => {
+                console.error(err);
+                button.removeChild(spinner);
+                button.textContent = 'End Session';
+                isLoading = false;
             });
         }
+        else {
+            button.removeChild(spinner);
+            button.textContent = 'End Session';
+            isLoading = false;
+        }
         if (this.taskSection) {
@@ -436,4 +449,4 @@ this.container.removeChild(this.taskSection);
         }
-        if (this.stopButton) {
-            this.container.removeChild(this.stopButton);
+        if (this.stopButton && this.stopButtonContainer) {
+            this.container.removeChild(this.stopButtonContainer);
         }
@@ -451,47 +464,1 @@ button.onclick = () => {
 }
-function generateGrid() {
-    const grid = document.createElement('div');
-    grid.className = 'grid';
-    for (let i = 0; i < 16; i++) {
-        const cell = document.createElement('div');
-        Object.assign(cell.style, {
-            width: '2px',
-            height: '2px',
-            borderRadius: '10px',
-            background: 'white',
-        });
-        cell.className = 'cell';
-        grid.appendChild(cell);
-    }
-    Object.assign(grid.style, {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        gridTemplateRows: 'repeat(4, 1fr)',
-        gap: '2px',
-        cursor: 'grab',
-    });
-    return grid;
-}
-function generateChevron() {
-    const triangle = document.createElement('div');
-    Object.assign(triangle.style, {
-        width: '0',
-        height: '0',
-        borderLeft: '7px solid transparent',
-        borderRight: '7px solid transparent',
-        borderBottom: '7px solid white',
-    });
-    const container = document.createElement('div');
-    container.appendChild(triangle);
-    Object.assign(container.style, {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '16px',
-        height: '16px',
-        cursor: 'pointer',
-        marginLeft: 'auto',
-        transform: 'rotate(180deg)',
-    });
-    return container;
-}

lib/modules/userTesting/styles.d.ts

@@ -12,2 +12,3 @@ export declare const bgStyle: {
     zIndex: number;
+    fontFamily: string;
 };
@@ -31,2 +32,3 @@ export declare const containerStyle: {
     padding: string;
+    fontFamily: string;
     'border-radius': string;
@@ -55,2 +57,3 @@ border: string;
     lineHeight: string;
+    whiteSpace: string;
 };
@@ -99,2 +102,4 @@ export declare const noticeStyle: {
     gap: string;
+    fontSize: string;
+    lineHeight: string;
 };
@@ -121,4 +126,3 @@ export declare const titleWidgetStyle: {
     width: string;
-    borderRadius: string;
-    border: string;
+    borderBottom: string;
     background: string;
@@ -129,6 +133,4 @@ padding: string;
     fontFamily: string;
-    fontSize: string;
     fontStyle: string;
     fontWeight: string;
-    lineHeight: string;
 };
@@ -142,4 +144,3 @@ export declare const endSectionStyle: {
     width: string;
-    borderRadius: string;
-    border: string;
+    borderBottom: string;
     background: string;
@@ -150,6 +151,4 @@ padding: string;
     fontFamily: string;
-    fontSize: string;
     fontStyle: string;
     fontWeight: string;
-    lineHeight: string;
 };
@@ -185,5 +184,8 @@ export declare const symbolIcon: {
     marginTop: string;
+    marginBottom: string;
     cursor: string;
     display: string;
     fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
 };
@@ -201,13 +203,16 @@ export declare const paginationStyle: {
     display: string;
-    padding: string;
     flexDirection: string;
     alignItems: string;
+    justifyContent: string;
     borderRadius: string;
     outline: string;
+    fontSize: string;
+    height: string;
+    width: string;
 };
 export declare const taskNumberDone: {
     display: string;
-    padding: string;
     flexDirection: string;
     alignItems: string;
+    justifyContent: string;
     borderRadius: string;
@@ -217,2 +222,5 @@ outline: string;
     background: string;
+    fontSize: string;
+    height: string;
+    width: string;
 };
@@ -234,3 +242,4 @@ export declare const taskDescriptionCard: {
 export declare const taskDescriptionStyle: {
-    color: string;
+    fontSize: string;
+    lineHeight: string;
 };
@@ -273,1 +282,9 @@ export declare const taskButtonStyle: {
 };
+export declare const spinnerStyles: {
+    border: string;
+    width: string;
+    height: string;
+    borderRadius: string;
+    borderLeftColor: string;
+    animation: string;
+};

lib/modules/userTesting/styles.js

@@ -12,2 +12,3 @@ export const bgStyle = {
     zIndex: 999999,
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
 };
@@ -17,9 +18,9 @@ export const containerStyle = {
     flexDirection: 'column',
-    gap: '8px',
+    gap: '2rem',
     alignItems: 'center',
     padding: '1.5rem',
-    borderRadius: '0.375rem',
+    borderRadius: '2px',
     border: '1px solid #D9D9D9',
     background: '#FFF',
-    width: '29rem',
+    width: '22rem',
 };
@@ -29,9 +30,10 @@ export const containerWidgetStyle = {
     'flex-direction': 'column',
-    gap: '8px',
+    gap: 'unset',
     'align-items': 'center',
-    padding: '1rem',
-    'border-radius': '0.375rem',
+    padding: 'unset',
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    'border-radius': '2px',
     border: '1px solid #D9D9D9',
-    background: '#FFF',
-    width: '29rem',
+    background: 'rgba(255, 255, 255, 0.75)',
+    width: '22rem',
 };
@@ -52,6 +54,7 @@ export const titleStyle = {
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
+    fontSize: '13px',
     fontStyle: 'normal',
     fontWeight: '400',
-    lineHeight: '1.5rem',
+    lineHeight: 'auto',
+    whiteSpace: 'pre-wrap',
 };
@@ -87,5 +90,5 @@ export const noticeStyle = {
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    fontSize: '13px',
     fontWeight: '500',
-    lineHeight: '1.375rem',
+    lineHeight: 'auto',
     display: 'flex',
@@ -101,2 +104,4 @@ justifyContent: 'space-between',
     gap: '0.625rem',
+    fontSize: '13px',
+    lineHeight: 'auto',
 };
@@ -108,6 +113,6 @@ // New widget styles
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '1.25rem',
+    fontSize: '16px',
     fontStyle: 'normal',
     fontWeight: '500',
-    lineHeight: '1.75rem',
+    lineHeight: 'auto',
     color: 'white',
@@ -117,4 +122,4 @@ display: 'flex',
     width: '100%',
-    borderRadius: '0.375rem',
-    background: 'rgba(0, 0, 0, 0.60)',
+    borderRadius: '2px',
+    background: 'rgba(0, 0, 0, 0.75)',
     boxSizing: 'border-box',
@@ -126,13 +131,12 @@ };
     width: '100%',
-    borderRadius: '0.375rem',
-    border: '1px solid #D9D9D9',
+    borderBottom: '1px solid #D9D9D9',
     background: '#FFF',
-    padding: '0.625rem 1rem',
+    padding: '0.65rem',
     alignSelf: 'stretch',
     color: '#000',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    // fontSize: '0.875rem',
     fontStyle: 'normal',
     fontWeight: '400',
-    lineHeight: '1.375rem',
+    // lineHeight: '1.375rem',
 };
@@ -168,6 +172,9 @@ export const endSectionStyle = Object.assign(Object.assign({}, descriptionWidgetStyle), { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.625rem' });
 export const stopWidgetStyle = {
-    marginTop: '2rem',
+    marginTop: '1rem',
+    marginBottom: '1rem',
     cursor: 'pointer',
     display: 'block',
-    fontWeight: '600',
+    fontWeight: '500',
+    fontSize: '13px!important',
+    lineHeight: 'auto',
 };
@@ -185,13 +192,16 @@ export const paginationStyle = {
     display: 'flex',
-    padding: '0.0625rem 0.5rem',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: '6.25em',
     outline: '1px solid #394EFF',
+    fontSize: '13px',
+    height: '24px',
+    width: '24px',
 };
 export const taskNumberDone = {
     display: 'flex',
-    padding: '0.0625rem 0.5rem',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: '6.25em',
@@ -201,2 +211,5 @@ outline: '1px solid #D2DFFF',
     background: '#D2DFFF',
+    fontSize: '13px',
+    height: '24px',
+    width: '24px',
 };
@@ -218,3 +231,4 @@ export const taskDescriptionCard = {
 export const taskDescriptionStyle = {
-    color: '#8C8C8C',
+    fontSize: '13px',
+    lineHeight: 'auto',
 };
@@ -227,6 +241,6 @@ export const taskButtonStyle = {
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    fontSize: '13px',
     fontStyle: 'normal',
     fontWeight: '500',
-    lineHeight: '1.375rem',
+    lineHeight: 'auto',
 };
@@ -241,1 +255,9 @@ export const taskButtonBorderedStyle = Object.assign(Object.assign({}, taskButtonStyle), { display: 'flex', padding: '0.25rem 0.9375rem', justifyContent: 'center', alignItems: 'center', gap: '0.5rem', borderRadius: '0.25rem', border: '1px solid #394EFF' });
 };
+export const spinnerStyles = {
+    border: '4px solid rgba(255, 255, 255, 0.4)',
+    width: '16px',
+    height: '16px',
+    borderRadius: '50%',
+    borderLeftColor: '#fff',
+    animation: 'spin 0.5s linear infinite',
+};

package.json

 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "11.0.0",
+  "version": "11.0.1",
   "keywords": [
@@ -29,3 +29,3 @@ "logging",
     "postversion": "bun run build",
-    "prepublishOnly": "bun run test && bun run build"
+    "prepublishOnly": "bun run build"
   },
@@ -32,0 +32,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

3517270

increased by6.93%

Number of package files

288

increased by3.6%

Lines of code

20296

increased by4.15%

No dependency changes