feat(new study screen): Check pronunciation

Author: BrayanDSO

AnkiDroid/src/androidTest/java/com/ichi2/anki/tests/LayoutValidationTest.kt

@@ -104,6 +104,8 @@ class LayoutValidationTest : InstrumentedTest() {
             val ignoredLayoutIds =
                 listOf(
                     com.ichi2.anki.R.layout.introduction_activity,
+                    com.ichi2.anki.R.layout.reviewer2,
+                    com.ichi2.anki.R.layout.preferences,
                 ) +
                     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
                         listOf(com.ichi2.anki.R.layout.widget_small_unthemed)

AnkiDroid/src/main/java/com/ichi2/anki/preferences/reviewer/ViewerAction.kt

@@ -70,6 +70,7 @@ enum class ViewerAction(
     TAG(R.id.action_edit_tags, R.drawable.ic_tag, R.string.menu_edit_tags, DISABLED),
     RESCHEDULE_NOTE(R.id.action_set_due_date, R.drawable.ic_reschedule, titleRes = R.string.empty_string, DISABLED),
     TOGGLE_AUTO_ADVANCE(R.id.action_toggle_auto_advance, R.drawable.ic_fast_forward, R.string.toggle_auto_advance, DISABLED),
+    RECORD_VOICE(R.id.action_record_voice, R.drawable.ic_action_mic, R.string.record_voice, DISABLED),
     USER_ACTION_1(R.id.user_action_1, R.drawable.user_action_1, R.string.user_action_1, DISABLED),
     USER_ACTION_2(R.id.user_action_2, R.drawable.user_action_2, R.string.user_action_2, DISABLED),
     USER_ACTION_3(R.id.user_action_3, R.drawable.user_action_3, R.string.user_action_3, DISABLED),
@@ -109,6 +110,7 @@ enum class ViewerAction(
     TOGGLE_FLAG_PURPLE,
     SHOW_HINT,
     SHOW_ALL_HINTS,
+    REPLAY_VOICE,
     EXIT,
     ;
 
@@ -133,6 +135,8 @@ enum class ViewerAction(
             TOGGLE_AUTO_ADVANCE -> listOf(keycode(KeyEvent.KEYCODE_A, shift()))
             SHOW_HINT -> listOf(keycode(KeyEvent.KEYCODE_H))
             SHOW_ALL_HINTS -> listOf(keycode(KeyEvent.KEYCODE_G))
+            RECORD_VOICE -> listOf(keycode(KeyEvent.KEYCODE_V, shift()))
+            REPLAY_VOICE -> listOf(keycode(KeyEvent.KEYCODE_V))
             TOGGLE_FLAG_RED ->
                 listOf(
                     keycode(KeyEvent.KEYCODE_1, ctrl()),

AnkiDroid/src/main/java/com/ichi2/anki/ui/windows/reviewer/ReviewerFragment.kt

@@ -48,6 +48,7 @@ import androidx.core.view.isVisible
 import androidx.core.view.updateLayoutParams
 import androidx.core.view.updatePadding
 import androidx.core.widget.addTextChangedListener
+import androidx.fragment.app.FragmentContainerView
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.flowWithLifecycle
@@ -188,6 +189,7 @@ class ReviewerFragment :
         setupToolbarPosition(view)
         setupAnswerTimer(view)
         setupMargins(view)
+        setupCheckPronunciation(view)
         setupTimebox()
 
         viewModel.actionFeedbackFlow
@@ -595,6 +597,13 @@ class ReviewerFragment :
         }
     }
 
+    private fun setupCheckPronunciation(view: View) {
+        val container = view.findViewById<FragmentContainerView>(R.id.check_pronunciation_container)
+        viewModel.voiceRecorderEnabledFlow.flowWithLifecycle(lifecycle).collectIn(lifecycleScope) { isEnabled ->
+            container.isVisible = isEnabled
+        }
+    }
+
     private fun setupTimebox() {
         viewModel.timeBoxReachedFlow.flowWithLifecycle(lifecycle).collectIn(lifecycleScope) { timebox ->
             Timber.i("ReviewerFragment: Timebox reached (reps %d - secs %d)", timebox.reps, timebox.secs)

AnkiDroid/src/main/java/com/ichi2/anki/ui/windows/reviewer/ReviewerViewModel.kt

@@ -99,6 +99,8 @@ class ReviewerViewModel :
     val setDueDateFlow = MutableSharedFlow<CardId>()
     val answerTimerStatusFlow = MutableStateFlow<AnswerTimerStatus?>(null)
     val answerFeedbackFlow = MutableSharedFlow<Rating>()
+    val voiceRecorderEnabledFlow = MutableStateFlow(false)
+    val replayVoiceFlow = MutableSharedFlow<Unit>()
     val timeBoxReachedFlow = MutableSharedFlow<Collection.TimeboxReached>()
 
     override val server: AnkiServer = AnkiServer(this, StudyScreenRepository.getServerPort()).also { it.start() }
@@ -656,6 +658,8 @@ class ReviewerViewModel :
                 ViewerAction.FLIP_OR_ANSWER_EASE4 -> flipOrAnswer(Rating.EASY)
                 ViewerAction.SHOW_HINT -> eval.emit("ankidroid.showHint()")
                 ViewerAction.SHOW_ALL_HINTS -> eval.emit("ankidroid.showAllHints()")
+                ViewerAction.RECORD_VOICE -> voiceRecorderEnabledFlow.emit(!voiceRecorderEnabledFlow.value)
+                ViewerAction.REPLAY_VOICE -> replayVoiceFlow.emit(Unit)
                 ViewerAction.EXIT -> finishResultFlow.emit(AbstractFlashcardViewer.RESULT_DEFAULT)
                 ViewerAction.USER_ACTION_1 -> userAction(1)
                 ViewerAction.USER_ACTION_2 -> userAction(2)

AnkiDroid/src/main/java/com/ichi2/anki/ui/windows/reviewer/audiorecord/AudioRecordView.kt

@@ -175,7 +175,7 @@ class AudioRecordView : ConstraintLayout {
 
                     override fun onLongPress(e: MotionEvent) {
                         if (!Permissions.canRecordAudio(context)) return
-                        CompatHelper.compat.vibrate(context, 20.milliseconds)
+                        CompatHelper.compat.vibrate(context, 50.milliseconds)
                         showCancelAndLockSliders()
                         firstX = e.rawX
                         firstY = e.rawY

AnkiDroid/src/main/java/com/ichi2/anki/ui/windows/reviewer/audiorecord/CheckPronunciationFragment.kt

@@ -29,14 +29,17 @@ import androidx.fragment.app.viewModels
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
 import com.ichi2.anki.R
+import com.ichi2.anki.ui.windows.reviewer.ReviewerViewModel
 import com.ichi2.anki.utils.ext.collectIn
 import com.ichi2.utils.show
+import kotlinx.coroutines.launch
 
 /**
  * Integrates [AudioRecordView] with [AudioPlayView] to play the recorded audios.
  */
 class CheckPronunciationFragment : Fragment(R.layout.check_pronunciation_fragment) {
     private val viewModel: CheckPronunciationViewModel by viewModels()
+    private val studyScreenViewModel: ReviewerViewModel by viewModels({ requireParentFragment() })
 
     private lateinit var playView: AudioPlayView
     private lateinit var recordView: AudioRecordView
@@ -68,6 +71,7 @@ class CheckPronunciationFragment : Fragment(R.layout.check_pronunciation_fragmen
 
         setupViewListeners()
         observeViewModel()
+        observeStudyScreenViewModel()
     }
 
     override fun onPause() {
@@ -116,6 +120,7 @@ class CheckPronunciationFragment : Fragment(R.layout.check_pronunciation_fragmen
     private fun observeViewModel() {
         viewModel.isPlaybackVisibleFlow.flowWithLifecycle(lifecycle).collectIn(lifecycleScope) { isVisible ->
             playView.isVisible = isVisible
+            recordView.setRecordDisplayVisibility(!isVisible)
         }
         viewModel.playbackProgressFlow
             .flowWithLifecycle(lifecycle)
@@ -134,4 +139,25 @@ class CheckPronunciationFragment : Fragment(R.layout.check_pronunciation_fragmen
             playView.rotateReplayIcon()
         }
     }
+
+    private fun observeStudyScreenViewModel() {
+        studyScreenViewModel.voiceRecorderEnabledFlow
+            .flowWithLifecycle(lifecycle)
+            .collectIn(lifecycleScope) { isEnabled ->
+                if (!isEnabled) {
+                    viewModel.resetAll()
+                    recordView.forceReset()
+                }
+            }
+        studyScreenViewModel.replayVoiceFlow
+            .flowWithLifecycle(lifecycle)
+            .collectIn(lifecycleScope) {
+                viewModel.onPlayOrReplay()
+            }
+        studyScreenViewModel.onShowQuestionFlow.flowWithLifecycle(lifecycle).collectIn(lifecycleScope) { showingAnswer ->
+            playView.isVisible = false
+            viewModel.onCancelPlayback()
+            recordView.setRecordDisplayVisibility(true)
+        }
+    }
 }

AnkiDroid/src/main/res/layout-sw600dp/reviewer2.xml

@@ -14,7 +14,8 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:orientation="vertical">
+        android:orientation="vertical"
+        android:clipChildren="false">
 
         <com.google.android.material.card.MaterialCardView
             android:id="@+id/webview_container"
@@ -101,6 +102,17 @@
         </com.google.android.material.card.MaterialCardView>
 
 
+        <androidx.fragment.app.FragmentContainerView
+            android:id="@+id/check_pronunciation_container"
+            android:name="com.ichi2.anki.ui.windows.reviewer.audiorecord.CheckPronunciationFragment"
+            android:layout_width="match_parent"
+            android:layout_height="56dp"
+            android:clipChildren="false"
+            android:layout_marginHorizontal="@dimen/reviewer_side_margin"
+            android:layout_gravity="center_horizontal"
+            android:elevation="2dp"
+            android:visibility="gone"/>
+
         <androidx.constraintlayout.widget.ConstraintLayout
             android:id="@+id/tools_layout"
             android:layout_width="match_parent"

AnkiDroid/src/main/res/layout/reviewer2.xml

@@ -11,12 +11,12 @@
     android:focusableInTouchMode="true"
     tools:context=".ui.windows.reviewer.ReviewerFragment">
 
-
     <LinearLayout
         android:id="@+id/main_layout"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:orientation="vertical">
+        android:orientation="vertical"
+        android:clipChildren="false">
 
         <androidx.constraintlayout.widget.ConstraintLayout
             android:id="@+id/tools_layout"
@@ -191,6 +191,17 @@
             </com.google.android.material.textfield.TextInputLayout>
         </com.google.android.material.card.MaterialCardView>
 
+        <androidx.fragment.app.FragmentContainerView
+            android:id="@+id/check_pronunciation_container"
+            android:name="com.ichi2.anki.ui.windows.reviewer.audiorecord.CheckPronunciationFragment"
+            android:layout_width="match_parent"
+            android:layout_height="56dp"
+            android:clipChildren="false"
+            android:layout_marginHorizontal="@dimen/reviewer_side_margin"
+            android:layout_gravity="center_horizontal"
+            android:elevation="2dp"
+            android:visibility="gone"/>
+
         <FrameLayout
             android:id="@+id/answer_area"
             android:layout_width="match_parent"

AnkiDroid/src/main/res/values/ids.xml

@@ -39,6 +39,7 @@
     <item type="id" name="action_suspend_card"/>
     <item type="id" name="action_suspend_note"/>
     <item type="id" name="action_toggle_auto_advance"/>
+    <item type="id" name="action_record_voice"/>
     <item type="id" name="action_set_due_date"/>
 
     <item type="id" name="user_action_1"/>