@openreplay/tracker 18.1.0-beta.0 → 18.1.1

package/dist/cjs/main/app/guards.d.ts

@@ -19,6 +19,7 @@ type TagTypeMap = {
     link: HTMLLinkElement;
     canvas: HTMLCanvasElement;
     slot: HTMLSlotElement;
+    dialog: HTMLDialogElement;
 };
 export declare function hasTag<T extends keyof TagTypeMap>(el: Node, tagName: T): el is TagTypeMap[typeof tagName];
 export {};

package/dist/cjs/main/app/observer/top_observer.d.ts

@@ -46,6 +46,10 @@ export default class TopObserver extends Observer {
     private shadowRootObservers;
     private handleShadowRoot;
     observe(): void;
+    private colorSchemeMQL;
+    private colorSchemeListener;
+    /** Send resolved used color-scheme ('dark'|'light'|'normal') for the player to force on replay. */
+    private sendColorScheme;
     crossdomainObserve(rootNodeId: number, frameOder: number, frameLevel: number): void;
     disconnect(): void;
 }

package/dist/lib/entry.js

@@ -3308,6 +3308,25 @@ class Observer {
             }
             return;
         }
+        // `open` alone can't tell showModal() (modal/top-layer) from show()/`<dialog open>`
+        // (non-modal); emit the mode alongside it so the player replays the right call (see DOMManager).
+        if (name === 'open' && hasTag(node, 'dialog')) {
+            let mode;
+            if (value === null) {
+                mode = 'closed';
+            }
+            else {
+                let isModal = false;
+                try {
+                    isModal = node.matches('dialog:modal');
+                }
+                catch (e) {
+                    /* :modal pseudo-class unsupported on this browser */
+                }
+                mode = isModal ? 'modal' : 'nonmodal';
+            }
+            this.app.send(SetNodeAttribute(id, '__openreplay_dialog', mode));
+        }
         if (name === 'src' ||
             name === 'srcset' ||
             name === 'integrity' ||
@@ -3916,6 +3935,8 @@ class TopObserver extends Observer {
         this.iframeObservers = new WeakMap();
         this.docObservers = new WeakMap();
         this.shadowRootObservers = new WeakMap();
+        this.colorSchemeMQL = null;
+        this.colorSchemeListener = null;
         this.app = params.app;
         this.options = opts;
         // IFrames
@@ -4010,9 +4031,36 @@ class TopObserver extends Observer {
             // it has no node_id here
             this.app.nodes.callNodeCallbacks(document, true);
         }, window.document.documentElement);
+        // Send before `orloaded` so it lands in the initial visual batch (see sendColorScheme).
+        this.sendColorScheme();
         // "DOM parsed" signal: observeRoot sent the full initial tree synchronously above.
         // The worker keys on this attribute (BatchWriter) to finalize the visual batch.
         this.app.send(SetNodeAttribute(0, 'orloaded', 'true'));
+        if (IN_BROWSER && window.matchMedia) {
+            this.colorSchemeMQL = window.matchMedia('(prefers-color-scheme: dark)');
+            this.colorSchemeListener = this.app.safe(() => this.sendColorScheme());
+            this.colorSchemeMQL.addEventListener?.('change', this.colorSchemeListener);
+        }
+    }
+    /** Send resolved used color-scheme ('dark'|'light'|'normal') for the player to force on replay. */
+    sendColorScheme() {
+        if (!IN_BROWSER)
+            return;
+        const root = document.documentElement;
+        let declared = getComputedStyle(root).colorScheme;
+        if (!declared || declared === 'normal') {
+            const meta = document.querySelector('meta[name="color-scheme" i]');
+            const content = meta && meta.getAttribute('content');
+            if (content)
+                declared = content;
+        }
+        let used = 'normal';
+        if (declared && declared !== 'normal') {
+            const prefersDark = !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+            // resolve declared support against OS preference into the concrete used scheme
+            used = declared.includes('dark') && (prefersDark || !declared.includes('light')) ? 'dark' : 'light';
+        }
+        this.app.send(SetNodeAttribute(0, '__openreplay_color_scheme', used));
     }
     crossdomainObserve(rootNodeId, frameOder, frameLevel) {
         const observer = this;
@@ -4032,6 +4080,11 @@ class TopObserver extends Observer {
         iframeObserver.syntheticObserve(rootNodeId, window.document);
     }
     disconnect() {
+        if (this.colorSchemeMQL && this.colorSchemeListener) {
+            this.colorSchemeMQL.removeEventListener?.('change', this.colorSchemeListener);
+        }
+        this.colorSchemeMQL = null;
+        this.colorSchemeListener = null;
         this.iframeOffsets.clear();
         Element.prototype.attachShadow = attachShadowNativeFn;
         this.iframeObserversArr.forEach((observer) => observer.disconnect());
@@ -4307,7 +4360,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '18.1.0-beta.0'; // TODO: version compatability check inside each plugin.
+        this.version = '18.1.1'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -9720,7 +9773,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '18.1.0-beta.0',
+            sdk_version: '18.1.1',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -10461,7 +10514,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '18.1.0-beta.0',
+                trackerVersion: '18.1.1',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,