fix some bugs

nini22P · Jan 1, 2024 · 11f62a8 · 11f62a8
1 parent 2d43395
commit 11f62a8
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/src/hooks/graph/useUser.ts b/src/hooks/graph/useUser.ts
@@ -20,8 +20,9 @@ const useUser = () => {
     usePlayQueueStore.persist.clearStorage()
     useUiStore.persist.clearStorage()
     instance.logoutRedirect({
-      postLogoutRedirectUri: '/'
+      postLogoutRedirectUri: '/',
     })
+    location.reload()
   }
 
   const account: AccountInfo | null = accounts[0] || null

diff --git a/src/hooks/ui/useThemeColor.ts b/src/hooks/ui/useThemeColor.ts
@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import useUiStore from '../../store/useUiStore'
 import useTheme from './useTheme'
 import { blendHex } from '@/utils'
+import { useMediaQuery } from '@mui/material'
 const useThemeColor = () => {
 
   const [
@@ -20,6 +21,8 @@ const useThemeColor = () => {
 
   const theme = useTheme()
 
+  const windowControlsOverlayOpen = useMediaQuery('(display-mode: window-controls-overlay)')
+
   useEffect(
     () => {
       const themeColorLight = document.getElementById('themeColorLight') as HTMLMetaElement
@@ -35,13 +38,14 @@ const useThemeColor = () => {
           themeColorDark.content = '#1e1e1e'
         }
         else if (audioViewIsShow && audioViewTheme === 'modern') {
-          const color = blendHex(`${theme.palette.background.default}`, `${coverColor}33`)
+
+          const color = blendHex(`${theme.palette.background.default}`, windowControlsOverlayOpen ? `${coverColor}30` : `${coverColor}33`)
           themeColorLight.content = color
           themeColorDark.content = color
         }
       }
     },
-    [audioViewIsShow, audioViewTheme, coverColor, theme.palette.background.default, videoViewIsShow]
+    [audioViewIsShow, audioViewTheme, coverColor, theme.palette.background.default, videoViewIsShow, windowControlsOverlayOpen]
   )
 
 }

diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
@@ -12,7 +12,7 @@
     "openSourceDependencies": "开源库"
   },
   "account": {
-    "account": "账号",
+    "account": "账户",
     "signIn": "登录",
     "signOut": "注销",
     "signInAlert": "请使用微软账户授权登录"

diff --git a/src/pages/NavBar.tsx b/src/pages/NavBar.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, Container, IconButton } from '@mui/material'
+import { Box, Typography, Container, IconButton, useMediaQuery } from '@mui/material'
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded'
 import useUiStore from '../store/useUiStore'
 import useUser from '@/hooks/graph/useUser'
@@ -8,6 +8,7 @@ const NavBar = () => {
   const [mobileSideBarOpen, updateMobileSideBarOpen] = useUiStore(
     (state) => [state.mobileSideBarOpen, state.updateMobileSideBarOpen]
   )
+  const windowControlsOverlayOpen = useMediaQuery('(display-mode: window-controls-overlay)')
 
   return (
     <Box
@@ -28,7 +29,7 @@ const NavBar = () => {
           justifyContent: 'flex-start',
           alignItems: 'center',
           height: '100%',
-          px: { xs: '0.5rem', sm: 'calc(env(titlebar-area-height, 1.25rem) - env(titlebar-area-height, 0rem) + 0.25rem)' },
+          px: { xs: '0.5rem', sm: windowControlsOverlayOpen ? '0.25rem' : '1.5rem' },
           py: 'calc(env(titlebar-area-height, 0.5rem) - env(titlebar-area-height, 0rem) + 0.25rem)',
         }}
       >
@@ -47,12 +48,12 @@ const NavBar = () => {
           alt='logo'
           style={{
             height: '100%',
-            marginRight: 'calc(env(titlebar-area-height, 0.5rem) - env(titlebar-area-height, 0rem) + 0.125rem)',
+            marginRight: windowControlsOverlayOpen ? '0.125rem' : '0.6125rem',
           }}
         />
         <Typography
           component="div"
-          fontSize={'calc(env(titlebar-area-height, 0.25rem) - env(titlebar-area-height, 0rem) + 1rem)'}
+          fontSize={windowControlsOverlayOpen ? '1rem' : '1.25rem'}
         >
           OMP
         </Typography>