From d00299bea7b9b13d75daed6dd1ec1158625898f8 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Wed, 6 Dec 2023 15:29:30 +0100
Subject: [PATCH] style: new player layout and various UI improvements

---
 .../libretube/ui/fragments/PlayerFragment.kt  |  6 --
 .../main/res/layout-land/fragment_player.xml  |  9 +--
 .../main/res/layout/description_layout.xml    | 18 ++---
 app/src/main/res/layout/fragment_player.xml   | 77 ++++++++-----------
 app/src/main/res/values/style.xml             | 10 +++
 5 files changed, 51 insertions(+), 69 deletions(-)

diff --git a/app/src/main/java/com/github/libretube/ui/fragments/PlayerFragment.kt b/app/src/main/java/com/github/libretube/ui/fragments/PlayerFragment.kt
index 264fc5d36..fb04a760c 100644
--- a/app/src/main/java/com/github/libretube/ui/fragments/PlayerFragment.kt
+++ b/app/src/main/java/com/github/libretube/ui/fragments/PlayerFragment.kt
@@ -480,8 +480,6 @@ class PlayerFragment : Fragment(), OnlinePlayerOptions {
         if (PlayerHelper.pipEnabled) {
             PictureInPictureCompat.setPictureInPictureParams(activity, pipParams)
         }
-        binding.relPlayerPip.isVisible = PictureInPictureCompat
-            .isPictureInPictureAvailable(activity)
     }
 
     private fun onManualPlayerClose() {
@@ -630,10 +628,6 @@ class PlayerFragment : Fragment(), OnlinePlayerOptions {
             }
         }
 
