Natural Preference for Minification

    This package has been deprecated

    Author message:

    this package has been deprecated, please use react-native-jw-media-player

    @chaimpan/react-native-jwplayer

    0.1.2 • Public • Published

    react-native-jwplayer

    Getting started

    npm install https://github.com/chaimPaneth/react-native-jwplayer.git --save or $ yarn add https://github.com/chaimPaneth/react-native-jwplayer.git

    Mostly automatic installation

    Link module with

    $ react-native link react-native-jwplayer

    Then add SDK dependencies:

    Add dependencies

    iOS dependencies

    Follow official instruction sdk ios installation for installation via Cocoapods (only supported, other way wasn't tested).

    Add pod 'JWPlayer-SDK', '~> 3.5.0' to your Podfile. Then run pod install from your ios directory.

    In your info.plist properties file, create an string entry named JWPlayerKey, and set its value to be your JW Player Beta license key. Make sure you enter this string exactly as you received it from JW Player, or as it appears in your JW Player Dashboard. The string is case-sensitive.

    Android dependencies

    Insert the following lines inside the dependencies block in android/app/build.gradle:

        implementation 'com.longtailvideo.jwplayer:jwplayer-core:+'
        implementation 'com.longtailvideo.jwplayer:jwplayer-common:+'
    

    Add to AndroidManifest.xml in the Application tag above the Activity tag:

    <meta-data
               android:name="JW_LICENSE_KEY"
               android:value="<API_KEY_FOUND_IN_JW_DASHBOARD>" />
    

    Manual installation

    iOS

    1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
    2. Go to node_modulesreact-native-jwplayer and add RNJWPlayer.xcodeproj
    3. In XCode, in the project navigator, select your project. Add libRNJWPlayer.a to your project's Build PhasesLink Binary With Libraries
    4. Add dependencies
    5. Run your project (Cmd+R)<

    Android

    1. Open up android/app/src/main/java/[...]/MainApplication.java
    • Add import net.gamesofton.rnjwplayer.RNJWPlayerPackage; to the imports at the top of the file
    • Add new RNJWPlayerPackage() to the list returned by the getPackages() method
    1. Append the following lines to android/settings.gradle:
      include ':react-native-jwplayer'
      project(':react-native-jwplayer').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-jwplayer/android')
      
    2. Insert the following lines inside the dependencies block in android/app/build.gradle:
        implementation project(':react-native-jwplayer')
      
    3. Add dependencies

    Usage

    ...
    
    import JWPlayer from 'react-native-jwplayer';
    
    ...
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      player: {
        flex: 1,
      },
    });
    
    ...
    
    componentDidMount() {
      const playlistItem = {
        title: 'Track',
        mediaId: -1,
        image: 'http://image.com/image.png',
        desc: 'My beautiful track',
        time: 0,
        file: 'http://file.com/file.mp3',
        autostart: true,
        controls: true,
        repeat: false,
        displayDescription: true,
        displayTitle: true
      }
      this.JWPlayer.loadPlaylistItem(playlistItem);
    
      // for playlist
      // const playlist = [playlistItem, playlistItem]
      // this.JWPlayer.loadPlaylist(playlistItem);
    }
    
    ...
    
    render() {
    
    ...
    
    <View style={styles.container}>
      <JWPlayer
        ref={p => (this.JWPlayer = p)}
        style={styles.player}
        onBeforePlay={() => this.onBeforePlay()}
        onPlay={() => this.onPlay()}
        onPause={() => this.onPause()}
        onIdle={() => console.log("onIdle")}
        onPlaylistItem={event => this.onPlaylistItem(event)}
        onSetupPlayerError={event => this.onPlayerError(event)}
        onPlayerError={event => this.onPlayerError(event)}
        onBuffer={() => this.onBuffer()}
        onTime={event => this.onTime(event)}
        onFullScreen={() => this.onFullScreen()}
        onFullScreenExit={() => this.onFullScreenExit()}
      />
    </View>
    
    ...
    
    }

    Run example project

    For running example project:

    1. Checkout this repository.
    2. Go to Example directory and run yarn or npm i
    3. Go to Example/ios and install Pods with pod install
    4. Open demoJWPlayer.xcworkspace with XCode.
    5. Add your iOS api key for JWPlayer into Info.plist
    PlaylistItem
    Prop Description Type
    mediaId The JW media id. Int
    file The url of the file to play. String
    title The title of the track. String
    image The url of the player thumbnail. String
    autostart Should the track auto start. Boolean
    time should the player seek to a certain second. Int
    desc Description of the track. String
    controls Should the control buttons show. Boolean
    repeat Should the track repeat. Boolean
    displayDescription Should the player show the description. Boolean
    displayTitle Should the player show the title. Boolean

    Available props

    Prop Description Type
    mediaId The JW media id. Int
    file The url of the file to play. String
    title The title of the track. String
    image The url of the player thumbnail. String
    autostart Should the track auto start. Boolean
    time should the player seek to a certain second. Int
    desc Description of the track. String
    controls Should the control buttons show. Boolean
    repeat Should the track repeat. Boolean
    displayDescription Should the player show the description. Boolean
    displayTitle Should the player show the title. Boolean
    playlistItem An object of playlistItem shape. PlaylistItem
    playlist An array of playlistItems. [playlistItem] see PlaylistItem]
    nextUpDisplay Should the player show the next up item in a playlist. Boolean
    playerStyle Name of css file you put in the Main Bundle for you custom style. See below Custom-style section. String

    Available methods

    Func Description Argument
    seekTo Tells the player to seek to position, use in onPlaylistItem callback so player finishes buffering file. Int
    play Starts playing. none
    pause Pauses playing. none
    stop Stops the player completely. none
    state Returns the current state of the player idle, buffering, playing, paused. none
    position Returns the current position of the player in seconds. none
    toggleSpeed Toggles the player speed one of 0.5, 1.0, 1.5, 2.0. none
    setPlaylistIndex Sets the current playing item in the loaded playlist. Int
    setControls Sets the display of the control buttons on the player. Boolean
    loadPlaylist Loads a playlist. [PlaylistItems]
    loadPlaylistItem Loads a playlist item. PlaylistItem

    Available callbacks

    Func Description Argument
    onPlaylist A new playlist is loaded. [playlistItem] see PlaylistItem
    onBeforePlay Right before playing. none
    onBeforeComplete Right before playing completed and is starting to play. none
    onPlay Player started playing. none
    onPause Player paused playing. none
    onSetupPlayerError Player faced and error while setting up the player. {error: String}
    onPlayerError Player faced an error after setting up the player but when attempting to start playing. {error: String}
    onBuffer The player is buffering. none
    onTime Interval callback for every millisecond playing. {time: double, duration: double}
    onFullScreen User clicked on the fullscreen icon. Use this to resize the container view for the player. (Make use of https://github.com/yamill/react-native-orientation for fullscreen mode) none
    onFullScreenExit User clicked on the fullscreen icon to exit. none
    onPlaylistItem When starting to play a playlist item. JW type playlist item see docs ios, android contains additional index of current playing item in playlist 0 for default
    Custom-style

    For setting a custom style on the player:

    1. Check out the JW player guide for adding a custom css file on your player.

    2. Put your custom css file in the root folder of your native files.

    3. Add the prop playerStyle to the player and set to the name of your css file without the .css file type e.g. playerStyle={'myCssFile'}.

    4. build & run.

    Install

    npm i @chaimpan/react-native-jwplayer

    DownloadsWeekly Downloads

    0

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    6.98 MB

    Total Files

    1595

    Last publish

    Collaborators

    • chaimpan