[Wear]Add preview to latestEpisodes and refactoring (#1391)

- Uses #1377
- Add previews for latestEpisode screen
- Refactor `MediaContent` for Queue and Podcasts (need a separate PR to
see if it can be expanded for LatestEpisodes since it has additional
play methods)
- Moves the latestEpisodes screen title to the Composable
- Add more data preview to create PlayerEpisode

Jetcaster/core/domain-testing/src/main/java/com/example/jetcaster/core/domain/testing/PreviewData.kt

@@ -20,6 +20,7 @@ import com.example.jetcaster.core.model.CategoryInfo
 import com.example.jetcaster.core.model.EpisodeInfo
 import com.example.jetcaster.core.model.PodcastInfo
 import com.example.jetcaster.core.model.PodcastToEpisodeInfo
+import com.example.jetcaster.core.player.model.PlayerEpisode
 import java.time.OffsetDateTime
 import java.time.ZoneOffset
 
@@ -58,6 +59,13 @@ val PreviewEpisodes = listOf(
     )
 )
 
+val PreviewPlayerEpisodes = listOf(
+    PlayerEpisode(
+        PreviewPodcasts[0],
+        PreviewEpisodes[0]
+    )
+)
+
 val PreviewPodcastEpisodes = listOf(
     PodcastToEpisodeInfo(
         podcast = PreviewPodcasts[0],

Jetcaster/wear/src/main/java/com/example/jetcaster/WearApp.kt

@@ -23,7 +23,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.stringResource
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.wear.compose.navigation.SwipeDismissableNavHost
@@ -127,7 +126,6 @@ fun WearApp() {
                     route = LatestEpisodes.navRoute,
                 ) {
                     LatestEpisodesScreen(
-                        playlistName = stringResource(id = R.string.latest_episodes),
                         onPlayButtonClick = {
                             navController.navigateToPlayer()
                         },

Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/MediaContent.kt

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2022 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.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.stringResource
+import androidx.wear.compose.material.ChipDefaults
+import com.example.jetcaster.R
+import com.example.jetcaster.core.player.model.PlayerEpisode
+import com.google.android.horologist.compose.material.Chip
+import com.google.android.horologist.images.coil.CoilPaintable
+import java.time.format.DateTimeFormatter
+import java.time.format.FormatStyle
+
+@Composable
+fun MediaContent(
+    episode: PlayerEpisode,
+    episodeArtworkPlaceholder: Painter?,
+    onItemClick: (PlayerEpisode) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val mediaTitle = episode.title
+    val duration = episode.duration
+
+    val secondaryLabel = when {
+        duration != null -> {
+            // If we have the duration, we combine the date/duration via a
+            // formatted string
+            stringResource(
+                R.string.episode_date_duration,
+                MediumDateFormatter.format(episode.published),
+                duration.toMinutes().toInt()
+            )
+        }
+        // Otherwise we just use the date
+        else -> MediumDateFormatter.format(episode.published)
+    }
+
+    Chip(
+        label = mediaTitle,
+        onClick = { onItemClick(episode) },
+        secondaryLabel = secondaryLabel,
+        icon = CoilPaintable(episode.podcastImageUrl, episodeArtworkPlaceholder),
+        largeIcon = true,
+        colors = ChipDefaults.secondaryChipColors(),
+        modifier = modifier
+    )
+}
+
+public val MediumDateFormatter: DateTimeFormatter by lazy {
+    DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
+}

Jetcaster/wear/src/main/java/com/example/jetcaster/ui/episode/EpisodeScreen.kt

@@ -35,12 +35,15 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.wear.compose.foundation.lazy.ScalingLazyListScope
 import androidx.wear.compose.foundation.lazy.items
 import androidx.wear.compose.material.ChipDefaults
+import androidx.wear.compose.material.LocalContentColor
 import androidx.wear.compose.material.MaterialTheme
 import androidx.wear.compose.material.Text
 import com.example.jetcaster.R
 import com.example.jetcaster.core.data.database.model.EpisodeToPodcast
 import com.example.jetcaster.core.player.model.PlayerEpisode
 import com.example.jetcaster.core.player.model.toPlayerEpisode
+import com.example.jetcaster.designsystem.component.HtmlTextContainer
+import com.example.jetcaster.ui.components.MediumDateFormatter
 import com.google.android.horologist.annotations.ExperimentalHorologistApi
 import com.google.android.horologist.composables.PlaceholderChip
 import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults
@@ -54,8 +57,6 @@ import com.google.android.horologist.compose.material.Button
 import com.google.android.horologist.compose.material.ListHeaderDefaults
 import com.google.android.horologist.compose.material.ResponsiveListHeader
 import com.google.android.horologist.media.ui.screens.entity.EntityScreen
-import java.time.format.DateTimeFormatter
-import java.time.format.FormatStyle
 
 @Composable
 fun EpisodeScreen(
@@ -69,21 +70,21 @@ fun EpisodeScreen(
     EpisodeScreen(
         uiState = uiState,
         onPlayButtonClick = onPlayButtonClick,
-        modifier = modifier,
         onPlayEpisode = episodeViewModel::onPlayEpisode,
         onAddToQueue = episodeViewModel::addToQueue,
         onDismiss = onDismiss,
+        modifier = modifier,
     )
 }
 
 @Composable
 fun EpisodeScreen(
     uiState: EpisodeScreenState,
     onPlayButtonClick: () -> Unit,
-    modifier: Modifier = Modifier,
     onPlayEpisode: (PlayerEpisode) -> Unit,
     onAddToQueue: (PlayerEpisode) -> Unit,
-    onDismiss: () -> Unit
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     val columnState = rememberResponsiveColumnState(
         contentPadding = padding(
@@ -276,14 +277,14 @@ private fun ScalingLazyListScope.episodeInfoContent(episode: EpisodeToPodcast) {
     if (summary != null) {
         val summaryInParagraphs = summary.split("\n+".toRegex()).orEmpty()
         items(summaryInParagraphs) {
-            Text(
-                text = it,
-                modifier = Modifier.listTextPadding()
-            )
+            HtmlTextContainer(text = summary) {
+                Text(
+                    text = it,
+                    style = MaterialTheme.typography.body2,
+                    color = LocalContentColor.current,
+                    modifier = Modifier.listTextPadding()
+                )
+            }
         }
     }
 }
-
-private val MediumDateFormatter by lazy {
-    DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
-}