Fix #5631: Fix thumbnail loading for multiple classrooms (#5642)

<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation
<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

Fixes #5631

This PR introduces a new `ThumbnailImage` composable that integrates the
`LessonThumbnailImageView` within a Compose layout. The changes include:

- Adding the basic structure for `ThumbnailImage` composable.
- Updating various UI components to use the new `ThumbnailImage`
composable.
- Adding classroom thumbnail drawables to `LessonThumbnailImageView`.

Note: Initial attempts were made to use the Glide Compose library, but
was found to be incompatible with other dependencies
#5631 (comment).

## Screenshots

|Light Mode|Dark Mode|
|--|--|

|![image](https://github.com/user-attachments/assets/84d7447e-cde1-4ef5-b08b-a05dce7c6243)|![image](https://github.com/user-attachments/assets/a37ad536-46be-470d-96b6-e953282bc800)|

|![image](https://github.com/user-attachments/assets/c4ad9439-d071-4b73-8c6b-f927a45e420b)|![image](https://github.com/user-attachments/assets/8e472114-5e97-4327-a13f-46cb31f739d9)|

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [x] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only
<!-- Delete these section if this PR does not include UI-related
changes. -->
If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-A11y-Guide))
- For PRs introducing new UI elements or color changes, both light and
dark mode screenshots must be included
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing

---------

Co-authored-by: Ben Henning <[email protected]>

app/src/main/java/org/oppia/android/app/classroom/ClassroomListFragmentPresenter.kt

@@ -66,6 +66,7 @@ import org.oppia.android.domain.translation.TranslationController
 import org.oppia.android.util.data.AsyncResult
 import org.oppia.android.util.data.DataProviders.Companion.toLiveData
 import org.oppia.android.util.locale.OppiaLocale
+import org.oppia.android.util.parser.html.ClassroomHtmlParserEntityType
 import org.oppia.android.util.parser.html.StoryHtmlParserEntityType
 import org.oppia.android.util.parser.html.TopicHtmlParserEntityType
 import org.oppia.android.util.platformparameter.EnableOnboardingFlowV2
