Camera UI now rotates

Author: Wavesonics

app/src/main/kotlin/com/darkrockstudios/app/securecamera/camera/BottomCameraControls.kt

@@ -10,7 +10,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
@@ -31,6 +33,7 @@ fun BottomCameraControls(
 	onModeChange: (CaptureMode) -> Unit,
 	isLoading: Boolean,
 	navController: NavController,
+	iconRotation: Float = 0f,
 ) {
 	val context = LocalContext.current
 
@@ -40,36 +43,26 @@ fun BottomCameraControls(
 			.padding(start = 16.dp, end = 16.dp, bottom = 8.dp),
 		horizontalAlignment = Alignment.CenterHorizontally,
 	) {
-		// Mode toggle chips
+		// Mode toggle buttons
 		Row(
 			modifier = Modifier.padding(bottom = 16.dp),
+			horizontalArrangement = Arrangement.spacedBy(12.dp),
 		) {
-			FilterChip(
+			ModeToggleButton(
 				selected = captureMode == CaptureMode.PHOTO,
 				onClick = { onModeChange(CaptureMode.PHOTO) },
 				enabled = !isRecording && !isLoading,
-				label = { Text(stringResource(R.string.camera_mode_photo)) },
-				leadingIcon = {
-					Icon(
-						imageVector = Icons.Filled.Camera,
-						contentDescription = null,
-						modifier = Modifier.size(18.dp),
-					)
-				}
+				icon = Icons.Filled.Camera,
+				contentDescription = stringResource(R.string.camera_mode_photo),
+				iconRotation = iconRotation,
 			)
-			Spacer(modifier = Modifier.width(8.dp))
-			FilterChip(
+			ModeToggleButton(
 				selected = captureMode == CaptureMode.VIDEO,
 				onClick = { onModeChange(CaptureMode.VIDEO) },
 				enabled = !isRecording && !isLoading,
-				label = { Text(stringResource(R.string.camera_mode_video)) },
-				leadingIcon = {
-					Icon(
-						imageVector = Icons.Filled.Videocam,
-						contentDescription = null,
-						modifier = Modifier.size(18.dp),
-					)
-				}
+				icon = Icons.Filled.Videocam,
+				contentDescription = stringResource(R.string.camera_mode_video),
+				iconRotation = iconRotation,
 			)
 		}
 
@@ -85,7 +78,9 @@ fun BottomCameraControls(
 				Icon(
 					imageVector = Icons.Filled.Settings,
 					contentDescription = stringResource(R.string.camera_settings_button),
-					modifier = Modifier.size(32.dp),
+					modifier = Modifier
+						.size(32.dp)
+						.rotate(iconRotation),
 				)
 			}
 
@@ -110,7 +105,9 @@ fun BottomCameraControls(
 								imageVector = Icons.Filled.Camera,
 								contentDescription = stringResource(id = R.string.camera_capture_content_description),
 								tint = MaterialTheme.colorScheme.onPrimary,
-								modifier = Modifier.size(32.dp),
+								modifier = Modifier
+									.size(32.dp)
+									.rotate(iconRotation),
 							)
 						}
 					}
@@ -146,7 +143,9 @@ fun BottomCameraControls(
 								imageVector = if (isRecording) Icons.Filled.Stop else Icons.Filled.FiberManualRecord,
 								contentDescription = null,
 								tint = Color.White,
-								modifier = Modifier.size(32.dp),
+								modifier = Modifier
+									.size(32.dp)
+									.rotate(iconRotation),
 							)
 						}
 					}
@@ -161,9 +160,42 @@ fun BottomCameraControls(
 				Icon(
 					imageVector = Icons.Filled.PhotoLibrary,
 					contentDescription = stringResource(id = R.string.camera_gallery_content_description),
-					modifier = Modifier.size(32.dp),
+					modifier = Modifier
+						.size(32.dp)
+						.rotate(iconRotation),
 				)
 			}
 		}
 	}
+}
+
+@Composable
+private fun ModeToggleButton(
+	selected: Boolean,
+	onClick: () -> Unit,
+	enabled: Boolean,
+	icon: ImageVector,
+	contentDescription: String,
+	iconRotation: Float,
+) {
+	FilledIconToggleButton(
+		checked = selected,
+		onCheckedChange = { onClick() },
+		enabled = enabled,
+		modifier = Modifier.size(48.dp),
+		colors = IconButtonDefaults.filledIconToggleButtonColors(
+			containerColor = Color.Transparent,
+			contentColor = Color.White.copy(alpha = 0.6f),
+			checkedContainerColor = MaterialTheme.colorScheme.primaryContainer,
+			checkedContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
+		),
+	) {
+		Icon(
+			imageVector = icon,
+			contentDescription = contentDescription,
+			modifier = Modifier
+				.size(24.dp)
+				.rotate(iconRotation),
+		)
+	}
 }

app/src/main/kotlin/com/darkrockstudios/app/securecamera/camera/CameraContent.kt

@@ -3,12 +3,16 @@ package com.darkrockstudios.app.securecamera.camera
 import android.Manifest
 import android.annotation.SuppressLint
 import android.content.pm.ActivityInfo
