MBL-1522: Blurry images on Campaign tab (#2046)

(cherry picked from commit 8c0a861)
kickstarter · Jun 3, 2024 · 2b18913 · 2b18913
1 parent 1bf6a46
commit 2b18913
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 96 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -264,7 +264,7 @@ dependencies {
     kapt "com.github.bumptech.glide:compiler:$glide_version"
 
     //Compose Coil
-    implementation("io.coil-kt:coil-compose:2.4.0")
+    implementation("io.coil-kt:coil-compose:2.6.0")
 
     // Firebase
     implementation platform('com.google.firebase:firebase-bom:32.8.1')
@@ -292,9 +292,6 @@ dependencies {
     implementation "org.jetbrains.kotlinx:kotlinx-coroutines-rx2:$coroutines"
     androidTestImplementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:$coroutines"
 
-    // Zoom on Images
-    implementation 'io.github.aghajari:ZoomHelper:1.1.0'
-
     // Testing
     testImplementation "junit:junit:4.13.2"
     testImplementation 'org.mockito:mockito-core:4.5.1'

diff --git a/...idTest/java/com/kickstarter/screenshoot/testing/ui/components/ImageWithCaptionViewTest.kt b/...idTest/java/com/kickstarter/screenshoot/testing/ui/components/ImageWithCaptionViewTest.kt
diff --git a/app/src/main/java/com/kickstarter/ui/activities/ProjectPageActivity.kt b/app/src/main/java/com/kickstarter/ui/activities/ProjectPageActivity.kt
@@ -37,7 +37,6 @@ import androidx.core.content.ContextCompat
 import androidx.core.view.isGone
 import androidx.fragment.app.FragmentManager
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import com.aghajari.zoomhelper.ZoomHelper
 import com.google.android.material.tabs.TabLayout
 import com.google.android.material.tabs.TabLayoutMediator
 import com.google.firebase.crashlytics.FirebaseCrashlytics
@@ -809,9 +808,6 @@ class ProjectPageActivity :
     }
 
     override fun dispatchTouchEvent(event: MotionEvent?): Boolean {
-        event?.let {
-            ZoomHelper.getInstance().dispatchTouchEvent(it, this)
-        }
 
         if (event?.action == MotionEvent.ACTION_DOWN) {
             val view = currentFocus

diff --git a/app/src/main/java/com/kickstarter/ui/views/ImageWithCaptionView.kt b/app/src/main/java/com/kickstarter/ui/views/ImageWithCaptionView.kt
@@ -7,14 +7,21 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.View.OnClickListener
 import androidx.cardview.widget.CardView
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.LinearProgressIndicator
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale.Companion.FillWidth
 import androidx.core.view.isVisible
-import com.aghajari.zoomhelper.ZoomHelper
+import coil.compose.AsyncImagePainter
+import coil.compose.SubcomposeAsyncImage
+import coil.compose.SubcomposeAsyncImageContent
 import com.kickstarter.R
 import com.kickstarter.databinding.ViewImageWithCaptionBinding
 import com.kickstarter.libs.utils.extensions.isGif
+import com.kickstarter.libs.utils.extensions.isNotNull
 import com.kickstarter.libs.utils.extensions.isWebp
 import com.kickstarter.ui.extensions.loadGifImage
-import com.kickstarter.ui.extensions.loadImage
 import com.kickstarter.ui.extensions.loadWebp
 import com.kickstarter.ui.extensions.makeLinks
 
@@ -35,19 +42,43 @@ class ImageWithCaptionView @JvmOverloads constructor(
     fun setImage(src: String) {
         if (src.isEmpty() || src.isBlank()) {
             binding.imageView.setImageDrawable(null)
-            binding.imageViewPlaceholder.setImageDrawable(null)
+            binding.composeViewImage.visibility = GONE
         } else {
             when {
                 src.isWebp() -> {
                     binding.imageView.loadWebp(src, context)
+                    binding.imageView.visibility = VISIBLE
+                    binding.composeViewImage.visibility = GONE
                 }
                 src.isGif() -> {
+                    binding.imageView.visibility = VISIBLE
                     binding.imageView.loadGifImage(src, context)
+                    binding.composeViewImage.visibility = GONE
                 }
                 else -> {
-                    binding.imageView.loadImage(src, context, binding.imageViewPlaceholder)
-                    ZoomHelper.addZoomableView(binding.imageView)
-                    ZoomHelper.removeZoomableView(binding.imageViewPlaceholder)
+                    binding.composeViewImage.visibility = VISIBLE
+                    binding.imageView.visibility = GONE
+                    binding.composeViewImage.setContent {
+                        if (src.isNotNull()) {
+                            Box(
+                                modifier = Modifier.fillMaxWidth()
+                            ) {
+                                SubcomposeAsyncImage(
+                                    model = src,
+                                    contentDescription = "null",
+                                    contentScale = FillWidth,
+                                    modifier = Modifier.fillMaxWidth()
+                                ) {
+                                    val state = painter.state
+                                    if (state is AsyncImagePainter.State.Loading || state is AsyncImagePainter.State.Error) {
+                                        LinearProgressIndicator()
+                                    } else {
+                                        SubcomposeAsyncImageContent()
+                                    }
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }

diff --git a/app/src/main/res/layout/view_image_with_caption.xml b/app/src/main/res/layout/view_image_with_caption.xml
@@ -1,37 +1,37 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/image_with_caption_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
+    <!--  To load gifs/webp images  -->
     <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/image_view_placeholder"
+        android:id="@+id/image_view"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
-        android:contentDescription="@null"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        android:contentDescription="@null" />
 
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/image_view"
-        android:layout_width="0dp"
+    <!--  To load images of unknown size, specially for really huge images  -->
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/compose_view_image"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:adjustViewBounds="true"
+        android:visibility="gone"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        android:contentDescription="@null" />
+        app:layout_constraintTop_toTopOf="parent"/>
 
     <androidx.constraintlayout.widget.Barrier
         android:id="@+id/barrier"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:barrierDirection="bottom"
-        app:constraint_referenced_ids="image_view_placeholder,image_view" />
+        app:constraint_referenced_ids="image_view, compose_view_image" />
 
     <androidx.appcompat.widget.AppCompatTextView
         android:layout_width="0dp"