Merge pull request #113 from nini22P/dev

v1.8.1

Author: nini22P

package-lock.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"
   }
-}
+}

package.json

@@ -103,6 +103,7 @@ const App = () => {
                     width: '100%',
                     height: '100%',
                     overflowY: 'auto',
+                    backgroundColor: `${customTheme.palette.background.paper}99`
                   }}>
                   {needLogin ? <LogIn /> : <Outlet />}
                 </Paper>

src/App.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>
+            }
           </>
         }
 

src/components/CommonList/CommonList.tsx

@@ -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',

src/data/licenses.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
@@ -176,6 +173,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)',
+            },
           }
         }
       },

src/hooks/ui/useCustomTheme.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'
         }

src/hooks/ui/useThemeColor.ts

@@ -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 {

src/index.css

@@ -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)
+                }
+              }
+            })
+        }
+      }
     }
   }