From 6ce263832beeece7e4919422beca41e1359bfc9b Mon Sep 17 00:00:00 2001
From: Jannik <seil0@mosad.xyz>
Date: Mon, 16 Nov 2020 19:23:06 +0100
Subject: [PATCH] use custom rewind/fast forward button with animations

---
 .../java/org/mosad/teapod/PlayerActivity.kt   |  4 +-
 .../teapod/ui/components/FastForwardButton.kt | 64 +++++++++++++++++++
 .../teapod/ui/components/RewindButton.kt      | 64 +++++++++++++++++++
 ...ward.xml => ic_baseline_forward_10_24.xml} |  0
 .../res/drawable/ic_baseline_forward_24.xml   |  9 +++
 ...ewind.xml => ic_baseline_rewind_10_24.xml} |  0
 .../res/drawable/ic_baseline_rewind_24.xml    |  5 ++
 .../main/res/layout/button_fast_forward.xml   | 28 ++++++++
 app/src/main/res/layout/button_rewind.xml     | 31 +++++++++
 app/src/main/res/layout/fragment_home.xml     |  3 +-
 app/src/main/res/layout/player_controls.xml   | 22 +++----
 app/src/main/res/values/strings.xml           |  2 +
 12 files changed, 215 insertions(+), 17 deletions(-)
 create mode 100644 app/src/main/java/org/mosad/teapod/ui/components/FastForwardButton.kt
 create mode 100644 app/src/main/java/org/mosad/teapod/ui/components/RewindButton.kt
 rename app/src/main/res/drawable/{exo_styled_controls_fastforward.xml => ic_baseline_forward_10_24.xml} (100%)
 create mode 100644 app/src/main/res/drawable/ic_baseline_forward_24.xml
 rename app/src/main/res/drawable/{exo_styled_controls_rewind.xml => ic_baseline_rewind_10_24.xml} (100%)
 create mode 100644 app/src/main/res/drawable/ic_baseline_rewind_24.xml
 create mode 100644 app/src/main/res/layout/button_fast_forward.xml
 create mode 100644 app/src/main/res/layout/button_rewind.xml

