nini22P · nini22P · Nov 17, 2023 · Nov 17, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,61 +2,60 @@
   "name": "omp",
   "description": "OneDrive Media Player",
   "private": true,
-  "version": "1.2.3",
+  "version": "1.2.4",
   "scripts": {
     "dev": "webpack serve",
     "build": "webpack --mode=production --node-env=production",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "watch": "webpack --watch"
   },
   "dependencies": {
-    "@azure/msal-browser": "^3.2.0",
-    "@azure/msal-react": "^2.0.4",
+    "@azure/msal-browser": "^3.5.0",
+    "@azure/msal-react": "^2.0.7",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
-    "@mui/icons-material": "^5.14.14",
-    "@mui/material": "^5.14.14",
+    "@mui/icons-material": "^5.14.18",
+    "@mui/material": "^5.14.18",
     "buffer": "^6.0.3",
     "extract-colors": "^4.0.2",
-    "i18next": "^23.6.0",
-    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next": "^23.7.6",
+    "i18next-browser-languagedetector": "^7.2.0",
     "music-metadata-browser": "^2.5.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.3.1",
-    "react-router-dom": "^6.17.0",
+    "react-i18next": "^13.5.0",
+    "react-router-dom": "^6.19.0",
     "short-uuid": "^4.2.2",
     "swr": "^2.2.4",
-    "zustand": "^4.4.3"
+    "zustand": "^4.4.6"
   },
   "devDependencies": {
-    "@swc/core": "^1.3.93",
-    "@types/extract-colors": "^1.1.3",
-    "@types/node": "^20.8.7",
-    "@types/react": "^18.2.30",
-    "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
+    "@swc/core": "^1.3.96",
+    "@types/extract-colors": "^1.1.4",
+    "@types/node": "^20.9.1",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
     "autoprefixer": "^10.4.16",
     "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "dotenv-webpack": "^8.0.1",
-    "eslint": "^8.51.0",
+    "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-react-refresh": "^0.4.4",
     "html-webpack-plugin": "^5.5.3",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
-    "prettier": "^3.0.3",
     "style-loader": "^3.3.3",
     "swc-loader": "^0.2.3",
-    "ts-loader": "^9.5.0",
     "typescript": "^5.2.2",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.10.0",
     "workbox-webpack-plugin": "^7.0.0"
   }
 }
diff --git a/public/manifest.json b/public/manifest.json
@@ -3,10 +3,12 @@
   "short_name": "OMP",
   "start_url": ".",
   "display": "standalone",
+  "display_override": [
+    "window-controls-overlay"
+  ],
   "description": "OneDrive Media Player",
   "dir": "auto",
   "orientation": "any",
