From de02f751167271c6870944cb65128c15f2959d50 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 12 Jan 2023 18:59:28 +0100
Subject: [PATCH] Add Netflix-like seek animation

---
 .../libretube/ui/views/CustomExoPlayerView.kt | 45 +++++++++++++++----
 .../main/res/layout/double_tap_overlay.xml    | 10 ++++-
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt b/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt
index 4a64cc052..9b33f4354 100644
--- a/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt
+++ b/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt
@@ -259,9 +259,9 @@ internal class CustomExoPlayerView(
                     R.drawable.ic_speed,
                     {
                         "${
-                        player?.playbackParameters?.speed
-                            .toString()
-                            .replace(".0", "")
+                            player?.playbackParameters?.speed
+                                .toString()
+                                .replace(".0", "")
                         }x"
                     }
                 ) {
@@ -366,17 +366,30 @@ internal class CustomExoPlayerView(
         }
     }
 
-    private fun animateSeeking(container: FrameLayout, imageView: ImageView, textView: TextView, isRewind: Boolean) {
+    private fun animateSeeking(
+        container: FrameLayout,
+        imageView: ImageView,
+        textView: TextView,
+        isRewind: Boolean
+    ) {
         container.visibility = View.VISIBLE
+        // the direction of the action
+        val direction = if (isRewind) -1 else 1
+
         // clear previous animation
         imageView.animate()
             .rotation(0F)
             .setDuration(0)
             .start()
 
+        textView.animate()
+            .translationX(0f)
+            .setDuration(0)
+            .start()
+
         // start the rotate animation of the drawable
         imageView.animate()
-            .rotation(if (isRewind) -30F else 30F)
+            .rotation(direction * 30F)
             .setDuration(ANIMATION_DURATION)
             .withEndAction {
                 // reset the animation when finished
@@ -386,16 +399,30 @@ internal class CustomExoPlayerView(
                     .start()
             }
             .start()
+
+        // animate the text view to move outside the image view
+        textView.animate()
+            .translationX(direction * 100f)
+            .setDuration((ANIMATION_DURATION * 1.5).toLong())
+            .withEndAction {
+                // move the text back into the button
+                handler.postDelayed({
+                    textView.animate()
+                        .setDuration(ANIMATION_DURATION / 2)
+                        .translationX(0f)
+                        .start()
+                }, 100)
+            }
     }
 
     private val hideForwardButtonRunnable = Runnable {
-        doubleTapOverlayBinding?.forwardBTN.apply {
-            this!!.visibility = View.GONE
+        doubleTapOverlayBinding?.forwardBTN?.apply {
+            this.visibility = View.GONE
         }
     }
     private val hideRewindButtonRunnable = Runnable {
-        doubleTapOverlayBinding?.rewindBTN.apply {
-            this!!.visibility = View.GONE
+        doubleTapOverlayBinding?.rewindBTN?.apply {
+            this.visibility = View.GONE
         }
     }
 
diff --git a/app/src/main/res/layout/double_tap_overlay.xml b/app/src/main/res/layout/double_tap_overlay.xml
index c839aaf84..73992d0eb 100644
--- a/app/src/main/res/layout/double_tap_overlay.xml
+++ b/app/src/main/res/layout/double_tap_overlay.xml
@@ -12,6 +12,8 @@
         android:layout_height="match_parent"
         android:layout_weight=".40"
         android:clickable="false"
+        android:clipChildren="false"
+        android:clipToPadding="false"
         android:focusable="false">
 
         <FrameLayout
@@ -33,7 +35,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
-                android:textColor="@android:color/white" />
+                android:textColor="@android:color/white"
+                android:translationZ="1dp" />
 
         </FrameLayout>
 
@@ -52,6 +55,8 @@
         android:layout_height="match_parent"
         android:layout_weight=".40"
         android:clickable="false"
+        android:clipChildren="false"
+        android:clipToPadding="false"
         android:focusable="false">
 
         <FrameLayout
@@ -73,7 +78,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
-                android:textColor="@android:color/white" />
+                android:textColor="@android:color/white"
+                android:translationZ="1dp" />
 
         </FrameLayout>