diff --git a/app/src/main/java/org/mosad/teapod/PlayerActivity.kt b/app/src/main/java/org/mosad/teapod/PlayerActivity.kt
index fbd6aae..ba0919a 100644
--- a/app/src/main/java/org/mosad/teapod/PlayerActivity.kt
+++ b/app/src/main/java/org/mosad/teapod/PlayerActivity.kt
@@ -212,8 +212,8 @@ class PlayerActivity : AppCompatActivity() {
 
     private fun initActions() {
         exo_close_player.setOnClickListener { this.finish() }
-        exo_rew_10.setOnClickListener { rewind() }
-        exo_ffwd_10.setOnClickListener { forward() }
+        rwd_10.setOnButtonClickListener { rewind() }
+        ffwd_10.setOnButtonClickListener { forward() }
         button_next_ep.setOnClickListener { playNextEpisode() }
     }
 
diff --git a/app/src/main/java/org/mosad/teapod/ui/components/FastForwardButton.kt b/app/src/main/java/org/mosad/teapod/ui/components/FastForwardButton.kt
new file mode 100644
index 0000000..b1ae6cd
--- /dev/null
+++ b/app/src/main/java/org/mosad/teapod/ui/components/FastForwardButton.kt
@@ -0,0 +1,64 @@
+package org.mosad.teapod.ui.components
+
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.ObjectAnimator
+import android.content.Context
+import android.util.AttributeSet
+import android.view.View
+import android.widget.FrameLayout
+import kotlinx.android.synthetic.main.button_fast_forward.view.*
+import org.mosad.teapod.R
+
+class FastForwardButton(context: Context, attrs: AttributeSet): FrameLayout(context, attrs) {
+
+    private val animationDuration: Long = 800
+
+    init {
+        inflate(context, R.layout.button_fast_forward, this)
+    }
+
+    fun setOnButtonClickListener(func: FastForwardButton.() -> Unit) {
+        imageButton.setOnClickListener {
+            func()
+            runOnClickAnimation()
+        }
+    }
+
+    fun runOnClickAnimation() {
+        // run button animation
+        ObjectAnimator.ofFloat(imageButton, View.ROTATION, 0f, 50f).apply {
+            duration = animationDuration / 4
+            repeatCount = 1
+            repeatMode = ObjectAnimator.REVERSE
+            addListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationStart(animation: Animator?) {
+                    imageButton.isEnabled = false // disable button
+                    imageButton.setImageResource(R.drawable.ic_baseline_forward_24)
+                }
+                override fun onAnimationEnd(animation: Animator?) {
+                    imageButton.isEnabled = true // enable button
+                }
+            })
+            start()
+        }
+
+        // run lbl animation
+        textView.visibility = View.VISIBLE
+        ObjectAnimator.ofFloat(textView, View.TRANSLATION_X, 35f).apply {
+            duration = animationDuration
+            addListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationEnd(animation: Animator?) {
+                    imageButton.isEnabled = true // enable button
+                    imageButton.setImageResource(R.drawable.ic_baseline_forward_10_24)
+
+                    textView.visibility = View.GONE
+                    textView.animate().translationX(0f)
+                }
+            })
+            start()
+        }
+
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/org/mosad/teapod/ui/components/RewindButton.kt b/app/src/main/java/org/mosad/teapod/ui/components/RewindButton.kt
new file mode 100644
index 0000000..6bc2fd8
--- /dev/null
+++ b/app/src/main/java/org/mosad/teapod/ui/components/RewindButton.kt
@@ -0,0 +1,64 @@
+package org.mosad.teapod.ui.components
+
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.ObjectAnimator
+import android.content.Context
+import android.util.AttributeSet
+import android.view.View
+import android.widget.FrameLayout
+import kotlinx.android.synthetic.main.button_rewind.view.*
+import org.mosad.teapod.R
+
+class RewindButton(context: Context, attrs: AttributeSet): FrameLayout(context, attrs) {
+
+    private val animationDuration: Long = 800
+
+    init {
+        inflate(context, R.layout.button_rewind, this)
+    }
+
+    fun setOnButtonClickListener(func: RewindButton.() -> Unit) {
+        imageButton.setOnClickListener {
+            func()
+            runOnClickAnimation()
+        }
+    }
+
+    fun runOnClickAnimation() {
+        // run button animation
+        ObjectAnimator.ofFloat(imageButton, View.ROTATION, 0f, -50f).apply {
+            duration = animationDuration / 4
+            repeatCount = 1
+            repeatMode = ObjectAnimator.REVERSE
+            addListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationStart(animation: Animator?) {
+                    imageButton.isEnabled = false // disable button
+                    imageButton.setImageResource(R.drawable.ic_baseline_rewind_24)
+                }
+                override fun onAnimationEnd(animation: Animator?) {
+                    imageButton.isEnabled = true // enable button
+                }
+            })
+            start()
+        }
+
+        // run lbl animation
+        textView.visibility = View.VISIBLE
+        ObjectAnimator.ofFloat(textView, View.TRANSLATION_X, -35f).apply {
+            duration = animationDuration
+            addListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationEnd(animation: Animator?) {
+                    imageButton.isEnabled = true // enable button
+                    imageButton.setImageResource(R.drawable.ic_baseline_rewind_10_24)
+
+                    textView.visibility = View.GONE
+                    textView.animate().translationX(0f)
+                }
+            })
+            start()
+        }
+
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/exo_styled_controls_fastforward.xml b/app/src/main/res/drawable/ic_baseline_forward_10_24.xml
similarity index 100%
rename from app/src/main/res/drawable/exo_styled_controls_fastforward.xml
rename to app/src/main/res/drawable/ic_baseline_forward_10_24.xml
diff --git a/app/src/main/res/drawable/ic_baseline_forward_24.xml b/app/src/main/res/drawable/ic_baseline_forward_24.xml
new file mode 100644
index 0000000..8d1835c
--- /dev/null
+++ b/app/src/main/res/drawable/ic_baseline_forward_24.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M18,13c0,3.31 -2.69,6 -6,6s-6,-2.69 -6,-6s2.69,-6 6,-6v4l5,-5l-5,-5v4c-4.42,0 -8,3.58 -8,8c0,4.42 3.58,8 8,8c4.42,0 8,-3.58 8,-8H18z" />
+</vector>
diff --git a/app/src/main/res/drawable/exo_styled_controls_rewind.xml b/app/src/main/res/drawable/ic_baseline_rewind_10_24.xml
similarity index 100%
rename from app/src/main/res/drawable/exo_styled_controls_rewind.xml
rename to app/src/main/res/drawable/ic_baseline_rewind_10_24.xml
diff --git a/app/src/main/res/drawable/ic_baseline_rewind_24.xml b/app/src/main/res/drawable/ic_baseline_rewind_24.xml
new file mode 100644
index 0000000..96e77ec
--- /dev/null
+++ b/app/src/main/res/drawable/ic_baseline_rewind_24.xml
@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M12,5V1L7,6l5,5V7c3.31,0 6,2.69 6,6s-2.69,6 -6,6 -6,-2.69 -6,-6H4c0,4.42 3.58,8 8,8s8,-3.58 8,-8 -3.58,-8 -8,-8z"/>
+</vector>
diff --git a/app/src/main/res/layout/button_fast_forward.xml b/app/src/main/res/layout/button_fast_forward.xml
new file mode 100644
index 0000000..40cc527
--- /dev/null
+++ b/app/src/main/res/layout/button_fast_forward.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <ImageButton
+        android:id="@+id/imageButton"
+        android:layout_width="48dp"
+        android:layout_height="48dp"
+        android:layout_alignParentStart="true"
+        android:background="@android:color/transparent"
+        android:contentDescription="@string/forward_10"
+        android:scaleX="1.5"
+        android:scaleY="1.5"
+        app:srcCompat="@drawable/ic_baseline_forward_10_24" />
+
+    <TextView
+        android:id="@+id/textView"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignParentStart="true"
+        android:layout_centerInParent="true"
+        android:layout_marginStart="42dp"
+        android:text="@string/fwd_10_s"
+        android:textColor="@color/exo_white"
+        android:visibility="gone" />
+</RelativeLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/button_rewind.xml b/app/src/main/res/layout/button_rewind.xml
new file mode 100644
index 0000000..14f8130
--- /dev/null
+++ b/app/src/main/res/layout/button_rewind.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_alignParentEnd="true">
+
+    <ImageButton
+        android:id="@+id/imageButton"
+        android:layout_width="48dp"
+        android:layout_height="48dp"
+        android:layout_alignParentEnd="true"
+        android:background="@android:color/transparent"
+        android:contentDescription="@string/forward_10"
+        android:scaleX="1.5"
+        android:scaleY="1.5"
+        app:srcCompat="@drawable/ic_baseline_rewind_10_24" />
+
+    <TextView
+        android:id="@+id/textView"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignParentEnd="true"
+        android:layout_centerInParent="true"
+        android:layout_marginEnd="42dp"
+        android:text="@string/rwd_10_s"
+        android:textColor="@color/exo_white"
+        android:visibility="gone" />
+
+
+</RelativeLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml
index ad882ca..2bc8bd8 100644
--- a/app/src/main/res/layout/fragment_home.xml
+++ b/app/src/main/res/layout/fragment_home.xml
@@ -2,6 +2,7 @@
 <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:id="@+id/ff_test"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="#f5f5f5"
