From bdc5a0e5d902bfeabd58092f8e30635fdff0ded3 Mon Sep 17 00:00:00 2001
From: Niels Andriesse <andriesseniels@gmail.com>
Date: Wed, 16 Jun 2021 15:49:39 +1000
Subject: [PATCH] Add animation

---
 .../conversation/v2/ConversationActivityV2.kt |   5 +-
 .../v2/input_bar/InputBarRecordingView.kt     |  34 ++++
 .../securesms/loki/utilities/ViewUtilities.kt |   6 +-
 .../res/layout/view_input_bar_recording.xml   | 148 +++++++++++-------
 4 files changed, 132 insertions(+), 61 deletions(-)

diff --git a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/ConversationActivityV2.kt b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/ConversationActivityV2.kt
index 13cad79ae6..d7e845d858 100644
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/ConversationActivityV2.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/ConversationActivityV2.kt
@@ -1,5 +1,7 @@
 package org.thoughtcrime.securesms.conversation.v2
 
+import android.animation.FloatEvaluator
+import android.animation.ValueAnimator
 import android.database.Cursor
 import android.os.Bundle
 import android.view.ActionMode
@@ -20,6 +22,7 @@ import org.thoughtcrime.securesms.conversation.v2.menus.ConversationActionModeCa
 import org.thoughtcrime.securesms.conversation.v2.menus.ConversationMenuHelper
 import org.thoughtcrime.securesms.database.DatabaseFactory
 import org.thoughtcrime.securesms.database.model.MessageRecord
+import org.thoughtcrime.securesms.loki.views.NewConversationButtonSetView
 import org.thoughtcrime.securesms.mms.GlideApp
 
 class ConversationActivityV2 : PassphraseRequiredActionBarActivity(), InputBarDelegate {
@@ -115,7 +118,7 @@ class ConversationActivityV2 : PassphraseRequiredActionBarActivity(), InputBarDe
     }
 
     override fun showVoiceMessageUI() {
-        inputBarRecordingView.isVisible = true
+        inputBarRecordingView.show()
     }
     // endregion
 
diff --git a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/input_bar/InputBarRecordingView.kt b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/input_bar/InputBarRecordingView.kt
index ffcb403ab7..b1da2ec48a 100644
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/input_bar/InputBarRecordingView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/input_bar/InputBarRecordingView.kt
@@ -1,10 +1,19 @@
 package org.thoughtcrime.securesms.conversation.v2.input_bar
 
+import android.animation.Animator
+import android.animation.FloatEvaluator
+import android.animation.ValueAnimator
 import android.content.Context
 import android.util.AttributeSet
+import android.util.Log
 import android.view.LayoutInflater
 import android.widget.RelativeLayout
+import androidx.core.view.isVisible
+import kotlinx.android.synthetic.main.view_input_bar_recording.view.*
 import network.loki.messenger.R
