Hide artwork in landscape and make the whole controller scrollable

Author: MGaetan89

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

@@ -40,16 +40,11 @@ import androidx.media3.common.Player
 import androidx.media3.exoplayer.ExoPlayer
 import androidx.media3.ui.PlayerView
 import androidx.mediarouter.app.MediaRouteButton
-import androidx.mediarouter.media.MediaControlIntent
 import androidx.mediarouter.media.MediaRouteSelector
 import ch.srgssr.androidx.mediarouter.compose.MediaRouteButton
 
 class MainActivity : FragmentActivity() {
     private val mainViewModel by viewModels<MainViewModel>()
-    private val routeSelector = MediaRouteSelector.Builder()
-        .addControlCategory(MediaControlIntent.CATEGORY_LIVE_VIDEO)
-        .addControlCategory(MediaControlIntent.CATEGORY_REMOTE_PLAYBACK)
-        .build()
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -65,7 +60,7 @@ class MainActivity : FragmentActivity() {
                 MainView(
                     player = player,
                     useCompose = useCompose,
-                    routeSelector = routeSelector,
+                    routeSelector = mainViewModel.routeSelector,
                     modifier = Modifier.fillMaxSize(),
                     onFabClick = { useCompose = !useCompose },
                 )

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

@@ -22,6 +22,8 @@ import androidx.media3.common.MimeTypes
 import androidx.media3.common.Player
 import androidx.media3.common.util.UnstableApi
 import androidx.media3.exoplayer.ExoPlayer
+import androidx.mediarouter.media.MediaControlIntent
+import androidx.mediarouter.media.MediaRouteSelector
 import androidx.mediarouter.media.MediaRouter
 import com.google.android.gms.cast.framework.CastContext
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -35,9 +37,10 @@ import android.media.MediaMetadata as PlatformMediaMetadata
 @OptIn(UnstableApi::class)
 class MainViewModel(application: Application) : AndroidViewModel(application) {
     private val playerListener = PlayerListener()
+    private val castContext = CastContext.getSharedInstance(application)
     private val mediaSession = MediaSession(application, "androidx-mediarouter-compose-demo")
     private val localPlayer = ExoPlayer.Builder(application).build()
-    private val castPlayer = CastPlayer(CastContext.getSharedInstance(application))
+    private val castPlayer = CastPlayer(castContext)
     private val currentPlayer =
         MutableStateFlow(if (castPlayer.isCastSessionAvailable) castPlayer else localPlayer)
 
@@ -61,6 +64,11 @@ class MainViewModel(application: Application) : AndroidViewModel(application) {
             initialValue = currentPlayer.value,
         )
 
+    val routeSelector = castContext.mergedSelector ?: MediaRouteSelector.Builder()
+        .addControlCategory(MediaControlIntent.CATEGORY_LIVE_VIDEO)
+        .addControlCategory(MediaControlIntent.CATEGORY_REMOTE_PLAYBACK)
+        .build()
+
     init {
         MediaRouter.getInstance(application).setMediaSession(mediaSession)
 

mediarouter-compose/src/main/java/ch/srgssr/androidx/mediarouter/compose/MediaRouteControllerDialog.kt

@@ -5,15 +5,17 @@
 
 package ch.srgssr.androidx.mediarouter.compose
 
+import android.content.res.Configuration
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -35,6 +37,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.input.key.KeyEvent
 import androidx.compose.ui.input.key.onKeyEvent
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -217,11 +220,12 @@ private fun ControllerDialogContent(
 ) {
     @Suppress("NoNameShadowing")
     val showPlaybackControl = showPlaybackControl && customControlView == null
+    val isLandscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
 
-    Column(modifier = modifier) {
+    Column(modifier = modifier.verticalScroll(rememberScrollState())) {
         customControlView?.invoke()
 
-        if (imageModel != null) {
+        AnimatedVisibility(visible = imageModel != null && !isLandscape) {
             Image(
                 imageModel = imageModel,
                 modifier = Modifier.fillMaxWidth(),
@@ -257,7 +261,7 @@ private fun ControllerDialogContent(
             }
         }
 
-        if (isDeviceGroupExpanded) {
+        AnimatedVisibility(visible = isDeviceGroupExpanded) {
             DeviceGroup(
                 routeDetails = groupRouteDetails,
                 modifier = Modifier
@@ -371,7 +375,7 @@ private fun VolumeControl(
             valueRange = routeDetail.volumeRange,
         )
 
-        if (routeDetail.route.isGroup && routeDetail.route.memberRoutes.size > 1) {
+        if (routeDetail.hasMembers) {
             IconButton(onClick = onExpandCollapseClick) {
                 val scale by animateFloatAsState(targetValue = if (isExpanded) -1f else 1f)
                 val contentDescriptionRes = if (isExpanded) {
@@ -396,11 +400,11 @@ private fun DeviceGroup(
     modifier: Modifier = Modifier,
     onVolumeChange: (route: RouteInfo, volume: Float) -> Unit,
 ) {
-    LazyColumn(
+    Column(
         modifier = modifier,
         verticalArrangement = Arrangement.spacedBy(16.dp),
     ) {
-        items(routeDetails) { (route, volume, volumeRange) ->
+        routeDetails.forEach { (route, volume, volumeRange) ->
             Column(modifier = Modifier.fillMaxWidth()) {
                 Text(
                     text = route.name,

mediarouter-compose/src/main/java/ch/srgssr/androidx/mediarouter/compose/MediaRouteControllerDialogViewModel.kt

@@ -60,7 +60,10 @@ internal class MediaRouteControllerDialogViewModel(
         val route: RouteInfo,
         val volume: Float,
         val volumeRange: ClosedFloatingPointRange<Float>,
-    )
+    ) {
+        val hasMembers: Boolean
+            get() = route.isGroup && route.memberRoutes.size > 1
+    }
 
     private var mediaController: MediaControllerCompat? = null
 

mediarouter-compose/src/screenshotTest/java/ch/srgssr/androidx/mediarouter/compose/MediaRouteChooserDialogScreenshot.kt

@@ -7,13 +7,12 @@ package ch.srgssr.androidx.mediarouter.compose
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.mediarouter.media.ScreenshotMediaRouter
 import ch.srgssr.androidx.mediarouter.compose.MediaRouteChooserDialogViewModel.ChooserState
 
 class MediaRouteChooserDialogScreenshot {
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun FindingDevicesPreview() {
         ScreenshotTheme {
             ChooserDialog(
@@ -26,7 +25,7 @@ class MediaRouteChooserDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun NoDevicesNoWifiHintPreview() {
         ScreenshotTheme {
             ChooserDialog(
@@ -39,7 +38,7 @@ class MediaRouteChooserDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun NoRoutesPreview() {
         ScreenshotTheme {
             ChooserDialog(
@@ -52,7 +51,7 @@ class MediaRouteChooserDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun ShowingRoutesPreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
 
@@ -67,7 +66,7 @@ class MediaRouteChooserDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun FindingDevicesCustomTitlePreview() {
         ScreenshotTheme {
             ChooserDialog(
@@ -80,7 +79,7 @@ class MediaRouteChooserDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun NoDevicesNoWifiHintCustomTitlePreview() {
         ScreenshotTheme {
             ChooserDialog(
@@ -93,7 +92,7 @@ class MediaRouteChooserDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun NoRoutesCustomTitlePreview() {
         ScreenshotTheme {
             ChooserDialog(
@@ -106,7 +105,7 @@ class MediaRouteChooserDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun ShowingRoutesCustomTitlePreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
 

mediarouter-compose/src/screenshotTest/java/ch/srgssr/androidx/mediarouter/compose/MediaRouteControllerDialogScreenshot.kt

@@ -17,7 +17,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.core.graphics.createBitmap
 import androidx.mediarouter.media.MediaRouter
 import androidx.mediarouter.media.ScreenshotMediaRouter
@@ -30,7 +29,7 @@ import coil3.compose.LocalAsyncImagePreviewHandler
 
 class MediaRouteControllerDialogScreenshot {
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun NoControlsPreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
 
@@ -59,7 +58,7 @@ class MediaRouteControllerDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun PlaybackControlPreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
 
@@ -88,7 +87,7 @@ class MediaRouteControllerDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun VolumeControlPreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
 
@@ -117,7 +116,7 @@ class MediaRouteControllerDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun CustomControlViewPreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
 
@@ -148,7 +147,7 @@ class MediaRouteControllerDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun PlaybackControlAndVolumePreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
 
@@ -177,7 +176,7 @@ class MediaRouteControllerDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     private fun CustomControlViewAndVolumeControlPreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
 
@@ -208,7 +207,7 @@ class MediaRouteControllerDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     @OptIn(ExperimentalCoilApi::class)
     private fun ImageUriLandscapePreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
@@ -245,7 +244,7 @@ class MediaRouteControllerDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     @OptIn(ExperimentalCoilApi::class)
     private fun ImageUriSquarePreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)
@@ -282,7 +281,7 @@ class MediaRouteControllerDialogScreenshot {
     }
 
     @Composable
-    @PreviewLightDark
+    @ScreenshotPreviews
     @OptIn(ExperimentalCoilApi::class)
     private fun ImageUriPortraitPreview() {
         val router = ScreenshotMediaRouter(LocalContext.current)

mediarouter-compose/src/screenshotTest/java/ch/srgssr/androidx/mediarouter/compose/ScreenshotPreviews.kt

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) SRG SSR. All rights reserved.
+ * License information is available from the LICENSE file.
+ */
+
+package ch.srgssr.androidx.mediarouter.compose
+
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import android.content.res.Configuration.UI_MODE_TYPE_NORMAL
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(name = "Light - Portrait", device = Devices.PHONE)
+@Preview(name = "Light - Landscape", device = "${Devices.PHONE},orientation=landscape")
+@Preview(
+    name = "Dark - Portrait",
+    device = Devices.PHONE,
+    uiMode = UI_MODE_NIGHT_YES or UI_MODE_TYPE_NORMAL
+)
+@Preview(
+    name = "Dark - Landscape",
+    device = "${Devices.PHONE},orientation=landscape",
+    uiMode = UI_MODE_NIGHT_YES or UI_MODE_TYPE_NORMAL,
+)
+internal annotation class ScreenshotPreviews

mediarouter-compose/src/test/java/ch/srgssr/androidx/mediarouter/compose/MediaRouteControllerDialogViewModelTest.kt

@@ -795,6 +795,28 @@ class MediaRouteControllerDialogViewModelTest(
             }
     }
 
+    @Test
+    fun `RouteDetail with non-group has no member`() {
+        val routeDetail = RouteDetail(
+            route = router.findRouteById(ROUTE_ID_CONNECTED),
+            volume = 0f,
+            volumeRange = 0f..100f,
+        )
+
+        assertFalse(routeDetail.hasMembers)
+    }
+
+    @Test
+    fun `RouteDetail with group has member`() {
+        val routeDetail = RouteDetail(
+            route = router.findRouteById(ROUTE_ID_GROUP),
+            volume = 0f,
+            volumeRange = 0f..100f,
+        )
+
+        assertTrue(routeDetail.hasMembers)
+    }
+
     private fun getGroupRouteDetail(): RouteDetail {
         val route = router.findRouteById(ROUTE_ID_GROUP)