@@ -14,7 +15,7 @@
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="vertical" >
+            android:orientation="vertical">
 
             <LinearLayout
                 android:layout_width="match_parent"
diff --git a/app/src/main/res/layout/player_controls.xml b/app/src/main/res/layout/player_controls.xml
index 832ae97..abfc3d2 100644
--- a/app/src/main/res/layout/player_controls.xml
+++ b/app/src/main/res/layout/player_controls.xml
@@ -48,14 +48,10 @@
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <ImageButton
-            android:id="@+id/exo_rew_10"
-            style="@style/ExoStyledControls.Button.Center.RewWithAmount"
-            android:layout_width="42dp"
-            android:layout_height="42dp"
-            android:contentDescription="@string/rewind_10"
-            android:tint="@color/exo_white" />
-
+        <org.mosad.teapod.ui.components.RewindButton
+            android:id="@+id/rwd_10"
+            android:layout_width="100dp"
+            android:layout_height="wrap_content" />
 
         <Space
             android:layout_width="0dp"
@@ -75,12 +71,10 @@
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <ImageButton
-            android:id="@+id/exo_ffwd_10"
-            style="@style/ExoStyledControls.Button.Center.FfwdWithAmount"
-            android:layout_width="42dp"
-            android:layout_height="42dp"
-            android:contentDescription="@string/forward_10" />
+        <org.mosad.teapod.ui.components.FastForwardButton
+            android:id="@+id/ffwd_10"
+            android:layout_width="100dp"
+            android:layout_height="wrap_content" />
 
         <Space
             android:layout_width="0dp"
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 5c5aef0..571b8c2 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -46,6 +46,8 @@
     <string name="rewind_10">rewind 10 seconds</string>
     <string name="play_pause">play/pause</string>
     <string name="forward_10">forward 10 seconds</string>
+    <string name="rwd_10_s" translatable="false">- 10 s</string>
+    <string name="fwd_10_s" translatable="false">+ 10 s</string>
     <string name="time_min_sec" translatable="false">%1$02d:%2$02d</string>
     <string name="time_hour_min_sec" translatable="false">%1$d:%2$02d:%3$02d</string>
     <string name="next_episode">Next Episode</string>