React-Native Media Player

Overview

React Native Media Player is a React Native component built using amazon-ivs-react-native-player, which allows you to integrate Amazon IVS (Interactive Video Service) player with customizable controls and features into your React Native application.

Installation

First, install the necessary dependencies:

npm install amazon-ivs-react-native-player react-native-element-dropdown @react-native-assets/slider styled-components

Then, import and use the IVSPlayerComponent in your application.

Usage

import React from 'react';
import IVSPlayerComponent from './IVSPlayerComponent';

const App = () => {
  return (
    <IVSPlayerComponent
      streamUrl="your_stream_url_here"
      autoplay={true}
      loop={true}
      muted={false}
      initialPaused={false}
      playbackRate={1.0}
      defaultVolume={1.0}
      autoQualityMode={true}
      isFullScreen={false}
      hideSeekBar={false}
      onError={(error) => console.error(error)}
      onLoadStart={() => console.log('Loading started')}
      onRebuffering={() => console.log('Rebuffering')}
      onVideoStatistics={(stats) => console.log(stats)}
      onLiveLatencyChange={(latency) => console.log('Latency: ', latency)}
    />
  );
};

export default App;

API

IVSPlayerComponent Props

| Prop | Type | Default | Description | |--------------------------------------|-----------------------|-------------|------------------------------------------------------------------------------| | streamUrl | string | undefined | URL of the video stream. | | autoplay | boolean | true | If true, the video will start playing automatically. | | loop | boolean | true | If true, the video will loop when it reaches the end. | | muted | boolean | false | If true, the video will be muted. | | paused | boolean | false | If true, the video will be paused. | | playbackRate | number | 1.0 | Playback rate of the video. | | volume | number | 1.0 | Volume of the video. | | quality | Quality | null | Initial video quality. | | autoMaxQuality | boolean | false | If true, the player will automatically select the maximum quality available. | | hidePlayButton | boolean | false | If true, the player will automatically hide play and pause button. | | autoQualityMode | boolean | true | If true, the player will automatically manage quality. | | maxBitrate | number | undefined | Maximum bitrate for video quality. | | liveLowLatency | boolean | false | If true, enables low latency mode for live streams. | | rebufferToLive | boolean | false | If true, rebuffers to the live edge on low latency streams. | | style | ViewStyle | undefined | Custom styles for the video player container. | | onPipChange | function | undefined | Callback when Picture-in-Picture mode changes. | | onTimePoint | function | undefined | Callback for time point events. | | resizeMode | string | undefined | Resize mode for the video player. | | pipEnabled | boolean | false | If true, enables Picture-in-Picture mode. | | onRebuffering | function | undefined | Callback for rebuffering events. | | onLiveLatencyChange | function | undefined | Callback when live latency changes. | | onError | function | undefined | Callback for error events. | | onLoadStart | function | undefined | Callback when video starts loading. | | onTextMetadataCue | function | undefined | Callback for text metadata cue events. | | onSeek | function | undefined | Callback when seeking. | | initialBufferDuration | number | undefined | Initial buffer duration. | | isFullScreen | boolean | false | If true, the player starts in full screen mode. | | hideSeekBar | boolean | false | If true, hides the seek bar. | | leftCustomComponentContainerStyle | ViewStyle | undefined | Custom styles for the left custom component container. | | rightCustomComponentContainerStyle | ViewStyle | undefined | Custom styles for the right custom component container. | | LeftCustomComponent | React.ComponentType | undefined | Custom component to render on the left side of the controls. | | RightCustomComponent | React.ComponentType | undefined | Custom component to render on the right side of the controls. | | Header | React.ComponentType | undefined | Custom header component. |

Quality Interface

interface Quality {
  bitrate: number;
  codecs: string;
  framerate: number;
  height: number;
  name: string;
  width: number;
}

DataResponse Interface

interface DataResponse {
  qualities: Quality[];
  sessionId: string;
  version: string;
}

Example

Here is a more detailed example demonstrating the use of custom components and additional props:

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import IVSPlayerComponent from 'react-native-newinstance-video-player';

const LeftComponent = () => <Text style={styles.customText}>Left Component</Text>;
const RightComponent = () => <Text style={styles.customText}>Right Component</Text>;

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <IVSPlayerComponent
        streamUrl="https://path/to/your/stream.m3u8"
        isLive={true}
        title="Live Stream"
        isFullScreen={false}
        LeftCustomComponent={LeftComponent}
        RightCustomComponent={RightComponent}
        leftCustomComponentContainerStyle={styles.customComponentContainer}
        rightCustomComponentContainerStyle={styles.customComponentContainer}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  customText: {
    color: 'white',
  },
  customComponentContainer: {
    padding: 10,
  },
});

export default App;

Contributing

Contributions are welcome! Please read the contributing guidelines first.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Lawrence Nwoko

• Email: [email protected]
• GitHub: talktothelaw

Repository

GitHub: react-native-newinstance-video-player

Bugs

For issues, please visit the GitHub Issues page.

Homepage

For more details, visit the Homepage.