feat(player): split previous and next buttons

.github/nightly-notes/2026-11-14-feat-split-transport.md

@@ -0,0 +1,3 @@
+## Improved
+
+- Music player: previous and next now sit flat against play/pause as a split button; turn off Split buttons in Settings › Appearance › Player for the old round pills

app/src/main/java/io/github/aedev/flow/data/local/PlayerPreferences.kt

@@ -144,6 +144,7 @@ class PlayerPreferences(
         val VIDEO_ARTWORK_COLORS = booleanPreferencesKey("video_artwork_colors")
         val MUSIC_PLAIN_CONTROL_COLORS = stringPreferencesKey("music_plain_control_colors")
         val MUSIC_SLEEP_TIMER_BUTTON = booleanPreferencesKey("music_sleep_timer_button")
+        val MUSIC_SPLIT_TRANSPORT = booleanPreferencesKey("music_split_transport")
         val MUSIC_PLAYER_FOLLOW_LIGHT_THEME = booleanPreferencesKey("music_player_follow_light_theme")
         val SHORTS_PLAYER_UI_MODE = stringPreferencesKey("shorts_player_ui_mode")
         val GESTURE_OVERLAY_STYLE = stringPreferencesKey("gesture_overlay_style")
@@ -1097,6 +1098,17 @@ class PlayerPreferences(
         }
     }
 
+    /** Whether previous and next sit flat against play/pause as a split button, or stand apart as pills. */
+    val musicSplitTransport: Flow<Boolean> =
+        context.playerPreferencesDataStore.data
+            .map { preferences -> preferences[Keys.MUSIC_SPLIT_TRANSPORT] ?: true }
+
+    suspend fun setMusicSplitTransport(enabled: Boolean) {
+        context.playerPreferencesDataStore.edit { preferences ->
+            preferences[Keys.MUSIC_SPLIT_TRANSPORT] = enabled
+        }
+    }
+
     /** The colors the controls use when artwork colors are off. */
     val musicPlainControlColors: Flow<MusicPlainControlColors> =
         context.playerPreferencesDataStore.data

app/src/main/java/io/github/aedev/flow/ui/components/musicplayer/common/MusicPlayerAppearance.kt

@@ -25,6 +25,7 @@ internal class MusicPlayerAppearance(
     val backgroundStyle: MusicPlayerBackgroundStyle,
     val hideArtwork: Boolean,
     val sleepTimerButton: Boolean,
+    val splitTransport: Boolean,
     val playerScheme: ColorScheme,
     val controlScheme: ColorScheme,
 )
@@ -46,6 +47,7 @@ internal fun rememberMusicPlayerAppearance(
     val backgroundStyle = style ?: chosenStyle
     val hideArtwork by playerPreferences.hideMusicPlayerArtwork.collectAsState(initial = false)
     val sleepTimerButton by playerPreferences.musicSleepTimerButton.collectAsState(initial = false)
+    val splitTransport by playerPreferences.musicSplitTransport.collectAsState(initial = true)
     val followLightTheme by playerPreferences.musicPlayerFollowLightTheme.collectAsState(initial = false)
     val palette = rememberMediaPalette(thumbnailUrl)
     val lightPlayer = musicPlayerTurnsLight(backgroundStyle, followLightTheme, MaterialTheme.colorScheme.surface)
@@ -61,7 +63,17 @@ internal fun rememberMusicPlayerAppearance(
         backgroundStyle = backgroundStyle,
         hideArtwork = hideArtwork,
         sleepTimerButton = sleepTimerButton,
+        splitTransport = splitTransport,
         playerScheme = playerScheme,
         controlScheme = controlScheme,
     )
 }
+
+/** Whether the transport draws as a split button, for a host that reads nothing else of the player's look. */
+@Composable
+internal fun rememberSplitTransport(): Boolean {
+    val context = LocalContext.current
+    val preferences = remember(context) { PlayerPreferences(context) }
+    val split by preferences.musicSplitTransport.collectAsState(initial = true)
+    return split
+}

