Skip to content

Commit 2f8b84c

Browse files
nini22Pnini22P
authored
Merge pull request #110 from nini22P/dev
1.8.0
2 parents cacfd72 + 9b230e4 commit 2f8b84c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1295
-879
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "omp",
33
"description": "OneDrive Media Player",
44
"private": true,
5-
"version": "1.7.4",
5+
"version": "1.8.0",
66
"scripts": {
77
"dev": "webpack serve",
88
"build": "webpack --mode=production --node-env=production",

‎src/App.tsx‎

Lines changed: 75 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,40 @@
11
import { Outlet, useLocation } from 'react-router-dom'
2-
import { Container, ThemeProvider, Paper } from '@mui/material'
2+
import { Container, ThemeProvider, Paper, Box, useMediaQuery } from '@mui/material'
33
import Grid from '@mui/material/Unstable_Grid2'
44
import NavBar from './pages/NavBar'
55
import Player from './pages/Player/Player'
66
import SideBar from './pages/SideBar/SideBar'
77
import MobileSideBar from './pages/SideBar/MobileSideBar'
88
import useUser from './hooks/graph/useUser'
9-
import useTheme from './hooks/ui/useTheme'
109
import useSync from './hooks/graph/useSync'
1110
import useThemeColor from './hooks/ui/useThemeColor'
1211
import LogIn from './pages/LogIn'
1312
import useUiStore from './store/useUiStore'
1413
import { useSpring, animated } from '@react-spring/web'
1514
import { useMemo } from 'react'
15+
import useCustomTheme from './hooks/ui/useCustomTheme'
16+
import Search from './pages/Search'
1617

1718
const App = () => {
18-
const theme = useTheme()
19+
const { customTheme, scrollbarStyle } = useCustomTheme()
20+
useThemeColor()
21+
const windowControlsOverlayOpen = useMediaQuery('(display-mode: window-controls-overlay)')
22+
1923
const { account } = useUser()
2024
useSync()
21-
useThemeColor()
2225

2326
const [coverColor] = useUiStore((state) => [state.coverColor])
2427
const [{ background }, api] = useSpring(
2528
() => ({
26-
background: `linear-gradient(45deg, ${coverColor}33, ${coverColor}15, ${coverColor}05, ${theme.palette.background.default})`,
29+
background: `linear-gradient(45deg, ${coverColor}33, ${coverColor}15, ${coverColor}05, ${customTheme.palette.background.default})`,
2730
})
2831
)
2932
useMemo(
3033
() => api.start({
31-
background: `linear-gradient(45deg, ${coverColor}33, ${coverColor}15, ${coverColor}05, ${theme.palette.background.default})`
34+
background: `linear-gradient(45deg, ${coverColor}33, ${coverColor}15, ${coverColor}05, ${customTheme.palette.background.default})`
3235
}),
3336
// eslint-disable-next-line react-hooks/exhaustive-deps
34-
[coverColor, theme.palette.background.default]
37+
[coverColor, customTheme.palette.background.default]
3538
)
3639

3740
const location = useLocation()
@@ -41,76 +44,77 @@ const App = () => {
4144
)
4245

4346
return (
44-
<ThemeProvider theme={theme}>
45-
<animated.div
46-
style={{
47-
width: '100vw',
48-
height: '100dvh',
49-
background: background,
50-
}}
51-
>
52-
<NavBar />
47+
<Box sx={scrollbarStyle}>
48+
<ThemeProvider theme={customTheme}>
49+
<animated.div
50+
style={{
51+
width: '100vw',
52+
height: '100dvh',
53+
background: background,
54+
}}
55+
>
56+
<NavBar />
5357

54-
<Container maxWidth="xl" disableGutters={true} sx={{ height: '100%' }}>
55-
<MobileSideBar />
56-
<Grid container>
57-
<Grid
58-
xs={0}
59-
sm={3}
60-
lg={2}
61-
sx={{
62-
overflowY: 'auto',
63-
display: { xs: 'none', sm: 'block' },
64-
padding: '0 0 0.5rem 0.5rem',
65-
paddingTop: 'calc(env(titlebar-area-height, 3rem) + 0.5rem)',
66-
height: 'calc(100dvh - 4.5rem - env(titlebar-area-height, 2rem))',
67-
}}
68-
>
69-
<SideBar />
70-
</Grid>
71-
<Grid
72-
xs={12}
73-
sm={9}
74-
lg={10}
75-
sx={{
76-
padding: '0 0.5rem 0.5rem 0.5rem',
77-
paddingTop: {
78-
xs: 'calc(env(titlebar-area-height, 3rem) + 0.5rem)',
79-
sm: 'calc(env(titlebar-area-height, 0rem) + 0.5rem)'
80-
},
81-
height: 'calc(100dvh - 4.5rem - env(titlebar-area-height, 2rem))',
82-
}}
83-
>
84-
<Paper
58+
<Container maxWidth="xl" disableGutters={true} sx={{ height: '100%' }}>
59+
<MobileSideBar />
60+
<Grid container>
61+
{/* 侧栏 */}
62+
<Grid
63+
xs={0}
64+
sm={3}
65+
lg={2}
8566
sx={{
86-
width: '100%',
87-
height: '100%',
88-
overflowY: 'auto',
89-
backgroundColor: `${theme.palette.background.paper}99`,
90-
'& ::-webkit-scrollbar': {
91-
width: '12px',
92-
height: '12px',
93-
},
94-
'& ::-webkit-scrollbar-track': {
95-
backgroundColor: 'transparent',
96-
},
97-
'& ::-webkit-scrollbar-thumb': {
98-
background: theme.palette.primary.main,
99-
borderRadius: '16px',
100-
border: '3.5px solid transparent',
101-
backgroundClip: 'content-box',
67+
// overflowY: 'auto',
68+
display: { xs: 'none', sm: 'block' },
69+
padding: '0 0 0.5rem 0.5rem',
70+
paddingTop: 'calc(env(titlebar-area-height, 3rem) + 0.5rem)',
71+
height: 'calc(100dvh - 4.5rem - env(titlebar-area-height, 4.5rem))',
72+
}}
73+
>
74+
{
75+
<Box sx={{
76+
height: '2.5rem',
77+
padding: '0.25rem',
78+
display: windowControlsOverlayOpen ? 'none' : 'block',
79+
}}
80+
>
81+
<Search type='bar' />
82+
</Box>
83+
}
84+
<SideBar />
85+
</Grid>
86+
87+
{/* 主体内容 */}
88+
<Grid
89+
xs={12}
90+
sm={9}
91+
lg={10}
92+
sx={{
93+
padding: '0 0.5rem 0.5rem 0.5rem',
94+
paddingTop: {
95+
xs: 'calc(env(titlebar-area-height, 3rem) + 0.5rem)',
96+
sm: 'calc(env(titlebar-area-height, 0rem) + 0.5rem)'
10297
},
103-
}}>
104-
{needLogin ? <LogIn /> : <Outlet />}
105-
</Paper>
98+
height: 'calc(100dvh - 4.5rem - env(titlebar-area-height, 2rem))',
99+
}}
100+
>
101+
<Paper
102+
sx={{
103+
width: '100%',
104+
height: '100%',
105+
overflowY: 'auto',
106+
}}>
107+
{needLogin ? <LogIn /> : <Outlet />}
108+
</Paper>
109+
</Grid>
106110
</Grid>
107-
</Grid>
108-
</Container>
111+
</Container>
109112

110-
<Player />
113+
<Player />
111114

112-
</animated.div>
113-
</ThemeProvider>
115+
</animated.div>
116+
</ThemeProvider>
117+
</Box>
114118
)
115119
}
116120

0 commit comments

Comments
 (0)