Fabio/Auxio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

playback: add split screen playback form factor

Browse source
This commit is contained in:
Alexander Capehart 2024-07-20 16:06:56 -06:00
parent 95469a554c
commit 106194fa52
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
4 changed files with 224 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -102,12 +102,12 @@ class PlaybackPanelFragment :
isSelected = true isSelected = true
setOnClickListener { navigateToCurrentArtist() } setOnClickListener { navigateToCurrentArtist() }
} }
binding.playbackAlbum.apply { binding.playbackAlbum?.apply {
isSelected = true isSelected = true
setOnClickListener { navigateToCurrentAlbum() } setOnClickListener { navigateToCurrentAlbum() }
} }
binding.playbackSeekBar.listener = this binding.playbackSeekBar?.listener = this
// Set up actions // Set up actions
// TODO: Add better playback button accessibility // TODO: Add better playback button accessibility
@ -116,7 +116,7 @@ class PlaybackPanelFragment :
binding.playbackPlayPause.setOnClickListener { playbackModel.togglePlaying() } binding.playbackPlayPause.setOnClickListener { playbackModel.togglePlaying() }
binding.playbackSkipNext.setOnClickListener { playbackModel.next() } binding.playbackSkipNext.setOnClickListener { playbackModel.next() }
binding.playbackShuffle.setOnClickListener { playbackModel.toggleShuffled() } binding.playbackShuffle.setOnClickListener { playbackModel.toggleShuffled() }
binding.playbackMore.setOnClickListener { binding.playbackMore?.setOnClickListener {
playbackModel.song.value?.let { playbackModel.song.value?.let {
listModel.openMenu(R.menu.playback_song, it, PlaySong.ByItself) listModel.openMenu(R.menu.playback_song, it, PlaySong.ByItself)
} }
@ -135,7 +135,7 @@ class PlaybackPanelFragment :
equalizerLauncher = null equalizerLauncher = null
binding.playbackSong.isSelected = false binding.playbackSong.isSelected = false
binding.playbackArtist.isSelected = false binding.playbackArtist.isSelected = false
binding.playbackAlbum.isSelected = false binding.playbackAlbum?.isSelected = false
binding.playbackToolbar.setOnMenuItemClickListener(null) binding.playbackToolbar.setOnMenuItemClickListener(null)
} }
@ -185,10 +185,10 @@ class PlaybackPanelFragment :
val context = requireContext() val context = requireContext()
logD("Updating song display: $song") logD("Updating song display: $song")
binding.playbackCover.bind(song) binding.playbackCover.bind(song)
binding.playbackSong.text = song.name.resolve(context) binding.playbackSong?.text = song.name.resolve(context)
binding.playbackArtist.text = song.artists.resolveNames(context) binding.playbackArtist.text = song.artists.resolveNames(context)
binding.playbackAlbum.text = song.album.name.resolve(context) binding.playbackAlbum?.text = song.album.name.resolve(context)
binding.playbackSeekBar.durationDs = song.durationMs.msToDs() binding.playbackSeekBar?.durationDs = song.durationMs.msToDs()
} }
private fun updateParent(parent: MusicParent?) { private fun updateParent(parent: MusicParent?) {
@ -199,7 +199,7 @@ class PlaybackPanelFragment :
} }
private fun updatePosition(positionDs: Long) { private fun updatePosition(positionDs: Long) {
requireBinding().playbackSeekBar.positionDs = positionDs requireBinding().playbackSeekBar?.positionDs = positionDs
} }
private fun updateRepeat(repeatMode: RepeatMode) { private fun updateRepeat(repeatMode: RepeatMode) {

176
app/src/main/res/layout-h240dp/fragment_playback_panel.xml Normal file
View file

@ -0,0 +1,176 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/playback_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="@menu/toolbar_playback"
app:titleCentered="true"
app:subtitleCentered="true"
app:titleTextAppearance="@style/TextAppearance.Auxio.LabelLarge"
app:subtitleTextAppearance="@style/TextAppearance.Auxio.BodySmall"
app:navigationIcon="@drawable/ic_down_24"
app:title="@string/lbl_playback"
tools:subtitle="@string/lbl_all_songs" />
<org.oxycblt.auxio.playback.ui.SwipeCoverView
android:id="@+id/playback_cover"
style="@style/Widget.Auxio.Image.Full"
android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginTop="@dimen/spacing_medium"
app:enablePlaybackIndicator="false"
app:enableSelectionBadge="false"
app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
app:layout_constraintVertical_chainStyle="packed" />
<LinearLayout
android:id="@+id/playback_info_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_mid_medium"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="@+id/playback_cover"
app:layout_constraintEnd_toStartOf="@+id/playback_more"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/playback_cover"
app:layout_constraintTop_toTopOf="@+id/playback_cover"
app:layout_constraintVertical_chainStyle="packed">
<TextView
android:id="@+id/playback_song"
style="@style/Widget.Auxio.TextView.Primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Song Name" />
<TextView
android:id="@+id/playback_artist"
style="@style/Widget.Auxio.TextView.Secondary.Marquee"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Artist Name" />
<TextView
android:id="@+id/playback_album"
style="@style/Widget.Auxio.TextView.Secondary.Marquee"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Album Name" />
</LinearLayout>
<org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_more"
style="@style/Widget.Auxio.Button.Icon.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_more_24"
android:layout_marginEnd="@dimen/spacing_mid_medium"
app:layout_constraintBottom_toBottomOf="@+id/playback_info_container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/playback_info_container" />
<org.oxycblt.auxio.playback.ui.StyledSeekBar
android:id="@+id/playback_seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/playback_controls_container"
app:layout_constraintEnd_toEndOf="@+id/playback_info_container"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout
android:id="@+id/playback_controls_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_mid_medium"
android:layout_marginEnd="@dimen/spacing_mid_medium"
android:layout_marginBottom="@dimen/spacing_medium"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_repeat"
style="@style/Widget.Auxio.Button.Icon.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/desc_change_repeat"
app:icon="@drawable/ic_repeat_off_24"
app:iconTint="@color/sel_activatable_icon"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_prev"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
<org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_skip_prev"
style="@style/Widget.Auxio.Button.Icon.Huge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/desc_skip_prev"
app:icon="@drawable/ic_skip_prev_40"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
app:layout_constraintStart_toEndOf="@+id/playback_repeat"
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
<org.oxycblt.auxio.playback.ui.AnimatedMaterialButton
android:id="@+id/playback_play_pause"
style="@style/Widget.Auxio.Button.PlayPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/desc_play_pause"
app:icon="@drawable/sel_playing_state_48"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:icon="@drawable/ic_play_24" />
<org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_skip_next"
style="@style/Widget.Auxio.Button.Icon.Huge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/desc_skip_next"
app:icon="@drawable/ic_skip_next_40"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
app:layout_constraintEnd_toStartOf="@+id/playback_shuffle"
app:layout_constraintStart_toEndOf="@+id/playback_play_pause"
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
<org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_shuffle"
style="@style/Widget.Auxio.Button.Icon.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/desc_shuffle"
app:icon="@drawable/sel_shuffle_state_24"
app:iconTint="@color/sel_activatable_icon"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/playback_skip_next"
app:tint="@color/sel_activatable_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
</org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

85
app/src/main/res/layout/fragment_playback_panel.xml
View file

@ -12,95 +12,67 @@
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintTop_toTopOf="parent"
app:menu="@menu/toolbar_playback" app:menu="@menu/toolbar_playback"
app:titleCentered="true"
app:subtitleCentered="true"
app:titleTextAppearance="@style/TextAppearance.Auxio.LabelLarge"
app:subtitleTextAppearance="@style/TextAppearance.Auxio.BodySmall"
app:navigationIcon="@drawable/ic_down_24" app:navigationIcon="@drawable/ic_down_24"
app:subtitleCentered="true"
app:subtitleTextAppearance="@style/TextAppearance.Auxio.BodySmall"
app:title="@string/lbl_playback" app:title="@string/lbl_playback"
app:titleCentered="true"
app:titleTextAppearance="@style/TextAppearance.Auxio.LabelLarge"
tools:subtitle="@string/lbl_all_songs" /> tools:subtitle="@string/lbl_all_songs" />
<org.oxycblt.auxio.playback.ui.SwipeCoverView <org.oxycblt.auxio.playback.ui.SwipeCoverView
android:id="@+id/playback_cover" android:id="@+id/playback_cover"
style="@style/Widget.Auxio.Image.Full" style="@style/Widget.Auxio.Image.Full"
android:layout_marginStart="@dimen/spacing_medium" android:layout_marginVertical="@dimen/spacing_small"
android:layout_marginTop="@dimen/spacing_medium"
app:enablePlaybackIndicator="false" app:enablePlaybackIndicator="false"
app:enableSelectionBadge="false" app:enableSelectionBadge="false"
app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar" app:shapeAppearance="@style/ShapeAppearance.Material3.Corner.Large"
android:layout_marginStart="@dimen/spacing_medium"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playback_toolbar" app:layout_constraintTop_toBottomOf="@+id/playback_toolbar" />
app:layout_constraintVertical_chainStyle="packed" />
<LinearLayout <LinearLayout
android:id="@+id/playback_info_container" android:id="@+id/playback_info_container"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium" android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_medium"
android:layout_marginBottom="@dimen/spacing_tiny"
android:orientation="vertical" android:orientation="vertical"
android:layout_marginEnd="@dimen/spacing_mid_medium" app:layout_constraintBottom_toTopOf="@+id/playback_controls_wrapper"
app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playback_more"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/playback_cover" app:layout_constraintStart_toEndOf="@+id/playback_cover"
app:layout_constraintTop_toTopOf="@+id/playback_cover" app:layout_constraintTop_toTopOf="@+id/playback_cover"
app:layout_constraintVertical_chainStyle="packed"> app:layout_constraintVertical_chainStyle="packed">
<TextView <TextView
android:id="@+id/playback_song" android:id="@+id/playback_song"
style="@style/Widget.Auxio.TextView.Primary" style="@style/Widget.Auxio.TextView.Primary.Compact"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
tools:text="Song Name" /> tools:text="Song Name" />
<TextView <TextView
android:id="@+id/playback_artist" android:id="@+id/playback_artist"
style="@style/Widget.Auxio.TextView.Secondary.Marquee" style="@style/Widget.Auxio.TextView.Secondary.Compact"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
tools:text="Artist Name" /> tools:text="Artist Name" />
<TextView
android:id="@+id/playback_album"
style="@style/Widget.Auxio.TextView.Secondary.Marquee"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Album Name" />
</LinearLayout> </LinearLayout>
<org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_more"
style="@style/Widget.Auxio.Button.Icon.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_more_24"
android:layout_marginEnd="@dimen/spacing_mid_medium"
app:layout_constraintBottom_toBottomOf="@+id/playback_info_container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/playback_info_container" />
<org.oxycblt.auxio.playback.ui.StyledSeekBar
android:id="@+id/playback_seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/playback_controls_container"
app:layout_constraintEnd_toEndOf="@+id/playback_info_container"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout <org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout
android:id="@+id/playback_controls_container" android:id="@+id/playback_controls_wrapper"
android:layout_width="match_parent" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium" android:layout_marginStart="@dimen/spacing_mid_medium"
android:layout_marginEnd="@dimen/spacing_medium" android:layout_marginEnd="@dimen/spacing_mid_medium"
android:layout_marginBottom="@dimen/spacing_medium" app:layout_constraintBottom_toBottomOf="@+id/playback_cover"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"> app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/playback_cover"
app:layout_constraintTop_toBottomOf="@+id/playback_info_container">
<androidx.constraintlayout.widget.ConstraintLayout <androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent" android:layout_width="match_parent"
@ -108,7 +80,7 @@
<org.oxycblt.auxio.ui.RippleFixMaterialButton <org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_repeat" android:id="@+id/playback_repeat"
style="@style/Widget.Auxio.Button.Icon.Medium" style="@style/Widget.Auxio.Button.Icon.Small"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:contentDescription="@string/desc_change_repeat" android:contentDescription="@string/desc_change_repeat"
@ -120,7 +92,7 @@
<org.oxycblt.auxio.ui.RippleFixMaterialButton <org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_skip_prev" android:id="@+id/playback_skip_prev"
style="@style/Widget.Auxio.Button.Icon.Huge" style="@style/Widget.Auxio.Button.Icon.Small.Secondary"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:contentDescription="@string/desc_skip_prev" android:contentDescription="@string/desc_skip_prev"
@ -132,7 +104,7 @@
<org.oxycblt.auxio.playback.ui.AnimatedMaterialButton <org.oxycblt.auxio.playback.ui.AnimatedMaterialButton
android:id="@+id/playback_play_pause" android:id="@+id/playback_play_pause"
style="@style/Widget.Auxio.Button.PlayPause" style="@style/Widget.Auxio.Button.Icon.Small.PlayPause"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:contentDescription="@string/desc_play_pause" android:contentDescription="@string/desc_play_pause"
@ -145,7 +117,7 @@
<org.oxycblt.auxio.ui.RippleFixMaterialButton <org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_skip_next" android:id="@+id/playback_skip_next"
style="@style/Widget.Auxio.Button.Icon.Huge" style="@style/Widget.Auxio.Button.Icon.Small.Secondary"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:contentDescription="@string/desc_skip_next" android:contentDescription="@string/desc_skip_next"
@ -157,7 +129,7 @@
<org.oxycblt.auxio.ui.RippleFixMaterialButton <org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_shuffle" android:id="@+id/playback_shuffle"
style="@style/Widget.Auxio.Button.Icon.Medium" style="@style/Widget.Auxio.Button.Icon.Small"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:contentDescription="@string/desc_shuffle" android:contentDescription="@string/desc_shuffle"
@ -172,5 +144,4 @@
</org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout> </org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>

12
app/src/main/res/values/styles_ui.xml
View file

@ -277,6 +277,18 @@
<item name="iconTint">@color/m3_text_button_foreground_color_selector</item> <item name="iconTint">@color/m3_text_button_foreground_color_selector</item>
</style> </style>
<style name="Widget.Auxio.Button.Icon.Small.Secondary" parent="Widget.Auxio.Button.Icon.Small">
<item name="materialThemeOverlay">@style/ThemeOverlay.Auxio.IconButton.Huge</item>
</style>
<style name="Widget.Auxio.Button.Icon.Small.PlayPause" parent="Widget.Auxio.Button.Icon.Small">
<item name="shapeAppearanceOverlay">
@style/ShapeAppearanceOverlay.Material3.FloatingActionButton
</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.Auxio.IconButton.PlayPause</item>
</style>
<style name="Widget.Auxio.Button.Icon.Huge" parent="Widget.Material3.Button.IconButton"> <style name="Widget.Auxio.Button.Icon.Huge" parent="Widget.Material3.Button.IconButton">
<item name="iconSize">40dp</item> <item name="iconSize">40dp</item>
<item name="android:minWidth">@dimen/size_touchable_medium</item> <item name="android:minWidth">@dimen/size_touchable_medium</item>