app/src/main/java/io/github/aedev/flow/ui/components/musicplayer/full/FullMusicPlayerContent.kt

@@ -73,6 +73,7 @@ internal fun FullMusicPlayerContent(
     backgroundStyle: MusicPlayerBackgroundStyle,
     hideArtwork: Boolean,
     sleepTimerButton: Boolean,
+    splitTransport: Boolean = false,
     // The transport, seek bar, like and download and the action row draw with this scheme.
     controlScheme: ColorScheme = MaterialTheme.colorScheme,
     onLyricsShownChange: (Boolean) -> Unit = {},
@@ -330,6 +331,7 @@ internal fun FullMusicPlayerContent(
                             onNextClick = { viewModel.skipToNext() },
                             modifier = modifier,
                             onPreviewDirectionChange = { previewDirection = it },
+                            split = splitTransport,
                         )
                     }
                 },

app/src/main/java/io/github/aedev/flow/ui/components/musicplayer/sheet/UnifiedMusicPlayerSheet.kt

@@ -463,6 +463,7 @@ internal fun UnifiedMusicPlayerSheet(
                             backgroundStyle = appearance.backgroundStyle,
                             hideArtwork = appearance.hideArtwork,
                             sleepTimerButton = appearance.sleepTimerButton,
+                            splitTransport = appearance.splitTransport,
                             controlScheme = controlScheme,
                             onLyricsShownChange = { state.isLyricsShown = it },
                         )

app/src/main/java/io/github/aedev/flow/ui/components/shared/MediaPlaybackControls.kt

@@ -18,15 +18,18 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Pause
 import androidx.compose.material.icons.rounded.PlayArrow
 import androidx.compose.material.icons.rounded.SkipNext
 import androidx.compose.material.icons.rounded.SkipPrevious
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SplitButtonDefaults
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -42,7 +45,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.input.key.Key
@@ -57,17 +62,54 @@ import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.onClick
 import androidx.compose.ui.semantics.role
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.util.lerp
 import io.github.aedev.flow.R
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
 private enum class PlaybackButtonType { PREVIOUS, PLAY_PAUSE, NEXT }
 
