fix: replace blocked videos with labelled placeholders (#444)

Author: AHB

csr/csr-recorder/src/engine/rrweb-engine.test.ts

@@ -55,7 +55,56 @@ describe('RrwebEngine', () => {
 
   it('applies default blockSelector when blockSelectors is absent', () => {
     new RrwebEngine().start({}, () => {});
-    expect(recordSpy.mock.calls[0][0].blockSelector).toBe('[data-csr-block]');
+    expect(recordSpy.mock.calls[0][0].blockSelector).toBe('[data-csr-block],video');
+  });
+
+  it('rebuilds blocked elements as labelled inert placeholders', () => {
+    new RrwebEngine().start({}, () => {});
+    const plugin = recordSpy.mock.calls[0][0].plugins.find(
+      ({ name }: { name: string }) => name === 'csr/blocked-element-labels@1',
+    );
+    const event = {
+      type: 2,
+      timestamp: 1,
+      data: {
+        node: {
+          type: 0,
+          id: 1,
+          childNodes: [
+            {
+              type: 2,
+              id: 2,
+              tagName: 'video',
+              attributes: { rr_width: '640px', rr_height: '360px' },
+              childNodes: [],
+            },
+          ],
+        },
+      },
+    };
+
+    expect(plugin.eventProcessor(event)).toEqual({
+      ...event,
+      data: {
+        node: {
+          type: 0,
+          id: 1,
+          childNodes: [
+            {
+              type: 2,
+              id: 2,
+              tagName: 'div',
+              attributes: {
+                rr_width: '640px',
+                rr_height: '360px',
+                'data-csr-blocked-element': 'video',
+              },
+              childNodes: [],
+            },
+          ],
+        },
+      },
+    });
   });
 
   it('throttles mousemove to 100ms and records only last input value', () => {

csr/csr-recorder/src/engine/rrweb-engine.ts

@@ -10,6 +10,53 @@ type RrwebPlugin = NonNullable<recordOptions<RecordingEvent>['plugins']>[number]
 
 type ClickModifiers = Pick<MouseEvent, 'button' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'>;
 
+const BLOCKED_ELEMENT_ATTRIBUTE = 'data-csr-blocked-element';
+
+type SerializedNode = {
+  type: number;
+  tagName?: string;
+  attributes?: Record<string, unknown>;
+  childNodes?: SerializedNode[];
+};
+
+function labelBlockedElement(node: SerializedNode): void {
+  const isBlockedElement =
+    node.type === 2 &&
+    node.tagName !== undefined &&
+    node.attributes !== undefined &&
+    typeof node.attributes.rr_width === 'string' &&
+    typeof node.attributes.rr_height === 'string';
+
+  if (isBlockedElement) {
+    node.attributes![BLOCKED_ELEMENT_ATTRIBUTE] = node.tagName;
+    node.tagName = 'div';
+  }
+
+  node.childNodes?.forEach(labelBlockedElement);
+}
+
+/**
+ * rrweb strips blocked elements down to their dimensions, but retains their
+ * original tag name. Rebuild them as inert divs and keep the tag name as safe
+ * metadata so players can render a useful placeholder label.
+ */
+function blockedElementLabelsPlugin(): RrwebPlugin {
+  return {
+    name: 'csr/blocked-element-labels@1',
+    options: {},
+    observer: () => () => {},
+    eventProcessor: event => {
+      if (event.type === EventType.FullSnapshot) {
+        labelBlockedElement(event.data.node as SerializedNode);
+      } else if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.Mutation) {
+        event.data.adds.forEach(add => labelBlockedElement(add.node as SerializedNode));
+      }
+
+      return event;
+    },
+  };
+}
+
 type ClipboardAction = 'copy' | 'cut' | 'paste';
 
 /**
@@ -102,7 +149,7 @@ export class RrwebEngine implements RecordingEngine {
     const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
     const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
 
-    const plugins: RrwebPlugin[] = [clickModifiersPlugin(), clipboardActionsPlugin()];
+    const plugins: RrwebPlugin[] = [clickModifiersPlugin(), clipboardActionsPlugin(), blockedElementLabelsPlugin()];
     const { captureConsoleLogs } = config;
     if (captureConsoleLogs) {
       const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;

csr/csr-recorder/src/types.ts

@@ -6,7 +6,7 @@ export interface RecorderOptions {
 }
 
 export const DEFAULT_MASK_SELECTORS: string[] = ['[data-csr-mask]'];
-export const DEFAULT_BLOCK_SELECTORS: string[] = ['[data-csr-block]'];
+export const DEFAULT_BLOCK_SELECTORS: string[] = ['[data-csr-block]', 'video'];
 
 export interface RecordingConfig {
   /**