-  "theme_color": "#1e1e1e",
   "icons": [
     {
       "src": "./favicon.ico",

diff --git a/src/App.tsx b/src/App.tsx
@@ -10,19 +10,21 @@ import MobileSideBar from './pages/SideBar/MobileSideBar'
 import useUser from './hooks/useUser'
 import useTheme from './hooks/useTheme'
 import useSync from './hooks/useSync'
+import useThemeColor from './hooks/useThemeColor'
 
 const App = () => {
   const { t } = useTranslation()
   const { theme } = useTheme()
   const { accounts, login } = useUser()
   useSync(accounts)
+  useThemeColor()
 
   return (
     <main>
       <ThemeProvider theme={theme}>
         <NavBar accounts={accounts} />
         <AuthenticatedTemplate>
-          <Box sx={{ position: 'absolute', height: 'calc(100dvh - 6rem - 4rem)', width: '100%', top: '4rem', }}>
+          <Box sx={{ position: 'absolute', height: 'calc(100dvh - 6rem - env(titlebar-area-height, 3rem))', width: '100%', top: 'env(titlebar-area-height, 3rem)', }}>
             <Container maxWidth="xl" disableGutters={true} sx={{ height: '100%' }}>
               <MobileSideBar />
               <Grid container flexDirection={'row'} height={'100%'}  >

diff --git a/src/components/CommonList/CommonList.tsx b/src/components/CommonList/CommonList.tsx
@@ -41,10 +41,10 @@ const CommonList = (
 
   // 打开播放队列时滚动到当前播放文件
   useEffect(() => {
-    isPlayQueueView && document.getElementById('playing-item')?.scrollIntoView({behavior: 'auto', block: 'center'})
+    isPlayQueueView && document.getElementById('playing-item')?.scrollIntoView({ behavior: 'auto', block: 'center' })
   },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   )
 
   const handleClickMenu = (event: React.MouseEvent<HTMLElement>, currentFile: File) => {
@@ -144,7 +144,7 @@ const CommonList = (
             <Grid key={index} lg={multiColumn ? 4 : 12} md={multiColumn ? 6 : 12} sm={12} xs={12} p={0} >
               <ListItem
                 disablePadding
-                id = {(item as PlayQueueItem).index === currentIndex ? 'playing-item' : ''}
+                id={(item as PlayQueueItem).index === currentIndex ? 'playing-item' : ''}
                 sx={{
                   '& .MuiListItemButton-root': {
                     paddingLeft: 3,

diff --git a/src/hooks/useThemeColor.ts b/src/hooks/useThemeColor.ts
@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import useUiStore from '../store/useUiStore'
+const useThemeColor = () => {
+  const [audioViewIsShow, videoViewIsShow] = useUiStore((state) => [state.audioViewIsShow, state.videoViewIsShow])
+
+  useEffect(() => {
+    const themeColorLight = document.getElementById('themeColorLight') as HTMLMetaElement
+    const themeColorDark = document.getElementById('themeColorDark') as HTMLMetaElement
+
+    if (themeColorLight && themeColorDark) {
+      if (audioViewIsShow || videoViewIsShow) {
+        themeColorLight.content = '#1e1e1e'
+        themeColorDark.content = '#1e1e1e'
+      } else {
+        themeColorLight.content = '#ffffff'
+        themeColorDark.content = '#121212'
+      }
+    }
+  },
+    [audioViewIsShow, videoViewIsShow]
+  )
+}
+
+export default useThemeColor
diff --git a/src/index.css b/src/index.css
@@ -15,4 +15,24 @@
 
 a {
   text-decoration: inherit;
+}
+
+.app-region-drag {
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+.app-region-no-drag {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+.pt-titlebar-area-height {
+  padding-top: 0 !important;
+}
+
+@media (display-mode: window-controls-overlay) {
+  .pt-titlebar-area-height {
+    padding-top: env(titlebar-area-height, 32) !important;
+  }
 }
diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,8 @@
   <link rel="apple-touch-icon" href="./apple-touch-icon.png">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="manifest" href="./manifest.json" />
+  <meta id="themeColorLight" name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+  <meta id="themeColorDark" name="theme-color" media="(prefers-color-scheme: dark)" content="#121212" />
   <title>OMP</title>
   <meta name="description" content="OneDrive Media Player" />
   <meta property="og:site_name" content="OMP" />

diff --git a/src/pages/NavBar.tsx b/src/pages/NavBar.tsx
@@ -20,19 +20,29 @@ const NavBar = ({ accounts }: { accounts: AccountInfo[] }) => {
         top: 0,
         left: 0,
         width: '100%',
-        boxShadow: `0px 4px 4px -2px ${styles.color.shadow}`,
+        outline: `1px solid ${styles.color.shadow}`
       }}
+      className='app-region-drag'
     >
       <Container maxWidth={'xl'} disableGutters={true}>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '4rem', pl: 1, pr: 1 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            left: 'env(titlebar-area-x, 0)',
+            height: 'env(titlebar-area-height, 3rem)',
+            pl: 1,
+            pr: 1
+          }}>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} >
             {
               (accounts.length !== 0) &&
               <IconButton onClick={() => updateMobileSideBarOpen(!mobileSideBarOpen)} sx={{ display: { xs: '', sm: 'none' } }}>
                 <MenuOutlinedIcon />
               </IconButton>
             }
-            <img src='./logo.svg' alt='logo' style={{ height: '1.5rem', marginLeft: '0.5rem', marginRight: '0.8rem' }} ></img>
+            <img src='./logo.svg' alt='logo' style={{ height: '1.25rem', marginLeft: '0.6rem', marginRight: '0.75rem' }} ></img>
             <Typography variant="h6" component="div" >
               OMP
             </Typography>

diff --git a/src/pages/Player/Audio.tsx b/src/pages/Player/Audio.tsx
@@ -88,7 +88,11 @@ const Audio = (
       style={(audioViewIsShow) ? { top: 0 } : { top: '100vh' }}
     >
       <Box sx={{ backdropFilter: (noBackground || cover === './cover.png') ? '' : 'blur(30px)' }}>
-        <Container maxWidth={'xl'} disableGutters={true}>
+        <Container
+          maxWidth={'xl'}
+          disableGutters={true}
+          className='pt-titlebar-area-height'
+        >
           <Grid container
             pt={{ xs: 1, sm: 2 }}
             pb={{ xs: 1, sm: 2 }}
@@ -101,21 +105,36 @@ const Audio = (
               alignItems: 'start',
             }}
           >
-
             <Grid xs={6} pl={{ xs: 1, sm: 0 }} >
-              <IconButton aria-label="close" onClick={() => updateAudioViewIsShow(false)} >
+              <IconButton
+                aria-label="close"
+                onClick={() => updateAudioViewIsShow(false)}
+                className='app-region-no-drag'
+              >
                 <KeyboardArrowDownOutlinedIcon style={{ color: '#fff' }} />
               </IconButton>
             </Grid>
 
             <Grid xs={6} pr={{ xs: 1, sm: 0 }} textAlign={'right'}>
-              <IconButton aria-label="PlayQueue" onClick={() => updatePlayQueueIsShow(true)} >
+              <IconButton
+                aria-label="PlayQueue"
+                onClick={() => updatePlayQueueIsShow(true)}
+                className='app-region-no-drag'
+              >
                 <QueueMusicOutlinedIcon style={{ color: '#fff' }} />
               </IconButton>
-              <IconButton aria-label="NoBackground" onClick={() => setNoBackground(!noBackground)} >
+              <IconButton
+                aria-label="NoBackground"
+                onClick={() => setNoBackground(!noBackground)}
+                className='app-region-no-drag'
+              >
                 <PanoramaOutlinedIcon style={noBackground ? { color: '#aaa' } : { color: '#fff' }} />
               </IconButton>
-              <IconButton aria-label="Full" onClick={() => handleClickFullscreen()}>
+              <IconButton
+                aria-label="Full"
+                onClick={() => handleClickFullscreen()}
+                className='app-region-no-drag'
+              >
                 {
                   fullscreen
                     ? <CloseFullscreenIcon style={{ height: 20, width: 20, color: '#fff' }} />

diff --git a/src/pages/Player/PlayQueue.tsx b/src/pages/Player/PlayQueue.tsx
@@ -17,13 +17,13 @@ const PlayQueue = () => {
       onClose={() => updatePlayQueueIsShow(false)}
       elevation={0}
     >
-      <Grid container wrap='nowrap' height={'100dvh'} width={{ xs: '100vw', sm: '400px', md: '500px' }} >
-        <Grid height={'100dvh'}>
+      <Grid container wrap='nowrap' height={'100dvh'} width={{ xs: '100vw', sm: '400px', md: '500px' }}>
+        <Grid height={'100%'} className='app-region-no-drag'>
           <Button sx={{ height: '100dvh' }} onClick={() => updatePlayQueueIsShow(false)}>
             <KeyboardArrowRightOutlinedIcon />
           </Button>
         </Grid>
-        <Grid xs sx={{ height: '100dvh', overflowY: 'auto' }}>
+        <Grid xs sx={{ height: '100%', overflowY: 'auto' }} className='pt-titlebar-area-height app-region-no-drag'>
           {
             playQueue &&
             <CommonList

diff --git a/src/pages/Player/Player.tsx b/src/pages/Player/Player.tsx
@@ -356,7 +356,8 @@ const Player = () => {
             justifyContent: 'center',
             alignItems: 'start',
             backgroundColor: '#000'
-          }}>
+          }}
+        >
           <Grid xs={12} sx={{ width: '100%', height: '100%' }}>
             <video
               width={'100%'}
@@ -373,11 +374,16 @@ const Player = () => {
           <Grid xs={12}
             position={'absolute'}
             sx={controlIsShow ? { top: 0, left: 0, borderRadius: '0 0 5px 0', width: 'auto' } : { display: 'none' }}
+            className='pt-titlebar-area-height'
           >
-            <IconButton aria-label="close" onClick={() => {
-              updateVideoViewIsShow(false)
-              updateControlIsShow(true)
-            }} >
+            <IconButton
+              aria-label="close"
+              onClick={() => {
+                updateVideoViewIsShow(false)
+                updateControlIsShow(true)
+              }}
+              className='app-region-no-drag'
+            >
               <KeyboardArrowDownOutlinedIcon sx={{ color: '#fff' }} />
             </IconButton>
           </Grid>
@@ -388,7 +394,7 @@ const Player = () => {
       <Paper
         elevation={0}
         square={true}
-        sx={{ position: 'fixed', bottom: '0', width: '100%', boxShadow: `0px -4px 4px -2px ${styles.color.shadow}` }}
+        sx={{ position: 'fixed', bottom: '0', width: '100%', boxShadow: `0px -2px 2px -1px ${styles.color.shadow}` }}
       // style={(videoViewIsShow) ? { backgroundColor: '#ffffffee' } : { backgroundColor: '#ffffff' }}
       >
         <Container maxWidth={false} disableGutters={true}>