update media screen ux

DimensionDev · May 16, 2024 · 057d703 · 057d703
1 parent 9635eb1
commit 057d703
Show file tree

Hide file tree

Showing 3 changed files with 215 additions and 185 deletions.
diff --git a/app/src/main/java/dev/dimension/flare/ui/component/NavigationSuiteScaffold2.kt b/app/src/main/java/dev/dimension/flare/ui/component/NavigationSuiteScaffold2.kt
@@ -1,5 +1,8 @@
 package dev.dimension.flare.ui.component
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.interaction.Interaction
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
@@ -27,7 +30,6 @@ import androidx.compose.material3.NavigationRailItemDefaults
 import androidx.compose.material3.PermanentDrawerSheet
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
 import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.material3.adaptive.navigationsuite.ExperimentalMaterial3AdaptiveNavigationSuiteApi
 import androidx.compose.material3.adaptive.navigationsuite.NavigationSuite
@@ -64,7 +66,6 @@ import kotlin.math.roundToInt
 
 val LocalBottomBarHeight = androidx.compose.runtime.staticCompositionLocalOf<Dp> { 80.dp }
 
-@OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @ExperimentalMaterial3AdaptiveNavigationSuiteApi
 @Composable
 fun NavigationSuiteScaffold2(
@@ -113,7 +114,7 @@ fun NavigationSuiteScaffold2(
         val scope by rememberStateOfItems(navigationSuiteItems)
         val footerScope by rememberStateOfItems(footerItems)
         Row {
-            if (layoutType == NavigationSuiteType.NavigationRail) {
+            AnimatedVisibility(layoutType == NavigationSuiteType.NavigationRail) {
                 NavigationRail(
                     header = railHeader,
                     containerColor = navigationSuiteColors.navigationRailContainerColor,
@@ -151,7 +152,8 @@ fun NavigationSuiteScaffold2(
                         )
                     }
                 }
-            } else if (layoutType == NavigationSuiteType.NavigationDrawer) {
+            }
+            AnimatedVisibility(layoutType == NavigationSuiteType.NavigationDrawer) {
                 val secondaryScope by rememberStateOfItems(secondaryItems)
                 PermanentDrawerSheet(
                     modifier =
@@ -224,14 +226,18 @@ fun NavigationSuiteScaffold2(
                 ) {
                     content.invoke()
                 }
-                if (layoutType == NavigationSuiteType.NavigationBar) {
+                androidx.compose.animation.AnimatedVisibility(
+                    layoutType == NavigationSuiteType.NavigationBar,
+                    enter = slideInVertically { it },
+                    exit = slideOutVertically { it },
+                    modifier =
+                        Modifier
+                            .align(Alignment.BottomCenter)
+                            .offset { IntOffset(x = 0, y = -bottomBarOffsetHeightPx.roundToInt()) },
+                ) {
                     NavigationBar(
                         containerColor = navigationSuiteColors.navigationBarContainerColor,
                         contentColor = navigationSuiteColors.navigationBarContentColor,
-                        modifier =
-                            Modifier
-                                .align(Alignment.BottomCenter)
-                                .offset { IntOffset(x = 0, y = -bottomBarOffsetHeightPx.roundToInt()) },
                     ) {
                         scope.itemList.forEach {
                             NavigationBarItem(

diff --git a/app/src/main/java/dev/dimension/flare/ui/screen/home/HomeScreen.kt b/app/src/main/java/dev/dimension/flare/ui/screen/home/HomeScreen.kt
@@ -50,6 +50,7 @@ import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
@@ -160,6 +161,7 @@ internal fun HomeScreen(
             NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(
                 currentWindowAdaptiveInfo(),
             )
+        val actualLayoutType = state.navigationState.type ?: layoutType
         BackHandler(
             enabled = drawerState.isOpen,
             onBack = {
@@ -289,10 +291,10 @@ internal fun HomeScreen(
                         },
                     )
                 },
-                gesturesEnabled = layoutType != NavigationSuiteType.NavigationDrawer,
+                gesturesEnabled = actualLayoutType != NavigationSuiteType.NavigationDrawer,
             ) {
                 NavigationSuiteScaffold2(
-                    layoutType = layoutType,
+                    layoutType = actualLayoutType,
                     modifier = modifier,
                     drawerHeader = {
                         DrawerHeader(accountTypeState, currentTab, navController)
@@ -458,6 +460,7 @@ internal fun HomeScreen(
                                         dependency(tabState)
                                         dependency(drawerState)
                                         dependency(this@SharedTransitionLayout)
+                                        dependency(state.navigationState)
                                     }
                                 }
                             }
@@ -633,6 +636,10 @@ private fun presenter(settingsRepository: SettingsRepository = koinInject()) =
             remember {
                 ActiveAccountPresenter()
             }.invoke()
+        val navigationState =
+            remember {
+                NavigationState()
+            }
         val tabs =
             account.user.flatMap(
                 onError = {
@@ -686,6 +693,7 @@ private fun presenter(settingsRepository: SettingsRepository = koinInject()) =
             }
         object {
             val tabs = tabs
+            val navigationState = navigationState
         }
     }
 
@@ -727,6 +735,20 @@ internal class TabState {
     }
 }
 
+internal class NavigationState {
+    private val state = mutableStateOf<NavigationSuiteType?>(null)
+    val type: NavigationSuiteType?
+        get() = state.value
+
+    fun hide() {
+        state.value = NavigationSuiteType.None
+    }
+
+    fun show() {
+        state.value = null
+    }
+}
+
 @Composable
 internal fun RegisterTabCallback(
     tabState: TabState,