move rrvideo to monorepo (rrweb-io#1181)

* first commit

* rrvideo v0.1.0

First version of rrvideo.

1. Use as a Node.JS lib.
2. Use as a CLI.

Features are implemented via puppeteer, ffmpeg and rrweb-player.

* add readme

* update publish script

* add node env in cli file and change package.json bin to same like README (#4)

Co-authored-by: Xu Yinjie <[email protected]>

* release 0.2.0

* fix #6 avoid assign undefined to config

* Fix: Solve the inconsistency between rrvideo and the real recorded page rendering when rendering the page with a headless browser (rrweb-io/rrvideo#26)

Author: xujiujiu <[email protected]>

---------

Co-authored-by: xujiujiu <[email protected]>

* refactor rrvideo

1. refactor code
2. change monorepo config
3. remove separate TS dependencies

* add changeset

* fix: eslint errors

---------

Co-authored-by: Yanzhen Yu <[email protected]>
Co-authored-by: xyj <[email protected]>
Co-authored-by: Xu Yinjie <[email protected]>
Co-authored-by: xujiujiu <[email protected]>

.changeset/config.json

@@ -10,7 +10,8 @@
       "rrdom-nodejs",
       "rrweb-player",
       "@rrweb/types",
-      "@rrweb/web-extension"
+      "@rrweb/web-extension",
+      "rrvideo"
     ]
   ],
   "linked": [],

.changeset/tricky-panthers-guess.md

@@ -0,0 +1,5 @@
+---
+'rrvideo': patch
+---
+
+Refactor: Move rrvideo to rrweb's monorepo

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -19,6 +19,8 @@ body:
         - rrweb-snapshot
         - rrdom
         - rrweb-player
+        - web-extension
+        - rrvideo
         - Other (specify below)
     validations:
       required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -19,6 +19,8 @@ body:
         - rrweb-snapshot
         - rrdom
         - rrweb-player
+        - web-extension
+        - rrvideo
         - Other (specify below)
     validations:
       required: true

.vscode/rrweb-monorepo.code-workspace

@@ -28,6 +28,7 @@
       "name": "web-extension (package)",
       "path": "../packages/web-extension"
     },
