From 8f33f1f0c9ad73d983ef24c155018d2a7b73346a Mon Sep 17 00:00:00 2001
From: Sylvain Berfini <sylvain.berfini@belledonne-communications.com>
Date: Thu, 9 Nov 2023 17:28:33 +0100
Subject: [PATCH] Started voice recording layout

---
 .../chat/viewmodel/ConversationViewModel.kt   |  4 +
 .../java/org/linphone/utils/ImageUtils.kt     | 14 +--
 app/src/main/res/drawable/play_fill.xml       |  9 ++
 .../shape_squircle_white_r50_background.xml   |  5 ++
 app/src/main/res/drawable/stop_fill.xml       |  9 ++
 .../voice_recording_gradient_progress.xml     | 23 +++++
 ...at_conversation_send_area_bottom_sheet.xml | 85 ++++++++++++++++---
 app/src/main/res/values/colors.xml            |  3 +
 8 files changed, 132 insertions(+), 20 deletions(-)
 create mode 100644 app/src/main/res/drawable/play_fill.xml
 create mode 100644 app/src/main/res/drawable/shape_squircle_white_r50_background.xml
 create mode 100644 app/src/main/res/drawable/stop_fill.xml
 create mode 100644 app/src/main/res/drawable/voice_recording_gradient_progress.xml

