Jetpack Composable with MediaRouteActionProvider

Question

I am currently integrating Chromcast into our app. We are using Jetpack Compose for all out UI elements. We are using a TopAppBar composable and I am trying to add the Chromecast button to it using the MediaRouteActionProvider. The only way I can find to use the MediaRouteActionProvider is by using a menu.xml and inflating the menu in onCreateOptionsMenu.

Does anyone know of a way to use an ActionProvider outside the context of a menu with Jetpack Compose or am I stuck with using a menu for now?

Answer 1

For my case I didn't have to use any fragmentmanagers. Ended up with the following.

I have a data source class to simply track whether or not the app is connected to a cast device.

interface CastDataSource {
    val castState: StateFlow<Int>
}

class CastDataSourceImpl(private val castContext: CastContext) : CastDataSource {

    private var castSession: CastSession? = null
    private val _castState = MutableStateFlow<Int>(CastState.NOT_CONNECTED)
    override val castState = _castState.asStateFlow()

    init {
        castContext.sessionManager.addSessionManagerListener(object :
            SessionManagerListener<CastSession> {
            override fun onSessionEnded(session: CastSession, error: Int) {
                if (session == castContext) {
                    castSession = null
                }
                _castState.value = CastState.NOT_CONNECTED
            }

            override fun onSessionResumed(session: CastSession, wasSuspended: Boolean) {
                castSession = session
                _castState.value = CastState.CONNECTED
            }

            override fun onSessionStarted(session: CastSession, sessionId: String) {
                castSession = session
                _castState.value = CastState.CONNECTED
            }

            override fun onSessionStarting(session: CastSession) {}
            override fun onSessionStartFailed(session: CastSession, error: Int) {}
            override fun onSessionEnding(session: CastSession) {}
            override fun onSessionResuming(session: CastSession, sessionId: String) {}
            override fun onSessionResumeFailed(session: CastSession, error: Int) {}
            override fun onSessionSuspended(session: CastSession, reason: Int) {}

        }, CastSession::class.java)
    }
}

Then instantiate it. (I had this defined in my dependency injection)

CastDataSourceImpl(CastContext.getSharedInstance(appContext))

For simplicity you can use this data source in your composable directly. (In my project I preferred to use a repository and a viewmodel.

Now with this data source you can simply collect what the cast state is and launch the necessary dialog depending on that. Use a chooser if not connected, otherwise a controller. You can pretty much use any composable that can respond to click events. Here is an example where I used the composable TopAppBar:

class YourActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         ...
         setContent {
             Scaffold(
                    scaffoldState = scaffoldState,
                    topBar = {
                        TopAppBar(
                            title = { Text(text = title) },                             
                            actions = {
                                IconButton(onClick = {
                                    if(castState == CastState.CONNECTED) {
                                        MediaRouteControllerDialog(this@VideoBrowserActivity).show()
                                    } else {
                                        MediaRouteChooserDialog(this@VideoBrowserActivity).apply {
                                            routeSelector = MediaRouteSelector.Builder()
                                                .addControlCategory(MediaControlIntent.CATEGORY_LIVE_AUDIO)
                                                .addControlCategory(MediaControlIntent.CATEGORY_REMOTE_PLAYBACK)
                                                .build()
                                        }.show()
                                    }
                                }) {
                                    Icon(
                                        imageVector = Icons.Filled.Cast,
                                        contentDescription = null
                                    )
                                }
                            }
                        )
                    }
                ) 
         }
     }
}

Answer 2

UPDATE: Decided to take another crack at this.

import android.content.Context
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import androidx.lifecycle.ViewModelProvider
import androidx.mediarouter.app.MediaRouteDialogFactory
import androidx.mediarouter.media.MediaControlIntent
import androidx.mediarouter.media.MediaRouteSelector
import com.google.android.gms.cast.framework.CastContext
import com.google.android.gms.cast.framework.CastState
import com.google.android.gms.cast.framework.CastStateListener

class MediaRouteViewModel(context: Context) : ViewModel(), CastStateListener {

    var isCastingAvailable = false
        private set

    val castingStateLiveData = MutableLiveData(CastingState.UNKNOWN)

    val mDialogFactory = MediaRouteDialogFactory.getDefault()

    val mSelector: MediaRouteSelector = MediaRouteSelector.Builder()
        .addControlCategory(MediaControlIntent.CATEGORY_LIVE_AUDIO)
        .addControlCategory(MediaControlIntent.CATEGORY_REMOTE_PLAYBACK)
        .build()

