Update MediaRouteControllerDialog (#80)

* Update `MediaRouteControllerDialog`

* Update screenshots

---------

Co-authored-by: MGaetan89 <[email protected]>

Author: MGaetan89

demo/src/main/java/ch/srgssr/androidx/mediarouter/compose/demo/MainViewModel.kt

@@ -64,7 +64,7 @@ class MainViewModel(application: Application) : AndroidViewModel(application) {
     init {
         MediaRouter.getInstance(application).setMediaSession(mediaSession)
 
-        localPlayer.setMediaItem(mediaItem)
+        localPlayer.setMediaItems(listOf(mediaItemAudio, mediaItemVideo))
         localPlayer.volume = 0f
         localPlayer.prepare()
         localPlayer.play()
@@ -91,8 +91,8 @@ class MainViewModel(application: Application) : AndroidViewModel(application) {
         override fun onMediaMetadataChanged(mediaMetadata: MediaMetadata) {
             mediaSession.setMetadata(
                 PlatformMediaMetadata.Builder()
-                    .putText(METADATA_KEY_TITLE, mediaItem.mediaMetadata.title)
-                    .putText(METADATA_KEY_ART_URI, mediaItem.mediaMetadata.artworkUri.toString())
+                    .putText(METADATA_KEY_TITLE, mediaMetadata.title)
+                    .putText(METADATA_KEY_ART_URI, mediaMetadata.artworkUri.toString())
                     .build()
             )
         }
@@ -128,7 +128,19 @@ class MainViewModel(application: Application) : AndroidViewModel(application) {
 
     private companion object {
         @Suppress("MaxLineLength")
-        private val mediaItem = MediaItem.Builder()
+        private val mediaItemAudio = MediaItem.Builder()
+            .setUri("https://rts-aod-dd.akamaized.net/ww/13306839/63cc2653-8305-3894-a448-108810b553ef.mp3")
+            .setMimeType(MimeTypes.AUDIO_MP4)
+            .setMediaMetadata(
+                MediaMetadata.Builder()
+                    .setTitle("On en parle")
+                    .setArtworkUri("https://www.rts.ch/2023/09/28/17/49/11872957.image?w=624&h=351".toUri())
+                    .build()
+            )
+            .build()
+
+        @Suppress("MaxLineLength")
+        private val mediaItemVideo = MediaItem.Builder()
             .setUri("https://storage.googleapis.com/wvmedia/clear/h264/tears/tears.mpd")
             .setMimeType(MimeTypes.APPLICATION_MPD)
             .setMediaMetadata(

mediarouter-compose/src/debug/screenshotTest/reference/ch/srgssr/androidx/mediarouter/compose/MediaRouteControllerDialogScreenshot/ImageUriLandscapePreview_Dark_d19fbf1f_0.png

@@ -15,7 +15,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -241,10 +240,6 @@ private fun ControllerDialogContent(
                 )
             }
 
-            if (showPlaybackControl && showVolumeControl) {
-                HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))
-            }
-
             if (showVolumeControl) {
                 VolumeControl(
                     route = route,
@@ -313,6 +308,7 @@ private fun PlaybackControlRow(
         Column(
             modifier = Modifier
                 .weight(1f)
+                .padding(vertical = 8.dp)
                 .clickable(onClick = onTitleClick),
         ) {
             if (title != null) {
@@ -355,7 +351,7 @@ private fun VolumeControl(
         horizontalArrangement = Arrangement.spacedBy(8.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        var volume by remember { mutableFloatStateOf(route.volume.toFloat()) }
+        val (volume, setVolume) = remember { mutableFloatStateOf(route.volume.toFloat()) }
 
         Icon(
             imageVector = Icons.Audiotrack,
@@ -364,13 +360,10 @@ private fun VolumeControl(
 
         Slider(
             value = volume,
-            onValueChange = {
-                volume = it
-
-                route.requestSetVolume(it.toInt())
-            },
+            onValueChange = setVolume,
             modifier = Modifier.weight(1f),
             valueRange = 0f..route.volumeMax.toFloat(),
+            onValueChangeFinished = { route.requestSetVolume(volume.toInt()) },
         )
 
         if (route.isGroup && route.memberRoutes.size > 1) {
@@ -405,8 +398,8 @@ private fun DeviceGroup(
         items(routes) { route ->
             val isVolumeControlEnabled = volumeControlEnabled
                     && route.volumeHandling == RouteInfo.PLAYBACK_VOLUME_VARIABLE
-            val volumeRange = 0f..route.volumeMax.toFloat()
-            val enabled = route.isEnabled
+            val volumeMax = if (isVolumeControlEnabled) route.volumeMax else 100
+            val volumeRange = 0f..volumeMax.toFloat()
 
             var volume by remember {
                 mutableFloatStateOf(if (isVolumeControlEnabled) route.volume.toFloat() else 100f)
@@ -436,13 +429,16 @@ private fun DeviceGroup(
                         onValueChange = {
                             if (isVolumeControlEnabled) {
                                 volume = it
-
-                                route.requestSetVolume(it.toInt())
                             }
                         },
                         modifier = Modifier.weight(1f),
-                        enabled = enabled,
+                        enabled = route.isEnabled,
                         valueRange = volumeRange,
+                        onValueChangeFinished = {
+                            if (isVolumeControlEnabled) {
+                                route.requestSetVolume(volume.toInt())
+                            }
+                        },
                     )
                 }
             }

mediarouter-compose/src/debug/screenshotTest/reference/ch/srgssr/androidx/mediarouter/compose/MediaRouteControllerDialogScreenshot/ImageUriLandscapePreview_Light_b29dc7a7_0.png

@@ -7,18 +7,17 @@ package ch.srgssr.androidx.mediarouter.compose
 
 import android.app.Application
 import android.app.PendingIntent
-import android.media.MediaDescription
-import android.media.MediaMetadata
-import android.media.session.MediaController
-import android.media.session.MediaSession
-import android.media.session.PlaybackState
-import android.media.session.PlaybackState.ACTION_PAUSE
-import android.media.session.PlaybackState.ACTION_PLAY
-import android.media.session.PlaybackState.ACTION_PLAY_PAUSE
-import android.media.session.PlaybackState.ACTION_STOP
-import android.media.session.PlaybackState.STATE_BUFFERING
-import android.media.session.PlaybackState.STATE_NONE
-import android.media.session.PlaybackState.STATE_PLAYING
+import android.support.v4.media.MediaDescriptionCompat
+import android.support.v4.media.MediaMetadataCompat
+import android.support.v4.media.session.MediaControllerCompat
+import android.support.v4.media.session.PlaybackStateCompat
+import android.support.v4.media.session.PlaybackStateCompat.ACTION_PAUSE
+import android.support.v4.media.session.PlaybackStateCompat.ACTION_PLAY
+import android.support.v4.media.session.PlaybackStateCompat.ACTION_PLAY_PAUSE
+import android.support.v4.media.session.PlaybackStateCompat.ACTION_STOP
+import android.support.v4.media.session.PlaybackStateCompat.STATE_BUFFERING
+import android.support.v4.media.session.PlaybackStateCompat.STATE_NONE
+import android.support.v4.media.session.PlaybackStateCompat.STATE_PLAYING
 import android.util.Log
 import androidx.annotation.VisibleForTesting
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -47,13 +46,14 @@ import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
 
 internal class MediaRouteControllerDialogViewModel(
     private val application: Application,
     private val savedStateHandle: SavedStateHandle,
     private val volumeControlEnabled: Boolean,
 ) : AndroidViewModel(application) {
-    private var mediaController: MediaController? = null
+    private var mediaController: MediaControllerCompat? = null
 
     private val mediaControllerCallback = MediaControllerCallback()
     private val mediaRouterCallback = MediaRouterCallback()
@@ -63,10 +63,10 @@ internal class MediaRouteControllerDialogViewModel(
     private val routerUpdates = MutableStateFlow(0)
 
     @VisibleForTesting
-    internal val mediaDescription = MutableStateFlow<MediaDescription?>(null)
+    internal val mediaDescription = MutableStateFlow<MediaDescriptionCompat?>(null)
 
     @VisibleForTesting
-    internal val playbackState = MutableStateFlow<PlaybackState?>(null)
+    internal val playbackState = MutableStateFlow<PlaybackStateCompat?>(null)
     private val _isDeviceGroupExpanded = MutableStateFlow(false)
     private val _selectedRoute = routerUpdates.map { router.selectedRoute }
 
@@ -80,9 +80,14 @@ internal class MediaRouteControllerDialogViewModel(
             mediaDescription != null || playbackState != null
         }.stateIn(viewModelScope, WhileSubscribed(), false)
     val showVolumeControl = _selectedRoute.map { selectedRoute ->
-        selectedRoute.volumeHandling == RouteInfo.PLAYBACK_VOLUME_VARIABLE
-                && (isGroupVolumeUxEnabled || !(selectedRoute.isGroup && selectedRoute.memberRoutes.size > 1))
-                && volumeControlEnabled
+        if (!isGroupVolumeUxEnabled && selectedRoute.isGroup && selectedRoute.memberRoutes.size > 1) {
+            _isDeviceGroupExpanded.update { true }
+            false
+        } else {
+            selectedRoute.volumeHandling == RouteInfo.PLAYBACK_VOLUME_VARIABLE
+                    && (!_isDeviceGroupExpanded.value || isGroupVolumeUxEnabled)
+                    && volumeControlEnabled
+        }
     }.stateIn(viewModelScope, WhileSubscribed(), false)
     val imageModel = mediaDescription.map { mediaDescription ->
         mediaDescription?.iconBitmap?.takeIf { !it.isRecycled } ?: mediaDescription?.iconUri
@@ -139,14 +144,21 @@ internal class MediaRouteControllerDialogViewModel(
         )
 
         router.mediaSessionToken?.let { mediaSessionToken ->
-            val platformToken = mediaSessionToken.token as MediaSession.Token
-            val mediaController = MediaController(application, platformToken)
+            val mediaController = MediaControllerCompat(application, mediaSessionToken)
             mediaController.registerCallback(mediaControllerCallback)
 
             this.mediaController = mediaController
             mediaDescription.update { mediaController.metadata?.description }
             playbackState.update { mediaController.playbackState }
         }
+
+        viewModelScope.launch {
+            _selectedRoute.collect {
+                if (!it.isSelected || it.isDefaultOrBluetooth) {
+                    hideDialog()
+                }
+            }
+        }
     }
 
     fun hideDialog() {
@@ -222,13 +234,13 @@ internal class MediaRouteControllerDialogViewModel(
         mediaControllerCallback.onSessionDestroyed()
     }
 
-    private val PlaybackState.isPlayActionSupported: Boolean
+    private val PlaybackStateCompat.isPlayActionSupported: Boolean
         get() = actions and (ACTION_PLAY or ACTION_PLAY_PAUSE) != 0L
 
-    private val PlaybackState.isPauseActionSupported: Boolean
+    private val PlaybackStateCompat.isPauseActionSupported: Boolean
         get() = actions and (ACTION_PAUSE or ACTION_PLAY_PAUSE) != 0L
 
-    private val PlaybackState.isStopActionSupported: Boolean
+    private val PlaybackStateCompat.isStopActionSupported: Boolean
         get() = actions and ACTION_STOP != 0L
 
     private companion object {
@@ -249,18 +261,18 @@ internal class MediaRouteControllerDialogViewModel(
         }
     }
 
-    private inner class MediaControllerCallback : MediaController.Callback() {
+    private inner class MediaControllerCallback : MediaControllerCompat.Callback() {
         override fun onSessionDestroyed() {
             mediaController?.unregisterCallback(this)
             mediaController = null
         }
 
-        override fun onPlaybackStateChanged(state: PlaybackState?) {
+        override fun onPlaybackStateChanged(state: PlaybackStateCompat?) {
             playbackState.update { state }
             routerUpdates.update { it + 1 }
         }
 
-        override fun onMetadataChanged(metadata: MediaMetadata?) {
+        override fun onMetadataChanged(metadata: MediaMetadataCompat?) {
             mediaDescription.update { metadata?.description }
             routerUpdates.update { it + 1 }
         }