@youon/react-native-player
v4.3.0
Published
Downloads
26
Readme
@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",
- "react-native-google-analytics": "^1.3.2",
- "react-native-slider": "^0.11.0",
- "react-native-svg": "^13.0.0",
- "react-native-video": "^5.2.1",
- "react-xml-parser": "^1.1.2"
- "react-native-google-cast" : "^3.3.0"
- "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 | 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
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 | 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 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 : []
};