### Add Events and Access rrweb-player Metadata

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Enables dynamic addition of new events during playback and retrieval of metadata such as total time, start time, and end time. It also provides access to the underlying rrweb Replayer instance and the DOM snapshot mirror for advanced functionalities.

```typescript
// Add a new event to the current session
const newEvent: eventWithTime = {
  type: 3,
  data: {
    source: 2,
    type: 1,
    id: 123,
    x: 500,
    y: 300
  },
  timestamp: Date.now()
};

player.addEvent(newEvent);

// Get metadata about the recording
const metadata = player.getMetaData();
console.log('Total time:', metadata.totalTime);
console.log('Start time:', metadata.startTime);
console.log('End time:', metadata.endTime);

// Access the underlying rrweb Replayer instance
const replayer = player.getReplayer();
replayer.setConfig({ mouseTail: true });

// Access the mirror (DOM snapshot mirror) for advanced use cases
const mirror = player.getMirror();
const element = mirror.getNode(123);
```

--------------------------------

### Initialize rrweb-player Component

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Initializes the rrweb-player component with recorded events and configuration options. Requires the 'rrweb-player' library and 'eventWithTime' type from 'rrweb'. The target element must exist in the DOM.

```typescript
import rrwebPlayer from 'rrweb-player';
import { eventWithTime } from 'rrweb/typings/types';

// Sample events from a recorded session
const events: eventWithTime[] = [
  { type: 4, data: { href: "https://example.com", width: 1920, height: 1080 }, timestamp: 1544756766750 },
  { type: 2, data: { /* DOM snapshot */ }, timestamp: 1544756766761 },
  // ... more events
];

const player = new rrwebPlayer({
  target: document.getElementById('player-container'),
  props: {
    events: events,
    width: 1024,
    height: 576,
    autoPlay: true,
    speed: 1,
    speedOption: [1, 2, 4, 8],
    showController: true,
    skipInactive: true,
    tags: {
      'error': '#ff0000',
      'click': '#4950f6'
    }
  }
});
```

--------------------------------

### Player Initialization

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Initialize the rrweb player component by providing recorded events and configuration options.

```APIDOC
## Player Initialization

### Description
Initialize the rrweb player component with recorded events and configuration options.

### Method
Constructor

### Endpoint
N/A (Component Initialization)

### Parameters
#### Request Body
- **target** (HTMLElement) - Required - The DOM element where the player will be mounted.
- **props** (object) - Required - Configuration properties for the player.
  - **events** (Array<eventWithTime>) - Required - An array of recorded session events.
  - **width** (number) - Optional - The width of the player.
  - **height** (number) - Optional - The height of the player.
  - **autoPlay** (boolean) - Optional - Whether to start playback automatically.
  - **speed** (number) - Optional - The initial playback speed.
  - **speedOption** (Array<number>) - Optional - Available playback speed options.
  - **showController** (boolean) - Optional - Whether to display the playback controller.
  - **skipInactive** (boolean) - Optional - Whether to skip inactive periods during playback.
  - **tags** (object) - Optional - Custom tags for event markers (e.g., `{ 'error': '#ff0000' }`).

### Request Example
```typescript
import rrwebPlayer from 'rrweb-player';
import { eventWithTime } from 'rrweb/typings/types';

const events: eventWithTime[] = [
  { type: 4, data: { href: "https://example.com", width: 1920, height: 1080 }, timestamp: 1544756766750 },
  { type: 2, data: { /* DOM snapshot */ }, timestamp: 1544756766761 },
  // ... more events
];

const player = new rrwebPlayer({
  target: document.getElementById('player-container'),
  props: {
    events: events,
    width: 1024,
    height: 576,
    autoPlay: true,
    speed: 1,
    speedOption: [1, 2, 4, 8],
    showController: true,
    skipInactive: true,
    tags: {
      'error': '#ff0000',
      'click': '#4950f6'
    }
  }
});
```

### Response
#### Success Response (200)
N/A (Component initialization does not return a direct response. The player is mounted to the target element.)

#### Response Example
N/A
```

--------------------------------

### Fullscreen Control and Event Listening with TypeScript

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Illustrates cross-browser control for entering and exiting fullscreen mode for a specified HTML element. It also shows how to listen for fullscreen change events and properly clean up the event listener. This is crucial for interactive player features.

