From 08eff67d2f462b5b99f25260e856a502966b2722 Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Thu, 27 Jun 2024 14:30:44 +0800
Subject: [PATCH 1/6] improve interface

---
 src/hooks/ui/useCustomTheme.ts         |  6 +++
 src/hooks/ui/useThemeColor.ts          |  2 +-
 src/index.css                          | 11 ++---
 src/pages/NavBar.tsx                   | 11 ++++-
 src/pages/Player/Audio/Audio.tsx       |  4 +-
 src/pages/Player/PlayQueue.tsx         | 24 +++++------
 src/pages/Player/Player.tsx            | 38 ++++++++++-------
 src/pages/Player/PlayerControl.tsx     | 16 ++++---
 src/pages/Player/VideoPlayer.tsx       | 31 --------------
 src/pages/Player/VideoPlayerTopbar.tsx | 58 ++++++++++++++++++++++++++
 src/pages/Search.tsx                   | 10 ++---
 11 files changed, 130 insertions(+), 81 deletions(-)
 create mode 100644 src/pages/Player/VideoPlayerTopbar.tsx

diff --git a/src/hooks/ui/useCustomTheme.ts b/src/hooks/ui/useCustomTheme.ts
index 1ab45a8..82fb40d 100644
--- a/src/hooks/ui/useCustomTheme.ts
+++ b/src/hooks/ui/useCustomTheme.ts
@@ -176,6 +176,12 @@ const useCustomTheme = () => {
           paper: {
             border: `${prefersDarkMode ? '#f7f7f722' : '#3b3b3b22'} solid 1px`,
             boxShadow: `5px 5px 10px 0px ${prefersDarkMode ? '#f7f7f722' : '#3b3b3b22'}`,
+          },
+          root: {
+            ' .MuiBackdrop-root': {
+              background: `${prefersDarkMode ? '#121212' : '#ffffff'}33`,
+              backdropFilter: 'blur(0.5px)',
+            },
           }
         }
       },
diff --git a/src/hooks/ui/useThemeColor.ts b/src/hooks/ui/useThemeColor.ts
index 13d83da..a36c1b3 100644
--- a/src/hooks/ui/useThemeColor.ts
+++ b/src/hooks/ui/useThemeColor.ts
@@ -33,7 +33,7 @@ const useThemeColor = () => {
           themeColorLight.content = customTheme.palette.background.default
           themeColorDark.content = customTheme.palette.background.default
         }
-        else if (audioViewIsShow && audioViewTheme === 'classic' || videoViewIsShow) {
+        else if (audioViewIsShow && audioViewTheme === 'classic') {
           themeColorLight.content = '#1e1e1e'
           themeColorDark.content = '#1e1e1e'
         }
diff --git a/src/index.css b/src/index.css
index 3e22567..0738147 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,6 +23,9 @@ html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   font-family: Roboto, Helvetica, Arial, sans-serif;
+  --custom-titlebar-height: 32px;
+  --titlebar-height: env(titlebar-area-height, var(--custom-titlebar-height));
+  --titlebar-center-safe-width: calc((50dvw - (100dvw - env(titlebar-area-x) - env(titlebar-area-width))) * 2)
 }
 
 :root[data-theme="light"] {
@@ -50,13 +53,7 @@ a {
 }
 
 .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;
-  }
+  padding-top: env(titlebar-area-height, 0) !important;
 }
 
 .show-scrollbar::-webkit-scrollbar-thumb {
diff --git a/src/pages/NavBar.tsx b/src/pages/NavBar.tsx
index 45705af..76f9c79 100644
--- a/src/pages/NavBar.tsx
+++ b/src/pages/NavBar.tsx
@@ -54,7 +54,14 @@ const NavBar = () => {
             justifyContent: { xs: 'flex-end', sm: windowControlsOverlayOpen ? 'flex-end' : 'center', md: 'center' }
           }}
         >
-          <Box sx={{ width: { xs: 'none', sm: '40%' } }} className={(audioViewIsShow || videoViewIsShow) ? 'app-region-drag' : 'app-region-no-drag'}>
+          <Box
+            sx={{
+              width: { xs: 'none', sm: '40%' },
+              maxWidth: { xs: 'auto', sm: 'var(--titlebar-center-safe-width)' },
+              height: { xs: 'auto', sm: '70%' },
+            }}
+            className={(audioViewIsShow || videoViewIsShow) ? 'app-region-drag' : 'app-region-no-drag'}
+          >
             <Search type={sm ? 'bar' : 'icon'} />
           </Box>
         </Box>
