Revamp now playing on Android and desktop

.github/workflows/ci.yml

@@ -54,7 +54,9 @@ jobs:
         working-directory: desktop
       - run: pnpm typecheck && pnpm lint && pnpm test && pnpm build
         working-directory: desktop
-      - run: xvfb-run -a pnpm test:e2e
+      # A screen larger than the default 1280x1024: the immersive layout tests size the window to
+      # 1456x912 (3:2), which a smaller screen would clamp.
+      - run: xvfb-run -a -s "-screen 0 2000x1600x24" pnpm test:e2e
         working-directory: desktop
 
   android:

android/README.md

@@ -202,6 +202,33 @@ syllable lyrics and a streamed read with a ranged re-open against a real Navidro
 33+ needs `jdk.internal.ref`, which the JDK does not export. It is skipped when the host `.so` is
 absent.
 
+## Screenshots
+
+The screenshot tests are opt-in Robolectric tests: they write PNGs only when told where, and
+are skipped otherwise. Pass the settings as environment variables to Gradle (the tests also read
+the `-Dhocket.…` system properties named below, but Gradle does not forward `-D` from its own
+command line to the test JVM, so the environment is the way that works):
+
+- `HOCKET_SCREENSHOT_DIR` (`hocket.screenshotDir`): where to write them. Without it every
+  screenshot test is skipped.
+- `HOCKET_SCREENSHOT_ONLY` (`hocket.screenshotOnly`): `AppScreenshotTest` writes only the shots
+  whose names contain one of these comma-separated parts, e.g. `04-player,11-queue`.
+- `HOCKET_COVERS`: a folder of cover images for the immersive tests (`ImmersiveScreenshotTest`,
+  `ImmersiveMotionScreenshotTest`), handed to the fake library's albums in name order. The desktop's
+  equivalent is `HOCKET_FAKE_COVERS`.
+- `HOCKET_HOST_LIB`: the host build of the core (`cargo build -p hocket-android` →
+  `target/debug/libhocket_android.so`): the immersive tests classify covers with the real core.
+- `HOCKET_SCREENSHOT_THEME`: `light` renders the immersive tests in light mode (dark otherwise;
+  `AppScreenshotTest` shoots both themes itself).
+
+```
+HOCKET_SCREENSHOT_DIR=/tmp/shots HOCKET_SCREENSHOT_ONLY=04-player,11-queue \
+  ./gradlew :app:testDebugUnitTest --tests '*AppScreenshotTest*' --rerun
+HOCKET_SCREENSHOT_DIR=/tmp/shots HOCKET_COVERS=/path/to/covers \
+  HOCKET_HOST_LIB=$PWD/../target/debug/libhocket_android.so \
+  ./gradlew :app:testDebugUnitTest --tests '*ImmersiveMotionScreenshotTest*' --rerun
+```
+
 ## Icons
 
 Icons are Material Symbols (rounded), the same glyphs as desktop, generated into

android/app/src/main/java/app/hocket/ui/components/RatingStars.kt

@@ -1,15 +1,24 @@
 package app.hocket.ui.components
 
+import androidx.compose.foundation.gestures.detectHorizontalDragGestures
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -33,20 +42,43 @@ import app.hocket.ui.icons.HocketIcons
 import kotlin.math.roundToInt
 
 /**
- * Five integer stars (Subsonic has no half stars). Tapping the current rating clears it.
+ * Five integer stars (Subsonic has no half stars). Tapping the current rating clears it; dragging
+ * along the row sets the rating under the finger (a tick per star as it changes, committed on
+ * release; dragging left of the first star clears it).
  *
  * For a screen reader the stars are ONE adjustable control, "Rating, 3 of 5 stars": swipe up/down
  * (or the volume keys) steps it through 0..5 (`setProgress` over a 0..5 range with whole steps), and
  * a "Clear rating" action resets it. The single node is at least 48 dp tall; the individual stars
- * are pointer targets only.
+ * are pointer targets only. [spacing] is the gap between stars (their touch cells share it);
+ * [verticalAlignment] places them in that 48 dp row (the player tops them, so the row's touch area
+ * hangs below the stars rather than spacing them off the text above).
  */
 @Composable
