@openreplay/tracker 10.0.3 → 11.0.0

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

@@ -0,0 +1,260 @@
+export declare const bgStyle: {
+    position: string;
+    top: number;
+    left: number;
+    width: string;
+    height: string;
+    background: string;
+    display: string;
+    alignItems: string;
+    justifyContent: string;
+    zIndex: number;
+};
+export declare const containerStyle: {
+    display: string;
+    flexDirection: string;
+    gap: string;
+    alignItems: string;
+    padding: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    width: string;
+};
+export declare const containerWidgetStyle: {
+    display: string;
+    'flex-direction': string;
+    gap: string;
+    'align-items': string;
+    padding: string;
+    'border-radius': string;
+    border: string;
+    background: string;
+    width: string;
+};
+export declare const titleStyle: {
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+    color: string;
+};
+export declare const descriptionStyle: {
+    borderTop: string;
+    borderBottom: string;
+    padding: string;
+    color: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const noticeStyle: {
+    color: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const buttonStyle: {
+    display: string;
+    padding: string;
+    justifyContent: string;
+    alignItems: string;
+    gap: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    boxShadow: string;
+    color: string;
+    textAlign: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+    cursor: string;
+};
+export declare const sectionTitleStyle: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    display: string;
+    justifyContent: string;
+    width: string;
+    cursor: string;
+};
+export declare const contentStyle: {
+    display: string;
+    flexDirection: string;
+    alignItems: string;
+    gap: string;
+};
+export declare const titleWidgetStyle: {
+    padding: string;
+    gap: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+    color: string;
+    display: string;
+    alignItems: string;
+    width: string;
+    borderRadius: string;
+    background: string;
+    boxSizing: string;
+};
+export declare const descriptionWidgetStyle: {
+    boxSizing: string;
+    display: string;
+    width: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    padding: string;
+    alignSelf: string;
+    color: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const endSectionStyle: {
+    display: string;
+    flexDirection: string;
+    alignItems: string;
+    gap: string;
+    boxSizing: string;
+    width: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    padding: string;
+    alignSelf: string;
+    color: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const symbolIcon: {
+    fontSize: string;
+    fontWeight: string;
+    cursor: string;
+    color: string;
+};
+export declare const buttonWidgetStyle: {
+    display: string;
+    padding: string;
+    justifyContent: string;
+    alignItems: string;
+    gap: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    boxShadow: string;
+    color: string;
+    textAlign: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+    width: string;
+    boxSizing: string;
+    cursor: string;
+};
+export declare const stopWidgetStyle: {
+    marginTop: string;
+    cursor: string;
+    display: string;
+    fontWeight: string;
+};
+export declare const paginationStyle: {
+    display: string;
+    justifyContent: string;
+    alignItems: string;
+    gap: string;
+    padding: string;
+    width: string;
+    boxSizing: string;
+};
+export declare const taskNumberActive: {
+    display: string;
+    padding: string;
+    flexDirection: string;
+    alignItems: string;
+    borderRadius: string;
+    outline: string;
+};
+export declare const taskNumberDone: {
+    display: string;
+    padding: string;
+    flexDirection: string;
+    alignItems: string;
+    borderRadius: string;
+    outline: string;
+    boxShadow: string;
+    background: string;
+};
+export declare const taskDescriptionCard: {
+    borderRadius: string;
+    border: string;
+    background: string;
+    boxShadow: string;
+    display: string;
+    flexDirection: string;
+    padding: string;
+    gap: string;
+    alignSelf: string;
+};
+export declare const taskTextStyle: {
+    fontWeight: string;
+};
+export declare const taskDescriptionStyle: {
+    color: string;
+};
+export declare const taskButtonStyle: {
+    marginRight: string;
+    cursor: string;
+    color: string;
+    textAlign: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const taskButtonBorderedStyle: {
+    display: string;
+    padding: string;
+    justifyContent: string;
+    alignItems: string;
+    gap: string;
+    borderRadius: string;
+    border: string;
+    marginRight: string;
+    cursor: string;
+    color: string;
+    textAlign: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const taskButtonsRow: {
+    display: string;
+    justifyContent: string;
+    alignItems: string;
+    width: string;
+    boxSizing: string;
+};

package/cjs/modules/userTesting/styles.js

@@ -0,0 +1,229 @@
+"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.bgStyle = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    background: 'rgba(0, 0, 0, 0.40)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 999999,
+};
+exports.containerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    alignItems: 'center',
+    padding: '1.5rem',
+    borderRadius: '0.375rem',
+    border: '1px solid #D9D9D9',
+    background: '#FFF',
+    width: '29rem',
+};
+exports.containerWidgetStyle = {
+    display: 'flex',
+    'flex-direction': 'column',
+    gap: '8px',
+    'align-items': 'center',
+    padding: '1rem',
+    'border-radius': '0.375rem',
+    border: '1px solid #D9D9D9',
+    background: '#FFF',
+    width: '29rem',
+};
+exports.titleStyle = {
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1.25rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.75rem',
+    color: 'rgba(0, 0, 0, 0.85)',
+};
+exports.descriptionStyle = {
+    borderTop: '1px solid rgba(0, 0, 0, 0.06)',
+    borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
+    padding: '1.25rem 0rem',
+    color: 'rgba(0, 0, 0, 0.85)',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1rem',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '1.5rem',
+};
+exports.noticeStyle = {
+    color: 'rgba(0, 0, 0, 0.85)',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '0.875rem',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '1.375rem',
+};
+exports.buttonStyle = {
+    display: 'flex',
+    padding: '0.4rem 0.9375rem',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '0.625rem',
+    borderRadius: '0.25rem',
+    border: '1px solid #394EFF',
+    background: '#394EFF',
+    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
+    color: '#FFF',
+    textAlign: 'center',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.5rem',
+    cursor: 'pointer',
+};
+exports.sectionTitleStyle = {
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '0.875rem',
+    fontWeight: '500',
+    lineHeight: '1.375rem',
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    cursor: 'pointer',
+};
+exports.contentStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: '0.625rem',
+};
+// New widget styles
+exports.titleWidgetStyle = {
+    padding: '0.5rem',
+    gap: '0.5rem',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1.25rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.75rem',
+    color: 'white',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    borderRadius: '0.375rem',
+    background: 'rgba(0, 0, 0, 0.60)',
+    boxSizing: 'border-box',
+};
+exports.descriptionWidgetStyle = {
+    boxSizing: 'border-box',
+    display: 'block',
+    width: '100%',
+    borderRadius: '0.375rem',
+    border: '1px solid #D9D9D9',
+    background: '#FFF',
+    padding: '0.625rem 1rem',
+    alignSelf: 'stretch',
+    color: '#000',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '0.875rem',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '1.375rem',
+};
+exports.endSectionStyle = Object.assign(Object.assign({}, exports.descriptionWidgetStyle), { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.625rem' });
+exports.symbolIcon = {
+    fontSize: '1.25rem',
+    fontWeight: '500',
+    cursor: 'pointer',
+    color: '#394EFF',
+};
+exports.buttonWidgetStyle = {
+    display: 'flex',
+    padding: '0.4rem 0.9375rem',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '0.625rem',
+    borderRadius: '0.25rem',
+    border: '1px solid #394EFF',
+    background: '#394EFF',
+    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
+    color: '#FFF',
+    textAlign: 'center',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.5rem',
+    width: '100%',
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+};
+exports.stopWidgetStyle = {
+    marginTop: '2rem',
+    cursor: 'pointer',
+    display: 'block',
+    fontWeight: '600',
+};
+exports.paginationStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: '1rem',
+    padding: '0.5rem',
+    width: '100%',
+    boxSizing: 'border-box',
+};
+exports.taskNumberActive = {
+    display: 'flex',
+    padding: '0.0625rem 0.5rem',
+    flexDirection: 'column',
+    alignItems: 'center',
+    borderRadius: '6.25em',
+    outline: '1px solid #394EFF',
+};
+exports.taskNumberDone = {
+    display: 'flex',
+    padding: '0.0625rem 0.5rem',
+    flexDirection: 'column',
+    alignItems: 'center',
+    borderRadius: '6.25em',
+    outline: '1px solid #D2DFFF',
+    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
+    background: '#D2DFFF',
+};
+exports.taskDescriptionCard = {
+    borderRadius: '0.375rem',
+    border: '1px solid rgba(0, 0, 0, 0.06)',
+    background: '#F5F7FF',
+    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '0.625rem 0.9375rem',
+    gap: '0.5rem',
+    alignSelf: 'stretch',
+};
+exports.taskTextStyle = {
+    fontWeight: 'bold',
+};
+exports.taskDescriptionStyle = {
+    color: '#8C8C8C',
+};
+exports.taskButtonStyle = {
+    marginRight: '0.5rem',
+    cursor: 'pointer',
+    color: '#394EFF',
+    textAlign: 'center',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '0.875rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.375rem',
+};
+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.taskButtonsRow = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    boxSizing: 'border-box',
+};

package/lib/app/canvas.d.ts

@@ -0,0 +1,20 @@
+import App from '../app/index.js';
+interface Options {
+    fps: number;
+    quality: 'low' | 'medium' | 'high';
+}
+declare class CanvasRecorder {
+    private readonly app;
+    private readonly options;
+    private snapshots;
+    private readonly intervals;
+    private readonly interval;
+    constructor(app: App, options: Options);
+    startTracking(): void;
+    sendSnaps(images: {
+        data: string;
+        id: number;
+    }[], canvasId: number, createdAt: number): void;
+    clear(): void;
+}
+export default CanvasRecorder;

package/lib/app/canvas.js

@@ -0,0 +1,105 @@
+import { hasTag } from './guards.js';
+import { CanvasNode } from './messages.gen.js';
+class CanvasRecorder {
+    constructor(app, options) {
+        this.app = app;
+        this.options = options;
+        this.snapshots = {};
+        this.intervals = [];
+        this.interval = 1000 / options.fps;
+    }
+    startTracking() {
+        this.app.nodes.attachNodeCallback((node) => {
+            const id = this.app.nodes.getID(node);
+            if (!id || !hasTag(node, 'canvas') || this.snapshots[id]) {
+                return;
+            }
+            const ts = this.app.timestamp();
+            this.snapshots[id] = {
+                images: [],
+                createdAt: ts,
+            };
+            const canvasMsg = CanvasNode(id.toString(), ts);
+            this.app.send(canvasMsg);
+            const int = setInterval(() => {
+                const cid = this.app.nodes.getID(node);
+                const canvas = cid ? this.app.nodes.getNode(cid) : undefined;
+                if (!canvas || !hasTag(canvas, 'canvas') || canvas !== node) {
+                    console.log('Canvas element not in sync');
+                    clearInterval(int);
+                }
+                else {
+                    const snapshot = captureSnapshot(canvas, this.options.quality);
+                    this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot });
+                    if (this.snapshots[id].images.length > 9) {
+                        this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt);
+                        this.snapshots[id].images = [];
+                    }
+                }
+            }, this.interval);
+            this.intervals.push(int);
+        });
+    }
+    sendSnaps(images, canvasId, createdAt) {
+        var _a;
+        if (Object.keys(this.snapshots).length === 0) {
+            console.log(this.snapshots);
+            return;
+        }
+        const formData = new FormData();
+        images.forEach((snapshot) => {
+            const blob = dataUrlToBlob(snapshot.data)[0];
+            formData.append('snapshot', blob, `${createdAt}_${canvasId}_${snapshot.id}.jpeg`);
+            // saveImageData(snapshot.data, `${createdAt}_${canvasId}_${snapshot.id}.jpeg`)
+        });
+        fetch(this.app.options.ingestPoint + '/v1/web/images', {
+            method: 'POST',
+            headers: {
+                Authorization: `Bearer ${(_a = this.app.session.getSessionToken()) !== null && _a !== void 0 ? _a : ''}`,
+            },
+            body: formData,
+        })
+            .then((r) => {
+            console.log('done', r);
+        })
+            .catch((e) => {
+            console.error('error saving canvas', e);
+        });
+    }
+    clear() {
+        console.log('cleaning up');
+        this.intervals.forEach((int) => clearInterval(int));
+        this.snapshots = {};
+    }
+}
+const qualityInt = {
+    low: 0.33,
+    medium: 0.55,
+    high: 0.8,
+};
+function captureSnapshot(canvas, quality = 'medium') {
+    const imageFormat = 'image/jpeg'; // or /png'
+    return canvas.toDataURL(imageFormat, qualityInt[quality]);
+}
+function dataUrlToBlob(dataUrl) {
+    const [header, base64] = dataUrl.split(',');
+    // @ts-ignore
+    const mime = header.match(/:(.*?);/)[1];
+    const blobStr = atob(base64);
+    let n = blobStr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = blobStr.charCodeAt(n);
+    }
+    return [new Blob([u8arr], { type: mime }), u8arr];
+}
+function saveImageData(imageDataUrl, name) {
+    const link = document.createElement('a');
+    link.href = imageDataUrl;
+    link.download = name;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+export default CanvasRecorder;

package/lib/app/guards.d.ts

@@ -16,6 +16,7 @@ type TagTypeMap = {
     iframe: HTMLIFrameElement;
     style: HTMLStyleElement | SVGStyleElement;
     link: HTMLLinkElement;
+    canvas: HTMLCanvasElement;
 };
 export declare function hasTag<T extends keyof TagTypeMap>(el: Node, tagName: T): el is TagTypeMap[typeof tagName];
 export {};

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;
@@ -85,6 +86,8 @@ export default class App {
     private readonly bc;
     private readonly contextId;
     attributeSender: AttributeSender;
+    private canvasRecorder;
+    private uxtManager;
     constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>);
     private _debug;
     private _usingOldFetchPlugin;