+import org.thoughtcrime.securesms.loki.utilities.animateSizeChange
+import org.thoughtcrime.securesms.loki.utilities.toPx
+import kotlin.math.roundToInt
 
 class InputBarRecordingView : RelativeLayout {
 
@@ -15,4 +24,29 @@ class InputBarRecordingView : RelativeLayout {
     private fun initialize() {
         LayoutInflater.from(context).inflate(R.layout.view_input_bar_recording, this)
     }
+
+    fun show() {
+        isVisible = true
+        alpha = 0.0f
+        val animation = ValueAnimator.ofObject(FloatEvaluator(), 0.0f, 1.0f)
+        animation.duration = 250L
+        animation.addUpdateListener { animator ->
+            alpha = animator.animatedValue as Float
+        }
+        animation.start()
+        pulse()
+    }
+
+    private fun pulse() {
+        val collapsedSize = toPx(80.0f, resources)
+        val expandedSize = toPx(104.0f, resources)
+        pulseView.animateSizeChange(collapsedSize, expandedSize, 1000)
+        val animation = ValueAnimator.ofObject(FloatEvaluator(), 0.5, 0.0f)
+        animation.duration = 1000L
+        animation.addUpdateListener { animator ->
+            pulseView.alpha = animator.animatedValue as Float
+            if (animator.animatedFraction == 1.0f) { pulse() }
+        }
+        animation.start()
+    }
 }
diff --git a/app/src/main/java/org/thoughtcrime/securesms/loki/utilities/ViewUtilities.kt b/app/src/main/java/org/thoughtcrime/securesms/loki/utilities/ViewUtilities.kt
index c9d135ba24..67a137bc48 100644
--- a/app/src/main/java/org/thoughtcrime/securesms/loki/utilities/ViewUtilities.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/loki/utilities/ViewUtilities.kt
@@ -21,9 +21,13 @@ val View.hitRect: Rect
     }
 
 fun View.animateSizeChange(@DimenRes startSizeID: Int, @DimenRes endSizeID: Int, animationDuration: Long = 250) {
-    val layoutParams = this.layoutParams
     val startSize = resources.getDimension(startSizeID)
     val endSize = resources.getDimension(endSizeID)
+    animateSizeChange(startSize, endSize)
+}
+
+fun View.animateSizeChange(startSize: Float, endSize: Float, animationDuration: Long = 250) {
+    val layoutParams = this.layoutParams
     val animation = ValueAnimator.ofObject(FloatEvaluator(), startSize, endSize)
     animation.duration = animationDuration
     animation.addUpdateListener { animator ->
diff --git a/app/src/main/res/layout/view_input_bar_recording.xml b/app/src/main/res/layout/view_input_bar_recording.xml
index f0e10cf7c2..1ea62d3371 100644
--- a/app/src/main/res/layout/view_input_bar_recording.xml
+++ b/app/src/main/res/layout/view_input_bar_recording.xml
@@ -3,93 +3,123 @@
     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="80dp">
+    android:layout_height="92dp">
 
-    <!-- The height of the fake input bar below is 68 dp
-         because the input bar is 56 dp but we have to
-         account for the fact that this whole view has a
-         negative bottom margin of 12 dp -->
+    <!-- The fake input bar -->
 
-    <LinearLayout
+    <RelativeLayout
         android:layout_width="match_parent"
-        android:layout_height="68dp"
+        android:layout_height="@dimen/input_bar_height"
         android:layout_alignParentBottom="true"
+        android:layout_marginBottom="12dp"
         android:orientation="vertical">
 
-        <View
-            android:layout_width="match_parent"
-            android:layout_height="1px"
-            android:background="@color/separator" />
-
         <View
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:background="@color/input_bar_background" />
 
-    </LinearLayout>
+        <!-- The left content (dot view + duration) -->
 
-    <LinearLayout
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/medium_spacing"
-        android:layout_alignParentStart="true"
-        android:layout_centerVertical="true"
-        android:gravity="center_vertical"
-        android:orientation="horizontal">
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/medium_spacing"
+            android:layout_alignParentStart="true"
+            android:layout_centerVertical="true"
+            android:gravity="center_vertical"
+            android:orientation="horizontal">
+
+            <View
+                android:layout_width="16dp"
+                android:layout_height="16dp"
+                android:background="@drawable/circle_tintable"
+                android:backgroundTint="@color/destructive" />
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginLeft="@dimen/small_spacing"
+                android:text="00:00"
+                android:textSize="@dimen/small_font_size"
+                android:textColor="@color/text" />
+
+        </LinearLayout>
+
+        <!-- The middle content (left arrow + slide to cancel) -->
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_centerInParent="true"
+            android:orientation="horizontal"
+            android:gravity="center_vertical">
+
+            <ImageView
+                android:layout_width="16dp"
+                android:layout_height="16dp"
+                android:src="@drawable/ic_keyboard_arrow_left_grey600_24dp"
+                android:layout_marginTop="1dp"
+                app:tint="@color/text"
+                android:alpha="0.6" />
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginLeft="4dp"
+                android:text="@string/conversation_input_panel__slide_to_cancel"
+                android:textSize="@dimen/very_small_font_size"
+                android:textColor="@color/text"
+                android:alpha="0.6" />
+
+        </LinearLayout>
+
+        <!-- Separator -->
 
         <View
-            android:layout_width="16dp"
-            android:layout_height="16dp"
+            android:layout_width="match_parent"
+            android:layout_height="1px"
+            android:layout_alignParentTop="true"
+            android:background="@color/separator" />
+
+    </RelativeLayout>
+
+    <!-- The pulse view -->
+
+    <RelativeLayout
+        android:layout_width="104dp"
+        android:layout_height="104dp"
+        android:layout_alignParentEnd="true"
+        android:layout_alignParentBottom="true"
+        android:layout_marginEnd="-20dp"
+        android:layout_marginBottom="-12dp">
+
+        <View
+            android:id="@+id/pulseView"
+            android:layout_width="80dp"
+            android:layout_height="80dp"
+            android:alpha="0.5"
+            android:layout_centerInParent="true"
             android:background="@drawable/circle_tintable"
             android:backgroundTint="@color/destructive" />
 
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginLeft="@dimen/small_spacing"
-            android:text="00:00"
-            android:textSize="@dimen/small_font_size"
-            android:textColor="@color/text" />
+    </RelativeLayout>
 
-    </LinearLayout>
-
-    <LinearLayout
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_centerInParent="true"
-        android:orientation="horizontal"
-        android:gravity="center_vertical">
-
-        <ImageView
-            android:layout_width="16dp"
-            android:layout_height="16dp"
-            android:src="@drawable/ic_keyboard_arrow_left_grey600_24dp"
-            android:layout_marginTop="1dp"
-            app:tint="@color/text"
-            android:alpha="0.6" />
-
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginLeft="4dp"
-            android:text="@string/conversation_input_panel__slide_to_cancel"
-            android:textSize="@dimen/very_small_font_size"
-            android:textColor="@color/text"
-            android:alpha="0.6" />
-
-    </LinearLayout>
+    <!-- The actual record button overlay -->
 
     <RelativeLayout
         android:layout_width="80dp"
         android:layout_height="80dp"
         android:layout_alignParentEnd="true"
+        android:layout_alignParentBottom="true"
         android:layout_marginEnd="-8dp"
+        android:layout_marginBottom="0dp"
         android:background="@drawable/circle_tintable"
         android:backgroundTint="@color/destructive" >
 
         <ImageView
-            android:layout_width="24dp"
-            android:layout_height="24dp"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
             app:tint="@color/white"
             android:scaleType="centerInside"
             android:layout_centerInParent="true"