-        binding.relPlayerPip.setOnClickListener {
-            PictureInPictureCompat.enterPictureInPictureMode(requireActivity(), pipParams)
-        }
-
         binding.playerChannel.setOnClickListener {
             if (!this::streams.isInitialized) return@setOnClickListener
 
diff --git a/app/src/main/res/layout-land/fragment_player.xml b/app/src/main/res/layout-land/fragment_player.xml
index 0c273a347..447e62ad1 100644
--- a/app/src/main/res/layout-land/fragment_player.xml
+++ b/app/src/main/res/layout-land/fragment_player.xml
@@ -35,7 +35,8 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginHorizontal="10dp"
-                android:layout_marginVertical="17dp"
+                android:layout_marginTop="10dp"
+                android:layout_marginBottom="16dp"
                 app:cardCornerRadius="27dp">
 
                 <LinearLayout
@@ -60,12 +61,6 @@
                         android:text="@string/download"
                         app:drawableTopCompat="@drawable/ic_download" />
 
-                    <com.github.libretube.ui.views.DrawableTextView
-                        android:id="@+id/relPlayer_pip"
-                        style="@style/PlayerActionsText"
-                        android:text="@string/pop_up"
-                        app:drawableTopCompat="@drawable/ic_open" />
-
                     <com.github.libretube.ui.views.DrawableTextView
                         android:id="@+id/relPlayer_background"
                         style="@style/PlayerActionsText"
diff --git a/app/src/main/res/layout/description_layout.xml b/app/src/main/res/layout/description_layout.xml
index 9a86d8c51..3aab3be77 100644
--- a/app/src/main/res/layout/description_layout.xml
+++ b/app/src/main/res/layout/description_layout.xml
@@ -5,20 +5,21 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:animateLayoutChanges="true"
-    android:orientation="vertical">
+    android:orientation="vertical"
+    android:paddingVertical="12dp">
 
     <LinearLayout
         android:id="@+id/player_title_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="center_vertical"
-        android:layout_marginHorizontal="4dp"
-        android:orientation="vertical">
+        android:orientation="vertical"
+        android:paddingHorizontal="12dp">
 
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginVertical="8dp"
+            android:layout_marginBottom="8dp"
             android:orientation="horizontal">
 
             <TextView
@@ -26,7 +27,6 @@
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
-                android:layout_marginStart="10dp"
                 android:layout_marginEnd="5dp"
                 android:layout_weight="1"
                 android:maxLines="2"
@@ -38,7 +38,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
-                android:layout_marginHorizontal="10dp"
+                android:layout_marginStart="10dp"
                 android:src="@drawable/ic_arrow_down" />
 
         </LinearLayout>
@@ -46,7 +46,6 @@
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginHorizontal="10dp"
             android:orientation="horizontal">
 
             <TextView
@@ -55,13 +54,12 @@
                 android:layout_height="wrap_content"
                 android:layout_marginEnd="5dp"
                 android:layout_weight="1"
-                tools:text="10M views    2 days ago " />
+                tools:text="10M views - 2 days ago " />
 
             <com.github.libretube.ui.views.DrawableTextView
                 android:id="@+id/textLike"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginHorizontal="5dp"
                 android:drawablePadding="5dp"
                 app:drawableStartCompat="@drawable/ic_like"
                 app:drawableStartDimen="12dp"
@@ -71,7 +69,7 @@
                 android:id="@+id/textDislike"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginHorizontal="5dp"
+                android:layout_marginStart="5dp"
                 android:drawablePadding="5dp"
                 android:visibility="gone"
                 app:drawableStartCompat="@drawable/ic_dislike"
diff --git a/app/src/main/res/layout/fragment_player.xml b/app/src/main/res/layout/fragment_player.xml
index 2c330efc7..24f3552d8 100644
--- a/app/src/main/res/layout/fragment_player.xml
+++ b/app/src/main/res/layout/fragment_player.xml
@@ -28,64 +28,53 @@
                 android:id="@+id/descriptionLayout"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:animateLayoutChanges="true"/>
+                android:animateLayoutChanges="true" />
 
-            <com.google.android.material.card.MaterialCardView
-                style="@style/Widget.Material3.CardView.Elevated"
+            <HorizontalScrollView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginHorizontal="10dp"
-                android:layout_marginVertical="17dp"
-                app:cardCornerRadius="27dp">
+                android:paddingBottom="10dp"
+                android:scrollbars="none">
 
                 <LinearLayout
                     android:id="@+id/optionsLL"
-                    android:layout_width="match_parent"
+                    android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:layout_gravity="center"
-                    android:layout_marginHorizontal="8dp"
-                    android:layout_marginVertical="18dp"
-                    android:gravity="center"
+                    android:paddingHorizontal="2dp"
                     android:orientation="horizontal">
 
-                    <com.github.libretube.ui.views.DrawableTextView
+                    <com.google.android.material.button.MaterialButton
                         android:id="@+id/relPlayer_share"
-                        style="@style/PlayerActionsText"
+                        style="@style/PlayerActionsButton"
                         android:text="@string/share"
-                        app:drawableTopCompat="@drawable/ic_share" />
+                        app:icon="@drawable/ic_share" />
 
-                    <com.github.libretube.ui.views.DrawableTextView
+                    <com.google.android.material.button.MaterialButton
                         android:id="@+id/relPlayer_download"
-                        style="@style/PlayerActionsText"
+                        style="@style/PlayerActionsButton"
                         android:text="@string/download"
-                        app:drawableTopCompat="@drawable/ic_download" />
+                        app:icon="@drawable/ic_download" />
 
-                    <com.github.libretube.ui.views.DrawableTextView
-                        android:id="@+id/relPlayer_pip"
-                        style="@style/PlayerActionsText"
-                        android:text="@string/pop_up"
-                        app:drawableTopCompat="@drawable/ic_open" />
-
-                    <com.github.libretube.ui.views.DrawableTextView
-                        android:id="@+id/relPlayer_background"
-                        style="@style/PlayerActionsText"
-                        android:text="@string/audio"
-                        app:drawableTopCompat="@drawable/ic_headphones" />
-
-                    <com.github.libretube.ui.views.DrawableTextView
+                    <com.google.android.material.button.MaterialButton
                         android:id="@+id/relPlayer_save"
-                        style="@style/PlayerActionsText"
+                        style="@style/PlayerActionsButton"
                         android:text="@string/save"
-                        app:drawableTopCompat="@drawable/ic_save" />
+                        app:icon="@drawable/ic_save" />
+
+                    <com.google.android.material.button.MaterialButton
+                        android:id="@+id/relPlayer_background"
+                        style="@style/PlayerActionsButton"
+                        android:text="@string/audio"
+                        app:icon="@drawable/ic_headphones" />
                 </LinearLayout>
 
-            </com.google.android.material.card.MaterialCardView>
+            </HorizontalScrollView>
 
             <LinearLayout
                 android:id="@+id/player_channel"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginHorizontal="8dp"
+                android:layout_marginHorizontal="2dp"
                 android:layout_marginVertical="10dp"
                 android:background="@drawable/rounded_ripple"
                 android:orientation="horizontal"
@@ -130,14 +119,11 @@
 
                 <com.google.android.material.button.MaterialButton
                     android:id="@+id/player_subscribe"
-                    style="@style/Widget.Material3.Button.ElevatedButton"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_gravity="center"
                     android:text="@string/subscribe"
-                    android:textColor="?colorControlNormal"
-                    android:textSize="12sp"
-                    app:cornerRadius="16dp" />
+                    android:textSize="12sp" />
             </LinearLayout>
 
             <com.google.android.material.card.MaterialCardView
@@ -145,15 +131,15 @@
                 style="@style/Widget.Material3.CardView.Elevated"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginHorizontal="12dp"
+                android:layout_marginHorizontal="6dp"
                 android:layout_marginVertical="16dp"
-                app:cardCornerRadius="18dp">
+                app:cardCornerRadius="20dp">
 
                 <androidx.appcompat.widget.AppCompatTextView
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_margin="8dp"
-                    android:paddingHorizontal="8dp"
+                    android:layout_marginHorizontal="16dp"
+                    android:layout_marginVertical="10dp"
                     android:text="@string/comments"
                     android:textAlignment="viewStart"
                     app:drawableEndCompat="@drawable/ic_arrow_up_down" />
@@ -163,8 +149,7 @@
             <androidx.recyclerview.widget.RecyclerView
                 android:id="@+id/related_rec_view"
                 android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginHorizontal="12dp" />
+                android:layout_height="wrap_content" />
 
         </LinearLayout>
 
@@ -242,13 +227,13 @@
 
     <ImageView
         android:id="@+id/close_imageView"
-        android:tooltipText="@string/tooltip_close"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:alpha="0"
         android:background="?attr/selectableItemBackgroundBorderless"
         android:padding="8dp"
         android:src="@drawable/ic_close"
+        android:tooltipText="@string/tooltip_close"
         android:visibility="gone"
         app:layout_constraintBottom_toBottomOf="@id/main_container"
         app:layout_constraintEnd_toEndOf="@id/main_container"
@@ -256,13 +241,13 @@
 
     <ImageView
         android:id="@+id/play_imageView"
-        android:tooltipText="@string/tooltip_play"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:alpha="0"
         android:background="?attr/selectableItemBackgroundBorderless"
         android:padding="8dp"
         android:src="@drawable/ic_play"
+        android:tooltipText="@string/tooltip_play"
         android:visibility="gone"
         app:layout_constraintBottom_toBottomOf="@+id/close_imageView"
         app:layout_constraintEnd_toStartOf="@+id/close_imageView"
diff --git a/app/src/main/res/values/style.xml b/app/src/main/res/values/style.xml
index ec3fa839d..f27bcdfd7 100644
--- a/app/src/main/res/values/style.xml
+++ b/app/src/main/res/values/style.xml
@@ -82,6 +82,16 @@
 
     </style>
 
+    <style name="PlayerActionsButton" parent="@style/Widget.Material3.Button.ElevatedButton">
+
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_marginStart">4dp</item>
+        <item name="android:layout_marginEnd">4dp</item>
+        <item name="iconGravity">textStart</item>
+
+    </style>
+
     <style name="PlayerControlBottom">
 
         <item name="android:padding">9dp</item>