Files
openobserve/web/packages/rrweb-player
Omkar Kesarkhaneandoasisk 7148b33916 fix: IAM resource type permissions (#3138)
Problem:
Suppose we want to give POST permission for all log streams. Then we use
orgId as entity, as we give permission for all log streams in that org.
If orgId and stream name are same. For eg. default log stream in default
org. The permission object for post permission on single "default" (name
of stream) log stream and Post permission on all log streams in
"default" org, both are same. And this creates a conflict

Solution:
While giving all resources permission on any of resource type, we prefix
orgId with `_all_` and this will not conflict with any resource

---------

Co-authored-by: oasisk <ashish.j.kolhe@gmail.com>
2024-04-03 09:44:03 +05:30
..
2023-10-20 10:43:28 +05:30
2023-10-20 10:43:28 +05:30
2023-10-20 10:43:28 +05:30
2023-10-20 10:43:28 +05:30
2023-10-20 10:43:28 +05:30
2023-10-20 10:43:28 +05:30
2023-10-20 10:43:28 +05:30
2023-10-20 10:43:28 +05:30
2023-10-20 10:43:28 +05:30
2023-10-20 10:43:28 +05:30

Looking for a Vue.js version? Go here --> @preflight-hq/rrweb-player-vue


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>:

<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:

npm install --save rrweb-player
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

Usage

new rrwebPlayer({
  target: document.body, // customizable root element
  props: {
    events,
  },
});

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 will be bypassed

methods on the rrwebPlayer component

addEventListener(event: string, handler: (params: any) => unknown): void;
addEvent(event: eventWithTime): void;
getMetaData() => {
    startTime: number;
    endTime: number;
    totalTime: number;
}
getReplayer() => Replayer;
getMirror() => Mirror;

Toggles between play/pause

toggle();

Sets speed of player

setSpeed(speed: number)

Turns on/off skip inactive

toggleSkipInactive();

Triggers resize, do this whenever you change width/height

triggerResize();

Plays replay

play();

Pauses replay

pause();

Go to a point in time and pause or play from then

goto(timeOffset: number, play?: boolean)

Plays from a time to a time and (optionally) loop

playRange(
    timeOffset: number,
    endTimeOffset: number,
    startLooping: boolean = false,
    afterHook: undefined | (() => void) = undefined,
  )