diff --git a/README.md b/README.md
index a50c2ec7b4..088e0a958d 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ rrweb is mainly composed of 3 parts:
- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot/)**, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
- **[rrweb](https://github.com/rrweb-io/rrweb)**, including two functions, record and replay. The record function is used to record all the mutations in the DOM; the replay is to replay the recorded mutations one by one according to the corresponding timestamp.
-- **[rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/)**, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
+- **[rrweb-playback-ui](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-playback-ui/)**, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
## Roadmap
diff --git a/README.zh_CN.md b/README.zh_CN.md
index ca3a2c3275..d3c54638e0 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -30,7 +30,7 @@ rrweb 主要由 3 部分组成：
- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot/)**，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
- **[rrweb](https://github.com/rrweb-io/rrweb)**，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。
-- **[rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/)**，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
+- **[rrweb-playback-ui](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-playback-ui/)**，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
## Roadmap
diff --git a/docs/recipes/custom-event.md b/docs/recipes/custom-event.md
index 287b8e7d8d..0b7fb59cf3 100644
--- a/docs/recipes/custom-event.md
+++ b/docs/recipes/custom-event.md
@@ -24,7 +24,7 @@ rrweb.record.addCustomEvent('some-error', {
`addCustomEvent` accepts two parameters. The first one is a string-type `tag`, while the second one is an any-type `payload`.
-During the replay, we can add an event listener to custom events, or configure the style of custom events in rrweb-player's timeline.
+During the replay, we can add an event listener to custom events, or configure the style of custom events in rrweb-playback-ui's timeline.
**Listen to custom events**
@@ -36,10 +36,10 @@ replayer.on('custom-event', (event) => {
});
```
-**Display in rrweb-player**
+**Display in rrweb-playback-ui**
```js
-new rrwebPlayer({
+new rrwebPlaybackUi({
target: document.body,
props: {
events,
diff --git a/docs/recipes/custom-event.zh_CN.md b/docs/recipes/custom-event.zh_CN.md
index 388d48ce68..8399484867 100644
--- a/docs/recipes/custom-event.zh_CN.md
+++ b/docs/recipes/custom-event.zh_CN.md
@@ -24,7 +24,7 @@ rrweb.record.addCustomEvent('some-error', {
`addCustomEvent` 接收两个参数，第一个是字符串类型的 `tag`，第二个是任意类型的 `payload`。
-在回放时我们可以通过监听事件获取对应的事件，也可以通过配置 rrweb-player 在回放器 UI 的时间轴中展示对应事件。
+在回放时我们可以通过监听事件获取对应的事件，也可以通过配置 rrweb-playback-ui 在回放器 UI 的时间轴中展示对应事件。
**获取对应事件**
@@ -36,10 +36,10 @@ replayer.on('custom-event', (event) => {
});
```
-**在 rrweb-player 中展示**
+**在 rrweb-playback-ui 中展示**
```js
-new rrwebPlayer({
+new rrwebPlaybackUi({
target: document.body,
props: {
events,
diff --git a/docs/recipes/customize-replayer.md b/docs/recipes/customize-replayer.md
index d30462326f..4b92032cc3 100644
--- a/docs/recipes/customize-replayer.md
+++ b/docs/recipes/customize-replayer.md
@@ -1,20 +1,20 @@
# Customize the Replayer
-When rrweb's Replayer and the rrweb-player UI do not fit your need, you can customize your replayer UI.
+When rrweb's Replayer and the rrweb-playback-ui UI do not fit your need, you can customize your replayer UI.
There are several ways to do this:
-1. Use rrweb-player, and customize its CSS.
-2. Use rrweb-player, and set `showController: false` to hide the controller UI. With this config, you can implement your controller UI.
+1. Use rrweb-playback-ui, and customize its CSS.
+2. Use rrweb-playback-ui, and set `showController: false` to hide the controller UI. With this config, you can implement your controller UI.
3. Use the `insertStyleRules` options to inject some CSS into the replay iframe.
4. Develop a new replayer UI with rrweb's Replayer.
## Implement Your Controller UI
-When using rrweb-player, you can hide its controller UI:
+When using rrweb-playback-ui, you can hide its controller UI:
```js
-new rrwebPlayer({
+new rrwebPlaybackUi({
target: document.body,
props: {
events,
@@ -23,50 +23,50 @@ new rrwebPlayer({
});
```
-When you are implementing a controller UI, you may need to interact with rrweb-player.
+When you are implementing a controller UI, you may need to interact with rrweb-playback-ui.
The follwing APIs show some common use case of a controller UI:
```js
// toggle between play and pause
-rrwebPlayer.toggle();
+rrwebPlaybackUi.toggle();
// play
-rrwebPlayer.play();
+rrwebPlaybackUi.play();
// pause
-rrwebPlayer.pause();
+rrwebPlaybackUi.pause();
// update the dimension
-rrwebPlayer.$set({
+rrwebPlaybackUi.$set({
width: NEW_WIDTH,
height: NEW_HEIGHT,
});
-rrwebPlayer.triggerResize();
+rrwebPlaybackUi.triggerResize();
// toggle whether to skip the inactive time
-rrwebPlayer.toggleSkipInactive();
+rrwebPlaybackUi.toggleSkipInactive();
// set replay speed
-rrwebPlayer.setSpeed(2);
+rrwebPlaybackUi.setSpeed(2);
// go to some timing
-rrwebPlayer.goto(3000);
+rrwebPlaybackUi.goto(3000);
```
-And there are some ways to listen rrweb-player's state:
+And there are some ways to listen rrweb-playback-ui's state:
```js
// get current timing
-rrwebPlayer.addEventListener('ui-update-current-time', (event) => {
+rrwebPlaybackUi.addEventListener('ui-update-current-time', (event) => {
console.log(event.payload);
});
// get current state
-rrwebPlayer.addEventListener('ui-update-player-state', (event) => {
+rrwebPlaybackUi.addEventListener('ui-update-player-state', (event) => {
console.log(event.payload);
});
// get current progress
-rrwebPlayer.addEventListener('ui-update-progress', (event) => {
+rrwebPlaybackUi.addEventListener('ui-update-progress', (event) => {
console.log(event.payload);
});
```
## Develop a new replayer UI with rrweb's Replayer.
-Please refer [rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/).
+Please refer [rrweb-playback-ui](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-playback-ui/).
diff --git a/docs/recipes/customize-replayer.zh_CN.md b/docs/recipes/customize-replayer.zh_CN.md
index 58f6553fc0..6f5e9cc4e9 100644
--- a/docs/recipes/customize-replayer.zh_CN.md
+++ b/docs/recipes/customize-replayer.zh_CN.md
@@ -1,20 +1,20 @@
# 自定义回放 UI
-当 rrweb Replayer 和 rrweb-player 的 UI 不能满足需求时，可以通过自定义回放 UI 制作属于你自己的回放器。
+当 rrweb Replayer 和 rrweb-playback-ui 的 UI 不能满足需求时，可以通过自定义回放 UI 制作属于你自己的回放器。
你可以通过以下几种方式从不同角度自定义回放 UI：
-1. 使用 rrweb-player 时，通过覆盖 CSS 样式表定制 UI。
-2. 使用 rrweb-player 时，通过 `showController: false` 隐藏控制器 UI，重新实现控制器 UI。
+1. 使用 rrweb-playback-ui 时，通过覆盖 CSS 样式表定制 UI。
+2. 使用 rrweb-playback-ui 时，通过 `showController: false` 隐藏控制器 UI，重新实现控制器 UI。
3. 通过 `insertStyleRules` 在回放页面（iframe）内定制 CSS 样式。
4. 基于 rrweb Replayer 开发自己的回放器 UI。
## 实现控制器 UI
-使用 rrweb-player 时，可以隐藏其控制器 UI：
+使用 rrweb-playback-ui 时，可以隐藏其控制器 UI：
```js
-new rrwebPlayer({
+new rrwebPlaybackUi({
target: document.body,
props: {
events,
@@ -23,50 +23,50 @@ new rrwebPlayer({
});
```
-实现自己的控制器 UI 时，你可能需要与 rrweb-player 进行交互。
+实现自己的控制器 UI 时，你可能需要与 rrweb-playback-ui 进行交互。
-通过 API 控制 rrweb-player：
+通过 API 控制 rrweb-playback-ui：
```js
// 在播放和暂停间切换
-rrwebPlayer.toggle();
+rrwebPlaybackUi.toggle();
// 播放
-rrwebPlayer.play();
+rrwebPlaybackUi.play();
// 暂停
-rrwebPlayer.pause();
-// 更新 rrweb-player 宽高
-rrwebPlayer.$set({
+rrwebPlaybackUi.pause();
+// 更新 rrweb-playback-ui 宽高
+rrwebPlaybackUi.$set({
width: NEW_WIDTH,
height: NEW_HEIGHT,
});
-rrwebPlayer.triggerResize();
+rrwebPlaybackUi.triggerResize();
// 切换否跳过无操作时间
-rrwebPlayer.toggleSkipInactive();
+rrwebPlaybackUi.toggleSkipInactive();
// 设置播放速度为 2 倍
-rrwebPlayer.setSpeed(2);
+rrwebPlaybackUi.setSpeed(2);
// 跳转至播放 3 秒处
-rrwebPlayer.goto(3000);
+rrwebPlaybackUi.goto(3000);
```
-通过监听事件获得 rrweb-player 的状态：
+通过监听事件获得 rrweb-playback-ui 的状态：
```js
// 当前播放时间
-rrwebPlayer.addEventListener('ui-update-current-time', (event) => {
+rrwebPlaybackUi.addEventListener('ui-update-current-time', (event) => {
console.log(event.payload);
});
// 当前播放状态
-rrwebPlayer.addEventListener('ui-update-player-state', (event) => {
+rrwebPlaybackUi.addEventListener('ui-update-player-state', (event) => {
console.log(event.payload);
});
// 当前播放进度
-rrwebPlayer.addEventListener('ui-update-progress', (event) => {
+rrwebPlaybackUi.addEventListener('ui-update-progress', (event) => {
console.log(event.payload);
});
```
## 基于 rrweb Replayer 开发自己的回放器 UI
-可以参照 [rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/) 的方式进行开发。
+可以参照 [rrweb-playback-ui](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-playback-ui/) 的方式进行开发。
diff --git a/docs/recipes/index.md b/docs/recipes/index.md
index 0a5426062a..71c2e26cfa 100644
--- a/docs/recipes/index.md
+++ b/docs/recipes/index.md
@@ -42,7 +42,7 @@ By default, the UI could not interact during replay. But you can use API to enab
### Customize The Replayer
-When rrweb's Replayer and the rrweb-player UI do not fit your need, you can customize your own replayer UI.
+When rrweb's Replayer and the rrweb-playback-ui UI do not fit your need, you can customize your own replayer UI.
[link](./customize-replayer.md)
diff --git a/docs/recipes/index.zh_CN.md b/docs/recipes/index.zh_CN.md
index 708965a96f..b3751b7edb 100644
--- a/docs/recipes/index.zh_CN.md
+++ b/docs/recipes/index.zh_CN.md
@@ -42,7 +42,7 @@
### 自定义回放 UI
-当 rrweb Replayer 和 rrweb-player 的 UI 不能满足需求时，可以通过自定义回放 UI 制作属于你自己的回放器。
+当 rrweb Replayer 和 rrweb-playback-ui 的 UI 不能满足需求时，可以通过自定义回放 UI 制作属于你自己的回放器。
[链接](./customize-replayer.zh_CN.md)
diff --git a/docs/replay.md b/docs/replay.md
index 9c200491ca..c5e135809f 100644
--- a/docs/replay.md
+++ b/docs/replay.md
@@ -37,6 +37,6 @@ The specific method includes two parts:
2. When playing back the mouse up mouse interaction event, add the `.:hover` class name to the event target and all its ancestors, and remove it when the mouse moves away again.
## Play from any point in time
-In addition to the basic replay features, we also want players like `rrweb-player` to provide similar functionality to video players, such as dragging and dropping to the progress bar to any point in time.
+In addition to the basic replay features, we also want players like `rrweb-playback-ui` to provide similar functionality to video players, such as dragging and dropping to the progress bar to any point in time.
In actual implementation, we pass a start time to the method. We can then divide the snapshot chain into two parts: The parts before and the part after the start time. Then, the snapshot chain before the start time is executed synchronously, and then the snapshot chain after the starting times uses the normal asynchronous execution. This way we can achieve starting replay from any point in time.
diff --git a/docs/replay.zh_CN.md b/docs/replay.zh_CN.md
index ac5571884e..c659c36948 100644
--- a/docs/replay.zh_CN.md
+++ b/docs/replay.zh_CN.md
@@ -42,6 +42,6 @@ parent
## 从任意时间点开始播放
-除了基础的回放功能之外，我们还希望 `rrweb-player` 这样的播放器可以提供和视频播放器类似的功能，如拖拽到进度条至任意时间点播放。
+除了基础的回放功能之外，我们还希望 `rrweb-playback-ui` 这样的播放器可以提供和视频播放器类似的功能，如拖拽到进度条至任意时间点播放。
实际实现时我们通过给定的起始时间点将快照链分为两部分，分别是时间点之前和之后的部分。然后同步执行之前的快照链，再正常异步执行之后的快照链就可以做到从任意时间点开始播放的效果。
diff --git a/guide.md b/guide.md
index 19f26bc204..c2b6622779 100644
--- a/guide.md
+++ b/guide.md
@@ -302,37 +302,37 @@ The replayer accepts options as its constructor's second parameter, and it has t
| unpackFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
| logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) |
-#### Use rrweb-player
+#### Use rrweb-playback-ui
Since rrweb's replayer only provides a basic UI, you can choose rrweb-replayer which is based on rrweb's public APIs but has a feature-rich replayer UI.
##### Installation
-rrweb-player can also be included with `
+
```
Or installed by using NPM：
```shell
-npm install --save rrweb-player
+npm install --save rrweb-playback-ui
```
```js
-import rrwebPlayer from 'rrweb-player';
-import 'rrweb-player/dist/style.css';
+import rrwebPlaybackUi from 'rrweb-playback-ui';
+import 'rrweb-playback-ui/dist/style.css';
```
##### Usage
```js
-new rrwebPlayer({
+new rrwebPlaybackUi({
target: document.body, // customizable root element
props: {
events,
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index 4478a29570..0a7fe474f6 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -298,31 +298,31 @@ replayer.pause(5000);
| unpackFn | - | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
| logConfig | - | console logger 数据播放设置，详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
-#### 使用 rrweb-player
+#### 使用 rrweb-playback-ui
-rrweb 自带的回放只提供所有的 JS API 以及最基本的 UI，如果需要功能更强的回放播放器 UI，可以使用 rrweb-player。
+rrweb 自带的回放只提供所有的 JS API 以及最基本的 UI，如果需要功能更强的回放播放器 UI，可以使用 rrweb-playback-ui。
##### 安装
-rrweb-player 同样可以使用 CDN 方式安装：
+rrweb-playback-ui 同样可以使用 CDN 方式安装：
```html
-
+
```
或者通过 npm 安装：
```shell
-npm install --save rrweb-player
+npm install --save rrweb-playback-ui
```
```js
-import rrwebPlayer from 'rrweb-player';
-import 'rrweb-player/dist/style.css';
+import rrwebPlaybackUi from 'rrweb-playback-ui';
+import 'rrweb-playback-ui/dist/style.css';
```
##### 使用
@@ -330,7 +330,7 @@ import 'rrweb-player/dist/style.css';
通过 props 传入 events 数据及配置项
```js
-new rrwebPlayer({
+new rrwebPlaybackUi({
target: document.body, // 可以自定义 DOM 元素
// 配置项
props: {
@@ -382,7 +382,7 @@ replayer.on(EVENT_NAME, (payload) => {
| event-cast | 回放 event | event |
| custom-event | 回放自定义事件 | event |
-使用 `rrweb-player` 时，也可以通过 `addEventListener` API 使用相同的事件功能，并且会获得 3 个额外的事件：
+使用 `rrweb-playback-ui` 时，也可以通过 `addEventListener` API 使用相同的事件功能，并且会获得 3 个额外的事件：
| 事件类型 | 描述 | 值 |
| ---------------------- | -------------- | ----------- |
diff --git a/package.json b/package.json
index 3082e1b1c2..12c3b7c1e1 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,6 @@
"workspaces": [
"packages/rrweb",
"packages/rrweb-snapshot",
- "packages/rrweb-player"
+ "packages/rrweb-playback-ui"
]
}
diff --git a/packages/rrweb-player/.eslintrc.json b/packages/rrweb-playback-ui/.eslintrc.json
similarity index 100%
rename from packages/rrweb-player/.eslintrc.json
rename to packages/rrweb-playback-ui/.eslintrc.json
diff --git a/packages/rrweb-player/.gitignore b/packages/rrweb-playback-ui/.gitignore
similarity index 100%
rename from packages/rrweb-player/.gitignore
rename to packages/rrweb-playback-ui/.gitignore
diff --git a/packages/rrweb-player/.release-it.json b/packages/rrweb-playback-ui/.release-it.json
similarity index 100%
rename from packages/rrweb-player/.release-it.json
rename to packages/rrweb-playback-ui/.release-it.json
diff --git a/packages/rrweb-player/README.md b/packages/rrweb-playback-ui/README.md
similarity index 100%
rename from packages/rrweb-player/README.md
rename to packages/rrweb-playback-ui/README.md
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-playback-ui/package.json
similarity index 98%
rename from packages/rrweb-player/package.json
rename to packages/rrweb-playback-ui/package.json
index eba1f8d39f..d93f36ef9f 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-playback-ui/package.json
@@ -1,5 +1,5 @@
{
- "name": "rrweb-player",
+ "name": "rrweb-playback-ui",
"version": "0.7.4",
"devDependencies": {
"@rollup/plugin-commonjs": "^11.0.0",
diff --git a/packages/rrweb-player/public/events.js b/packages/rrweb-playback-ui/public/events.js
similarity index 100%
rename from packages/rrweb-player/public/events.js
rename to packages/rrweb-playback-ui/public/events.js
diff --git a/packages/rrweb-player/public/global.css b/packages/rrweb-playback-ui/public/global.css
similarity index 100%
rename from packages/rrweb-player/public/global.css
rename to packages/rrweb-playback-ui/public/global.css
diff --git a/packages/rrweb-player/public/index.html b/packages/rrweb-playback-ui/public/index.html
similarity index 95%
rename from packages/rrweb-player/public/index.html
rename to packages/rrweb-playback-ui/public/index.html
index 032a906894..49d22a4fe8 100644
--- a/packages/rrweb-player/public/index.html
+++ b/packages/rrweb-playback-ui/public/index.html
@@ -16,7 +16,7 @@