feat(scanner): add zoom ratio label during pinch-to-zoom

bmc08gt · bmc08gt · commit 4517c6253a18 · 2026-05-11T12:33:43.000-04:00
Show a pill badge with the current zoom level (e.g. 1.0x) below the
top bar while a pinch gesture is active. Fades in/out with the gesture.

Signed-off-by: Brandon McAnsh &lt;git@bmcreations.dev&gt;
diff --git a/apps/flipcash/features/scanner/src/main/kotlin/com/flipcash/app/scanner/internal/Scanner.kt b/apps/flipcash/features/scanner/src/main/kotlin/com/flipcash/app/scanner/internal/Scanner.kt
@@ -6,6 +6,7 @@ import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
@@ -59,6 +60,9 @@ internal fun Scanner() {
 
     val vibrator = LocalVibrator.current
 
+    var isPinching by remember { mutableStateOf(false) }
+    var zoomRatio by remember { mutableFloatStateOf(1f) }
+
     LaunchedEffect(biometricsState, previewing) {
         if (previewing == true) {
             focusManager.clearFocus()
@@ -74,6 +78,8 @@ internal fun Scanner() {
     @SuppressLint("LocalContextGetResourceValueCall")
     BillContainer(
         isPaused = isPaused,
+        isPinching = isPinching,
+        zoomRatio = zoomRatio,
         onAction = {
             when (it) {
                 ScannerDecorItem.Give -> {
@@ -95,6 +101,10 @@ internal fun Scanner() {
             CodeScanner(
                 scanningEnabled = previewing == true,
                 cameraGesturesEnabled = true,
+                onPinchStateChanged = { pinching, zoom ->
+                    isPinching = pinching
+                    zoomRatio = zoom
+                },
                 onPreviewStateChanged = {
                     cameraAvailable = true
                     previewing = it
diff --git a/apps/flipcash/features/scanner/src/main/kotlin/com/flipcash/app/scanner/internal/bills/BillContainerView.kt b/apps/flipcash/features/scanner/src/main/kotlin/com/flipcash/app/scanner/internal/bills/BillContainerView.kt
@@ -67,6 +67,8 @@ import kotlinx.coroutines.delay
 internal fun BillContainer(
     modifier: Modifier = Modifier,
     isPaused: Boolean,
+    isPinching: Boolean = false,
+    zoomRatio: Float = 1f,
     scannerView: @Composable () -> Unit,
     onAction: (ScannerDecorItem) -> Unit
 ) {
@@ -199,6 +201,8 @@ internal fun BillContainer(
                 state = updatedState,
                 billState = updatedBillState,
                 isPaused = isPaused,
+                isPinching = isPinching,
+                zoomRatio = zoomRatio,
                 onAction = onAction
             )
         }
diff --git a/apps/flipcash/features/scanner/src/main/kotlin/com/flipcash/app/scanner/internal/ui/components/DecorView.kt b/apps/flipcash/features/scanner/src/main/kotlin/com/flipcash/app/scanner/internal/ui/components/DecorView.kt
@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -21,6 +22,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -35,7 +37,9 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.flipcash.app.bill.customization.LocalBillPlaygroundController
 import com.flipcash.app.core.bill.BillState
@@ -44,6 +48,7 @@ import com.flipcash.app.session.SessionState
 import com.flipcash.features.scanner.R
 import com.getcode.theme.CodeTheme
 import com.getcode.theme.xxl
+import com.getcode.ui.components.Pill
 import com.getcode.ui.core.rememberedClickable
 import com.getcode.ui.core.unboundedClickable
 import com.getcode.utils.network.LocalNetworkObserver
@@ -53,6 +58,8 @@ internal fun DecorView(
     state: SessionState,
     billState: BillState,
     isPaused: Boolean,
+    isPinching: Boolean = false,
+    zoomRatio: Float = 1f,
     modifier: Modifier = Modifier,
     onAction: (ScannerDecorItem) -> Unit,
 ) {
@@ -111,6 +118,29 @@ internal fun DecorView(
                 )
             }
 
+            AnimatedVisibility(
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .statusBarsPadding()
+                    .padding(top = CodeTheme.dimens.grid.x9),
+                visible = isPinching,
+                enter = fadeIn(tween(150)),
+                exit = fadeOut(tween(250)),
+            ) {
+                Box(
+                    modifier = Modifier.fillMaxSize(),
+                    contentAlignment = Alignment.TopCenter,
+                ) {
+                    Pill(
+                        text = "${"%.1f".format(zoomRatio)}x",
+                        textStyle = CodeTheme.typography.textSmall.copy(
+                            fontWeight = FontWeight.Bold
+                        ),
+                        shape = CodeTheme.shapes.xxl,
+                    )
+                }
+            }
+
             Column(modifier = Modifier.align(Alignment.BottomCenter)) {
                 val networkState by LocalNetworkObserver.current.state.collectAsState()
 
diff --git a/ui/scanner/src/main/kotlin/com/getcode/ui/scanner/CodeScanner.kt b/ui/scanner/src/main/kotlin/com/getcode/ui/scanner/CodeScanner.kt
@@ -11,24 +11,24 @@ import androidx.camera.core.Preview
 import androidx.camera.lifecycle.ProcessCameraProvider
 import androidx.camera.view.PreviewView
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.runtime.DisposableEffect
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
@@ -60,6 +60,7 @@ fun CodeScanner(
     scanningEnabled: Boolean,
     cameraGesturesEnabled: Boolean,
     modifier: Modifier = Modifier,
+    onPinchStateChanged: (Boolean, Float) -> Unit,
     onPreviewStateChanged: (Boolean) -> Unit,
     onCodeScanned: (CodeScanResult) -> Unit,
     onError: (Throwable) -> Unit = { },
@@ -97,6 +98,8 @@ fun CodeScanner(
     var camera by remember { mutableStateOf<Camera?>(null) }
     var autoFocusPoint by remember { mutableStateOf(Offset.Unspecified) }
     var gestureController by remember { mutableStateOf<CameraGestureController?>(null) }
+    var isPinching by remember { mutableStateOf(false) }
+    var zoomRatio by remember { mutableFloatStateOf(1f) }
 
     val codeAnalyzer = rememberMultiCodeAnalyzer(
         onCodeScanned = onCodeScanned,
@@ -170,6 +173,7 @@ fun CodeScanner(
                 cameraControl = it.cameraControl,
                 cameraInfo = it.cameraInfo,
                 gesturesEnabled = cameraGesturesEnabled,
+                onPinchStateChanged = onPinchStateChanged,
             ) { touchedAt ->
                 autoFocusPoint = touchedAt
                 previewView.meteringPointFactory.createPoint(touchedAt.x, touchedAt.y)
@@ -279,4 +283,4 @@ suspend fun bindWithRetry(
     throw NoCamerasAvailableException()
 }
 
-class NoCamerasAvailableException: Throwable()
+class NoCamerasAvailableException : Throwable()
diff --git a/ui/scanner/src/main/kotlin/com/getcode/ui/scanner/internal/CameraGestureController.kt b/ui/scanner/src/main/kotlin/com/getcode/ui/scanner/internal/CameraGestureController.kt
@@ -19,6 +19,7 @@ internal class CameraGestureController(
     private val gesturesEnabled: Boolean,
     private val cameraControl: CameraControl,
     private val cameraInfo: CameraInfo,
+    private val onPinchStateChanged: (isPinching: Boolean, zoomRatio: Float) -> Unit = { _, _ -> },
     onTap: (Offset) -> MeteringPoint,
 ) {
     private val handler = Handler(Looper.getMainLooper())
@@ -52,6 +53,7 @@ internal class CameraGestureController(
                 gestureZoomFactor = currentZoom
                 appliedZoom = currentZoom
                 cumulativeScale = 1f
+                onPinchStateChanged(true, currentZoom)
                 return true
             }
 
@@ -65,6 +67,7 @@ internal class CameraGestureController(
                 // Lerp toward target to smooth lens-switch transitions
                 appliedZoom += (targetZoom - appliedZoom) * 0.4f
                 cameraControl.setZoomRatio(appliedZoom)
+                onPinchStateChanged(true, appliedZoom)
                 return true
             }
 
@@ -122,6 +125,7 @@ internal class CameraGestureController(
 
             if (event.action == MotionEvent.ACTION_UP) {
                 if (isPinching) {
+                    onPinchStateChanged(false, currentZoom)
                     animateZoomReset(cameraInfo, cameraControl)
                     initialZoomRatio = currentZoom
                     isPinching = false