```typescript
import { openFullscreen, exitFullscreen, isFullscreen, onFullscreenChange } from './utils';

// Cross-browser fullscreen control
const element = document.getElementById('player');
await openFullscreen(element); // Enter fullscreen

if (isFullscreen()) {
  await exitFullscreen(); // Exit fullscreen
}

// Monitor fullscreen changes with cleanup
const removeListener = onFullscreenChange(() => {
  if (isFullscreen()) {
    console.log('Entered fullscreen');
  } else {
    console.log('Exited fullscreen');
  }
});

// Clean up listener when done
removeListener();
```

--------------------------------

### Format Time and Inline CSS with TypeScript

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Demonstrates formatting milliseconds into human-readable time strings (MM:SS or HH:MM:SS) and converting JavaScript objects into inline CSS strings for styling player elements. These functions are part of the player's UI customization utilities.

```typescript
import { formatTime, inlineCss } from './utils';

// Format milliseconds to HH:MM:SS or MM:SS
const formattedTime = formatTime(125000); // "02:05"
const formattedTimeWithHour = formatTime(3725000); // "01:02:05"

// Convert CSS object to inline style string
const style = inlineCss({ width: '100%', height: '500px', background: '#fff' });
// Returns: "width: 100%; height: 500px; background: #fff;"
```

--------------------------------

### Control rrweb-player Playback Programmatically

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Provides methods to control the playback of the rrweb player instance, such as play, pause, jump to time, adjust speed, and toggle fullscreen. These methods allow for dynamic management of the session replay.

```typescript
// Play/pause toggle
player.toggle();

// Explicit play control
player.play();

// Explicit pause control
player.pause();

// Jump to specific time (in milliseconds) and optionally start playing
player.goto(5000); // Jump to 5 seconds
player.goto(10000, true); // Jump to 10 seconds and play

// Adjust playback speed
player.setSpeed(2); // 2x speed
player.setSpeed(0.5); // 0.5x speed

// Toggle skip inactive periods
player.toggleSkipInactive();

// Enter/exit fullscreen
player.toggleFullscreen();

// Handle window resize
player.triggerResize();
```

--------------------------------

### Playback Control Methods

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Programmatically control the playback of the recorded session using methods available on the player instance.

```APIDOC
## Playback Control Methods

### Description
Control playback programmatically with player instance methods.

### Method
Various methods on the player instance.

### Endpoint
N/A (Instance Methods)

### Parameters
N/A

### Request Example
```typescript
// Play/pause toggle
player.toggle();

// Explicit play control
player.play();

// Explicit pause control
player.pause();

// Jump to specific time (in milliseconds) and optionally start playing
player.goto(5000); // Jump to 5 seconds
player.goto(10000, true); // Jump to 10 seconds and play

// Adjust playback speed
player.setSpeed(2); // 2x speed
player.setSpeed(0.5); // 0.5x speed

// Toggle skip inactive periods
player.toggleSkipInactive();

// Enter/exit fullscreen
player.toggleFullscreen();

// Handle window resize
player.triggerResize();
```

### Response
#### Success Response (200)
N/A (These are method calls that perform actions.)

#### Response Example
N/A
```

--------------------------------

### Listen to rrweb-player Events

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Allows listening to various player events for custom integrations, including player state changes, time updates, progress updates, fullscreen toggles, and native rrweb replayer events. Events provide payload details for state changes and time updates.

```typescript
// Listen to player state changes
player.addEventListener('ui-update-player-state', (detail) => {
  console.log('Player state:', detail.payload); // 'playing', 'paused', or 'live'
});

// Listen to current time updates
player.addEventListener('ui-update-current-time', (detail) => {
  const currentTime = detail.payload;
  console.log(`Current playback time: ${currentTime}ms`);
});

// Listen to progress updates (percentage from 0 to 1)
player.addEventListener('ui-update-progress', (detail) => {
  const progress = detail.payload;
  console.log(`Playback progress: ${(progress * 100).toFixed(2)}%`);
});

// Listen to fullscreen toggle
player.addEventListener('fullscreen', () => {
  console.log('Fullscreen toggled');
});

// Listen to rrweb's native replayer events
player.addEventListener('finish', () => {
  console.log('Playback finished');
});

player.addEventListener('resize', (dimension) => {
  console.log('Iframe resized:', dimension);
});
```

