From 1d799532e9e8323df6b443468a13ad75e130bc1e Mon Sep 17 00:00:00 2001
From: Philipp Kunz <gitlab@philkunz.com>
Date: Sun, 26 Jan 2025 20:48:32 +0100
Subject: [PATCH] fix(sio-recorder): solve full checkouts for consistent
 recordings

---
 changelog.md                    |  7 +++++
 ts_web/00_commitinfo_data.ts    |  2 +-
 ts_web/elements/sio-recorder.ts | 50 +++++++++++++++++++--------------
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/changelog.md b/changelog.md
index e9f71cc..d2d04c9 100644
--- a/changelog.md
+++ b/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.
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 7cd2ae4..9f9b6aa 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/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'
 }
diff --git a/ts_web/elements/sio-recorder.ts b/ts_web/elements/sio-recorder.ts
index 2cfb5c0..8fc1392 100644
--- a/ts_web/elements/sio-recorder.ts
+++ b/ts_web/elements/sio-recorder.ts
@@ -19,7 +19,7 @@ const rrwebPlayer: typeof rrwebPlayerMod.default = rrwebPlayerMod as any;
  *   export interface IRecordingEvent extends eventWithTime {}
  *
  * Here, for brevity, we define an empty interface
- * and cast all events to any. 
+ * and cast all events to any.
  */
 export interface IRecordingEvent {}
 
@@ -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
-      
-      // checkoutEveryNms: 1000,        // check every N milliseconds
-    });
+    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
+      });
+      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 () => {
@@ -202,4 +210,4 @@ export class SioRecorder extends DeesElement {
     this.stopRecording();
     this.playRecording();
   };
-}
\ No newline at end of file
+}