playback: introduce swipe to next

Author: OxygenCobalt

app/src/main/java/org/oxycblt/auxio/home/HomeFragment.kt

@@ -64,6 +64,7 @@ import org.oxycblt.auxio.playback.PlaybackViewModel
 import org.oxycblt.auxio.ui.FadingToolbarOffsetListener
 import org.oxycblt.auxio.util.collect
 import org.oxycblt.auxio.util.collectImmediately
+import org.oxycblt.auxio.util.dampen
 import org.oxycblt.auxio.util.lazyReflectedField
 import org.oxycblt.auxio.util.navigateSafe
 import org.oxycblt.auxio.util.showToast
@@ -157,14 +158,7 @@ class HomeFragment : SelectionFragment<FragmentHomeBinding>() {
             // debug UI performance.
             offscreenPageLimit = Tab.MAX_SEQUENCE_IDX + 1
 
-            // By default, ViewPager2's sensitivity is high enough to result in vertical scroll
-            // events being registered as horizontal scroll events. Reflect into the internal
-            // RecyclerView and change the touch slope so that touch actions will act more as a
-            // scroll than as a swipe. Derived from:
-            // https://al-e-shevelev.medium.com/how-to-reduce-scroll-sensitivity-of-viewpager2-widget-87797ad02414
-            val recycler = VP_RECYCLER_FIELD.get(this@apply)
-            val slop = RV_TOUCH_SLOP_FIELD.get(recycler) as Int
-            RV_TOUCH_SLOP_FIELD.set(recycler, slop * 3)
+            dampen()
         }
 
         // Further initialization must be done in the function that also handles
@@ -499,9 +493,4 @@ class HomeFragment : SelectionFragment<FragmentHomeBinding>() {
                 MusicType.PLAYLISTS -> PlaylistListFragment()
             }
     }
-
-    private companion object {
-        val VP_RECYCLER_FIELD: Field by lazyReflectedField(ViewPager2::class, "mRecyclerView")
-        val RV_TOUCH_SLOP_FIELD: Field by lazyReflectedField(RecyclerView::class, "mTouchSlop")
-    }
 }

app/src/main/java/org/oxycblt/auxio/playback/PlaybackPanelFragment.kt

@@ -25,30 +25,38 @@ import android.media.audiofx.AudioEffect
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.MenuItem
-import android.view.ViewTreeObserver
+import android.view.View
 import androidx.activity.result.ActivityResultLauncher
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.appcompat.widget.Toolbar
 import androidx.core.view.updatePadding
 import androidx.dynamicanimation.animation.SpringForce
 import androidx.fragment.app.activityViewModels
+import androidx.fragment.app.viewModels
 import dagger.hilt.android.AndroidEntryPoint
 import org.oxycblt.auxio.R
 import org.oxycblt.auxio.databinding.FragmentPlaybackPanelBinding
 import org.oxycblt.auxio.detail.DetailViewModel
 import org.oxycblt.auxio.list.ListViewModel
 import org.oxycblt.auxio.music.resolve
 import org.oxycblt.auxio.music.resolveNames
+import org.oxycblt.auxio.playback.queue.QueueViewModel
 import org.oxycblt.auxio.playback.state.RepeatMode
 import org.oxycblt.auxio.playback.ui.StyledSeekBar
+import org.oxycblt.auxio.playback.ui.swiper.CarouselTransformer
+import org.oxycblt.auxio.playback.ui.swiper.CoverPagerAdapter
+import org.oxycblt.auxio.playback.ui.swiper.UserAwarePagerCallback
 import org.oxycblt.auxio.playback.ui.stepper.Direction
 import org.oxycblt.auxio.playback.ui.stepper.PlayerFastSeekOverlay
 import org.oxycblt.auxio.ui.ViewBindingFragment
 import org.oxycblt.auxio.util.collectImmediately
+import org.oxycblt.auxio.util.dampen
+import org.oxycblt.auxio.util.recycler
 import org.oxycblt.auxio.util.showToast
 import org.oxycblt.auxio.util.systemBarInsetsCompat
 import org.oxycblt.musikr.MusicParent
 import org.oxycblt.musikr.Song