-fun RatingStars(rating: Int, onRate: (Int) -> Unit, modifier: Modifier = Modifier, starSize: Dp = 28.dp, tint: Color = MaterialTheme.colorScheme.primary) {
+fun RatingStars(
+    rating: Int,
+    onRate: (Int) -> Unit,
+    modifier: Modifier = Modifier,
+    starSize: Dp = 28.dp,
+    tint: Color = MaterialTheme.colorScheme.primary,
+    spacing: Dp = 12.dp,
+    emptyTint: Color = MaterialTheme.colorScheme.outline,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+) {
     val haptics = LocalHapticFeedback.current
     val resources = androidx.compose.ui.platform.LocalResources.current
     val label = stringResource(R.string.rating_stars)
+    // While a finger drags along the row: the rating under it (shown, not yet sent).
+    var dragged by remember { mutableStateOf<Int?>(null) }
+    val shown = dragged ?: rating
     val state = Spoken.rating(resources, rating)
     val clear = stringResource(R.string.rating_clear)
+    val current by rememberUpdatedState(rating)
+    val rate by rememberUpdatedState(onRate)
+    val density = LocalDensity.current
+    val cellPx = with(density) { (starSize + spacing).toPx() }
+    val halfGapPx = with(density) { (spacing / 2).toPx() }
+    /** The rating a finger at [x] (px from the row's start) means: the star under it, 0 left of the first. */
+    fun valueAt(x: Float): Int = (kotlin.math.floor((x + halfGapPx) / cellPx).toInt() + 1).coerceIn(0, 5).let { if (x < -halfGapPx) 0 else it }
     Row(
         modifier
             .heightIn(min = 48.dp)
@@ -61,14 +93,44 @@ fun RatingStars(rating: Int, onRate: (Int) -> Unit, modifier: Modifier = Modifie
                     true
                 }
                 if (rating > 0) customActions = listOf(CustomAccessibilityAction(clear) { onRate(0); true })
+            }
+            .pointerInput(cellPx) {
+                detectTapGestures { o ->
+                    val i = valueAt(o.x).coerceAtLeast(1)
+                    haptics.performHapticFeedback(HapticFeedbackType.Confirm)
+                    rate(if (i == current) 0 else i)
+                }
+            }
+            .pointerInput(cellPx) {
+                // What the drag rates: the item (and its rating) it began on, even if another takes
+                // its place under the finger (the player moving on to the next song mid-drag).
+                var target = rate
+                var from = current
+                detectHorizontalDragGestures(
+                    onDragStart = { o ->
+                        target = rate
+                        from = current
+                        dragged = valueAt(o.x)
+                        haptics.performHapticFeedback(HapticFeedbackType.GestureThresholdActivate)
+                    },
+                    onDragEnd = {
+                        dragged?.let { if (it != from) target(it) }
+                        dragged = null
+                        haptics.performHapticFeedback(HapticFeedbackType.GestureEnd)
+                    },
+                    onDragCancel = { dragged = null },
+                ) { change, _ ->
+                    change.consume()
+                    val v = valueAt(change.position.x)
+                    if (v != dragged) { dragged = v; haptics.performHapticFeedback(HapticFeedbackType.SegmentTick) }
+                }
             },
-        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(spacing),
+        verticalAlignment = verticalAlignment,
     ) {
         for (i in 1..5) {
-            val filled = i <= rating
-            IconButton(onClick = { haptics.performHapticFeedback(HapticFeedbackType.Confirm); onRate(if (i == rating) 0 else i) }, modifier = Modifier.size(starSize + 12.dp)) {
-                Icon(if (filled) HocketIcons.Filled.Star else HocketIcons.Outlined.StarOutline, contentDescription = null, tint = if (filled) tint else MaterialTheme.colorScheme.outline, modifier = Modifier.size(starSize))
-            }
+            val filled = i <= shown
+            Icon(if (filled) HocketIcons.Filled.Star else HocketIcons.Outlined.StarOutline, contentDescription = null, tint = if (filled) tint else emptyTint, modifier = Modifier.size(starSize))
         }
     }
 }