    init {
        try {
            isCastingAvailable = true

            val castingContext = CastContext.getSharedInstance(context)
            castingContext.addCastStateListener(this)
        } catch (e: Exception) {
            // handle me please
        }
    }

    fun shouldShowChooserFragment(): Boolean {
        return when (castingStateLiveData.value) {
            CastingState.NOT_CONNECTED -> true
            CastingState.UNKNOWN -> true
            CastingState.NO_DEVICES_AVAILABLE -> true
            CastingState.CONNECTING -> false
            CastingState.CONNECTED -> false
            else -> false
        }
    }

    enum class CastingState {
        CONNECTED,
        CONNECTING,
        NOT_CONNECTED,
        NO_DEVICES_AVAILABLE,
        UNKNOWN
    }

    class Factory(val context: Context) : ViewModelProvider.Factory {
        override fun <T : ViewModel?> create(modelClass: Class<T>): T {
            return MediaRouteViewModel(context = context) as T
        }
    }

    override fun onCastStateChanged(p0: Int) {
        val castingState = when (p0) {
            CastState.CONNECTED -> CastingState.CONNECTED
            CastState.CONNECTING -> CastingState.CONNECTING
            CastState.NOT_CONNECTED -> CastingState.NOT_CONNECTED
            CastState.NO_DEVICES_AVAILABLE -> CastingState.NO_DEVICES_AVAILABLE
            else -> CastingState.UNKNOWN
        }

        castingStateLiveData.postValue(castingState)
    }
}

@Composable
fun MediaRouter(
    modifier: Modifier,
    iconWidth: Dp,
    fragmentManager: FragmentManager
) {
    val context = LocalContext.current

    val mediaRouteProviderViewModel: MediaRouteViewModel =
        viewModel(factory = MediaRouteViewModel.Factory(context))

    // Can use the casting state to change the painter accordingly
    val castingState = mediaRouteProviderViewModel.castingStateLiveData.observeAsState()

    if (mediaRouteProviderViewModel.isCastingAvailable) {
        Box(modifier = modifier.size(iconWidth)) {
            Image(
                painter = painterResource(id = R.drawable.ic_baseline_cast_connected_24),
                contentDescription = null,
                modifier = Modifier
                    .clickable {
                        val shouldShowChooserFragment = mediaRouteProviderViewModel.shouldShowChooserFragment()
                        val fragmentTag = if (shouldShowChooserFragment) "MediaRouteChooserDialogFragment" else "MediaRouteControllerDialogFragment"
                        
                        val fragment = if (shouldShowChooserFragment) {
                            mediaRouteProviderViewModel.mDialogFactory
                                .onCreateChooserDialogFragment()
                                .apply {
                                    routeSelector = mediaRouteProviderViewModel.mSelector
                                }
                        } else {
                            mediaRouteProviderViewModel.mDialogFactory.onCreateControllerDialogFragment()
                        }

                        val transaction = fragmentManager.beginTransaction()
                        transaction.add(fragment, fragmentTag)
                        transaction.commitAllowingStateLoss()
                    },
                contentScale = ContentScale.FillBounds
            )
        }
    }
}

Old Post:

I'm sure there's a better way of doing this in compose but this at least gets the job done.

class MediaRouteViewModel(context: Context) : ViewModel() {
    private val mediaRouteActionProvider = MediaRouteActionProvider(context)

    val buttonView: View

    init {
        buttonView = mediaRouteActionProvider.onCreateActionView()
        mediaRouteActionProvider.routeSelector = MediaRouteSelector.Builder()
            .addControlCategory(MediaControlIntent.CATEGORY_LIVE_AUDIO)
            .addControlCategory(MediaControlIntent.CATEGORY_REMOTE_PLAYBACK)
            .build()
    }


    fun onClick() {
        mediaRouteActionProvider.onPerformDefaultAction()
    }
}

@Composable
fun MediaRouter(modifier: Modifier, iconWidth: Dp) {
    val context = LocalContext.current

    val mediaRouteProviderViewModel = MediaRouteViewModel(context)

    Box(modifier = modifier.size(iconWidth)) {
        AndroidView(factory = {
            mediaRouteProviderViewModel.buttonView
        }, modifier = Modifier.fillMaxSize())

        Box(modifier = Modifier
            .fillMaxSize()
            .clickable { mediaRouteProviderViewModel.onClick() })
    }
}