diff --git a/app/src/main/java/org/linphone/ui/main/chat/viewmodel/ConversationViewModel.kt b/app/src/main/java/org/linphone/ui/main/chat/viewmodel/ConversationViewModel.kt
index fa061b912..c9582d806 100644
--- a/app/src/main/java/org/linphone/ui/main/chat/viewmodel/ConversationViewModel.kt
+++ b/app/src/main/java/org/linphone/ui/main/chat/viewmodel/ConversationViewModel.kt
@@ -89,6 +89,8 @@ class ConversationViewModel @UiThread constructor() : ViewModel() {
 
     val isReplyingToMessage = MutableLiveData<String>()
 
+    val voiceRecordingInProgress = MutableLiveData<Boolean>()
+
     var scrollingPosition: Int = SCROLLING_POSITION_NOT_SET
 
     val requestKeyboardHidingEvent: MutableLiveData<Event<Boolean>> by lazy {
@@ -485,6 +487,7 @@ class ConversationViewModel @UiThread constructor() : ViewModel() {
 
     @UiThread
     fun startVoiceMessageRecording() {
+        voiceRecordingInProgress.value = true
     }
 
     @UiThread
@@ -493,6 +496,7 @@ class ConversationViewModel @UiThread constructor() : ViewModel() {
 
     @UiThread
     fun cancelVoiceMessageRecording() {
+        voiceRecordingInProgress.value = false
     }
 
     @UiThread
diff --git a/app/src/main/java/org/linphone/utils/ImageUtils.kt b/app/src/main/java/org/linphone/utils/ImageUtils.kt
index 4108fbe48..c486814f5 100644
--- a/app/src/main/java/org/linphone/utils/ImageUtils.kt
+++ b/app/src/main/java/org/linphone/utils/ImageUtils.kt
@@ -120,12 +120,14 @@ class ImageUtils {
                     null
                 }
 
-                canvas.drawBitmap(
-                    drawables[i].toBitmap(size, size, Bitmap.Config.ARGB_8888),
-                    src,
-                    rectangles[i],
-                    null
-                )
+                try {
+                    canvas.drawBitmap(
+                        drawables[i].toBitmap(size, size, Bitmap.Config.ARGB_8888),
+                        src,
+                        rectangles[i],
+                        null
+                    )
+                } catch (_: Exception) {}
             }
 
             return bitmap
diff --git a/app/src/main/res/drawable/play_fill.xml b/app/src/main/res/drawable/play_fill.xml
new file mode 100644
index 000000000..ed53fe498
--- /dev/null
+++ b/app/src/main/res/drawable/play_fill.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="256"
+    android:viewportHeight="256">
+  <path
+      android:pathData="M240,128a15.74,15.74 0,0 1,-7.6 13.51L88.32,229.65a16,16 0,0 1,-16.2 0.3A15.86,15.86 0,0 1,64 216.13V39.87a15.86,15.86 0,0 1,8.12 -13.82,16 16,0 0,1 16.2,0.3L232.4,114.49A15.74,15.74 0,0 1,240 128Z"
+      android:fillColor="#4e6074"/>
+</vector>
diff --git a/app/src/main/res/drawable/shape_squircle_white_r50_background.xml b/app/src/main/res/drawable/shape_squircle_white_r50_background.xml
new file mode 100644
index 000000000..3906225f0
--- /dev/null
+++ b/app/src/main/res/drawable/shape_squircle_white_r50_background.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+    <corners android:radius="50dp" />
+    <solid android:color="@color/white"/>
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/stop_fill.xml b/app/src/main/res/drawable/stop_fill.xml
new file mode 100644
index 000000000..2b9668865
--- /dev/null
+++ b/app/src/main/res/drawable/stop_fill.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="256"
+    android:viewportHeight="256">
+  <path
+      android:pathData="M216,55.27V200.73A15.29,15.29 0,0 1,200.73 216H55.27A15.29,15.29 0,0 1,40 200.73V55.27A15.29,15.29 0,0 1,55.27 40H200.73A15.29,15.29 0,0 1,216 55.27Z"
+      android:fillColor="#4e6074"/>
+</vector>
diff --git a/app/src/main/res/drawable/voice_recording_gradient_progress.xml b/app/src/main/res/drawable/voice_recording_gradient_progress.xml
new file mode 100644
index 000000000..f976cad8d
--- /dev/null
+++ b/app/src/main/res/drawable/voice_recording_gradient_progress.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item android:id="@android:id/background">
+        <shape>
+            <corners android:radius="70dp"/>
+            <gradient
+                android:startColor="@color/gradient_start"
+                android:endColor="@color/orange_main_500"
+                />
+        </shape>
+    </item>
+
+    <item android:id="@android:id/progress">
+        <clip>
+            <shape>
+                <corners android:radius="70dp"/>
+                <solid android:color="@color/gradient_progress"/>
+            </shape>
+        </clip>
+    </item>
+
+</layer-list>
diff --git a/app/src/main/res/layout/chat_conversation_send_area_bottom_sheet.xml b/app/src/main/res/layout/chat_conversation_send_area_bottom_sheet.xml
index b5b64ec44..d5b68f078 100644
--- a/app/src/main/res/layout/chat_conversation_send_area_bottom_sheet.xml
+++ b/app/src/main/res/layout/chat_conversation_send_area_bottom_sheet.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto">
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
 
     <data>
         <import type="android.view.View" />
@@ -68,11 +69,27 @@
             android:onClick="@{() -> viewModel.toggleEmojiPickerVisibility()}"
             android:padding="8dp"
             android:src="@{viewModel.isEmojiPickerOpen ? @drawable/x : @drawable/smiley, default=@drawable/smiley}"
+            android:visibility="@{viewModel.voiceRecordingInProgress ? View.GONE : View.VISIBLE}"
             app:layout_constraintBottom_toBottomOf="@id/message_area_background"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="@id/message_area_background"
             app:tint="@color/icon_color_selector" />
 
+        <ImageView
+            android:id="@+id/cancel_voice_message"
+            android:layout_width="40dp"
+            android:layout_height="40dp"
+            android:layout_marginStart="8dp"
+            android:onClick="@{() -> viewModel.cancelVoiceMessageRecording()}"
+            android:padding="8dp"
+            android:src="@drawable/x"
+            android:background="@drawable/circle_white_button_background"
+            android:visibility="@{viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
+            app:layout_constraintBottom_toBottomOf="@id/message_area_background"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="@id/message_area_background"
+            app:tint="@color/orange_main_500" />
+
         <ImageView
             android:id="@+id/attach_file"
             android:layout_width="40dp"
@@ -82,6 +99,7 @@
             android:onClick="@{openFilePickerClickListener}"
             android:padding="8dp"
             android:src="@drawable/paperclip"
+            android:visibility="@{viewModel.voiceRecordingInProgress ? View.GONE : View.VISIBLE}"
             app:layout_constraintBottom_toBottomOf="@id/message_area_background"
             app:layout_constraintEnd_toStartOf="@id/message_area_background"
             app:layout_constraintStart_toEndOf="@id/emoji_picker_toggle"
@@ -94,6 +112,7 @@
             android:layout_height="0dp"
             android:layout_marginEnd="16dp"
             android:src="@drawable/edit_text_background"
+            android:visibility="@{viewModel.voiceRecordingInProgress ? View.INVISIBLE : View.VISIBLE}"
             app:layout_constraintBottom_toBottomOf="@id/message_to_send"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@id/attach_file"
@@ -117,6 +136,7 @@
             android:text="@={viewModel.textToSend}"
             android:textColorHint="@color/gray_main2_400"
             android:textSize="14sp"
+            android:visibility="@{viewModel.voiceRecordingInProgress ? View.INVISIBLE : View.VISIBLE}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toStartOf="@id/send_barrier"
             app:layout_constraintStart_toStartOf="@id/message_area_background"
@@ -127,26 +147,63 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             app:barrierDirection="start"
-            app:constraint_referenced_ids="voice_record, send_message" />
+            app:constraint_referenced_ids="record_voice_message, send_message" />
+        
+        <ProgressBar
+            android:id="@+id/voice_record_progress"
+            style="?android:attr/progressBarStyleHorizontal"
+            android:layout_width="0dp"
+            android:layout_height="60dp"
+            android:layout_marginStart="20dp"
+            android:layout_marginEnd="20dp"
+            android:progressDrawable="@drawable/voice_recording_gradient_progress"
+            android:visibility="@{viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
+            tools:progress="60"
+            app:layout_constraintBottom_toBottomOf="@id/message_to_send"
+            app:layout_constraintEnd_toStartOf="@id/send_message"
+            app:layout_constraintStart_toEndOf="@id/cancel_voice_message"
+            app:layout_constraintTop_toTopOf="@id/message_to_send" />
 
         <ImageView
-            android:id="@+id/voice_record"
-            android:layout_width="@dimen/icon_size"
-            android:layout_height="@dimen/icon_size"
-            android:layout_marginEnd="12dp"
-            android:src="@drawable/microphone"
-            android:visibility="gone"
-            app:layout_constraintBottom_toBottomOf="@id/message_area_background"
-            app:layout_constraintEnd_toEndOf="@id/message_area_background"
-            app:layout_constraintTop_toTopOf="@id/message_area_background"
-            app:tint="@color/icon_color_selector" />
+            android:id="@+id/stop_recording"
+            android:layout_width="40dp"
+            android:layout_height="40dp"
+            android:layout_marginStart="10dp"
+            android:onClick="@{() -> viewModel.stopVoiceMessageRecording()}"
+            android:padding="8dp"
+            android:src="@drawable/stop_fill"
+            android:background="@drawable/circle_white_button_background"
+            android:visibility="@{viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
+            app:layout_constraintBottom_toBottomOf="@id/voice_record_progress"
+            app:layout_constraintStart_toStartOf="@id/voice_record_progress"
+            app:layout_constraintTop_toTopOf="@id/voice_record_progress"
+            app:tint="@color/orange_main_500" />
+
+        <androidx.appcompat.widget.AppCompatTextView
+            style="@style/default_text_style"
+            android:id="@+id/voice_recording_length"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="10dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:paddingTop="5dp"
+            android:paddingBottom="5dp"
+            android:text="00:00"
+            android:textSize="14sp"
+            android:textColor="@color/gray_main2_600"
+            android:background="@drawable/shape_squircle_white_r50_background"
+            android:visibility="@{viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
+            app:layout_constraintBottom_toBottomOf="@id/voice_record_progress"
+            app:layout_constraintEnd_toEndOf="@id/voice_record_progress"
+            app:layout_constraintTop_toTopOf="@id/voice_record_progress"/>
 
         <ImageView
             android:id="@+id/send_message"
             android:layout_width="40dp"
             android:layout_height="0dp"
             android:layout_marginEnd="4dp"
-            android:visibility="@{viewModel.textToSend.length() > 0 || viewModel.attachments.size() > 0 ? View.VISIBLE : View.GONE, default=gone}"
+            android:visibility="@{viewModel.textToSend.length() > 0 || viewModel.attachments.size() > 0 || viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
             android:onClick="@{() -> viewModel.sendMessage()}"
             android:padding="8dp"
             android:src="@drawable/paper_plane_tilt"
@@ -160,7 +217,7 @@
             android:layout_width="40dp"
             android:layout_height="0dp"
             android:layout_marginEnd="4dp"
-            android:visibility="@{viewModel.textToSend.length() > 0 || viewModel.attachments.size() > 0 ? View.GONE : View.VISIBLE}"
+            android:visibility="@{viewModel.textToSend.length() > 0 || viewModel.attachments.size() > 0 || viewModel.voiceRecordingInProgress ? View.GONE : View.VISIBLE}"
             android:onClick="@{() -> viewModel.startVoiceMessageRecording()}"
             android:padding="8dp"
             android:src="@drawable/microphone"
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 205d1b895..c2f74855f 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -40,4 +40,7 @@
     <color name="blue_info_500">#4AA8FF</color>
 
     <color name="orange_warning_600">#DBB820</color>
+
+    <color name="gradient_start">#FF923F</color>
+    <color name="gradient_progress">#80FFFFFF</color>
 </resources>
\ No newline at end of file