From 106194fa524730d6a6409d75c57910eedbeab870 Mon Sep 17 00:00:00 2001
From: Alexander Capehart <alex@oxycblt.org>
Date: Sat, 20 Jul 2024 16:06:56 -0600
Subject: [PATCH] playback: add split screen playback form factor

---
 .../auxio/playback/PlaybackPanelFragment.kt   |  16 +-
 .../layout-h240dp/fragment_playback_panel.xml | 176 ++++++++++++++++++
 .../res/layout/fragment_playback_panel.xml    |  85 +++------
 app/src/main/res/values/styles_ui.xml         |  12 ++
 4 files changed, 224 insertions(+), 65 deletions(-)
 create mode 100644 app/src/main/res/layout-h240dp/fragment_playback_panel.xml

diff --git a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackPanelFragment.kt b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackPanelFragment.kt
index 80f9a99d0..c73a1b814 100644
--- a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackPanelFragment.kt
+++ b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackPanelFragment.kt
@@ -102,12 +102,12 @@ class PlaybackPanelFragment :
             isSelected = true
             setOnClickListener { navigateToCurrentArtist() }
         }
-        binding.playbackAlbum.apply {
+        binding.playbackAlbum?.apply {
             isSelected = true
             setOnClickListener { navigateToCurrentAlbum() }
         }
 
-        binding.playbackSeekBar.listener = this
+        binding.playbackSeekBar?.listener = this
 
         // Set up actions
         // TODO: Add better playback button accessibility
@@ -116,7 +116,7 @@ class PlaybackPanelFragment :
         binding.playbackPlayPause.setOnClickListener { playbackModel.togglePlaying() }
         binding.playbackSkipNext.setOnClickListener { playbackModel.next() }
         binding.playbackShuffle.setOnClickListener { playbackModel.toggleShuffled() }
-        binding.playbackMore.setOnClickListener {
+        binding.playbackMore?.setOnClickListener {
             playbackModel.song.value?.let {
                 listModel.openMenu(R.menu.playback_song, it, PlaySong.ByItself)
             }
@@ -135,7 +135,7 @@ class PlaybackPanelFragment :
         equalizerLauncher = null
         binding.playbackSong.isSelected = false
         binding.playbackArtist.isSelected = false
-        binding.playbackAlbum.isSelected = false
+        binding.playbackAlbum?.isSelected = false
         binding.playbackToolbar.setOnMenuItemClickListener(null)
     }
 
@@ -185,10 +185,10 @@ class PlaybackPanelFragment :
         val context = requireContext()
         logD("Updating song display: $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.playbackAlbum.text = song.album.name.resolve(context)
-        binding.playbackSeekBar.durationDs = song.durationMs.msToDs()
+        binding.playbackAlbum?.text = song.album.name.resolve(context)
+        binding.playbackSeekBar?.durationDs = song.durationMs.msToDs()
     }
 
     private fun updateParent(parent: MusicParent?) {
@@ -199,7 +199,7 @@ class PlaybackPanelFragment :
     }
 
     private fun updatePosition(positionDs: Long) {
-        requireBinding().playbackSeekBar.positionDs = positionDs
+        requireBinding().playbackSeekBar?.positionDs = positionDs
     }
 
     private fun updateRepeat(repeatMode: RepeatMode) {
diff --git a/app/src/main/res/layout-h240dp/fragment_playback_panel.xml b/app/src/main/res/layout-h240dp/fragment_playback_panel.xml
new file mode 100644
index 000000000..b73de1fd9
--- /dev/null
+++ b/app/src/main/res/layout-h240dp/fragment_playback_panel.xml
@@ -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>
diff --git a/app/src/main/res/layout/fragment_playback_panel.xml b/app/src/main/res/layout/fragment_playback_panel.xml
index 07ba982bd..fa845fb33 100644
--- a/app/src/main/res/layout/fragment_playback_panel.xml
+++ b/app/src/main/res/layout/fragment_playback_panel.xml
@@ -12,95 +12,67 @@
         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:subtitleCentered="true"
+        app:subtitleTextAppearance="@style/TextAppearance.Auxio.BodySmall"
         app:title="@string/lbl_playback"
+        app:titleCentered="true"
+        app:titleTextAppearance="@style/TextAppearance.Auxio.LabelLarge"
         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"
+        android:layout_marginVertical="@dimen/spacing_small"
         app:enablePlaybackIndicator="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_constraintTop_toBottomOf="@+id/playback_toolbar"
-        app:layout_constraintVertical_chainStyle="packed" />
-
+        app:layout_constraintTop_toBottomOf="@+id/playback_toolbar" />
 
     <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_medium"
+        android:layout_marginBottom="@dimen/spacing_tiny"
         android:orientation="vertical"
-        android:layout_marginEnd="@dimen/spacing_mid_medium"
-        app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
-        app:layout_constraintEnd_toStartOf="@+id/playback_more"
-        app:layout_constraintHorizontal_bias="0.5"
+        app:layout_constraintBottom_toTopOf="@+id/playback_controls_wrapper"
+        app:layout_constraintEnd_toEndOf="parent"
         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"
+            style="@style/Widget.Auxio.TextView.Primary.Compact"
             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"
+            style="@style/Widget.Auxio.TextView.Secondary.Compact"
             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:id="@+id/playback_controls_wrapper"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/spacing_medium"
-        android:layout_marginEnd="@dimen/spacing_medium"
-        android:layout_marginBottom="@dimen/spacing_medium"
-        app:layout_constraintBottom_toBottomOf="parent"
+        android:layout_marginStart="@dimen/spacing_mid_medium"
+        android:layout_marginEnd="@dimen/spacing_mid_medium"
+        app:layout_constraintBottom_toBottomOf="@+id/playback_cover"
         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
             android:layout_width="match_parent"
@@ -108,7 +80,7 @@
 
             <org.oxycblt.auxio.ui.RippleFixMaterialButton
                 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_height="wrap_content"
                 android:contentDescription="@string/desc_change_repeat"
@@ -120,7 +92,7 @@
 
             <org.oxycblt.auxio.ui.RippleFixMaterialButton
                 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_height="wrap_content"
                 android:contentDescription="@string/desc_skip_prev"
@@ -132,7 +104,7 @@
 
             <org.oxycblt.auxio.playback.ui.AnimatedMaterialButton
                 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_height="wrap_content"
                 android:contentDescription="@string/desc_play_pause"
@@ -145,7 +117,7 @@
 
             <org.oxycblt.auxio.ui.RippleFixMaterialButton
                 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_height="wrap_content"
                 android:contentDescription="@string/desc_skip_next"
@@ -157,7 +129,7 @@
 
             <org.oxycblt.auxio.ui.RippleFixMaterialButton
                 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_height="wrap_content"
                 android:contentDescription="@string/desc_shuffle"
@@ -172,5 +144,4 @@
 
     </org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout>
 
-
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values/styles_ui.xml b/app/src/main/res/values/styles_ui.xml
index 0b8603e51..000a8e899 100644
--- a/app/src/main/res/values/styles_ui.xml
+++ b/app/src/main/res/values/styles_ui.xml
@@ -277,6 +277,18 @@
         <item name="iconTint">@color/m3_text_button_foreground_color_selector</item>
     </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">
         <item name="iconSize">40dp</item>
         <item name="android:minWidth">@dimen/size_touchable_medium</item>