@highlight-run/rrweb 2.0.16 → 2.0.19

package/es/rrweb/all.css

@@ -1 +1 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
+.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}.rr-player{position:relative;background:#fff;float:left;border-radius:5px;box-shadow:0 24px 48px rgba(17,16,62,.12)}.rr-player__frame{overflow:hidden}

package/es/rrweb/packages/rrdom/es/rrdom.js

@@ -633,10 +633,6 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
         const oldEndId = replayer.mirror.getId(oldEndNode);
         const newStartId = rrnodeMirror.getId(newStartNode);
         const newEndId = rrnodeMirror.getId(newEndNode);
-        console.log('oldStartId', oldStartId);
-        console.log('oldEndId', oldEndId);
-        console.log('newStartId', newStartId);
-        console.log('newEndId', newEndId);
         if (oldStartNode === undefined) {
             oldStartNode = oldChildren[++oldStartIndex];
         }

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

@@ -1,4 +1,4 @@
-import { createMirror, snapshot } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
+import { createMirror, obfuscateText, snapshot } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
 import { initObservers, mutationBuffers } from './observer.js';
 import { polyfill, on, getWindowWidth, getWindowHeight, isSerializedIframe, isSerializedStylesheet, hasShadowRoot } from '../utils.js';
 import { EventType, IncrementalSource } from '../types.js';
@@ -14,7 +14,7 @@ let wrappedEmit;
 let takeFullSnapshot;
 const mirror = createMirror();
 function record(options = {}) {
-    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
+    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn = obfuscateText, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
     if (!emit) {
         throw new Error('emit function is required');
     }
@@ -149,7 +149,7 @@ function record(options = {}) {
             stylesheetManager,
             canvasManager,
             keepIframeSrcFn,
-            enableStrictPrivacy
+            enableStrictPrivacy,
         },
         mirror,
     });

package/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js

@@ -107,6 +107,9 @@ class CanvasManager {
                         context === null || context === void 0 ? void 0 : context.clear(context.COLOR_BUFFER_BIT);
                     }
                 }
