Merge pull request #41 from nini22P/dev

Move account logout to settings page

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omp",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,41 +11,41 @@
     "start": "tsc && vite build && vite preview"
   },
   "dependencies": {
-    "@azure/msal-browser": "^2.37.1",
-    "@azure/msal-react": "^1.5.8",
+    "@azure/msal-browser": "^2.38.0",
+    "@azure/msal-react": "^1.5.9",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.3",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.6",
+    "@fontsource/roboto": "^5.0.4",
+    "@mui/icons-material": "^5.13.7",
+    "@mui/material": "^5.13.7",
     "buffer": "^6.0.3",
     "extract-colors": "^3.0.0",
-    "i18next": "^23.2.6",
+    "i18next": "^23.2.8",
     "i18next-browser-languagedetector": "^7.1.0",
     "music-metadata-browser": "^2.5.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.0.1",
-    "react-router-dom": "^6.14.0",
+    "react-router-dom": "^6.14.1",
     "short-uuid": "^4.2.2",
     "swr": "^2.2.0",
-    "zustand": "^4.3.8"
+    "zustand": "^4.3.9"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@types/extract-colors": "^1.1.1",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "@vitejs/plugin-react": "^4.0.1",
-    "eslint": "^8.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "@vitejs/plugin-react": "^4.0.2",
+    "eslint": "^8.44.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "sass": "^1.63.6",
     "typescript": "^5.1.6",
-    "vite": "^4.3.9"
+    "vite": "^4.4.2"
   }
 }

src/App.tsx

@@ -14,13 +14,13 @@ import useSync from './hooks/useSync'
 const App = () => {
   const { t } = useTranslation()
   const { theme } = useTheme()
-  const { accounts, login, logout } = useUser()
+  const { accounts, login } = useUser()
   useSync(accounts)
 
   return (
     <main>
       <ThemeProvider theme={theme}>
-        <NavBar accounts={accounts} logout={logout} />
+        <NavBar accounts={accounts} />
         <AuthenticatedTemplate>
           <Box sx={{ position: 'absolute', height: 'calc(100dvh - 6rem - 4rem)', width: '100%', top: '4rem', }}>
             <Container maxWidth="xl" disableGutters={true} sx={{ height: '100%' }}>

src/components/CommonList/CommonList.tsx

@@ -182,8 +182,7 @@ const CommonList = (
                         ? styles.color.primary
                         : ''
                     },
-                  }
-                  }
+                  }}
                 >
                   <ListItemIcon>
                     {item.fileType === 'folder' && <FolderOutlinedIcon />}

src/components/NavBar.tsx

@@ -1,23 +1,28 @@
 import { Box, Typography, Link, Container, IconButton } from '@mui/material'
 import GitHubIcon from '@mui/icons-material/GitHub'
-import LogoutIcon from '@mui/icons-material/Logout'
 import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined'
 import { shallow } from 'zustand/shallow'
 import useUiStore from '../store/useUiStore'
 import useTheme from '../hooks/useTheme'
 import { AccountInfo } from '@azure/msal-browser'
 
