@posthog/rrweb-player 0.0.24 → 0.0.26

package/dist/rrweb-player.js

@@ -4756,6 +4756,12 @@ function buildNodeWithSN(n2, options) {
         } else {
           node2.appendChild(childNode);
         }
+      } else if (n2.type === NodeType$1$1.Document && childN.type === NodeType$1$1.DocumentType) {
+        if (node2.firstChild && node2.firstChild.nodeType === 1) {
+          node2.insertBefore(childNode, node2.firstChild);
+        } else {
+          node2.appendChild(childNode);
+        }
       } else {
         node2.appendChild(childNode);
       }
@@ -11735,6 +11741,11 @@ class Replayer {
     __publicField2(this, "lastSelectionData", null);
     __publicField2(this, "constructedStyleMutations", []);
     __publicField2(this, "adoptedStyleSheets", []);
+    __publicField2(this, "emitterHandlers", []);
+    __publicField2(this, "serviceSubscription");
+    __publicField2(this, "speedServiceSubscription");
+    __publicField2(this, "timeouts", /* @__PURE__ */ new Set());
+    __publicField2(this, "styleSheetLoadListeners", /* @__PURE__ */ new Map());
     __publicField2(this, "handleResize", (dimension) => {
       this.iframe.style.display = "inherit";
       for (const el of [this.mouseTail, this.iframe]) {
@@ -11894,12 +11905,12 @@ class Replayer {
     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.addEmitterHandler(ReplayerEvents.Resize, this.handleResize);
     this.setupDom();
     for (const plugin of this.config.plugins || []) {
       if (plugin.getMirror) plugin.getMirror({ nodeMirror: this.mirror });
     }
-    this.emitter.on(ReplayerEvents.Flush, () => {
+    const flushHandler = () => {
       if (this.usingVirtualDom) {
         const replayerHandler = {
           mirror: this.mirror,
@@ -11995,13 +12006,15 @@ class Replayer {
         this.applySelection(this.lastSelectionData);
         this.lastSelectionData = null;
       }
-    });
-    this.emitter.on(ReplayerEvents.PlayBack, () => {
+    };
+    this.addEmitterHandler(ReplayerEvents.Flush, flushHandler);
+    const playBackHandler = () => {
       this.firstFullSnapshot = null;
       this.mirror.reset();
       this.styleMirror.reset();
       this.mediaManager.reset();
-    });
+    };
+    this.addEmitterHandler(ReplayerEvents.PlayBack, playBackHandler);
     const timer = new Timer([], {
       speed: this.config.speed
     });
@@ -12025,7 +12038,7 @@ class Replayer {
       }
     );
     this.service.start();
-    this.service.subscribe((state) => {
+    this.serviceSubscription = this.service.subscribe((state) => {
       this.emitter.emit(ReplayerEvents.StateChange, {
         player: state
       });
@@ -12035,7 +12048,7 @@ class Replayer {
       timer
     });
     this.speedService.start();
-    this.speedService.subscribe((state) => {
+    this.speedServiceSubscription = this.speedService.subscribe((state) => {
       this.emitter.emit(ReplayerEvents.StateChange, {
         speed: state
       });
@@ -12055,7 +12068,7 @@ class Replayer {
     );
     if (firstMeta) {
       const { width, height } = firstMeta.data;
-      setTimeout(() => {
+      this.addTimeout(() => {
         this.emitter.emit(ReplayerEvents.Resize, {
           width,
           height
@@ -12063,7 +12076,7 @@ class Replayer {
       }, 0);
     }
     if (firstFullsnapshot) {
-      setTimeout(() => {
+      this.addTimeout(() => {
         var _a2;
         if (this.firstFullSnapshot) {
           return;
@@ -12092,6 +12105,24 @@ class Replayer {
     this.emitter.off(event, handler);
     return this;
   }
+  /**
+   * Track emitter handlers for cleanup
+   */
+  addEmitterHandler(event, handler) {
+    this.emitter.on(event, handler);
+    this.emitterHandlers.push({ event, handler });
+  }
+  /**
+   * Track timeouts for cleanup
+   */
+  addTimeout(callback, delay) {
+    const timeout = setTimeout(() => {
+      this.timeouts.delete(timeout);
+      callback();
+    }, delay);
+    this.timeouts.add(timeout);
+    return timeout;
+  }
   setConfig(config) {
     Object.keys(config).forEach((key) => {
       config[key];
@@ -12194,10 +12225,31 @@ class Replayer {
    * Memory occupation can be released by removing all references to this replayer.
    */
   destroy() {
+    var _a2, _b2;
+    if (!this.wrapper || !this.wrapper.parentNode) {
+      return;
+    }
     this.pause();
+    this.emitterHandlers.forEach(({ event, handler }) => {
+      this.emitter.off(event, handler);
+    });
+    this.emitterHandlers = [];
+    (_a2 = this.serviceSubscription) == null ? void 0 : _a2.unsubscribe();
+    (_b2 = this.speedServiceSubscription) == null ? void 0 : _b2.unsubscribe();
+    this.serviceSubscription = void 0;
+    this.speedServiceSubscription = void 0;
+    this.timeouts.forEach((timeout) => clearTimeout(timeout));
+    this.timeouts.clear();
+    this.styleSheetLoadListeners.forEach((handler, element2) => {
+      element2.removeEventListener("load", handler);
+    });
+    this.styleSheetLoadListeners.clear();
+    this.imageMap.clear();
+    this.canvasEventMap.clear();
     this.mirror.reset();
     this.styleMirror.reset();
     this.mediaManager.reset();
+    this.resetCache();
     this.config.root.removeChild(this.wrapper);
     this.emitter.emit(ReplayerEvents.Destroy);
   }