Merge pull request #2672 from Bnyro/master

New seek buttons and Netflix-like animation

app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt

@@ -10,6 +10,9 @@ import android.os.Looper
 import android.util.AttributeSet
 import android.view.MotionEvent
 import android.view.View
+import android.widget.FrameLayout
+import android.widget.ImageView
+import android.widget.TextView
 import androidx.core.content.ContextCompat
 import com.github.libretube.R
 import com.github.libretube.databinding.DoubleTapOverlayBinding
@@ -341,19 +344,8 @@ internal class CustomExoPlayerView(
         player?.seekTo((player?.currentPosition ?: 0L) - PlayerHelper.seekIncrement)
 
         // show the rewind button
-        doubleTapOverlayBinding?.rewindBTN.apply {
-            this!!.visibility = View.VISIBLE
-            // clear previous animation
-            this.animate().rotation(0F).setDuration(0).start()
-            // start new animation
-            this.animate()
-                .rotation(-30F)
-                .setDuration(100)
-                .withEndAction {
-                    // reset the animation when finished
-                    animate().rotation(0F).setDuration(100).start()
-                }
-                .start()
+        doubleTapOverlayBinding?.apply {
+            animateSeeking(rewindBTN, rewindIV, rewindTV, true)
 
             runnableHandler.removeCallbacks(hideRewindButtonRunnable)
             // start callback to hide the button
@@ -365,19 +357,8 @@ internal class CustomExoPlayerView(
         player?.seekTo(player!!.currentPosition + PlayerHelper.seekIncrement)
 
         // show the forward button
-        doubleTapOverlayBinding?.forwardBTN.apply {
-            this!!.visibility = View.VISIBLE
-            // clear previous animation
-            this.animate().rotation(0F).setDuration(0).start()
-            // start new animation
-            this.animate()
-                .rotation(30F)
-                .setDuration(100)
-                .withEndAction {
-                    // reset the animation when finished
-                    animate().rotation(0F).setDuration(100).start()
-                }
-                .start()
+        doubleTapOverlayBinding?.apply {
+            animateSeeking(forwardBTN, forwardIV, forwardTV, false)
 
             // start callback to hide the button
             runnableHandler.removeCallbacks(hideForwardButtonRunnable)
@@ -385,14 +366,63 @@ internal class CustomExoPlayerView(
         }
     }
 
+    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(direction * 30F)
+            .setDuration(ANIMATION_DURATION)
+            .withEndAction {
+                // reset the animation when finished
+                imageView.animate()
+                    .rotation(0F)
+                    .setDuration(ANIMATION_DURATION)
+                    .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
         }
     }
 
@@ -607,6 +637,7 @@ internal class CustomExoPlayerView(
 
     companion object {
         private const val SUBTITLE_BOTTOM_PADDING_FRACTION = 0.158f
+        private const val ANIMATION_DURATION = 100L
         private val LANDSCAPE_MARGIN_HORIZONTAL = (30).toPixel().toInt()
     }
 }

app/src/main/res/drawable/ic_forward.xml

@@ -1,10 +1,23 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="45dp"
-    android:height="45dp"
-    android:tint="@android:color/white"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+    android:width="42dp"
+    android:height="42dp"
+    android:viewportWidth="850.39"
+    android:viewportHeight="850.39">
     <path
-        android:fillColor="#FF000000"
-        android:pathData="M12.322,1.707 L16.615,6 12.322,10.293L12.322,7A0.292,0.292 0,0 0,12.029 6.707c-3.468,0 -6.293,2.825 -6.293,6.293 -0,3.468 2.825,6.293 6.293,6.293 3.368,0 6.107,-2.67 6.264,-6L19.707,13.293C19.55,17.416 16.191,20.707 12.029,20.707 7.767,20.707 4.322,17.262 4.322,13 4.322,8.738 7.767,5.293 12.029,5.293A0.292,0.292 0,0 0,12.322 5Z" />
-</vector>
+        android:fillColor="#00000000"
+        android:pathData="M707.35,279.28A317.52,317.52 0,0 1,744.09 428c0,176.13 -142.77,318.9 -318.89,318.9S106.3,604.16 106.3,428 249.07,109.14 425.2,109.14q14.13,0 28,1.2"
+        android:strokeWidth="45"
+        android:strokeColor="#fff" />
+    <path
+        android:fillColor="#fff"
+        android:pathData="M341.86,197.665l111.666,-111.666l25.442,25.442l-111.666,111.666z" />
+    <path
+        android:fillColor="#fff"
+        android:pathData="M453.524,137.111l-111.666,-111.666l25.442,-25.442l111.666,111.666z" />
+    <path
+        android:fillColor="#fff"
+        android:pathData="M426.864,197.831l111.666,-111.666l25.442,25.442l-111.666,111.666z" />
+    <path
+        android:fillColor="#fff"
+        android:pathData="M538.53,137.277l-111.666,-111.666l25.442,-25.442l111.666,111.666z" />
+</vector>

app/src/main/res/drawable/ic_rewind.xml

@@ -1,10 +1,23 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="45dp"
-    android:height="45dp"
-    android:tint="@android:color/white"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+    android:width="42dp"
+    android:height="42dp"
+    android:viewportWidth="850.39"
+    android:viewportHeight="850.39">
     <path
-        android:fillColor="#FF000000"
-        android:pathData="M11.707,1.707 L7.414,6 11.707,10.293V7A0.292,0.292 0,0 1,12 6.707c3.468,0 6.293,2.825 6.293,6.293 0,3.468 -2.825,6.293 -6.293,6.293 -3.368,0 -6.107,-2.67 -6.264,-6H4.322C4.479,17.416 7.838,20.707 12,20.707 16.262,20.707 19.707,17.262 19.707,13 19.707,8.738 16.262,5.293 12,5.293A0.292,0.292 0,0 1,11.707 5Z" />
-</vector>
+        android:fillColor="#00000000"
+        android:pathData="M143.05,279.28A317.41,317.41 0,0 0,106.3 428c0,176.13 142.77,318.9 318.9,318.9S744.09,604.16 744.09,428 601.32,109.14 425.2,109.14q-14.15,0 -28,1.2"
+        android:strokeWidth="45"
+        android:strokeColor="#fff" />
+    <path
+        android:fillColor="#fff"
+        android:pathData="M483.083,223.108l-111.666,-111.666l25.442,-25.442l111.666,111.666z" />
+    <path
+        android:fillColor="#fff"
+        android:pathData="M371.421,111.662l111.666,-111.666l25.442,25.442l-111.666,111.666z" />
+    <path
+        android:fillColor="#fff"
+        android:pathData="M398.087,223.272l-111.666,-111.666l25.442,-25.442l111.666,111.666z" />
+    <path
+        android:fillColor="#fff"
+        android:pathData="M286.427,111.826l111.666,-111.666l25.442,25.442l-111.666,111.666z" />
+</vector>

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
@@ -22,6 +24,7 @@
             android:visibility="invisible">
 
             <ImageView
+                android:id="@+id/rewindIV"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@drawable/ic_rewind"
@@ -32,9 +35,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
-                android:layout_marginTop="2dp"
                 android:textColor="@android:color/white"
-                android:textSize="12sp" />
+                android:translationZ="1dp" />
 
         </FrameLayout>
 
@@ -53,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
@@ -63,6 +67,7 @@
             android:visibility="invisible">
 
             <ImageView
+                android:id="@+id/forwardIV"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@drawable/ic_forward"
@@ -73,9 +78,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
-                android:layout_marginTop="2dp"
                 android:textColor="@android:color/white"
-                android:textSize="12sp" />
+                android:translationZ="1dp" />
 
         </FrameLayout>
 

app/src/main/res/layout/exo_styled_player_control_view.xml

@@ -142,9 +142,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
-                android:layout_marginTop="2dp"
-                android:textColor="@android:color/white"
-                android:textSize="12sp" />
+                android:textColor="@android:color/white" />
 
         </FrameLayout>
 
@@ -177,9 +175,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
-                android:layout_marginTop="2dp"
-                android:textColor="@android:color/white"
-                android:textSize="12sp" />
+                android:textColor="@android:color/white" />
 
         </FrameLayout>