fix(sio-recorder): solve full checkouts for consistent recordings

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2025-01-26 - 1.2.2 - fix(sio-recorder)
+Fixed the recording loop and ensured it stops correctly
+
+- Added an await for domtoolsPromise in startRecording method.
+- Introduced a while loop to manage the recording status effectively.
+- Added delay and stop function call within the loop to manage record sessions.
+
 ## 2025-01-25 - 1.2.1 - fix(sio-recorder)
 Enhance styling and positioning for rrweb player elements in SioRecorder component.
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@social.io/catalog',
-  version: '1.2.1',
+  version: '1.2.2',
   description: 'catalog for social.io'
 }

ts_web/elements/sio-recorder.ts

@@ -32,6 +32,11 @@ export class SioRecorder extends DeesElement {
    */
   private events: IRecordingEvent[] = [];
 
+  /**
+   * status
+   */
+  public status: 'recording' | 'playing' | 'stopped' = 'stopped';
+
   /**
    * A reference to rrweb's stop recording function.
    * We'll store it when we begin a record session so we can call it later.
@@ -59,9 +64,7 @@ export class SioRecorder extends DeesElement {
   `;
 
   render() {
-    return html`
-      <div id="playback"></div>
-    `;
+    return html` <div id="playback"></div> `;
   }
 
   /**
@@ -101,23 +104,29 @@ export class SioRecorder extends DeesElement {
    * Starts an rrweb recording session that tracks the entire DOM,
    * including canvases and cross-origin iframes (if permissible).
    */
-  private startRecording(): void {
+  private async startRecording(): void {
+    await this.domtoolsPromise;
+    this.status = 'recording';
     this.events = [];
 
     // For capturing "everything," enable advanced flags:
-    this.stopFn = rrweb.record({
-      emit: (event: any) => {
-        // If you have a stricter type: 
-        //   this.events.push(event as IRecordingEvent);
-        // else store as any:
-        this.events.push(event);
-      },
-      // Some recommended settings to capture the "complete" page:
-      recordCanvas: true,            // record canvas elements
-      recordCrossOriginIframes: true, // attempt capturing cross-origin iframes
+    while (this.status === 'recording') {
+      this.stopFn = rrweb.record({
+        emit: (event: any) => {
+          // If you have a stricter type:
+          //   this.events.push(event as IRecordingEvent);
+          // else store as any:
+          this.events.push(event);
+        },
+        // Some recommended settings to capture the "complete" page:
+        recordCanvas: true, // record canvas elements
+        recordCrossOriginIframes: true, // attempt capturing cross-origin iframes
 
-      // checkoutEveryNms: 1000,        // check every N milliseconds
-    });
+        // checkoutEveryNms: 1000,        // check every N milliseconds
+      });
+      await this.domtools.convenience.smartdelay.delayFor(1000);
+      await this.stopFn();
+    }
 
     console.log('Recording has started...');
   }
@@ -139,7 +148,7 @@ export class SioRecorder extends DeesElement {
   private async playRecording(): Promise<void> {
     await this.domtoolsPromise;
     if (!this.playbackDiv) return;
-    const replayer =new rrwebPlayer({
+    const replayer = new rrwebPlayer({
       target: this.playbackDiv, // customizable root element
       props: {
         events: this.events as any,
@@ -147,7 +156,6 @@ export class SioRecorder extends DeesElement {
         showController: false,
         width: this.playbackDiv.offsetWidth,
         height: this.playbackDiv.offsetHeight,
-
       },
     });
     this.domtools.convenience.smartdelay.delayFor(0).then(async () => {