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

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() })
    }
}