fix(sio-recorder): Enhance styling and positioning for rrweb player elements in SioRecorder component.

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2025-01-25 - 1.2.1 - fix(sio-recorder)
+Enhance styling and positioning for rrweb player elements in SioRecorder component.
+
+- Fixed positioning and added styling for the replayer mouse and iframe in the SioRecorder component.
+- Ensured compatibility with cross-origin iframes.
+
 ## 2025-01-25 - 1.2.0 - feat(elements)
 Added sio-recorder element for recording and replaying sessions
 

ts_web/00_commitinfo_data.ts

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

ts_web/elements/sio-recorder.ts

@@ -115,6 +115,7 @@ export class SioRecorder extends DeesElement {
       // 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
     });
 
@@ -163,10 +164,11 @@ export class SioRecorder extends DeesElement {
   public async fixPosition() {
     await this.domtoolsPromise;
     await this.domtools.convenience.smartdelay.delayFor(0);
-    const iframe = this.shadowRoot.querySelector('iframe');
+    const playbackDiv = this.shadowRoot.querySelector('#playback') as HTMLElement;
     const replayerWrapper = this.shadowRoot.querySelector('.replayer-wrapper') as HTMLElement;
     const replayerMouse = this.shadowRoot.querySelector('.replayer-mouse') as HTMLElement;
     const replayerMouseTail = this.shadowRoot.querySelector('.replayer-mouse-tail') as HTMLElement;
+    const iframe = this.shadowRoot.querySelector('iframe');
     replayerWrapper.style.position = 'absolute';
     replayerWrapper.style.top = '0px';
     replayerWrapper.style.left = '0px';
@@ -176,6 +178,21 @@ export class SioRecorder extends DeesElement {
     iframe.style.position = 'absolute';
     iframe.style.top = '0px';
     iframe.style.left = '0px';
+    iframe.style.border = 'none';
+
+    // set z-index
+    replayerWrapper.style.zIndex = '1000';
+    iframe.style.zIndex = '1000';
+    replayerMouse.style.zIndex = '1002';
+    replayerMouseTail.style.zIndex = '1001';
+
+    // lets show a mouse cursor
+    replayerMouse.style.width = '10px';
+    replayerMouse.style.height = '10px';
+    replayerMouse.style.background = 'green';
+    replayerMouse.style.transform = 'translate(-50%, -50%)';
+    replayerMouse.style.borderRadius = '50%';
+    replayerMouse.style.border = '1px solid white';
   }
 
   /**