Merge pull request #44 from pendo-io/jc-prevent-invalid-media-processing

fix: prevent invalid media processing

Author: pendo-ops

.changeset/tiny-rabbits-chew.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Make sure MediaInteraction events / mutations are only processed on MediaElements + exit early in addMediaElements if a MediaElement is a blocked element

packages/rrweb/src/replay/index.ts

@@ -1311,14 +1311,17 @@ export class Replayer {
           return this.debugNodeNotFound(d, d.id);
         }
         const mediaEl = target as HTMLMediaElement | RRMediaElement;
-        const { events } = this.service.state.context;
-
-        this.mediaManager.mediaMutation({
-          target: mediaEl,
-          timeOffset: e.timestamp - events[0].timestamp,
-          mutation: d,
-        });
-
+        // sometimes we receive MediaInteraction events on non-media elements (e.g. DIV)
+        // only process media mutations on supported media elements to prevent errors during playback
+        if (this.mediaManager.isSupportedMediaElement(mediaEl)) {
+          const { events } = this.service.state.context;
+
+          this.mediaManager.mediaMutation({
+            target: mediaEl,
+            timeOffset: e.timestamp - events[0].timestamp,
+            mutation: d,
+          });
+        }
         break;
       }
       case IncrementalSource.StyleSheetRule:

packages/rrweb/src/replay/media/index.ts

@@ -209,6 +209,12 @@ export class MediaManager {
     const target = node as HTMLMediaElement;
     const serializedNode = mirror.getMeta(target);
     if (!serializedNode || !('attributes' in serializedNode)) return;
+
+    // don't process if the media element is blocked
+    const isBlockedMediaElement =
+      serializedNode.attributes.rr_width || serializedNode.attributes.rr_height;
+    if (isBlockedMediaElement) return;
+
     const playerIsPaused = this.service.state.matches('paused');
     const mediaAttributes = serializedNode.attributes as
       | mediaAttributes
@@ -284,7 +290,9 @@ export class MediaManager {
     this.syncTargetWithState(target);
   }
 
-  public isSupportedMediaElement(node: Node): node is HTMLMediaElement {
+  public isSupportedMediaElement(
+    node: Node | RRMediaElement,
+  ): node is HTMLMediaElement | RRMediaElement {
     return ['AUDIO', 'VIDEO'].includes(node.nodeName);
   }