+import android.view.OrientationEventListener
 import androidx.activity.compose.LocalActivity
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import com.darkrockstudios.app.securecamera.KeepScreenOnEffect
 import com.darkrockstudios.app.securecamera.navigation.NavController
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
@@ -32,6 +36,57 @@ private fun LockScreenOrientationPortrait() {
 	}
 }
 
+/**
+ * Tracks device orientation using the accelerometer and returns the rotation angle
+ * that UI elements should be rotated to appear upright.
+ *
+ * Returns an animated float representing degrees: 0f, 90f, 180f, or 270f
+ * The animation smoothly transitions between orientations.
+ */
+@Composable
+fun rememberDeviceRotation(): Float {
+	val context = LocalContext.current
+	var targetRotation by remember { mutableFloatStateOf(0f) }
+
+	DisposableEffect(context) {
+		val orientationListener = object : OrientationEventListener(context) {
+			override fun onOrientationChanged(orientation: Int) {
+				if (orientation == ORIENTATION_UNKNOWN) return
+
+				// Map device orientation to UI rotation
+				// When device is rotated clockwise, UI should rotate counter-clockwise to stay upright
+				val newRotation = when (orientation) {
+					in 45 until 135 -> 270f   // Device rotated to landscape (left)
+					in 135 until 225 -> 180f  // Device upside down
+					in 225 until 315 -> 90f   // Device rotated to landscape (right)
+					else -> 0f                 // Portrait
+				}
+
+				if (newRotation != targetRotation) {
+					targetRotation = newRotation
+				}
+			}
+		}
+
+		if (orientationListener.canDetectOrientation()) {
+			orientationListener.enable()
+		}
+
+		onDispose {
+			orientationListener.disable()
+		}
+	}
+
+	// Animate the rotation smoothly
+	val animatedRotation by animateFloatAsState(
+		targetValue = targetRotation,
+		animationSpec = tween(durationMillis = 300),
+		label = "device_rotation"
+	)
+
+	return animatedRotation
+}
+
 @OptIn(ExperimentalPermissionsApi::class)
 @Composable
 internal fun CameraContent(
@@ -70,6 +125,8 @@ internal fun CameraContent(
 		)
 	}
 
+	val deviceRotation = rememberDeviceRotation()
+
 	Box(
 		modifier = modifier
 			.fillMaxSize()
@@ -87,6 +144,7 @@ internal fun CameraContent(
 				capturePhoto = capturePhoto,
 				navController = navController,
 				paddingValues = paddingValues,
+				iconRotation = deviceRotation,
 			)
 		} else {
 			NoCameraPermission(navController, permissionsState)

app/src/main/kotlin/com/darkrockstudios/app/securecamera/camera/CameraControls.kt

@@ -18,6 +18,7 @@ import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
@@ -47,6 +48,7 @@ fun CameraControls(
 	capturePhoto: MutableState<Boolean?>,
 	navController: NavController,
 	paddingValues: PaddingValues,
+	iconRotation: Float = 0f,
 ) {
 	val scope = rememberCoroutineScope()
 	var isFlashOn by rememberSaveable(cameraController.flashMode) { mutableStateOf(cameraController.flashMode == ImageCapture.FLASH_MODE_ON) }
@@ -139,13 +141,15 @@ fun CameraControls(
 			cameraController,
 			modifier = Modifier
 				.align(Alignment.TopCenter)
-				.padding(top = paddingValues.calculateTopPadding().plus(64.dp))
+				.padding(top = paddingValues.calculateTopPadding().plus(64.dp)),
+			textRotation = iconRotation,
 		)
 
 		LevelIndicator(
 			modifier = Modifier
 				.align(Alignment.Center)
-				.padding(top = paddingValues.calculateTopPadding().plus(16.dp))
+				.padding(top = paddingValues.calculateTopPadding().plus(16.dp)),
+			deviceRotation = iconRotation,
 		)
 
 		if (isRecording) {
@@ -171,6 +175,7 @@ fun CameraControls(
 				Icon(
 					imageVector = Icons.Filled.MoreVert,
 					contentDescription = stringResource(id = R.string.camera_more_options_content_description),
+					modifier = Modifier.rotate(iconRotation),
 				)
 			}
 		}
@@ -197,7 +202,8 @@ fun CameraControls(
 			},
 			onLensToggle = { cameraController.toggleLens() },
 			onClose = { isTopControlsVisible = false },
-			paddingValues = paddingValues
+			paddingValues = paddingValues,
+			iconRotation = iconRotation,
 		)
 
 		BottomCameraControls(
@@ -210,7 +216,8 @@ fun CameraControls(
 			navController = navController,
 			onCapture = { doCapturePhoto() },
 			onToggleRecording = { doToggleRecording() },
-			onModeChange = { mode -> cameraController.switchCaptureMode(mode) }
+			onModeChange = { mode -> cameraController.switchCaptureMode(mode) },
+			iconRotation = iconRotation,
 		)
 	}
 }