@highlight-run/rrweb 2.0.1 → 2.0.4

package/es/rrweb/packages/rrweb/src/replay/index.js

@@ -1,1864 +1,1555 @@
-import { __spreadArray, __read, __values, __assign } from '../../ext/tslib/tslib.es6.js';
-import { createCache, rebuild, buildNodeWithSN, NodeType } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
-import * as mitt_es from '../../../../ext/mitt/dist/mitt.es.js';
-import mitt$1 from '../../../../ext/mitt/dist/mitt.es.js';
+import { __awaiter } from './../../../../ext/tslib/tslib.es6.js';
+import { createCache, createMirror, rebuild, buildNodeWithSN, NodeType } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
+import { RRDocument, diff, createOrGetNode, getDefaultSN, StyleRuleType, buildFromDom, buildFromNode } from '../../../rrdom/es/virtual-dom.js';
+import * as mitt_es from './../../../../ext/mitt/dist/mitt.es.js';
+import mitt$1 from './../../../../ext/mitt/dist/mitt.es.js';
 import { polyfill } from './smoothscroll.js';
 import { Timer } from './timer.js';
 import { createPlayerService, createSpeedService } from './machine.js';
 import { ReplayerEvents, EventType, IncrementalSource, MouseInteractions } from '../types.js';
-import { polyfill as polyfill$1, isIframeINode, hasShadowRoot, queueToResolveTrees, iterateResolveTree, getBaseDimension, createMirror, TreeIndex } from '../utils.js';
+import { polyfill as polyfill$1, isSerializedIframe, getNestedRule, getPositionsAndIndex, hasShadowRoot, queueToResolveTrees, iterateResolveTree, uniqueTextMutations, getBaseDimension } from '../utils.js';
 import rules from './styles/inject-style.js';
-import { getNestedRule, StyleRuleType, getPositionsAndIndex, storeCSSRules, applyVirtualStyleRulesToNode } from './virtual-styles.js';
 import canvasMutation from './canvas/index.js';
+import { deserializeArg } from './canvas/deserialize-args.js';
 
