# @flowplayer/react-flowplayer

The official React component wrapping Wowza Flowplayer.

## Installation

[React-flowplayer](https://www.npmjs.com/package/@flowplayer/react-flowplayer) exists in NPM. Use your favorite package manager to install it.

The component has a peer dependency to both [react](https://www.npmjs.com/package/react) and the main Flowplayer Native NPM package [@flowplayer/player](https://www.npmjs.com/package/@flowplayer/player) if you wish to use player plugins.

### Yarn


```js
yarn add react @flowplayer/player @flowplayer/react-flowplayer`
```

### NPM


```js
npm install react @flowplayer/player @flowplayer/react-flowplayer`
```

## Importing the player


```js
import Flowplayer, { useFlowplayer } from "@flowplayer/react-flowplayer"
```

## Basic usage

First, you need to import the player as explained above. Then, you can include a player with video source in your component:


```js
<Flowplayer token="<wowza-flowplayer-token>" src="//cdn.wowza.com/somevideo.mp4" />
```

## Configuration

All [configuration](/docs/wowza-flowplayer/player/configure) options are aggregated in the  the `opts` prop.


```javascript
  import { useRef } from "react"
  import Flowplayer, { useFlowplayer } from "@flowplayer/react-flowplayer"
  .
  .
  const playerRef = useRef(null)
  const playerApi = useFlowplayer(playerRef)
  .
  // Do something with API
  .
  return (
    <Flowplayer src="<URL>" ref={playerRef} token="<wowza-flowplayer-token>" opts={{ ui: 10, asel: true }} />
  )
```

## Using plugins

The react component is using the default export of `@flowplayer/player`. This means that the player does not come with any pre-registered plugins.

If you need functionality outside of the default player, you need to register it by hand, and, import `@flowplayer/player` as well.

Example - Loading an HLS video from the Wowza CDN utilizing the [HLS plugin](/docs/wowza-flowplayer/plugins/hls):


```js
import Flowplayer from "@flowplayer/react-flowplayer"
import HLSPlugin from "@flowplayer/player/plugins/hls"
import flowplayer from "@flowplayer/player"

// Register plugins
flowplayer(HLSPlugin)

//configure 
const MyApp = () => {
    return <Flowplayer token="<wowza-flowplayer-token>" src="https://cdn.flowplayer.com/somepath/somevideo.m3u8" />
}
```

## useFlowplayer hook usage


```js
  import { useRef } from "react"
  import Flowplayer, { useFlowplayer } from "@flowplayer/react-flowplayer"
  .
  .
  const playerRef = useRef(null)
  const playerApi = useFlowplayer(playerRef)
  .
  // Do something with API
  .
  return (
    <Flowplayer src="<URL>" ref={playerRef} token="<my-token>" />
  )
```

## Accessing the player API

The player react component will react to changed properties. This means that you don't necessarily need to access the API for things like changing the video source. The player react component will handle this under the hood.

If you need to access the [player API](/docs/wowza-flowplayer/player/player-api#methods), the component comes with a [hook](https://reactjs.org/docs/hooks-intro.html) called `useFlowplayer()`:


```js
import { useFlowplayer } from "@flowplayer/react-flowplayer"
```

To use the hook, you need to pass your player token to the hook in order to get a pre-populated `Flowplayer` component returned.

Then, you can use the hook with the ref to obtain an API handle:


```js
const playerRef = useRef()
const playerApi = useFlowplayer(playerRef)
.
.
.

useEffect(() => {
  if (!playerApi) return;

  playerApi.play();

}, [playerApi])

.
.
.
return (
  <Flowplayer token="<my-token>" ref={playerRef}>
)
```

If the API is not yet available, then `playerApi` will be `null` so you need to safe-guard against that.

## Props

All available props of the `Flowplayer` component:

| Prop | Description | Type |
|  --- | --- | --- |
| token | Token issued by Wowza Flowplayer | string |
| src | URL of the media asset | string |
| opts | Player [ configuration ](/docs/wowza-flowplayer/player/configure) | Config |
| ref | The ref of the Wowza Flowplayer component | React.Ref |


### Typescript types

You can get the props types by importing them from `@flowplayer/react-flowplayer`:


```javascript
import type { FlowplayerProps } from "@flowplayer/react-flowplayer"
```

## Advanced demo

An advanced demo with sample app can be found on [Github](https://github.com/flowplayer/advanced-demos/tree/master/demos/react).

There is also a [page with the sample app](https://flowplayer.github.io/advanced-demos/react/).