React-native-media-suite NPM

React Native Media Suite

This is a video and audio component for react-native apps, supporting both iOS and Android, with API similar to HTML video.

Supported media types:

iOS: Should be the same as those supported by AVPlayer
Android: Should be the same as those supported by ExoPlayer

npm.io

Installation

Using npm:

$ npm install --save react-native-media-suite

or using yarn:

$ yarn add react-native-media-suite

For each platform (iOS/Android) you plan to use, follow one of the options for the corresponding platform.

Standard Method

Run $ react-native link react-native-media-suite to link the react-native-media-suite library. You only need to do this once, it will link both Android and iOS

Manually

Right click on Libraries and choose 'Add files to "Project Name"'.
Navigate to project_name/node_modules/react-native-media-suite/ios/ and add the file react-native-media-suite.xcodeproj.
Open project settings and at the top choose 'Build Phases'
Expand the 'Link Binary With Libraries' section.
Click the + at the bottom of the list
Add the libreact-native-media-suite.a file

Standard Method

Run $ react-native link react-native-media-suite to link the react-native-media-suite library. You only need to do this once, it will link both Android and iOS.

Manually

`android/settings.gradle`

include ':react-native-media-suite'
project(':react-native-media-suite').projectDir = new File('../node_modules/react-native-media-suite/android')

`android/app/build.gradle`

dependencies {
    ...
    compile project(':react-native-media-suite')
}

`android/app/src/main/java/.../MainApplication.java` (or `MainActivity.java` on RN <= 0.29)

import za.co.digitalwaterfall.reactnativemediasuite.MediaSuitePackage;
...
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MediaKitPackage()
    );
}

Documentation

Video Player API

import Video from 'react-native-media-suite';

render() {
    return (
        <Video
            src="https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd"
            ref={ref => this.videoRef = ref}
            style={styles.videoStyle}
            onError={this.videoError}                // Callback when video cannot be loaded
            onProgress={this.videoProgress}          // Callback called every second to give info about playback
        />
    );
}

