diff --git a/packages/rrdom-nodejs/CHANGELOG.md b/packages/rrdom-nodejs/CHANGELOG.md index 05291913b1..b198d1467e 100644 --- a/packages/rrdom-nodejs/CHANGELOG.md +++ b/packages/rrdom-nodejs/CHANGELOG.md @@ -1,5 +1,13 @@ # rrdom-nodejs +## 2.0.12 + +### Patch Changes + +- Updated dependencies []: + - @saola.ai/rrweb-snapshot@2.0.12 + - @saola.ai/rrdom@2.0.12 + ## 2.0.11 ### Patch Changes diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json index 3b92d66f32..a320ae33d5 100644 --- a/packages/rrdom-nodejs/package.json +++ b/packages/rrdom-nodejs/package.json @@ -1,6 +1,6 @@ { "name": "@saola.ai/rrdom-nodejs", - "version": "2.0.11", + "version": "2.0.12", "scripts": { "dev": "vite build --watch", "build": "tsc -noEmit && vite build", @@ -55,8 +55,8 @@ "cssom": "^0.5.0", "cssstyle": "^2.3.0", "nwsapi": "^2.2.0", - "@saola.ai/rrdom": "^2.0.11", - "@saola.ai/rrweb-snapshot": "^2.0.11" + "@saola.ai/rrdom": "^2.0.12", + "@saola.ai/rrweb-snapshot": "^2.0.12" }, "browserslist": [ "supports es6-class" diff --git a/packages/rrdom/CHANGELOG.md b/packages/rrdom/CHANGELOG.md index 6f69c3a435..03521ab112 100644 --- a/packages/rrdom/CHANGELOG.md +++ b/packages/rrdom/CHANGELOG.md @@ -1,5 +1,12 @@ # rrdom +## 2.0.12 + +### Patch Changes + +- Updated dependencies []: + - @saola.ai/rrweb-snapshot@2.0.12 + ## 2.0.11 ### Patch Changes diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json index 0331d22492..23a4e8e32c 100644 --- a/packages/rrdom/package.json +++ b/packages/rrdom/package.json @@ -1,6 +1,6 @@ { "name": "@saola.ai/rrdom", - "version": "2.0.11", + "version": "2.0.12", "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/rrdom#readme", "license": "MIT", "type": "module", @@ -41,7 +41,7 @@ "url": "https://github.com/rrweb-io/rrweb/issues" }, "devDependencies": { - "@saola.ai/rrweb-types": "^2.0.11", + "@saola.ai/rrweb-types": "^2.0.12", "@types/puppeteer": "^5.4.4", "@typescript-eslint/eslint-plugin": "^5.23.0", "@typescript-eslint/parser": "^5.23.0", @@ -52,6 +52,6 @@ "vite-plugin-dts": "^3.8.1" }, "dependencies": { - "@saola.ai/rrweb-snapshot": "^2.0.11" + "@saola.ai/rrweb-snapshot": "^2.0.12" } } diff --git a/packages/rrvideo/CHANGELOG.md b/packages/rrvideo/CHANGELOG.md index 5da7ad347f..88bbeb1527 100644 --- a/packages/rrvideo/CHANGELOG.md +++ b/packages/rrvideo/CHANGELOG.md @@ -1,5 +1,12 @@ # rrvideo +## 2.0.12 + +### Patch Changes + +- Updated dependencies []: + - @saola.ai/rrweb-player@2.0.12 + ## 2.0.11 ### Patch Changes diff --git a/packages/rrvideo/package.json b/packages/rrvideo/package.json index d9a03e80da..804b66ba3a 100644 --- a/packages/rrvideo/package.json +++ b/packages/rrvideo/package.json @@ -1,6 +1,6 @@ { "name": "@saola.ai/rrvideo", - "version": "2.0.11", + "version": "2.0.12", "description": "transform rrweb session into video", "main": "build/index.js", "bin": { @@ -27,13 +27,13 @@ "@types/node": "^18.15.11", "jest": "^27.5.1", "ts-jest": "^27.1.3", - "@saola.ai/rrweb-types": "^2.0.11" + "@saola.ai/rrweb-types": "^2.0.12" }, "dependencies": { "@open-tech-world/cli-progress-bar": "^2.0.2", "fs-extra": "^11.1.1", "minimist": "^1.2.5", "playwright": "^1.32.1", - "@saola.ai/rrweb-player": "^2.0.11" + "@saola.ai/rrweb-player": "^2.0.12" } } diff --git a/packages/rrweb-player/CHANGELOG.md b/packages/rrweb-player/CHANGELOG.md index acf6ff7b20..92aa1f29ed 100644 --- a/packages/rrweb-player/CHANGELOG.md +++ b/packages/rrweb-player/CHANGELOG.md @@ -1,5 +1,11 @@ # rrweb-player +## 2.0.12 + +### Patch Changes + +- [DEV-1066] Test editor select timestamp (Range editing) + ## 2.0.11 ## 2.0.10 diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json index 34621f15ee..8d6ea74f16 100644 --- a/packages/rrweb-player/package.json +++ b/packages/rrweb-player/package.json @@ -1,8 +1,8 @@ { "name": "@saola.ai/rrweb-player", - "version": "2.0.11", + "version": "2.0.12", "devDependencies": { - "@saola.ai/rrweb-types": "^2.0.11", + "@saola.ai/rrweb-types": "^2.0.12", "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/package": "^2.0.0", diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte index 42808082ba..c59be612e4 100644 --- a/packages/rrweb-player/src/Controller.svelte +++ b/packages/rrweb-player/src/Controller.svelte @@ -87,11 +87,14 @@ * we are only interested in custom event and calculate it's position * to place it in player's timeline. */ + if (context.rangeStart && event.timestamp < context.rangeStart || context.rangeEnd && event.timestamp > context.rangeEnd) { + return; + } if (event.type === EventType.Custom) { const customEvent = { name: event.data.tag, background: tags[event.data.tag] || 'rgb(73, 80, 246)', - position: `${position(start, end, event.timestamp)}%`, + position: `${position(context.rangeStart || start, context.rangeEnd || end, event.timestamp)}%`, }; customEvents.push(customEvent); } @@ -110,6 +113,9 @@ const buildInactivePeriods = () => { try { const { context } = replayer.service.state; + if (context.rangeStart || context.rangeEnd) { + return []; + } const totalEvents = context.events.length; const start = context.events[0].timestamp; const end = context.events[totalEvents - 1].timestamp; @@ -285,9 +291,13 @@ skipInactive = !skipInactive; }; - export const triggerUpdateMeta = () => { + export const triggerUpdateMeta = (rangeStart?: number, rangeEnd?: number) => { return Promise.resolve().then(() => { - meta = replayer.getMetaData(); + if (rangeStart && rangeEnd) { + currentTime = 0; + } + + meta = replayer.getMetaData(rangeStart, rangeEnd); }); }; @@ -438,6 +448,7 @@
{formatTime(currentTime)} +
{ + await controller.triggerUpdateMeta(rangeStart, rangeEnd); + controller.triggerUpdateProgress(); + }; + export const refreshProgress: RRwebPlayerExpose["refreshProgress"] = () => { controller.triggerUpdateProgress(); } diff --git a/packages/rrweb-player/src/types.ts b/packages/rrweb-player/src/types.ts index 258ed70db0..262dedf49f 100644 --- a/packages/rrweb-player/src/types.ts +++ b/packages/rrweb-player/src/types.ts @@ -77,6 +77,10 @@ export type RRwebPlayerExpose = { setDims: (width: number, height: number) => void; setDimsAndScale: (width: number, height: number) => void; refreshProgress: () => void; + updatePlayRanges: ( + rangeStart: number | undefined, + rangeEnd: number | undefined, + ) => void; destroy: () => void; play: () => void; pause: () => void; diff --git a/packages/rrweb-snapshot/CHANGELOG.md b/packages/rrweb-snapshot/CHANGELOG.md index eeaf174cf8..a0752b4f0a 100644 --- a/packages/rrweb-snapshot/CHANGELOG.md +++ b/packages/rrweb-snapshot/CHANGELOG.md @@ -1,5 +1,7 @@ # rrweb-snapshot +## 2.0.12 + ## 2.0.11 ## 2.0.10 diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json index ea540a4de8..0f8d24b45e 100644 --- a/packages/rrweb-snapshot/package.json +++ b/packages/rrweb-snapshot/package.json @@ -1,6 +1,6 @@ { "name": "@saola.ai/rrweb-snapshot", - "version": "2.0.11", + "version": "2.0.12", "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer", "scripts": { "prepare": "npm run prepack", diff --git a/packages/rrweb/CHANGELOG.md b/packages/rrweb/CHANGELOG.md index 8ab9885c7e..8686ccbba0 100644 --- a/packages/rrweb/CHANGELOG.md +++ b/packages/rrweb/CHANGELOG.md @@ -1,5 +1,16 @@ # rrweb +## 2.0.12 + +### Patch Changes + +- [DEV-1066] Test editor select timestamp (Range editing) + +- Updated dependencies []: + - @saola.ai/rrweb-snapshot@2.0.12 + - @saola.ai/rrdom@2.0.12 + - @saola.ai/rrweb-types@2.0.12 + ## 2.0.11 ### Patch Changes diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json index 64be7e8d90..24e790a36d 100644 --- a/packages/rrweb/package.json +++ b/packages/rrweb/package.json @@ -1,6 +1,6 @@ { "name": "@saola.ai/rrweb", - "version": "2.0.11", + "version": "2.0.12", "description": "record and replay the web", "scripts": { "prepare": "npm run prepack", @@ -83,12 +83,12 @@ "vite-plugin-dts": "^3.8.1" }, "dependencies": { - "@saola.ai/rrweb-types": "^2.0.11", + "@saola.ai/rrweb-types": "^2.0.12", "@types/css-font-loading-module": "0.0.7", "@xstate/fsm": "^1.4.0", "base64-arraybuffer": "^1.0.1", "mitt": "^3.0.0", - "@saola.ai/rrdom": "^2.0.11", - "@saola.ai/rrweb-snapshot": "^2.0.11" + "@saola.ai/rrdom": "^2.0.12", + "@saola.ai/rrweb-snapshot": "^2.0.12" } } diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts index 2d9593bf72..bb991c3783 100644 --- a/packages/rrweb/src/replay/index.ts +++ b/packages/rrweb/src/replay/index.ts @@ -468,16 +468,29 @@ export class Replayer { } } - public getMetaData(): playerMetaData { - const firstEvent = this.service.state.context.events[0]; - const lastEvent = + public getMetaData(rangeStart?: number, rangeEnd?: number): playerMetaData { + if ( + this.service.state.context.rangeStart !== rangeStart || + this.service.state.context.rangeEnd !== rangeEnd + ) { + this.service.send({ + type: 'SET_RANGE', + payload: { start: rangeStart, end: rangeEnd }, + }); + } + + const firstEventTimestamp = + rangeStart || this.service.state.context.events[0].timestamp; + const lastEventTimestamp = + rangeEnd || this.service.state.context.events[ this.service.state.context.events.length - 1 - ]; + ].timestamp; + return { - startTime: firstEvent.timestamp, - endTime: lastEvent.timestamp, - totalTime: lastEvent.timestamp - firstEvent.timestamp, + startTime: firstEventTimestamp, + endTime: lastEventTimestamp, + totalTime: lastEventTimestamp - firstEventTimestamp, }; } @@ -508,12 +521,17 @@ export class Replayer { if (fromProgress) { this.emitter.emit(ReplayerEvents.GotoStarted); } + const modifiedOffset = this.service.state.context.rangeStart + ? this.service.state.context.rangeStart - + this.service.state.context.events[0].timestamp + + timeOffset + : timeOffset; const handle = () => { if (resumePlaying) { - this.play(timeOffset); + this.play(modifiedOffset); } else { - this.pause(timeOffset); + this.pause(modifiedOffset); } }; diff --git a/packages/rrweb/src/replay/machine.ts b/packages/rrweb/src/replay/machine.ts index 5c489a0a55..4716d91ef0 100644 --- a/packages/rrweb/src/replay/machine.ts +++ b/packages/rrweb/src/replay/machine.ts @@ -15,6 +15,8 @@ export type PlayerContext = { timeOffset: number; baselineTime: number; lastPlayedEvent: eventWithTime | null; + rangeStart?: number; + rangeEnd?: number; }; export type PlayerEvent = | { @@ -39,6 +41,13 @@ export type PlayerEvent = } | { type: 'END'; + } + | { + type: 'SET_RANGE'; + payload: { + start: number | undefined; + end: number | undefined; + }; }; export type PlayerState = | { @@ -126,6 +135,10 @@ export function createPlayerService( target: 'paused', actions: ['addEvent'], }, + SET_RANGE: { + target: 'paused', + actions: ['setRange'], + }, }, }, live: { @@ -274,6 +287,15 @@ export function createPlayerService( } return { ...ctx, events }; }), + setRange: assign((ctx, machineEvent) => { + if (machineEvent.type === 'SET_RANGE') { + const { start, end } = machineEvent.payload; + + return { ...ctx, rangeStart: start, rangeEnd: end }; + } + + return ctx; + }), }, }, ); diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md index 44b59642b9..18210906af 100644 --- a/packages/types/CHANGELOG.md +++ b/packages/types/CHANGELOG.md @@ -1,5 +1,12 @@ # @rrweb/types +## 2.0.12 + +### Patch Changes + +- Updated dependencies []: + - @saola.ai/rrweb-snapshot@2.0.12 + ## 2.0.11 ### Patch Changes diff --git a/packages/types/package.json b/packages/types/package.json index 995ab42aff..0019d485e0 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,6 +1,6 @@ { "name": "@saola.ai/rrweb-types", - "version": "2.0.11", + "version": "2.0.12", "publishConfig": { "access": "public" }, @@ -52,7 +52,7 @@ "dependencies": { "@changesets/cli": "^2.27.1", "@monorepo-utils/workspaces-to-typescript-project-references": "^2.8.2", - "@saola.ai/rrweb-snapshot": "^2.0.11", + "@saola.ai/rrweb-snapshot": "^2.0.12", "browserslist": "^4.22.1", "concurrently": "^7.1.0", "cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz", diff --git a/packages/web-extension/CHANGELOG.md b/packages/web-extension/CHANGELOG.md index e8a0d9c6dc..65ef125f1a 100644 --- a/packages/web-extension/CHANGELOG.md +++ b/packages/web-extension/CHANGELOG.md @@ -1,5 +1,13 @@ # @rrweb/web-extension +## 2.0.12 + +### Patch Changes + +- Updated dependencies []: + - @saola.ai/rrweb-player@2.0.12 + - @saola.ai/rrweb@2.0.12 + ## 2.0.11 ### Patch Changes diff --git a/packages/web-extension/package.json b/packages/web-extension/package.json index 660bbfc5b2..251ff17dec 100644 --- a/packages/web-extension/package.json +++ b/packages/web-extension/package.json @@ -1,7 +1,7 @@ { "name": "@saola.ai/rrweb-web-extension", "private": true, - "version": "2.0.11", + "version": "2.0.12", "description": "The web extension of rrweb which helps to run rrweb on any website out of box", "author": "rrweb-io", "license": "MIT", @@ -18,7 +18,7 @@ "prepublish": "yarn build" }, "devDependencies": { - "@saola.ai/rrweb-types": "^2.0.11", + "@saola.ai/rrweb-types": "^2.0.12", "@types/react-dom": "^18.0.6", "@types/webextension-polyfill": "^0.9.1", "@vitejs/plugin-react": "^4.2.1", @@ -42,7 +42,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.4.0", "react-router-dom": "^6.4.1", - "@saola.ai/rrweb": "^2.0.11", - "@saola.ai/rrweb-player": "^2.0.11" + "@saola.ai/rrweb": "^2.0.12", + "@saola.ai/rrweb-player": "^2.0.12" } }