From f0f20a65944d475704695d32ecc7042f45320691 Mon Sep 17 00:00:00 2001 From: Myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sat, 5 Aug 2023 15:54:08 +0200 Subject: [PATCH] feat: Improve AudioVisualizer, add visualizer to StartRecording for old recording --- .../app/myzel394/locationtest/ui/Constants.kt | 5 ++ .../AudioRecorder/atoms/AudioVisualizer.kt | 13 +++- .../AudioRecorder/atoms/RecordingStatus.kt | 71 +++++++++++-------- .../AudioRecorder/atoms/StartRecording.kt | 11 +++ 4 files changed, 66 insertions(+), 34 deletions(-) create mode 100644 app/src/main/java/app/myzel394/locationtest/ui/Constants.kt diff --git a/app/src/main/java/app/myzel394/locationtest/ui/Constants.kt b/app/src/main/java/app/myzel394/locationtest/ui/Constants.kt new file mode 100644 index 0000000..0ca5175 --- /dev/null +++ b/app/src/main/java/app/myzel394/locationtest/ui/Constants.kt @@ -0,0 +1,5 @@ +package app.myzel394.locationtest.ui + +import androidx.compose.ui.unit.dp + +val BIG_PRIMARY_BUTTON_SIZE = 64.dp diff --git a/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/AudioVisualizer.kt b/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/AudioVisualizer.kt index 5415e0d..2789433 100644 --- a/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/AudioVisualizer.kt +++ b/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/AudioVisualizer.kt @@ -1,6 +1,7 @@ package app.myzel394.locationtest.ui.components.AudioRecorder.atoms import androidx.compose.foundation.Canvas +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.width import androidx.compose.material3.MaterialTheme @@ -19,12 +20,15 @@ private const val MAX_AMPLITUDE = 10000 @Composable fun AudioVisualizer( amplitudes: List, + showAll: Boolean = false ) { val primary = MaterialTheme.colorScheme.primary val primaryMuted = primary.copy(alpha = 0.3f) Canvas( - modifier = Modifier.width(300.dp).height(300.dp) + modifier = Modifier + .fillMaxWidth() + .height(300.dp), ) { val height = this.size.height / 2f val width = this.size.width @@ -32,14 +36,17 @@ fun AudioVisualizer( translate(width, height) { amplitudes.forEachIndexed { index, amplitude -> val amplitudePercentage = (amplitude.toFloat() / MAX_AMPLITUDE).coerceAtMost(1f) + val boxWidth = if (showAll) width / amplitudes.size else 15f val boxHeight = height * amplitudePercentage + drawRoundRect( color = if (amplitudePercentage > 0.05f) primary else primaryMuted, topLeft = Offset( - 30f * (index - amplitudes.size), + if (showAll) -width / amplitudes.size * index + else 30f * (index - amplitudes.size), -boxHeight / 2f ), - size = Size(15f, boxHeight), + size = Size(boxWidth, boxHeight), cornerRadius = CornerRadius(3f, 3f) ) } diff --git a/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/RecordingStatus.kt b/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/RecordingStatus.kt index 623b36f..7dc475b 100644 --- a/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/RecordingStatus.kt +++ b/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/RecordingStatus.kt @@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -32,6 +33,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.unit.dp import app.myzel394.locationtest.services.RecorderService +import app.myzel394.locationtest.ui.BIG_PRIMARY_BUTTON_SIZE import app.myzel394.locationtest.ui.components.atoms.Pulsating import app.myzel394.locationtest.ui.utils.formatDuration import app.myzel394.locationtest.ui.utils.rememberFileSaverDialog @@ -63,38 +65,53 @@ fun RecordingStatus( Column( modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center, + verticalArrangement = Arrangement.SpaceBetween, ) { + Box {} AudioVisualizer(amplitudes = service.amplitudes) - - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.Center, + Column( + horizontalAlignment = Alignment.CenterHorizontally, ) { - val distance = Duration.between(service.recordingStart.value, now).toMillis() + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.Center, + ) { + val distance = Duration.between(service.recordingStart.value, now).toMillis() - Pulsating { - Box( - modifier = Modifier - .size(16.dp) - .clip(CircleShape) - .background(Color.Red) + Pulsating { + Box( + modifier = Modifier + .size(16.dp) + .clip(CircleShape) + .background(Color.Red) + ) + } + Spacer(modifier = Modifier.width(16.dp)) + Text( + text = formatDuration(distance), + style = MaterialTheme.typography.headlineLarge, ) } - Spacer(modifier = Modifier.width(16.dp)) - Text( - text = formatDuration(distance), - style = MaterialTheme.typography.headlineLarge, + Spacer(modifier = Modifier.height(16.dp)) + LinearProgressIndicator( + progress = progress, + modifier = Modifier + .width(300.dp) ) + Spacer(modifier = Modifier.height(32.dp)) + Button( + onClick = { + RecorderService.stopService(context) + }, + colors = ButtonDefaults.textButtonColors(), + ) { + Text("Cancel") + } } - Spacer(modifier = Modifier.height(8.dp)) - LinearProgressIndicator( - progress = progress, - modifier = Modifier - .width(300.dp) - ) - Spacer(modifier = Modifier.height(32.dp)) Button( + modifier = Modifier + .fillMaxWidth() + .height(BIG_PRIMARY_BUTTON_SIZE), onClick = { RecorderService.stopService(context) @@ -107,13 +124,5 @@ fun RecordingStatus( ) Text("Save Recording") } - Button( - onClick = { - RecorderService.stopService(context) - }, - colors = ButtonDefaults.textButtonColors(), - ) { - Text("Cancel") - } } } \ No newline at end of file diff --git a/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/StartRecording.kt b/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/StartRecording.kt index 4dcb558..13285b3 100644 --- a/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/StartRecording.kt +++ b/app/src/main/java/app/myzel394/locationtest/ui/components/AudioRecorder/atoms/StartRecording.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -27,6 +28,7 @@ import androidx.compose.ui.semantics.contentDescription import androidx.compose.ui.semantics.semantics import androidx.compose.ui.unit.dp import app.myzel394.locationtest.services.RecorderService +import app.myzel394.locationtest.ui.BIG_PRIMARY_BUTTON_SIZE import app.myzel394.locationtest.ui.utils.rememberFileSaverDialog import java.time.format.DateTimeFormatter @@ -45,6 +47,9 @@ fun StartRecording( horizontalAlignment = Alignment.CenterHorizontally, ) { Box {} + if (service != null && service.amplitudes.isNotEmpty()) { + Box {} + } Button( onClick = { RecorderService.startService(context, connection) @@ -73,8 +78,14 @@ fun StartRecording( ) } } + if (service != null && service.amplitudes.isNotEmpty()) { + AudioVisualizer(amplitudes = service.amplitudes, showAll = true) + } if (service?.originalRecordingStart != null) Button( + modifier = Modifier + .fillMaxWidth() + .height(BIG_PRIMARY_BUTTON_SIZE), onClick = { saveFile(service.concatenateFiles()) }