[Jetcaster] Fix TV app UX issues (#1394)

This PR fixes several UX issues raised to the TV app.

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/JetcasterApp.kt

@@ -32,7 +32,6 @@ import androidx.compose.ui.Modifier
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.tv.material3.DrawerValue
-import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Icon
 import androidx.tv.material3.MaterialTheme
 import androidx.tv.material3.NavigationDrawer
@@ -53,7 +52,6 @@ fun JetcasterApp(jetcasterAppState: JetcasterAppState = rememberJetcasterAppStat
     Route(jetcasterAppState = jetcasterAppState)
 }
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 private fun WithGlobalNavigation(
     jetcasterAppState: JetcasterAppState,
@@ -116,7 +114,6 @@ private fun WithGlobalNavigation(
     )
 }
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 private fun Route(jetcasterAppState: JetcasterAppState) {
     NavHost(navController = jetcasterAppState.navHostController, Screen.Discover.route) {

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/Button.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetcaster.tv.ui.component
 
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.PlaylistAdd
 import androidx.compose.material.icons.filled.Forward10
@@ -29,6 +30,7 @@ import androidx.compose.material.icons.outlined.PlayArrow
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.tv.material3.ButtonDefaults
 import androidx.tv.material3.ButtonScale
 import androidx.tv.material3.ExperimentalTvMaterial3Api
@@ -120,7 +122,7 @@ internal fun PlayPauseButton(
         Icons.Default.PlayArrow to stringResource(R.string.label_play)
     }
     IconButton(onClick = onClick, modifier = modifier) {
-        Icon(icon, description)
+        Icon(icon, description, modifier = Modifier.size(48.dp))
     }
 }
 

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/ButtonWithIcon.kt

@@ -16,19 +16,18 @@
 
 package com.example.jetcaster.tv.ui.component
 
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.dp
 import androidx.tv.material3.Button
 import androidx.tv.material3.ButtonDefaults
 import androidx.tv.material3.ButtonScale
-import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Icon
 import androidx.tv.material3.Text
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 internal fun ButtonWithIcon(
     label: String,
@@ -41,8 +40,8 @@ internal fun ButtonWithIcon(
         Icon(
             icon,
             contentDescription = null,
-            Modifier.padding(top = 10.dp, bottom = 10.dp, start = 12.dp, end = 6.dp)
         )
-        Text(text = label, modifier = Modifier.padding(top = 10.dp, bottom = 10.dp, end = 16.dp))
+        Spacer(modifier = Modifier.width(6.dp))
+        Text(text = label)
     }
 }

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/EpisodeCard.kt

@@ -38,7 +38,6 @@ import androidx.tv.material3.WideCardContainer
 import com.example.jetcaster.core.player.model.PlayerEpisode
 import com.example.jetcaster.tv.ui.theme.JetcasterAppDefaults
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 internal fun EpisodeCard(
     playerEpisode: PlayerEpisode,

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/EpisodeDateAndDuration.kt

@@ -20,7 +20,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
-import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
 import androidx.tv.material3.Text
 import com.example.jetcaster.tv.R
@@ -33,7 +32,6 @@ private val MediumDateFormatter by lazy {
     DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
 }
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 internal fun EpisodeDataAndDuration(
     offsetDateTime: OffsetDateTime,

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/EpisodeDetails.kt

@@ -22,7 +22,6 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.TextStyle
-import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
 import androidx.tv.material3.Text
 import com.example.jetcaster.core.player.model.PlayerEpisode
@@ -60,7 +59,6 @@ internal fun EpisodeDetails(
     )
 }
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 internal fun EpisodeAuthor(
     playerEpisode: PlayerEpisode,
@@ -70,7 +68,6 @@ internal fun EpisodeAuthor(
     Text(text = playerEpisode.author, modifier = modifier, style = style)
 }
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 internal fun EpisodeTitle(
     playerEpisode: PlayerEpisode,

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/ErrorState.kt

@@ -28,13 +28,11 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.res.stringResource
 import androidx.tv.material3.Button
-import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
 import androidx.tv.material3.Text
 import com.example.jetcaster.tv.R
 import com.example.jetcaster.tv.ui.theme.JetcasterAppDefaults
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 fun ErrorState(
     backToHome: () -> Unit,

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/Loading.kt

@@ -16,29 +16,212 @@
 
 package com.example.jetcaster.tv.ui.component
 
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.VectorConverter
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.animateValue
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.keyframes
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.progressSemantics
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
-import androidx.tv.material3.ExperimentalTvMaterial3Api
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import androidx.tv.material3.MaterialTheme
 import androidx.tv.material3.Text
 import com.example.jetcaster.tv.R
+import com.example.jetcaster.tv.ui.theme.JetcasterAppDefaults
+import kotlin.math.PI
+import kotlin.math.abs
+import kotlin.math.max
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 fun Loading(
     modifier: Modifier = Modifier,
     message: String = stringResource(id = R.string.message_loading),
     contentAlignment: Alignment = Alignment.Center,
-    style: TextStyle = MaterialTheme.typography.displayMedium
+    style: TextStyle = MaterialTheme.typography.displaySmall,
 ) {
     Box(
         modifier = modifier,
         contentAlignment = contentAlignment
     ) {
-        Text(text = message, style = style)
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(JetcasterAppDefaults.gap.default)
+        ) {
+            CircularProgressIndicator()
+            Text(text = message, style = style)
+        }
     }
 }
+
+@Composable
+fun CircularProgressIndicator(
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.primary,
+    strokeWidth: Dp = 4.dp,
+    trackColor: Color = MaterialTheme.colorScheme.surface,
+    strokeCap: StrokeCap = StrokeCap.Round,
+) {
+    val transition = rememberInfiniteTransition("loading")
+
+    val stroke = with(LocalDensity.current) {
+        Stroke(width = strokeWidth.toPx(), cap = strokeCap)
+    }
+
+    val currentRotation = transition.animateValue(
+        0,
+        RotationsPerCycle,
+        Int.VectorConverter,
+        infiniteRepeatable(
+            animation = tween(
+                durationMillis = RotationDuration * RotationsPerCycle,
+                easing = LinearEasing
+            )
+        ),
+        "loading_current_rotation"
+    )
+    // How far forward (degrees) the base point should be from the start point
+    val baseRotation = transition.animateFloat(
+        0f,
+        BaseRotationAngle,
+        infiniteRepeatable(
+            animation = tween(
+                durationMillis = RotationDuration,
+                easing = LinearEasing
+            )
+        ),
+        "loading_base_rotation_angle"
+    )
+    // How far forward (degrees) both the head and tail should be from the base point
+    val endAngle = transition.animateFloat(
+        0f,
+        JumpRotationAngle,
+        infiniteRepeatable(
+            animation = keyframes {
+                durationMillis = HeadAndTailAnimationDuration + HeadAndTailDelayDuration
+                0f at 0 using CircularEasing
+                JumpRotationAngle at HeadAndTailAnimationDuration
+            }
+        ),
+        "loading_end_rotation_angle"
+    )
+    val startAngle = transition.animateFloat(
+        0f,
+        JumpRotationAngle,
+        infiniteRepeatable(
+            animation = keyframes {
+                durationMillis = HeadAndTailAnimationDuration + HeadAndTailDelayDuration
+                0f at HeadAndTailDelayDuration using CircularEasing
+                JumpRotationAngle at durationMillis
+            }
+        ),
+        "loading_start_angle"
+    )
+
+    Canvas(
+        modifier
+            .progressSemantics()
+            .size(CircularIndicatorDiameter)
+    ) {
+        drawCircularIndicatorTrack(trackColor, stroke)
+
+        val currentRotationAngleOffset = (currentRotation.value * RotationAngleOffset) % 360f
+
+        // How long a line to draw using the start angle as a reference point
+        val sweep = abs(endAngle.value - startAngle.value)
+
+        // Offset by the constant offset and the per rotation offset
+        val offset = StartAngleOffset + currentRotationAngleOffset + baseRotation.value
+        drawIndeterminateCircularIndicator(
+            startAngle.value + offset,
+            strokeWidth,
+            sweep,
+            color,
+            stroke
+        )
+    }
+}
+
+private fun DrawScope.drawCircularIndicator(
+    startAngle: Float,
+    sweep: Float,
+    color: Color,
+    stroke: Stroke
+) {
+    // To draw this circle we need a rect with edges that line up with the midpoint of the stroke.
+    // To do this we need to remove half the stroke width from the total diameter for both sides.
+    val diameterOffset = stroke.width / 2
+    val arcDimen = size.width - 2 * diameterOffset
+    drawArc(
+        color = color,
+        startAngle = startAngle,
+        sweepAngle = sweep,
+        useCenter = false,
+        topLeft = Offset(diameterOffset, diameterOffset),
+        size = Size(arcDimen, arcDimen),
+        style = stroke
+    )
+}
+
+private fun DrawScope.drawCircularIndicatorTrack(
+    color: Color,
+    stroke: Stroke
+) = drawCircularIndicator(0f, 360f, color, stroke)
+
+private fun DrawScope.drawIndeterminateCircularIndicator(
+    startAngle: Float,
+    strokeWidth: Dp,
+    sweep: Float,
+    color: Color,
+    stroke: Stroke
+) {
+    val strokeCapOffset = if (stroke.cap == StrokeCap.Butt) {
+        0f
+    } else {
+        // Length of arc is angle * radius
+        // Angle (radians) is length / radius
+        // The length should be the same as the stroke width for calculating the min angle
+        (180.0 / PI).toFloat() * (strokeWidth / (CircularIndicatorDiameter / 2)) / 2f
+    }
+
+    // Adding a stroke cap draws half the stroke width behind the start point, so we want to
+    // move it forward by that amount so the arc visually appears in the correct place
+    val adjustedStartAngle = startAngle + strokeCapOffset
+
+    // When the start and end angles are in the same place, we still want to draw a small sweep, so
+    // the stroke caps get added on both ends and we draw the correct minimum length arc
+    val adjustedSweep = max(sweep, 0.1f)
+
+    drawCircularIndicator(adjustedStartAngle, adjustedSweep, color, stroke)
+}
+
+private val CircularIndicatorDiameter = 38.dp
+private const val RotationsPerCycle = 5
+private const val RotationDuration = 1332
+private const val BaseRotationAngle = 286f
+private const val JumpRotationAngle = 290f
+private const val HeadAndTailAnimationDuration = (RotationDuration * 0.5).toInt()
+private const val HeadAndTailDelayDuration = HeadAndTailAnimationDuration
+private val CircularEasing = CubicBezierEasing(0.4f, 0f, 0.2f, 1f)
+private const val StartAngleOffset = -90f
+private const val RotationAngleOffset = (BaseRotationAngle + JumpRotationAngle) % 360f

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/NotAvailableFeature.kt

@@ -19,11 +19,9 @@ package com.example.jetcaster.tv.ui.component
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Text
 import com.example.jetcaster.tv.R
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 internal fun NotAvailableFeature(
     modifier: Modifier = Modifier,

Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/PodcastCard.kt

@@ -22,13 +22,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.tv.material3.Card
 import androidx.tv.material3.CardScale
-import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.StandardCardContainer
 import androidx.tv.material3.Text
 import com.example.jetcaster.core.model.PodcastInfo
 import com.example.jetcaster.tv.ui.theme.JetcasterAppDefaults
 
-@OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 internal fun PodcastCard(
     podcastInfo: PodcastInfo,