@youon/react-native-player

YouOn's react native player with integration

$3

- "@youon/player-api-wrapper": "^0.1.0",
- "luxon": "*",
- "prop-types": "^15.7.2",
- "react-native-device-info": "^11",
- "react-native-google-analytics": "^1.3.2",
- "react-native-slider": "^0.11.0",
- "react-native-svg": "^15",
- "react-native-video": "^6",
- "react-xml-parser": "^1.1.2"
- "react-native-google-cast" : "^4"
- "tinycolor2": "^1.4.1"

$3

``jsx

import { Player , PlayerLive } from '@youon/react-native-player';

class ReactComponent extends Component { ...

render(){ return( ); }

}

`$3`

##### Props Prop | required | type | description ---- | ---- | ---- | ---- publicId| true | number | string | Video public ID apikey| true | string | API Key, apitoken| true | string | API TOKEN, apiHost| true | string | API HOST, poster| false | string | Video Poster title| false | string | Video Title startVideoAt | false | number | seconds where video start to play, env| false | string('dev', 'prod') | API environment toggleResizeModeOnFullscreen | false | bool | playInBackground | false | bool | playWhenInactive | false | bool | showOnStart | false | bool | ga | false | string | Goggle Analytics ID (UA-XXXXX-X) paused | false | bool | repeat | false | bool | volume | false | number | muted | false | bool | rate | false | number | onLoadStart | false | func | onTimedMetadata | false | func | onBuffer | false | func | onStepBackwards | false | func | onStepForwards | false | func | onLoad | false | func | onError | false | func | onEnd | false | func | onProgress | false | func | onPausedChange | false | func | controls | false | object preview| false | bool | showPosterAfterPreview | false | bool | onEndPreview | false | func | theme | false | obj | { baseColor,textColor,backgroundColor,liveColor } playlist | false | array | [{ id, image, title, publicId }] playlistIndex | false | number | onPlaylistVideoChange | false | func | ({ id, image, title, publicId },index)=>{}

#### methods

togglePlayPause

muted(muted) - set Muted volume

seek(time) - seek time in player

setFullscreen(fullscreen) - set Fullscreen

play() - play video if not already playing

pause() - pause video if not already paused

paused() - check if video is paused

#### controls

Controls object has a specific structure

The player controls are divided into 3 areas, Header , MainControls and controlBar, aka, top, middle, and center

the loading control will always appear on center

with the plugins object you can insert a plugin into one of the 3 areas

`js

controls: { header: [ { type: PlayerPlugin , props: {} }, ... ], mainControls: [ { type: PlayerPlugin , props: {} }, ... ], controlBar: [ { type: PlayerPlugin , props: {} }, ... ], loading : { type: PlayerPlugin , props: {} }, plugins: { header: [ { type: PlayerPlugin , props: {} }, ... ], mainControls: [ { type: PlayerPlugin , props: {} }, ... ], controlBar: [ { type: PlayerPlugin , props: {} }, ... ], other: [ { type: MultiTapSeek, props: { step: 10 } }, ] } },

##### Default Props`javascript

Player.defaultProps = { title: '', startVideoAt: 0, toggleResizeModeOnFullscreen: false, playInBackground: false, playWhenInactive: false, showOnStart: false, paused: false, repeat: false, volume: 1, muted: false, rate: 1, env: 'dev', playlist: [], playlistIndex: 0, theme: { baseColor: "#00A6F0", textColor: "#fff", backgroundColor: "#000", liveColor: "#ee8e31", }, onPlaylistVideoChange: null, controls: { header: [ { type: BackButton , props : {} }, { type: HeaderTitle, props : {} }, { type: CastButton , props: {}} ], mainControls: [ { type: BackwardSkipButton, props: { step: 10 } }, { type: BigPlayPauseButton , props: {} }, { type: ForwardSkipButton , props: { step: 10 } }, ], controlBar: [ { type: PlayerTime, props : {} }, { type: Spacer , props: {}}, { type: ShareButton , props : {} }, { type: MuteButton , props: {}}, { type: PlaylistButton , props : {} }, { type: ProgressBar, props : {} },

], loading : { type: PlayerLoading , props: {} }, plugins: { header: [

], mainControls: [

], controlBar: [

], other: [ { type: OnScreenGraphicsPlugin, props: {} }, { type: MultiTapSeek, props: { step: 10 } }, { type : PlaylistModal , props : {} },

] } }, plugins : [] };

`$3`

to create more Plugins you can extend the PlayerPlugin class

every plugin has access to all the player props

``javascript

class PlayerPlugin extends Component {

constructor(props) { super(props); }

render() { return null; } }

PlayerPlugin.propTypes = { volume: PropTypes.number, paused: PropTypes.bool, muted: PropTypes.bool, rate: PropTypes.number, source: PropTypes.object, fullscreen: PropTypes.bool, preview: PropTypes.bool, showPosterAfterPreview: PropTypes.bool, onEndPreview: PropTypes.func, currentTime: PropTypes.number, duration: PropTypes.number, player: PropTypes.object, publicId: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), apikey: PropTypes.string.isRequired, apitoken: PropTypes.string.isRequired, poster: PropTypes.string, title: PropTypes.string, mode: PropTypes.oneOf(['vod', 'live', 'dvr']), startVideoAt: PropTypes.number, env: PropTypes.string,

}

PlayerPlugin.defaultProps = {}

#### currently Available Plugins

- BackButton - PlayerTime - PlayerLoading - ControlButton - HeaderTitle - LiveButton - MultiTapSeek - BigPlayPauseButton - ForwardSkipButton - BackwardSkipButton - PlayPauseButton - ProgressBar - Spacer - MuteButton - FullscreenButton

`$3`

##### Default Props`javascript

PlayerLive.defaultProps = { title: '', toggleResizeModeOnFullscreen: false, playInBackground: false, playWhenInactive: false, showOnStart: false, paused: false, repeat: false, volume: 1, muted: false, rate: 1, env: 'dev', theme: { baseColor: "#00A6F0", textColor: "#fff", backgroundColor: "#000", liveColor: "#ee8e31", }, controls: { header: [ { type: BackButton , props : {} }, { type: HeaderTitle, props : {} }, { type: CastButton , props: {}} ], mainControls: [ { type: BigPlayPauseButton , props: {} }, ], controlBar: [ //{ type: PlayPauseButton, props: {} }, { type: LiveButton , props : {} }, { type: PlayerTime, props : { showCurrent : false, showDuration : false, } }, { type: Spacer, props: {} }, { type: ShareButton , props : {} }, { type: MuteButton , props: {}}, { type: ProgressBar, props : {} },

], loading : { type: PlayerLoading , props: {} }, plugins: { header: [], mainControls: [], controlBar: [], other: [ { type: OnScreenGraphicsPlugin, props: {} } ] } }, plugins : [] };