@highlight-run/rrweb 1.2.0 → 2.0.1

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

@@ -0,0 +1,321 @@
+import { __assign, __values } from '../../ext/tslib/tslib.es6.js';
+import { interpret as v, createMachine as s, assign as o } from '../../../../ext/@xstate/fsm/es/index.js';
+import { EventType, IncrementalSource, ReplayerEvents } from '../types.js';
+import { addDelay } from './timer.js';
+
+function discardPriorSnapshots(events, baselineTime) {
+    for (var idx = events.length - 1; idx >= 0; idx--) {
+        var event_1 = events[idx];
+        if (event_1.type === EventType.Meta) {
+            if (event_1.timestamp <= baselineTime) {
+                return events.slice(idx);
+            }
+        }
+    }
+    return events;
+}
+function createPlayerService(context, _a) {
+    var getCastFn = _a.getCastFn, applyEventsSynchronously = _a.applyEventsSynchronously, emitter = _a.emitter;
+    var playerMachine = s({
+        id: 'player',
+        context: context,
+        initial: 'paused',
+        states: {
+            playing: {
+                on: {
+                    PAUSE: {
+                        target: 'paused',
+                        actions: ['pause'],
+                    },
+                    CAST_EVENT: {
+                        target: 'playing',
+                        actions: 'castEvent',
+                    },
+                    END: {
+                        target: 'paused',
+                        actions: ['resetLastPlayedEvent', 'pause'],
+                    },
+                    ADD_EVENT: {
+                        target: 'playing',
+                        actions: ['addEvent'],
+                    },
+                    REPLACE_EVENTS: {
+                        target: 'playing',
+                        actions: ['replaceEvents'],
+                    },
+                },
+            },
+            paused: {
+                on: {
+                    PLAY: {
+                        target: 'playing',
+                        actions: ['recordTimeOffset', 'play'],
+                    },
+                    CAST_EVENT: {
+                        target: 'paused',
+                        actions: 'castEvent',
+                    },
+                    TO_LIVE: {
+                        target: 'live',
+                        actions: ['startLive'],
+                    },
+                    ADD_EVENT: {
+                        target: 'paused',
+                        actions: ['addEvent'],
+                    },
+                    REPLACE_EVENTS: {
+                        target: 'paused',
+                        actions: ['replaceEvents'],
+                    },
+                },
+            },
+            live: {
+                on: {
+                    ADD_EVENT: {
+                        target: 'live',
+                        actions: ['addEvent'],
+                    },
+                    CAST_EVENT: {
+                        target: 'live',
+                        actions: ['castEvent'],
+                    },
+                },
+            },
+        },
+    }, {
+        actions: {
+            castEvent: o({
+                lastPlayedEvent: function (ctx, event) {
+                    if (event.type === 'CAST_EVENT') {
+                        return event.payload.event;
+                    }
+                    return ctx.lastPlayedEvent;
+                },
+            }),
+            recordTimeOffset: o(function (ctx, event) {
+                var timeOffset = ctx.timeOffset;
+                if ('payload' in event && 'timeOffset' in event.payload) {
+                    timeOffset = event.payload.timeOffset;
+                }
+                return __assign(__assign({}, ctx), { timeOffset: timeOffset, baselineTime: ctx.events[0].timestamp + timeOffset });
+            }),
+            play: function (ctx) {
+                var e_1, _a, e_2, _b;
+                var _c;
+                var timer = ctx.timer, events = ctx.events, baselineTime = ctx.baselineTime, lastPlayedEvent = ctx.lastPlayedEvent;
+                timer.clear();
+                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_2 = events_1_1.value;
+                        addDelay(event_2, baselineTime);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (events_1_1 && !events_1_1.done && (_a = events_1.return)) _a.call(events_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                var neededEvents = discardPriorSnapshots(events, baselineTime);
+                var lastPlayedTimestamp = lastPlayedEvent === null || lastPlayedEvent === void 0 ? void 0 : lastPlayedEvent.timestamp;
+                if ((lastPlayedEvent === null || lastPlayedEvent === void 0 ? void 0 : lastPlayedEvent.type) === EventType.IncrementalSnapshot &&
+                    lastPlayedEvent.data.source === IncrementalSource.MouseMove) {
+                    lastPlayedTimestamp =
+                        lastPlayedEvent.timestamp +
+                            ((_c = lastPlayedEvent.data.positions[0]) === null || _c === void 0 ? void 0 : _c.timeOffset);
+                }
+                if (baselineTime < (lastPlayedTimestamp || 0)) {
+                    emitter.emit(ReplayerEvents.PlayBack);
+                }
+                var syncEvents = new Array();
+                var actions = new Array();
+                var _loop_1 = function (event_3) {
+                    if (lastPlayedTimestamp &&
+                        lastPlayedTimestamp < baselineTime &&
+                        (event_3.timestamp <= lastPlayedTimestamp ||
+                            event_3 === lastPlayedEvent)) {
+                        return "continue";
+                    }
+                    if (event_3.timestamp < baselineTime) {
+                        syncEvents.push(event_3);
+                    }
+                    else {
+                        var castFn_1 = getCastFn(event_3, false);
+                        actions.push({
+                            doAction: function () {
+                                castFn_1();
+                            },
+                            delay: event_3.delay,
+                        });
+                    }
+                };
+                try {
+                    for (var neededEvents_1 = __values(neededEvents), neededEvents_1_1 = neededEvents_1.next(); !neededEvents_1_1.done; neededEvents_1_1 = neededEvents_1.next()) {
+                        var event_3 = neededEvents_1_1.value;
+                        _loop_1(event_3);
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (neededEvents_1_1 && !neededEvents_1_1.done && (_b = neededEvents_1.return)) _b.call(neededEvents_1);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+                applyEventsSynchronously(syncEvents);
+                emitter.emit(ReplayerEvents.Flush);
+                timer.addActions(actions);
+                timer.start();
+            },
+            pause: function (ctx) {
+                ctx.timer.clear();
+            },
+            resetLastPlayedEvent: o(function (ctx) {
+                return __assign(__assign({}, ctx), { lastPlayedEvent: null });
+            }),
+            startLive: o({
+                baselineTime: function (ctx, event) {
+                    ctx.timer.toggleLiveMode(true);
+                    ctx.timer.start();
+                    if (event.type === 'TO_LIVE' && event.payload.baselineTime) {
+                        return event.payload.baselineTime;
+                    }
+                    return Date.now();
+                },
+            }),
+            replaceEvents: o(function (ctx, machineEvent) {
+                var e_3, _a;
+                var curEvents = ctx.events, timer = ctx.timer, baselineTime = ctx.baselineTime;
+                if (machineEvent.type === 'REPLACE_EVENTS') {
+                    var newEvents = machineEvent.payload.events;
+                    curEvents.length = 0;
+                    var actions = [];
+                    var _loop_2 = function (event_4) {
+                        addDelay(event_4, baselineTime);
+                        curEvents.push(event_4);
+                        if (event_4.timestamp >= timer.timeOffset + baselineTime) {
+                            var castFn_2 = getCastFn(event_4, false);
+                            actions.push({
+                                doAction: function () {
+                                    castFn_2();
+                                },
+                                delay: event_4.delay,
+                            });
+                        }
+                    };
+                    try {
+                        for (var newEvents_1 = __values(newEvents), newEvents_1_1 = newEvents_1.next(); !newEvents_1_1.done; newEvents_1_1 = newEvents_1.next()) {
+                            var event_4 = newEvents_1_1.value;
+                            _loop_2(event_4);
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (newEvents_1_1 && !newEvents_1_1.done && (_a = newEvents_1.return)) _a.call(newEvents_1);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                    if (timer.isActive()) {
+                        timer.replaceActions(actions);
+                    }
+                }
+                return __assign(__assign({}, ctx), { events: curEvents });
+            }),
+            addEvent: o(function (ctx, machineEvent) {
+                var baselineTime = ctx.baselineTime, timer = ctx.timer, events = ctx.events;
+                if (machineEvent.type === 'ADD_EVENT') {
+                    var event_5 = machineEvent.payload.event;
+                    addDelay(event_5, baselineTime);
+                    var end = events.length - 1;
+                    if (!events[end] || events[end].timestamp <= event_5.timestamp) {
+                        events.push(event_5);
+                    }
+                    else {
+                        var insertionIndex = -1;
+                        var start = 0;
+                        while (start <= end) {
+                            var mid = Math.floor((start + end) / 2);
+                            if (events[mid].timestamp <= event_5.timestamp) {
+                                start = mid + 1;
+                            }
+                            else {
+                                end = mid - 1;
+                            }
+                        }
+                        if (insertionIndex === -1) {
+                            insertionIndex = start;
+                        }
+                        events.splice(insertionIndex, 0, event_5);
+                    }
+                    var isSync = event_5.timestamp < baselineTime;
+                    var castFn_3 = getCastFn(event_5, isSync);
+                    if (isSync) {
+                        castFn_3();
+                    }
+                    else if (timer.isActive()) {
+                        timer.addAction({
+                            doAction: function () {
+                                castFn_3();
+                            },
+                            delay: event_5.delay,
+                        });
+                    }
+                }
+                return __assign(__assign({}, ctx), { events: events });
+            }),
+        },
+    });
+    return v(playerMachine);
+}
+function createSpeedService(context) {
+    var speedMachine = s({
+        id: 'speed',
+        context: context,
+        initial: 'normal',
+        states: {
+            normal: {
+                on: {
+                    FAST_FORWARD: {
+                        target: 'skipping',
+                        actions: ['recordSpeed', 'setSpeed'],
+                    },
+                    SET_SPEED: {
+                        target: 'normal',
+                        actions: ['setSpeed'],
+                    },
+                },
+            },
+            skipping: {
+                on: {
+                    BACK_TO_NORMAL: {
+                        target: 'normal',
+                        actions: ['restoreSpeed'],
+                    },
+                    SET_SPEED: {
+                        target: 'normal',
+                        actions: ['setSpeed'],
+                    },
+                },
+            },
+        },
+    }, {
+        actions: {
+            setSpeed: function (ctx, event) {
+                if ('payload' in event) {
+                    ctx.timer.setSpeed(event.payload.speed);
+                }
+            },
+            recordSpeed: o({
+                normalSpeed: function (ctx) { return ctx.timer.speed; },
+            }),
+            restoreSpeed: function (ctx) {
+                ctx.timer.setSpeed(ctx.normalSpeed);
+            },
+        },
+    });
+    return v(speedMachine);
+}
+
+export { createPlayerService, createSpeedService, discardPriorSnapshots };

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

@@ -0,0 +1,221 @@
+function polyfill(w, d) {
+    if (w === void 0) { w = window; }
+    if (d === void 0) { d = document; }
+    if ('scrollBehavior' in d.documentElement.style &&
+        w.__forceSmoothScrollPolyfill__ !== true) {
+        return;
+    }
+    var Element = w.HTMLElement || w.Element;
+    var SCROLL_TIME = 468;
+    var original = {
+        scroll: w.scroll || w.scrollTo,
+        scrollBy: w.scrollBy,
+        elementScroll: Element.prototype.scroll || scrollElement,
+        scrollIntoView: Element.prototype.scrollIntoView,
+    };
+    var now = w.performance && w.performance.now
+        ? w.performance.now.bind(w.performance)
+        : Date.now;
+    function isMicrosoftBrowser(userAgent) {
+        var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];
+        return new RegExp(userAgentPatterns.join('|')).test(userAgent);
+    }
+    var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
+    function scrollElement(x, y) {
+        this.scrollLeft = x;
+        this.scrollTop = y;
+    }
+    function ease(k) {
+        return 0.5 * (1 - Math.cos(Math.PI * k));
+    }
+    function shouldBailOut(firstArg) {
+        if (firstArg === null ||
+            typeof firstArg !== 'object' ||
+            firstArg.behavior === undefined ||
+            firstArg.behavior === 'auto' ||
+            firstArg.behavior === 'instant') {
+            return true;
+        }
+        if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {
+            return false;
+        }
+        throw new TypeError('behavior member of ScrollOptions ' +
+            firstArg.behavior +
+            ' is not a valid value for enumeration ScrollBehavior.');
+    }
+    function hasScrollableSpace(el, axis) {
+        if (axis === 'Y') {
+            return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;
+        }
+        if (axis === 'X') {
+            return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;
+        }
+    }
+    function canOverflow(el, axis) {
+        var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];
+        return overflowValue === 'auto' || overflowValue === 'scroll';
+    }
+    function isScrollable(el) {
+        var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');
+        var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+        return isScrollableY || isScrollableX;
+    }
+    function findScrollableParent(el) {
+        while (el !== d.body && isScrollable(el) === false) {
+            el = el.parentNode || el.host;
+        }
+        return el;
+    }
+    function step(context) {
+        var time = now();
+        var value;
+        var currentX;
+        var currentY;
+        var elapsed = (time - context.startTime) / SCROLL_TIME;
+        elapsed = elapsed > 1 ? 1 : elapsed;
+        value = ease(elapsed);
+        currentX = context.startX + (context.x - context.startX) * value;
+        currentY = context.startY + (context.y - context.startY) * value;
+        context.method.call(context.scrollable, currentX, currentY);
+        if (currentX !== context.x || currentY !== context.y) {
+            w.requestAnimationFrame(step.bind(w, context));
+        }
+    }
+    function smoothScroll(el, x, y) {
+        var scrollable;
+        var startX;
+        var startY;
+        var method;
+        var startTime = now();
+        if (el === d.body) {
+            scrollable = w;
+            startX = w.scrollX || w.pageXOffset;
+            startY = w.scrollY || w.pageYOffset;
+            method = original.scroll;
+        }
+        else {
+            scrollable = el;
+            startX = el.scrollLeft;
+            startY = el.scrollTop;
+            method = scrollElement;
+        }
+        step({
+            scrollable: scrollable,
+            method: method,
+            startTime: startTime,
+            startX: startX,
+            startY: startY,
+            x: x,
+            y: y,
+        });
+    }
+    w.scroll = w.scrollTo = function () {
+        if (arguments[0] === undefined) {
+            return;
+        }
+        if (shouldBailOut(arguments[0]) === true) {
+            original.scroll.call(w, arguments[0].left !== undefined
+                ? arguments[0].left
+                : typeof arguments[0] !== 'object'
+                    ? arguments[0]
+                    : w.scrollX || w.pageXOffset, arguments[0].top !== undefined
+                ? arguments[0].top
+                : arguments[1] !== undefined
+                    ? arguments[1]
+                    : w.scrollY || w.pageYOffset);
+            return;
+        }
+        smoothScroll.call(w, d.body, arguments[0].left !== undefined
+            ? ~~arguments[0].left
+            : w.scrollX || w.pageXOffset, arguments[0].top !== undefined
+            ? ~~arguments[0].top
+            : w.scrollY || w.pageYOffset);
+    };
+    w.scrollBy = function () {
+        if (arguments[0] === undefined) {
+            return;
+        }
+        if (shouldBailOut(arguments[0])) {
+            original.scrollBy.call(w, arguments[0].left !== undefined
+                ? arguments[0].left
+                : typeof arguments[0] !== 'object'
+                    ? arguments[0]
+                    : 0, arguments[0].top !== undefined
+                ? arguments[0].top
+                : arguments[1] !== undefined
+                    ? arguments[1]
+                    : 0);
+            return;
+        }
+        smoothScroll.call(w, d.body, ~~arguments[0].left + (w.scrollX || w.pageXOffset), ~~arguments[0].top + (w.scrollY || w.pageYOffset));
+    };
+    Element.prototype.scroll = Element.prototype.scrollTo = function () {
+        if (arguments[0] === undefined) {
+            return;
+        }
+        if (shouldBailOut(arguments[0]) === true) {
+            if (typeof arguments[0] === 'number' && arguments[1] === undefined) {
+                throw new SyntaxError('Value could not be converted');
+            }
+            original.elementScroll.call(this, arguments[0].left !== undefined
+                ? ~~arguments[0].left
+                : typeof arguments[0] !== 'object'
+                    ? ~~arguments[0]
+                    : this.scrollLeft, arguments[0].top !== undefined
+                ? ~~arguments[0].top
+                : arguments[1] !== undefined
+                    ? ~~arguments[1]
+                    : this.scrollTop);
+            return;
+        }
+        var left = arguments[0].left;
+        var top = arguments[0].top;
+        smoothScroll.call(this, this, typeof left === 'undefined' ? this.scrollLeft : ~~left, typeof top === 'undefined' ? this.scrollTop : ~~top);
+    };
+    Element.prototype.scrollBy = function () {
+        if (arguments[0] === undefined) {
+            return;
+        }
+        if (shouldBailOut(arguments[0]) === true) {
+            original.elementScroll.call(this, arguments[0].left !== undefined
+                ? ~~arguments[0].left + this.scrollLeft
+                : ~~arguments[0] + this.scrollLeft, arguments[0].top !== undefined
+                ? ~~arguments[0].top + this.scrollTop
+                : ~~arguments[1] + this.scrollTop);
+            return;
+        }
+        this.scroll({
+            left: ~~arguments[0].left + this.scrollLeft,
+            top: ~~arguments[0].top + this.scrollTop,
+            behavior: arguments[0].behavior,
+        });
+    };
+    Element.prototype.scrollIntoView = function () {
+        if (shouldBailOut(arguments[0]) === true) {
+            original.scrollIntoView.call(this, arguments[0] === undefined ? true : arguments[0]);
+            return;
+        }
+        var scrollableParent = findScrollableParent(this);
+        var parentRects = scrollableParent.getBoundingClientRect();
+        var clientRects = this.getBoundingClientRect();
+        if (scrollableParent !== d.body) {
+            smoothScroll.call(this, scrollableParent, scrollableParent.scrollLeft + clientRects.left - parentRects.left, scrollableParent.scrollTop + clientRects.top - parentRects.top);
+            if (w.getComputedStyle(scrollableParent).position !== 'fixed') {
+                w.scrollBy({
+                    left: parentRects.left,
+                    top: parentRects.top,
+                    behavior: 'smooth',
+                });
+            }
+        }
+        else {
+            w.scrollBy({
+                left: clientRects.left,
+                top: clientRects.top,
+                behavior: 'smooth',
+            });
+        }
+    };
+}
+
+export { polyfill };

package/es/rrweb/packages/rrweb/src/replay/styles/inject-style.js

@@ -0,0 +1,8 @@
+var rules = function (blockClass) { return [
+    ".".concat(blockClass, " { background: currentColor }"),
+    'noscript { display: none !important; }',
+    ".".concat(blockClass, " { background: currentColor; border-radius: 5px; }"),
+    ".".concat(blockClass, ":hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}"),
+]; };
+
+export default rules;

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

@@ -0,0 +1,96 @@
+import { __spreadArray, __read } from '../../ext/tslib/tslib.es6.js';
+import { EventType, IncrementalSource } from '../types.js';
+
+var Timer = (function () {
+    function Timer(actions, speed) {
+        if (actions === void 0) { actions = []; }
+        this.timeOffset = 0;
+        this.raf = null;
+        this.actions = actions;
+        this.speed = speed;
+    }
+    Timer.prototype.addAction = function (action) {
+        var index = this.findActionIndex(action);
+        this.actions.splice(index, 0, action);
+    };
+    Timer.prototype.addActions = function (actions) {
+        this.actions = this.actions.concat(actions);
+    };
+    Timer.prototype.replaceActions = function (actions) {
+        var _a;
+        this.actions.length = 0;
+        (_a = this.actions).splice.apply(_a, __spreadArray([0, 0], __read(actions), false));
+    };
+    Timer.prototype.start = function () {
+        this.timeOffset = 0;
+        var lastTimestamp = performance.now();
+        var actions = this.actions;
+        var self = this;
+        function check() {
+            var time = performance.now();
+            self.timeOffset += (time - lastTimestamp) * self.speed;
+            lastTimestamp = time;
+            while (actions.length) {
+                var action = actions[0];
+                if (self.timeOffset >= action.delay) {
+                    actions.shift();
+                    action.doAction();
+                }
+                else {
+                    break;
+                }
+            }
+            if (actions.length > 0 || self.liveMode) {
+                self.raf = requestAnimationFrame(check);
+            }
+        }
+        this.raf = requestAnimationFrame(check);
+    };
+    Timer.prototype.clear = function () {
+        if (this.raf) {
+            cancelAnimationFrame(this.raf);
+            this.raf = null;
+        }
+        this.actions.length = 0;
+    };
+    Timer.prototype.setSpeed = function (speed) {
+        this.speed = speed;
+    };
+    Timer.prototype.toggleLiveMode = function (mode) {
+        this.liveMode = mode;
+    };
+    Timer.prototype.isActive = function () {
+        return this.raf !== null;
+    };
+    Timer.prototype.findActionIndex = function (action) {
+        var start = 0;
+        var end = this.actions.length - 1;
+        while (start <= end) {
+            var mid = Math.floor((start + end) / 2);
+            if (this.actions[mid].delay < action.delay) {
+                start = mid + 1;
+            }
+            else if (this.actions[mid].delay > action.delay) {
+                end = mid - 1;
+            }
+            else {
+                return mid + 1;
+            }
+        }
+        return start;
+    };
+    return Timer;
+}());
+function addDelay(event, baselineTime) {
+    if (event.type === EventType.IncrementalSnapshot &&
+        event.data.source === IncrementalSource.MouseMove) {
+        var firstOffset = event.data.positions[0].timeOffset;
+        var firstTimestamp = event.timestamp + firstOffset;
+        event.delay = firstTimestamp - baselineTime;
+        return firstTimestamp - baselineTime;
+    }
+    event.delay = event.timestamp - baselineTime;
+    return event.delay;
+}
+
+export { Timer, addDelay };