-const NavBar = ({ accounts, logout }: { accounts: AccountInfo[], logout: () => void }) => {
+const NavBar = ({ accounts }: { accounts: AccountInfo[] }) => {
   const { styles } = useTheme()
   const [mobileSideBarOpen, updateMobileSideBarOpen] = useUiStore(
     (state) => [state.mobileSideBarOpen, state.updateMobileSideBarOpen],
     shallow
   )
 
   return (
-    <Box sx={{
-      position: 'fixed', top: 0, left: 0, width: '100%', boxShadow: `0px 4px 4px -2px ${styles.color.shadow} `
-    }}>
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        boxShadow: `0px 4px 4px -2px ${styles.color.shadow}`,
+      }}
+    >
       <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' }} >
@@ -34,15 +39,10 @@ const NavBar = ({ accounts, logout }: { accounts: AccountInfo[], logout: () => v
           </Box>
           <div >
             {
-              (accounts.length !== 0)
-                ?
-                <IconButton onClick={() => logout()}>
-                  <LogoutIcon />
-                </IconButton>
-                :
-                <IconButton component={Link} href='https://github.com/nini22P/omp'>
-                  <GitHubIcon />
-                </IconButton>
+              (accounts.length == 0) &&
+              <IconButton component={Link} href='https://github.com/nini22P/omp'>
+                <GitHubIcon />
+              </IconButton>
             }
           </div>
         </Box>

src/components/Player/Audio.tsx

@@ -66,7 +66,7 @@ const Audio = (
   const [color, setColor] = useState('#ffffff')
 
   useMemo(() => {
-    if (cover !== './cd.png')
+    if (cover !== './cover.png')
       extractColors(cover)
         .then(color => setColor(color[0].hex))
         .catch(console.error)
@@ -81,8 +81,9 @@ const Audio = (
         height: '100dvh',
         position: 'fixed',
         transition: 'top 0.35s ease-in-out',
+        transform: 'translateZ(0)',
         background:
-          (noBackgound || cover === './cd.png')
+          (noBackgound || cover === './cover.png')
             ? `linear-gradient(rgba(50, 50, 50, 0.6), ${color}bb), #000`
             : `linear-gradient(rgba(50, 50, 50, 0.3), rgba(50, 50, 50, 0.3) ), url(${cover})  no-repeat center, #000`,
         backgroundSize: 'cover',
@@ -91,7 +92,7 @@ const Audio = (
       }}
       style={(audioViewIsShow) ? { top: 0 } : { top: '100vh' }}
     >
-      <Box sx={{ backdropFilter: (noBackgound || cover === './cd.png') ? '' : 'blur(30px)' }}>
+      <Box sx={{ backdropFilter: (noBackgound || cover === './cover.png') ? '' : 'blur(30px)' }}>
         <Container maxWidth={'xl'} disableGutters={true}>
           <Grid container
             pt={{ xs: 1, sm: 2 }}

src/components/Player/Player.tsx

@@ -242,7 +242,7 @@ const Player = () => {
       const path = playQueue.filter(item => item.index === currentIndex)[0].filePath
       console.log('开始获取 metadata', path)
       if (metaDataList.some(item => filePathConvert(item.path) === filePathConvert(path))) {
-        console.log('跳过获取 metadata', path)
+        console.log('跳过获取 metadata')
       } else {
         try {
           mm.fetchFromUrl(url).then(metadata => {
@@ -274,6 +274,7 @@ const Player = () => {
   // 更新当前音频元数据
   useEffect(() => {
     if (playQueue && playQueue.length !== 0) {
+      console.log(metaDataList)
       const test = metaDataList
         .filter(metaData =>
           filePathConvert(metaData.path) === filePathConvert(playQueue.filter(item => item.index === currentIndex)[0].filePath))
@@ -283,25 +284,27 @@ const Player = () => {
           ...test[0],
           size: playQueue.filter(item => item.index === currentIndex)[0].fileSize
         })
+        if (test[0].cover)
+          if (test[0].cover[0].data.data)
+            updateCover(URL.createObjectURL(new Blob([new Uint8Array(test[0].cover[0].data.data)], { type: 'image/png' })))
+          else if (test[0].cover[0].data)
+            updateCover(URL.createObjectURL(new Blob([new Uint8Array(test[0].cover[0].data)], { type: 'image/png' })))
+          else
+            updateCover('./cover.png')
+        else
+          updateCover('./cover.png')
       } else {
         setMetaData({
           title: playQueue.filter(item => item.index === currentIndex)[0].fileName,
           artist: '',
           path: playQueue.filter(item => item.index === currentIndex)[0].filePath,
         })
+        updateCover('./cover.png')
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playQueue?.find(item => item.index === currentIndex)?.filePath, metaDataList])
 
-  // 设定封面
-  useMemo(() => {
-    (!playQueue || !metaData || !metaData.cover)
-      ? updateCover('./cd.png')
-      : updateCover(URL.createObjectURL(new Blob([new Uint8Array(metaData.cover[0].data)], { type: 'image/png' })))
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [metaData?.cover])
-
   // 向 mediaSession 发送当前播放进度
   useMediaSession(player, cover, metaData?.album, metaData?.artist, metaData?.title,
     handleClickPlay, handleClickPause, handleClickNext, handleClickPrev, handleClickSeekbackward, handleClickSeekforward, SeekTo)

src/components/Setting.tsx

@@ -0,0 +1,46 @@
+import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemButton, ListItemText } from '@mui/material'
+import useUser from '../hooks/useUser'
+import { useTranslation } from 'react-i18next'
+import useTheme from '../hooks/useTheme'
+
+const Setting = () => {
+  const { accounts, logout } = useUser()
+  const { t } = useTranslation()
+  const { styles } = useTheme()
+
+  return (
+    <List>
+      {/* 账号 */}
+      <ListItem>
+        <ListItemAvatar>
+        </ListItemAvatar>
+        <ListItemText sx={{ color: styles.color.primary }}>
+          {t('account.account')}
+        </ListItemText>
+      </ListItem>
+
+      <ListItem
+        secondaryAction={
+          <Button onClick={() => logout()}>
+            {t('account.signOut')}
+          </Button>
+        }
+      >
+        <ListItemAvatar>
+          <Avatar aria-label={accounts[0].name}>
+            {accounts[0].name?.split(' ')[0]}
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText
+          primary={accounts[0].name}
+          secondary={accounts[0].username}
+        />
+      </ListItem>
+
+      <Divider sx={{ mt: 1, mb: 1 }} />
+
+    </List>
+
+  )
+}
+export default Setting

src/components/SideBar/SideBar.tsx

@@ -3,6 +3,7 @@ import { Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText } f
 import { NavLink } from 'react-router-dom'
 import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined'
 import HistoryOutlinedIcon from '@mui/icons-material/HistoryOutlined'
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
 import { shallow } from 'zustand/shallow'
 import useUiStore from '../../store/useUiStore'
 import Playlists from './Playlists'
@@ -20,7 +21,8 @@ const SideBar = () => {
 
   const navData = [
     { router: '/', icon: <HomeOutlinedIcon />, label: t('nav.home') },
-    { router: '/history', icon: <HistoryOutlinedIcon />, label: t('nav.history') }
+    { router: '/history', icon: <HistoryOutlinedIcon />, label: t('nav.history') },
+    { router: '/setting', icon: <SettingsOutlinedIcon />, label: t('nav.setting') },
   ]
 
   const closeSideBar = () => (mobileSideBarOpen) && updateMobileSideBarOpen(false)

src/locales/en.json

@@ -5,9 +5,11 @@
     "rename": "Rename",
     "remove": "Remove",
     "delete": "Delete",
-    "more": "More"
+    "more": "More",
+    "about": "关于"
   },
   "account": {
+    "account": "Account",
     "signIn": "Sign in",
     "signOut": "Sign out",
     "signInAlert": "Please sign in to see your files"
@@ -23,6 +25,7 @@
   },
   "nav": {
     "home": "Home",
-    "history": "History"
+    "history": "History",
+    "setting": "Setting"
   }
 }

src/locales/zh-CN.json

@@ -5,9 +5,11 @@
     "rename": "重命名",
     "remove": "移除",
     "delete": "删除",
-    "more": "更多"
+    "more": "更多",
+    "about": "关于"
   },
   "account": {
+    "account": "账号",
     "signIn": "登录",
     "signOut": "注销",
     "signInAlert": "请登录以查看你的文件"
@@ -23,6 +25,7 @@
   },
   "nav": {
     "home": "主页",
-    "history": "历史"
+    "history": "历史",
+    "setting": "设置"
   }
 }

src/router.tsx

@@ -4,6 +4,7 @@ import Files from './components/Files/Files'
 import History from './components/History'
 import Playlist from './components/Playlist/Playlist'
 import NotFound from './components/NotFound'
+import Setting from './components/Setting'
 
 const router = createHashRouter([
   {
@@ -13,16 +14,20 @@ const router = createHashRouter([
     children: [
       {
         path: '/',
-        element: <Files />
+        element: <Files />,
       },
       {
         path: '/history',
-        element: <History />
+        element: <History />,
       },
       {
         path: '/playlist/:id',
-        element: <Playlist />
+        element: <Playlist />,
       },
+      {
+        path: '/setting',
+        element: <Setting />,
+      }
     ]
   },
 ])

src/store/useMetaDataListStore.ts

@@ -4,7 +4,8 @@ import { MetaDataListStatus, MetaDataListAction } from '../types/MetaData'
 const useMetaDataListStore = create<MetaDataListStatus & MetaDataListAction>((set) => ({
   metaDataList: [],
   updateMetaDataList: (metaDataList) => set(() => ({ metaDataList: metaDataList })),
-  insertMetaDataList: (metaData) => set((state) => ({ metaDataList: [...state.metaDataList.filter((item) => item.path !== metaData.path), metaData] }))
-}))
-
+  insertMetaDataList: (metaData) => set((state) => ({ metaDataList: [...state.metaDataList.filter((item) => item.path !== metaData.path), metaData] })),
+  clearMetaDataList: () => set(() => ({ metaDataList: [] })),
+})
+)
 export default useMetaDataListStore

src/types/MetaData.ts

@@ -19,4 +19,5 @@ export interface MetaDataListStatus {
 export interface MetaDataListAction {
   updateMetaDataList: (metaDataList: MetaDataListStatus['metaDataList']) => void
   insertMetaDataList: (metaData: MetaData) => void
+  clearMetaDataList: () => void
 }