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

Chapters

Using the Chapters metadata section, it's possible to define bookmarks in the timeline. The "Next Item" and "Previous Item" buttons will show up in the media controls

const playerConfiguration = {
   metaData: {
        chapterInfo: [
          {startTimeMs: 0, title: 'Chapter 1'},
          {startTimeMs: 60 * 1000, title: 'Chapter 2'},
          {startTimeMs: 120 * 1000, title: 'Chapter 3'},
        ],
      },
};