bcf93ca926
* docs: revamp installation docs for esm and umd Document recommended install paths across the main guides and package READMEs for rrweb, @rrweb/all, @rrweb/record, @rrweb/replay, and rrweb-player. Clarify three usage modes: bundler/npm, browser no-build with import maps and +esm, and legacy UMD fallback. * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply formatting changes * Apply suggestion from @eoghanmurray Co-authored-by: Eoghan Murray <eoghan@getthere.ie> * Apply formatting changes * docs(all): streamline README usage section Move the guide link next to the import example and remove the duplicated Usage section to keep docs concise and easier to scan. * docs(readme): update gzip size badges in zh-cn readme * docs(plugins): update readme imports to scoped esm packages Replace `rrweb` default imports and `rrweb.Replayer` usage with `@rrweb/record` `record` and `@rrweb/replay` `Replayer` in plugin usage examples. Also update canvas WebRTC plugin imports to scoped `@rrweb/*` package names to keep docs aligned with current package structure. * docs: update docs to prefer scoped esm packages replace `rrweb` default import examples with `@rrweb/record` and `@rrweb/replay` across recipes and guides in en/zh-CN. clarify package selection for new integrations, add `@rrweb/all` convenience guidance, and refresh CDN/style import snippets for ESM and legacy UMD compatibility. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
1.9 KiB
1.9 KiB
Customize the Replayer
When Replayer and the rrweb-player UI do not fit your need, you can customize your replayer UI.
There are several ways to do this:
- Use rrweb-player, and customize its CSS.
- Use rrweb-player, and set
showController: falseto hide the controller UI. With this config, you can implement your controller UI. - Use the
insertStyleRulesoptions to inject some CSS into the replay iframe. - Develop a new replayer UI with
Replayer.
Implement Your Controller UI
When using rrweb-player, you can hide its controller UI:
import rrwebPlayer from 'rrweb-player';
new rrwebPlayer({
target: document.body,
props: {
events,
showController: false,
},
});
When you are implementing a controller UI, you may need to interact with rrweb-player.
The follwing APIs show some common use case of a controller UI:
// toggle between play and pause
rrwebPlayer.toggle();
// play
rrwebPlayer.play();
// pause
rrwebPlayer.pause();
// update the dimension
rrwebPlayer.$set({
width: NEW_WIDTH,
height: NEW_HEIGHT,
});
rrwebPlayer.triggerResize();
// toggle whether to skip the inactive time
rrwebPlayer.toggleSkipInactive();
// set replay speed
rrwebPlayer.setSpeed(2);
// go to some timing
rrwebPlayer.goto(3000);
And there are some ways to listen rrweb-player's state:
// get current timing
rrwebPlayer.addEventListener('ui-update-current-time', (event) => {
console.log(event.payload);
});
// get current state
rrwebPlayer.addEventListener('ui-update-player-state', (event) => {
console.log(event.payload);
});
// get current progress
rrwebPlayer.addEventListener('ui-update-progress', (event) => {
console.log(event.payload);
});
Develop a new replayer UI with Replayer.
Please refer rrweb-player.