Skip to main content

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],
});

Android​

Add extra permissions and initialize the CustomMediaSessionService service in the ./android/app/src/main/AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- .... -->
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
    <!-- .... -->
    <application>
        <!-- .... -->
        <service
                android:name="com.castlabs.reactnative.nowplaying.NowPlayingPlugin$CustomMediaSessionService"
                android:foregroundServiceType="mediaPlayback"
                android:exported="true">
            <intent-filter>
                <action android:name="androidx.media3.session.MediaSessionService"/>
                <action android:name="android.media.browse.MediaBrowserService"/>
            </intent-filter>
        </service>
        <!-- .... -->
    </application>
</manifest>

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',
    artist: 'Blender Foundation'
    artworkUrl: '<URL_TO_ARTWORK>',
  },
};

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,
  },  
};