+                if (canvas.width === 0 || canvas.height === 0) {
+                    return;
+                }
                 const bitmap = yield createImageBitmap(canvas);
                 worker.postMessage({
                     id,

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

@@ -1,5 +1,4 @@
 const rules = (blockClass) => [
-    `.${blockClass} { background: currentColor }`,
     'noscript { display: none !important; }',
     `.${blockClass} { background: currentColor; border-radius: 5px; }`,
     `.${blockClass}:hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}`,

package/lib/record/rrweb-record.js

@@ -2976,6 +2976,9 @@ class CanvasManager {
                         context === null || context === void 0 ? void 0 : context.clear(context.COLOR_BUFFER_BIT);
                     }
                 }
+                if (canvas.width === 0 || canvas.height === 0) {
+                    return;
+                }
                 const bitmap = yield createImageBitmap(canvas);
                 worker.postMessage({
                     id,
@@ -3075,7 +3078,7 @@ let wrappedEmit;
 let takeFullSnapshot;
 const mirror = createMirror();
 function record(options = {}) {
-    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
+    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn = obfuscateText, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
     if (!emit) {
         throw new Error('emit function is required');
     }
@@ -3210,7 +3213,7 @@ function record(options = {}) {
             stylesheetManager,
             canvasManager,
             keepIframeSrcFn,
-            enableStrictPrivacy
+            enableStrictPrivacy,
         },
         mirror,
     });

package/lib/replay/rrweb-replay-unpack.css

@@ -1 +1 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
+.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}.rr-player{position:relative;background:#fff;float:left;border-radius:5px;box-shadow:0 24px 48px rgba(17,16,62,.12)}.rr-player__frame{overflow:hidden}

package/lib/replay/rrweb-replay-unpack.js

@@ -1552,10 +1552,6 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
         const oldEndId = replayer.mirror.getId(oldEndNode);
         const newStartId = rrnodeMirror.getId(newStartNode);
         const newEndId = rrnodeMirror.getId(newEndNode);
-        console.log('oldStartId', oldStartId);
-        console.log('oldEndId', oldEndId);
-        console.log('newStartId', newStartId);
-        console.log('newEndId', newEndId);
         if (oldStartNode === undefined) {
             oldStartNode = oldChildren[++oldStartIndex];
         }
@@ -2925,7 +2921,6 @@ function uniqueTextMutations(mutations) {
 }
 
 const rules = (blockClass) => [
-    `.${blockClass} { background: currentColor }`,
     'noscript { display: none !important; }',
     `.${blockClass} { background: currentColor; border-radius: 5px; }`,
     `.${blockClass}:hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}`,

package/lib/replay/rrweb-replay.css

@@ -1 +1 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
+.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}.rr-player{position:relative;background:#fff;float:left;border-radius:5px;box-shadow:0 24px 48px rgba(17,16,62,.12)}.rr-player__frame{overflow:hidden}

package/lib/replay/rrweb-replay.js

@@ -1552,10 +1552,6 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
         const oldEndId = replayer.mirror.getId(oldEndNode);
         const newStartId = rrnodeMirror.getId(newStartNode);
         const newEndId = rrnodeMirror.getId(newEndNode);
-        console.log('oldStartId', oldStartId);
-        console.log('oldEndId', oldEndId);
-        console.log('newStartId', newStartId);
-        console.log('newEndId', newEndId);
         if (oldStartNode === undefined) {
             oldStartNode = oldChildren[++oldStartIndex];
         }
@@ -2925,7 +2921,6 @@ function uniqueTextMutations(mutations) {
 }
 
 const rules = (blockClass) => [
-    `.${blockClass} { background: currentColor }`,
     'noscript { display: none !important; }',
     `.${blockClass} { background: currentColor; border-radius: 5px; }`,
     `.${blockClass}:hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}`,

package/lib/rrweb-all.css

@@ -1 +1 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
+.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}.rr-player{position:relative;background:#fff;float:left;border-radius:5px;box-shadow:0 24px 48px rgba(17,16,62,.12)}.rr-player__frame{overflow:hidden}

package/lib/rrweb-all.js

@@ -3937,6 +3937,9 @@ class CanvasManager {
                         context === null || context === void 0 ? void 0 : context.clear(context.COLOR_BUFFER_BIT);
                     }
                 }
+                if (canvas.width === 0 || canvas.height === 0) {
+                    return;
+                }
                 const bitmap = yield createImageBitmap(canvas);
                 worker.postMessage({
                     id,
@@ -4036,7 +4039,7 @@ let wrappedEmit;
 let takeFullSnapshot;
 const mirror = createMirror$2();
 function record(options = {}) {
-    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
+    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn = obfuscateText, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
     if (!emit) {
         throw new Error('emit function is required');
     }
@@ -4171,7 +4174,7 @@ function record(options = {}) {
             stylesheetManager,
             canvasManager,
             keepIframeSrcFn,
-            enableStrictPrivacy
+            enableStrictPrivacy,
         },
         mirror,
     });
@@ -5015,10 +5018,6 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
         const oldEndId = replayer.mirror.getId(oldEndNode);
         const newStartId = rrnodeMirror.getId(newStartNode);
         const newEndId = rrnodeMirror.getId(newEndNode);
-        console.log('oldStartId', oldStartId);
-        console.log('oldEndId', oldEndId);
-        console.log('newStartId', newStartId);
-        console.log('newEndId', newEndId);
         if (oldStartNode === undefined) {
             oldStartNode = oldChildren[++oldStartIndex];
         }
@@ -6158,7 +6157,6 @@ function createSpeedService(context) {
 }
 
 const rules = (blockClass) => [
-    `.${blockClass} { background: currentColor }`,
     'noscript { display: none !important; }',
     `.${blockClass} { background: currentColor; border-radius: 5px; }`,
     `.${blockClass}:hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}`,

package/lib/rrweb.css

@@ -1 +1 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
+.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}.rr-player{position:relative;background:#fff;float:left;border-radius:5px;box-shadow:0 24px 48px rgba(17,16,62,.12)}.rr-player__frame{overflow:hidden}

package/lib/rrweb.js

@@ -3937,6 +3937,9 @@ class CanvasManager {
                         context === null || context === void 0 ? void 0 : context.clear(context.COLOR_BUFFER_BIT);
                     }
                 }
+                if (canvas.width === 0 || canvas.height === 0) {
+                    return;
+                }
                 const bitmap = yield createImageBitmap(canvas);
                 worker.postMessage({
                     id,
@@ -4036,7 +4039,7 @@ let wrappedEmit;
 let takeFullSnapshot;
 const mirror = createMirror$2();
 function record(options = {}) {
-    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
+    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn = obfuscateText, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
     if (!emit) {
         throw new Error('emit function is required');
     }
@@ -4171,7 +4174,7 @@ function record(options = {}) {
             stylesheetManager,
             canvasManager,
             keepIframeSrcFn,
-            enableStrictPrivacy
+            enableStrictPrivacy,
         },
         mirror,
     });
@@ -5015,10 +5018,6 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
         const oldEndId = replayer.mirror.getId(oldEndNode);
         const newStartId = rrnodeMirror.getId(newStartNode);
         const newEndId = rrnodeMirror.getId(newEndNode);
-        console.log('oldStartId', oldStartId);
-        console.log('oldEndId', oldEndId);
-        console.log('newStartId', newStartId);
-        console.log('newEndId', newEndId);
         if (oldStartNode === undefined) {
             oldStartNode = oldChildren[++oldStartIndex];
         }
@@ -6158,7 +6157,6 @@ function createSpeedService(context) {
 }
 
 const rules = (blockClass) => [
-    `.${blockClass} { background: currentColor }`,
     'noscript { display: none !important; }',
     `.${blockClass} { background: currentColor; border-radius: 5px; }`,
     `.${blockClass}:hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "2.0.16",
+  "version": "2.0.19",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -74,7 +74,7 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "@highlight-run/rrdom": ">=0.1.13",
+    "@highlight-run/rrdom": ">=0.1.14",
     "@highlight-run/rrweb-snapshot": ">=1.1.22",
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
@@ -82,5 +82,5 @@
     "fflate": "^0.4.4",
     "mitt": "^1.1.3"
   },
-  "gitHead": "563c1119c1eb935ab8dd07b1893143e5b2e4e59d"
+  "gitHead": "5970e6ace1e9ad241df8bf928c85577cdcf8f9d8"
 }