Fix zooming difficulties (#1237)

Co-authored-by: Dessalines <[email protected]>
LemmyNet · Sep 15, 2023 · a4beb5d · a4beb5d
1 parent 680a0e6
commit a4beb5d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 23 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -132,7 +132,9 @@ dependencies {
     implementation("io.coil-kt:coil-svg:2.4.0")
     // Allows for proper subsampling of large images
     implementation("me.saket.telephoto:zoomable-image-coil:0.6.0-20230904.055636-11")
-
+    // Allows to swipe close the image viewer, original approach used nested scroll
+    // Which causes weird behaviour as nested scroll is not supported in compose
+    implementation("me.saket.telephoto:flick:0.6.0-SNAPSHOT")
     // crash handling
     implementation("com.github.FunkyMuse:Crashy:1.2.0")
 

diff --git a/app/src/main/java/com/jerboa/ui/components/imageviewer/ImageViewerActivity.kt b/app/src/main/java/com/jerboa/ui/components/imageviewer/ImageViewerActivity.kt
@@ -8,11 +8,7 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.gestures.Orientation
-import androidx.compose.foundation.gestures.rememberScrollableState
-import androidx.compose.foundation.gestures.scrollable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -33,6 +29,7 @@ import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
@@ -61,6 +58,10 @@ import com.jerboa.feat.storeMedia
 import com.jerboa.rememberJerboaAppState
 import com.jerboa.ui.components.common.LoadingBar
 import com.jerboa.util.downloadprogress.DownloadProgress
+import kotlinx.coroutines.delay
+import me.saket.telephoto.flick.FlickToDismiss
+import me.saket.telephoto.flick.FlickToDismissState
+import me.saket.telephoto.flick.rememberFlickToDismissState
 import me.saket.telephoto.zoomable.ZoomSpec
 import me.saket.telephoto.zoomable.coil.ZoomableAsyncImage
 import me.saket.telephoto.zoomable.rememberZoomableImageState
@@ -75,9 +76,6 @@ fun ImageViewer(url: String, appState: JerboaAppState) {
     var showTopBar by remember { mutableStateOf(true) }
 
     val imageGifLoader = (ctx.applicationContext as JerboaApplication).imageViewerLoader
-    var debounce by remember {
-        mutableStateOf(false)
-    }
     val systemUiController = rememberSystemUiController()
 
     val window = (ctx as Activity).window
@@ -139,27 +137,24 @@ fun ImageViewer(url: String, appState: JerboaAppState) {
 
     val zoomableState = rememberZoomableState(ZoomSpec(20F, preventOverOrUnderZoom = false))
     val zoomableImageState = rememberZoomableImageState(zoomableState)
+    val flickState = rememberFlickToDismissState()
+
+    (flickState.gestureState as? FlickToDismissState.GestureState.Dismissing)?.let { gestureState ->
+        LaunchedEffect(Unit) {
+            delay(gestureState.animationDuration / 6)
+            appState.navigateUp()
+        }
+    }
 
     Scaffold(
         topBar = {
             ViewerHeader(showTopBar, url, appState)
         },
         content = {
-            Box(
-                Modifier
-                    .background(backColor)
-                    .scrollable(
-                        orientation = Orientation.Vertical,
-                        state = rememberScrollableState(
-                            consumeScrollDelta = {
-                                if (it < -70 && !debounce) {
-                                    debounce = true
-                                    appState.navigateUp()
-                                }
-                                it
-                            },
-                        ),
-                    ),
+            FlickToDismiss(
+                flickState,
+                modifier = Modifier
+                    .background(backColor),
             ) {
                 if (imageState == ImageState.FAILED) {
                     Column(