@youon/react-native-player v4.4.0

@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

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

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