Skip to main content

Mini controller

This guide explains how to implement a Cast Mini Controller in a React Native app that integrates casting through rn-qp-nxg-player. The mini controller is a compact UI surface that appears when the user is connected to a Cast session and provides basic playback controls + progress.

This document focuses on what to build and what to listen to.

Key components​

Show / Hide Mini Controller​

  • Show the mini controller only when casting is active / connected, Hide otherwise.
    const castListener: CastEventListener = {
    ...
        async castSessionStarted(param: any) {
            // show min-controller
        },
        async castSessionEnded() {
            // hide min-controller
        },
    ...
        }

Playback State & UI Toggle (Play / Pause)​

Reflect the receiver’s playback state in the mini controller and allow the user to toggle:

   const castListener: CastEventListener = {
    castStateChange(
      playbackState: PlaybackStateValue,
      bufferingState: BufferingStateValue,
      seekingState: SeekingStateValue,
    ) {
        if (playbackState === 'STARTED') {
            // show pause button
        } else if (playbackState === 'PAUSED') {
            // show play button
        }

        if (bufferingState === 'ACTIVE') {
            // show buffering
        }
    }
   }

Playback Progress (Display)​

Get the playback progress from cast player listener.

   const castListener: CastEventListener = {
    castProgressUpdate(currentPosition: number, duration: number, playerContext: string) {
        // display playback progress (castCurrentPosition / castDuration)
    }
   }

Playback Progress Seeking (Scrub / Seek)​

Perform seek actions for the active cast content initiated from the sender.

await castAuthorizer.seek(seekPosition);

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;

References​

Refer to your app's mini-controller implementation (e.g., NowPlayingCard) for a concrete UI example.