Merge branch 'develop' into audiofix

WORKSPACE

@@ -125,9 +125,9 @@ git_repository(
 # to correctly size in-line SVGs (such as those needed for LaTeX-based math expressions).
 git_repository(
     name = "androidsvg",
-    commit = "1265eb1087056cf3fc2e10442e5545bc65c109ce",
+    commit = "5bc9c7553e94c3476e8ea32baea3c77567228fcd",
     remote = "https://github.com/oppia/androidsvg",
-    shallow_since = "1686302944 -0700",
+    shallow_since = "1686304726 -0700",
 )
 
 git_repository(

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

@@ -36,6 +36,20 @@
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">
 
+      <com.google.android.material.progressindicator.CircularProgressIndicator
+        android:id="@+id/audio_fragment_voiceover_progressbar"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:indeterminate="true"
+        android:visibility="@{viewModel.playStatusLiveData == UiAudioPlayStatus.LOADING ? View.VISIBLE : View.GONE}"
+        app:indicatorColor="@color/component_color_audio_fragment_voiceover_progressbar_color"
+        app:indicatorSize="@dimen/audio_fragment_progress_indicator_size"
+        app:trackThickness="@dimen/audio_fragment_progress_indicator_track_thickness"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="@+id/play_pause_audio_icon"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
       <ImageView
         android:id="@+id/play_pause_audio_icon"
         android:layout_width="52dp"
@@ -44,6 +58,7 @@
         android:clickable="@{viewModel.playStatusLiveData != UiAudioPlayStatus.LOADING}"
         android:contentDescription="@{viewModel.playStatusLiveData == UiAudioPlayStatus.PLAYING ? @string/audio_pause_description : @string/audio_play_description}"
         android:onClick="@{(v) -> viewModel.togglePlayPause(viewModel.playStatusLiveData)}"
+        android:visibility="@{viewModel.playStatusLiveData != UiAudioPlayStatus.LOADING ? View.VISIBLE : View.INVISIBLE}"
         android:padding="12dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"

app/src/main/res/values/component_colors.xml

@@ -245,6 +245,7 @@
   <color name="component_color_concept_card_fragment_toolbar_color">@color/color_palette_concept_card_toolbar_color</color>
   <!-- Audio Fragment -->
   <color name="component_color_audio_fragment_background_color">@color/color_palette_audio_fragment_background_color</color>
+  <color name="component_color_audio_fragment_voiceover_progressbar_color">@color/color_palette_icon_background_secondary_color</color>
   <color name="component_color_audio_fragment_seekbar_progress_color">@color/color_palette_icon_background_secondary_color</color>
   <color name="component_color_audio_fragment_seekbar_color">@color/color_palette_seekbar_progress_background_color</color>
   <color name="component_color_audio_fragment_seekbar_thumb_shadow_color">@color/color_palette_seekbar_thumb_shadow_color</color>

app/src/main/res/values/dimens.xml

@@ -8,8 +8,6 @@
   <dimen name="answer_tick_margin">12dp</dimen>
   <integer name="fade_in_duration_ms">1000</integer>
   <integer name="fade_out_duration_ms">1000</integer>
-  <dimen name="audio_fragment_corner_radius">8dp</dimen>
-  <dimen name="audio_fragment_margin">28dp</dimen>
   <dimen name="cellular_data_dialog_padding">24dp</dimen>
   <dimen name="state_previous_next_button_radius">4dp</dimen>
   <dimen name="train_checkbox_padding">18dp</dimen>
@@ -769,4 +767,10 @@
   <dimen name="resume_lesson_chapter_flexbox_margin_end">28dp</dimen>
   <dimen name="resume_lesson_chapter_flexbox_margin_top">32dp</dimen>
   <dimen name="resume_lesson_start_over_button_margin">8dp</dimen>
+
+  <!--  AudioFragment-->
+  <dimen name="audio_fragment_corner_radius">8dp</dimen>
+  <dimen name="audio_fragment_margin">28dp</dimen>
+  <dimen name="audio_fragment_progress_indicator_size">20dp</dimen>
+  <dimen name="audio_fragment_progress_indicator_track_thickness">3dp</dimen>
 </resources>

app/src/sharedTest/java/org/oppia/android/app/player/exploration/ExplorationActivityTest.kt

@@ -1071,7 +1071,7 @@ class ExplorationActivityTest {
       onView(withId(R.id.action_audio_player)).perform(click())
 
       testCoroutineDispatchers.runCurrent()
-      onView(withId(R.id.play_pause_audio_icon)).check(matches(isDisplayed()))
+      onView(withId(R.id.audio_bar_container)).check(matches(isDisplayed()))
       onView(withText(context.getString(R.string.cellular_data_alert_dialog_title)))
         .check(doesNotExist())
     }
@@ -1295,6 +1295,43 @@ class ExplorationActivityTest {
     explorationDataController.stopPlayingExploration(isCompletion = false)
   }
 
+  @Test
+  fun testExplorationActivity_loadingAudio_progressbarIsDisplayed() {
+    markAllSpotlightsSeen()
+    setUpAudio()
+    launch<ExplorationActivity>(
+      createExplorationActivityIntent(
+        internalProfileId,
+        RATIOS_TOPIC_ID,
+        RATIOS_STORY_ID_0,
+        RATIOS_EXPLORATION_ID_0,
+        shouldSavePartialProgress = false
+      )
+    ).use {
+      explorationDataController.startPlayingNewExploration(
+        internalProfileId,
+        RATIOS_TOPIC_ID,
+        RATIOS_STORY_ID_0,
+        RATIOS_EXPLORATION_ID_0
+      )
+      networkConnectionUtil.setCurrentConnectionStatus(ProdConnectionStatus.LOCAL)
+      testCoroutineDispatchers.runCurrent()
+      onView(withId(R.id.action_audio_player)).perform(click())
+
+      testCoroutineDispatchers.runCurrent()
+      onView(withId(R.id.audio_bar_container)).check(matches(isDisplayed()))
+      onView(withId(R.id.audio_fragment_voiceover_progressbar)).check(matches(isDisplayed()))
+
+      waitForTheView(withDrawable(R.drawable.ic_pause_circle_filled_white_24dp))
+      onView(withId(R.id.play_pause_audio_icon)).check(
+        matches(
+          withDrawable(R.drawable.ic_pause_circle_filled_white_24dp)
+        )
+      )
+    }
+    explorationDataController.stopPlayingExploration(isCompletion = false)
+  }
+
   // TODO(#89): Check this test case too. It works in pair with below test cases.
   @Test
   fun testExpActivity_showUnsavedExpDialog_cancel_dismissesDialog() {

utility/build.gradle

@@ -82,7 +82,7 @@ dependencies {
       'androidx.appcompat:appcompat:1.0.2',
       'androidx.lifecycle:lifecycle-livedata-ktx:2.2.0-alpha03',
       'androidx.work:work-runtime-ktx:2.4.0',
-      'com.github.oppia:androidsvg:1265eb1087056cf3fc2e10442e5545bc65c109ce',
+      'com.github.oppia:androidsvg:5bc9c7553e94c3476e8ea32baea3c77567228fcd',
       'com.github.oppia:kotlitex:43139c140833c7120f351d63d74b42c253d2b213',
       'com.github.bumptech.glide:glide:4.11.0',
       'com.google.dagger:dagger:2.24',

utility/src/main/java/org/oppia/android/util/parser/svg/ScalableVectorGraphic.kt

@@ -3,9 +3,9 @@ package org.oppia.android.util.parser.svg
 import android.graphics.Picture
 import android.graphics.RectF
 import android.text.TextPaint
-import com.caverock.androidsvg.RenderOptions
-import com.caverock.androidsvg.SVG
-import com.caverock.androidsvg.utils.RenderOptionsBase
+import com.caverock.androidsvg.androidrendering.RenderOptions
+import com.caverock.androidsvg.androidrendering.RenderOptionsBase
+import com.caverock.androidsvg.androidrendering.SVG
 import org.oppia.android.util.parser.image.ImageTransformation
 
 /**
@@ -39,18 +39,14 @@ class ScalableVectorGraphic {
   }
 
   /**
-   * Returns the [SvgSizeSpecs] corresponding to this SVG, based on the specified [textPaint]. If a
-   * [TextPaint] is supplied, the returns specs will include text-based adjustments (for in-line
-   * images). Otherwise, the returned specs will be arranged for rendering the SVG in a standalone
-   * manner.
+   * Returns the [SvgSizeSpecs] corresponding to this SVG.
+   *
+   * The returned specs will be arranged for rendering the SVG in a standalone manner.
    */
-  fun computeSizeSpecs(textPaint: TextPaint?): SvgSizeSpecs {
-    val options = RenderOptionsBase().also { if (textPaint != null) it.textPaint(textPaint) }
+  fun computeSizeSpecs(): SvgSizeSpecs {
+    val options = RenderOptionsBase()
     val documentWidth = parsedSvg.value.getDocumentWidthOrNull(options)
     val documentHeight = parsedSvg.value.getDocumentHeightOrNull(options)
-    val verticalAlignment = if (textPaint != null) {
-      adjustAlignmentForAndroid(parsedSvg.value.getVerticalAlignment(options))
-    } else 0f
 
     val viewBox: RectF? = parsedSvg.value.documentViewBox
     val viewBoxWidth = viewBox?.width()
@@ -75,16 +71,54 @@ class ScalableVectorGraphic {
       intrinsicHeight,
       renderedWidth = imageFileNameWidth ?: intrinsicWidth,
       renderedHeight = imageFileNameHeight ?: intrinsicHeight,
+      verticalAlignment = 0f
+    )
+  }
+
+  /**
+   * Returns the [SvgSizeSpecs] corresponding to this SVG, based on the specified [textPaint].
+   * Based on the supplied [TextPaint], the returned specs will include text-based adjustments
+   * (for in-line images).
+   */
+  fun computeSizeSpecsForTextPicture(textPaint: TextPaint?): SvgSizeSpecs {
+    val options = textPaint?.let { RenderOptionsBase().textPaint(it) } ?: RenderOptionsBase()
+    val documentWidth = parsedSvg.value.getDocumentWidthOrNull(options)
+    val documentHeight = parsedSvg.value.getDocumentHeightOrNull(options)
+
+    val imageFileNameWidth = extractedWidth?.toFloat()
+    val imageFileNameHeight = extractedHeight?.toFloat()
+
+    val fontMetrics = textPaint?.fontMetrics
+    val fontHeight = fontMetrics?.descent?.minus(fontMetrics.ascent) ?: 0f
+
+    val adjustedWidth =
+      imageFileNameWidth?.convertExToPx(fontHeight) ?: documentWidth ?: DEFAULT_SIZE_PX
+    val adjustedHeight =
+      imageFileNameHeight?.convertExToPx(fontHeight) ?: documentHeight ?: DEFAULT_SIZE_PX
+
+    val verticalAlignment = textPaint?.let {
+      adjustAlignmentForAndroid(parsedSvg.value.getVerticalAlignment(options))
+    } ?: 0f
+
+    return SvgSizeSpecs(
+      adjustedWidth,
+      adjustedHeight,
+      renderedWidth = adjustedWidth,
+      renderedHeight = adjustedHeight,
       verticalAlignment
     )
   }
 
+  private fun Float.convertExToPx(fontHeight: Float): Float {
+    return this * fontHeight * 0.5f
+  }
+
   /**
    * Returns an Android [Picture] including the draw instructions for rendering this SVG within a
    * line of text whose size and style is configured by the provided [textPaint].
    */
   fun renderToTextPicture(textPaint: TextPaint): Picture {
-    return computeSizeSpecs(textPaint).let { (width, height, _) ->
+    return computeSizeSpecsForTextPicture(textPaint).let { (width, height, _) ->
       val options =
         RenderOptions().textPaint(textPaint).viewPort(0f, 0f, width, height) as RenderOptions
       parsedSvg.value.renderToPicture(options)

utility/src/main/java/org/oppia/android/util/parser/svg/SvgPictureDrawable.kt

@@ -100,11 +100,17 @@ abstract class SvgPictureDrawable(
    * when [textPaint] is null and text rendering when otherwise.
    */
   protected fun reinitialize(textPaint: TextPaint?) {
-    picture = textPaint?.let {
-      scalableVectorGraphic.renderToTextPicture(it)
-    } ?: scalableVectorGraphic.renderToBlockPicture()
+    val newPicture = if (textPaint != null) {
+      intrinsicSize = scalableVectorGraphic.computeSizeSpecsForTextPicture(textPaint)
+      scalableVectorGraphic.renderToTextPicture(textPaint)
+    } else {
+      intrinsicSize = scalableVectorGraphic.computeSizeSpecs()
+      scalableVectorGraphic.renderToBlockPicture()
+    }
+
+    picture = newPicture
+
     // TODO(#4246): Fix both SVG rendering performance and upscaling to ensure images aren't blurry.
-    intrinsicSize = scalableVectorGraphic.computeSizeSpecs(textPaint)
     if (scalableVectorGraphic.shouldBeRenderedAsBitmap()) {
       recomputeBitmap()
     }