improve bottomBar interface & style motion

packages/app/constants/defaultTheme.json

@@ -18,6 +18,7 @@
         "backgroundRepeat": "no-repeat",
         "backgroundAttachment": "fixed",
         "top-bar-height": "52px",
+        "bottom-bar-height": "80px",
         "compact-mode": false
     },
     "defaultVariant": "dark",

packages/app/src/components/Layout/bottomBar/index.jsx

@@ -8,6 +8,8 @@ import { Icons, createIconRender } from "components/Icons"
 
 import { WithPlayerContext, Context } from "contexts/WithPlayerContext"
 
+import QuickNavMenu from "components/Layout/quickNav"
+
 import PlayerView from "pages/@mobile-views/player"
 import CreatorView from "pages/@mobile-views/creator"
 
@@ -111,75 +113,6 @@ const AccountButton = (props) => {
     </div>
 }
 
-
-const QuickNavMenuItems = [
-    {
-        id: "music",
-        icon: "MdAlbum",
-        label: "Music",
-        location: "/music"
-    },
-    {
-        id: "tv",
-        icon: "Tv",
-        label: "Tv",
-        location: "/tv"
-    },
-    {
-        id: "groups",
-        icon: "MdGroups",
-        label: "Groups",
-        location: "/groups",
-        disabled: true,
-    },
-    {
-        id: "marketplace",
-        icon: "Box",
-        label: "Marketplace",
-        location: "/marketplace",
-        disabled: true
-    },
-]
-
-const QuickNavMenu = ({
-    visible,
-}) => {
-    return <div
-        className={classnames(
-            "quick-nav",
-            {
-                ["active"]: visible
-            }
-        )}
-    >
-        {
-            QuickNavMenuItems.map((item, index) => {
-                return <div
-                    key={index}
-                    className={classnames(
-                        "quick-nav_item",
-                        {
-                            ["disabled"]: item.disabled
-                        }
-                    )}
-                    quicknav-item={item.id}
-                    disabled={item.disabled}
-                >
-                    {
-                        createIconRender(item.icon)
-                    }
-                    <h1>
-
-                        {
-                            item.label
-                        }
-                    </h1>
-                </div>
-            })
-        }
-    </div>
-}
-
 export default (props) => {
     return <WithPlayerContext>
         <BottomBar
@@ -192,11 +125,9 @@ export class BottomBar extends React.Component {
     static contextType = Context
 
     state = {
-        allowed: true,
+        visible: false,
-        show: true,
+        quickNavVisible: false,
-        visible: true,
         render: null,
-        quickNavVisible: false
     }
 
     busEvents = {
@@ -206,7 +137,7 @@ export class BottomBar extends React.Component {
     }
 
     componentDidMount = () => {
-        app.BottomBarController = {
+        this.interface = app.layout.bottom_bar = {
             toogleVisible: this.toggleVisibility,
             isVisible: () => this.state.visible,
             render: (fragment) => {
@@ -217,6 +148,10 @@ export class BottomBar extends React.Component {
             },
         }
 
+        setTimeout(() => {
+            this.setState({ visible: true })
+        }, 10)
+
         // Register bus events
         Object.keys(this.busEvents).forEach((key) => {
             app.eventBus.on(key, this.busEvents[key])
@@ -224,7 +159,7 @@ export class BottomBar extends React.Component {
     }
 
     componentWillUnmount = () => {
-        delete window.app.BottomBarController
+        delete window.app.layout.bottom_bar
 
         // Unregister bus events
         Object.keys(this.busEvents).forEach((key) => {
@@ -233,23 +168,11 @@ export class BottomBar extends React.Component {
     }
 
     toggleVisibility = (to) => {
-        if (!app.isMobile) {
+        if (typeof to === "undefined") {
-            to = false
+            to = !this.state.visible
-        } else {
-            to = to ?? !this.state.visible
         }
 
-        if (!to) {
+        this.setState({ visible: to })
-            this.setState({ show: to }, () => {
-                setTimeout(() => {
-                    this.setState({ visible: to })
-                }, 500)
-            })
-        } else {
-            this.setState({ visible: to }, () => {
-                this.setState({ show: to })
-            })
-        }
     }
 
     handleItemClick = (item) => {
@@ -362,23 +285,25 @@ export class BottomBar extends React.Component {
             </div>
         }
 
-        if (!this.state.visible) {
+        const heightValue = this.state.visible ? Number(app.cores.style.defaultVar("bottom-bar-height").replace("px", "")) : 0
-            return null
-        }
 
         return <>
             <QuickNavMenu
                 visible={this.state.quickNavVisible}
             />
 
-            <Motion style={{ y: spring(this.state.show ? 0 : 300) }}>
+            <Motion style={{
-                {({ y }) =>
+                y: spring(this.state.visible ? 0 : 300),
+                height: spring(heightValue)
+            }}>
+                {({ y, height }) =>
                     <div className="bottomBar_wrapper">
                         <div
                             className="bottomBar"
                             style={{
-                                WebkitTransform: `translate3d(0, ${y}px, 0)`,
+                                WebkitTransform: `translateY(${y}px)`,
-                                transform: `translate3d(0, ${y}px, 0)`,
+                                transform: `translateY(${y}px)`,
+                                height: `${height}px`,
                             }}
                         >
                             <div className="items">

packages/app/src/components/Layout/bottomBar/index.less

@@ -6,7 +6,7 @@
 
 	box-sizing: border-box;
 
-	bottom: @app_bottomBar_height;
+	bottom: var(--bottom-bar-height);
 	left: 0;
 	right: 0;
 
@@ -141,7 +141,7 @@
 
 	display: flex;
 	flex-direction: row;
-	
+
 	align-items: center;
 	justify-content: center;
 
@@ -158,7 +158,7 @@
 	justify-content: center;
 
 	width: 100%;
-	height: @app_bottomBar_height;
+	height: var(--bottom-bar-height);
 
 	overflow: hidden;
 

packages/app/src/components/Layout/quickNav/index.jsx

@@ -0,0 +1,71 @@
+import React from "react"
+import classnames from "classnames"
+import { createIconRender } from "components/Icons"
+
+const QuickNavMenuItems = [
+    {
+        id: "music",
+        icon: "MdAlbum",
+        label: "Music",
+        location: "/music"
+    },
+    {
+        id: "tv",
+        icon: "Tv",
+        label: "Tv",
+        location: "/tv"
+    },
+    {
+        id: "groups",
+        icon: "MdGroups",
+        label: "Groups",
+        location: "/groups",
+        disabled: true,
+    },
+    {
+        id: "marketplace",
+        icon: "Box",
+        label: "Marketplace",
+        location: "/marketplace",
+        disabled: true
+    },
+]
+
+export default ({
+    visible,
+}) => {
+    return <div
+        className={classnames(
+            "quick-nav",
+            {
+                ["active"]: visible
+            }
+        )}
+    >
+        {
+            QuickNavMenuItems.map((item, index) => {
+                return <div
+                    key={index}
+                    className={classnames(
+                        "quick-nav_item",
+                        {
+                            ["disabled"]: item.disabled
+                        }
+                    )}
+                    quicknav-item={item.id}
+                    disabled={item.disabled}
+                >
+                    {
+                        createIconRender(item.icon)
+                    }
+                    <h1>
+
+                        {
+                            item.label
+                        }
+                    </h1>
+                </div>
+            })
+        }
+    </div>
+}

packages/app/src/theme/vars.less

@@ -1,7 +1,3 @@
-@app_bottomBar_height: 80px;
-@app_bottomBar_iconSize: 45px;
-@app_topBar_height: 52px;
-
 @app_sidebar_width: 80px;
 @app_sidebar_width_expanded: 230px;
 
@@ -22,4 +18,7 @@
 
 // Mobile
 @top_bar_height: 52px;
-@top_bar_padding: 10px;
+@top_bar_padding: 10px;
+
+@app_bottomBar_iconSize: 45px;
+@app_topBar_height: 52px;