@afiniti/video-player-lite/README.md

React component for playing videos

# @afiniti/video-player-lite

### Description

Lightweight React video player module built for vimeo, this is a wrapper on plyr.io with added funtionality.

### Installation

npm i @afiniti/video-player-lite

### Features

- Floating Player
- Fullscreen video
- Video Modal
- Poster
- Related Videos
- Play/pause/mute full control over the player

### Props

| Name            | Type     | Description                                |
| --------------- | -------- | ------------------------------------------ |
| `poster`          | `string` | poster url given in a string        |
| `vimeoId`        | `string` | vimeo video id                         |
| `videoSlug`        | `string` |  video slug                      |
| `videoTitle`        | `string` | title to display on video                          |
| `isFloating`      | `bool`   | Show floating video on scroll or not. Defaults to `true` |
| `playFullScreen`      | `bool`   | Play video full screen or not. Defaults to `false` |
| `openInModal`      | `bool`   | Play video in a modal append in root. Defaults to `false` |
| `playCallback`     | `method` | Action to perform on video play button               |
| `closeCallback` | `method` | Action to perform on video close button    |
| `openRelatedVideos` | `bool` | Show related videos or not. Defaults to `false`    |
| `apiUrl` | `string` | Api url from where to fetch the related videos    |

### Example Usage

The package can be integrated inside a react component as follows:

install plyr 3.6.8 in your project

```jsx
import React from 'react';
// @dependencies
import PlayerComponent from 'js/VideoPlayerLite';
// @import styles
import styles from './index.module.scss';

const Home = () => {
  return (
    <div className={styles.homeContainer}>
      <PlayerComponent
         vimeoId="546196101"
        isFloating={false}
        openInModal={true}
        playFullScreen={false}
        openRelatedVideos={true}
        videoSlug="anthony-tuggle-testimonial"
        videoTitle="THE NUANCE OF AFINITI'S TECHNOLOGY"
        poster="http://media.graphcms.com/m2Mm6haVT3iKaT2VUZJQ"
        apiUrl="https://api-us-east-1.graphcms.com/v2/ckui8cam7108201xpc9tg32du/master"
      />
    </div>
  );
};

export default Home;
```
add cdn link in server.js or index.html 
```jsx
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
```