@@ -90,7 +97,7 @@ const NavBar = () => {
           />
           <Typography
             component="div"
-            fontSize={windowControlsOverlayOpen ? '1rem' : '1.25rem'}
+            fontSize={windowControlsOverlayOpen ? '100%' : '1.25rem'}
           >
             OMP
           </Typography>
diff --git a/src/pages/Player/Audio/Audio.tsx b/src/pages/Player/Audio/Audio.tsx
index 5b16381..8be144d 100644
--- a/src/pages/Player/Audio/Audio.tsx
+++ b/src/pages/Player/Audio/Audio.tsx
@@ -75,9 +75,10 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
     <animated.div
       {...bind()}
       style={{
+        position: 'fixed',
+        width: '100%',
         maxWidth: '100%',
         maxHeight: '100dvh',
-        position: 'fixed',
         top: top,
         left: leftRightbottom,
         right: leftRightbottom,
@@ -88,7 +89,6 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
       {audioViewTheme === 'classic' && <Classic player={player} styles={{ borderRadius: borderRadius }} />}
       {audioViewTheme === 'modern' && <Modern player={player} styles={{ borderRadius: borderRadius }} />}
     </animated.div>
-
   )
 }
 
diff --git a/src/pages/Player/PlayQueue.tsx b/src/pages/Player/PlayQueue.tsx
index e8d9714..b5806c0 100644
--- a/src/pages/Player/PlayQueue.tsx
+++ b/src/pages/Player/PlayQueue.tsx
@@ -1,5 +1,4 @@
-import { Button, Drawer } from '@mui/material'
-import Grid from '@mui/material/Unstable_Grid2'
+import { Box, Button, Drawer, useTheme } from '@mui/material'
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'
 import usePlayQueueStore from '@/store/usePlayQueueStore'
 import useUiStore from '@/store/useUiStore'
@@ -10,6 +9,7 @@ import useCustomTheme from '@/hooks/ui/useCustomTheme'
 const PlayQueue = () => {
 
   const { scrollbarStyle } = useCustomTheme()
+  const theme = useTheme()
 
   const [
     currentIndex,
@@ -54,18 +54,13 @@ const PlayQueue = () => {
       onClose={() => updatePlayQueueIsShow(false)}
       sx={{
         '& .MuiDrawer-paper': {
-          width: { xs: 'calc(100vw - 0.5rem)', sm: '400px', md: '500px' }
+          width: { xs: 'calc(100vw - 0.5rem)', sm: '400px' }
         },
         ...scrollbarStyle
       }}
     >
-      <Grid container wrap='nowrap' height={'100%'} >
-        <Grid height={'100%'}>
-          <Button sx={{ height: '100%' }} onClick={() => updatePlayQueueIsShow(false)}>
-            <KeyboardArrowRightRoundedIcon />
-          </Button>
-        </Grid>
-        <Grid xs sx={{ height: '100%', overflowY: 'auto' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', }} >
+        <Box sx={{ overflowY: 'auto', flexGrow: 1 }}>
           {
             playQueue &&
             <CommonList
@@ -76,8 +71,13 @@ const PlayQueue = () => {
               func={{ open, remove }}
             />
           }
-        </Grid>
-      </Grid>
+        </Box>
+        <Box sx={{ width: '100%', flexGrow: 0, borderTop: `1px solid ${theme.palette.divider}` }}>
+          <Button fullWidth size='large' onClick={() => updatePlayQueueIsShow(false)}>
+            <KeyboardArrowRightRoundedIcon />
+          </Button>
+        </Box>
+      </Box>
     </Drawer>
   )
 }
diff --git a/src/pages/Player/Player.tsx b/src/pages/Player/Player.tsx
index a510ee7..932a3bb 100644
--- a/src/pages/Player/Player.tsx
+++ b/src/pages/Player/Player.tsx
@@ -1,5 +1,5 @@
 import { useRef } from 'react'
-import { Box, Container } from '@mui/material'
+import { Box } from '@mui/material'
 import useUiStore from '@/store/useUiStore'
 import useMediaSession from '@/hooks/player/useMediaSession'
 import usePlayerCore from '@/hooks/player/usePlayerCore'
@@ -7,10 +7,17 @@ import VideoPlayer from './VideoPlayer'
 import Audio from './Audio/Audio'
 import PlayerControl from './PlayerControl'
 import PlayQueue from './PlayQueue'
+import VideoPlayerTopbar from './VideoPlayerTopbar'
 
 const Player = () => {
 
-  const controlIsShow = useUiStore((state) => state.controlIsShow)
+  const [
+    controlIsShow,
+  ] = useUiStore(
+    (state) => [
+      state.controlIsShow,
+    ]
+  )
 
   const playerRef = useRef<HTMLVideoElement>(null)
   const player = playerRef.current   // 声明播放器对象
@@ -23,20 +30,21 @@ const Player = () => {
   return (
     <>
       <VideoPlayer url={url} onEnded={onEnded} ref={playerRef} />
-      <Box sx={{ position: 'fixed', bottom: '0', width: '100%' }}>
-        <Container maxWidth={'xl'} disableGutters>
-          <Box
-            sx={{
-              padding: '0 0.5rem 0.5rem 0.5rem',
-              visibility: controlIsShow ? 'visible' : 'hidden',
-            }}
-          >
-            <PlayerControl player={player} />
-          </Box>
-          <Audio player={player} />
-          <PlayQueue />
-        </Container>
+      <VideoPlayerTopbar />
+      <Box
+        sx={{
+          position: 'fixed',
+          padding: '0 0.5rem 0.5rem 0.5rem',
+          transform: controlIsShow ? 'none' : 'translateY(8rem)',
+          transition: 'all 0.2s ease-out',
+          bottom: 0,
+          width: '100%',
+        }}
+      >
+        <PlayerControl player={player} />
       </Box>
+      <Audio player={player} />
+      <PlayQueue />
     </>
   )
 }
diff --git a/src/pages/Player/PlayerControl.tsx b/src/pages/Player/PlayerControl.tsx
index d934491..465c964 100644
--- a/src/pages/Player/PlayerControl.tsx
+++ b/src/pages/Player/PlayerControl.tsx
@@ -91,7 +91,7 @@ const PlayerControl = ({ player }: { player: HTMLVideoElement | null }) => {
   const { handleClickFullscreen } = useFullscreen()
 
   const currentFile = playQueue?.find(item => item.index === currentIndex)
-  const type = useMemo(() => currentFile && checkFileType(currentFile.fileName), [currentFile])
+  const type = useMemo(() => currentFile && checkFileType(currentFile.fileName) === 'video' ? 'video' : 'audio', [currentFile])
 
   const handleClickMediaInfo = () => {
     if (type === 'audio')
@@ -118,8 +118,14 @@ const PlayerControl = ({ player }: { player: HTMLVideoElement | null }) => {
   )
 
   return (
-    <Paper sx={{ backgroundColor: `${theme.palette.background.paper}cc`, backdropFilter: 'blur(16px)' }}>
-      <Container maxWidth={'xl'} disableGutters={true}>
+    <Container maxWidth={'xl'} disableGutters={true}>
+      <Paper
+        sx={{
+          backgroundColor: `${theme.palette.background.paper}99`,
+          backdropFilter: 'blur(16px)',
+          width: '100%',
+        }}
+      >
         <Grid container
           sx={{ justifyContent: 'space-between', alignItems: 'center', textAlign: 'center', }}
         >
@@ -310,8 +316,8 @@ const PlayerControl = ({ player }: { player: HTMLVideoElement | null }) => {
           </Grid>
 
         </Grid>
-      </Container >
-    </Paper>
+      </Paper>
+    </Container >
   )
 }
 
diff --git a/src/pages/Player/VideoPlayer.tsx b/src/pages/Player/VideoPlayer.tsx
index 9ba87be..f9a4cea 100644
--- a/src/pages/Player/VideoPlayer.tsx
+++ b/src/pages/Player/VideoPlayer.tsx
@@ -1,6 +1,4 @@
 import { Ref, forwardRef, useMemo } from 'react'
-import { Box, IconButton } from '@mui/material'
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded'
 import useFullscreen from '@/hooks/ui/useFullscreen'
 import useUiStore from '@/store/useUiStore'
 import { animated, useSpring } from '@react-spring/web'
@@ -10,15 +8,9 @@ const VideoPlayer = forwardRef(
 
     const [
       videoViewIsShow,
-      controlIsShow,
-      updateVideoViewIsShow,
-      updateControlIsShow,
     ] = useUiStore(
       (state) => [
         state.videoViewIsShow,
-        state.controlIsShow,
-        state.updateVideoViewIsShow,
-        state.updateControlIsShow,
       ]
     )
 
@@ -66,29 +58,6 @@ const VideoPlayer = forwardRef(
           onEnded={() => onEnded()}
           onDoubleClick={() => handleClickFullscreen()}
         />
-
-        {/* 视频播放顶栏 */}
-        <Box
-          sx={{
-            position: 'absolute',
-            top: 16,
-            left: 16,
-            width: 'auto',
-            display: controlIsShow ? 'block' : 'none',
-          }}
-          className='pt-titlebar-area-height'
-        >
-          <IconButton
-            aria-label="close"
-            onClick={() => {
-              updateVideoViewIsShow(false)
-              updateControlIsShow(true)
-            }}
-            className='app-region-no-drag'
-          >
-            <KeyboardArrowDownRoundedIcon sx={{ color: '#fff' }} />
-          </IconButton>
-        </Box>
       </animated.div>
     )
   }
diff --git a/src/pages/Player/VideoPlayerTopbar.tsx b/src/pages/Player/VideoPlayerTopbar.tsx
new file mode 100644
index 0000000..7223ce0
--- /dev/null
+++ b/src/pages/Player/VideoPlayerTopbar.tsx
@@ -0,0 +1,58 @@
+import { Box, IconButton, useTheme } from '@mui/material'
+import useUiStore from '@/store/useUiStore'
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded'
+
+const VideoPlayerTopbar = () => {
+
+  const theme = useTheme()
+
+  const [
+    videoViewIsShow,
+    controlIsShow,
+    updateVideoViewIsShow,
+    updateControlIsShow,
+  ] = useUiStore(
+    (state) => [
+      state.videoViewIsShow,
+      state.controlIsShow,
+      state.updateVideoViewIsShow,
+      state.updateControlIsShow,
+    ]
+  )
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        background: `${theme.palette.background.paper}99`,
+        height: 'var(--titlebar-height)',
+        transform: videoViewIsShow && controlIsShow ? 'none' : 'translateY(calc(-1 * var(--titlebar-height)))',
+        transition: 'all 0.2s ease-out',
+        backdropFilter: 'blur(16px)',
+      }}
+    >
+      <IconButton
+        aria-label="close"
+        onClick={() => {
+          updateVideoViewIsShow(false)
+          updateControlIsShow(true)
+        }}
+        className='app-region-no-drag'
+        sx={{
+          height: 'var(--titlebar-height)',
+          borderRadius: '0.2rem',
+          '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+            borderRadius: '0.2rem',
+          },
+        }}
+      >
+        <KeyboardArrowDownRoundedIcon />
+      </IconButton>
+    </Box>
+  )
+}
+
+export default VideoPlayerTopbar
\ No newline at end of file
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index c87cf88..db7dc1b 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -29,7 +29,9 @@ const Search = ({ type = 'icon' }: { type?: 'icon' | 'bar' }) => {
   const location = useLocation()
   const navigate = useNavigate()
 
-  useEffect(() => location.pathname === '/' ? setSearchScope('current') : setSearchScope('global'), [location.pathname])
+  const isFileView = location.pathname === '/'
+
+  useEffect(() => isFileView ? setSearchScope('current') : setSearchScope('global'), [isFileView, location.pathname])
 
   const path = searchScope === 'global' ? '/' : pathConvert(folderTree)
 
@@ -120,7 +122,6 @@ const Search = ({ type = 'icon' }: { type?: 'icon' | 'bar' }) => {
         type === 'bar' &&
         <ButtonBase
           sx={{
-            padding: '0.125rem',
             background: `${theme.palette.background.paper}99`,
             border: `1px solid ${theme.palette.divider}`,
             borderRadius: '0.5rem',
@@ -143,10 +144,6 @@ const Search = ({ type = 'icon' }: { type?: 'icon' | 'bar' }) => {
         disableRestoreFocus
         sx={{
           ...scrollbarStyle,
-          ' .MuiBackdrop-root': {
-            background: `${theme.palette.background.paper}33`,
-            backdropFilter: 'blur(0.5px)',
-          },
         }}
       >
         <Box
@@ -169,6 +166,7 @@ const Search = ({ type = 'icon' }: { type?: 'icon' | 'bar' }) => {
                   size='small'
                   variant='standard'
                   disableUnderline
+                  disabled={!isFileView}
                   sx={{ margin: '0 0.5rem' }}
                 >
                   <MenuItem value='global'>{t`Global`}</MenuItem>

From 6629a33848410b1449da226a827e25c72026b352 Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Wed, 3 Jul 2024 17:42:08 +0800
Subject: [PATCH 2/6] fix: some files cannot be displayed

---
 src/pages/Search.tsx | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index db7dc1b..f5193a3 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -48,26 +48,33 @@ const Search = ({ type = 'icon' }: { type?: 'icon' | 'bar' }) => {
 
   const fileListFetcher = async (path: string) => {
     const res: RemoteItem[] = await getFilesData(account, path)
-    return remoteItemToFile(res).filter(item => ['folder', 'audio', 'video'].includes(item.fileType))
+    return remoteItemToFile(res)
   }
 
-  const { data: filesData } = useSWR(
-    account ? `${account.username}/${path}` : null,
-    () => fileListFetcher(path),
-  )
+  const { data: filesData } = useSWR(account ? path : null, fileListFetcher)
 
-  const searchFetcher = async (path: string, searchQuery: string) => {
+  const searchFetcher = async () => {
     const res: RemoteItem[] = await getSearchData(account, path, searchQuery)
-    return remoteItemToFile(res).filter(item => ['folder', 'audio', 'video'].includes(item.fileType))
+    return remoteItemToFile(res)
   }
 
   const { data: searchData, isLoading: searchIsLoading } = useSWR(
     (debouncedSearchQuery.length > 0) && account ? `${account.username}/${path}/${debouncedSearchQuery}` : null,
-    () => searchFetcher(path, debouncedSearchQuery),
+    searchFetcher,
   )
 
-  const filteredFilesData = debouncedSearchQuery.length > 0 ? filesData?.filter(item => item.fileName.toLocaleLowerCase().includes(debouncedSearchQuery.toLocaleLowerCase())) : []
-  const filteredData = [...filteredFilesData || [], ...searchData?.filter(searchItem => !filteredFilesData?.find(item => (pathConvert(item.filePath) === pathConvert(searchItem.filePath)))) || []]
+  const filteredFilesData = debouncedSearchQuery.length > 0
+    ? filesData?.filter(item =>
+      item.fileName.toLocaleLowerCase().includes(debouncedSearchQuery.toLocaleLowerCase())
+      && ['folder', 'audio', 'video'].includes(item.fileType))
+    : []
+  const filteredData = [
+    ...filteredFilesData || [],
+    ...searchData?.filter(searchItem =>
+      !filteredFilesData?.find(item => (pathConvert(item.filePath) === pathConvert(searchItem.filePath)))
+      && ['folder', 'audio', 'video'].includes(searchItem.fileType))
+    || []
+  ]
 
   const open = (index: number) => {
     const currentFile = filteredData[index]
@@ -75,7 +82,7 @@ const Search = ({ type = 'icon' }: { type?: 'icon' | 'bar' }) => {
       handleCloseSearh()
       updateFolderTree(currentFile.filePath)
       navigate('/')
-    } else if (['audio', 'video'].includes(currentFile.fileType)) {
+    } else {
       handleCloseSearh()
       updateFolderTree(currentFile.filePath.slice(0, currentFile.filePath.length - 1))
       navigate('/')

From 2364eee3f8e511656fe2f1c3b56b4b5e94ab0600 Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Wed, 3 Jul 2024 17:45:47 +0800
Subject: [PATCH 3/6] feat: folders with a number at the beginning of disk or
 disc are playable

---
 src/components/CommonList/CommonList.tsx | 36 +++++++++++++++---------
 src/pages/Files/Files.tsx                | 25 ++++++++++++++++
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/components/CommonList/CommonList.tsx b/src/components/CommonList/CommonList.tsx
index 0a06d84..b4119f8 100644
--- a/src/components/CommonList/CommonList.tsx
+++ b/src/components/CommonList/CommonList.tsx
@@ -46,7 +46,10 @@ const CommonList = (
   const [dialogOpen, setDialogOpen] = useState(false)
   const [selectIndex, setSelectIndex] = useState<number | null>(null)
   const [selectIndexArray, setSelectIndexArray] = useState<number[]>([])
+
   const isSelectMode = selectIndexArray.length > 0
+  const shuffleDisplay = listData.filter(item => item.fileType === 'audio' || item.fileType === 'video').length > 0
+  const playAllDisplay = shuffleDisplay || listData.filter(item => item.fileType === 'folder' && /^(disc|disk)\s*\d+$/.test(item.fileName.toLocaleLowerCase())).length > 0
 
   const addSelectIndex = (index: number) => { setSelectIndexArray([...selectIndexArray, index].sort()) }
 
@@ -222,24 +225,24 @@ const CommonList = (
     const scroll = scrollRef.current
     const fab = fabRef.current
     if (fab && isSelectMode) {
-      fab.style.visibility = 'visible'
+      fab.style.transform = 'translateY(0)'
     } else if (scroll && fab && !isSelectMode) {
       const onWheel = (e: WheelEvent) => {
         if (e.deltaY > 0)
-          fab.style.visibility = 'hidden'
+          fab.style.transform = 'translateY(200%)'
         else
-          fab.style.visibility = 'visible'
+          fab.style.transform = 'translateY(0)'
       }
       const onTouchStart = (e: TouchEvent) => {
         touchStartYRef.current = (e.touches[0].clientY)
       }
       const onTouchMove = (e: TouchEvent) => {
         if (e.touches[0].clientY > touchStartYRef.current) {
-          fab.style.visibility = 'visible'
+          fab.style.transform = 'translateY(0)'
           touchStartYRef.current = (e.touches[0].clientY)
         }
         else {
-          fab.style.visibility = 'hidden'
+          fab.style.transform = 'translateY(200%)'
           touchStartYRef.current = (e.touches[0].clientY)
         }
 
@@ -256,7 +259,7 @@ const CommonList = (
   }, [isSelectMode])
 
   return (
-    <Box sx={{ height: '100%', width: '100%', position: 'relative' }} >
+    <Box sx={{ height: '100%', width: '100%', position: 'relative', overflow: 'hidden' }} >
 
       {/* 文件列表 */}
       <Grid container sx={{ flexDirection: 'column', flexWrap: 'nowrap', height: '100%' }}>
@@ -344,6 +347,7 @@ const CommonList = (
           justifyContent: 'center',
           alignItems: 'center',
           gap: '0.5rem',
+          transition: 'all 0.2s ease-out',
         }}
       >
         {
@@ -355,13 +359,19 @@ const CommonList = (
         {
           (listType !== 'playQueue') && !isSelectMode && !disableFAB &&
           <>
-            <Fab size='small' onClick={handleClickShuffleAll}>
-              <ShuffleRoundedIcon />
-            </Fab>
-            <Fab variant='extended' color='primary' onClick={handleClickPlayAll}>
-              <PlayArrowRoundedIcon />
-              <span style={{ marginLeft: '0.5rem' }}>{t`Play all`}</span>
-            </Fab>
+            {
+              shuffleDisplay &&
+              <Fab size='small' onClick={handleClickShuffleAll}>
+                <ShuffleRoundedIcon />
+              </Fab>
+            }
+            {
+              playAllDisplay &&
+              <Fab variant='extended' color='primary' onClick={handleClickPlayAll}>
+                <PlayArrowRoundedIcon />
+                <span style={{ marginLeft: '0.5rem' }}>{t`Play all`}</span>
+              </Fab>
+            }
           </>
         }
 
diff --git a/src/pages/Files/Files.tsx b/src/pages/Files/Files.tsx
index 3fe1231..0f07fb3 100644
--- a/src/pages/Files/Files.tsx
+++ b/src/pages/Files/Files.tsx
@@ -140,6 +140,31 @@ const Files = () => {
           updateVideoViewIsShow(true)
         }
       }
+
+      if (!currentFile) {
+        const discs = listData.filter(item => item.fileName.toLocaleLowerCase().includes('disc'))
+        if (discs.length > 0) {
+          Promise.all(discs.map(item => getFilesData(account, pathConvert(item.filePath)).then(res => remoteItemToFile(res))))
+            .then(files => {
+              const list = files
+                .flat()
+                .filter((item) => item.fileType === 'audio' || item.fileType === 'video')
+                .map((item, _index) => ({ ...item, index: _index }))
+
+              if (list.length > 0) {
+                if (shuffle) {
+                  updateShuffle(false)
+                }
+                updatePlayQueue(list)
+                updateCurrentIndex(0)
+                updatePlayStatu('playing')
+                if (list[0].fileType === 'video') {
+                  updateVideoViewIsShow(true)
+                }
+              }
+            })
+        }
+      }
     }
   }
 

From 5016f1d42d674c404c058bfaf8434a39707a12ac Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Wed, 3 Jul 2024 17:46:27 +0800
Subject: [PATCH 4/6] style: update video topbar style

---
 src/pages/Player/VideoPlayerTopbar.tsx | 40 +++++++++++++++-----------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/pages/Player/VideoPlayerTopbar.tsx b/src/pages/Player/VideoPlayerTopbar.tsx
index 7223ce0..a82ef13 100644
--- a/src/pages/Player/VideoPlayerTopbar.tsx
+++ b/src/pages/Player/VideoPlayerTopbar.tsx
@@ -27,30 +27,38 @@ const VideoPlayerTopbar = () => {
         top: 0,
         left: 0,
         width: '100%',
-        background: `${theme.palette.background.paper}99`,
         height: 'var(--titlebar-height)',
         transform: videoViewIsShow && controlIsShow ? 'none' : 'translateY(calc(-1 * var(--titlebar-height)))',
         transition: 'all 0.2s ease-out',
-        backdropFilter: 'blur(16px)',
       }}
     >
-      <IconButton
-        aria-label="close"
-        onClick={() => {
-          updateVideoViewIsShow(false)
-          updateControlIsShow(true)
+      <div
+        style={{
+          width: 'fit-content',
+          height: '100%',
+          display: 'flex',
+          background: `${theme.palette.background.paper}99`,
+          backdropFilter: 'blur(16px)',
         }}
         className='app-region-no-drag'
-        sx={{
-          height: 'var(--titlebar-height)',
-          borderRadius: '0.2rem',
-          '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
-            borderRadius: '0.2rem',
-          },
-        }}
       >
-        <KeyboardArrowDownRoundedIcon />
-      </IconButton>
+        <IconButton
+          aria-label="close"
+          onClick={() => {
+            updateVideoViewIsShow(false)
+            updateControlIsShow(true)
+          }}
+          sx={{
+            height: '100%',
+            borderRadius: '0.25rem',
+            '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+              borderRadius: '0.25rem',
+            },
+          }}
+        >
+          <KeyboardArrowDownRoundedIcon />
+        </IconButton>
+      </div>
     </Box>
   )
 }

From f794111e18961fea52e7dbfad1e09a6c97290e74 Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:15:36 +0800
Subject: [PATCH 5/6] style: improve theme color extraction

---
 package-lock.json              | 89 +++++++++++++++++++++++++++++++++-
 package.json                   |  4 +-
 src/data/licenses.ts           |  6 +++
 src/hooks/ui/useCustomTheme.ts | 13 ++---
 4 files changed, 101 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 68b3e60..f6f25a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "omp",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "omp",
-      "version": "1.8.0",
+      "version": "1.8.1",
       "dependencies": {
         "@azure/msal-browser": "^3.17.0",
         "@azure/msal-react": "^2.0.19",
@@ -20,6 +20,7 @@
         "@react-spring/web": "^9.7.3",
         "@use-gesture/react": "^10.3.1",
         "buffer": "^6.0.3",
+        "color": "^4.2.3",
         "extract-colors": "^4.0.6",
         "idb-keyval": "^6.2.1",
         "music-metadata-browser": "^2.5.10",
@@ -36,6 +37,7 @@
         "@lingui/swc-plugin": "^4.0.8",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
         "@swc/core": "^1.5.29",
+        "@types/color": "^3.0.6",
         "@types/extract-colors": "^1.1.4",
         "@types/node": "^20.14.2",
         "@types/react": "^18.3.3",
@@ -4203,6 +4205,33 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/color": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz",
+      "integrity": "sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/color-convert": "*"
+      }
+    },
+    "node_modules/@types/color-convert": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.3.tgz",
+      "integrity": "sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/color-name": "*"
+      }
+    },
+    "node_modules/@types/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/connect": {
       "version": "3.4.36",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz",
@@ -5889,6 +5918,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -5904,6 +5946,34 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -11955,6 +12025,21 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT"
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
diff --git a/package.json b/package.json
index 51d6287..11fff97 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@react-spring/web": "^9.7.3",
     "@use-gesture/react": "^10.3.1",
     "buffer": "^6.0.3",
+    "color": "^4.2.3",
     "extract-colors": "^4.0.6",
     "idb-keyval": "^6.2.1",
     "music-metadata-browser": "^2.5.10",
@@ -39,6 +40,7 @@
     "@lingui/swc-plugin": "^4.0.8",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@swc/core": "^1.5.29",
+    "@types/color": "^3.0.6",
     "@types/extract-colors": "^1.1.4",
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
@@ -67,4 +69,4 @@
     "webpack-merge": "^5.10.0",
     "workbox-webpack-plugin": "^7.1.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/licenses.ts b/src/data/licenses.ts
index 268e95a..3ffbf2c 100644
--- a/src/data/licenses.ts
+++ b/src/data/licenses.ts
@@ -62,6 +62,12 @@ export const licenses = [
     'link': 'https://github.com/feross/buffer',
     'author': 'Feross Aboukhadijeh feross@feross.org https://feross.org'
   },
+  {
+    'name': 'color',
+    'licenseType': 'MIT',
+    'link': 'https://github.com/Qix-/color',
+    'author': 'Josh Junon'
+  },
   {
     'name': 'extract-colors',
     'licenseType': 'GPL-3.0',
diff --git a/src/hooks/ui/useCustomTheme.ts b/src/hooks/ui/useCustomTheme.ts
index 82fb40d..f3fd2b4 100644
--- a/src/hooks/ui/useCustomTheme.ts
+++ b/src/hooks/ui/useCustomTheme.ts
@@ -4,7 +4,7 @@ import { useMediaQuery } from '@mui/material'
 import createTheme from '@mui/material/styles/createTheme'
 import { extractColors } from 'extract-colors'
 import { useMemo } from 'react'
-
+import Color from 'color'
 const useCustomTheme = () => {
   const [
     coverColor,
@@ -42,13 +42,10 @@ const useCustomTheme = () => {
   useMemo(
     async () => {
       if (cover !== './cover.svg') {
-        const colors = await extractColors(cover)
-        const lightColors = colors.filter(color => color.lightness < 0.7)
-        const darkColors = colors.filter(color => color.lightness > 0.5)
-        if (prefersDarkMode && darkColors.length > 0)
-          updateCoverColor(darkColors[0].hex)
-        else if (!prefersDarkMode && lightColors.length > 0)
-          updateCoverColor(lightColors[0].hex)
+        const color = (await extractColors(cover))[0]
+        const lightColor = Color(color.hex).lightness(50).hex()
+        const darkColor = Color(color.hex).lightness(75).hex()
+        updateCoverColor(prefersDarkMode ? darkColor : lightColor)
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

From 158f5b2ff1e9aa4c7ba29d788d288861a2f00607 Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:16:56 +0800
Subject: [PATCH 6/6] style: update style

---
 src/App.tsx                            |  1 +
 src/pages/Player/Audio/Audio.tsx       | 15 +++---
 src/pages/Player/VideoPlayerTopbar.tsx | 75 ++++++++++++++------------
 3 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 84b52a3..2b20936 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -103,6 +103,7 @@ const App = () => {
                     width: '100%',
                     height: '100%',
                     overflowY: 'auto',
+                    backgroundColor: `${customTheme.palette.background.paper}99`
                   }}>
                   {needLogin ? <LogIn /> : <Outlet />}
                 </Paper>
diff --git a/src/pages/Player/Audio/Audio.tsx b/src/pages/Player/Audio/Audio.tsx
index 8be144d..d3ec3ad 100644
--- a/src/pages/Player/Audio/Audio.tsx
+++ b/src/pages/Player/Audio/Audio.tsx
@@ -20,10 +20,10 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
   )
 
   const topRef = useRef(0)
-  const [{ top, leftRightbottom, borderRadius }, api] = useSpring(() => ({
+  const [{ top, p, borderRadius }, api] = useSpring(() => ({
     from: {
       top: audioViewIsShow ? '0' : '100dvh',
-      leftRightbottom: audioViewIsShow ? '0' : '0.5rem',
+      p: audioViewIsShow ? '0' : '0.5rem',
       borderRadius: '0.5rem',
     },
     // config: {
@@ -34,14 +34,14 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
   }))
 
   const show = () => api.start({
-    to: { top: '0', leftRightbottom: '0', borderRadius: '0' },
+    to: { top: '0', p: '0', borderRadius: '0' },
     // config: { clamp: false },
   })
 
   const hide = () => {
     api.start({
       from: { top: `${topRef.current}` },
-      to: { top: '100dvh', leftRightbottom: '0.5rem', borderRadius: '0.5rem' },
+      to: { top: '100dvh', p: '0.5rem', borderRadius: '0.5rem' },
       // config: { clamp: true },
     })
     topRef.current = 0
@@ -76,13 +76,12 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
       {...bind()}
       style={{
         position: 'fixed',
-        width: '100%',
         maxWidth: '100%',
         maxHeight: '100dvh',
         top: top,
-        left: leftRightbottom,
-        right: leftRightbottom,
-        bottom: leftRightbottom,
+        left: p,
+        right: p,
+        bottom: p,
         touchAction: 'pan-x',
       }}
     >
diff --git a/src/pages/Player/VideoPlayerTopbar.tsx b/src/pages/Player/VideoPlayerTopbar.tsx
index a82ef13..1d8215c 100644
--- a/src/pages/Player/VideoPlayerTopbar.tsx
+++ b/src/pages/Player/VideoPlayerTopbar.tsx
@@ -21,45 +21,54 @@ const VideoPlayerTopbar = () => {
   )
 
   return (
-    <Box
-      sx={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: 'var(--titlebar-height)',
-        transform: videoViewIsShow && controlIsShow ? 'none' : 'translateY(calc(-1 * var(--titlebar-height)))',
-        transition: 'all 0.2s ease-out',
-      }}
-    >
-      <div
-        style={{
-          width: 'fit-content',
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100dvw',
+      height: 'var(--titlebar-height)',
+      display: 'flex',
+      justifyContent: 'center',
+      transform: videoViewIsShow && controlIsShow ? 'none' : 'translateY(calc(-1 * var(--titlebar-height)))',
+      transition: 'all 0.2s ease-out',
+    }}>
+      <Box
+        sx={{
+          width: '100%',
+          maxWidth: '1536px',
           height: '100%',
-          display: 'flex',
-          background: `${theme.palette.background.paper}99`,
-          backdropFilter: 'blur(16px)',
         }}
-        className='app-region-no-drag'
       >
-        <IconButton
-          aria-label="close"
-          onClick={() => {
-            updateVideoViewIsShow(false)
-            updateControlIsShow(true)
-          }}
-          sx={{
+        <div
+          style={{
+            width: 'fit-content',
             height: '100%',
-            borderRadius: '0.25rem',
-            '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
-              borderRadius: '0.25rem',
-            },
+            display: 'flex',
+            background: `${theme.palette.background.paper}99`,
+            backdropFilter: 'blur(16px)',
           }}
+          className='app-region-no-drag'
         >
-          <KeyboardArrowDownRoundedIcon />
-        </IconButton>
-      </div>
-    </Box>
+          <IconButton
+            aria-label="close"
+            onClick={() => {
+              updateVideoViewIsShow(false)
+              updateControlIsShow(true)
+            }}
+            sx={{
+              height: '100%',
+              borderRadius: '0.25rem',
+              '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+                borderRadius: '0.25rem',
+              },
+              aspectRatio: '1 / 1',
+            }}
+          >
+            <KeyboardArrowDownRoundedIcon />
+          </IconButton>
+        </div>
+      </Box>
+    </div>
   )
 }