Forviz-splitr-player NPM

Forviz Splitr Player

A simple splitr player component built with React JS.

Table of content

Installation
Components
License

Installation

Recommended using either yarn or npm for install.

# YARN
$ yarn add forviz-splitr-player

# NPM
$ npm install forviz-splitr-player --save

Components

There are 3 components; Player, withSplitr, and useSplitr.

Player component

Usage

import React from 'react'
import { Player } from 'forviz-splitr-player'

const medias = [
  {
    id: 'mediaId',
    type: 'video',  /* (video, image, url) */
    src: '/path/to/file.mp4',
    duration: 120,
    startAt: 0,
    endAt: 120,
    contentType: 'image/png' /* (video/mp4, image/jpg, image/png) */
    updated: '2019-03-04T11:06:48.420Z',
    title: 'File title'
  },
  {
    id: 'mediaId',
    type: 'video',  /* (video, image, url) */
    src: '/path/to/file.mp4',
    duration: 120,
    startAt: 0,
    endAt: 120,
    contentType: 'image/png' /* (video/mp4, image/jpg, image/png) */
    updated: '2019-03-04T11:06:48.420Z',
    title: 'File title'
  },
]

const dimension = {
  height: 360,
  width: 640,
  resize: 'contain',
  timer: true, /* set to false for hide the timer */
}

const Index = () => <Player medias={medias} {...dimension} />

export default Index

Properties

Props	Default	Type	Description
medias	-	`array`	Array of Media object
height	100%	`number, string`	Container height
width	100%	`number, string`	Container width
resize	`contain`	`enum`	The `enum` of `contain` and `cover` to resize the media.
timer	`true`	`bool`	If set to `true`, the timer will appear in the top right of player component otherwise it will disappear.

Media object

Variable	Type	Description
id	`string`	Media id
title	`string`	Media title
type	`enum`	The `enum` of `video`, `image`, and `url`.
src	`string`	Path to the file.
duration	`number`	The duration time of each media. Disable when media type is `video`.
startAt	`number`	Start time of each media related to duration time. if set to `0`, negative, or more than duration time of video, it'll use the start playback position of video.
endAt	`number`	End time of each media related to duration time. if set to `0`, negative, or more than duaration time of video, it'll use the end playback position of the video.
contentType	`enum`	The `enum` of `video/mp4`, `image/jpg`, and `image/png`.
updated	`date`	Updated date of the media.

withSplitr component

The component is a higher order component, which inject the medias data to <Player /> by providing a accountId and playlistId.

Usage

import React from 'react'
import { Player, withSplitr } from 'forviz-splitr-player'

const options = {
  accountId: 'mqdc',
  playlistId: '8gDTW1PENqEm9nmCX0MW',
  key: 'sampleKey',
}

const PlayerWithSplitr = withSplitr(options)(Player)

export default PlayerWithSplitr

Option object

Variable	Type	Description
accountId	`string`	Account ID
playlistId	`string`	Playlist ID
key	`string`	Authorise key

useSplitr

The custom hook called a medias data by providing accountId and playlistId.

Usage

import React from 'react'
import { Player, useSplitr } from 'forviz-splitr-player'

const dimension = {
  height: 360,
  width: 640,
  resize: 'contain',
}

const options = {
  accountId: 'mqdc',
  playlistId: '8gDTW1PENqEm9nmCX0MW',
  key: 'sampleKey',
}

const PlayerUseSplitr = () => {
  const [ medias, error ] = useSplitr(options)

  return (
    <Player 
      {...dimension} 
      medias={medias} 
      error={error} 
    />
  )
}

export default PlayerUseSplitr