@@ -84,6 +85,7 @@ class ClassroomListFragmentPresenter @Inject constructor(
   private val topicListController: TopicListController,
   private val classroomController: ClassroomController,
   private val oppiaLogger: OppiaLogger,
+  @ClassroomHtmlParserEntityType private val classroomEntityType: String,
   @TopicHtmlParserEntityType private val topicEntityType: String,
   @StoryHtmlParserEntityType private val storyEntityType: String,
   private val resourceHandler: AppLanguageResourceHandler,
@@ -120,6 +122,7 @@ class ClassroomListFragmentPresenter @Inject constructor(
       profileManagementController,
       topicListController,
       classroomController,
+      classroomEntityType,
       topicEntityType,
       storyEntityType,
       resourceHandler,

app/src/main/java/org/oppia/android/app/classroom/ClassroomListViewModel.kt

@@ -40,8 +40,6 @@ import org.oppia.android.util.data.AsyncResult
 import org.oppia.android.util.data.DataProvider
 import org.oppia.android.util.data.DataProviders.Companion.combineWith
 import org.oppia.android.util.data.DataProviders.Companion.toLiveData
-import org.oppia.android.util.parser.html.StoryHtmlParserEntityType
-import org.oppia.android.util.parser.html.TopicHtmlParserEntityType
 
 private const val PROFILE_AND_PROMOTED_ACTIVITY_COMBINED_PROVIDER_ID =
   "profile+promotedActivityList"
@@ -57,8 +55,9 @@ class ClassroomListViewModel(
   private val profileManagementController: ProfileManagementController,
   private val topicListController: TopicListController,
   private val classroomController: ClassroomController,
-  @TopicHtmlParserEntityType private val topicEntityType: String,
-  @StoryHtmlParserEntityType private val storyEntityType: String,
+  private val classroomEntityType: String,
+  private val topicEntityType: String,
+  private val storyEntityType: String,
   private val resourceHandler: AppLanguageResourceHandler,
   private val dateTimeUtil: DateTimeUtil,
   private val translationController: TranslationController
@@ -270,6 +269,7 @@ class ClassroomListViewModel(
         ClassroomSummaryViewModel(
           fragment as ClassroomSummaryClickListener,
           ephemeralClassroomSummary,
+          classroomEntityType,
           translationController
         )
       }

app/src/main/java/org/oppia/android/app/classroom/ThumbnailImage.kt

@@ -0,0 +1,46 @@
+package org.oppia.android.app.classroom
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.viewinterop.AndroidView
+import org.oppia.android.app.customview.LessonThumbnailImageView
+import org.oppia.android.app.model.LessonThumbnail
+
+/**
+ * A composable function that displays a lesson thumbnail image using a custom Android view.
+ *
+ * This function integrates the [LessonThumbnailImageView] within a Compose layout, allowing it
+ * to render a lesson thumbnail image based on the provided parameters. The implementation
+ * currently relies on a traditional Android View approach due to compatibility issues with the
+ * Glide Compose library.
+ *
+ * @param entityId the unique identifier for the entity associated with the thumbnail
+ * @param entityType the type of the entity (e.g., classroom, topic, story)
+ * @param lessonThumbnail the [LessonThumbnail] containing metadata required to load the image
+ * @param modifier the [Modifier] to be applied to the layout, defaulting to [Modifier]
+ */
+@Composable
+fun ThumbnailImage(
+  entityId: String,
+  entityType: String,
+  lessonThumbnail: LessonThumbnail?,
+  modifier: Modifier = Modifier,
+) {
+  // TODO(#5422): Migrate to Jetpack Compose once the Glide Compose library becomes compatible.
+  AndroidView(
+    modifier = modifier.fillMaxSize(),
+    factory = { context ->
+      LessonThumbnailImageView(context).apply {
+        setLessonThumbnail(lessonThumbnail)
+        setEntityId(entityId)
+        setEntityType(entityType)
+      }
+    },
+    update = { view ->
+      view.setLessonThumbnail(lessonThumbnail)
+      view.setEntityId(entityId)
+      view.setEntityType(entityType)
+    }
+  )
+}

app/src/main/java/org/oppia/android/app/classroom/classroomlist/ClassroomList.kt

@@ -2,7 +2,6 @@ package org.oppia.android.app.classroom.classroomlist
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -23,14 +22,13 @@ import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.integerResource
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.oppia.android.R
-import org.oppia.android.app.classroom.getDrawableResource
+import org.oppia.android.app.classroom.ThumbnailImage
 import org.oppia.android.app.home.classroomlist.ClassroomSummaryViewModel
 
 /** Test tag for the classroom list. */
@@ -103,14 +101,10 @@ fun ClassroomCard(
       horizontalAlignment = Alignment.CenterHorizontally,
     ) {
       AnimatedVisibility(visible = !isSticky) {
-        Image(
-          painter = painterResource(
-            id = classroomSummaryViewModel
-              .classroomSummary
-              .classroomThumbnail
-              .getDrawableResource()
-          ),
-          contentDescription = classroomSummaryViewModel.title,
+        ThumbnailImage(
+          entityId = classroomSummaryViewModel.classroomSummary.classroomId,
+          entityType = classroomSummaryViewModel.entityType,
+          lessonThumbnail = classroomSummaryViewModel.classroomSummary.classroomThumbnail,
           modifier = Modifier
             .testTag("${CLASSROOM_CARD_ICON_TEST_TAG}_${classroomSummaryViewModel.title}")
             .padding(bottom = dimensionResource(id = R.dimen.classrooms_card_icon_padding_bottom))

app/src/main/java/org/oppia/android/app/classroom/promotedlist/ComingSoonTopicList.kt

@@ -1,6 +1,5 @@
 package org.oppia.android.app.classroom.promotedlist
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -18,11 +17,9 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -31,7 +28,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.oppia.android.R
-import org.oppia.android.app.classroom.getDrawableResource
+import org.oppia.android.app.classroom.ThumbnailImage
 import org.oppia.android.app.home.promotedlist.ComingSoonTopicListViewModel
 import org.oppia.android.app.home.promotedlist.ComingSoonTopicsViewModel
 import org.oppia.android.util.locale.OppiaLocale
@@ -104,23 +101,11 @@ fun ComingSoonTopicCard(
       Column(
         verticalArrangement = Arrangement.Center,
       ) {
-        Image(
-          painter = painterResource(
-            id = comingSoonTopicsViewModel.topicSummary.lessonThumbnail.getDrawableResource()
-          ),
-          contentDescription = "Picture of a " +
-            "${comingSoonTopicsViewModel.topicSummary.lessonThumbnail.thumbnailGraphic.name}.",
-          modifier = Modifier
-            .aspectRatio(4f / 3f)
-            .background(
-              Color(
-                (
-                  0xff000000L or
-                    comingSoonTopicsViewModel
-                      .topicSummary.lessonThumbnail.backgroundColorRgb.toLong()
-                  ).toInt()
-              )
-            )
+        ThumbnailImage(
+          entityId = comingSoonTopicsViewModel.topicSummary.topicId,
+          entityType = comingSoonTopicsViewModel.entityType,
+          lessonThumbnail = comingSoonTopicsViewModel.topicSummary.lessonThumbnail,
+          modifier = Modifier.aspectRatio(4f / 3f)
         )
         ComingSoonTopicCardTextSection(comingSoonTopicsViewModel)
       }

app/src/main/java/org/oppia/android/app/classroom/promotedlist/PromotedStoryList.kt

@@ -2,8 +2,6 @@ package org.oppia.android.app.classroom.promotedlist
 
 import android.view.View
 import android.view.ViewGroup
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -23,11 +21,9 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -36,7 +32,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.oppia.android.R
-import org.oppia.android.app.classroom.getDrawableResource
+import org.oppia.android.app.classroom.ThumbnailImage
 import org.oppia.android.app.home.promotedlist.PromotedStoryListViewModel
 import org.oppia.android.app.home.promotedlist.PromotedStoryViewModel
 import org.oppia.android.util.locale.OppiaLocale
@@ -141,21 +137,11 @@ fun PromotedStoryCard(
     Column(
       modifier = cardColumnModifier
     ) {
-      Image(
-        painter = painterResource(
-          id = promotedStoryViewModel.promotedStory.lessonThumbnail.getDrawableResource()
-        ),
-        contentDescription = promotedStoryViewModel.storyTitle,
-        modifier = Modifier
-          .aspectRatio(16f / 9f)
-          .background(
-            Color(
-              (
-                0xff000000L or
-                  promotedStoryViewModel.promotedStory.lessonThumbnail.backgroundColorRgb.toLong()
-                ).toInt()
-            )
-          )
+      ThumbnailImage(
+        entityId = promotedStoryViewModel.promotedStory.storyId,
+        entityType = promotedStoryViewModel.entityType,
+        lessonThumbnail = promotedStoryViewModel.promotedStory.lessonThumbnail,
+        modifier = Modifier.aspectRatio(16f / 9f)
       )
       Text(
         text = promotedStoryViewModel.nextChapterTitle,

app/src/main/java/org/oppia/android/app/classroom/topiclist/TopicCard.kt

@@ -1,6 +1,5 @@
 package org.oppia.android.app.classroom.topiclist
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -12,18 +11,16 @@ import androidx.compose.material.Card
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.sp
 import org.oppia.android.R
-import org.oppia.android.app.classroom.getDrawableResource
+import org.oppia.android.app.classroom.ThumbnailImage
 import org.oppia.android.app.home.topiclist.TopicSummaryViewModel
 
 /** Displays a card with the topic summary information. */
@@ -41,22 +38,11 @@ fun TopicCard(topicSummaryViewModel: TopicSummaryViewModel) {
     Column(
       verticalArrangement = Arrangement.Center,
     ) {
-      Image(
-        painter = painterResource(
-          id = topicSummaryViewModel.topicSummary.topicThumbnail.getDrawableResource()
-        ),
-        contentDescription = "Picture of a " +
-          "${topicSummaryViewModel.topicSummary.topicThumbnail.thumbnailGraphic.name}.",
-        modifier = Modifier
-          .aspectRatio(4f / 3f)
-          .background(
-            Color(
-              (
-                0xff000000L or
-                  topicSummaryViewModel.topicSummary.topicThumbnail.backgroundColorRgb.toLong()
-                ).toInt()
-            )
-          )
+      ThumbnailImage(
+        entityId = topicSummaryViewModel.topicSummary.topicId,
+        entityType = topicSummaryViewModel.entityType,
+        lessonThumbnail = topicSummaryViewModel.topicSummary.topicThumbnail,
+        modifier = Modifier.aspectRatio(4f / 3f)
       )
       TopicCardTextSection(topicSummaryViewModel)
     }

app/src/main/java/org/oppia/android/app/customview/LessonThumbnailImageView.kt

@@ -193,6 +193,12 @@ class LessonThumbnailImageView @JvmOverloads constructor(
         R.drawable.topic_fractions_03
       LessonThumbnailGraphic.MIXED_NUMBERS ->
         R.drawable.topic_fractions_04
+      LessonThumbnailGraphic.SCIENCE_CLASSROOM ->
+        R.drawable.ic_science
+      LessonThumbnailGraphic.MATHS_CLASSROOM ->
+        R.drawable.ic_maths
+      LessonThumbnailGraphic.ENGLISH_CLASSROOM ->
+        R.drawable.ic_english
       else ->
         R.drawable.topic_fractions_01
     }

app/src/main/java/org/oppia/android/app/home/classroomlist/ClassroomSummaryViewModel.kt

@@ -10,6 +10,7 @@ import java.util.Objects
 class ClassroomSummaryViewModel(
   private val classroomSummaryClickListener: ClassroomSummaryClickListener,
   ephemeralClassroomSummary: EphemeralClassroomSummary,
+  val entityType: String,
   translationController: TranslationController,
 ) : HomeItemViewModel() {
   /** The [ClassroomSummary] retrieved from the [EphemeralClassroomSummary]. */

scripts/assets/test_file_exemptions.textproto

@@ -298,6 +298,10 @@ test_file_exemption {
   exempted_file_path: "app/src/main/java/org/oppia/android/app/classroom/promotedlist/PromotedStoryList.kt"
   test_file_not_required: true
 }
+test_file_exemption {
+  exempted_file_path: "app/src/main/java/org/oppia/android/app/classroom/ThumbnailImage.kt"
+  test_file_not_required: true
+}
 test_file_exemption {
   exempted_file_path: "app/src/main/java/org/oppia/android/app/classroom/topiclist/AllTopicsHeaderText.kt"
   test_file_not_required: true

utility/src/main/java/org/oppia/android/util/parser/html/ExplorationHtmlParserEntityType.kt

@@ -10,6 +10,10 @@ annotation class ExplorationHtmlParserEntityType
 @Qualifier
 annotation class ConceptCardHtmlParserEntityType
 
+/** Qualifier for injecting the entity type for classroom card. */
+@Qualifier
+annotation class ClassroomHtmlParserEntityType
+
 /** Qualifier for injecting the entity type for review card. */
 @Qualifier
 annotation class TopicHtmlParserEntityType

utility/src/main/java/org/oppia/android/util/parser/html/HtmlParserEntityTypeModule.kt

@@ -18,6 +18,12 @@ class HtmlParserEntityTypeModule {
     return "skill"
   }
 
+  @Provides
+  @ClassroomHtmlParserEntityType
+  fun provideClassroomCardHtmlParserEntityType(): String {
+    return "classroom"
+  }
+
   @Provides
   @TopicHtmlParserEntityType
   fun provideReviewCardHtmlParserEntityType(): String {