-var SKIP_TIME_THRESHOLD = 10 * 1000;
-var SKIP_TIME_INTERVAL = 2 * 1000;
-var SKIP_TIME_MIN = 1 * 1000;
-var SKIP_DURATION_LIMIT = 60 * 60 * 1000;
-var mitt = mitt$1 || mitt_es;
-var REPLAY_CONSOLE_PREFIX = '[replayer]';
-var defaultMouseTailConfig = {
-    duration: 500,
-    lineCap: 'round',
-    lineWidth: 3,
-    strokeStyle: 'red',
-};
-function indicatesTouchDevice(e) {
-    return (e.type == EventType.IncrementalSnapshot &&
-        (e.data.source == IncrementalSource.TouchMove ||
-            (e.data.source == IncrementalSource.MouseInteraction &&
-                e.data.type == MouseInteractions.TouchStart)));
+const SKIP_TIME_THRESHOLD = 10 * 1000;
+const SKIP_TIME_INTERVAL = 2 * 1000;
+const SKIP_TIME_MIN = 1 * 1000;
+const SKIP_DURATION_LIMIT = 60 * 60 * 1000;
+const mitt = mitt$1 || mitt_es;
+const REPLAY_CONSOLE_PREFIX = '[replayer]';
+const defaultMouseTailConfig = {
+    duration: 500,
+    lineCap: 'round',
+    lineWidth: 3,
+    strokeStyle: 'red',
+};
+function indicatesTouchDevice(e) {
+    return (e.type == EventType.IncrementalSnapshot &&
+        (e.data.source == IncrementalSource.TouchMove ||
+            (e.data.source == IncrementalSource.MouseInteraction &&
+                e.data.type == MouseInteractions.TouchStart)));
+}
+class Replayer {
+    constructor(events, config) {
+        this.usingVirtualDom = false;
+        this.virtualDom = new RRDocument();
+        this.mouseTail = null;
+        this.tailPositions = [];
+        this.emitter = mitt();
+        this.activityIntervals = [];
+        this.legacy_missingNodeRetryMap = {};
+        this.cache = createCache();
+        this.imageMap = new Map();
+        this.canvasEventMap = new Map();
+        this.mirror = createMirror();
+        this.firstFullSnapshot = null;
+        this.newDocumentQueue = [];
+        this.mousePos = null;
+        this.touchActive = null;
+        if (!(config === null || config === void 0 ? void 0 : config.liveMode) && events.length < 2) {
+            throw new Error('Replayer need at least 2 events.');
+        }
+        const defaultConfig = {
+            speed: 1,
+            maxSpeed: 360,
+            root: document.body,
+            loadTimeout: 0,
+            skipInactive: false,
+            showWarning: true,
+            showDebug: false,
+            blockClass: 'highlight-block',
+            liveMode: false,
+            insertStyleRules: [],
+            triggerFocus: true,
+            UNSAFE_replayCanvas: false,
+            pauseAnimation: true,
+            mouseTail: defaultMouseTailConfig,
+            useVirtualDom: true,
+            inactiveThreshold: 0.02,
+            inactiveSkipTime: SKIP_TIME_INTERVAL,
+        };
+        this.config = Object.assign({}, defaultConfig, config);
+        this.handleResize = this.handleResize.bind(this);
+        this.getCastFn = this.getCastFn.bind(this);
+        this.applyEventsSynchronously = this.applyEventsSynchronously.bind(this);
+        this.emitter.on(ReplayerEvents.Resize, this.handleResize);
+        this.setupDom();
+        this.emitter.on(ReplayerEvents.Flush, () => {
+            if (this.usingVirtualDom) {
+                const replayerHandler = {
+                    mirror: this.mirror,
+                    applyCanvas: (canvasEvent, canvasMutationData, target) => {
+                        canvasMutation({
+                            event: canvasEvent,
+                            mutation: canvasMutationData,
+                            target,
+                            imageMap: this.imageMap,
+                            canvasEventMap: this.canvasEventMap,
+                            errorHandler: this.warnCanvasMutationFailed.bind(this),
+                        });
+                    },
+                    applyInput: this.applyInput.bind(this),
+                    applyScroll: this.applyScroll.bind(this),
+                };
+                diff(this.iframe.contentDocument, this.virtualDom, replayerHandler, this.virtualDom.mirror);
+                this.virtualDom.destroyTree();
+                this.usingVirtualDom = false;
+                if (Object.keys(this.legacy_missingNodeRetryMap).length) {
+                    for (const key in this.legacy_missingNodeRetryMap) {
+                        try {
+                            const value = this.legacy_missingNodeRetryMap[key];
+                            const realNode = createOrGetNode(value.node, this.mirror, this.virtualDom.mirror);
+                            diff(realNode, value.node, replayerHandler, this.virtualDom.mirror);
+                            value.node = realNode;
+                        }
+                        catch (error) {
+                            if (this.config.showWarning) {
+                                console.warn(error);
+                            }
+                        }
+                    }
+                }
+            }
+            if (this.mousePos) {
+                this.moveAndHover(this.mousePos.x, this.mousePos.y, this.mousePos.id, true, this.mousePos.debugData);
+            }
+            this.mousePos = null;
+        });
+        this.emitter.on(ReplayerEvents.PlayBack, () => {
+            this.firstFullSnapshot = null;
+            this.mirror.reset();
+        });
+        const timer = new Timer([], (config === null || config === void 0 ? void 0 : config.speed) || defaultConfig.speed);
+        this.service = createPlayerService({
+            events: events
+                .map((e) => {
+                if (config && config.unpackFn) {
+                    return config.unpackFn(e);
+                }
+                return e;
+            })
+                .sort((a1, a2) => a1.timestamp - a2.timestamp),
+            timer,
+            timeOffset: 0,
+            baselineTime: 0,
+            lastPlayedEvent: null,
+        }, {
+            getCastFn: this.getCastFn,
+            applyEventsSynchronously: this.applyEventsSynchronously,
+            emitter: this.emitter,
+        });
+        this.service.start();
+        this.service.subscribe((state) => {
+            this.emitter.emit(ReplayerEvents.StateChange, {
+                player: state,
+            });
+        });
+        this.speedService = createSpeedService({
+            normalSpeed: -1,
+            timer,
+        });
+        this.speedService.start();
+        this.speedService.subscribe((state) => {
+            this.emitter.emit(ReplayerEvents.StateChange, {
+                speed: state,
+            });
+        });
+        const firstMeta = this.service.state.context.events.find((e) => e.type === EventType.Meta);
+        const firstFullsnapshot = this.service.state.context.events.find((e) => e.type === EventType.FullSnapshot);
+        if (firstMeta) {
+            const { width, height } = firstMeta.data;
+            setTimeout(() => {
+                this.emitter.emit(ReplayerEvents.Resize, {
+                    width,
+                    height,
+                });
+            }, 0);
+        }
+        if (firstFullsnapshot) {
+            setTimeout(() => {
+                if (this.firstFullSnapshot) {
+                    return;
+                }
+                this.firstFullSnapshot = firstFullsnapshot;
+                this.rebuildFullSnapshot(firstFullsnapshot);
+                this.iframe.contentWindow.scrollTo(firstFullsnapshot.data.initialOffset);
+            }, 1);
+        }
+        if (this.service.state.context.events.find(indicatesTouchDevice)) {
+            this.mouse.classList.add('touch-device');
+        }
+    }
+    get timer() {
+        return this.service.state.context.timer;
+    }
+    on(event, handler) {
+        this.emitter.on(event, handler);
+        return this;
+    }
+    off(event, handler) {
+        this.emitter.off(event, handler);
+        return this;
+    }
+    setConfig(config) {
+        Object.keys(config).forEach((key) => {
+            this.config[key] = config[key];
+        });
+        if (!this.config.skipInactive) {
+            this.backToNormal();
+        }
+        if (typeof config.speed !== 'undefined') {
+            this.speedService.send({
+                type: 'SET_SPEED',
+                payload: {
+                    speed: config.speed,
+                },
+            });
+        }
+        if (typeof config.mouseTail !== 'undefined') {
+            if (config.mouseTail === false) {
+                if (this.mouseTail) {
+                    this.mouseTail.style.display = 'none';
+                }
+            }
+            else {
+                if (!this.mouseTail) {
+                    this.mouseTail = document.createElement('canvas');
+                    this.mouseTail.width = Number.parseFloat(this.iframe.width);
+                    this.mouseTail.height = Number.parseFloat(this.iframe.height);
+                    this.mouseTail.classList.add('replayer-mouse-tail');
+                    this.wrapper.insertBefore(this.mouseTail, this.iframe);
+                }
+                this.mouseTail.style.display = 'inherit';
+            }
+        }
+    }
+    getActivityIntervals() {
+        if (this.activityIntervals.length == 0) {
+            const allIntervals = [];
+            const metadata = this.getMetaData();
+            const userInteractionEvents = [
+                { timestamp: metadata.startTime },
+                ...this.service.state.context.events.filter((ev) => this.isUserInteraction(ev)),
+                { timestamp: metadata.endTime },
+            ];
+            for (let i = 1; i < userInteractionEvents.length; i++) {
+                const currentInterval = userInteractionEvents[i - 1];
+                const _event = userInteractionEvents[i];
+                if (_event.timestamp - currentInterval.timestamp >
+                    SKIP_TIME_THRESHOLD) {
+                    allIntervals.push({
+                        startTime: currentInterval.timestamp,
+                        endTime: _event.timestamp,
+                        duration: _event.timestamp - currentInterval.timestamp,
+                        active: false,
+                    });
+                }
+                else {
+                    allIntervals.push({
+                        startTime: currentInterval.timestamp,
+                        endTime: _event.timestamp,
+                        duration: _event.timestamp - currentInterval.timestamp,
+                        active: true,
+                    });
+                }
+            }
+            const mergedIntervals = [];
+            let currentInterval = allIntervals[0];
+            for (let i = 1; i < allIntervals.length; i++) {
+                if (allIntervals[i].active != allIntervals[i - 1].active) {
+                    mergedIntervals.push({
+                        startTime: currentInterval.startTime,
+                        endTime: allIntervals[i - 1].endTime,
+                        duration: allIntervals[i - 1].endTime - currentInterval.startTime,
+                        active: allIntervals[i - 1].active,
+                    });
+                    currentInterval = allIntervals[i];
+                }
+            }
+            if (currentInterval && allIntervals.length > 0) {
+                mergedIntervals.push({
+                    startTime: currentInterval.startTime,
+                    endTime: allIntervals[allIntervals.length - 1].endTime,
+                    duration: allIntervals[allIntervals.length - 1].endTime -
+                        currentInterval.startTime,
+                    active: allIntervals[allIntervals.length - 1].active,
+                });
+            }
+            currentInterval = mergedIntervals[0];
+            for (let i = 1; i < mergedIntervals.length; i++) {
+                if ((!mergedIntervals[i].active &&
+                    mergedIntervals[i].duration >
+                        this.config.inactiveThreshold * metadata.totalTime) ||
+                    (!mergedIntervals[i - 1].active &&
+                        mergedIntervals[i - 1].duration >
+                            this.config.inactiveThreshold * metadata.totalTime)) {
+                    this.activityIntervals.push({
+                        startTime: currentInterval.startTime,
+                        endTime: mergedIntervals[i - 1].endTime,
+                        duration: mergedIntervals[i - 1].endTime - currentInterval.startTime,
+                        active: mergedIntervals[i - 1].active,
+                    });
+                    currentInterval = mergedIntervals[i];
+                }
+            }
+            if (currentInterval && mergedIntervals.length > 0) {
+                this.activityIntervals.push({
+                    startTime: currentInterval.startTime,
+                    endTime: mergedIntervals[mergedIntervals.length - 1].endTime,
+                    duration: mergedIntervals[mergedIntervals.length - 1].endTime -
+                        currentInterval.startTime,
+                    active: mergedIntervals[mergedIntervals.length - 1].active,
+                });
+            }
+        }
+        return this.activityIntervals;
+    }
+    getMetaData() {
+        const firstEvent = this.service.state.context.events[0];
+        const lastEvent = this.service.state.context.events[this.service.state.context.events.length - 1];
+        return {
+            startTime: firstEvent.timestamp,
+            endTime: lastEvent.timestamp,
+            totalTime: lastEvent.timestamp - firstEvent.timestamp,
+        };
+    }
+    getCurrentTime() {
+        return this.timer.timeOffset + this.getTimeOffset();
+    }
+    getTimeOffset() {
+        const { baselineTime, events } = this.service.state.context;
+        return baselineTime - events[0].timestamp;
+    }
+    getMirror() {
+        return this.mirror;
+    }
+    play(timeOffset = 0) {
+        var _a, _b;
+        if (this.service.state.matches('paused')) {
+            this.service.send({ type: 'PLAY', payload: { timeOffset } });
+        }
+        else {
+            this.service.send({ type: 'PAUSE' });
+            this.service.send({ type: 'PLAY', payload: { timeOffset } });
+        }
+        (_b = (_a = this.iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('html')[0]) === null || _b === void 0 ? void 0 : _b.classList.remove('rrweb-paused');
+        this.emitter.emit(ReplayerEvents.Start);
+        this.handleInactivity(this.getMetaData().startTime + timeOffset, true);
+    }
+    pause(timeOffset) {
+        var _a, _b;
+        if (timeOffset === undefined && this.service.state.matches('playing')) {
+            this.service.send({ type: 'PAUSE' });
+        }
+        if (typeof timeOffset === 'number') {
+            this.play(timeOffset);
+            this.service.send({ type: 'PAUSE' });
+        }
+        (_b = (_a = this.iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('html')[0]) === null || _b === void 0 ? void 0 : _b.classList.add('rrweb-paused');
+        this.emitter.emit(ReplayerEvents.Pause);
+    }
+    resume(timeOffset = 0) {
+        console.warn(`The 'resume' will be departed in 1.0. Please use 'play' method which has the same interface.`);
+        this.play(timeOffset);
+        this.emitter.emit(ReplayerEvents.Resume);
+    }
+    startLive(baselineTime) {
+        this.service.send({ type: 'TO_LIVE', payload: { baselineTime } });
+    }
+    addEvent(rawEvent) {
+        const event = this.config.unpackFn
+            ? this.config.unpackFn(rawEvent)
+            : rawEvent;
+        if (indicatesTouchDevice(event)) {
+            this.mouse.classList.add('touch-device');
+        }
+        Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }));
+    }
+    replaceEvents(events) {
+        for (const event of events) {
+            if (indicatesTouchDevice(event)) {
+                this.mouse.classList.add('touch-device');
+                break;
+            }
+        }
+        this.service.send({ type: 'REPLACE_EVENTS', payload: { events } });
+    }
+    enableInteract() {
+        this.iframe.setAttribute('scrolling', 'auto');
+        this.iframe.style.pointerEvents = 'auto';
+    }
+    disableInteract() {
+        this.iframe.setAttribute('scrolling', 'no');
+        this.iframe.style.pointerEvents = 'none';
+    }
+    resetCache() {
+        this.cache = createCache();
+    }
+    setupDom() {
+        this.wrapper = document.createElement('div');
+        this.wrapper.classList.add('replayer-wrapper');
+        this.config.root.appendChild(this.wrapper);
+        this.mouse = document.createElement('div');
+        this.mouse.classList.add('replayer-mouse');
+        this.wrapper.appendChild(this.mouse);
+        if (this.config.mouseTail !== false) {
+            this.mouseTail = document.createElement('canvas');
+            this.mouseTail.classList.add('replayer-mouse-tail');
+            this.mouseTail.style.display = 'inherit';
+            this.wrapper.appendChild(this.mouseTail);
+        }
+        this.iframe = document.createElement('iframe');
+        const attributes = ['allow-same-origin'];
+        if (this.config.UNSAFE_replayCanvas) {
+            attributes.push('allow-scripts');
+        }
+        this.iframe.style.display = 'none';
+        this.iframe.setAttribute('sandbox', attributes.join(' '));
+        this.disableInteract();
+        this.wrapper.appendChild(this.iframe);
+        if (this.iframe.contentWindow && this.iframe.contentDocument) {
+            polyfill(this.iframe.contentWindow, this.iframe.contentDocument);
+            polyfill$1(this.iframe.contentWindow);
+        }
+    }
+    handleResize(dimension) {
+        this.iframe.style.display = 'inherit';
+        for (const el of [this.mouseTail, this.iframe]) {
+            if (!el) {
+                continue;
+            }
+            el.setAttribute('width', String(dimension.width));
+            el.setAttribute('height', String(dimension.height));
+        }
+    }
+    applyEventsSynchronously(events) {
+        for (const event of events) {
+            switch (event.type) {
+                case EventType.DomContentLoaded:
+                case EventType.Load:
+                case EventType.Custom:
+                    continue;
+                case EventType.FullSnapshot:
+                case EventType.Meta:
+                case EventType.Plugin:
+                case EventType.IncrementalSnapshot:
+                    break;
+            }
+            const castFn = this.getCastFn(event, true);
+            castFn();
+        }
+        if (this.touchActive === true) {
+            this.mouse.classList.add('touch-active');
+        }
+        else if (this.touchActive === false) {
+            this.mouse.classList.remove('touch-active');
+        }
+        this.touchActive = null;
+    }
+    getCastFn(event, isSync = false) {
+        let castFn;
+        switch (event.type) {
+            case EventType.DomContentLoaded:
+            case EventType.Load:
+                break;
+            case EventType.Custom:
+                castFn = () => {
+                    this.emitter.emit(ReplayerEvents.CustomEvent, event);
+                };
+                break;
+            case EventType.Meta:
+                castFn = () => this.emitter.emit(ReplayerEvents.Resize, {
+                    width: event.data.width,
+                    height: event.data.height,
+                });
+                break;
+            case EventType.FullSnapshot:
+                castFn = () => {
+                    if (this.firstFullSnapshot) {
+                        if (this.firstFullSnapshot === event) {
+                            this.firstFullSnapshot = true;
+                            return;
+                        }
+                    }
+                    else {
+                        this.firstFullSnapshot = true;
+                    }
+                    this.rebuildFullSnapshot(event, isSync);
+                    this.iframe.contentWindow.scrollTo(event.data.initialOffset);
+                };
+                break;
+            case EventType.IncrementalSnapshot:
+                castFn = () => {
+                    this.applyIncremental(event, isSync);
+                    if (isSync) {
+                        return;
+                    }
+                    this.handleInactivity(event.timestamp);
+                    if (event === this.nextUserInteractionEvent) {
+                        this.nextUserInteractionEvent = null;
+                        this.backToNormal();
+                    }
+                    if (this.config.skipInactive && !this.nextUserInteractionEvent) {
+                        for (const _event of this.service.state.context.events) {
+                            if (_event.timestamp <= event.timestamp) {
+                                continue;
+                            }
+                            if (this.isUserInteraction(_event)) {
+                                if (_event.delay - event.delay >
+                                    SKIP_TIME_THRESHOLD *
+                                        this.speedService.state.context.timer.speed) {
+                                    this.nextUserInteractionEvent = _event;
+                                }
+                                break;
+                            }
+                        }
+                        if (this.nextUserInteractionEvent) {
+                            const skipTime = this.nextUserInteractionEvent.delay - event.delay;
+                            const payload = {
+                                speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), this.config.maxSpeed),
+                            };
+                            this.speedService.send({ type: 'FAST_FORWARD', payload });
+                            this.emitter.emit(ReplayerEvents.SkipStart, payload);
+                        }
+                    }
+                };
+                break;
+        }
+        const wrappedCastFn = () => {
+            if (castFn) {
+                castFn();
+            }
+            for (const plugin of this.config.plugins || []) {
+                plugin.handler(event, isSync, { replayer: this });
+            }
+            this.service.send({ type: 'CAST_EVENT', payload: { event } });
+            const last_index = this.service.state.context.events.length - 1;
+            if (event === this.service.state.context.events[last_index]) {
+                const finish = () => {
+                    if (last_index < this.service.state.context.events.length - 1) {
+                        return;
+                    }
+                    this.backToNormal();
+                    this.service.send('END');
+                    this.emitter.emit(ReplayerEvents.Finish);
+                };
+                if (event.type === EventType.IncrementalSnapshot &&
+                    event.data.source === IncrementalSource.MouseMove &&
+                    event.data.positions.length) {
+                    setTimeout(() => {
+                        finish();
+                    }, Math.max(0, -event.data.positions[0].timeOffset + 50));
+                }
+                else {
+                    finish();
+                }
+            }
+            this.emitter.emit(ReplayerEvents.EventCast, event);
+        };
+        return wrappedCastFn;
+    }
+    handleInactivity(timestamp, resetNext) {
+        if (timestamp === this.inactiveEndTimestamp || resetNext) {
+            this.inactiveEndTimestamp = null;
+            this.backToNormal();
+        }
+        if (this.config.skipInactive && !this.inactiveEndTimestamp) {
+            for (const interval of this.getActivityIntervals()) {
+                if (timestamp >= interval.startTime &&
+                    timestamp < interval.endTime &&
+                    !interval.active) {
+                    this.inactiveEndTimestamp = interval.endTime;
+                    break;
+                }
+            }
+            if (this.inactiveEndTimestamp) {
+                const skipTime = this.inactiveEndTimestamp - timestamp;
+                const payload = {
+                    speed: (skipTime / SKIP_DURATION_LIMIT) * this.config.inactiveSkipTime <
+                        SKIP_TIME_MIN
+                        ? skipTime / SKIP_TIME_MIN
+                        : Math.round(Math.max(skipTime, SKIP_DURATION_LIMIT) /
+                            this.config.inactiveSkipTime),
+                };
+                this.speedService.send({ type: 'FAST_FORWARD', payload });
+                this.emitter.emit(ReplayerEvents.SkipStart, payload);
+            }
+        }
+    }
+    rebuildFullSnapshot(event, isSync = false) {
+        if (!this.iframe.contentDocument) {
+            return console.warn('Looks like your replayer has been destroyed.');
+        }
+        if (Object.keys(this.legacy_missingNodeRetryMap).length) {
+            console.warn('Found unresolved missing node map', this.legacy_missingNodeRetryMap);
+        }
+        this.legacy_missingNodeRetryMap = {};
+        const collected = [];
+        rebuild(event.data.node, {
+            doc: this.iframe.contentDocument,
+            afterAppend: (builtNode) => {
+                this.collectIframeAndAttachDocument(collected, builtNode);
+            },
+            cache: this.cache,
+            mirror: this.mirror,
+        });
+        for (const { mutationInQueue, builtNode } of collected) {
+            this.attachDocumentToIframe(mutationInQueue, builtNode);
+            this.newDocumentQueue = this.newDocumentQueue.filter((m) => m !== mutationInQueue);
+        }
+        const { documentElement, head } = this.iframe.contentDocument;
+        this.insertStyleRules(documentElement, head);
+        if (!this.service.state.matches('playing')) {
+            this.iframe.contentDocument
+                .getElementsByTagName('html')[0]
+                .classList.add('rrweb-paused');
+        }
+        this.emitter.emit(ReplayerEvents.FullsnapshotRebuilded, event);
+        if (!isSync) {
+            this.waitForStylesheetLoad();
+        }
+        if (this.config.UNSAFE_replayCanvas) {
+            this.preloadAllImages();
+        }
+    }
+    insertStyleRules(documentElement, head) {
+        const injectStylesRules = rules(this.config.blockClass).concat(this.config.insertStyleRules);
+        if (this.config.pauseAnimation) {
+            injectStylesRules.push('html.rrweb-paused *, html.rrweb-paused *:before, html.rrweb-paused *:after { animation-play-state: paused !important; }');
+        }
+        if (this.usingVirtualDom) {
+            const styleEl = this.virtualDom.createElement('style');
+            this.virtualDom.mirror.add(styleEl, getDefaultSN(styleEl, this.virtualDom.unserializedId));
+            documentElement.insertBefore(styleEl, head);
+            for (let idx = 0; idx < injectStylesRules.length; idx++) {
+                styleEl.rules.push({
+                    cssText: injectStylesRules[idx],
+                    type: StyleRuleType.Insert,
+                    index: idx,
+                });
+            }
+        }
+        else {
+            const styleEl = document.createElement('style');
+            documentElement.insertBefore(styleEl, head);
+            for (let idx = 0; idx < injectStylesRules.length; idx++) {
+                (styleEl.sheet).insertRule(injectStylesRules[idx], idx);
+            }
+        }
+    }
+    attachDocumentToIframe(mutation, iframeEl) {
+        const mirror = this.usingVirtualDom
+            ? this.virtualDom.mirror
+            : this.mirror;
+        const collected = [];
+        buildNodeWithSN(mutation.node, {
+            doc: iframeEl.contentDocument,
+            mirror: mirror,
+            hackCss: true,
+            skipChild: false,
+            afterAppend: (builtNode) => {
+                this.collectIframeAndAttachDocument(collected, builtNode);
+                const sn = mirror.getMeta(builtNode);
+                if ((sn === null || sn === void 0 ? void 0 : sn.type) === NodeType.Element &&
+                    (sn === null || sn === void 0 ? void 0 : sn.tagName.toUpperCase()) === 'HTML') {
+                    const { documentElement, head } = iframeEl.contentDocument;
+                    this.insertStyleRules(documentElement, head);
+                }
+            },
+            cache: this.cache,
+        });
+        for (const { mutationInQueue, builtNode } of collected) {
+            this.attachDocumentToIframe(mutationInQueue, builtNode);
+            this.newDocumentQueue = this.newDocumentQueue.filter((m) => m !== mutationInQueue);
+        }
+    }
+    collectIframeAndAttachDocument(collected, builtNode) {
+        if (isSerializedIframe(builtNode, this.mirror)) {
+            const mutationInQueue = this.newDocumentQueue.find((m) => m.parentId === this.mirror.getId(builtNode));
+            if (mutationInQueue) {
+                collected.push({
+                    mutationInQueue,
+                    builtNode: builtNode,
+                });
+            }
+        }
+    }
+    waitForStylesheetLoad() {
+        var _a;
+        const head = (_a = this.iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.head;
+        if (head) {
+            const unloadSheets = new Set();
+            let timer;
+            let beforeLoadState = this.service.state;
+            const stateHandler = () => {
+                beforeLoadState = this.service.state;
+            };
+            this.emitter.on(ReplayerEvents.Start, stateHandler);
+            this.emitter.on(ReplayerEvents.Pause, stateHandler);
+            const unsubscribe = () => {
+                this.emitter.off(ReplayerEvents.Start, stateHandler);
+                this.emitter.off(ReplayerEvents.Pause, stateHandler);
+            };
+            head
+                .querySelectorAll('link[rel="stylesheet"]')
+                .forEach((css) => {
+                if (!css.sheet) {
+                    unloadSheets.add(css);
+                    css.addEventListener('load', () => {
+                        unloadSheets.delete(css);
+                        if (unloadSheets.size === 0 && timer !== -1) {
+                            if (beforeLoadState.matches('playing')) {
+                                this.play(this.getCurrentTime());
+                            }
+                            this.emitter.emit(ReplayerEvents.LoadStylesheetEnd);
+                            if (timer) {
+                                clearTimeout(timer);
+                            }
+                            unsubscribe();
+                        }
+                    });
+                }
+            });
+            if (unloadSheets.size > 0) {
+                this.service.send({ type: 'PAUSE' });
+                this.emitter.emit(ReplayerEvents.LoadStylesheetStart);
+                timer = setTimeout(() => {
+                    if (beforeLoadState.matches('playing')) {
+                        this.play(this.getCurrentTime());
+                    }
+                    timer = -1;
+                    unsubscribe();
+                }, this.config.loadTimeout);
+            }
+        }
+    }
+    hasImageArg(args) {
+        for (const arg of args) {
+            if (!arg || typeof arg !== 'object') ;
+            else if ('rr_type' in arg && 'args' in arg) {
+                if (this.hasImageArg(arg.args))
+                    return true;
+            }
+            else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
+                return true;
+            }
+            else if (arg instanceof Array) {
+                if (this.hasImageArg(arg))
+                    return true;
+            }
+        }
+        return false;
+    }
+    getImageArgs(args) {
+        const images = [];
+        for (const arg of args) {
+            if (!arg || typeof arg !== 'object') ;
+            else if ('rr_type' in arg && 'args' in arg) {
+                images.push(...this.getImageArgs(arg.args));
+            }
+            else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
+                images.push(arg.src);
+            }
+            else if (arg instanceof Array) {
+                images.push(...this.getImageArgs(arg));
+            }
+        }
+        return images;
+    }
+    preloadAllImages() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.service.state;
+            const stateHandler = () => {
+                this.service.state;
+            };
+            this.emitter.on(ReplayerEvents.Start, stateHandler);
+            this.emitter.on(ReplayerEvents.Pause, stateHandler);
+            const promises = [];
+            for (const event of this.service.state.context.events) {
+                if (event.type === EventType.IncrementalSnapshot &&
+                    event.data.source === IncrementalSource.CanvasMutation) {
+                    promises.push(this.deserializeAndPreloadCanvasEvents(event.data, event));
+                    const commands = 'commands' in event.data ? event.data.commands : [event.data];
+                    commands.forEach((c) => {
+                        this.preloadImages(c, event);
+                    });
+                }
+            }
+            return Promise.all(promises);
+        });
+    }
+    preloadImages(data, event) {
+        if (data.property === 'drawImage' &&
+            typeof data.args[0] === 'string' &&
+            !this.imageMap.has(event)) {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            const imgd = ctx === null || ctx === void 0 ? void 0 : ctx.createImageData(canvas.width, canvas.height);
+            imgd === null || imgd === void 0 ? void 0 : imgd.data;
+            JSON.parse(data.args[0]);
+            ctx === null || ctx === void 0 ? void 0 : ctx.putImageData(imgd, 0, 0);
+        }
+    }
+    deserializeAndPreloadCanvasEvents(data, event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.canvasEventMap.has(event)) {
+                const status = {
+                    isUnchanged: true,
+                };
+                if ('commands' in data) {
+                    const commands = yield Promise.all(data.commands.map((c) => __awaiter(this, void 0, void 0, function* () {
+                        const args = yield Promise.all(c.args.map(deserializeArg(this.imageMap, null, status)));
+                        return Object.assign(Object.assign({}, c), { args });
+                    })));
+                    if (status.isUnchanged === false)
+                        this.canvasEventMap.set(event, Object.assign(Object.assign({}, data), { commands }));
+                }
+                else {
+                    const args = yield Promise.all(data.args.map(deserializeArg(this.imageMap, null, status)));
+                    if (status.isUnchanged === false)
+                        this.canvasEventMap.set(event, Object.assign(Object.assign({}, data), { args }));
+                }
+            }
+        });
+    }
+    applyIncremental(e, isSync) {
+        var _a, _b, _c, _d, _e, _f;
+        const { data: d } = e;
+        switch (d.source) {
+            case IncrementalSource.Mutation: {
+                try {
+                    this.applyMutation(d, isSync);
+                }
+                catch (error) {
+                    this.warn(`Exception in mutation ${error.message || error}`, d);
+                }
+                break;
+            }
+            case IncrementalSource.Drag:
+            case IncrementalSource.TouchMove:
+            case IncrementalSource.MouseMove:
+                if (isSync) {
+                    const lastPosition = d.positions[d.positions.length - 1];
+                    this.mousePos = {
+                        x: lastPosition.x,
+                        y: lastPosition.y,
+                        id: lastPosition.id,
+                        debugData: d,
+                    };
+                }
+                else {
+                    d.positions.forEach((p) => {
+                        const action = {
+                            doAction: () => {
+                                this.moveAndHover(p.x, p.y, p.id, isSync, d);
+                            },
+                            delay: p.timeOffset +
+                                e.timestamp -
+                                this.service.state.context.baselineTime,
+                        };
+                        this.timer.addAction(action);
+                    });
+                    this.timer.addAction({
+                        doAction() { },
+                        delay: e.delay - ((_a = d.positions[0]) === null || _a === void 0 ? void 0 : _a.timeOffset),
+                    });
+                }
+                break;
+            case IncrementalSource.MouseInteraction: {
+                if (d.id === -1 || isSync) {
+                    break;
+                }
+                const event = new Event(MouseInteractions[d.type].toLowerCase());
+                const target = this.mirror.getNode(d.id);
+                if (!target) {
+                    return this.debugNodeNotFound(d, d.id);
+                }
+                this.emitter.emit(ReplayerEvents.MouseInteraction, {
+                    type: d.type,
+                    target,
+                });
+                const { triggerFocus } = this.config;
+                switch (d.type) {
+                    case MouseInteractions.Blur:
+                        if ('blur' in target) {
+                            target.blur();
+                        }
+                        break;
+                    case MouseInteractions.Focus:
+                        if (triggerFocus && target.focus) {
+                            target.focus({
+                                preventScroll: true,
+                            });
+                        }
+                        break;
+                    case MouseInteractions.Click:
+                    case MouseInteractions.TouchStart:
+                    case MouseInteractions.TouchEnd:
+                        if (isSync) {
+                            if (d.type === MouseInteractions.TouchStart) {
+                                this.touchActive = true;
+                            }
+                            else if (d.type === MouseInteractions.TouchEnd) {
+                                this.touchActive = false;
+                            }
+                            this.mousePos = {
+                                x: d.x,
+                                y: d.y,
+                                id: d.id,
+                                debugData: d,
+                            };
+                        }
+                        else {
+                            if (d.type === MouseInteractions.TouchStart) {
+                                this.tailPositions.length = 0;
+                            }
+                            this.moveAndHover(d.x, d.y, d.id, isSync, d);
+                            if (d.type === MouseInteractions.Click) {
+                                this.mouse.classList.remove('active');
+                                void this.mouse.offsetWidth;
+                                this.mouse.classList.add('active');
+                            }
+                            else if (d.type === MouseInteractions.TouchStart) {
+                                void this.mouse.offsetWidth;
+                                this.mouse.classList.add('touch-active');
+                            }
+                            else if (d.type === MouseInteractions.TouchEnd) {
+                                this.mouse.classList.remove('touch-active');
+                            }
+                        }
+                        break;
+                    case MouseInteractions.TouchCancel:
+                        if (isSync) {
+                            this.touchActive = false;
+                        }
+                        else {
+                            this.mouse.classList.remove('touch-active');
+                        }
+                        break;
+                    default:
+                        target.dispatchEvent(event);
+                }
+                break;
+            }
+            case IncrementalSource.Scroll: {
+                if (d.id === -1) {
+                    break;
+                }
+                if (this.usingVirtualDom) {
+                    const target = this.virtualDom.mirror.getNode(d.id);
+                    if (!target) {
+                        return this.debugNodeNotFound(d, d.id);
+                    }
+                    target.scrollData = d;
+                    break;
+                }
+                this.applyScroll(d, isSync);
+                break;
+            }
+            case IncrementalSource.ViewportResize:
+                this.emitter.emit(ReplayerEvents.Resize, {
+                    width: d.width,
+                    height: d.height,
+                });
+                break;
+            case IncrementalSource.Input: {
+                if (d.id === -1) {
+                    break;
+                }
+                if (this.usingVirtualDom) {
+                    const target = this.virtualDom.mirror.getNode(d.id);
+                    if (!target) {
+                        return this.debugNodeNotFound(d, d.id);
+                    }
+                    target.inputData = d;
+                    break;
+                }
+                this.applyInput(d);
+                break;
+            }
+            case IncrementalSource.MediaInteraction: {
+                const target = this.usingVirtualDom
+                    ? this.virtualDom.mirror.getNode(d.id)
+                    : this.mirror.getNode(d.id);
+                if (!target) {
+                    return this.debugNodeNotFound(d, d.id);
+                }
+                const mediaEl = target;
+                try {
+                    if (d.currentTime) {
+                        mediaEl.currentTime = d.currentTime;
+                    }
+                    if (d.volume) {
+                        mediaEl.volume = d.volume;
+                    }
+                    if (d.muted) {
+                        mediaEl.muted = d.muted;
+                    }
+                    if (d.type === 1) {
+                        mediaEl.pause();
+                    }
+                    if (d.type === 0) {
+                        mediaEl.play();
+                    }
+                }
+                catch (error) {
+                    if (this.config.showWarning) {
+                        console.warn(`Failed to replay media interactions: ${error.message || error}`);
+                    }
+                }
+                break;
+            }
+            case IncrementalSource.StyleSheetRule: {
+                if (this.usingVirtualDom) {
+                    const target = this.virtualDom.mirror.getNode(d.id);
+                    if (!target) {
+                        return this.debugNodeNotFound(d, d.id);
+                    }
+                    const rules = target.rules;
+                    (_b = d.adds) === null || _b === void 0 ? void 0 : _b.forEach(({ rule, index: nestedIndex }) => rules === null || rules === void 0 ? void 0 : rules.push({
+                        cssText: rule,
+                        index: nestedIndex,
+                        type: StyleRuleType.Insert,
+                    }));
+                    (_c = d.removes) === null || _c === void 0 ? void 0 : _c.forEach(({ index: nestedIndex }) => rules === null || rules === void 0 ? void 0 : rules.push({ index: nestedIndex, type: StyleRuleType.Remove }));
+                }
+                else {
+                    const target = this.mirror.getNode(d.id);
+                    if (!target) {
+                        return this.debugNodeNotFound(d, d.id);
+                    }
+                    const styleSheet = (target).sheet;
+                    (_d = d.adds) === null || _d === void 0 ? void 0 : _d.forEach(({ rule, index: nestedIndex }) => {
+                        try {
+                            if (Array.isArray(nestedIndex)) {
+                                const { positions, index } = getPositionsAndIndex(nestedIndex);
+                                const nestedRule = getNestedRule(styleSheet.cssRules, positions);
+                                nestedRule.insertRule(rule, index);
+                            }
+                            else {
+                                const index = nestedIndex === undefined
+                                    ? undefined
+                                    : Math.min(nestedIndex, styleSheet.cssRules.length);
+                                styleSheet.insertRule(rule, index);
+                            }
+                        }
+                        catch (e) {
+                        }
+                    });
+                    (_e = d.removes) === null || _e === void 0 ? void 0 : _e.forEach(({ index: nestedIndex }) => {
+                        try {
+                            if (Array.isArray(nestedIndex)) {
+                                const { positions, index } = getPositionsAndIndex(nestedIndex);
+                                const nestedRule = getNestedRule(styleSheet.cssRules, positions);
+                                nestedRule.deleteRule(index || 0);
+                            }
+                            else {
+                                styleSheet === null || styleSheet === void 0 ? void 0 : styleSheet.deleteRule(nestedIndex);
+                            }
+                        }
+                        catch (e) {
+                        }
+                    });
+                }
+                break;
+            }
+            case IncrementalSource.StyleDeclaration: {
+                if (this.usingVirtualDom) {
+                    const target = this.virtualDom.mirror.getNode(d.id);
+                    if (!target) {
+                        return this.debugNodeNotFound(d, d.id);
+                    }
+                    const rules = target.rules;
+                    d.set &&
+                        rules.push(Object.assign({ type: StyleRuleType.SetProperty, index: d.index }, d.set));
+                    d.remove &&
+                        rules.push(Object.assign({ type: StyleRuleType.RemoveProperty, index: d.index }, d.remove));
+                }
+                else {
+                    const target = this.mirror.getNode(d.id);
+                    if (!target) {
+                        return this.debugNodeNotFound(d, d.id);
+                    }
+                    const styleSheet = target.sheet;
+                    if (d.set) {
+                        const rule = getNestedRule(styleSheet.rules, d.index);
+                        rule.style.setProperty(d.set.property, d.set.value, d.set.priority);
+                    }
+                    if (d.remove) {
+                        const rule = getNestedRule(styleSheet.rules, d.index);
+                        rule.style.removeProperty(d.remove.property);
+                    }
+                }
+                break;
+            }
+            case IncrementalSource.CanvasMutation: {
+                if (!this.config.UNSAFE_replayCanvas) {
+                    return;
+                }
+                if (this.usingVirtualDom) {
+                    const target = this.virtualDom.mirror.getNode(d.id);
+                    if (!target) {
+                        return this.debugNodeNotFound(d, d.id);
+                    }
+                    target.canvasMutations.push({
+                        event: e,
+                        mutation: d,
+                    });
+                }
+                else {
+                    const target = this.mirror.getNode(d.id);
+                    if (!target) {
+                        return this.debugNodeNotFound(d, d.id);
+                    }
+                    canvasMutation({
+                        event: e,
+                        mutation: d,
+                        target: target,
+                        imageMap: this.imageMap,
+                        canvasEventMap: this.canvasEventMap,
+                        errorHandler: this.warnCanvasMutationFailed.bind(this),
+                    });
+                }
+                break;
+            }
+            case IncrementalSource.Font: {
+                try {
+                    const fontFace = new FontFace(d.family, d.buffer ? new Uint8Array(JSON.parse(d.fontSource)) : d.fontSource, d.descriptors);
+                    (_f = this.iframe.contentDocument) === null || _f === void 0 ? void 0 : _f.fonts.add(fontFace);
+                }
+                catch (error) {
+                    if (this.config.showWarning) {
+                        console.warn(error);
+                    }
+                }
+                break;
+            }
+        }
+    }
+    applyMutation(d, isSync) {
+        if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
+            this.usingVirtualDom = true;
+            buildFromDom(this.iframe.contentDocument, this.mirror, this.virtualDom);
+            if (Object.keys(this.legacy_missingNodeRetryMap).length) {
+                for (const key in this.legacy_missingNodeRetryMap) {
+                    try {
+                        const value = this.legacy_missingNodeRetryMap[key];
+                        const virtualNode = buildFromNode(value.node, this.virtualDom, this.mirror);
+                        if (virtualNode)
+                            value.node = virtualNode;
+                    }
+                    catch (error) {
+                        if (this.config.showWarning) {
+                            console.warn(error);
+                        }
+                    }
+                }
+            }
+        }
+        const mirror = this.usingVirtualDom ? this.virtualDom.mirror : this.mirror;
+        d.removes.forEach((mutation) => {
+            var _a;
+            const target = mirror.getNode(mutation.id);
+            if (!target) {
+                if (d.removes.find((r) => r.id === mutation.parentId)) {
+                    return;
+                }
+                return this.warnNodeNotFound(d, mutation.id);
+            }
+            let parent = mirror.getNode(mutation.parentId);
+            if (!parent) {
+                return this.warnNodeNotFound(d, mutation.parentId);
+            }
+            if (mutation.isShadow && hasShadowRoot(parent)) {
+                parent = parent.shadowRoot;
+            }
+            mirror.removeNodeFromMap(target);
+            if (parent)
+                try {
+                    parent.removeChild(target);
+                    if (this.usingVirtualDom &&
+                        target.nodeName === '#text' &&
+                        parent.nodeName === 'STYLE' &&
+                        ((_a = parent.rules) === null || _a === void 0 ? void 0 : _a.length) > 0)
+                        parent.rules = [];
+                }
+                catch (error) {
+                    if (error instanceof DOMException) {
+                        this.warn('parent could not remove child in mutation', parent, target, d);
+                    }
+                    else {
+                        throw error;
+                    }
+                }
+        });
+        const legacy_missingNodeMap = Object.assign({}, this.legacy_missingNodeRetryMap);
+        const queue = [];
+        const nextNotInDOM = (mutation) => {
+            let next = null;
+            if (mutation.nextId) {
+                next = mirror.getNode(mutation.nextId);
+            }
+            if (mutation.nextId !== null &&
+                mutation.nextId !== undefined &&
+                mutation.nextId !== -1 &&
+                !next) {
+                return true;
+            }
+            return false;
+        };
+        const appendNode = (mutation) => {
+            var _a;
+            if (!this.iframe.contentDocument) {
+                return console.warn('Looks like your replayer has been destroyed.');
+            }
+            let parent = mirror.getNode(mutation.parentId);
+            if (!parent) {
+                if (mutation.node.type === NodeType.Document) {
+                    return this.newDocumentQueue.push(mutation);
+                }
+                return queue.push(mutation);
+            }
+            if (mutation.node.isShadow) {
+                if (!hasShadowRoot(parent)) {
+                    parent.attachShadow({ mode: 'open' });
+                    parent = parent.shadowRoot;
+                }
+                else
+                    parent = parent.shadowRoot;
+            }
+            let previous = null;
+            let next = null;
+            if (mutation.previousId) {
+                previous = mirror.getNode(mutation.previousId);
+            }
+            if (mutation.nextId) {
+                next = mirror.getNode(mutation.nextId);
+            }
+            if (nextNotInDOM(mutation)) {
+                return queue.push(mutation);
+            }
+            if (mutation.node.rootId && !mirror.getNode(mutation.node.rootId)) {
+                return;
+            }
+            const targetDoc = mutation.node.rootId
+                ? mirror.getNode(mutation.node.rootId)
+                : this.usingVirtualDom
+                    ? this.virtualDom
+                    : this.iframe.contentDocument;
+            if (isSerializedIframe(parent, mirror)) {
+                this.attachDocumentToIframe(mutation, parent);
+                return;
+            }
+            const target = buildNodeWithSN(mutation.node, {
+                doc: targetDoc,
+                mirror: mirror,
+                skipChild: true,
+                hackCss: true,
+                cache: this.cache,
+            });
+            if (mutation.previousId === -1 || mutation.nextId === -1) {
+                legacy_missingNodeMap[mutation.node.id] = {
+                    node: target,
+                    mutation,
+                };
+                return;
+            }
+            const parentSn = mirror.getMeta(parent);
+            if (parentSn &&
+                parentSn.type === NodeType.Element &&
+                parentSn.tagName === 'textarea' &&
+                mutation.node.type === NodeType.Text) {
+                const childNodeArray = Array.isArray(parent.childNodes)
+                    ? parent.childNodes
+                    : Array.from(parent.childNodes);
+                for (const c of childNodeArray) {
+                    if (c.nodeType === parent.TEXT_NODE) {
+                        parent.removeChild(c);
+                    }
+                }
+            }
+            if (previous && previous.nextSibling && previous.nextSibling.parentNode) {
+                parent.insertBefore(target, previous.nextSibling);
+            }
+            else if (next && next.parentNode) {
+                parent.contains(next)
+                    ? parent.insertBefore(target, next)
+                    : parent.insertBefore(target, null);
+            }
+            else {
+                if (parent === targetDoc) {
+                    while (targetDoc.firstChild) {
+                        targetDoc.removeChild(targetDoc.firstChild);
+                    }
+                }
+                parent.appendChild(target);
+            }
+            if (this.usingVirtualDom &&
+                target.nodeName === '#text' &&
+                parent.nodeName === 'STYLE' &&
+                ((_a = parent.rules) === null || _a === void 0 ? void 0 : _a.length) > 0)
+                parent.rules = [];
+            if (isSerializedIframe(target, this.mirror)) {
+                const targetId = this.mirror.getId(target);
+                const mutationInQueue = this.newDocumentQueue.find((m) => m.parentId === targetId);
+                if (mutationInQueue) {
+                    this.attachDocumentToIframe(mutationInQueue, target);
+                    this.newDocumentQueue = this.newDocumentQueue.filter((m) => m !== mutationInQueue);
+                }
+            }
+            if (mutation.previousId || mutation.nextId) {
+                this.legacy_resolveMissingNode(legacy_missingNodeMap, parent, target, mutation);
+            }
+        };
+        d.adds.forEach((mutation) => {
+            appendNode(mutation);
+        });
+        const startTime = Date.now();
+        while (queue.length) {
+            const resolveTrees = queueToResolveTrees(queue);
+            queue.length = 0;
+            if (Date.now() - startTime > 500) {
+                this.warn('Timeout in the loop, please check the resolve tree data:', resolveTrees);
+                break;
+            }
+            for (const tree of resolveTrees) {
+                const parent = mirror.getNode(tree.value.parentId);
+                if (!parent) {
+                    this.debug('Drop resolve tree since there is no parent for the root node.', tree);
+                }
+                else {
+                    iterateResolveTree(tree, (mutation) => {
+                        appendNode(mutation);
+                    });
+                }
+            }
+        }
+        if (Object.keys(legacy_missingNodeMap).length) {
+            Object.assign(this.legacy_missingNodeRetryMap, legacy_missingNodeMap);
+        }
+        uniqueTextMutations(d.texts).forEach((mutation) => {
+            var _a;
+            const target = mirror.getNode(mutation.id);
+            if (!target) {
+                if (d.removes.find((r) => r.id === mutation.id)) {
+                    return;
+                }
+                return this.warnNodeNotFound(d, mutation.id);
+            }
+            target.textContent = mutation.value;
+            if (this.usingVirtualDom) {
+                const parent = target.parentNode;
+                if (((_a = parent === null || parent === void 0 ? void 0 : parent.rules) === null || _a === void 0 ? void 0 : _a.length) > 0)
+                    parent.rules = [];
+            }
+        });
+        d.attributes.forEach((mutation) => {
+            const target = mirror.getNode(mutation.id);
+            if (!target) {
+                if (d.removes.find((r) => r.id === mutation.id)) {
+                    return;
+                }
+                return this.warnNodeNotFound(d, mutation.id);
+            }
+            for (const attributeName in mutation.attributes) {
+                if (typeof attributeName === 'string') {
+                    const value = mutation.attributes[attributeName];
+                    if (value === null) {
+                        target.removeAttribute(attributeName);
+                    }
+                    else if (typeof value === 'string') {
+                        try {
+                            target.setAttribute(attributeName, value);
+                        }
+                        catch (error) {
+                            if (this.config.showWarning) {
+                                console.warn('An error occurred may due to the checkout feature.', error);
+                            }
+                        }
+                    }
+                    else if (attributeName === 'style') {
+                        const styleValues = value;
+                        const targetEl = target;
+                        for (const s in styleValues) {
+                            if (styleValues[s] === false) {
+                                targetEl.style.removeProperty(s);
+                            }
+                            else if (styleValues[s] instanceof Array) {
+                                const svp = styleValues[s];
+                                targetEl.style.setProperty(s, svp[0], svp[1]);
+                            }
+                            else {
+                                const svs = styleValues[s];
+                                targetEl.style.setProperty(s, svs);
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+    applyScroll(d, isSync) {
+        const target = this.mirror.getNode(d.id);
+        if (!target) {
+            return this.debugNodeNotFound(d, d.id);
+        }
+        const sn = this.mirror.getMeta(target);
+        if (target === this.iframe.contentDocument) {
+            this.iframe.contentWindow.scrollTo({
+                top: d.y,
+                left: d.x,
+                behavior: isSync ? 'auto' : 'smooth',
+            });
+        }
+        else if ((sn === null || sn === void 0 ? void 0 : sn.type) === NodeType.Document) {
+            target.defaultView.scrollTo({
+                top: d.y,
+                left: d.x,
+                behavior: isSync ? 'auto' : 'smooth',
+            });
+        }
+        else {
+            try {
+                target.scrollTop = d.y;
+                target.scrollLeft = d.x;
+            }
+            catch (error) {
+            }
+        }
+    }
+    applyInput(d) {
+        const target = this.mirror.getNode(d.id);
+        if (!target) {
+            return this.debugNodeNotFound(d, d.id);
+        }
+        try {
+            target.checked = d.isChecked;
+            target.value = d.text;
+        }
+        catch (error) {
+        }
+    }
+    legacy_resolveMissingNode(map, parent, target, targetMutation) {
+        const { previousId, nextId } = targetMutation;
+        const previousInMap = previousId && map[previousId];
+        const nextInMap = nextId && map[nextId];
+        if (previousInMap) {
+            const { node, mutation } = previousInMap;
+            parent.insertBefore(node, target);
+            delete map[mutation.node.id];
+            delete this.legacy_missingNodeRetryMap[mutation.node.id];
+            if (mutation.previousId || mutation.nextId) {
+                this.legacy_resolveMissingNode(map, parent, node, mutation);
+            }
+        }
+        if (nextInMap) {
+            const { node, mutation } = nextInMap;
+            parent.insertBefore(node, target.nextSibling);
+            delete map[mutation.node.id];
+            delete this.legacy_missingNodeRetryMap[mutation.node.id];
+            if (mutation.previousId || mutation.nextId) {
+                this.legacy_resolveMissingNode(map, parent, node, mutation);
+            }
+        }
+    }
+    moveAndHover(x, y, id, isSync, debugData) {
+        const target = this.mirror.getNode(id);
+        if (!target) {
+            return this.debugNodeNotFound(debugData, id);
+        }
+        const base = getBaseDimension(target, this.iframe);
+        const _x = x * base.absoluteScale + base.x;
+        const _y = y * base.absoluteScale + base.y;
+        this.mouse.style.left = `${_x}px`;
+        this.mouse.style.top = `${_y}px`;
+        if (!isSync) {
+            this.drawMouseTail({ x: _x, y: _y });
+        }
+        this.hoverElements(target);
+    }
+    drawMouseTail(position) {
+        if (!this.mouseTail) {
+            return;
+        }
+        const { lineCap, lineWidth, strokeStyle, duration } = this.config.mouseTail === true
+            ? defaultMouseTailConfig
+            : Object.assign({}, defaultMouseTailConfig, this.config.mouseTail);
+        const draw = () => {
+            if (!this.mouseTail) {
+                return;
+            }
+            const ctx = this.mouseTail.getContext('2d');
+            if (!ctx || !this.tailPositions.length) {
+                return;
+            }
+            ctx.clearRect(0, 0, this.mouseTail.width, this.mouseTail.height);
+            ctx.beginPath();
+            ctx.lineWidth = lineWidth;
+            ctx.lineCap = lineCap;
+            ctx.strokeStyle = strokeStyle;
+            ctx.moveTo(this.tailPositions[0].x, this.tailPositions[0].y);
+            this.tailPositions.forEach((p) => ctx.lineTo(p.x, p.y));
+            ctx.stroke();
+        };
+        this.tailPositions.push(position);
+        draw();
+        setTimeout(() => {
+            this.tailPositions = this.tailPositions.filter((p) => p !== position);
+            draw();
+        }, duration / this.speedService.state.context.timer.speed);
+    }
+    hoverElements(el) {
+        var _a;
+        (_a = this.iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.\\:hover').forEach((hoveredEl) => {
+            hoveredEl.classList.remove(':hover');
+        });
+        let currentEl = el;
+        while (currentEl) {
+            if (currentEl.classList) {
+                currentEl.classList.add(':hover');
+            }
+            currentEl = currentEl.parentElement;
+        }
+    }
+    isUserInteraction(event) {
+        if (event.type !== EventType.IncrementalSnapshot) {
+            return false;
+        }
+        return (event.data.source > IncrementalSource.Mutation &&
+            event.data.source <= IncrementalSource.Input);
+    }
+    backToNormal() {
+        this.nextUserInteractionEvent = null;
+        if (this.speedService.state.matches('normal')) {
+            return;
+        }
+        this.speedService.send({ type: 'BACK_TO_NORMAL' });
+        this.emitter.emit(ReplayerEvents.SkipEnd, {
+            speed: this.speedService.state.context.normalSpeed,
+        });
+    }
+    warnNodeNotFound(d, id) {
+        this.warn(`Node with id '${id}' not found. `, d);
+    }
+    warnCanvasMutationFailed(d, error) {
+        this.warn(`Has error on canvas update`, error, 'canvas mutation:', d);
+    }
+    debugNodeNotFound(d, id) {
+        this.debug(REPLAY_CONSOLE_PREFIX, `Node with id '${id}' not found. `, d);
+    }
+    warn(...args) {
+        if (!this.config.showWarning) {
+            return;
+        }
+        console.warn(REPLAY_CONSOLE_PREFIX, ...args);
+    }
+    debug(...args) {
+        if (!this.config.showDebug) {
+            return;
+        }
+        console.log(REPLAY_CONSOLE_PREFIX, ...args);
+    }
 }
-var Replayer = (function () {
-    function Replayer(events, config) {
-        var _this = this;
-        this.mouseTail = null;
-        this.tailPositions = [];
-        this.emitter = mitt();
-        this.activityIntervals = [];
-        this.legacy_missingNodeRetryMap = {};
-        this.cache = createCache();
-        this.imageMap = new Map();
-        this.mirror = createMirror();
-        this.firstFullSnapshot = null;
-        this.newDocumentQueue = [];
-        this.mousePos = null;
-        this.touchActive = null;
-        if (!(config === null || config === void 0 ? void 0 : config.liveMode) && events.length < 2) {
-            throw new Error('Replayer need at least 2 events.');
-        }
-        var defaultConfig = {
-            speed: 1,
-            maxSpeed: 360,
-            root: document.body,
-            loadTimeout: 0,
-            skipInactive: false,
-            showWarning: true,
-            showDebug: false,
-            blockClass: 'highlight-block',
-            liveMode: false,
-            insertStyleRules: [],
-            triggerFocus: true,
-            UNSAFE_replayCanvas: false,
-            pauseAnimation: true,
-            mouseTail: defaultMouseTailConfig,
-            inactiveThreshold: 0.02,
-            inactiveSkipTime: SKIP_TIME_INTERVAL,
-        };
-        this.config = Object.assign({}, defaultConfig, config);
-        this.handleResize = this.handleResize.bind(this);
-        this.getCastFn = this.getCastFn.bind(this);
-        this.applyEventsSynchronously = this.applyEventsSynchronously.bind(this);
-        this.emitter.on(ReplayerEvents.Resize, this.handleResize);
-        this.setupDom();
-        this.treeIndex = new TreeIndex();
-        this.fragmentParentMap = new Map();
-        this.elementStateMap = new Map();
-        this.virtualStyleRulesMap = new Map();
-        this.emitter.on(ReplayerEvents.Flush, function () {
-            var e_1, _a, e_2, _b, e_3, _c, e_4, _d;
-            var _e = _this.treeIndex.flush(), scrollMap = _e.scrollMap, inputMap = _e.inputMap, mutationData = _e.mutationData;
-            _this.fragmentParentMap.forEach(function (parent, frag) {
-                return _this.restoreRealParent(frag, parent);
-            });
-            try {
-                for (var _f = __values(mutationData.texts), _g = _f.next(); !_g.done; _g = _f.next()) {
-                    var d = _g.value;
-                    _this.applyText(d, mutationData);
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            try {
-                for (var _h = __values(_this.virtualStyleRulesMap.keys()), _j = _h.next(); !_j.done; _j = _h.next()) {
-                    var node = _j.value;
-                    _this.restoreNodeSheet(node);
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-            _this.fragmentParentMap.clear();
-            _this.elementStateMap.clear();
-            _this.virtualStyleRulesMap.clear();
-            try {
-                for (var _k = __values(scrollMap.values()), _l = _k.next(); !_l.done; _l = _k.next()) {
-                    var d = _l.value;
-                    _this.applyScroll(d, true);
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-            try {
-                for (var _m = __values(inputMap.values()), _o = _m.next(); !_o.done; _o = _m.next()) {
-                    var d = _o.value;
-                    _this.applyInput(d);
-                }
-            }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
-            finally {
-                try {
-                    if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
-                }
-                finally { if (e_4) throw e_4.error; }
-            }
-        });
-        this.emitter.on(ReplayerEvents.PlayBack, function () {
-            _this.firstFullSnapshot = null;
-            _this.mirror.reset();
-        });
-        var timer = new Timer([], (config === null || config === void 0 ? void 0 : config.speed) || defaultConfig.speed);
-        this.service = createPlayerService({
-            events: events
-                .map(function (e) {
-                if (config && config.unpackFn) {
-                    return config.unpackFn(e);
-                }
-                return e;
-            })
-                .sort(function (a1, a2) { return a1.timestamp - a2.timestamp; }),
-            timer: timer,
-            timeOffset: 0,
-            baselineTime: 0,
-            lastPlayedEvent: null,
-        }, {
-            getCastFn: this.getCastFn,
-            applyEventsSynchronously: this.applyEventsSynchronously,
-            emitter: this.emitter,
-        });
-        this.service.start();
-        this.service.subscribe(function (state) {
-            _this.emitter.emit(ReplayerEvents.StateChange, {
-                player: state,
-            });
-        });
-        this.speedService = createSpeedService({
-            normalSpeed: -1,
-            timer: timer,
-        });
-        this.speedService.start();
-        this.speedService.subscribe(function (state) {
-            _this.emitter.emit(ReplayerEvents.StateChange, {
-                speed: state,
-            });
-        });
-        var firstMeta = this.service.state.context.events.find(function (e) { return e.type === EventType.Meta; });
-        var firstFullsnapshot = this.service.state.context.events.find(function (e) { return e.type === EventType.FullSnapshot; });
-        if (firstMeta) {
-            var _a = firstMeta.data, width_1 = _a.width, height_1 = _a.height;
-            setTimeout(function () {
-                _this.emitter.emit(ReplayerEvents.Resize, {
-                    width: width_1,
-                    height: height_1,
-                });
-            }, 0);
-        }
-        if (firstFullsnapshot) {
-            setTimeout(function () {
-                if (_this.firstFullSnapshot) {
-                    return;
-                }
-                _this.firstFullSnapshot = firstFullsnapshot;
-                _this.rebuildFullSnapshot(firstFullsnapshot);
-                _this.iframe.contentWindow.scrollTo(firstFullsnapshot.data.initialOffset);
-            }, 1);
-        }
-        if (this.service.state.context.events.find(indicatesTouchDevice)) {
-            this.mouse.classList.add('touch-device');
-        }
-    }
-    Object.defineProperty(Replayer.prototype, "timer", {
-        get: function () {
-            return this.service.state.context.timer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Replayer.prototype.on = function (event, handler) {
-        this.emitter.on(event, handler);
-        return this;
-    };
-    Replayer.prototype.off = function (event, handler) {
-        this.emitter.off(event, handler);
-        return this;
-    };
-    Replayer.prototype.setConfig = function (config) {
-        var _this = this;
-        Object.keys(config).forEach(function (key) {
-            _this.config[key] = config[key];
-        });
-        if (!this.config.skipInactive) {
-            this.backToNormal();
-        }
-        if (typeof config.speed !== 'undefined') {
-            this.speedService.send({
-                type: 'SET_SPEED',
-                payload: {
-                    speed: config.speed,
-                },
-            });
-        }
-        if (typeof config.mouseTail !== 'undefined') {
-            if (config.mouseTail === false) {
-                if (this.mouseTail) {
-                    this.mouseTail.style.display = 'none';
-                }
-            }
-            else {
-                if (!this.mouseTail) {
-                    this.mouseTail = document.createElement('canvas');
-                    this.mouseTail.width = Number.parseFloat(this.iframe.width);
-                    this.mouseTail.height = Number.parseFloat(this.iframe.height);
-                    this.mouseTail.classList.add('replayer-mouse-tail');
-                    this.wrapper.insertBefore(this.mouseTail, this.iframe);
-                }
-                this.mouseTail.style.display = 'inherit';
-            }
-        }
-    };
-    Replayer.prototype.getActivityIntervals = function () {
-        var _this = this;
-        if (this.activityIntervals.length == 0) {
-            var allIntervals = [];
-            var metadata = this.getMetaData();
-            var userInteractionEvents = __spreadArray(__spreadArray([
-                { timestamp: metadata.startTime }
-            ], __read(this.service.state.context.events.filter(function (ev) {
-                return _this.isUserInteraction(ev);
-            })), false), [
-                { timestamp: metadata.endTime },
-            ], false);
-            for (var i = 1; i < userInteractionEvents.length; i++) {
-                var currentInterval_1 = userInteractionEvents[i - 1];
-                var _event = userInteractionEvents[i];
-                if (_event.timestamp - currentInterval_1.timestamp >
-                    SKIP_TIME_THRESHOLD) {
-                    allIntervals.push({
-                        startTime: currentInterval_1.timestamp,
-                        endTime: _event.timestamp,
-                        duration: _event.timestamp - currentInterval_1.timestamp,
-                        active: false,
-                    });
-                }
-                else {
-                    allIntervals.push({
-                        startTime: currentInterval_1.timestamp,
-                        endTime: _event.timestamp,
-                        duration: _event.timestamp - currentInterval_1.timestamp,
-                        active: true,
-                    });
-                }
-            }
-            var mergedIntervals = [];
-            var currentInterval = allIntervals[0];
-            for (var i = 1; i < allIntervals.length; i++) {
-                if (allIntervals[i].active != allIntervals[i - 1].active) {
-                    mergedIntervals.push({
-                        startTime: currentInterval.startTime,
-                        endTime: allIntervals[i - 1].endTime,
-                        duration: allIntervals[i - 1].endTime - currentInterval.startTime,
-                        active: allIntervals[i - 1].active,
-                    });
-                    currentInterval = allIntervals[i];
-                }
-            }
-            if (currentInterval && allIntervals.length > 0) {
-                mergedIntervals.push({
-                    startTime: currentInterval.startTime,
-                    endTime: allIntervals[allIntervals.length - 1].endTime,
-                    duration: allIntervals[allIntervals.length - 1].endTime -
-                        currentInterval.startTime,
-                    active: allIntervals[allIntervals.length - 1].active,
-                });
-            }
-            currentInterval = mergedIntervals[0];
-            for (var i = 1; i < mergedIntervals.length; i++) {
-                if ((!mergedIntervals[i].active &&
-                    mergedIntervals[i].duration >
-                        this.config.inactiveThreshold * metadata.totalTime) ||
-                    (!mergedIntervals[i - 1].active &&
-                        mergedIntervals[i - 1].duration >
-                            this.config.inactiveThreshold * metadata.totalTime)) {
-                    this.activityIntervals.push({
-                        startTime: currentInterval.startTime,
-                        endTime: mergedIntervals[i - 1].endTime,
-                        duration: mergedIntervals[i - 1].endTime - currentInterval.startTime,
-                        active: mergedIntervals[i - 1].active,
-                    });
-                    currentInterval = mergedIntervals[i];
-                }
-            }
-            if (currentInterval && mergedIntervals.length > 0) {
-                this.activityIntervals.push({
-                    startTime: currentInterval.startTime,
-                    endTime: mergedIntervals[mergedIntervals.length - 1].endTime,
-                    duration: mergedIntervals[mergedIntervals.length - 1].endTime -
-                        currentInterval.startTime,
-                    active: mergedIntervals[mergedIntervals.length - 1].active,
-                });
-            }
-        }
-        return this.activityIntervals;
-    };
-    Replayer.prototype.getMetaData = function () {
-        var firstEvent = this.service.state.context.events[0];
-        var lastEvent = this.service.state.context.events[this.service.state.context.events.length - 1];
-        return {
-            startTime: firstEvent.timestamp,
-            endTime: lastEvent.timestamp,
-            totalTime: lastEvent.timestamp - firstEvent.timestamp,
-        };
-    };
-    Replayer.prototype.getCurrentTime = function () {
-        return this.timer.timeOffset + this.getTimeOffset();
-    };
-    Replayer.prototype.getTimeOffset = function () {
-        var _a = this.service.state.context, baselineTime = _a.baselineTime, events = _a.events;
-        return baselineTime - events[0].timestamp;
-    };
-    Replayer.prototype.getMirror = function () {
-        return this.mirror;
-    };
-    Replayer.prototype.play = function (timeOffset) {
-        var _a;
-        if (timeOffset === void 0) { timeOffset = 0; }
-        if (this.service.state.matches('paused')) {
-            this.service.send({ type: 'PLAY', payload: { timeOffset: timeOffset } });
-        }
-        else {
-            this.service.send({ type: 'PAUSE' });
-            this.service.send({ type: 'PLAY', payload: { timeOffset: timeOffset } });
-        }
-        (_a = this.iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('html')[0].classList.remove('rrweb-paused');
-        this.emitter.emit(ReplayerEvents.Start);
-        this.handleInactivity(this.getMetaData().startTime + timeOffset, true);
-    };
-    Replayer.prototype.pause = function (timeOffset) {
-        var _a;
-        if (timeOffset === undefined && this.service.state.matches('playing')) {
-            this.service.send({ type: 'PAUSE' });
-        }
-        if (typeof timeOffset === 'number') {
-            this.play(timeOffset);
-            this.service.send({ type: 'PAUSE' });
-        }
-        (_a = this.iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('html')[0].classList.add('rrweb-paused');
-        this.emitter.emit(ReplayerEvents.Pause);
-    };
-    Replayer.prototype.resume = function (timeOffset) {
-        if (timeOffset === void 0) { timeOffset = 0; }
-        console.warn("The 'resume' will be departed in 1.0. Please use 'play' method which has the same interface.");
-        this.play(timeOffset);
-        this.emitter.emit(ReplayerEvents.Resume);
-    };
-    Replayer.prototype.startLive = function (baselineTime) {
-        this.service.send({ type: 'TO_LIVE', payload: { baselineTime: baselineTime } });
-    };
-    Replayer.prototype.addEvent = function (rawEvent) {
-        var _this = this;
-        var event = this.config.unpackFn
-            ? this.config.unpackFn(rawEvent)
-            : rawEvent;
-        if (indicatesTouchDevice(event)) {
-            this.mouse.classList.add('touch-device');
-        }
-        Promise.resolve().then(function () {
-            return _this.service.send({ type: 'ADD_EVENT', payload: { event: event } });
-        });
-    };
-    Replayer.prototype.replaceEvents = function (events) {
-        var e_5, _a;
-        try {
-            for (var events_1 = __values(events), events_1_1 = events_1.next(); !events_1_1.done; events_1_1 = events_1.next()) {
-                var event_1 = events_1_1.value;
-                if (indicatesTouchDevice(event_1)) {
-                    this.mouse.classList.add('touch-device');
-                    break;
-                }
-            }
-        }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
-        finally {
-            try {
-                if (events_1_1 && !events_1_1.done && (_a = events_1.return)) _a.call(events_1);
-            }
-            finally { if (e_5) throw e_5.error; }
-        }
-        this.service.send({ type: 'REPLACE_EVENTS', payload: { events: events } });
-    };
-    Replayer.prototype.enableInteract = function () {
-        this.iframe.setAttribute('scrolling', 'auto');
-        this.iframe.style.pointerEvents = 'auto';
-    };
-    Replayer.prototype.disableInteract = function () {
-        this.iframe.setAttribute('scrolling', 'no');
-        this.iframe.style.pointerEvents = 'none';
-    };
-    Replayer.prototype.resetCache = function () {
-        this.cache = createCache();
-    };
-    Replayer.prototype.setupDom = function () {
-        this.wrapper = document.createElement('div');
-        this.wrapper.classList.add('replayer-wrapper');
-        this.config.root.appendChild(this.wrapper);
-        this.mouse = document.createElement('div');
-        this.mouse.classList.add('replayer-mouse');
-        this.wrapper.appendChild(this.mouse);
-        if (this.config.mouseTail !== false) {
-            this.mouseTail = document.createElement('canvas');
-            this.mouseTail.classList.add('replayer-mouse-tail');
-            this.mouseTail.style.display = 'inherit';
-            this.wrapper.appendChild(this.mouseTail);
-        }
-        this.iframe = document.createElement('iframe');
-        var attributes = ['allow-same-origin'];
-        if (this.config.UNSAFE_replayCanvas) {
-            attributes.push('allow-scripts');
-        }
-        this.iframe.style.display = 'none';
-        this.iframe.setAttribute('sandbox', attributes.join(' '));
-        this.disableInteract();
-        this.wrapper.appendChild(this.iframe);
-        if (this.iframe.contentWindow && this.iframe.contentDocument) {
-            polyfill(this.iframe.contentWindow, this.iframe.contentDocument);
-            polyfill$1(this.iframe.contentWindow);
-        }
-    };
-    Replayer.prototype.handleResize = function (dimension) {
-        var e_6, _a;
-        this.iframe.style.display = 'inherit';
-        try {
-            for (var _b = __values([this.mouseTail, this.iframe]), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var el = _c.value;
-                if (!el) {
-                    continue;
-                }
-                el.setAttribute('width', String(dimension.width));
-                el.setAttribute('height', String(dimension.height));
-            }
-        }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_6) throw e_6.error; }
-        }
-    };
-    Replayer.prototype.applyEventsSynchronously = function (events) {
-        var e_7, _a;
-        try {
-            for (var events_2 = __values(events), events_2_1 = events_2.next(); !events_2_1.done; events_2_1 = events_2.next()) {
-                var event_2 = events_2_1.value;
-                switch (event_2.type) {
-                    case EventType.DomContentLoaded:
-                    case EventType.Load:
-                    case EventType.Custom:
-                        continue;
-                    case EventType.FullSnapshot:
-                    case EventType.Meta:
-                    case EventType.Plugin:
-                        break;
-                    case EventType.IncrementalSnapshot:
-                        switch (event_2.data.source) {
-                            case IncrementalSource.MediaInteraction:
-                                continue;
-                            default:
-                                break;
-                        }
-                        break;
-                    default:
-                        break;
-                }
-                var castFn = this.getCastFn(event_2, true);
-                castFn();
-            }
-        }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
-        finally {
-            try {
-                if (events_2_1 && !events_2_1.done && (_a = events_2.return)) _a.call(events_2);
-            }
-            finally { if (e_7) throw e_7.error; }
-        }
-        if (this.mousePos) {
-            this.moveAndHover(this.mousePos.x, this.mousePos.y, this.mousePos.id, true, this.mousePos.debugData);
-        }
-        this.mousePos = null;
-        if (this.touchActive === true) {
-            this.mouse.classList.add('touch-active');
-        }
-        else if (this.touchActive === false) {
-            this.mouse.classList.remove('touch-active');
-        }
-        this.touchActive = null;
-    };
-    Replayer.prototype.getCastFn = function (event, isSync) {
-        var _this = this;
-        if (isSync === void 0) { isSync = false; }
-        var castFn;
-        switch (event.type) {
-            case EventType.DomContentLoaded:
-            case EventType.Load:
-                break;
-            case EventType.Custom:
-                castFn = function () {
-                    _this.emitter.emit(ReplayerEvents.CustomEvent, event);
-                };
-                break;
-            case EventType.Meta:
-                castFn = function () {
-                    return _this.emitter.emit(ReplayerEvents.Resize, {
-                        width: event.data.width,
-                        height: event.data.height,
-                    });
-                };
-                break;
-            case EventType.FullSnapshot:
-                castFn = function () {
-                    if (_this.firstFullSnapshot) {
-                        if (_this.firstFullSnapshot === event) {
-                            _this.firstFullSnapshot = true;
-                            return;
-                        }
-                    }
-                    else {
-                        _this.firstFullSnapshot = true;
-                    }
-                    _this.rebuildFullSnapshot(event, isSync);
-                    _this.iframe.contentWindow.scrollTo(event.data.initialOffset);
-                };
-                break;
-            case EventType.IncrementalSnapshot:
-                castFn = function () {
-                    var e_8, _a;
-                    _this.applyIncremental(event, isSync);
-                    if (isSync) {
-                        return;
-                    }
-                    _this.handleInactivity(event.timestamp);
-                    if (event === _this.nextUserInteractionEvent) {
-                        _this.nextUserInteractionEvent = null;
-                        _this.backToNormal();
-                    }
-                    if (_this.config.skipInactive && !_this.nextUserInteractionEvent) {
-                        try {
-                            for (var _b = __values(_this.service.state.context.events), _c = _b.next(); !_c.done; _c = _b.next()) {
-                                var _event = _c.value;
-                                if (_event.timestamp <= event.timestamp) {
-                                    continue;
-                                }
-                                if (_this.isUserInteraction(_event)) {
-                                    if (_event.delay - event.delay >
-                                        SKIP_TIME_THRESHOLD *
-                                            _this.speedService.state.context.timer.speed) {
-                                        _this.nextUserInteractionEvent = _event;
-                                    }
-                                    break;
-                                }
-                            }
-                        }
-                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
-                        finally {
-                            try {
-                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                            }
-                            finally { if (e_8) throw e_8.error; }
-                        }
-                        if (_this.nextUserInteractionEvent) {
-                            var skipTime = _this.nextUserInteractionEvent.delay - event.delay;
-                            var payload = {
-                                speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), _this.config.maxSpeed),
-                            };
-                            _this.speedService.send({ type: 'FAST_FORWARD', payload: payload });
-                            _this.emitter.emit(ReplayerEvents.SkipStart, payload);
-                        }
-                    }
-                };
-                break;
-        }
-        var wrappedCastFn = function () {
-            var e_9, _a;
-            if (castFn) {
-                castFn();
-            }
-            try {
-                for (var _b = __values(_this.config.plugins || []), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var plugin = _c.value;
-                    plugin.handler(event, isSync, { replayer: _this });
-                }
-            }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_9) throw e_9.error; }
-            }
-            _this.service.send({ type: 'CAST_EVENT', payload: { event: event } });
-            var last_index = _this.service.state.context.events.length - 1;
-            if (event === _this.service.state.context.events[last_index]) {
-                var finish_1 = function () {
-                    if (last_index < _this.service.state.context.events.length - 1) {
-                        return;
-                    }
-                    _this.backToNormal();
-                    _this.service.send('END');
-                    _this.emitter.emit(ReplayerEvents.Finish);
-                };
-                if (event.type === EventType.IncrementalSnapshot &&
-                    event.data.source === IncrementalSource.MouseMove &&
-                    event.data.positions.length) {
-                    setTimeout(function () {
-                        finish_1();
-                    }, Math.max(0, -event.data.positions[0].timeOffset + 50));
-                }
-                else {
-                    finish_1();
-                }
-            }
-            _this.emitter.emit(ReplayerEvents.EventCast, event);
-        };
-        return wrappedCastFn;
-    };
-    Replayer.prototype.handleInactivity = function (timestamp, resetNext) {
-        var e_10, _a;
-        if (timestamp === this.inactiveEndTimestamp || resetNext) {
-            this.inactiveEndTimestamp = null;
-            this.backToNormal();
-        }
-        if (this.config.skipInactive && !this.inactiveEndTimestamp) {
-            try {
-                for (var _b = __values(this.getActivityIntervals()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var interval = _c.value;
-                    if (timestamp >= interval.startTime &&
-                        timestamp < interval.endTime &&
-                        !interval.active) {
-                        this.inactiveEndTimestamp = interval.endTime;
-                        break;
-                    }
-                }
-            }
-            catch (e_10_1) { e_10 = { error: e_10_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_10) throw e_10.error; }
-            }
-            if (this.inactiveEndTimestamp) {
-                var skipTime = this.inactiveEndTimestamp - timestamp;
-                var payload = {
-                    speed: (skipTime / SKIP_DURATION_LIMIT) * this.config.inactiveSkipTime <
-                        SKIP_TIME_MIN
-                        ? skipTime / SKIP_TIME_MIN
-                        : Math.round(Math.max(skipTime, SKIP_DURATION_LIMIT) /
-                            this.config.inactiveSkipTime),
-                };
-                this.speedService.send({ type: 'FAST_FORWARD', payload: payload });
-                this.emitter.emit(ReplayerEvents.SkipStart, payload);
-            }
-        }
-    };
-    Replayer.prototype.rebuildFullSnapshot = function (event, isSync) {
-        var e_11, _a;
-        var _this = this;
-        if (isSync === void 0) { isSync = false; }
-        if (!this.iframe.contentDocument) {
-            return console.warn('Looks like your replayer has been destroyed.');
-        }
-        if (Object.keys(this.legacy_missingNodeRetryMap).length) {
-            console.warn('Found unresolved missing node map', this.legacy_missingNodeRetryMap);
-        }
-        this.legacy_missingNodeRetryMap = {};
-        var collected = [];
-        this.mirror.map = rebuild(event.data.node, {
-            doc: this.iframe.contentDocument,
-            afterAppend: function (builtNode) {
-                _this.collectIframeAndAttachDocument(collected, builtNode);
-            },
-            cache: this.cache,
-        })[1];
-        var _loop_1 = function (mutationInQueue, builtNode) {
-            this_1.attachDocumentToIframe(mutationInQueue, builtNode);
-            this_1.newDocumentQueue = this_1.newDocumentQueue.filter(function (m) { return m !== mutationInQueue; });
-        };
-        var this_1 = this;
-        try {
-            for (var collected_1 = __values(collected), collected_1_1 = collected_1.next(); !collected_1_1.done; collected_1_1 = collected_1.next()) {
-                var _b = collected_1_1.value, mutationInQueue = _b.mutationInQueue, builtNode = _b.builtNode;
-                _loop_1(mutationInQueue, builtNode);
-            }
-        }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
-        finally {
-            try {
-                if (collected_1_1 && !collected_1_1.done && (_a = collected_1.return)) _a.call(collected_1);
-            }
-            finally { if (e_11) throw e_11.error; }
-        }
-        var _c = this.iframe.contentDocument, documentElement = _c.documentElement, head = _c.head;
-        this.insertStyleRules(documentElement, head);
-        if (!this.service.state.matches('playing')) {
-            this.iframe.contentDocument
-                .getElementsByTagName('html')[0]
-                .classList.add('rrweb-paused');
-        }
-        this.emitter.emit(ReplayerEvents.FullsnapshotRebuilded, event);
-        if (!isSync) {
-            this.waitForStylesheetLoad();
-        }
-        if (this.config.UNSAFE_replayCanvas) {
-            this.preloadAllImages();
-        }
-    };
-    Replayer.prototype.insertStyleRules = function (documentElement, head) {
-        var styleEl = document.createElement('style');
-        documentElement.insertBefore(styleEl, head);
-        var injectStylesRules = rules(this.config.blockClass).concat(this.config.insertStyleRules);
-        if (this.config.pauseAnimation) {
-            injectStylesRules.push('html.rrweb-paused *, html.rrweb-paused *:before, html.rrweb-paused *:after { animation-play-state: paused !important; }');
-        }
-        for (var idx = 0; idx < injectStylesRules.length; idx++) {
-            styleEl.sheet.insertRule(injectStylesRules[idx], idx);
-        }
-    };
-    Replayer.prototype.attachDocumentToIframe = function (mutation, iframeEl) {
-        var e_12, _a;
-        var _this = this;
-        var collected = [];
-        if (!iframeEl.contentDocument) {
-            var parent_1 = iframeEl.parentNode;
-            while (parent_1) {
-                if (this.fragmentParentMap.has(parent_1)) {
-                    var frag = parent_1;
-                    var realParent = this.fragmentParentMap.get(frag);
-                    this.restoreRealParent(frag, realParent);
-                    break;
-                }
-                parent_1 = parent_1.parentNode;
-            }
-        }
-        buildNodeWithSN(mutation.node, {
-            doc: iframeEl.contentDocument,
-            map: this.mirror.map,
-            hackCss: true,
-            skipChild: false,
-            afterAppend: function (builtNode) {
-                _this.collectIframeAndAttachDocument(collected, builtNode);
-                if (builtNode.__sn.type === NodeType.Element &&
-                    builtNode.__sn.tagName.toUpperCase() === 'HTML') {
-                    var _a = iframeEl.contentDocument, documentElement = _a.documentElement, head = _a.head;
-                    _this.insertStyleRules(documentElement, head);
-                }
-            },
-            cache: this.cache,
-        });
-        var _loop_2 = function (mutationInQueue, builtNode) {
-            this_2.attachDocumentToIframe(mutationInQueue, builtNode);
-            this_2.newDocumentQueue = this_2.newDocumentQueue.filter(function (m) { return m !== mutationInQueue; });
-        };
-        var this_2 = this;
-        try {
-            for (var collected_2 = __values(collected), collected_2_1 = collected_2.next(); !collected_2_1.done; collected_2_1 = collected_2.next()) {
-                var _b = collected_2_1.value, mutationInQueue = _b.mutationInQueue, builtNode = _b.builtNode;
-                _loop_2(mutationInQueue, builtNode);
-            }
-        }
-        catch (e_12_1) { e_12 = { error: e_12_1 }; }
-        finally {
-            try {
-                if (collected_2_1 && !collected_2_1.done && (_a = collected_2.return)) _a.call(collected_2);
-            }
-            finally { if (e_12) throw e_12.error; }
-        }
-    };
-    Replayer.prototype.collectIframeAndAttachDocument = function (collected, builtNode) {
-        if (isIframeINode(builtNode)) {
-            var mutationInQueue = this.newDocumentQueue.find(function (m) { return m.parentId === builtNode.__sn.id; });
-            if (mutationInQueue) {
-                collected.push({ mutationInQueue: mutationInQueue, builtNode: builtNode });
-            }
-        }
-    };
-    Replayer.prototype.waitForStylesheetLoad = function () {
-        var _this = this;
-        var _a;
-        var head = (_a = this.iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.head;
-        if (head) {
-            var unloadSheets_1 = new Set();
-            var timer_1;
-            var beforeLoadState_1 = this.service.state;
-            var stateHandler_1 = function () {
-                beforeLoadState_1 = _this.service.state;
-            };
-            this.emitter.on(ReplayerEvents.Start, stateHandler_1);
-            this.emitter.on(ReplayerEvents.Pause, stateHandler_1);
-            var unsubscribe_1 = function () {
-                _this.emitter.off(ReplayerEvents.Start, stateHandler_1);
-                _this.emitter.off(ReplayerEvents.Pause, stateHandler_1);
-            };
-            head
-                .querySelectorAll('link[rel="stylesheet"]')
-                .forEach(function (css) {
-                if (!css.sheet) {
-                    unloadSheets_1.add(css);
-                    css.addEventListener('load', function () {
-                        unloadSheets_1.delete(css);
-                        if (unloadSheets_1.size === 0 && timer_1 !== -1) {
-                            if (beforeLoadState_1.matches('playing')) {
-                                _this.play(_this.getCurrentTime());
-                            }
-                            _this.emitter.emit(ReplayerEvents.LoadStylesheetEnd);
-                            if (timer_1) {
-                                clearTimeout(timer_1);
-                            }
-                            unsubscribe_1();
-                        }
-                    });
-                }
-            });
-            if (unloadSheets_1.size > 0) {
-                this.service.send({ type: 'PAUSE' });
-                this.emitter.emit(ReplayerEvents.LoadStylesheetStart);
-                timer_1 = setTimeout(function () {
-                    if (beforeLoadState_1.matches('playing')) {
-                        _this.play(_this.getCurrentTime());
-                    }
-                    timer_1 = -1;
-                    unsubscribe_1();
-                }, this.config.loadTimeout);
-            }
-        }
-    };
-    Replayer.prototype.hasImageArg = function (args) {
-        var e_13, _a;
-        try {
-            for (var args_1 = __values(args), args_1_1 = args_1.next(); !args_1_1.done; args_1_1 = args_1.next()) {
-                var arg = args_1_1.value;
-                if (!arg || typeof arg !== 'object') {
-                }
-                else if ('rr_type' in arg && 'args' in arg) {
-                    if (this.hasImageArg(arg.args))
-                        return true;
-                }
-                else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
-                    return true;
-                }
-                else if (arg instanceof Array) {
-                    if (this.hasImageArg(arg))
-                        return true;
-                }
-            }
-        }
-        catch (e_13_1) { e_13 = { error: e_13_1 }; }
-        finally {
-            try {
-                if (args_1_1 && !args_1_1.done && (_a = args_1.return)) _a.call(args_1);
-            }
-            finally { if (e_13) throw e_13.error; }
-        }
-        return false;
-    };
-    Replayer.prototype.getImageArgs = function (args) {
-        var e_14, _a;
-        var images = [];
-        try {
-            for (var args_2 = __values(args), args_2_1 = args_2.next(); !args_2_1.done; args_2_1 = args_2.next()) {
-                var arg = args_2_1.value;
-                if (!arg || typeof arg !== 'object') {
-                }
-                else if ('rr_type' in arg && 'args' in arg) {
-                    images.push.apply(images, __spreadArray([], __read(this.getImageArgs(arg.args)), false));
-                }
-                else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
-                    images.push(arg.src);
-                }
-                else if (arg instanceof Array) {
-                    images.push.apply(images, __spreadArray([], __read(this.getImageArgs(arg)), false));
-                }
-            }
-        }
-        catch (e_14_1) { e_14 = { error: e_14_1 }; }
-        finally {
-            try {
-                if (args_2_1 && !args_2_1.done && (_a = args_2.return)) _a.call(args_2);
-            }
-            finally { if (e_14) throw e_14.error; }
-        }
-        return images;
-    };
-    Replayer.prototype.preloadAllImages = function () {
-        var e_15, _a;
-        var _this = this;
-        this.service.state;
-        var stateHandler = function () {
-            _this.service.state;
-        };
-        this.emitter.on(ReplayerEvents.Start, stateHandler);
-        this.emitter.on(ReplayerEvents.Pause, stateHandler);
-        var _loop_3 = function (event_3) {
-            if (event_3.type === EventType.IncrementalSnapshot &&
-                event_3.data.source === IncrementalSource.CanvasMutation)
-                if ('commands' in event_3.data) {
-                    event_3.data.commands.forEach(function (c) { return _this.preloadImages(c, event_3); });
-                }
-                else {
-                    this_3.preloadImages(event_3.data, event_3);
-                }
-        };
-        var this_3 = this;
-        try {
-            for (var _b = __values(this.service.state.context.events), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var event_3 = _c.value;
-                _loop_3(event_3);
-            }
-        }
-        catch (e_15_1) { e_15 = { error: e_15_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_15) throw e_15.error; }
-        }
-    };
-    Replayer.prototype.preloadImages = function (data, event) {
-        var _this = this;
-        if (data.property === 'drawImage' &&
-            typeof data.args[0] === 'string' &&
-            !this.imageMap.has(event)) {
-            var canvas = document.createElement('canvas');
-            var ctx = canvas.getContext('2d');
-            var imgd = ctx === null || ctx === void 0 ? void 0 : ctx.createImageData(canvas.width, canvas.height);
-            imgd === null || imgd === void 0 ? void 0 : imgd.data;
-            JSON.parse(data.args[0]);
-            ctx === null || ctx === void 0 ? void 0 : ctx.putImageData(imgd, 0, 0);
-        }
-        else if (this.hasImageArg(data.args)) {
-            this.getImageArgs(data.args).forEach(function (url) {
-                var image = new Image();
-                image.src = url;
-                _this.imageMap.set(url, image);
-            });
-        }
-    };
-    Replayer.prototype.applyIncremental = function (e, isSync) {
-        var _this = this;
-        var _a, _b;
-        var d = e.data;
-        switch (d.source) {
-            case IncrementalSource.Mutation: {
-                if (isSync) {
-                    d.adds.forEach(function (m) { return _this.treeIndex.add(m); });
-                    d.texts.forEach(function (m) {
-                        var target = _this.mirror.getNode(m.id);
-                        var parent = target === null || target === void 0 ? void 0 : target.parentNode;
-                        if (parent && _this.virtualStyleRulesMap.has(parent))
-                            _this.virtualStyleRulesMap.delete(parent);
-                        _this.treeIndex.text(m);
-                    });
-                    d.attributes.forEach(function (m) { return _this.treeIndex.attribute(m); });
-                    d.removes.forEach(function (m) { return _this.treeIndex.remove(m, _this.mirror); });
-                }
-                try {
-                    this.applyMutation(d, isSync);
-                }
-                catch (error) {
-                    this.warn("Exception in mutation ".concat(error.message || error), d);
-                }
-                break;
-            }
-            case IncrementalSource.Drag:
-            case IncrementalSource.TouchMove:
-            case IncrementalSource.MouseMove:
-                if (isSync) {
-                    var lastPosition = d.positions[d.positions.length - 1];
-                    this.mousePos = {
-                        x: lastPosition.x,
-                        y: lastPosition.y,
-                        id: lastPosition.id,
-                        debugData: d,
-                    };
-                }
-                else {
-                    d.positions.forEach(function (p) {
-                        var action = {
-                            doAction: function () {
-                                _this.moveAndHover(p.x, p.y, p.id, isSync, d);
-                            },
-                            delay: p.timeOffset +
-                                e.timestamp -
-                                _this.service.state.context.baselineTime,
-                        };
-                        _this.timer.addAction(action);
-                    });
-                    this.timer.addAction({
-                        doAction: function () { },
-                        delay: e.delay - ((_a = d.positions[0]) === null || _a === void 0 ? void 0 : _a.timeOffset),
-                    });
-                }
-                break;
-            case IncrementalSource.MouseInteraction: {
-                if (d.id === -1) {
-                    break;
-                }
-                var event_4 = new Event(MouseInteractions[d.type].toLowerCase());
-                var target = this.mirror.getNode(d.id);
-                if (!target) {
-                    return this.debugNodeNotFound(d, d.id);
-                }
-                this.emitter.emit(ReplayerEvents.MouseInteraction, {
-                    type: d.type,
-                    target: target,
-                });
-                var triggerFocus = this.config.triggerFocus;
-                switch (d.type) {
-                    case MouseInteractions.Blur:
-                        if ('blur' in target) {
-                            target.blur();
-                        }
-                        break;
-                    case MouseInteractions.Focus:
-                        if (triggerFocus && target.focus) {
-                            target.focus({
-                                preventScroll: true,
-                            });
-                        }
-                        break;
-                    case MouseInteractions.Click:
-                    case MouseInteractions.TouchStart:
-                    case MouseInteractions.TouchEnd:
-                        if (isSync) {
-                            if (d.type === MouseInteractions.TouchStart) {
-                                this.touchActive = true;
-                            }
-                            else if (d.type === MouseInteractions.TouchEnd) {
-                                this.touchActive = false;
-                            }
-                            this.mousePos = {
-                                x: d.x,
-                                y: d.y,
-                                id: d.id,
-                                debugData: d,
-                            };
-                        }
-                        else {
-                            if (d.type === MouseInteractions.TouchStart) {
-                                this.tailPositions.length = 0;
-                            }
-                            this.moveAndHover(d.x, d.y, d.id, isSync, d);
-                            if (d.type === MouseInteractions.Click) {
-                                this.mouse.classList.remove('active');
-                                void this.mouse.offsetWidth;
-                                this.mouse.classList.add('active');
-                            }
-                            else if (d.type === MouseInteractions.TouchStart) {
-                                void this.mouse.offsetWidth;
-                                this.mouse.classList.add('touch-active');
-                            }
-                            else if (d.type === MouseInteractions.TouchEnd) {
-                                this.mouse.classList.remove('touch-active');
-                            }
-                        }
-                        break;
-                    case MouseInteractions.TouchCancel:
-                        if (isSync) {
-                            this.touchActive = false;
-                        }
-                        else {
-                            this.mouse.classList.remove('touch-active');
-                        }
-                        break;
-                    default:
-                        target.dispatchEvent(event_4);
-                }
-                break;
-            }
-            case IncrementalSource.Scroll: {
-                if (d.id === -1) {
-                    break;
-                }
-                if (isSync) {
-                    this.treeIndex.scroll(d);
-                    break;
-                }
-                this.applyScroll(d, false);
-                break;
-            }
-            case IncrementalSource.ViewportResize:
-                this.emitter.emit(ReplayerEvents.Resize, {
-                    width: d.width,
-                    height: d.height,
-                });
-                break;
-            case IncrementalSource.Input: {
-                if (d.id === -1) {
-                    break;
-                }
-                if (isSync) {
-                    this.treeIndex.input(d);
-                    break;
-                }
-                this.applyInput(d);
-                break;
-            }
-            case IncrementalSource.MediaInteraction: {
-                var target = this.mirror.getNode(d.id);
-                if (!target) {
-                    return this.debugNodeNotFound(d, d.id);
-                }
-                var mediaEl = target;
-                try {
-                    if (d.currentTime) {
-                        mediaEl.currentTime = d.currentTime;
-                    }
-                    if (d.volume) {
-                        mediaEl.volume = d.volume;
-                    }
-                    if (d.muted) {
-                        mediaEl.muted = d.muted;
-                    }
-                    if (d.type === 1) {
-                        mediaEl.pause();
-                    }
-                    if (d.type === 0) {
-                        mediaEl.play();
-                    }
-                }
-                catch (error) {
-                    if (this.config.showWarning) {
-                        console.warn("Failed to replay media interactions: ".concat(error.message || error));
-                    }
-                }
-                break;
-            }
-            case IncrementalSource.StyleSheetRule: {
-                var target = this.mirror.getNode(d.id);
-                if (!target) {
-                    return this.debugNodeNotFound(d, d.id);
-                }
-                var styleEl = target;
-                var parent_2 = target.parentNode;
-                var usingVirtualParent_1 = this.fragmentParentMap.has(parent_2);
-                var styleSheet_1 = usingVirtualParent_1 ? null : styleEl.sheet;
-                var rules_1;
-                if (!styleSheet_1) {
-                    if (this.virtualStyleRulesMap.has(target)) {
-                        rules_1 = this.virtualStyleRulesMap.get(target);
-                    }
-                    else {
-                        rules_1 = [];
-                        this.virtualStyleRulesMap.set(target, rules_1);
-                    }
-                }
-                if (d.adds) {
-                    d.adds.forEach(function (_a) {
-                        var rule = _a.rule, nestedIndex = _a.index;
-                        if (styleSheet_1) {
-                            try {
-                                if (Array.isArray(nestedIndex)) {
-                                    var _b = getPositionsAndIndex(nestedIndex), positions = _b.positions, index = _b.index;
-                                    var nestedRule = getNestedRule(styleSheet_1.cssRules, positions);
-                                    nestedRule.insertRule(rule, index);
-                                }
-                                else {
-                                    var index = nestedIndex === undefined
-                                        ? undefined
-                                        : Math.min(nestedIndex, styleSheet_1.cssRules.length);
-                                    styleSheet_1.insertRule(rule, index);
-                                }
-                            }
-                            catch (e) {
-                            }
-                        }
-                        else {
-                            rules_1 === null || rules_1 === void 0 ? void 0 : rules_1.push({
-                                cssText: rule,
-                                index: nestedIndex,
-                                type: StyleRuleType.Insert,
-                            });
-                        }
-                    });
-                }
-                if (d.removes) {
-                    d.removes.forEach(function (_a) {
-                        var nestedIndex = _a.index;
-                        if (usingVirtualParent_1) {
-                            rules_1 === null || rules_1 === void 0 ? void 0 : rules_1.push({ index: nestedIndex, type: StyleRuleType.Remove });
-                        }
-                        else {
-                            try {
-                                if (Array.isArray(nestedIndex)) {
-                                    var _b = getPositionsAndIndex(nestedIndex), positions = _b.positions, index = _b.index;
-                                    var nestedRule = getNestedRule(styleSheet_1.cssRules, positions);
-                                    nestedRule.deleteRule(index || 0);
-                                }
-                                else {
-                                    styleSheet_1 === null || styleSheet_1 === void 0 ? void 0 : styleSheet_1.deleteRule(nestedIndex);
-                                }
-                            }
-                            catch (e) {
-                            }
-                        }
-                    });
-                }
-                break;
-            }
-            case IncrementalSource.StyleDeclaration: {
-                var target = this.mirror.getNode(d.id);
-                if (!target) {
-                    return this.debugNodeNotFound(d, d.id);
-                }
-                var styleEl = target;
-                var parent_3 = target.parentNode;
-                var usingVirtualParent = this.fragmentParentMap.has(parent_3);
-                var styleSheet = usingVirtualParent ? null : styleEl.sheet;
-                var rules = [];
-                if (!styleSheet) {
-                    if (this.virtualStyleRulesMap.has(target)) {
-                        rules = this.virtualStyleRulesMap.get(target);
-                    }
-                    else {
-                        rules = [];
-                        this.virtualStyleRulesMap.set(target, rules);
-                    }
-                }
-                if (d.set) {
-                    if (styleSheet) {
-                        var rule = getNestedRule(styleSheet.rules, d.index);
-                        rule.style.setProperty(d.set.property, d.set.value, d.set.priority);
-                    }
-                    else {
-                        rules.push(__assign({ type: StyleRuleType.SetProperty, index: d.index }, d.set));
-                    }
-                }
-                if (d.remove) {
-                    if (styleSheet) {
-                        var rule = getNestedRule(styleSheet.rules, d.index);
-                        rule.style.removeProperty(d.remove.property);
-                    }
-                    else {
-                        rules.push(__assign({ type: StyleRuleType.RemoveProperty, index: d.index }, d.remove));
-                    }
-                }
-                break;
-            }
-            case IncrementalSource.CanvasMutation: {
-                if (!this.config.UNSAFE_replayCanvas) {
-                    return;
-                }
-                var target = this.mirror.getNode(d.id);
-                if (!target) {
-                    return this.debugNodeNotFound(d, d.id);
-                }
-                canvasMutation({
-                    event: e,
-                    mutation: d,
-                    target: target,
-                    imageMap: this.imageMap,
-                    errorHandler: this.warnCanvasMutationFailed.bind(this),
-                });
-                break;
-            }
-            case IncrementalSource.Font: {
-                try {
-                    var fontFace = new FontFace(d.family, d.buffer ? new Uint8Array(JSON.parse(d.fontSource)) : d.fontSource, d.descriptors);
-                    (_b = this.iframe.contentDocument) === null || _b === void 0 ? void 0 : _b.fonts.add(fontFace);
-                }
-                catch (error) {
-                    if (this.config.showWarning) {
-                        console.warn(error);
-                    }
-                }
-                break;
-            }
-        }
-    };
-    Replayer.prototype.applyMutation = function (d, useVirtualParent) {
-        var e_16, _a;
-        var _this = this;
-        d.removes.forEach(function (mutation) {
-            var target = _this.mirror.getNode(mutation.id);
-            if (!target) {
-                if (d.removes.find(function (r) { return r.id === mutation.parentId; })) {
-                    return;
-                }
-                return _this.warnNodeNotFound(d, mutation.id);
-            }
-            if (_this.virtualStyleRulesMap.has(target)) {
-                _this.virtualStyleRulesMap.delete(target);
-            }
-            var parent = _this.mirror.getNode(mutation.parentId);
-            if (!parent) {
-                return _this.warnNodeNotFound(d, mutation.parentId);
-            }
-            if (mutation.isShadow && hasShadowRoot(parent)) {
-                parent = parent.shadowRoot;
-            }
-            _this.mirror.removeNodeFromMap(target);
-            if (parent) {
-                var realTarget = null;
-                var realParent = '__sn' in parent ? _this.fragmentParentMap.get(parent) : undefined;
-                if (realParent && realParent.contains(target)) {
-                    parent = realParent;
-                }
-                else if (_this.fragmentParentMap.has(target)) {
-                    realTarget = _this.fragmentParentMap.get(target);
-                    _this.fragmentParentMap.delete(target);
-                    target = realTarget;
-                }
-                try {
-                    parent.removeChild(target);
-                }
-                catch (error) {
-                    if (error instanceof DOMException) {
-                        _this.warn('parent could not remove child in mutation', parent, realParent, target, realTarget, d);
-                    }
-                    else {
-                        throw error;
-                    }
-                }
-            }
-        });
-        var legacy_missingNodeMap = __assign({}, this.legacy_missingNodeRetryMap);
-        var queue = [];
-        var nextNotInDOM = function (mutation) {
-            var next = null;
-            if (mutation.nextId) {
-                next = _this.mirror.getNode(mutation.nextId);
-            }
-            if (mutation.nextId !== null &&
-                mutation.nextId !== undefined &&
-                mutation.nextId !== -1 &&
-                !next) {
-                return true;
-            }
-            return false;
-        };
-        var appendNode = function (mutation) {
-            var e_17, _a;
-            var _b, _c;
-            if (!_this.iframe.contentDocument) {
-                return console.warn('Looks like your replayer has been destroyed.');
-            }
-            var parent = _this.mirror.getNode(mutation.parentId);
-            if (!parent) {
-                if (mutation.node.type === NodeType.Document) {
-                    return _this.newDocumentQueue.push(mutation);
-                }
-                return queue.push(mutation);
-            }
-            var parentInDocument = null;
-            if (_this.iframe.contentDocument.contains) {
-                parentInDocument = _this.iframe.contentDocument.contains(parent);
-            }
-            else if (_this.iframe.contentDocument.body.contains) {
-                parentInDocument = _this.iframe.contentDocument.body.contains(parent);
-            }
-            var hasIframeChild = ((_c = (_b = parent).getElementsByTagName) === null || _c === void 0 ? void 0 : _c.call(_b, 'iframe').length) > 0;
-            if (useVirtualParent &&
-                parentInDocument &&
-                !isIframeINode(parent) &&
-                !hasIframeChild) {
-                var virtualParent = document.createDocumentFragment();
-                _this.mirror.map[mutation.parentId] = virtualParent;
-                _this.fragmentParentMap.set(virtualParent, parent);
-                _this.storeState(parent);
-                while (parent.firstChild) {
-                    virtualParent.appendChild(parent.firstChild);
-                }
-                parent = virtualParent;
-            }
-            if (mutation.node.isShadow) {
-                if (!hasShadowRoot(parent)) {
-                    parent.attachShadow({ mode: 'open' });
-                    parent = parent.shadowRoot;
-                }
-                else
-                    parent = parent.shadowRoot;
-            }
-            var previous = null;
-            var next = null;
-            if (mutation.previousId) {
-                previous = _this.mirror.getNode(mutation.previousId);
-            }
-            if (mutation.nextId) {
-                next = _this.mirror.getNode(mutation.nextId);
-            }
-            if (nextNotInDOM(mutation)) {
-                return queue.push(mutation);
-            }
-            if (mutation.node.rootId && !_this.mirror.getNode(mutation.node.rootId)) {
-                return;
-            }
-            var targetDoc = mutation.node.rootId
-                ? _this.mirror.getNode(mutation.node.rootId)
-                : _this.iframe.contentDocument;
-            if (isIframeINode(parent)) {
-                _this.attachDocumentToIframe(mutation, parent);
-                return;
-            }
-            var target = buildNodeWithSN(mutation.node, {
-                doc: targetDoc,
-                map: _this.mirror.map,
-                skipChild: true,
-                hackCss: true,
-                cache: _this.cache,
-            });
-            if (mutation.previousId === -1 || mutation.nextId === -1) {
-                legacy_missingNodeMap[mutation.node.id] = {
-                    node: target,
-                    mutation: mutation,
-                };
-                return;
-            }
-            if ('__sn' in parent &&
-                parent.__sn.type === NodeType.Element &&
-                parent.__sn.tagName === 'textarea' &&
-                mutation.node.type === NodeType.Text) {
-                try {
-                    for (var _d = __values(Array.from(parent.childNodes)), _e = _d.next(); !_e.done; _e = _d.next()) {
-                        var c = _e.value;
-                        if (c.nodeType === parent.TEXT_NODE) {
-                            parent.removeChild(c);
-                        }
-                    }
-                }
-                catch (e_17_1) { e_17 = { error: e_17_1 }; }
-                finally {
-                    try {
-                        if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
-                    }
-                    finally { if (e_17) throw e_17.error; }
-                }
-            }
-            if (previous && previous.nextSibling && previous.nextSibling.parentNode) {
-                parent.insertBefore(target, previous.nextSibling);
-            }
-            else if (next && next.parentNode) {
-                parent.contains(next)
-                    ? parent.insertBefore(target, next)
-                    : parent.insertBefore(target, null);
-            }
-            else {
-                if (parent === targetDoc) {
-                    while (targetDoc.firstChild) {
-                        targetDoc.removeChild(targetDoc.firstChild);
-                    }
-                }
-                parent.appendChild(target);
-            }
-            if (isIframeINode(target)) {
-                var mutationInQueue_1 = _this.newDocumentQueue.find(function (m) { return m.parentId === target.__sn.id; });
-                if (mutationInQueue_1) {
-                    _this.attachDocumentToIframe(mutationInQueue_1, target);
-                    _this.newDocumentQueue = _this.newDocumentQueue.filter(function (m) { return m !== mutationInQueue_1; });
-                }
-            }
-            if (mutation.previousId || mutation.nextId) {
-                _this.legacy_resolveMissingNode(legacy_missingNodeMap, parent, target, mutation);
-            }
-        };
-        d.adds.forEach(function (mutation) {
-            appendNode(mutation);
-        });
-        var startTime = Date.now();
-        while (queue.length) {
-            var resolveTrees = queueToResolveTrees(queue);
-            queue.length = 0;
-            if (Date.now() - startTime > 500) {
-                this.warn('Timeout in the loop, please check the resolve tree data:', resolveTrees);
-                break;
-            }
-            try {
-                for (var resolveTrees_1 = (e_16 = void 0, __values(resolveTrees)), resolveTrees_1_1 = resolveTrees_1.next(); !resolveTrees_1_1.done; resolveTrees_1_1 = resolveTrees_1.next()) {
-                    var tree = resolveTrees_1_1.value;
-                    var parent_4 = this.mirror.getNode(tree.value.parentId);
-                    if (!parent_4) {
-                        this.debug('Drop resolve tree since there is no parent for the root node.', tree);
-                    }
-                    else {
-                        iterateResolveTree(tree, function (mutation) {
-                            appendNode(mutation);
-                        });
-                    }
-                }
-            }
-            catch (e_16_1) { e_16 = { error: e_16_1 }; }
-            finally {
-                try {
-                    if (resolveTrees_1_1 && !resolveTrees_1_1.done && (_a = resolveTrees_1.return)) _a.call(resolveTrees_1);
-                }
-                finally { if (e_16) throw e_16.error; }
-            }
-        }
-        if (Object.keys(legacy_missingNodeMap).length) {
-            Object.assign(this.legacy_missingNodeRetryMap, legacy_missingNodeMap);
-        }
-        d.texts.forEach(function (mutation) {
-            var target = _this.mirror.getNode(mutation.id);
-            if (!target) {
-                if (d.removes.find(function (r) { return r.id === mutation.id; })) {
-                    return;
-                }
-                return _this.warnNodeNotFound(d, mutation.id);
-            }
-            if (_this.fragmentParentMap.has(target)) {
-                target = _this.fragmentParentMap.get(target);
-            }
-            target.textContent = mutation.value;
-        });
-        d.attributes.forEach(function (mutation) {
-            var target = _this.mirror.getNode(mutation.id);
-            if (!target) {
-                if (d.removes.find(function (r) { return r.id === mutation.id; })) {
-                    return;
-                }
-                return _this.warnNodeNotFound(d, mutation.id);
-            }
-            if (_this.fragmentParentMap.has(target)) {
-                target = _this.fragmentParentMap.get(target);
-            }
-            for (var attributeName in mutation.attributes) {
-                if (typeof attributeName === 'string') {
-                    var value = mutation.attributes[attributeName];
-                    if (value === null) {
-                        target.removeAttribute(attributeName);
-                    }
-                    else if (typeof value === 'string') {
-                        try {
-                            target.setAttribute(attributeName, value);
-                        }
-                        catch (error) {
-                            if (_this.config.showWarning) {
-                                console.warn('An error occurred may due to the checkout feature.', error);
-                            }
-                        }
-                    }
-                    else if (attributeName === 'style') {
-                        var styleValues = value;
-                        var targetEl = target;
-                        for (var s in styleValues) {
-                            if (styleValues[s] === false) {
-                                targetEl.style.removeProperty(s);
-                            }
-                            else if (styleValues[s] instanceof Array) {
-                                var svp = styleValues[s];
-                                targetEl.style.setProperty(s, svp[0], svp[1]);
-                            }
-                            else {
-                                var svs = styleValues[s];
-                                targetEl.style.setProperty(s, svs);
-                            }
-                        }
-                    }
-                }
-            }
-        });
-    };
-    Replayer.prototype.applyScroll = function (d, isSync) {
-        var target = this.mirror.getNode(d.id);
-        if (!target) {
-            return this.debugNodeNotFound(d, d.id);
-        }
-        if (target === this.iframe.contentDocument) {
-            this.iframe.contentWindow.scrollTo({
-                top: d.y,
-                left: d.x,
-                behavior: isSync ? 'auto' : 'smooth',
-            });
-        }
-        else if (target.__sn.type === NodeType.Document) {
-            target.defaultView.scrollTo({
-                top: d.y,
-                left: d.x,
-                behavior: isSync ? 'auto' : 'smooth',
-            });
-        }
-        else {
-            try {
-                target.scrollTop = d.y;
-                target.scrollLeft = d.x;
-            }
-            catch (error) {
-            }
-        }
-    };
-    Replayer.prototype.applyInput = function (d) {
-        var target = this.mirror.getNode(d.id);
-        if (!target) {
-            return this.debugNodeNotFound(d, d.id);
-        }
-        try {
-            target.checked = d.isChecked;
-            target.value = d.text;
-        }
-        catch (error) {
-        }
-    };
-    Replayer.prototype.applyText = function (d, mutation) {
-        var target = this.mirror.getNode(d.id);
-        if (!target) {
-            return this.debugNodeNotFound(mutation, d.id);
-        }
-        try {
-            target.textContent = d.value;
-        }
-        catch (error) {
-        }
-    };
-    Replayer.prototype.legacy_resolveMissingNode = function (map, parent, target, targetMutation) {
-        var previousId = targetMutation.previousId, nextId = targetMutation.nextId;
-        var previousInMap = previousId && map[previousId];
-        var nextInMap = nextId && map[nextId];
-        if (previousInMap) {
-            var _a = previousInMap, node = _a.node, mutation = _a.mutation;
-            parent.insertBefore(node, target);
-            delete map[mutation.node.id];
-            delete this.legacy_missingNodeRetryMap[mutation.node.id];
-            if (mutation.previousId || mutation.nextId) {
-                this.legacy_resolveMissingNode(map, parent, node, mutation);
-            }
-        }
-        if (nextInMap) {
-            var _b = nextInMap, node = _b.node, mutation = _b.mutation;
-            parent.insertBefore(node, target.nextSibling);
-            delete map[mutation.node.id];
-            delete this.legacy_missingNodeRetryMap[mutation.node.id];
-            if (mutation.previousId || mutation.nextId) {
-                this.legacy_resolveMissingNode(map, parent, node, mutation);
-            }
-        }
-    };
-    Replayer.prototype.moveAndHover = function (x, y, id, isSync, debugData) {
-        var target = this.mirror.getNode(id);
-        if (!target) {
-            return this.debugNodeNotFound(debugData, id);
-        }
-        var base = getBaseDimension(target, this.iframe);
-        var _x = x * base.absoluteScale + base.x;
-        var _y = y * base.absoluteScale + base.y;
-        this.mouse.style.left = "".concat(_x, "px");
-        this.mouse.style.top = "".concat(_y, "px");
-        if (!isSync) {
-            this.drawMouseTail({ x: _x, y: _y });
-        }
-        this.hoverElements(target);
-    };
-    Replayer.prototype.drawMouseTail = function (position) {
-        var _this = this;
-        if (!this.mouseTail) {
-            return;
-        }
-        var _a = this.config.mouseTail === true
-            ? defaultMouseTailConfig
-            : Object.assign({}, defaultMouseTailConfig, this.config.mouseTail), lineCap = _a.lineCap, lineWidth = _a.lineWidth, strokeStyle = _a.strokeStyle, duration = _a.duration;
-        var draw = function () {
-            if (!_this.mouseTail) {
-                return;
-            }
-            var ctx = _this.mouseTail.getContext('2d');
-            if (!ctx || !_this.tailPositions.length) {
-                return;
-            }
-            ctx.clearRect(0, 0, _this.mouseTail.width, _this.mouseTail.height);
-            ctx.beginPath();
-            ctx.lineWidth = lineWidth;
-            ctx.lineCap = lineCap;
-            ctx.strokeStyle = strokeStyle;
-            ctx.moveTo(_this.tailPositions[0].x, _this.tailPositions[0].y);
-            _this.tailPositions.forEach(function (p) { return ctx.lineTo(p.x, p.y); });
-            ctx.stroke();
-        };
-        this.tailPositions.push(position);
-        draw();
-        setTimeout(function () {
-            _this.tailPositions = _this.tailPositions.filter(function (p) { return p !== position; });
-            draw();
-        }, duration / this.speedService.state.context.timer.speed);
-    };
-    Replayer.prototype.hoverElements = function (el) {
-        var _a;
-        (_a = this.iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.\\:hover').forEach(function (hoveredEl) {
-            hoveredEl.classList.remove(':hover');
-        });
-        var currentEl = el;
-        while (currentEl) {
-            if (currentEl.classList) {
-                currentEl.classList.add(':hover');
-            }
-            currentEl = currentEl.parentElement;
-        }
-    };
-    Replayer.prototype.isUserInteraction = function (event) {
-        if (event.type !== EventType.IncrementalSnapshot) {
-            return false;
-        }
-        return (event.data.source > IncrementalSource.Mutation &&
-            event.data.source <= IncrementalSource.Input);
-    };
-    Replayer.prototype.backToNormal = function () {
-        this.nextUserInteractionEvent = null;
-        if (this.speedService.state.matches('normal')) {
-            return;
-        }
-        this.speedService.send({ type: 'BACK_TO_NORMAL' });
-        this.emitter.emit(ReplayerEvents.SkipEnd, {
-            speed: this.speedService.state.context.normalSpeed,
-        });
-    };
-    Replayer.prototype.restoreRealParent = function (frag, parent) {
-        this.mirror.map[parent.__sn.id] = parent;
-        if (parent.__sn.type === NodeType.Element &&
-            parent.__sn.tagName === 'textarea' &&
-            frag.textContent) {
-            parent.value = frag.textContent;
-        }
-        parent.appendChild(frag);
-        this.restoreState(parent);
-    };
-    Replayer.prototype.storeState = function (parent) {
-        var e_18, _a;
-        if (parent) {
-            if (parent.nodeType === parent.ELEMENT_NODE) {
-                var parentElement = parent;
-                if (parentElement.scrollLeft || parentElement.scrollTop) {
-                    this.elementStateMap.set(parent, {
-                        scroll: [parentElement.scrollLeft, parentElement.scrollTop],
-                    });
-                }
-                if (parentElement.tagName === 'STYLE')
-                    storeCSSRules(parentElement, this.virtualStyleRulesMap);
-                var children = parentElement.children;
-                try {
-                    for (var _b = __values(Array.from(children)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var child = _c.value;
-                        this.storeState(child);
-                    }
-                }
-                catch (e_18_1) { e_18 = { error: e_18_1 }; }
-                finally {
-                    try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                    }
-                    finally { if (e_18) throw e_18.error; }
-                }
-            }
-        }
-    };
-    Replayer.prototype.restoreState = function (parent) {
-        var e_19, _a;
-        if (parent.nodeType === parent.ELEMENT_NODE) {
-            var parentElement = parent;
-            if (this.elementStateMap.has(parent)) {
-                var storedState = this.elementStateMap.get(parent);
-                if (storedState.scroll) {
-                    parentElement.scrollLeft = storedState.scroll[0];
-                    parentElement.scrollTop = storedState.scroll[1];
-                }
-                this.elementStateMap.delete(parent);
-            }
-            var children = parentElement.children;
-            try {
-                for (var _b = __values(Array.from(children)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var child = _c.value;
-                    this.restoreState(child);
-                }
-            }
-            catch (e_19_1) { e_19 = { error: e_19_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_19) throw e_19.error; }
-            }
-        }
-    };
-    Replayer.prototype.restoreNodeSheet = function (node) {
-        var storedRules = this.virtualStyleRulesMap.get(node);
-        if (node.nodeName !== 'STYLE') {
-            return;
-        }
-        if (!storedRules) {
-            return;
-        }
-        var styleNode = node;
-        applyVirtualStyleRulesToNode(storedRules, styleNode);
-    };
-    Replayer.prototype.warnNodeNotFound = function (d, id) {
-        if (this.treeIndex.idRemoved(id)) {
-            this.warn("Node with id '".concat(id, "' was previously removed. "), d);
-        }
-        else {
-            this.warn("Node with id '".concat(id, "' not found. "), d);
-        }
-    };
-    Replayer.prototype.warnCanvasMutationFailed = function (d, error) {
-        this.warn("Has error on canvas update", error, 'canvas mutation:', d);
-    };
-    Replayer.prototype.debugNodeNotFound = function (d, id) {
-        if (this.treeIndex.idRemoved(id)) {
-            this.debug(REPLAY_CONSOLE_PREFIX, "Node with id '".concat(id, "' was previously removed. "), d);
-        }
-        else {
-            this.debug(REPLAY_CONSOLE_PREFIX, "Node with id '".concat(id, "' not found. "), d);
-        }
-    };
-    Replayer.prototype.warn = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        if (!this.config.showWarning) {
-            return;
-        }
-        console.warn.apply(console, __spreadArray([REPLAY_CONSOLE_PREFIX], __read(args), false));
-    };
-    Replayer.prototype.debug = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        if (!this.config.showDebug) {
-            return;
-        }
-        console.log.apply(console, __spreadArray([REPLAY_CONSOLE_PREFIX], __read(args), false));
-    };
-    return Replayer;
-}());
 
 export { Replayer };