@youon/react-native-player

YouOn's react native player with integration

Dependencies

"@youon/player-api-wrapper": "^0.1.0",
"luxon": "^1.12.0",
"prop-types": "^15.7.2",
"react-native-device-info": "^2.1.3",
- Needs Linking!
"react-native-google-analytics": "^1.3.2",
"react-native-slider": "^0.11.0",
"react-native-svg": "^13.0.0",
- Needs Linking!
"react-native-video": "^5.2.1",
- Needs Linking!
"react-xml-parser": "^1.1.2"
"react-native-google-cast" : "^3.3.0"
- Needs Linking!

"tinycolor2": "^1.4.1"

Usage

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

class ReactComponent extends Component {
    ...

    render(){
       return( <Player />
               <PlayerLive />);
    }

}

Player Component

Props

Prop	required	type	description
publicId	true	number	string
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

    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

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 : []
};

Plugins

to create more Plugins you can extend the PlayerPlugin class

every plugin has access to all the player props

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,
  BackImage:                      PropTypes.elementType,
  PlayIcon:                     PropTypes.elementType,
  ReplayIcon:                       PropTypes.elementType,
  PauseIcon:                            PropTypes.elementType,
}

PlayerPlugin.defaultProps = {}

currently Available Plugins

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

Player Live

Props

Prop	required	type	description
publicId	true	number	string
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
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
volume	false	number
muted	false	bool
rate	false	number
onLoadStart	false	func
onBuffer	false	func
onLoad	false	func
onError	false	func
onEnd	false	func
onProgress	false	func
onPausedChange	false	func
theme	false	obj	{ baseColor,textColor,backgroundColor,liveColor }
controls	false	object

Default Props

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 : []
};

@youon/react-native-player