Add rrweb-player readme

packages/rrweb-player/README.md

@@ -1,70 +1,140 @@
-_Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)_
-
 _Looking for a Vue.js version? Go here --> [@preflight-hq/rrweb-player-vue](https://github.com/Preflight-HQ/rrweb-player-vue)_
 
 ---
 
-# svelte app
+# rrweb-player
+
+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.
+
+## How is this different from `rrweb.Replayer`?
+
+rrweb-player uses rrweb's Replayer under the hood, but as Replayer doesn't include any UI for controls, rrweb-player adds those.
+
+## Installation
+
+rrweb-player can also be included with `<script>`：
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
+/>
+<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
+```
+
+Or installed by using NPM：
+
+```shell
+npm install --save rrweb-player
+```
 
-This is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template.
+```js
+import rrwebPlayer from 'rrweb-player';
+import 'rrweb-player/dist/style.css';
+```
 
-To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+## Usage
 
-```bash
-npm install -g degit # you only need to do this once
+```js
+new rrwebPlayer({
+  target: document.body, // customizable root element
+  props: {
+    events,
+  },
+});
+```
 
-degit sveltejs/template svelte-app
-cd svelte-app
+## Options
+
+| key            | default      | description                                                                                                         |
+| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
+| events         | []           | the events for replaying                                                                                            |
+| width          | 1024         | the width of the replayer                                                                                           |
+| height         | 576          | the height of the replayer                                                                                          |
+| maxScale       | 1            | the maximum scale of the replayer (1 = 100%), set to 0 for unlimited                                                |
+| autoPlay       | true         | whether to autoplay                                                                                                 |
+| speed          | 1            | The default speed to play at                                                                                        |
+| speedOption    | [1, 2, 4, 8] | speed options in UI                                                                                                 |
+| showController | true         | whether to show the controller UI                                                                                   |
+| tags           | {}           | customize the custom events style with a key-value map                                                              |
+| inactiveColor  | #D4D4D4      | Customize the color of inactive periods indicator in the progress bar with a valid CSS color string.                |
+| ...            | -            | all the [rrweb Replayer options](https://github.com/rrweb-io/rrweb/blob/master/guide.md#options-1) will be bypassed |
+
+## methods on the rrwebPlayer component
+
+```ts
+addEventListener(event: string, handler: (params: any) => unknown): void;
 ```
 
-_Note that you will need to have [Node.js](https://nodejs.org) installed._
+```ts
+addEvent(event: eventWithTime): void;
+```
 
-## Get started
+```ts
+getMetaData() => {
+    startTime: number;
+    endTime: number;
+    totalTime: number;
+}
+```
 
-Install the dependencies...
+```ts
+getReplayer() => Replayer;
+```
 
-```bash
-cd svelte-app
-npm install
+```ts
+getMirror() => Mirror;
 ```
 
-...then start [Rollup](https://rollupjs.org):
+Toggles between play/pause
 
-```bash
-npm run dev
+```ts
+toggle();
 ```
 
-Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+Sets speed of player
 
-## Deploying to the web
+```ts
+setSpeed(speed: number)
+```
 
-### With [now](https://zeit.co/now)
+Turns on/off skip inactive
 
-Install `now` if you haven't already:
+```ts
+toggleSkipInactive();
+```
 
-```bash
-npm install -g now
+Triggers resize, do this whenever you change width/height
+
+```ts
+triggerResize();
 ```
 
-Then, from within your project folder:
+Plays replay
 
-```bash
-now
+```ts
+play();
 ```
 
-As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
+Pauses replay
 
-### With [surge](https://surge.sh/)
+```ts
+pause();
+```
 
-Install `surge` if you haven't already:
+Go to a point in time and pause or play from then
 
-```bash
-npm install -g surge
+```ts
+goto(timeOffset: number, play?: boolean)
 ```
 
-Then, from within your project folder:
+Plays from a time to a time and (optionally) loop
 
-```bash
-npm run build
-surge public
+```ts
+playRange(
+    timeOffset: number,
+    endTimeOffset: number,
+    startLooping: boolean = false,
+    afterHook: undefined | (() => void) = undefined,
+  )
 ```