react-native-onrewindsdk

react native wrapper for onrewind sdk

Installation

npm install react-native-onrewindsdk

You also need to install OnRewindSDK. For iOS:

  pod 'OnRewindSDK', :podspec => './specs/OnRewindSDK.podspec'
  pod 'onrewindshared', :podspec => './specs/onrewindshared.podspec'

# to download spec you can use the following script:

def download_spec! (options={})
  url = options[:url]
  FileUtils.mkdir_p './specs'
  Dir.chdir('./specs'){
    `curl -X GET '#{url}' -O -k -f -L`
  }
end

$onrewind_product_base_url='https://origins-mobile-products.s3.eu-west-1.amazonaws.com/onrewind_player/proximus/1.1.61'

download_spec!(url: "#{$onrewind_product_base_url}/OnRewindSDK.podspec")
download_spec!(url: "#{$onrewind_product_base_url}/onrewindshared.podspec")

For Android in Application class:

public class MainApplication extends Application implements ReactApplication {

   @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);

        OnRewind.initialize(new OnRewind.InitParams.Builder()
                .setApplicationContext(this)
                .setEnvironment(Environment.Production.INSTANCE)
                .build());
    }


     private final ReactNativeHost reactNativeHost =
            new DefaultReactNativeHost(this) {
              ....

              @Override
                protected List<ReactPackage> getPackages() {
                    @SuppressWarnings("UnnecessaryLocalVariable")
                    List<ReactPackage> packages = new PackageList(this).getPackages();
                    packages.add(new VideoPackage());
                    packages.add(new OnRewindPackage()); // Add this package to use onrewind overlay
                    return packages;
                } 

              .....
            }
}

in project level build gradle:

allprojects {
    repositories {
      ....
      maven {
            url "https://maven.pkg.github.com/netcosports/maven-packages"
            credentials {
                username project.ghUsername
                password project.ghPassword
            }
        }
    }
}

in module level build gradle:

implementation("com.origins-digital.onrewind:player-proximus:1.1.87") // put correct version

Usage

const OnRewindControls = requireNativeComponent('OnRewindControls');
const OnRewindPlayerModule = NativeModules.OnRewindPlayerModule;

// set account id

OnRewindPlayerModule.setAccountKey("SkH0O4D5H")


// add overlay

<OnRewindControls
  gameId="66992" // Put your game id here
  style={styles.controls}
  onPlaybackStateChanged={(event: NativeSyntheticEvent<String>) => {
    console.log("TEST: entered playbackStateChanged")
    let state = event.nativeEvent.playbackState;
    if (state === "play") {
      this.video?.play()
    } else if (state === "pause") {
      this.video?.pause()
    }
  }}
  onPlaybackSeekTo={(event: NativeSyntheticEvent<String>) => {
    let seekTo = event.nativeEvent.seekTo;
    this.video?.setPosition(seekTo)
  }}
>
</OnRewindControls>

// handle position and duration

OnRewindPlayerModule.updatePlayerPosition(position, duration, bufferedPercents)

// send video player state into onrewind sdk

switch (playbackState) {
  case PlayerState.Idle:
     OnRewindPlayerModule.updatePlayerState("idle")
    break;
  case PlayerState.Preparing:
     OnRewindPlayerModule.updatePlayerState("ready")
    break;
  case PlayerState.Buffering:
     OnRewindPlayerModule.updatePlayerState("loading")
    break;
  case PlayerState.Pausing:
     OnRewindPlayerModule.updatePlayerState("paused")
    break;
  case PlayerState.Playing:
     OnRewindPlayerModule.updatePlayerState("playing")
    break;
  case PlayerState.Finished:
     OnRewindPlayerModule.updatePlayerState("finished")
    break;
}

// if you have an error

OnRewindPlayerModule.setError(error.message)

// when your player has finished

OnRewindPlayerModule.seekCompleted()

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library