The song's times are larger on the media screen, and show under the player beside the map

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarHomeScreen.kt

@@ -268,7 +268,10 @@ private fun DockedPlayer(now: NowPlaying, modifier: Modifier) {
                     maxLines = 1, overflow = TextOverflow.Ellipsis,
                 )
                 if (now.durationMs > 0) {
-                    PlayerProgress(now, media, Modifier.fillMaxWidth().padding(vertical = 2.dp), showTimes = false)
+                    PlayerProgress(
+                        now, media, Modifier.fillMaxWidth().padding(vertical = 2.dp),
+                        timeStyle = MaterialTheme.typography.labelLarge,
+                    )
                 } else {
                     Spacer(Modifier.height(10.dp))
                 }

gearslip/src/main/java/app/seb3thehacker/gearslip/car/MediaScreen.kt

@@ -721,7 +721,7 @@ private fun StageControls(now: NowPlaying, media: CarMedia, modifier: Modifier)
                     )
                 }
             }
-            PlayerProgress(now, media, Modifier.fillMaxWidth().padding(top = if (compact) 4.dp else 12.dp), showTimes = showTimes)
+            PlayerProgress(now, media, Modifier.fillMaxWidth().padding(top = if (compact) 4.dp else 12.dp), showTimes = showTimes, timeStyle = MaterialTheme.typography.titleLarge)
             // What's left goes to the buttons: play takes about half of it, the row below a third,
             // and neither grows past what a row of them fits across.
             BoxWithConstraints(Modifier.weight(1f).fillMaxWidth(), contentAlignment = Alignment.Center) {
@@ -770,7 +770,7 @@ private fun NowPlayingControls(now: NowPlaying, media: CarMedia, modifier: Modif
                     )
                 }
             }
-            PlayerProgress(now, media, Modifier.fillMaxWidth(), showTimes = showTimes)
+            PlayerProgress(now, media, Modifier.fillMaxWidth(), showTimes = showTimes, timeStyle = MaterialTheme.typography.titleLarge)
             TransportRow(now, media, skip = if (compact) 48.dp else 60.dp, modifier = Modifier.fillMaxWidth())
             PlayModeRow(now, media, size = if (compact) 46.dp else 56.dp, modifier = Modifier.fillMaxWidth(), maxOther = 2)
         }
@@ -810,7 +810,7 @@ private fun CompactPlayer(now: NowPlaying, media: CarMedia, art: android.graphic
             }
         }
         Spacer(Modifier.height(10.dp))
-        PlayerProgress(now, media, Modifier.fillMaxWidth())
+        PlayerProgress(now, media, Modifier.fillMaxWidth(), timeStyle = MaterialTheme.typography.titleLarge)
         Spacer(Modifier.height(6.dp))
         TransportRow(now, media, skip = 54.dp, modifier = Modifier.fillMaxWidth())
         Spacer(Modifier.height(10.dp))

gearslip/src/main/java/app/seb3thehacker/gearslip/car/PlayerParts.kt

@@ -59,9 +59,18 @@ import kotlinx.coroutines.withContext
  * the map - so a button looks and behaves the same wherever it turns up.
  */
 
-/** The seek bar, with elapsed and total time under it when [showTimes]. */
+/**
+ * The seek bar, with elapsed and total time under it when [showTimes]. The times default to a
+ * size readable at a glance from the driver's seat; the narrow side column passes a smaller one.
+ */
 @Composable
-internal fun PlayerProgress(now: NowPlaying, media: CarMedia, modifier: Modifier = Modifier, showTimes: Boolean = true) {
+internal fun PlayerProgress(
+    now: NowPlaying,
+    media: CarMedia,
+    modifier: Modifier = Modifier,
+    showTimes: Boolean = true,
+    timeStyle: androidx.compose.ui.text.TextStyle = MaterialTheme.typography.titleMedium,
+) {
     if (now.durationMs <= 0) return
     var position by remember { mutableLongStateOf(now.currentPosition()) }
     LaunchedEffect(now) {
@@ -80,8 +89,10 @@ internal fun PlayerProgress(now: NowPlaying, media: CarMedia, modifier: Modifier
         )
         if (showTimes) {
             Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
-                Text(formatDuration(position), style = MaterialTheme.typography.labelMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
+                // Tabular figures, so the elapsed time doesn't jitter sideways as it counts.
-                Text(formatDuration(now.durationMs), style = MaterialTheme.typography.labelMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
+                val style = timeStyle.copy(fontFeatureSettings = "tnum")
+                Text(formatDuration(position), style = style, color = MaterialTheme.colorScheme.onSurfaceVariant)
+                Text(formatDuration(now.durationMs), style = style, color = MaterialTheme.colorScheme.onSurfaceVariant)
             }
         }
     }