Implement more of app bar

daugeldauge · Jul 31, 2021 · 9cc6aad · 9cc6aad
1 parent 1cb78bd
commit 9cc6aad
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 25 deletions.
diff --git a/compose/src/main/java/com/neeplayer/compose/App.kt b/compose/src/main/java/com/neeplayer/compose/App.kt
@@ -2,24 +2,98 @@ package com.neeplayer.compose
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.BottomSheetScaffold
+import androidx.compose.material.BottomSheetValue
+import androidx.compose.material.Checkbox
+import androidx.compose.material.DropdownMenu
+import androidx.compose.material.DropdownMenuItem
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.MoreVert
+import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
 
 @Composable
 fun App(container: AppStateContainer) {
     NeeTheme {
         val state = container.state.collectAsState().value
 
+        val scaffoldState = rememberBottomSheetScaffoldState()
+
+        val sheetExpanded = scaffoldState.bottomSheetState.targetValue == BottomSheetValue.Expanded
+
+        val scope = rememberCoroutineScope()
+
         Column {
 
-            TopAppBar(title = { Text(text = "Neé", color = MaterialTheme.colors.onPrimary) })
+            TopAppBar(
+                title = {
+                    Text(
+                        text = when {
+                            sheetExpanded -> "Now playing"
+                            state.currentScreen is Screen.Albums -> state.currentScreen.artist.name
+                            else -> "Neé"
+                        },
+                        color = MaterialTheme.colors.onPrimary
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = { scope.launch { scaffoldState.bottomSheetState.collapse() } }) {
+                        Icon(
+                            imageVector = if (sheetExpanded) Icons.Filled.Close else Icons.Filled.ArrowBack,
+                            contentDescription = null,
+                        )
+                    }
+                },
+                actions = {
+                    val showMenu = remember { mutableStateOf(false) }
+
+                    IconButton(onClick = { showMenu.value = !showMenu.value }) {
+                        Icon(Icons.Default.MoreVert, contentDescription = null)
+                    }
+                    DropdownMenu(
+                        expanded = showMenu.value,
+                        onDismissRequest = { showMenu.value = false }
+                    ) {
+                        DropdownMenuItem(onClick = { /*TODO*/ }) {
+                            Text(text = "Scrobbling")
+                            Spacer(modifier = Modifier.weight(1f))
+                            Checkbox(checked = true, onCheckedChange = null)
+                        }
+                        DropdownMenuItem(onClick = { /*TODO*/ }) {
+                            Text(text = "Sign in to Last.fm")
+                        }
+                    }
+                }
+            )
+
+            BottomSheetScaffold(
+                sheetContent = {
+                    NowPlayingBottomSheetContent(
+                        state = state.nowPlaying,
+                        sheetValue = scaffoldState.bottomSheetState.targetValue,
+                        actions = container,
+                    )
+                },
+                scaffoldState = scaffoldState,
+                sheetPeekHeight = 72.dp,
+            ) { padding ->
 
-            NowPlayingBottomSheet(state = state.nowPlaying, actions = container) { padding ->
                 Box(modifier = Modifier.padding(padding)) {
                     when (val screen = state.currentScreen) {
                         is Screen.Artists -> ArtistsScreen(artists = screen.artists, actions = container)

diff --git a/compose/src/main/java/com/neeplayer/compose/NowPlayingBottomSheet.kt b/compose/src/main/java/com/neeplayer/compose/NowPlayingBottomSheet.kt
@@ -28,7 +28,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.layout
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -39,25 +38,7 @@ import coil.compose.rememberImagePainter
 import coil.size.Scale
 
 @Composable
-fun NowPlayingBottomSheet(state: NowPlayingState?, actions: NowPlayingActions, content: @Composable (PaddingValues) -> Unit) {
-    val scaffoldState = rememberBottomSheetScaffoldState()
-
-    BottomSheetScaffold(
-        sheetContent = {
-            SheetContent(
-                state = state,
-                sheetValue = scaffoldState.bottomSheetState.targetValue,
-                actions = actions,
-            )
-        },
-        scaffoldState = scaffoldState,
-        content = content,
-        sheetPeekHeight = headerHeight,
-    )
-}
-
-@Composable
-private fun SheetContent(
+fun NowPlayingBottomSheetContent(
     state: NowPlayingState?,
     sheetValue: BottomSheetValue,
     actions: NowPlayingActions,
@@ -158,7 +139,7 @@ private fun Body(state: NowPlayingState?, actions: NowPlayingActions) {
 private fun Header(state: NowPlayingState?, onPlayPauseClick: () -> Unit = {}) {
     Row(
         modifier = Modifier
-            .height(headerHeight)
+            .height(72.dp)
             .background(MaterialTheme.colors.background)
             .padding(4.dp),
         verticalAlignment = Alignment.CenterVertically,
@@ -222,8 +203,6 @@ private fun MusicControl(
 private fun NowPlayingState?.playPauseResource() =
     if (this?.playing != true) R.drawable.ic_play_arrow_black_48dp else R.drawable.ic_pause_black_48dp
 
-private val headerHeight = 72.dp
-
 @Preview
 @Composable
 fun PreviewNowPlayingScreen() = NeeTheme {