--------------------------------

### Dynamic Event Addition and Metadata Access

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Dynamically add new events to the recording during playback and access metadata or the underlying replayer instance.

```APIDOC
## Dynamic Event Addition and Metadata Access

### Description
Add events dynamically during playback, retrieve recording metadata, and access the underlying rrweb Replayer and mirror instances.

### Method
`addEvent(event)`, `getMetaData()`, `getReplayer()`, `getMirror()`

### Endpoint
N/A (Instance Methods)

### Parameters
#### `addEvent` Parameters
- **event** (eventWithTime) - Required - The new event to add to the recording.

#### `getMetaData` Parameters
N/A

#### `getReplayer` Parameters
N/A

#### `getMirror` Parameters
N/A

### Request Example
```typescript
// Add a new event to the current session
const newEvent: eventWithTime = {
  type: 3, // Example: Mousemove event
  data: {
    source: 2, // Mouse
    type: 1, // Move
    id: 123,
    x: 500,
    y: 300
  },
  timestamp: Date.now()
};

player.addEvent(newEvent);

// Get metadata about the recording
const metadata = player.getMetaData();
console.log('Total time:', metadata.totalTime);
console.log('Start time:', metadata.startTime);
console.log('End time:', metadata.endTime);

// Access the underlying rrweb Replayer instance
const replayer = player.getReplayer();
replayer.setConfig({ mouseTail: true });

// Access the mirror (DOM snapshot mirror) for advanced use cases
const mirror = player.getMirror();
const element = mirror.getNode(123); // Get node by ID
```

### Response
#### Success Response (200)
- **`getMetaData()`**: Returns an object with `totalTime`, `startTime`, and `endTime` properties.
- **`getReplayer()`**: Returns the underlying rrweb Replayer instance.
- **`getMirror()`**: Returns the DOM snapshot mirror instance.

#### Response Example
```json
// Example response from getMetaData()
{
  "totalTime": 150000,
  "startTime": 1544756766750,
  "endTime": 1544756916750
}
```
```

--------------------------------

### Event Listeners

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Listen to various player events to integrate custom logic or update UI based on playback state.

```APIDOC
## Event Listeners

### Description
Listen to player events for custom integrations.

### Method
`addEventListener(eventName, callback)`

### Endpoint
N/A (Instance Method)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **eventName** (string) - Required - The name of the event to listen for.
- **callback** (function) - Required - The function to execute when the event is triggered. The callback receives a `detail` object containing event-specific payload.

### Request Example
```typescript
// Listen to player state changes
player.addEventListener('ui-update-player-state', (detail) => {
  console.log('Player state:', detail.payload); // 'playing', 'paused', or 'live'
});

// Listen to current time updates
player.addEventListener('ui-update-current-time', (detail) => {
  const currentTime = detail.payload;
  console.log(`Current playback time: ${currentTime}ms`);
});

// Listen to progress updates (percentage from 0 to 1)
player.addEventListener('ui-update-progress', (detail) => {
  const progress = detail.payload;
  console.log(`Playback progress: ${(progress * 100).toFixed(2)}%`);
});

// Listen to fullscreen toggle
player.addEventListener('fullscreen', () => {
  console.log('Fullscreen toggled');
});

// Listen to rrweb's native replayer events
player.addEventListener('finish', () => {
  console.log('Playback finished');
});

player.addEventListener('resize', (dimension) => {
  console.log('Iframe resized:', dimension);
});
```

### Response
#### Success Response (200)
N/A (Event listeners do not directly return a response but trigger callbacks.)

#### Response Example
N/A
```

--------------------------------

### Type Checking Utility with TypeScript

Source: https://context7.com/rrweb-io/rrweb-player/llms.txt

Provides a utility function `typeOf` for robustly determining the type of various JavaScript values, including arrays, null, and Date objects. This function enhances type safety within the player's codebase.

```typescript
import { typeOf } from './utils';

// Type checking utility
const type = typeOf([1, 2, 3]); // 'array'
const type2 = typeOf(null); // 'null'
const type3 = typeOf(new Date()); // 'date'
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.