var styles = StyleSheet.create({
  videoStyle: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Reference Methods

play()

Resumes playback.

Example:

this.videoRef.play();

Platforms: All

pause()

Pauses playback.

Example:

this.videoRef.pause();

Platforms: All

seekTo(milliseconds)

Seek to the specified position represented by milliseconds, milliseconds is a integer value.

Example:

this.videoRef.seekTo(33300); //Seek to 33.3 seconds

Platforms: All

presentFullscreenPlayer()

Puts the player into fullscreen mode.

On Android, this puts the navigation controls in fullscreen mode. Note this does not put the video into fullscreen, will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.

Example:

this.videoRef.presentFullscreenPlayer();

Platforms: Android

dismissFullscreenPlayer()

Takes the player out of fullscreen mode.

Example:

this.videoRef.dismissFullscreenPlayer();

Platforms: Android

Properties

Configurable props

Property Name	Type	Description	iOS	Android
`src`	string	The URL of the video or downloadID	:white_check_mark:	:white_check_mark:
`autoplay`	boolean	True to automatically begins to play. Default is `false`.	:white_check_mark:	:white_check_mark:
`loop`	boolean	`true` to automatically seek back to the start upon reaching the end of the video. Default is `false`.	:white_check_mark:	:white_check_mark:
`muted`	boolean	`true` to silence the audio. Default is `false`.	:white_check_mark:	:white_check_mark:
`ignoreSilentSwitch`	boolean	`true` to ignore the iPhone silent switch when playing audio.	:white_check_mark:	:x:

Events

Property Name	Description	iOS	Android
`onPlayerPause`	Called when playback is paused.	:white_check_mark:	:white_check_mark:
`onPlayerPlay`	Called when playback is resumed or started.	:white_check_mark:	:white_check_mark:
`onPlayerEnd`	Called when playback is finished.	:white_check_mark:	:white_check_mark:
`onPlayerBuffer`	Called when the player buffers.	:white_check_mark:	:white_check_mark:
`onPlayerBufferOk`	Called when the player's buffer is full enough to resume playback without stalling.	:white_check_mark:	:white_check_mark:
`onPlayerProgress`	Called every second if the player is playing, with the player's current progress.	:white_check_mark:	:white_check_mark:
`onPlayerError`	Called when the player has encountered an error.	:white_check_mark:	:white_check_mark:
`onPlayerBufferChange`	Called when the buffered duration changes.	:white_check_mark:	:white_check_mark:
`onPlayerLoadStart`	Called when player loads for the first time.	:white_check_mark:	:white_check_mark:
`onPlayerLoad`	Called when the player loaded content.	:white_check_mark:	:white_check_mark:
`onPlayerSeek`	Called when the player is seeking.	:x:	:white_check_mark:
`onPlayerTimedMetadata`	Called with The timed metadata encountered most recently by the media stream.	:x:	:white_check_mark:
`onFullscreenPlayerWillPresent`	Called when the the player will start to go into fullscreen.	:x:	:white_check_mark:
`onFullscreenPlayerDidPresent`	Called when the the player has gone into fullscreen.	:x:	:white_check_mark:
`onFullscreenPlayerWillDismiss`	Called when the the player will start to exit fullscreen.	:x:	:white_check_mark:
`onFullscreenPlayerDidDismiss`	Called when the the player has exited fullscreen.	:x:	:white_check_mark:
`onPlayerReadyForDisplay`	Called when player is ready for playback to begin.	:x:	:white_check_mark:
`onPlayerRateChange`	Called when the playback rate has changed.	:x:	:white_check_mark:
`onPlayerAudioFocusChanged`	Called when the audio focus of the app has changed. (Lost audio focus or received audio focus). See Android's explanation here.	:x:	:white_check_mark:
`onPlayerAudioBecomingNoisy`	Called when the audio becomes noisy. See Android's explanation here.	:x:	:white_check_mark:

Downloader Manager API

The download manager manages downloads. It persists details to storage and handles update listeners.

The following are the all the methods of the Download Manager.

restoreMediaDownloader()

Restores the downloader. Should be called when app starts. Returns a Promise object, if the promise resolves it will return all the downloaded contents IDs.

Platforms: All

setMaxSimultaneousDownloads(maxSimultaneousDownloads: integer)

Sets the maximum number of downloads that can download concurrently.

Name	Type	Required	Description
maxSimultaneousDownloads	integer	Yes	The maximum simultaneous downloads.

Platforms: iOS (Android is fixed at 2).

createNewDownload(url: string, downloadID: string, title: string, assetArtworkURL: string, bitRate: number)

Creates a new download. Returns a Promise object, if the promise resolves it will return a new Download object. Please note: You need to still start the download using the start() method of the Download object.

Name	Type	Required	Description
url	string	Yes	The url of the HLS or Dash manifest file to be played.
downloadID	string	Yes	The ID to be assigned to the download.
title	string	Yes	The title of the asset being downloaded.
assetArtworkURL	string	Yes	The url of the artwork to save. May be null.
bitRate	string	No	The bitrate of the asset to download.

Platforms: All

addUpdateListener(listener: ?(() => \[Download\]), options: Object)

Adds an update listener for a particular download or list of downloads.

Name	Type	Required	Description
downloadID	listener: ?(() => [Download])	Yes	The callback called when the download or any of the downlods in the array are updated.
options	Object	Yes	Options that can be passed when adding an update listener. The options that can be given are `downloadIDs: string[]` and `updateImmediately: boolean`. `downloadIDs` is an array of the downloads which should be listened to. `updateImmediately` calls the listener directly after it has been added.

Platforms: All

removeUpdateListener(listener: ?(() => \[Download\]))

Removes an update listener.

Name	Type	Required	Description
downloadID	listener: ?(() => [Download])	Yes	The callback function that should be removed. (The same callback function that was added using addUpdateListener)).

Platforms: All

getDownload(downloadIDs: string[], returnWithLabels: boolean)

Retrieves all the download objects with the given IDs.

Name	Type	Required	Description
downloadIDs	string[]	Yes	The download IDs of the `download` objects to be retrieved.
returnWithLabels	boolean	No	Boolean indicating whether the downloads returned should be labeled with their download IDs.

Platforms: All

isDownloaded(downloadID: string)

Retrieves all the download objects with the given IDs.

Name	Type	Required	Description
downloadID	string	Yes	The download ID of the download to be checked.

Platforms: All

For details about the usage of the above APIs, check library/media-downloader/download-manager.js.

Download Class API

The download class manages a single download and its state.

The following are all the available methods in the Download class.

start(retry: boolean)

Starts the download.

Name	Type	Required	Description
retry	boolean	No	Retry the download (it already exists but has failed).

Platforms: All

pause()

Pauses the download.

Platforms: All

resume()

Resumes the download.

Platforms: All

cancel()

Cancels the download.

Platforms: All

delete()

Deletes the download.

Platforms: All

retry()

Retries the download.

Platforms: All

isDestroyed()

Checks if the download has been deleted.

Platforms: All

addEventListener(type: EVENT_LISTENER_TYPE, listener: ?(() => data))

Adds event listener to be called when a specific event occurs on the download.

Name	Type	Required	Description
type	EVENT_LISTENER_TYPE	Yes	The type of event to listen for.
listener	() => data	Yes	The callback function that will be called when the specific event for the download occurs.

Platforms: All

removeEventListener(listener: ?(() => data))

Removes the event listener.

Name	Type	Required	Description
listener	() => data	Yes	The callback function that should be removed.

Platforms: All

removeEventListener(listener: ?(() => data))

Removes the event listener.

Name	Type	Required	Description
listener	() => data	Yes	The callback function that should be removed.

Platforms: All

Download States

initialized: The download is created but has not been queued.
started: The download has been queued and will start to download when it is at the front of the queue.
downloading: The download is downloading, progress updates have been received.
downloaded: The download is finished downloaded.
paused: The download has been paused.
failed: The download has failed.
deleted: The download has been deleted.

Download Event Types

started: Called when the download has been queued and should start when it is at the front of the queue.
progress: Called when there is a progress update for the download.
finished: Called when the download has finished downloading.
error: Called when the download has encountered an error.
cancelled: Called when the download has been cancelled.
deleted: Called when the download has been cancelled.
paused: Called when the download has been paused.
resumed: Called when the download has been resumed after being paused.

For details about the usage of the above APIs, check library/media-downloader/download.js.

Basic Example

import { DownloadManager } from 'react-native-media-suite';

download() {
    const download = DownloadManager.createNewDownload('https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
                                                       'any-unique-string',
                                                       'Red Bull Parkour,
                                                       'https://greece.greekreporter.com/files/RedBull2.jpg',
                                                       75000
                                                      );
    download.start();

    DownloadManager.addUpdateListener(downloads => console.warn({downloads}),
                                      {downloadIDs: [download.downloadID], updateImmediately: true}
                                     );
}

For a more in depth example check out TestVideo/App.js.

Note: This example app is very confusing and is in the process of being rewritten.