Compare commits
8 Commits
Author | SHA1 | Date | |
---|---|---|---|
b49707a727 | |||
2ea29cffbb | |||
8e18898542 | |||
7e7608c63a | |||
4cf9f3cd77 | |||
1d799532e9 | |||
39e94a11f8 | |||
9f3cdde7eb |
26
changelog.md
26
changelog.md
@@ -1,5 +1,31 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-04-20 - 1.2.4 - fix(build)
|
||||
Update build script and async function signature
|
||||
|
||||
- Added '--skiplibcheck' flag to the tsbuild command in package.json
|
||||
- Changed startRecording return type to Promise<void> in ts_web/elements/sio-recorder.ts for proper async handling
|
||||
|
||||
## 2025-04-20 - 1.2.3 - fix(core)
|
||||
Update dependency versions and adjust UI CSS for fab and combox elements
|
||||
|
||||
- Bumped @design.estate/dees-catalog, dees-domtools, dees-element, and @social.io/interfaces to newer versions in package.json
|
||||
- Updated devDependencies to latest compatible versions
|
||||
- Adjusted CSS positioning in sio-fab and sio-combox for improved layout
|
||||
|
||||
## 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.
|
||||
|
||||
- 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
|
||||
|
||||
|
29
package.json
29
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@social.io/catalog",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.4",
|
||||
"private": false,
|
||||
"description": "catalog for social.io",
|
||||
"main": "dist_ts_web/index.js",
|
||||
@@ -8,33 +8,33 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "tstest test/",
|
||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
|
||||
"build": "tsbuild tsfolders --allowimplicitany --skiplibcheck && tsbundle element --production",
|
||||
"watch": "tswatch element",
|
||||
"buildDocs": "tsdoc"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@design.estate/dees-catalog": "^1.2.0",
|
||||
"@design.estate/dees-domtools": "^2.0.64",
|
||||
"@design.estate/dees-element": "^2.0.39",
|
||||
"@design.estate/dees-catalog": "^1.5.6",
|
||||
"@design.estate/dees-domtools": "^2.3.2",
|
||||
"@design.estate/dees-element": "^2.0.42",
|
||||
"@design.estate/dees-wcctools": "^1.0.90",
|
||||
"@losslessone_private/loint-pubapi": "^1.0.14",
|
||||
"@social.io/interfaces": "^1.0.5",
|
||||
"@social.io/interfaces": "^1.2.1",
|
||||
"rrweb": "2.0.0-alpha.4",
|
||||
"rrweb-player": "1.0.0-alpha.4",
|
||||
"rrweb-snapshot": "2.0.0-alpha.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^2.1.84",
|
||||
"@git.zone/tsbundle": "^2.0.15",
|
||||
"@git.zone/tsrun": "^1.2.49",
|
||||
"@git.zone/tstest": "^1.0.90",
|
||||
"@git.zone/tswatch": "^2.0.23",
|
||||
"@git.zone/tsbuild": "^2.3.2",
|
||||
"@git.zone/tsbundle": "^2.2.5",
|
||||
"@git.zone/tsrun": "^1.3.3",
|
||||
"@git.zone/tstest": "^1.0.96",
|
||||
"@git.zone/tswatch": "^2.1.0",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@push.rocks/smartenv": "^5.0.12",
|
||||
"@push.rocks/tapbundle": "^5.3.0",
|
||||
"@types/node": "^22.7.5"
|
||||
"@push.rocks/tapbundle": "^5.6.3",
|
||||
"@types/node": "^22.14.1"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
@@ -58,5 +58,6 @@
|
||||
"bugs": {
|
||||
"url": "https://gitlab.com/social.io/private/catalog/issues"
|
||||
},
|
||||
"homepage": "https://gitlab.com/social.io/private/catalog#readme"
|
||||
"homepage": "https://gitlab.com/social.io/private/catalog#readme",
|
||||
"packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
|
||||
}
|
||||
|
6896
pnpm-lock.yaml
generated
6896
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@social.io/catalog',
|
||||
version: '1.2.0',
|
||||
version: '1.2.4',
|
||||
description: 'catalog for social.io'
|
||||
}
|
||||
|
@@ -4,6 +4,7 @@ import {
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
@@ -124,7 +125,7 @@ export class SioCombox extends DeesElement {
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
|
||||
background-image: linear-gradient(to bottom, ${cssManager.bdTheme('#eeeeeb00', 'rgba(0, 0, 0, 0)')} 0%, ${cssManager.bdTheme('#eeeeebff', 'rgba(0, 0, 0, 1)')} 50%);
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
|
@@ -120,7 +120,9 @@ export class SioFab extends DeesElement {
|
||||
height: 100%;
|
||||
font-size: 32px;
|
||||
color: ${cssManager.bdTheme('#777', '#999')};
|
||||
top: 2px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
#mainbox .icon.close dees-icon {
|
||||
@@ -128,6 +130,8 @@ export class SioFab extends DeesElement {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
color: ${cssManager.bdTheme('#666', '#CCC')};
|
||||
}
|
||||
|
||||
|
@@ -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,22 +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(): Promise<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...');
|
||||
}
|
||||
@@ -138,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,
|
||||
@@ -146,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 () => {
|
||||
@@ -163,10 +172,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 +186,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';
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -185,4 +210,4 @@ export class SioRecorder extends DeesElement {
|
||||
this.stopRecording();
|
||||
this.playRecording();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user