+import kotlin.math.abs
 import timber.log.Timber as L
 
 /**
@@ -64,13 +72,15 @@ class PlaybackPanelFragment :
     ViewBindingFragment<FragmentPlaybackPanelBinding>(),
     Toolbar.OnMenuItemClickListener,
     StyledSeekBar.Listener,
-    ViewTreeObserver.OnGlobalLayoutListener,
     PlayerFastSeekOverlay.PerformListener {
+        private val coverPagerAdapter = CoverPagerAdapter(this)
     private val playbackModel: PlaybackViewModel by activityViewModels()
     private val detailModel: DetailViewModel by activityViewModels()
     private val listModel: ListViewModel by activityViewModels()
+    private val queueModel: QueueViewModel by viewModels()
     private var equalizerLauncher: ActivityResultLauncher<Intent>? = null
-    private var lastCoverWidth = 0
+    private var userAwarePagerCallback: UserAwarePagerCallback? = null
+    private var currentPagerPosition = 0
 
     override fun onCreateBinding(inflater: LayoutInflater) =
         FragmentPlaybackPanelBinding.inflate(inflater)
@@ -100,11 +110,27 @@ class PlaybackPanelFragment :
             setOnMenuItemClickListener(this@PlaybackPanelFragment)
         }
 
-        // Disable swipe gestures on cover for now
-        binding.playbackCover.onSwipeListener = null
+        binding.playbackPager?.apply {
+            adapter = coverPagerAdapter
+            userAwarePagerCallback = UserAwarePagerCallback(this) {
+                // Posting the queue goto command prevents the seekbar pos from desyncing
+                // from the song's duration, which creates a visual flicker in the seekbar.
+                post { queueModel.goto(it) }
+            }.also { it.attach() }
+            setPageTransformer(CarouselTransformer())
+            recycler().apply {
+                // Make it possible to collapse the bottom sheet from the ViewPager's touch area.
+                isNestedScrollingEnabled = false
+                // Visual effect consistency
+                // TODO: Custom overscroll?
+                overScrollMode = View.OVER_SCROLL_NEVER
+            }
+            // Make it easier to collapse the bottom sheet
+            dampen()
+            offscreenPageLimit = 1
+        }
 
         // Set up fast seek overlay
-        binding.playbackFastSeekOverlay?.performListener = this
         binding.playbackSong.apply {
             isSelected = true
             setOnClickListener { navigateToCurrentSong() }
@@ -149,23 +175,25 @@ class PlaybackPanelFragment :
         collectImmediately(playbackModel.repeatMode, ::updateRepeat)
         collectImmediately(playbackModel.isPlaying, ::updatePlaying)
         collectImmediately(playbackModel.isShuffled, ::updateShuffled)
+        collectImmediately(playbackModel.pagerQueue, ::updatePager)
     }
 
-    override fun onStart() {
-        super.onStart()
-        playbackModel.song.value?.let { requireBinding().playbackCover.bind(it) }
-        requireBinding().root.viewTreeObserver.addOnGlobalLayoutListener(this)
-    }
+    // FIXME: Old code!! Maybe not necessary anymore?
+//    override fun onStart() {
+//        super.onStart()
+//        playbackModel.song.value?.let { requireBinding().playbackCover.bind(it) }
+//        requireBinding().root.viewTreeObserver.addOnGlobalLayoutListener(this)
+//    }
 
-    override fun onStop() {
-        super.onStop()
-        requireBinding().root.viewTreeObserver.removeOnGlobalLayoutListener(this)
-    }
+//    override fun onStop() {
+//        super.onStop()
+//        requireBinding().root.viewTreeObserver.removeOnGlobalLayoutListener(this)
+//    }
 
-    override fun onGlobalLayout() {
-        if (binding == null || lastCoverWidth < 0) {
-            return
-        }
+//    override fun onGlobalLayout() {
+//        if (binding == null || lastCoverWidth < 0) {
+//            return
+//        }
         // Hacky workaround for cover radius not being preserved in between sizing changes
         // (i.e split screen or landscape mode)
         // For some reason ConstraintLayout does several passes on 1:1 elements that causes their
@@ -175,15 +203,15 @@ class PlaybackPanelFragment :
         // covers) we can force it to reload.
         // If this breaks, it's fine since we also started a load as we normally did w/state
         // updates, so the cover will not break.
-        val binding = requireBinding()
-        val coverWidth = binding.playbackCover.width
-        if (lastCoverWidth != coverWidth) {
-            lastCoverWidth = coverWidth
-        } else {
-            playbackModel.song.value?.let { binding.playbackCover.bind(it) }
-            lastCoverWidth = -1
-        }
-    }
+//        val binding = requireBinding()
+//        val coverWidth = binding.playbackCover.width
+//        if (lastCoverWidth != coverWidth) {
+//            lastCoverWidth = coverWidth
+//        } else {
+//            playbackModel.song.value?.let { binding.playbackCover.bind(it) }
+//            lastCoverWidth = -1
+//        }
+//    }
 
     override fun onDestroyBinding(binding: FragmentPlaybackPanelBinding) {
         equalizerLauncher = null
@@ -192,6 +220,8 @@ class PlaybackPanelFragment :
         binding.playbackArtist.isSelected = false
         binding.playbackAlbum?.isSelected = false
         binding.playbackToolbar.setOnMenuItemClickListener(null)
+        userAwarePagerCallback?.release()
+        binding.playbackPager?.adapter = null
     }
 
     override fun onMenuItemClick(item: MenuItem): Boolean {
@@ -231,7 +261,6 @@ class PlaybackPanelFragment :
         val binding = requireBinding()
         val context = requireContext()
         L.d("Updating song display: $song")
-        binding.playbackCover.bind(song)
         binding.playbackSong.text = song.name.resolve(context)
         binding.playbackArtist.text = song.artists.resolveNames(context)
         binding.playbackAlbum?.text = song.album.name.resolve(context)
@@ -264,6 +293,40 @@ class PlaybackPanelFragment :
         requireBinding().playbackShuffle.isChecked = isShuffled
     }
 
+    private fun updatePager(queue: PagerQueue) {
+        val binding = requireBinding()
+
+        val command = playbackModel.pagerCommand.consume()
+        if (command == null) {
+            // This probably shouldn't happen in practice, as QueueViewModel directly
+            // attaches to PlaybackStateManager and will basically always initialize
+            // with a command as a result.
+            //
+            // If it does happen we should just make sure the UI state is aligned. Don't
+            // want broken UI.
+            coverPagerAdapter.update(queue.queue, null)
+            binding.playbackPager.setCurrentItem(queue.index, false)
+            return
+        }
+
+        if (command.update != null) {
+            // queue needs to be updated.
+            coverPagerAdapter.update(queue.queue, command.update)
+        }
+
+        if (command.scroll != null) {
+            // we need to scroll, however the smooth scroll only really looks best
+            // when we are only doing next/prev due to various factors. better to
+            // just not animate on outright gotos or queue updates
+            val delta = binding.playbackPager.currentItem - command.scroll
+            if (delta == 0) {
+                // user scroll, carry on
+                return
+            }
+            binding.playbackPager.setCurrentItem(command.scroll, command.update == null && abs(delta) == 1)
+        }
+    }
+
     private fun navigateToCurrentSong() {
         playbackModel.song.value?.let(detailModel::showAlbum)
     }
@@ -282,4 +345,8 @@ class PlaybackPanelFragment :
             Direction.BACKWARDS -> playbackModel.stepBackwards()
         }
     }
+
+    private companion object {
+
+    }
 }

app/src/main/java/org/oxycblt/auxio/playback/PlaybackViewModel.kt

@@ -28,6 +28,7 @@ import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.launch
 import org.oxycblt.auxio.list.ListSettings
+import org.oxycblt.auxio.list.adapter.UpdateInstructions
 import org.oxycblt.auxio.playback.state.DeferredPlayback
 import org.oxycblt.auxio.playback.state.PlaybackCommand
 import org.oxycblt.auxio.playback.state.PlaybackStateManager
@@ -104,6 +105,15 @@ constructor(
     val openPanel: Event<OpenPanel>
         get() = _openPanel
 
+    private val _pagerQueue = MutableStateFlow(PagerQueue(listOf(), 0))
+    /** The current queue in a special bundled format suitable for the cover ViewPager2. */
+    val pagerQueue: StateFlow<PagerQueue> = _pagerQueue
+
+    private val _pagerCommand = MutableEvent<PagerCommand>()
+    /** Specialized ViewPager2-friendly queue commands */
+    val pagerCommand: Event<PagerCommand>
+        get() = _pagerCommand
+
     private val _playbackDecision = MutableEvent<PlaybackDecision>()
     /**
      * A [PlaybackDecision] command that is awaiting a view capable of responding to it. Null if
@@ -130,7 +140,16 @@ constructor(
 
     override fun onIndexMoved(index: Int) {
         L.d("Index moved, updating current song")
+        _positionDs.value = playbackManager.progression.calculateElapsedPositionMs().msToDs()
         _song.value = playbackManager.currentSong
+
+        _pagerCommand.put(
+            PagerCommand(
+                update = null,
+                scroll = index
+            )
+        )
+        _pagerQueue.value = _pagerQueue.value.copy(index = index)
     }
 
     override fun onQueueChanged(queue: List<Song>, index: Int, change: QueueChange) {
@@ -139,11 +158,33 @@ constructor(
             L.d("Queue changed, updating current song")
             _song.value = playbackManager.currentSong
         }
+
+        _pagerCommand.put(
+            PagerCommand(
+                update = change.instructions,
+                scroll = index.takeIf { change.type != QueueChange.Type.MAPPING }
+            )
+        )
+        _pagerQueue.value = PagerQueue(
+            queue = queue,
+            index = index
+        )
     }
 
     override fun onQueueReordered(queue: List<Song>, index: Int, isShuffled: Boolean) {
         L.d("Queue completely changed, updating current song")
         _isShuffled.value = isShuffled
+
+        _pagerCommand.put(
+            PagerCommand(
+                update = UpdateInstructions.Replace(0),
+                scroll = index
+            )
+        )
+        _pagerQueue.value = PagerQueue(
+            queue = queue,
+            index = index
+        )
     }
 
     override fun onNewPlayback(
@@ -156,6 +197,17 @@ constructor(
         _song.value = playbackManager.currentSong
         _parent.value = parent
         _isShuffled.value = isShuffled
+
+        _pagerCommand.put(
+            PagerCommand(
+                update = UpdateInstructions.Replace(0),
+                scroll = index
+            )
+        )
+        _pagerQueue.value = PagerQueue(
+            queue = queue,
+            index = index
+        )
     }
 
     override fun onProgressionChanged(progression: Progression) {
@@ -632,6 +684,17 @@ constructor(
     }
 }
 
+
+data class PagerQueue(
+    val queue: List<Song>,
+    val index: Int
+)
+
+data class PagerCommand(
+    val update: UpdateInstructions?,
+    val scroll: Int?
+)
+
 /**
  * Command for controlling the main playback panel UI.
  *