Fix next up image showing very small (#167)

Fixes #163 

Should fix the next up images rendering very small. Also tweaks some
padding and background for the popup.

app/src/main/java/com/github/damontecres/wholphin/ui/playback/NextUpEpisode.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -18,12 +19,15 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -34,7 +38,11 @@ import androidx.tv.material3.Icon
 import androidx.tv.material3.MaterialTheme
 import androidx.tv.material3.Text
 import androidx.tv.material3.surfaceColorAtElevation
+import coil3.ColorImage
+import coil3.annotation.ExperimentalCoilApi
 import coil3.compose.AsyncImage
+import coil3.compose.AsyncImagePreviewHandler
+import coil3.compose.LocalAsyncImagePreviewHandler
 import com.github.damontecres.wholphin.R
 import com.github.damontecres.wholphin.ui.AppColors
 import com.github.damontecres.wholphin.ui.PreviewTvSpec
@@ -67,7 +75,7 @@ fun NextUpEpisode(
             modifier =
                 Modifier
                     .fillMaxSize()
-                    .padding(horizontal = 16.dp, vertical = 8.dp),
+                    .padding(horizontal = 24.dp, vertical = 16.dp),
         ) {
             Text(
                 text = stringResource(R.string.next_up) + "...",
@@ -88,8 +96,10 @@ fun NextUpEpisode(
                     interactionSource = interactionSource,
                     modifier =
                         Modifier
-//                            .fillMaxWidth(.4f)
+                            .fillMaxHeight()
-//                            .fillMaxHeight()
+                            .aspectRatio(aspectRatio)
+//                            .fillMaxSize()
+//                            .weight(1f)
                             .focusRequester(focusRequester),
                 )
                 Column(
@@ -140,60 +150,72 @@ fun NextUpCard(
                 contentScale = ContentScale.Fit,
                 modifier = Modifier,
             )
-            if (timeLeft != null && timeLeft > Duration.ZERO) {
+
-                Box(
+            Box(
-                    modifier =
+                modifier =
-                        Modifier
+                    Modifier
-                            .align(Alignment.Center)
+                        .align(Alignment.Center)
-                            .background(
+                        .background(
-                                AppColors.TransparentBlack50,
+                            AppColors.TransparentBlack50,
-                                shape = CircleShape,
+                            shape = CircleShape,
-                            ),
+                        ),
-                ) {
+            ) {
+                if (timeLeft != null && timeLeft > Duration.ZERO) {
                     Text(
                         text = timeLeft.toString(),
                         style = MaterialTheme.typography.titleMedium,
                         color = MaterialTheme.colorScheme.onSurface,
-                        modifier = Modifier.padding(8.dp),
+                        modifier = Modifier.padding(12.dp),
+                    )
+                } else {
+                    Icon(
+                        imageVector = Icons.Default.PlayArrow,
+                        contentDescription = null,
+                        tint = MaterialTheme.colorScheme.onSurface,
+                        modifier =
+                            Modifier
+                                .size(60.dp)
+                                .align(Alignment.Center),
                     )
                 }
-            } else {
-                Icon(
-                    imageVector = Icons.Default.PlayArrow,
-                    contentDescription = null,
-                    tint = MaterialTheme.colorScheme.onSurface,
-                    modifier =
-                        Modifier
-                            .size(60.dp)
-                            .align(Alignment.Center),
-                )
             }
         }
     }
 }
 
+@OptIn(ExperimentalCoilApi::class)
 @PreviewTvSpec
 @Composable
 private fun NextUpEpisodePreview() {
     WholphinTheme(true) {
-        NextUpEpisode(
+        val previewHandler =
-            title = "Episode Title",
+            AsyncImagePreviewHandler {
-            description = "This is the description of the episode. It might be long.",
+                ColorImage(Color.Blue.toArgb())
-            imageUrl = "",
+            }
-            onClick = {},
+
-            aspectRatio = 4f / 3,
+        CompositionLocalProvider(LocalAsyncImagePreviewHandler provides previewHandler) {
-            timeLeft = 30.seconds,
+            NextUpEpisode(
-            modifier =
+                title = "Episode Title",
-                Modifier
+                description =
-                    .padding(16.dp)
+                    "This is the description of the episode. It might be long. " +
-                    .height(200.dp)
+                        "It might be very, very long and overflow the available space. " +
-                    .width(400.dp)
+                        "But it just keeps going and going.",
+                imageUrl = "",
+                onClick = {},
+                aspectRatio = 4f / 3,
+                timeLeft = 30.seconds,
+                modifier =
+                    Modifier
+                        .padding(16.dp)
+                        .height(200.dp)
+                        .width(400.dp)
 //                    .fillMaxWidth(.4f)
 //                .align(Alignment.BottomCenter)
-                    .background(
+                        .background(
-                        MaterialTheme.colorScheme.surfaceColorAtElevation(2.dp),
+                            MaterialTheme.colorScheme.surfaceColorAtElevation(2.dp),
-                        shape = RoundedCornerShape(8.dp),
+                            shape = RoundedCornerShape(8.dp),
-                    ),
+                        ),
-        )
+            )
+        }
     }
 }