+    { "name": "rrvideo (package)", "path": "../packages/rrvideo" },
     { "name": "@rrweb/types", "path": "../packages/types" }
   ],
   "settings": {

package.json

@@ -29,15 +29,13 @@
     "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-jest": "^27.1.3",
     "eslint-plugin-tsdoc": "^0.2.16",
-    "lerna": "^4.0.0",
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "prettier": "2.8.4",
     "turbo": "^1.2.4",
     "typescript": "^4.7.3"
   },
   "scripts": {
-    "lerna": "lerna",
     "build:all": "yarn run concurrently --success=all -r -m=1 'yarn workspaces-to-typescript-project-references' 'yarn turbo run prepublish'",
     "test": "yarn run concurrently --success=all -r -m=1 'yarn workspaces-to-typescript-project-references --check' 'yarn turbo run test'",
     "test:watch": "yarn turbo run test:watch",

packages/rrdom-nodejs/package.json

@@ -42,8 +42,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-web-worker-loader": "^1.6.1",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.7.3"
+    "ts-jest": "^27.1.3"
   },
   "dependencies": {
     "cssom": "^0.5.0",

packages/rrdom/package.json

@@ -44,8 +44,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-web-worker-loader": "^1.6.1",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.7.3"
+    "ts-jest": "^27.1.3"
   },
   "dependencies": {
     "rrweb-snapshot": "^2.0.0-alpha.6"

packages/rrvideo/README.md

@@ -0,0 +1,37 @@
+# rrvideo
+
+[中文文档](./README.zh_CN.md)
+
+rrvideo is a tool for transforming the session recorded by [rrweb](https://github.com/rrweb-io/rrweb) into a video.
+
+## Install rrvideo
+
+1. Install [ffmpeg](https://ffmpeg.org/download.html)。
+2. Install [Node.JS](https://nodejs.org/en/download/)。
+3. Run `npm i -g rrvideo` to install the rrvideo CLI。
+
+## Use rrvideo
+
+### Transform a rrweb session(in JSON format) into a video.
+
+```shell
+rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE
+```
+
+Running this command will output a `rrvideo-output.mp4` file in the current working directory.
+
+### Config the output path
+
+```shell
+rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE --output OUTPUT_PATH
+```
+
+### Config the replay
+
+You can prepare a rrvideo config file and pass it to CLI.
+
+```shell
+rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_JSON_FILE --config PATH_TO_YOUR_RRVIDEO_CONFIG_FILE
+```
+
+You can find an example of the rrvideo config file [here](./rrvideo.config.example.json).

packages/rrvideo/README.zh_CN.md

@@ -0,0 +1,35 @@
+# rrvideo
+
+rrvideo 是用于将 [rrweb](https://github.com/rrweb-io/rrweb) 录制的数据转为视频格式的工具。
+
+## 安装 rrvideo
+
+1. 安装 [ffmpeg](https://ffmpeg.org/download.html)。
+2. 安装 [Node.JS](https://nodejs.org/en/download/)。
+3. 执行 `npm i -g rrvideo` 以安装 rrvideo CLI。
+
+## 使用 rrvideo
+
+### 将一份 rrweb 录制的数据（JSON 格式）转换为视频。
+
+```shell
+rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE
+```
+
+运行以上命令会在执行文件夹中生成一个 `rrvideo-output.mp4` 文件。
+
+### 指定输出路径
+
+```shell
+rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE --output OUTPUT_PATH
+```
+
+### 对回放进行配置
+
+通过编写一个 rrvideo 配置文件再传入 rrvideo CLI 的方式可以对回放进行一定的配置。
+
+```shell
+rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_JSON_FILE --config PATH_TO_YOUR_RRVIDEO_CONFIG_FILE
+```
+
+rrvideo 配置文件可参考[示例](./rrvideo.config.example.json)。

packages/rrvideo/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "rrvideo",
+  "version": "2.0.0-alpha.6",
+  "description": "transform rrweb session into video",
+  "main": "build/index.js",
+  "bin": {
+    "rrvideo": "build/cli.js"
+  },
+  "files": [
+    "build"
+  ],
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublish": "yarn build"
+  },
+  "author": "[email protected]",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/minimist": "^1.2.1",
+    "@rrweb/types": "^2.0.0-alpha.6"
+  },
+  "dependencies": {
+    "minimist": "^1.2.5",
+    "puppeteer": "^19.7.2",
+    "rrweb-player": "^2.0.0-alpha.6"
+  }
+}

packages/rrvideo/rrvideo.config.example.json

@@ -0,0 +1,10 @@
+{
+  "width": 1400,
+  "height": 900,
+  "speed": 4,
+  "skipInactive": true,
+  "mouseTail": {
+    "strokeStyle": "green",
+    "lineWidth": 2
+  }
+}

packages/rrvideo/src/cli.ts

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+import * as fs from 'fs';
+import * as path from 'path';
+import minimist from 'minimist';
+import type { RRwebPlayerOptions } from 'rrweb-player';
+import { transformToVideo } from './index';
+
+const argv = minimist(process.argv.slice(2));
+
+if (!argv.input) {
+  throw new Error('please pass --input to your rrweb events file');
+}
+
+let config = {};
+
+if (argv.config) {
+  const configPathStr = argv.config as string;
+  const configPath = path.isAbsolute(configPathStr)
+    ? configPathStr
+    : path.resolve(process.cwd(), configPathStr);
+  config = JSON.parse(fs.readFileSync(configPath, 'utf-8')) as Omit<
+    RRwebPlayerOptions['props'],
+    'events'
+  >;
+}
+
+transformToVideo({
+  input: argv.input as string,
+  output: argv.output as string,
+  rrwebPlayer: config,
+})
+  .then((file) => {
+    console.log(`Successfully transformed into "${file}".`);
+  })
+  .catch((error) => {
+    console.log('Failed to transform this session.');
+    console.error(error);
+    process.exit(1);
+  });