Now Playing
The Now Playing feature provides convenient player control from both the Control Center and the Lock Screen, available on Android and iOS devices. This functionality is implemented as a separate plugin, which must be installed and enabled.
Setup
First, install the @castlabs/react-native-prestoplay-now-playing
package:
npm install @castlabs/react-native-prestoplay-now-playing
Once the plugin is installed, enable it when initializing the SDK, by passing the NowPlayingPlugin
class. For example:
import {Sdk} from '@castlabs/react-native-prestoplay';
import {NowPlayingPlugin} from '@castlabs/react-native-prestoplay-now-playing';
Sdk.initialize({
licenseKey: { /* Valid license here */ },
plugins: [NowPlayingPlugin],
});
iOS
Initialize an audio session in the ./ios/<APP_NAME>/AppDelegate.mm
file:
#import <AVFoundation/AVFoundation.h>
//...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//...
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:nil];
[[AVAudioSession sharedInstance] setActive:true error:nil];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
Finally, enable background audio by adding the following snippet to the ./ios/<APP_NAME>/Info.plist
file:
<key>UIBackgroundModes</key>
<array>
<string>audio</string>
</array>
Usage
The Now Playing feature is enabled by default. To improve the user experience, a title and artwork can be added to the player configuration. For example:
const playerConfiguration = {
autoPlay: true,
source: {
url: 'https://demo.cf.castlabs.com/media/prestohls/master.m3u8',
type: ContentType.Dash,
},
metaData: {
title: 'Big Buck Bunny',
thumbnailUrl: '<URL_TO_THUMBNAIL>',
},
};
To disable the Now Playing feature, set nowPlaying.enabled
to false
in the player configuration. For example:
const playerConfiguration = {
autoPlay: true,
source: {
url: 'https://demo.cf.castlabs.com/media/prestohls/master.m3u8',
type: ContentType.Dash,
},
nowPlaying: {
enabled: false,
},
};