diff --git a/changelog.md b/changelog.md index 80bd94f..e9f71cc 100644 --- a/changelog.md +++ b/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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index c7cdfa8..7cd2ae4 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.0', + version: '1.2.1', description: 'catalog for social.io' } diff --git a/ts_web/elements/sio-recorder.ts b/ts_web/elements/sio-recorder.ts index 48d1770..2cfb5c0 100644 --- a/ts_web/elements/sio-recorder.ts +++ b/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'; } /**