@youon/react-native-player

4.2.1 • Public • Published

@youon/react-native-player

npm

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

Readme

Keywords

none

Package Sidebar

Install

npm i @youon/react-native-player

Weekly Downloads

14

Version

4.2.1

License

MIT

Unpacked Size

841 kB

Total Files

10

Last publish

Collaborators

  • bgomes
  • psilva_uon
  • fmoreira_youon