move rrvideo to monorepo (#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]>

Author: 5 people

.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)。