From 2de2fcf83711d1dfd6cd2e76676c4e6e069121f8 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Fri, 11 Nov 2022 13:01:27 +0100 Subject: [PATCH 1/2] Add rrweb-player readme --- packages/rrweb-player/README.md | 146 +++++++++++++++++++++----------- 1 file changed, 98 insertions(+), 48 deletions(-) diff --git a/packages/rrweb-player/README.md b/packages/rrweb-player/README.md index 4c2aae51f9..5b3826a33c 100644 --- a/packages/rrweb-player/README.md +++ b/packages/rrweb-player/README.md @@ -1,70 +1,120 @@ -_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 - -This is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template. - -To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): +# rrweb-player -```bash -npm install -g degit # you only need to do this once +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. -degit sveltejs/template svelte-app -cd svelte-app -``` +## How is this different from `rrweb.Replayer`? -_Note that you will need to have [Node.js](https://nodejs.org) installed._ +rrweb-player uses rrweb's Replayer under the hood, but as Replayer doesn't include any UI for controls, rrweb-player adds those. -## Get started +## Installation -Install the dependencies... +rrweb-player can also be included with ` ``` -...then start [Rollup](https://rollupjs.org): +Or installed by using NPM： -```bash -npm run dev +```shell +npm install --save rrweb-player ``` -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. - -## Deploying to the web - -### With [now](https://zeit.co/now) - -Install `now` if you haven't already: - -```bash -npm install -g now +```js +import rrwebPlayer from 'rrweb-player'; +import 'rrweb-player/dist/style.css'; ``` -Then, from within your project folder: +## Usage -```bash -now +```js +new rrwebPlayer({ + target: document.body, // customizable root element + props: { + events, + }, +}); ``` -As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. - -### With [surge](https://surge.sh/) - -Install `surge` if you haven't already: - -```bash -npm install -g surge +## 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; ``` - -Then, from within your project folder: - -```bash -npm run build -surge public +```ts +addEvent(event: eventWithTime): void; +``` +```ts +getMetaData() => { + startTime: number; + endTime: number; + totalTime: number; +} +``` +```ts +getReplayer() => Replayer; +``` +```ts +getMirror() => Mirror; +``` +Toggles between play/pause +```ts +toggle() +``` +Sets speed of player +```ts +setSpeed(speed: number) +``` +Turns on/off skip inactive +```ts +toggleSkipInactive() +``` +Triggers resize, do this whenever you change width/height +```ts +triggerResize() +``` +Plays replay +```ts +play() +``` +Pauses replay +```ts +pause() +``` +Go to a point in time and pause or play from then +```ts +goto(timeOffset: number, play?: boolean) +``` +Plays from a time to a time and (optionally) loop +```ts +playRange( + timeOffset: number, + endTimeOffset: number, + startLooping: boolean = false, + afterHook: undefined | (() => void) = undefined, + ) ``` From 75ebfbe0e013c6d4e8e00b3582ed8b96b5ad6bcb Mon Sep 17 00:00:00 2001 From: Juice10 Date: Fri, 11 Nov 2022 12:02:32 +0000 Subject: [PATCH 2/2] Apply formatting changes --- packages/rrweb-player/README.md | 56 ++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 18 deletions(-) diff --git a/packages/rrweb-player/README.md b/packages/rrweb-player/README.md index 5b3826a33c..f7cbfd2afb 100644 --- a/packages/rrweb-player/README.md +++ b/packages/rrweb-player/README.md @@ -46,28 +46,30 @@ new rrwebPlayer({ ## 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 | +| 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; ``` + ```ts addEvent(event: eventWithTime): void; ``` + ```ts getMetaData() => { startTime: number; @@ -75,41 +77,59 @@ getMetaData() => { totalTime: number; } ``` + ```ts getReplayer() => Replayer; ``` + ```ts getMirror() => Mirror; ``` + Toggles between play/pause + ```ts -toggle() +toggle(); ``` + Sets speed of player + ```ts setSpeed(speed: number) ``` + Turns on/off skip inactive + ```ts -toggleSkipInactive() +toggleSkipInactive(); ``` + Triggers resize, do this whenever you change width/height + ```ts -triggerResize() +triggerResize(); ``` + Plays replay + ```ts -play() +play(); ``` + Pauses replay + ```ts -pause() +pause(); ``` + Go to a point in time and pause or play from then + ```ts goto(timeOffset: number, play?: boolean) ``` + Plays from a time to a time and (optionally) loop + ```ts playRange( timeOffset: number,