diff --git a/composeApp/src/commonMain/kotlin/mg/dot/feufaro/ui/MidiControlPanel.kt b/composeApp/src/commonMain/kotlin/mg/dot/feufaro/ui/MidiControlPanel.kt index 1de2e66..cb1a6a2 100644 --- a/composeApp/src/commonMain/kotlin/mg/dot/feufaro/ui/MidiControlPanel.kt +++ b/composeApp/src/commonMain/kotlin/mg/dot/feufaro/ui/MidiControlPanel.kt @@ -81,9 +81,13 @@ import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.DpSize import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import feufaro.composeapp.generated.resources.Res +import feufaro.composeapp.generated.resources.ic_mixer_satb +import feufaro.composeapp.generated.resources.ic_organ import kotlinx.coroutines.delay import mg.dot.feufaro.getPlatform import mg.dot.feufaro.midi.MediaPlayer +import org.jetbrains.compose.resources.painterResource import org.koin.core.component.getScopeId import javax.swing.Icon @@ -120,8 +124,6 @@ fun MidiControlPanel( var isPianoSelected by remember { mutableStateOf(true) } - var showBPMTools by remember { mutableStateOf(false) } - var showInstruTools by remember { mutableStateOf(false) } var showSATBTools by remember { mutableStateOf(false) } var showVolumeTools by remember { mutableStateOf(false) } var expandedCtl by remember { mutableStateOf(false) } @@ -205,112 +207,19 @@ fun MidiControlPanel( } } } - AnimatedVisibility( - visible = showInstruTools, - enter = fadeIn() + scaleIn() + slideInVertically { it / 2 }, - exit = fadeOut() + scaleOut() + slideOutVertically { it / 2 } - ) { - Row ( - horizontalArrangement = Arrangement.spacedBy(10.dp) - ) { - FilledIconToggleButton( - checked = isPianoSelected, - onCheckedChange = { - isPianoSelected = true; - mediaPlayer.changeInstru(1) - } - ){ - Icon(imageVector = Icons.Filled.Piano, contentDescription = "Piano") - } - FilledIconToggleButton( - checked = !isPianoSelected, - onCheckedChange = { - isPianoSelected = false; - mediaPlayer.changeInstru(20) - }){ - Icon(imageVector = Icons.Filled.PianoOff, contentDescription = "Church Organ") - } - } - } - AnimatedVisibility( - visible = showBPMTools, - enter = fadeIn() + scaleIn() + slideInVertically { it / 2 }, - exit = fadeOut() + scaleOut() + slideOutVertically { it / 2 } - ) { - Row( - verticalAlignment = Alignment.CenterVertically - ){ - Column( - horizontalAlignment = Alignment.Start - ) { - OutlinedTextField( - value = bpmInput, onValueChange = { newValue -> - if (newValue.all { it.isDigit() } && newValue.length <= 3) { - bpmInput = newValue - } - }, label = { Text("BPM") }, singleLine = true, keyboardOptions = KeyboardOptions( - keyboardType = KeyboardType.Number, imeAction = ImeAction.Done - ), keyboardActions = KeyboardActions( - onDone = { - val newBpm = bpmInput.toFloatOrNull() ?: 0f - val newFactor = newBpm / basseBpm - tempo = newFactor - mediaPlayer.setTempo(newFactor) - bpmInput = (basseBpm * newFactor).toInt().toString() - }), modifier = Modifier.width(65.dp)) - } - Column( - horizontalAlignment = Alignment.CenterHorizontally - ) { - Slider(value = tempo, onValueChange = { - tempo = it - mediaPlayer?.setTempo(it) - currentBpm = mediaPlayer.getCurrentBPM() - bpmInput = (basseBpm * it).toInt().toString() - }, valueRange = 0.25f..1.5f, modifier = Modifier.width(200.dp), thumb = { - Box( - modifier = Modifier.size(15.dp).background(Color.Magenta, CircleShape) - ) - }, track = { sliderState -> - SliderDefaults.Track( - sliderState = sliderState, modifier = Modifier.height(5.dp) - ) - }) - } - Column( - horizontalAlignment = Alignment.End - ) { - IconButton(onClick = { - tempo = 1.0f - mediaPlayer?.setTempo(1.0f) - currentBpm = mediaPlayer.getCurrentBPM() - }) { - Icon(Icons.Default.Refresh, contentDescription = "Reset") - } - } - } - } + Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceAround ){ - Box(contentAlignment = Alignment.CenterStart) { - IconButton( - onClick = { - showBPMTools = !showBPMTools - } - ) { - Icon(imageVector = Icons.Default.AvTimer, contentDescription = "Tempo") - } - } Box( contentAlignment = Alignment.CenterStart) { val isAtStart = loopState.first == -1L val isWaitingForB = loopState.first != -1L && !loopState.third val isLooping = loopState.third - Button( + OutlinedButton( onClick = { when { isAtStart -> mediaPlayer.setPointA() @@ -339,7 +248,6 @@ fun MidiControlPanel( Text( text = "A", color = if (isWaitingForB || isLooping) Color.White else Color.Black, - fontWeight = FontWeight.Bold, fontSize = 18.sp ) @@ -353,7 +261,6 @@ fun MidiControlPanel( Text( text = "B", color = if (isLooping) Color.White else Color.Black, - fontWeight = FontWeight.Bold, fontSize = 18.sp ) } @@ -363,29 +270,56 @@ fun MidiControlPanel( IconButton( onClick = { showSATBTools = !showSATBTools - }) { - Icon(imageVector = Icons.Default.SettingsVoice, contentDescription = "SATB") + } + ,modifier = Modifier + .size(40.dp) + .clip(CircleShape) + .background(if (showSATBTools) MaterialTheme.colorScheme.primary else Color.Transparent)) { + Icon( + painter = painterResource(Res.drawable.ic_mixer_satb), + contentDescription = "SATB", + tint = if (showSATBTools) Color.White else Color.Black, + modifier = Modifier.size(35.dp) + ) } } Box(contentAlignment = Alignment.Center) { IconButton( onClick = onPlayPauseClick, - modifier = Modifier.size(48.dp) + modifier = Modifier.size(48.dp).background(MaterialTheme.colorScheme.primary, CircleShape) ) { Icon( imageVector = if (isPause) Icons.Filled.PlayArrow else Icons.Filled.Pause, contentDescription = "Pla", - tint = MaterialTheme.colorScheme.primary + tint = Color.White ) } } Box(contentAlignment = Alignment.CenterEnd) { IconButton( onClick = { - showInstruTools = !showInstruTools + isPianoSelected = !isPianoSelected + if (isPianoSelected) { + mediaPlayer?.changeInstru(1) + } else { + mediaPlayer?.changeInstru(20) + } } ) { - Icon(imageVector = Icons.Default.Tune, contentDescription = "Instru") + if (isPianoSelected) { + Icon( + Icons.Default.Piano, + contentDescription = "Piano", + tint = Color.Black + ) + } else { + Icon( + painter = painterResource(Res.drawable.ic_organ), + contentDescription = "Orgue", + tint = Color.Black, + modifier = Modifier.size(25.dp) + ) + } } } val platform = getPlatform()