Merge pull request #114 from imashnake0/html-views

Render HTML media descriptions

app/src/main/java/com/imashnake/animite/features/media/MediaPage.kt

@@ -3,8 +3,9 @@ package com.imashnake.animite.features.media
 import android.content.Intent
 import android.content.res.Configuration
 import android.net.Uri
-import android.text.Html
+import android.text.method.LinkMovementMethod
 import android.util.Log
+import android.widget.TextView
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -36,17 +37,20 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.ContentAlpha
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SuggestionChip
 import androidx.compose.material3.SuggestionChipDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.BlendMode
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
@@ -56,14 +60,17 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.core.content.res.ResourcesCompat
+import androidx.core.text.HtmlCompat
 import androidx.hilt.navigation.compose.hiltViewModel
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
 import com.imashnake.animite.R
 import com.imashnake.animite.api.anilist.sanitize.media.Media
 import com.imashnake.animite.core.extensions.bannerParallax
 import com.imashnake.animite.core.extensions.landscapeCutoutPadding
-import com.imashnake.animite.core.ui.ScrollableText
+import com.imashnake.animite.core.ui.NestedScrollableContent
 import com.imashnake.animite.core.ui.TranslucentStatusBarLayout
 import com.imashnake.animite.dev.internal.Constants
 import com.imashnake.animite.features.ui.MediaSmall
@@ -113,9 +120,7 @@ fun MediaPage(
                 ) {
                     MediaDetails(
                         title = media.title.orEmpty(),
-                        description = Html
-                            .fromHtml(media.description.orEmpty(), Html.FROM_HTML_MODE_COMPACT)
-                            .toString(),
+                        description = media.description.orEmpty(),
                         // TODO Can we do something about this Modifier chain?
                         modifier = Modifier
                             .padding(
@@ -245,6 +250,14 @@ fun MediaDetails(
     description: String,
     modifier: Modifier = Modifier
 ) {
+    val textColor = MaterialTheme.colorScheme.onBackground.copy(
+        alpha = ContentAlpha.medium
+    ).toArgb()
+
+    val html = remember(description) {
+        HtmlCompat.fromHtml(description, HtmlCompat.FROM_HTML_MODE_LEGACY)
+    }
+
     Column(modifier) {
         Text(
             text = title,
@@ -254,7 +267,23 @@ fun MediaDetails(
             overflow = TextOverflow.Ellipsis
         )
 
-        ScrollableText(text = description)
+        NestedScrollableContent { contentModifier ->
+            // TODO: Get rid of this once Compose supports HTML/Markdown
+            //  https://issuetracker.google.com/issues/139326648
+            AndroidView(
+                factory = {
+                    TextView(it).apply {
+                        movementMethod = LinkMovementMethod.getInstance()
+                        setTextColor(textColor)
+                        textSize = 14f
+                        // This is needed since `FontFamily` can't be used with `AndroidView`.
+                        typeface = ResourcesCompat.getFont(it, com.imashnake.animite.core.R.font.manrope_medium)
+                    }
+                },
+                update = { it.text = html },
+                modifier = contentModifier
+            )
+        }
     }
 }
 

app/src/main/java/com/imashnake/animite/features/theme/Type.kt

@@ -2,7 +2,9 @@ package com.imashnake.animite.features.theme
 
 import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.googlefonts.Font
 import androidx.compose.ui.text.googlefonts.GoogleFont
@@ -28,7 +30,14 @@ val manropeFontFamily = FontFamily(
     Font(manropeFont, fontProvider, FontWeight.Medium),
     Font(manropeFont, fontProvider, FontWeight.Normal),
     Font(manropeFont, fontProvider, FontWeight.Light),
-    Font(manropeFont, fontProvider, FontWeight.ExtraLight)
+    Font(manropeFont, fontProvider, FontWeight.ExtraLight),
+    Font(R.font.manrope_italic, FontWeight.Normal, FontStyle.Italic),
+    Font(R.font.manrope_bold_italic, FontWeight.Bold, FontStyle.Italic),
+    Font(R.font.manrope_extra_bold_italic, FontWeight.ExtraBold, FontStyle.Italic),
+    Font(R.font.manrope_light_italic, FontWeight.Light, FontStyle.Italic),
+    Font(R.font.manrope_medium_italic, FontWeight.Medium, FontStyle.Italic),
+    Font(R.font.manrope_extra_light_italic, FontWeight.ExtraLight, FontStyle.Italic),
+    Font(R.font.manrope_semi_bold_italic, FontWeight.SemiBold, FontStyle.Italic),
 )
 
 const val baselineShift = 0.2f

core/src/main/kotlin/com/imashnake/animite/core/ui/ScrollableText.kt

@@ -7,9 +7,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.ContentAlpha
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -21,23 +19,14 @@ import androidx.compose.ui.unit.Dp
 import com.imashnake.animite.core.R
 
 @Composable
-fun ScrollableText(
-    text: String,
+fun NestedScrollableContent(
     modifier: Modifier = Modifier,
     gradientSize: Dp = dimensionResource(R.dimen.edge_gradient_size),
-    gradientColor: Color = MaterialTheme.colorScheme.background
+    gradientColor: Color = MaterialTheme.colorScheme.background,
+    content: @Composable (modifier: Modifier) -> Unit,
 ) {
     Box(modifier) {
-        Text(
-            text = text,
-            color = MaterialTheme.colorScheme.onBackground.copy(
-                alpha = ContentAlpha.medium
-            ),
-            style = MaterialTheme.typography.bodyMedium,
-            modifier = Modifier
-                .verticalScroll(rememberScrollState())
-                .padding(vertical = gradientSize)
-        )
+        content(Modifier.verticalScroll(rememberScrollState()).padding(vertical = gradientSize))
 
         Box(
             modifier = Modifier