opentok-react-layout/README.md

[](https://badge.fury.io/js/opentok-react-layout)

[![npm version](https://badge.fury.io/js/opentok-react-layout.svg)](https://badge.fury.io/js/opentok-react-layout)

# opentok-react-layout

> React utility to manage layout for Opentok streams

## Prerequisites

1. NodeJS
2. Register [Opentok](https://tokbox.com/developer/sdks/js/) to get authentication.
3. [opentok-react](https://www.npmjs.com/package/opentok-react)

## Installation

To install and set up the library, run:

```sh
$ npm install -s opentok-react-layout
```

Or if you prefer using Yarn:

```sh
$ yarn add opentok-react-layout
```

_NOTE_: remember to install the peer dependency of [`opentok-react`](https://www.npmjs.com/package/opentok-react)

## Usage

##### Importing opentok-react-layout

Import the opentok-react-layout utility into your React application:

```tsx
import { updateLayout } from "opentok-react-layout";
```

Or require it if you need to use CommonJS modules:

```jsx
const { updateLayout } = require("opentok-react-layout");
```

The `updateLayout()` will accept only parameter that is streams array. Call this utility whenerver the stream updated.

```jsx
updateLayout(streams[])
```

_Note_: Currently supporting Picture-in-picture and Grid layout

##### Example with opentok-react and opentok-react-layout

```jsx
import React from "react";

import {
  OTPublisher,
  OTSession,
  OTStreams,
  OTSubscriber,
  preloadScript,
} from "opentok-react";

import { updateLayout } from "opentok-react-layout";

import "./App.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      streams: [],
    };
    this.sessionEvents = {
      streamCreated: event => {
        this.setState(
          {
            streams: [...this.state.streams, event.stream],
          },
          () => updateLayout(this.state.streams)
        );
      },
      streamDestroyed: event => {
        this.setState(
          prevState => ({
            streams: prevState.streams.filter(
              stream => stream?.id !== event.stream.id
            ),
          }),
          () => updateLayout(this.state.streams)
        );
      },
    };
  }

  onError = err => {
    this.setState({ error: `Failed to connect: ${err.message}` });
  };

  render() {
    return (
      <OTSession
        apiKey={OPENTOK_API_KEY}
        sessionId={OPENTOK_SESSION_ID}
        token={OPENTOK_SESSION_TOKEN}
        eventHandlers={this.sessionEvents}
        onError={this.onError}
      >
        {this.state.error ? <div id="error">{this.state.error}</div> : null}
        <div className="publisher">
          <OTPublisher
            properties={{
              width: "100%",
              height: "100%",
              insertMode: "append",
            }}
          />
        </div>
        <OTStreams>
          <div className="subscriber">
            <OTSubscriber
              properties={{
                insertMode: "append",
                fitMode: "contain",
                height: "100%",
                width: "100%",
              }}
            />
          </div>
        </OTStreams>
      </OTSession>
    );
  }
}

export default preloadScript(App);
```

In the above example, calling the `updateLayout()` on stream events like streamCreated and streamDestroyed.

The above example is with class-based component, you can also use function-based component.

## Authors

**Dinesh Panjwani** - [GitHub](https://github.com/dineshpanjwani33)

## License

None