[Jetcaster] Handling of HTML Elements in PodcastSummary on Foldable Devices (#1339)

There are cases where the Summary Text does not contain HTML elements.
In these instances, it is considered that the performance overhead is
negligible, therefore no additional processing was implemented

| before | after |
| ------- | -----|
|
![HTML-TAG](https://github.com/android/compose-samples/assets/38935359/83b5df55-702b-4b8b-994f-aaecc0f4ec23)|![html-refactor](https://github.com/android/compose-samples/assets/38935359/a1efd824-497f-467b-891b-56bd62b46025)|

Author: arriolac

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

@@ -41,6 +41,7 @@ import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
@@ -55,6 +56,7 @@ import androidx.compose.material.icons.rounded.PlayCircleFilled
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Surface
@@ -73,11 +75,13 @@ import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.role
 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
+import androidx.core.text.HtmlCompat
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.window.core.layout.WindowSizeClass
 import androidx.window.core.layout.WindowWidthSizeClass
@@ -486,19 +490,16 @@ private fun PlayerContentBookStart(
             .fillMaxSize()
             .verticalScroll(rememberScrollState())
             .padding(
-                vertical = 8.dp,
+                vertical = 40.dp,
                 horizontal = 16.dp
             ),
         horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.SpaceAround
     ) {
-        Spacer(modifier = Modifier.height(32.dp))
         PodcastInformation(
-            episode.title,
-            episode.podcastName,
-            episode.summary
+            title = episode.title,
+            name = episode.podcastName,
+            summary = episode.summary,
         )
-        Spacer(modifier = Modifier.height(32.dp))
     }
 }
 
@@ -618,32 +619,32 @@ private fun PodcastInformation(
     title: String,
     name: String,
     summary: String,
+    modifier: Modifier = Modifier,
     titleTextStyle: TextStyle = MaterialTheme.typography.headlineSmall,
     nameTextStyle: TextStyle = MaterialTheme.typography.displaySmall,
 ) {
     Column(
+        modifier = modifier.padding(horizontal = 8.dp),
+        verticalArrangement = Arrangement.spacedBy(32.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = Modifier.padding(horizontal = 8.dp)
     ) {
         Text(
             text = name,
             style = nameTextStyle,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis
         )
-        Spacer(modifier = Modifier.height(32.dp))
         Text(
             text = title,
             style = titleTextStyle,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis
         )
-        Spacer(modifier = Modifier.height(32.dp))
-        Text(
+        HtmlText(
             text = summary,
             style = MaterialTheme.typography.bodyMedium,
+            color = LocalContentColor.current
         )
-        Spacer(modifier = Modifier.weight(1f))
     }
 }
 
@@ -776,6 +777,25 @@ private fun FullScreenLoading(modifier: Modifier = Modifier) {
     }
 }
 
+@Composable
+private fun HtmlText(
+    text: String,
+    style: TextStyle,
+    color: Color
+) {
+    val annotationString = buildAnnotatedString {
+        val htmlCompat = HtmlCompat.fromHtml(text, HtmlCompat.FROM_HTML_MODE_COMPACT)
+        append(htmlCompat)
+    }
+    SelectionContainer {
+        Text(
+            text = annotationString,
+            style = style,
+            color = color
+        )
+    }
+}
+
 @Preview
 @Composable
 fun TopAppBarPreview() {