[DEV-1066] Test editor select timestamp (Range editing) (#24)

SaolaAI · Oct 10, 2024 · 8319ee4 · 8319ee4
1 parent 5804cec
commit 8319ee4
Show file tree

Hide file tree

Showing 21 changed files with 151 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 @@
   <div class="rr-controller">
     <div class="rr-timeline">
       <span class="rr-timeline__time">{formatTime(currentTime)}</span>
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         class="rr-progress"
         class:disabled={speedState === 'skipping'}

diff --git a/packages/rrweb-player/src/Player.svelte b/packages/rrweb-player/src/Player.svelte
@@ -117,6 +117,12 @@
     controller.triggerUpdateMeta();
     
   };
+
+  export const updatePlayRanges: RRwebPlayerExpose['updatePlayRanges'] = async (rangeStart: number | undefined, rangeEnd: number | undefined) => {
+    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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",