Skip to main content

Cast up-next view

This guide describes how to implement an Up-Next UI for Chromecast in a React Native app using rn-qp-nxg-player.

An Up-Next view typically appears when:

  • a cast session is active, and
  • you want to show the next recommended/queued item, and
  • allow the user to jump to the next item on the receiver.

Key components​

Show / Hide Up-Next view​

  • Show on receiving castPreloadStatusUpdated callback with content metadata, Hide if received callback with null metadata. Refer docs for more info about data received.
   const castListener: CastEventListener = {
    castPreloadStatusUpdated: function (param?: CastMediaMetadata): void {
      if (param) {
        // show up-next view
      } else {
        // hide up-next view
      }
    }
   }

Content Details (Metadata to show in Mini Controller)​

Call getCurrentItem() to get the currently playing casted content on mini-controller. Refer docs for more info.

let currentItem = await castAuthorizer.getCurrentItem();

Image Details (Image Url)​

Get list of images associated to casted content as below.

let currentItem = await castAuthorizer.getCurrentItem();

let castImages = currentItem?.images;

Jump to next item​

Call jumpToNextItem() to advance to next content queued. Refer docs

await castAuthorizer.jumpToNextItem();

References​

Refer to your app's Up-Next UI implementation (e.g., UpNextCard) for a concrete UI example.