social.io/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Philipp Kunz 2025-01-25 13:38:06 +01:00
parent 8d18e60d22
commit 9f3cdde7eb
3 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
changelog.md
View File

@ -1,5 +1,11 @@
# Changelog # 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) ## 2025-01-25 - 1.2.0 - feat(elements)
Added sio-recorder element for recording and replaying sessions Added sio-recorder element for recording and replaying sessions

2
ts_web/00_commitinfo_data.ts
View File

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

19
ts_web/elements/sio-recorder.ts
View File

@ -115,6 +115,7 @@ export class SioRecorder extends DeesElement {
// Some recommended settings to capture the "complete" page: // Some recommended settings to capture the "complete" page:
recordCanvas: true, // record canvas elements recordCanvas: true, // record canvas elements
recordCrossOriginIframes: true, // attempt capturing cross-origin iframes recordCrossOriginIframes: true, // attempt capturing cross-origin iframes
// checkoutEveryNms: 1000, // check every N milliseconds // checkoutEveryNms: 1000, // check every N milliseconds
}); });
@ -163,10 +164,11 @@ export class SioRecorder extends DeesElement {
public async fixPosition() { public async fixPosition() {
await this.domtoolsPromise; await this.domtoolsPromise;
await this.domtools.convenience.smartdelay.delayFor(0); 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 replayerWrapper = this.shadowRoot.querySelector('.replayer-wrapper') as HTMLElement;
const replayerMouse = this.shadowRoot.querySelector('.replayer-mouse') as HTMLElement; const replayerMouse = this.shadowRoot.querySelector('.replayer-mouse') as HTMLElement;
const replayerMouseTail = this.shadowRoot.querySelector('.replayer-mouse-tail') as HTMLElement; const replayerMouseTail = this.shadowRoot.querySelector('.replayer-mouse-tail') as HTMLElement;
const iframe = this.shadowRoot.querySelector('iframe');
replayerWrapper.style.position = 'absolute'; replayerWrapper.style.position = 'absolute';
replayerWrapper.style.top = '0px'; replayerWrapper.style.top = '0px';
replayerWrapper.style.left = '0px'; replayerWrapper.style.left = '0px';
@ -176,6 +178,21 @@ export class SioRecorder extends DeesElement {
iframe.style.position = 'absolute'; iframe.style.position = 'absolute';
iframe.style.top = '0px'; iframe.style.top = '0px';
iframe.style.left = '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';
} }
/** /**