Update Coil Version

build.gradle

@@ -131,8 +131,8 @@ dependencies {
     implementation 'com.google.android.material:material:1.6.0-alpha03'
 
     // Coil
-    implementation 'io.coil-kt:coil:1.4.0'
+    implementation 'io.coil-kt:coil:2.0.0-rc01'
-    implementation "io.coil-kt:coil-compose:1.4.0"
+    implementation "io.coil-kt:coil-compose:2.0.0-rc01"
 
     // OkHttps
     implementation 'com.squareup.okhttp3:okhttp:5.0.0-alpha.5'

src/main/kotlin/com/looker/droidify/screen/ScreenshotsFragment.kt

@@ -26,7 +26,6 @@ import com.looker.droidify.graphics.PaddingDrawable
 import com.looker.droidify.network.CoilDownloader
 import com.looker.droidify.utility.RxUtils
 import com.looker.droidify.utility.extension.android.Android
-import com.looker.droidify.utility.extension.resources.clear
 import com.looker.droidify.utility.extension.resources.getColorFromAttr
 import com.looker.droidify.utility.extension.resources.getDrawableCompat
 import com.looker.droidify.utility.extension.resources.sizeScaled
@@ -255,7 +254,6 @@ class ScreenshotsFragment() : DialogFragment() {
             holder as ViewHolder
             val screenshot = screenshots[position]
             val (width, height) = size
-            if (width > 0 && height > 0) {
             repository?.let {
                 holder.image.load(
                     CoilDownloader.createScreenshotUri(
@@ -269,9 +267,6 @@ class ScreenshotsFragment() : DialogFragment() {
                     size(width, height)
                 }
             }
-            } else {
-                holder.image.clear()
-            }
         }
     }
 }

src/main/kotlin/com/looker/droidify/ui/compose/components/ScreenshotList.kt

@@ -0,0 +1,44 @@
+package com.looker.droidify.ui.compose.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.core.net.toUri
+import com.looker.droidify.entity.Screenshot
+import com.looker.droidify.ui.compose.theme.LocalShapes
+import com.looker.droidify.ui.compose.utils.NetworkImage
+
+@Composable
+fun ScreenshotList(
+    modifier: Modifier = Modifier,
+    screenShots: List<Screenshot>,
+    onScreenShotClick: (Screenshot) -> Unit
+) {
+    val screenShotList by remember { mutableStateOf(screenShots) }
+    LazyRow(
+        modifier = modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        items(screenShotList) {
+            NetworkImage(
+                modifier = Modifier
+                    .wrapContentWidth()
+                    .requiredHeight(120.dp)
+                    .clickable { onScreenShotClick(it) },
+                data = it.path.toUri(),
+                shape = RoundedCornerShape(LocalShapes.current.large)
+            )
+        }
+    }
+}

src/main/kotlin/com/looker/droidify/ui/compose/utils/Image.kt

@@ -1,21 +1,29 @@
 package com.looker.droidify.ui.compose.utils
 
 import android.net.Uri
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTransformGestures
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.shape.CornerBasedShape
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
 import coil.annotation.ExperimentalCoilApi
-import coil.compose.ImagePainter
+import coil.compose.SubcomposeAsyncImage
-import coil.compose.rememberImagePainter
+import coil.compose.SubcomposeAsyncImageContent
 import com.looker.droidify.R
 import com.looker.droidify.ui.compose.theme.LocalShapes
 
@@ -26,29 +34,55 @@ fun NetworkImage(
     data: Uri?,
     contentScale: ContentScale = ContentScale.Crop,
     backgroundColor: Color = MaterialTheme.colorScheme.surface,
-    shape: CornerBasedShape = RoundedCornerShape(LocalShapes.current.medium)
+    shape: Shape = RoundedCornerShape(LocalShapes.current.medium)
 ) {
-    Box(modifier) {
+    SubcomposeAsyncImage(
-        val painter = rememberImagePainter(data = data) {
+        modifier = modifier.clip(shape),
-            placeholder(R.drawable.ic_placeholder)
+        model = data,
-            error(R.drawable.ic_placeholder)
+        contentDescription = null,
-        }
-
-        Image(
-            painter = painter,
-            contentDescription = "This is Album Art",
         contentScale = contentScale,
-            modifier = Modifier
+        loading = {
-                .matchParentSize()
-                .clip(shape)
-        )
-
-        if (painter.state is ImagePainter.State.Loading) {
             Spacer(
                 modifier = Modifier
                     .matchParentSize()
                     .background(backgroundColor)
             )
+        },
+        error = {
+            SubcomposeAsyncImageContent(painter = painterResource(id = R.drawable.ic_placeholder))
         }
+    )
+}
+
+@Composable
+fun ZoomableImage(
+    modifier: Modifier = Modifier,
+    data: Uri?
+) {
+    val scale = remember { mutableStateOf(1f) }
+    val rotationState = remember { mutableStateOf(1f) }
+    Box(
+        modifier = modifier
+            .fillMaxSize() // Give the size you want...
+            .background(Color.Gray)
+            .pointerInput(Unit) {
+                detectTransformGestures { _, _, zoom, rotation ->
+                    scale.value *= zoom
+                    rotationState.value += rotation
+                }
+            }
+    ) {
+        NetworkImage(
+            modifier = Modifier
+                .align(Alignment.Center) // keep the image centralized into the Box
+                .graphicsLayer(
+                    // adding some zoom limits (min 50%, max 200%)
+                    scaleX = maxOf(.5f, minOf(3f, scale.value)),
+                    scaleY = maxOf(.5f, minOf(3f, scale.value)),
+                    rotationZ = rotationState.value
+                ),
+            data = data,
+            shape = RectangleShape
+        )
     }
 }

src/main/kotlin/com/looker/droidify/utility/extension/Resources.kt

@@ -15,8 +15,6 @@ import androidx.annotation.AttrRes
 import androidx.annotation.DrawableRes
 import androidx.core.content.ContextCompat
 import androidx.core.content.res.ResourcesCompat
-import coil.util.CoilUtils
-import com.google.android.material.imageview.ShapeableImageView
 import com.google.android.material.textview.MaterialTextView
 import kotlin.math.roundToInt
 
@@ -68,7 +66,3 @@ fun MaterialTextView.setTextSizeScaled(size: Int) {
 fun ViewGroup.inflate(layoutResId: Int): View {
     return LayoutInflater.from(context).inflate(layoutResId, this, false)
 }
-
-fun ShapeableImageView.clear() {
-    CoilUtils.clear(this)
-}