[Jetcaster]: Add DevicePreviews. (#1386)

Adds multi-device preview annotation and adjusts podcast image size in
the podcast details screen so that it doesn't go over half the allotted
space.

<img width="396" alt="image"
src="https://github.com/android/compose-samples/assets/463186/4cb479f3-fbf7-4637-99ef-e12a47e99bfa">

Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/Home.kt

@@ -94,7 +94,6 @@ import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -116,6 +115,7 @@ import com.example.jetcaster.ui.home.library.libraryItems
 import com.example.jetcaster.ui.podcast.PodcastDetailsScreen
 import com.example.jetcaster.ui.podcast.PodcastDetailsViewModel
 import com.example.jetcaster.ui.theme.JetcasterTheme
+import com.example.jetcaster.ui.tooling.DevicePreviews
 import com.example.jetcaster.util.ToggleFollowPodcastIconButton
 import com.example.jetcaster.util.fullWidthItem
 import com.example.jetcaster.util.isCompact
@@ -906,9 +906,9 @@ private fun HomeAppBarPreview() {
 
 private val CompactWindowSizeClass = WindowSizeClass.compute(360f, 780f)
 
-@Preview(device = Devices.PHONE)
+@DevicePreviews
 @Composable
-private fun PreviewHomeContent() {
+private fun PreviewHome() {
     JetcasterTheme {
         val homeState = HomeState(
             windowSizeClass = CompactWindowSizeClass,
@@ -940,42 +940,6 @@ private fun PreviewHomeContent() {
     }
 }
 
-@Preview(device = Devices.FOLDABLE)
-@Preview(device = Devices.TABLET)
-@Preview(device = Devices.DESKTOP)
-@Composable
-private fun PreviewHomeContentExpanded() {
-    JetcasterTheme {
-        val homeState = HomeState(
-            windowSizeClass = CompactWindowSizeClass,
-            featuredPodcasts = PreviewPodcasts.toPersistentList(),
-            homeCategories = HomeCategory.entries,
-            selectedHomeCategory = HomeCategory.Discover,
-            filterableCategoriesModel = FilterableCategoriesModel(
-                categories = PreviewCategories,
-                selectedCategory = PreviewCategories.firstOrNull()
-            ),
-            podcastCategoryFilterResult = PodcastCategoryFilterResult(
-                topPodcasts = PreviewPodcasts,
-                episodes = PreviewPodcastEpisodes
-            ),
-            library = LibraryInfo(),
-            onCategorySelected = {},
-            onPodcastUnfollowed = {},
-            navigateToPodcastDetails = {},
-            navigateToPlayer = {},
-            onHomeCategorySelected = {},
-            onTogglePodcastFollowed = {},
-            onLibraryPodcastSelected = {},
-            onQueueEpisode = {}
-        )
-        HomeScreen(
-            homeState = homeState,
-            showGrid = true
-        )
-    }
-}
-
 @Composable
 @Preview
 private fun PreviewPodcastCard() {

Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/player/PlayerScreen.kt

@@ -87,7 +87,6 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -104,6 +103,7 @@ import com.example.jetcaster.core.model.PlayerEpisode
 import com.example.jetcaster.core.player.EpisodePlayerState
 import com.example.jetcaster.designsystem.component.ImageBackgroundColorScrim
 import com.example.jetcaster.ui.theme.JetcasterTheme
+import com.example.jetcaster.ui.tooling.DevicePreviews
 import com.example.jetcaster.util.isBookPosture
 import com.example.jetcaster.util.isSeparatingPosture
 import com.example.jetcaster.util.isTableTopPosture
@@ -873,10 +873,7 @@ fun PlayerButtonsPreview() {
     }
 }
 
-@Preview(device = Devices.PHONE)
-@Preview(device = Devices.FOLDABLE)
-@Preview(device = Devices.TABLET)
-@Preview(device = Devices.DESKTOP)
+@DevicePreviews
 @Composable
 fun PlayerScreenPreview() {
     JetcasterTheme {

Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/podcast/PodcastDetailsScreen.kt

@@ -22,6 +22,7 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -64,6 +65,7 @@ import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.example.jetcaster.R
 import com.example.jetcaster.core.model.EpisodeInfo
@@ -75,6 +77,7 @@ import com.example.jetcaster.ui.home.PreviewEpisodes
 import com.example.jetcaster.ui.home.PreviewPodcasts
 import com.example.jetcaster.ui.shared.EpisodeListItem
 import com.example.jetcaster.ui.shared.Loading
+import com.example.jetcaster.ui.tooling.DevicePreviews
 import com.example.jetcaster.util.fullWidthItem
 import kotlinx.coroutines.launch
 
@@ -199,44 +202,48 @@ fun PodcastDetailsHeaderItem(
     toggleSubscribe: (PodcastInfo) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Column(
+    BoxWithConstraints(
         modifier = modifier.padding(Keyline1)
     ) {
-        Row(
-            verticalAlignment = Alignment.Bottom,
-            modifier = Modifier.fillMaxWidth()
-        ) {
-            PodcastImage(
-                modifier = Modifier
-                    .size(148.dp)
-                    .clip(MaterialTheme.shapes.large),
-                podcastImageUrl = podcast.imageUrl,
-                contentDescription = podcast.title
-            )
-            Column(
-                modifier = Modifier.padding(start = 16.dp)
+        val maxImageSize = this.maxWidth / 2
+        val imageSize = min(maxImageSize, 148.dp)
+        Column {
+            Row(
+                verticalAlignment = Alignment.Bottom,
+                modifier = Modifier.fillMaxWidth()
             ) {
-                Text(
-                    text = podcast.title,
-                    maxLines = 2,
-                    overflow = TextOverflow.Ellipsis,
-                    style = MaterialTheme.typography.headlineMedium
-                )
-                PodcastDetailsHeaderItemButtons(
-                    isSubscribed = podcast.isSubscribed ?: false,
-                    onClick = {
-                        toggleSubscribe(podcast)
-                    },
-                    modifier = Modifier.fillMaxWidth()
+                PodcastImage(
+                    modifier = Modifier
+                        .size(imageSize)
+                        .clip(MaterialTheme.shapes.large),
+                    podcastImageUrl = podcast.imageUrl,
+                    contentDescription = podcast.title
                 )
+                Column(
+                    modifier = Modifier.padding(start = 16.dp)
+                ) {
+                    Text(
+                        text = podcast.title,
+                        maxLines = 2,
+                        overflow = TextOverflow.Ellipsis,
+                        style = MaterialTheme.typography.headlineMedium
+                    )
+                    PodcastDetailsHeaderItemButtons(
+                        isSubscribed = podcast.isSubscribed ?: false,
+                        onClick = {
+                            toggleSubscribe(podcast)
+                        },
+                        modifier = Modifier.fillMaxWidth()
+                    )
+                }
             }
+            PodcastDetailsDescription(
+                podcast = podcast,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 16.dp)
+            )
         }
-        PodcastDetailsDescription(
-            podcast = podcast,
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(vertical = 16.dp)
-        )
     }
 }
 
@@ -361,7 +368,7 @@ fun PodcastDetailsHeaderItemPreview() {
     )
 }
 
-@Preview
+@DevicePreviews
 @Composable
 fun PodcastDetailsScreenPreview() {
     PodcastDetailsScreen(

Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/tooling/DevicePreviews.kt

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.jetcaster.ui.tooling
+
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(name = "small-phone", device = Devices.PIXEL_4A)
+@Preview(name = "phone", device = Devices.PHONE)
+@Preview(name = "landscape", device = "spec:shape=Normal,width=640,height=360,unit=dp,dpi=480")
+@Preview(name = "foldable", device = Devices.FOLDABLE)
+@Preview(name = "tablet", device = Devices.TABLET)
+annotation class DevicePreviews