Merge pull request #110 from nini22P/dev

1.8.0
nini22P · Jun 26, 2024 · 2f8b84c · 2f8b84c
2 parents cacfd72 + 9b230e4
commit 2f8b84c
Show file tree

Hide file tree

Showing 47 changed files with 1,295 additions and 879 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "omp",
   "description": "OneDrive Media Player",
   "private": true,
-  "version": "1.7.4",
+  "version": "1.8.0",
   "scripts": {
     "dev": "webpack serve",
     "build": "webpack --mode=production --node-env=production",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,37 +1,40 @@
 import { Outlet, useLocation } from 'react-router-dom'
-import { Container, ThemeProvider, Paper } from '@mui/material'
+import { Container, ThemeProvider, Paper, Box, useMediaQuery } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2'
 import NavBar from './pages/NavBar'
 import Player from './pages/Player/Player'
 import SideBar from './pages/SideBar/SideBar'
 import MobileSideBar from './pages/SideBar/MobileSideBar'
 import useUser from './hooks/graph/useUser'
-import useTheme from './hooks/ui/useTheme'
 import useSync from './hooks/graph/useSync'
 import useThemeColor from './hooks/ui/useThemeColor'
 import LogIn from './pages/LogIn'
 import useUiStore from './store/useUiStore'
 import { useSpring, animated } from '@react-spring/web'
 import { useMemo } from 'react'
+import useCustomTheme from './hooks/ui/useCustomTheme'
+import Search from './pages/Search'
 
 const App = () => {
-  const theme = useTheme()
+  const { customTheme, scrollbarStyle } = useCustomTheme()
+  useThemeColor()
+  const windowControlsOverlayOpen = useMediaQuery('(display-mode: window-controls-overlay)')
+
   const { account } = useUser()
   useSync()
-  useThemeColor()
 
   const [coverColor] = useUiStore((state) => [state.coverColor])
   const [{ background }, api] = useSpring(
     () => ({
-      background: `linear-gradient(45deg, ${coverColor}33, ${coverColor}15, ${coverColor}05, ${theme.palette.background.default})`,
+      background: `linear-gradient(45deg, ${coverColor}33, ${coverColor}15, ${coverColor}05, ${customTheme.palette.background.default})`,
     })
   )
   useMemo(
     () => api.start({
-      background: `linear-gradient(45deg, ${coverColor}33, ${coverColor}15, ${coverColor}05, ${theme.palette.background.default})`
+      background: `linear-gradient(45deg, ${coverColor}33, ${coverColor}15, ${coverColor}05, ${customTheme.palette.background.default})`
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [coverColor, theme.palette.background.default]
+    [coverColor, customTheme.palette.background.default]
   )
 
   const location = useLocation()
@@ -41,76 +44,77 @@ const App = () => {
   )
 
   return (
-    <ThemeProvider theme={theme}>
-      <animated.div
-        style={{
-          width: '100vw',
-          height: '100dvh',
-          background: background,
-        }}
-      >
-        <NavBar />
+    <Box sx={scrollbarStyle}>
+      <ThemeProvider theme={customTheme}>
+        <animated.div
+          style={{
+            width: '100vw',
+            height: '100dvh',
+            background: background,
+          }}
+        >
+          <NavBar />
 
-        <Container maxWidth="xl" disableGutters={true} sx={{ height: '100%' }}>
-          <MobileSideBar />
-          <Grid container>
-            <Grid
-              xs={0}
-              sm={3}
-              lg={2}
-              sx={{
-                overflowY: 'auto',
-                display: { xs: 'none', sm: 'block' },
-                padding: '0 0 0.5rem 0.5rem',
-                paddingTop: 'calc(env(titlebar-area-height, 3rem) + 0.5rem)',
-                height: 'calc(100dvh - 4.5rem - env(titlebar-area-height, 2rem))',
-              }}
-            >
-              <SideBar />
-            </Grid>
-            <Grid
-              xs={12}
-              sm={9}
-              lg={10}
-              sx={{
-                padding: '0 0.5rem 0.5rem 0.5rem',
-                paddingTop: {
-                  xs: 'calc(env(titlebar-area-height, 3rem) + 0.5rem)',
-                  sm: 'calc(env(titlebar-area-height, 0rem) + 0.5rem)'
-                },
-                height: 'calc(100dvh - 4.5rem - env(titlebar-area-height, 2rem))',
-              }}
-            >
-              <Paper
+          <Container maxWidth="xl" disableGutters={true} sx={{ height: '100%' }}>
+            <MobileSideBar />
+            <Grid container>
+              {/* 侧栏 */}
+              <Grid
+                xs={0}
+                sm={3}
+                lg={2}
                 sx={{
-                  width: '100%',
-                  height: '100%',
-                  overflowY: 'auto',
-                  backgroundColor: `${theme.palette.background.paper}99`,
-                  '& ::-webkit-scrollbar': {
-                    width: '12px',
-                    height: '12px',
-                  },
-                  '& ::-webkit-scrollbar-track': {
-                    backgroundColor: 'transparent',
-                  },
-                  '& ::-webkit-scrollbar-thumb': {
-                    background: theme.palette.primary.main,
-                    borderRadius: '16px',
-                    border: '3.5px solid transparent',
-                    backgroundClip: 'content-box',
+                  // overflowY: 'auto',
+                  display: { xs: 'none', sm: 'block' },
+                  padding: '0 0 0.5rem 0.5rem',
+                  paddingTop: 'calc(env(titlebar-area-height, 3rem) + 0.5rem)',
+                  height: 'calc(100dvh - 4.5rem - env(titlebar-area-height, 4.5rem))',
+                }}
+              >
+                {
+                  <Box sx={{
+                    height: '2.5rem',
+                    padding: '0.25rem',
+                    display: windowControlsOverlayOpen ? 'none' : 'block',
+                  }}
+                  >
+                    <Search type='bar' />
+                  </Box>
+                }
+                <SideBar />
+              </Grid>
+
+              {/* 主体内容 */}
+              <Grid
+                xs={12}
+                sm={9}
+                lg={10}
+                sx={{
+                  padding: '0 0.5rem 0.5rem 0.5rem',
+                  paddingTop: {
+                    xs: 'calc(env(titlebar-area-height, 3rem) + 0.5rem)',
+                    sm: 'calc(env(titlebar-area-height, 0rem) + 0.5rem)'
                   },
-                }}>
-                {needLogin ? <LogIn /> : <Outlet />}
-              </Paper>
+                  height: 'calc(100dvh - 4.5rem - env(titlebar-area-height, 2rem))',
+                }}
+              >
+                <Paper
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                    overflowY: 'auto',
+                  }}>
+                  {needLogin ? <LogIn /> : <Outlet />}
+                </Paper>
+              </Grid>
             </Grid>
-          </Grid>
-        </Container>
+          </Container>
 
-        <Player />
+          <Player />
 
-      </animated.div>
-    </ThemeProvider>
+        </animated.div>
+      </ThemeProvider>
+    </Box>
   )
 }