react-native-raiplayer

Player per app basate su react native

Installation

Install via npm using the related gitlab deploy token

username: gitlab+deploy-token-18
password: XU9r-VvRy8DBmQai15BL

with the command

$ npm i git+https://gitlab+deploy-token-18:[email protected]/mobile/raiplayer-react-native[#{branch|tag}]

Extra step for iOS

Add private RAISpecs repo to cocoapods

pod repo add RAISpecs https://gitlab.rai.it/mobile/specs.git

Go to podfile in host app and add the following lines at begin of file:

source 'https://github.com/CocoaPods/Specs.git'
source 'https://gitlab.rai.it/mobile/specs.git'

You can edit the .swift file using example app and edit podfile at line where is the comment 'uncomment for development purpose' and then relaunch pod install

RaiPlayer Architecture

Usage

import { PlayerView } from 'react-native-raiplayer';
import {
  RaiPlayerManager,
  AbstractPlayer,
  usePlayerActions,
} from 'rai-player-core';

// ...
 
 const { setPlayer } = usePlayerActions();

 const _onInit = useCallback(
    (player: AbstractPlayer) => {
      setPlayer(new RaiPlayerManager(player, { debug: true }));
    },
    [setPlayer]
  );

  return (
    <PlayerView
      onClick={() => console.log('click on player')}
      onInit={_onInit}
      style={styles.box}
    />
  );

Hooks

You can use usePlayer hook to invoke player functions

Player Methods

| Method | Parameters | Description | |-----------------|-------------------|---------------------------------------------| | initialize | | initialize player | | loadItem | url: string | load item with url | | play | | send play command to player | | pause | | send pause command to player | | release | | stop player and release resources | | seekIncrementTo | increment: number | seek to specific increment | | seekTo | position: number | seek to specific position | | goToLiveHead | | Move player to the head of the live content |

Fullscreen

Use PlayerViewFullscreenComponent React Native component to render a fullscreen player.

Library provides useFullScreen and useFullScreenDispatch to get and set fullscreen current state.

import { PlayerViewFullscreenComponent } from 'react-native-raiplayer';
import { useFullScreen, useFullScreenDispatch } from 'react-native-raiplayer';

const isFullscreen = useFullScreen();
const setFullscreen = useFullScreenDispatch();

return (
    <View>
      <AppComponent />  //component with main player and button to invoke useFullScreenDispatch with true param
      {isFullscreen && (
        <View style={style.playerFullscreenContainer}>
          <PlayerViewFullscreenComponent
            style={style.playerFullscreenContainer}
          />
          <TouchableOpacity
            onPress={() => {
              setFullscreen(false);
            }}
          >
            <Text>EXIT FULLSCREEN</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
);
  
const style = StyleSheet.create({
  playerFullscreenContainer: {
    width: '100%',
    height: '100%',
    backgroundColor: '#000000',
    position: 'absolute',
  },
  )}

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