+private val PillShape = RoundedCornerShape(34.dp)
+private val PillSpacing = 10.dp
+private val SplitSpacing = 4.dp
+
+/** A corner between [start] and [stop]; the elastic spring overshoots, so it never goes below zero. */
+private class LerpCornerSize(
+    private val start: CornerSize,
+    private val stop: CornerSize,
+    private val fraction: Float,
+) : CornerSize {
+    override fun toPx(
+        shapeSize: Size,
+        density: Density,
+    ): Float = lerp(start.toPx(shapeSize, density), stop.toPx(shapeSize, density), fraction).coerceAtLeast(0f)
+}
+
+/**
+ * Previous or next as one side of a split button: round on its outer side, nearly flat on the side
+ * that faces play/pause, that inner corner rounding out as [pressedFraction] goes to 1.
+ */
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+internal fun splitSideShape(
+    leading: Boolean,
+    pressedFraction: Float,
+): RoundedCornerShape {
+    val outer = SplitButtonDefaults.OuterCornerSize
+    val inner = LerpCornerSize(SplitButtonDefaults.LargeInnerCornerSize, SplitButtonDefaults.LargeInnerCornerSizePressed, pressedFraction)
+    return if (leading) {
+        RoundedCornerShape(topStart = outer, topEnd = inner, bottomEnd = inner, bottomStart = outer)
+    } else {
+        RoundedCornerShape(topStart = inner, topEnd = outer, bottomEnd = outer, bottomStart = inner)
+    }
+}
+
 /**
  * Previous, play/pause and next as the music player draws them: elastic pills that trade width as one
- * is pressed, with a play/pause that morphs its corners between playing and paused.
+ * is pressed, with a play/pause that morphs its corners between playing and paused. [split] turns
+ * previous and next into the two sides of a split button around play/pause.
  */
 @Composable
 fun MediaPlaybackControls(
@@ -79,6 +121,7 @@ fun MediaPlaybackControls(
     modifier: Modifier = Modifier,
     onPreviewDirectionChange: (SkipDirection?) -> Unit = {},
     playPauseFocusRequester: FocusRequester? = null,
+    split: Boolean = false,
 ) {
     var isPressed by remember { mutableStateOf(false) }
     var isPreviousPressed by remember { mutableStateOf(false) }
@@ -169,6 +212,16 @@ fun MediaPlaybackControls(
         animationSpec = elasticSpec,
         label = "nextWeight",
     )
+    val previousInner by animateFloatAsState(
+        targetValue = if (isPreviousPressed) 1f else 0f,
+        animationSpec = elasticSpec,
+        label = "previousInnerCorner",
+    )
+    val nextInner by animateFloatAsState(
+        targetValue = if (isNextPressed) 1f else 0f,
+        animationSpec = elasticSpec,
+        label = "nextInnerCorner",
+    )
     val playPauseCorner by animateDpAsState(
         targetValue = if (playPauseVisualState) 18.dp else 34.dp,
         animationSpec = spring(dampingRatio = 0.8f, stiffness = 380f),
@@ -180,7 +233,7 @@ fun MediaPlaybackControls(
             modifier
                 .fillMaxWidth()
                 .height(68.dp),
-        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        horizontalArrangement = Arrangement.spacedBy(if (split) SplitSpacing else PillSpacing),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         ElasticControlButton(
@@ -199,6 +252,7 @@ fun MediaPlaybackControls(
             containerColor = MaterialTheme.colorScheme.secondaryContainer,
             contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
             iconSize = 30.dp,
+            shape = if (split) splitSideShape(leading = true, pressedFraction = previousInner) else PillShape,
             onLongPressStart = { onPreviewDirectionChange(SkipDirection.PREVIOUS) },
             onLongPressEnd = { onPreviewDirectionChange(null) },
         )
@@ -218,7 +272,7 @@ fun MediaPlaybackControls(
             containerColor = MaterialTheme.colorScheme.primary,
             contentColor = MaterialTheme.colorScheme.onPrimary,
             iconSize = 36.dp,
-            cornerRadius = playPauseCorner,
+            shape = RoundedCornerShape(playPauseCorner),
             isBuffering = isBuffering,
             modifier = Modifier.focusRequester(playPauseFocus),
         )
@@ -239,6 +293,7 @@ fun MediaPlaybackControls(
             containerColor = MaterialTheme.colorScheme.secondaryContainer,
             contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
             iconSize = 30.dp,
+            shape = if (split) splitSideShape(leading = false, pressedFraction = nextInner) else PillShape,
             onLongPressStart = { onPreviewDirectionChange(SkipDirection.NEXT) },
             onLongPressEnd = { onPreviewDirectionChange(null) },
         )
@@ -255,7 +310,7 @@ private fun RowScope.ElasticControlButton(
     containerColor: Color,
     contentColor: Color,
     iconSize: Dp,
-    cornerRadius: Dp = 34.dp,
+    shape: Shape,
     isBuffering: Boolean = false,
     onLongPressStart: (() -> Unit)? = null,
     onLongPressEnd: (() -> Unit)? = null,
@@ -266,7 +321,6 @@ private fun RowScope.ElasticControlButton(
     val currentLongPressStart by rememberUpdatedState(onLongPressStart)
     val currentLongPressEnd by rememberUpdatedState(onLongPressEnd)
     val interactionSource = remember { MutableInteractionSource() }
-    val shape = RoundedCornerShape(cornerRadius)
     // The gesture below is touch only; these give the button a focus stop, a key press and a click
     // action, so a remote's OK, a keyboard's Enter and TalkBack reach it too.
     Box(

app/src/main/java/io/github/aedev/flow/ui/screens/lockscreen/LockScreenPlayerScreen.kt

@@ -124,6 +124,7 @@ internal fun LockScreenPlayerScreen(
                         onPreviousClick = EnhancedMusicPlayerManager::playPrevious,
                         onPlayPauseToggle = EnhancedMusicPlayerManager::togglePlayPause,
                         onNextClick = EnhancedMusicPlayerManager::playNext,
+                        split = appearance.splitTransport,
                     )
                     Spacer(Modifier.height(16.dp))
                     LockScreenActionGroup()

app/src/main/java/io/github/aedev/flow/ui/screens/playon/PlayOnNowCard.kt

@@ -30,6 +30,7 @@ import androidx.compose.ui.unit.dp
 import io.github.aedev.flow.R
 import io.github.aedev.flow.data.local.SliderStyle
 import io.github.aedev.flow.sync2.live.LiveMessage
+import io.github.aedev.flow.ui.components.musicplayer.common.rememberSplitTransport
 import io.github.aedev.flow.ui.components.musicplayer.controls.ExpressivePlayerSlider
 import io.github.aedev.flow.ui.components.musicplayer.controls.expressiveSliderSpec
 import io.github.aedev.flow.ui.components.shared.FlowEmptyState
@@ -87,6 +88,7 @@ internal fun PlayOnNowCard(
                 onPreviousClick = { onControl("previous", null) },
                 onPlayPauseToggle = { onControl(if (playing) "pause" else "play", null) },
                 onNextClick = { onControl("next", null) },
+                split = rememberSplitTransport(),
             )
             VolumeBar(session.device.did, now.vol) { onControl("volume", it) }
         }

app/src/main/java/io/github/aedev/flow/ui/screens/settings/appearance/player/PlayerAppearanceScreen.kt

@@ -206,6 +206,7 @@ internal fun PlayerAppearanceScreen(
                     viewModel::setPlainControlColors,
                 )
             }
+            switch(PlayerAppearanceIndex.splitTransport, viewModel.splitTransport, viewModel::setSplitTransport)
             switch(PlayerAppearanceIndex.sleepTimerButton, sleepTimerButton, viewModel::setSleepTimerButton)
             nav(PlayerAppearanceIndex.queueSwipeLeft, value = queueSwipeLeftLabel, onClick = { sheet = PreviewSheet.QUEUE_SWIPE_LEFT })
             nav(PlayerAppearanceIndex.queueSwipeRight, value = queueSwipeRightLabel, onClick = { sheet = PreviewSheet.QUEUE_SWIPE_RIGHT })

app/src/main/java/io/github/aedev/flow/ui/screens/settings/appearance/player/PlayerAppearanceViewModel.kt

@@ -43,6 +43,7 @@ class PlayerAppearanceViewModel
         val animatedArtworkWifiOnly = preferences.animatedArtworkWifiOnly.asState(true)
         val plainControlColors = preferences.musicPlainControlColors.asState(MusicPlainControlColors.MONOCHROME)
         val sleepTimerButton = preferences.musicSleepTimerButton.asState(false)
+        val splitTransport = preferences.musicSplitTransport.asState(true)
         val adaptivePlayerSize = preferences.adaptivePlayerSizeEnabled.asState(true)
         val playerScrollAway = preferences.playerScrollAwayEnabled.asState(false)
         val ambientMode = preferences.videoAmbientModeEnabled.asState(false)
@@ -97,6 +98,8 @@ class PlayerAppearanceViewModel
 
         fun setSleepTimerButton(value: Boolean) = write { preferences.setMusicSleepTimerButton(value) }
 
+        fun setSplitTransport(value: Boolean) = write { preferences.setMusicSplitTransport(value) }
+
         fun setAdaptivePlayerSize(value: Boolean) = write { preferences.setAdaptivePlayerSizeEnabled(value) }
 
         fun setPlayerScrollAway(value: Boolean) = write { preferences.setPlayerScrollAwayEnabled(value) }

app/src/main/java/io/github/aedev/flow/ui/screens/settings/index/PlayerAppearanceIndex.kt

@@ -113,6 +113,13 @@ internal object PlayerAppearanceIndex {
             section = R.string.settings_section_music_player,
             revealVia = artworkControlColors.key,
         )
+    val splitTransport =
+        entry(
+            "music_split_transport",
+            R.string.player_appearance_split_transport_title,
+            R.string.player_appearance_split_transport_subtitle,
+            R.string.settings_section_music_player,
+        )
     val sleepTimerButton =
         entry(
             "music_sleep_timer_button",
@@ -260,6 +267,7 @@ internal object PlayerAppearanceIndex {
             animatedArtworkWifiOnly,
             artworkControlColors,
             plainControlColors,
+            splitTransport,
             sleepTimerButton,
             queueSwipeLeft,
             queueSwipeRight,

app/src/main/res/values/strings.xml

@@ -180,6 +180,8 @@
     <string name="player_appearance_video_artwork_colors_subtitle">Tint description and comments</string>
     <string name="player_appearance_follow_light_theme_title">Light in light theme</string>
     <string name="player_appearance_follow_light_theme_subtitle">Artwork backgrounds turn light</string>
+    <string name="player_appearance_split_transport_title">Split buttons</string>
+    <string name="player_appearance_split_transport_subtitle">Previous and next sit flat against play/pause</string>
     <string name="player_appearance_sleep_timer_button_title">Sleep timer button</string>
     <string name="player_appearance_sleep_timer_button_subtitle">Show it next to the queue button</string>
     <string name="player_appearance_plain_control_colors_title">Control colors</string>

app/src/test/java/io/github/aedev/flow/data/local/DevicePreferencesSplitTest.kt

@@ -25,7 +25,7 @@ class DevicePreferencesSplitTest {
         val device = keyNames("DeviceKeys")
 
         assertThat(device).hasSize(124)
-        assertThat(profile).hasSize(252)
+        assertThat(profile).hasSize(253)
         assertThat(device.toSet()).hasSize(device.size)
         assertThat(profile.toSet()).hasSize(profile.size)
         assertThat(device.intersect(profile.toSet())).isEmpty()

app/src/test/java/io/github/aedev/flow/ui/components/shared/SplitSideShapeTest.kt

@@ -0,0 +1,47 @@
+package io.github.aedev.flow.ui.components.shared
+
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.unit.Density
+import com.google.common.truth.Truth.assertThat
+import org.junit.Test
+
+class SplitSideShapeTest {
+    private val density = Density(1f)
+    private val size = Size(120f, 68f)
+
+    @Test
+    fun `previous is fully round on its start side and nearly flat towards play pause`() {
+        val shape = splitSideShape(leading = true, pressedFraction = 0f)
+
+        assertThat(shape.topStart.toPx(size, density)).isAtLeast(34f)
+        assertThat(shape.bottomStart.toPx(size, density)).isAtLeast(34f)
+        assertThat(shape.topEnd.toPx(size, density)).isEqualTo(8f)
+        assertThat(shape.bottomEnd.toPx(size, density)).isEqualTo(8f)
+    }
+
+    @Test
+    fun `next mirrors previous`() {
+        val shape = splitSideShape(leading = false, pressedFraction = 0f)
+
+        assertThat(shape.topStart.toPx(size, density)).isEqualTo(8f)
+        assertThat(shape.bottomStart.toPx(size, density)).isEqualTo(8f)
+        assertThat(shape.topEnd.toPx(size, density)).isAtLeast(34f)
+        assertThat(shape.bottomEnd.toPx(size, density)).isAtLeast(34f)
+    }
+
+    @Test
+    fun `a press rounds the inner corner out`() {
+        val pressed = splitSideShape(leading = true, pressedFraction = 1f)
+        val halfway = splitSideShape(leading = true, pressedFraction = 0.5f)
+
+        assertThat(pressed.topEnd.toPx(size, density)).isEqualTo(20f)
+        assertThat(halfway.topEnd.toPx(size, density)).isEqualTo(14f)
+    }
+
+    @Test
+    fun `the spring's undershoot never makes a corner negative`() {
+        val shape = splitSideShape(leading = false, pressedFraction = -2f)
+
+        assertThat(shape.topStart.toPx(size, density)).isEqualTo(0f)
+    }
+}