Media: use telephoto library

features/messages/impl/build.gradle.kts

@@ -54,6 +54,8 @@ dependencies {
     implementation(libs.androidx.media3.exoplayer)
     implementation(libs.androidx.media3.ui)
     implementation(libs.accompanist.systemui)
+    implementation(libs.vanniktech.blurhash)
+    implementation(libs.telephoto.zoomableimage)
 
     testImplementation(libs.test.junit)
     testImplementation(libs.coroutines.test)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/media/local/LocalMediaView.kt

@@ -24,7 +24,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
@@ -36,9 +35,8 @@ import androidx.media3.common.util.UnstableApi
 import androidx.media3.exoplayer.ExoPlayer
 import androidx.media3.ui.AspectRatioFrameLayout
 import androidx.media3.ui.PlayerView
-import coil.compose.AsyncImage
-import io.element.android.libraries.designsystem.components.ZoomableBox
 import io.element.android.libraries.designsystem.utils.OnLifecycleEvent
+import me.saket.telephoto.zoomable.coil.ZoomableAsyncImage
 
 @SuppressLint("UnsafeOptInUsageError")
 @Composable
@@ -64,19 +62,12 @@ private fun MediaImageView(
     uri: Uri,
     modifier: Modifier = Modifier,
 ) {
-    ZoomableBox(
+    ZoomableAsyncImage(
         modifier = modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center,
-    ) {
-        AsyncImage(
-            modifier = Modifier
-                .zoomable()
-                .fillMaxSize(),
-            model = uri,
-            contentDescription = "Image",
-            contentScale = ContentScale.Fit,
-        )
-    }
+        model = uri,
+        contentDescription = "Image",
+        contentScale = ContentScale.Fit,
+    )
 }
 
 @UnstableApi