From 22923e642870d67e64c2c5edb383780100b576eb Mon Sep 17 00:00:00 2001 From: 22 <60903333+nini22P@users.noreply.github.com> Date: Wed, 12 Jun 2024 23:59:54 +0800 Subject: [PATCH] feat: supports multiple accounts --- package-lock.json | 22 ++-- package.json | 8 +- src/components/CommonList/CommonMenu.tsx | 7 +- src/graph/graph.ts | 22 ---- src/hooks/graph/useFilesData.ts | 26 +--- src/hooks/graph/useSync.ts | 46 ++++--- src/hooks/graph/useUser.ts | 17 +-- src/hooks/player/usePlayerCore.ts | 5 +- src/hooks/ui/useTheme.ts | 2 +- src/locales/en/messages.po | 116 ++++++++++-------- src/locales/en/messages.ts | 2 +- src/locales/zh-CN/messages.po | 116 ++++++++++-------- src/locales/zh-CN/messages.ts | 2 +- src/pages/Files/Files.tsx | 7 +- src/pages/Player/Audio/Classic.tsx | 4 +- src/pages/Player/Audio/Modern.tsx | 4 +- src/pages/Player/PlayerControl.tsx | 4 +- .../{Audio/MenuButton.tsx => PlayerMenu.tsx} | 49 +++++--- src/pages/Playlist/Playlist.tsx | 14 ++- src/pages/Refresh.tsx | 26 ++++ src/pages/Setting.tsx | 91 +++++++++++++- src/router.tsx | 5 + src/store/usePlayQueueStore.ts | 17 ++- src/store/usePlayerStore.ts | 26 ++-- src/store/useUiStore.ts | 4 +- src/types/playQueue.ts | 1 + src/types/player.ts | 1 + src/types/ui.ts | 2 + 28 files changed, 410 insertions(+), 236 deletions(-) rename src/pages/Player/{Audio/MenuButton.tsx => PlayerMenu.tsx} (90%) create mode 100644 src/pages/Refresh.tsx diff --git a/package-lock.json b/package-lock.json index 3342d18..eb0a3a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "omp", - "version": "1.7.2", + "version": "1.7.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "omp", - "version": "1.7.2", + "version": "1.7.3", "dependencies": { "@azure/msal-browser": "^3.10.0", "@azure/msal-react": "^2.0.12", @@ -4810,12 +4810,13 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, + "license": "MIT", "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -6728,10 +6729,11 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, + "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" }, @@ -7864,6 +7866,7 @@ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "dev": true, + "license": "MIT", "engines": { "node": ">=0.12.0" } @@ -11201,6 +11204,7 @@ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "dev": true, + "license": "MIT", "dependencies": { "is-number": "^7.0.0" }, diff --git a/package.json b/package.json index ddb57a3..180adc7 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,10 @@ "name": "omp", "description": "OneDrive Media Player", "private": true, - "version": "1.7.2", + "version": "1.7.3", "scripts": { - "dev": "lingui extract & lingui compile --typescript & webpack serve", - "build": "lingui extract & lingui compile --typescript & webpack --mode=production --node-env=production", + "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", "lingui": "lingui extract & lingui compile --typescript" @@ -67,4 +67,4 @@ "webpack-merge": "^5.10.0", "workbox-webpack-plugin": "^7.0.0" } -} +} \ No newline at end of file diff --git a/src/components/CommonList/CommonMenu.tsx b/src/components/CommonList/CommonMenu.tsx index 7f6d680..b7fdc81 100644 --- a/src/components/CommonList/CommonMenu.tsx +++ b/src/components/CommonList/CommonMenu.tsx @@ -63,7 +63,12 @@ const CommonMenu = ( // 添加到播放列表 const addToPlaylist = (id: string) => { if (currentFile) { - insertFilesToPlaylist(id, [currentFile]) + insertFilesToPlaylist(id, [{ + fileName: currentFile.fileName, + filePath: currentFile.filePath, + fileSize: currentFile.fileSize, + fileType: currentFile.fileType, + }]) setDialogOpen(false) } } diff --git a/src/graph/graph.ts b/src/graph/graph.ts index a40c9e1..02e2d00 100644 --- a/src/graph/graph.ts +++ b/src/graph/graph.ts @@ -64,28 +64,6 @@ export async function getFile(path: string, accessToken: string) { .catch(error => console.log(error)) } -/** - * 根据文件id获取缩略图 - * @param path - * @param accessToken - * @returns - */ -export async function getFileThumbnails(itemId: string, accessToken: string) { - const headers = new Headers() - const bearer = `Bearer ${accessToken}` - - headers.append('Authorization', bearer) - - const options = { - method: 'GET', - headers: headers - } - - return fetch(`${graphConfig.graphMeEndpoint}/me/drive/items/${itemId}/thumbnails`, options) - .then(response => response.json()) - .catch(error => console.log(error)) -} - export const getAppRootFiles = async (path: string, accessToken: string) => { const headers = new Headers() const bearer = `Bearer ${accessToken}` diff --git a/src/hooks/graph/useFilesData.ts b/src/hooks/graph/useFilesData.ts index 6774e19..9afc844 100644 --- a/src/hooks/graph/useFilesData.ts +++ b/src/hooks/graph/useFilesData.ts @@ -1,10 +1,9 @@ -import { getAppRootFiles, getFile, getFileThumbnails, getFiles, uploadAppRootJson } from '@/graph/graph' +import { getAppRootFiles, getFile, getFiles, uploadAppRootJson } from '@/graph/graph' import { loginRequest } from '@/graph/authConfig' -import useUser from './useUser' import { useMsal } from '@azure/msal-react' +import { AccountInfo } from '@azure/msal-browser' const useFilesData = () => { - const { account } = useUser() const { instance } = useMsal() /** @@ -12,7 +11,7 @@ const useFilesData = () => { * @param path * @returns */ - const getFilesData = async (path: string) => { + const getFilesData = async (account: AccountInfo, path: string) => { await instance.initialize() const acquireToken = await instance.acquireTokenSilent({ ...loginRequest, account: account }) const response = await getFiles(path, acquireToken.accessToken) @@ -24,33 +23,21 @@ const useFilesData = () => { * @param filePath * @returns */ - const getFileData = async (filePath: string) => { + const getFileData = async (account: AccountInfo, filePath: string) => { await instance.initialize() const acquireToken = await instance.acquireTokenSilent({ ...loginRequest, account: account }) const response = await getFile(filePath, acquireToken.accessToken) return response } - /** - * 获取文件缩略图 - * @param itemId - * @returns - */ - const getFileThumbnailsData = async (itemId: string) => { - await instance.initialize() - const acquireToken = await instance.acquireTokenSilent({ ...loginRequest, account: account }) - const response = await getFileThumbnails(itemId, acquireToken.accessToken) - return response - } - - const getAppRootFilesData = async (filePath: string) => { + const getAppRootFilesData = async (account: AccountInfo, filePath: string) => { await instance.initialize() const acquireToken = await instance.acquireTokenSilent({ ...loginRequest, account: account }) const response = await getAppRootFiles(filePath, acquireToken.accessToken) return response } - const uploadAppRootJsonData = async (fileName: string, fileContent: BodyInit) => { + const uploadAppRootJsonData = async (account: AccountInfo, fileName: string, fileContent: BodyInit) => { await instance.initialize() const acquireToken = await instance.acquireTokenSilent({ ...loginRequest, account: account }) const response = await uploadAppRootJson(fileName, fileContent, acquireToken.accessToken) @@ -60,7 +47,6 @@ const useFilesData = () => { return { getFilesData, getFileData, - getFileThumbnailsData, getAppRootFilesData, uploadAppRootJsonData, } diff --git a/src/hooks/graph/useSync.ts b/src/hooks/graph/useSync.ts index bd4ee4c..52eab3d 100644 --- a/src/hooks/graph/useSync.ts +++ b/src/hooks/graph/useSync.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react' +import { useEffect, useMemo } from 'react' import useSWR from 'swr' import usePlaylistsStore from '@/store/usePlaylistsStore' import useHistoryStore from '@/store/useHistoryStore' @@ -16,7 +16,7 @@ const useSync = () => { // 自动从 OneDrive 获取应用数据 const appDatafetcher = async () => { - const appRootFiles = await getAppRootFilesData('/') + const appRootFiles = await getAppRootFilesData(account, '/') const historyFile = appRootFiles.value.find((item: { name: string }) => item.name === 'history.json') const playlistsFile = appRootFiles.value.find((item: { name: string }) => item.name === 'playlists.json') let history = [] @@ -30,43 +30,59 @@ const useSync = () => { } console.log('Get app data') return { - history: history.filter((item: File) => typeof item.filePath === 'object'), - playlists: playlists.filter((item: Playlist) => typeof item.fileList === 'object') + history: history.map((item: File) => ( + { + fileName: item.fileName, + filePath: item.filePath, + fileSize: item.fileSize, + fileType: item.fileType, + } + )), + playlists: playlists.map((playlist: Playlist) => ( + { + id: playlist.id, + title: playlist.title, + fileList: playlist.fileList.map((item: File) => ( + { + fileName: item.fileName, + filePath: item.filePath, + fileSize: item.fileSize, + fileType: item.fileType, + } + )), + } + )) } } - const { data, error, isLoading } = useSWR<{ history: File[], playlists: Playlist[] }>(account ? 'fetchAppData' : null, appDatafetcher) + const { data, error, isLoading } = useSWR<{ history: File[], playlists: Playlist[] }>(account ? `${account.username}/fetchAppData` : null, appDatafetcher) // 自动更新播放历史 - useMemo( + useEffect( () => { (!isLoading && !error && data?.history) && updateHistoryList(data.history) - return true }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [data] + [data, error, isLoading, updateHistoryList] ) // 自动上传播放历史 useMemo( - () => (historyList !== null) && uploadAppRootJsonData('history.json', JSON.stringify(historyList)), + () => (historyList !== null) && uploadAppRootJsonData(account, 'history.json', JSON.stringify(historyList)), // eslint-disable-next-line react-hooks/exhaustive-deps [historyList] ) // 自动更新播放列表 - useMemo( + useEffect( () => { (!isLoading && !error && data?.playlists) && updatePlaylists(data.playlists) - return true }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [data] + [data, error, isLoading, updatePlaylists] ) // 自动上传播放列表 useMemo( - () => (playlists !== null) && uploadAppRootJsonData('playlists.json', JSON.stringify(playlists)), + () => (playlists !== null) && uploadAppRootJsonData(account, 'playlists.json', JSON.stringify(playlists)), // eslint-disable-next-line react-hooks/exhaustive-deps [playlists] ) diff --git a/src/hooks/graph/useUser.ts b/src/hooks/graph/useUser.ts index 0149390..67d5f97 100644 --- a/src/hooks/graph/useUser.ts +++ b/src/hooks/graph/useUser.ts @@ -1,33 +1,28 @@ import { useMsal } from '@azure/msal-react' import { loginRequest } from '@/graph/authConfig' -import usePlayQueueStore from '@/store/usePlayQueueStore' import useUiStore from '@/store/useUiStore' import { AccountInfo } from '@azure/msal-browser' const useUser = () => { const { instance, accounts } = useMsal() + const currentAccount = useUiStore(state => state.currentAccount) + + const account: AccountInfo | null = accounts[currentAccount] || null // 登入 const login = () => { instance.loginRedirect(loginRequest) - .catch(e => { - console.log(e) - }) } //登出 - const logout = () => { - usePlayQueueStore.persist.clearStorage() - useUiStore.persist.clearStorage() + const logout = (account: AccountInfo) => { instance.logoutRedirect({ + account: account, postLogoutRedirectUri: '/', }) - location.reload() } - const account: AccountInfo | null = accounts[0] || null - - return { account, login, logout } + return { accounts, account, login, logout } } export default useUser \ No newline at end of file diff --git a/src/hooks/player/usePlayerCore.ts b/src/hooks/player/usePlayerCore.ts index 38c6030..5a57c82 100644 --- a/src/hooks/player/usePlayerCore.ts +++ b/src/hooks/player/usePlayerCore.ts @@ -8,9 +8,12 @@ import useUiStore from '@/store/useUiStore' import { compressImage, pathConvert } from '@/utils' import useFilesData from '../graph/useFilesData' import { MetaData } from '@/types/MetaData' +import useUser from '../graph/useUser' const usePlayerCore = (player: HTMLVideoElement | null) => { + const { account } = useUser() + const { getFileData } = useFilesData() const [ @@ -77,7 +80,7 @@ const usePlayerCore = (player: HTMLVideoElement | null) => { } if (playQueue !== null && playQueue.length !== 0) { try { - getFileData(pathConvert(playQueue.filter(item => item.index === currentIndex)[0].filePath)).then((res) => { + getFileData(account, pathConvert(playQueue.filter(item => item.index === currentIndex)[0].filePath)).then((res) => { setUrl(res['@microsoft.graph.downloadUrl']) updateIsLoading(true) }) diff --git a/src/hooks/ui/useTheme.ts b/src/hooks/ui/useTheme.ts index 99dccc2..a2521a1 100644 --- a/src/hooks/ui/useTheme.ts +++ b/src/hooks/ui/useTheme.ts @@ -104,7 +104,7 @@ const useTheme = () => { MuiBackdrop: { styleOverrides: { root: { - backgroundColor: 'transparent', + // backgroundColor: 'transparent', }, }, }, diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po index d09e131..0360622 100644 --- a/src/locales/en/messages.po +++ b/src/locales/en/messages.po @@ -13,28 +13,32 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/pages/Setting.tsx:109 +#: src/pages/Setting.tsx:153 msgid "About" msgstr "About" -#: src/pages/Setting.tsx:41 +#: src/pages/Setting.tsx:87 msgid "Account" msgstr "Account" -#: src/components/CommonList/CommonMenu.tsx:171 -#: src/pages/Player/Audio/MenuButton.tsx:306 +#: src/pages/Setting.tsx:204 +msgid "Add account" +msgstr "Add account" + +#: src/components/CommonList/CommonMenu.tsx:176 +#: src/pages/Player/PlayerMenu.tsx:317 #: src/pages/SideBar/Playlists.tsx:49 msgid "Add playlist" msgstr "Add playlist" -#: src/components/CommonList/CommonMenu.tsx:111 +#: src/components/CommonList/CommonMenu.tsx:116 msgid "Add to play queue" msgstr "Add to play queue" -#: src/components/CommonList/CommonMenu.tsx:104 -#: src/components/CommonList/CommonMenu.tsx:145 -#: src/pages/Player/Audio/MenuButton.tsx:194 -#: src/pages/Player/Audio/MenuButton.tsx:280 +#: src/components/CommonList/CommonMenu.tsx:109 +#: src/components/CommonList/CommonMenu.tsx:150 +#: src/pages/Player/PlayerMenu.tsx:204 +#: src/pages/Player/PlayerMenu.tsx:291 msgid "Add to playlist" msgstr "Add to playlist" @@ -42,46 +46,47 @@ msgstr "Add to playlist" msgid "Ascending" msgstr "Ascending" -#: src/pages/Setting.tsx:85 +#: src/pages/Setting.tsx:129 msgid "Auto" msgstr "Auto" -#: src/components/CommonList/CommonMenu.tsx:176 -#: src/pages/Player/Audio/MenuButton.tsx:311 -#: src/pages/Playlist/Playlist.tsx:168 -#: src/pages/Playlist/Playlist.tsx:191 +#: src/components/CommonList/CommonMenu.tsx:181 +#: src/pages/Player/PlayerMenu.tsx:322 +#: src/pages/Playlist/Playlist.tsx:176 +#: src/pages/Playlist/Playlist.tsx:199 +#: src/pages/Setting.tsx:209 msgid "Cancel" msgstr "Cancel" -#: src/pages/Player/Audio/MenuButton.tsx:238 +#: src/pages/Player/PlayerMenu.tsx:249 msgid "Classic" msgstr "Classic" -#: src/pages/Setting.tsx:66 +#: src/pages/Setting.tsx:110 msgid "Clear" msgstr "Clear" -#: src/pages/Files/Files.tsx:174 +#: src/pages/Files/Files.tsx:177 msgid "Close" msgstr "Close" -#: src/pages/Setting.tsx:92 +#: src/pages/Setting.tsx:136 msgid "Color mode" msgstr "Color mode" -#: src/pages/Setting.tsx:75 +#: src/pages/Setting.tsx:119 msgid "Customize" msgstr "Customize" -#: src/pages/Setting.tsx:87 +#: src/pages/Setting.tsx:131 msgid "Dark" msgstr "Dark" -#: src/pages/Setting.tsx:62 +#: src/pages/Setting.tsx:106 msgid "Data" msgstr "Data" -#: src/pages/Playlist/Playlist.tsx:145 +#: src/pages/Playlist/Playlist.tsx:150 msgid "Delete" msgstr "Delete" @@ -89,6 +94,10 @@ msgstr "Delete" msgid "Descending" msgstr "Descending" +#: src/pages/Playlist/Playlist.tsx:172 +msgid "Enter new title" +msgstr "Enter new title" + #: src/pages/SideBar/SideBar.tsx:19 msgid "Files" msgstr "Files" @@ -113,7 +122,7 @@ msgstr "History" msgid "Last modified" msgstr "Last modified" -#: src/pages/Setting.tsx:86 +#: src/pages/Setting.tsx:130 msgid "Light" msgstr "Light" @@ -121,21 +130,25 @@ msgstr "Light" msgid "List" msgstr "List" -#: src/pages/Setting.tsx:70 +#: src/pages/Setting.tsx:114 msgid "Local metaData cache" msgstr "Local metaData cache" +#: src/pages/Setting.tsx:90 +msgid "Manage" +msgstr "Manage" + #: src/pages/Files/FilterMenu.tsx:112 msgid "Media only" msgstr "Media only" -#: src/pages/Player/Audio/MenuButton.tsx:226 +#: src/pages/Player/PlayerMenu.tsx:237 msgid "Modern" msgstr "Modern" #: src/components/CommonList/CommonListItem.tsx:32 #: src/components/CommonList/CommonListItemCard.tsx:76 -#: src/pages/Playlist/Playlist.tsx:101 +#: src/pages/Playlist/Playlist.tsx:106 msgid "More" msgstr "More" @@ -148,22 +161,22 @@ msgid "Name" msgstr "Name" #: src/components/CommonList/CommonMenu.tsx:60 -#: src/pages/Player/Audio/MenuButton.tsx:112 +#: src/pages/Player/PlayerMenu.tsx:112 #: src/pages/SideBar/Playlists.tsx:16 msgid "New playlist" msgstr "New playlist" -#: src/pages/Playlist/Playlist.tsx:175 -#: src/pages/Playlist/Playlist.tsx:192 +#: src/pages/Playlist/Playlist.tsx:183 +#: src/pages/Playlist/Playlist.tsx:200 msgid "OK" msgstr "OK" -#: src/components/CommonList/CommonMenu.tsx:118 -#: src/pages/Player/Audio/MenuButton.tsx:184 +#: src/components/CommonList/CommonMenu.tsx:123 +#: src/pages/Player/PlayerMenu.tsx:184 msgid "Open in folder" msgstr "Open in folder" -#: src/pages/Setting.tsx:118 +#: src/pages/Setting.tsx:162 msgid "Open source dependencies" msgstr "Open source dependencies" @@ -171,36 +184,40 @@ msgstr "Open source dependencies" msgid "Play all" msgstr "Play all" -#: src/pages/Player/Audio/MenuButton.tsx:177 +#: src/pages/Player/PlayerMenu.tsx:192 msgid "Play queue" msgstr "Play queue" -#: src/pages/Player/Audio/MenuButton.tsx:166 -#: src/pages/Player/Audio/MenuButton.tsx:251 +#: src/pages/Player/PlayerMenu.tsx:171 +#: src/pages/Player/PlayerMenu.tsx:262 msgid "Playback rate" msgstr "Playback rate" #: src/pages/LogIn.tsx:25 -#: src/pages/Setting.tsx:55 +#: src/pages/Setting.tsx:99 msgid "Please use Microsoft account authorization to log in" msgstr "Please use Microsoft account authorization to log in" -#: src/components/CommonList/CommonMenu.tsx:134 +#: src/components/CommonList/CommonMenu.tsx:139 msgid "Remove" msgstr "Remove" -#: src/pages/Playlist/Playlist.tsx:139 -#: src/pages/Playlist/Playlist.tsx:156 +#: src/pages/Playlist/Playlist.tsx:144 +#: src/pages/Playlist/Playlist.tsx:162 msgid "Rename" msgstr "Rename" -#: src/pages/Files/Files.tsx:161 -#: src/pages/Files/Files.tsx:162 -#: src/pages/Files/Files.tsx:174 -#: src/pages/Files/Files.tsx:174 +#: src/pages/Files/Files.tsx:164 +#: src/pages/Files/Files.tsx:165 +#: src/pages/Files/Files.tsx:177 +#: src/pages/Files/Files.tsx:177 msgid "Search" msgstr "Search" +#: src/pages/Setting.tsx:176 +msgid "Select account" +msgstr "Select account" + #: src/pages/SideBar/SideBar.tsx:21 msgid "Setting" msgstr "Setting" @@ -210,11 +227,10 @@ msgid "Shuffle all" msgstr "Shuffle all" #: src/pages/LogIn.tsx:27 -#: src/pages/Setting.tsx:46 msgid "Sign in" msgstr "Sign in" -#: src/pages/Setting.tsx:45 +#: src/pages/Setting.tsx:183 msgid "Sign out" msgstr "Sign out" @@ -222,19 +238,19 @@ msgstr "Sign out" msgid "Size" msgstr "Size" -#: src/pages/Player/Audio/MenuButton.tsx:201 +#: src/pages/Player/PlayerMenu.tsx:212 msgid "Switch fullscreen" msgstr "Switch fullscreen" -#: src/pages/Player/Audio/MenuButton.tsx:157 -#: src/pages/Player/Audio/MenuButton.tsx:214 +#: src/pages/Player/PlayerMenu.tsx:162 +#: src/pages/Player/PlayerMenu.tsx:225 msgid "Switch theme" msgstr "Switch theme" -#: src/pages/Playlist/Playlist.tsx:188 +#: src/pages/Playlist/Playlist.tsx:196 msgid "The playlist will be deleted" msgstr "The playlist will be deleted" -#: src/pages/Setting.tsx:104 +#: src/pages/Setting.tsx:148 msgid "Use album cover theme color" msgstr "Use album cover theme color" diff --git a/src/locales/en/messages.ts b/src/locales/en/messages.ts index 8820778..b4f1bee 100644 --- a/src/locales/en/messages.ts +++ b/src/locales/en/messages.ts @@ -1 +1 @@ -/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages:Messages=JSON.parse("{\"uyJsf6\":\"About\",\"AeXO77\":\"Account\",\"uQ+CWJ\":\"Add playlist\",\"Vmuxgj\":\"Add to play queue\",\"gLfZlz\":\"Add to playlist\",\"nYD/Cq\":\"Ascending\",\"R9Khdg\":\"Auto\",\"dEgA5A\":\"Cancel\",\"1gUYFw\":\"Classic\",\"xCJdfg\":\"Clear\",\"yz7wBu\":\"Close\",\"YDWhuY\":\"Color mode\",\"srRMnJ\":\"Customize\",\"pvnfJD\":\"Dark\",\"HKH+W+\":\"Data\",\"cnGeoo\":\"Delete\",\"Cko536\":\"Descending\",\"sER+bs\":\"Files\",\"rvhCbi\":\"Folders first\",\"CXDHcv\":\"Grid\",\"t3SPBU\":\"HD thumbnails\",\"0caMy7\":\"History\",\"x5DnMs\":\"Last modified\",\"1njn7W\":\"Light\",\"2BBAbc\":\"List\",\"2QFkSI\":\"Local metaData cache\",\"eK4SL/\":\"Media only\",\"IU7sBy\":\"Modern\",\"2FYpfJ\":\"More\",\"/u/nsV\":\"Multicolumn list\",\"6YtxFj\":\"Name\",\"dMizp8\":\"New playlist\",\"zga9sT\":\"OK\",\"zAd2xF\":\"Open in folder\",\"OZNIzM\":\"Open source dependencies\",\"tVR7Hf\":\"Play all\",\"2ckL2r\":\"Play queue\",\"W7OEzk\":\"Playback rate\",\"2t5KJY\":\"Please use Microsoft account authorization to log in\",\"t/YqKh\":\"Remove\",\"2wxgft\":\"Rename\",\"A1taO8\":\"Search\",\"EFKJQT\":\"Setting\",\"ML96zX\":\"Shuffle all\",\"5lWFkC\":\"Sign in\",\"fcWrnU\":\"Sign out\",\"Cj2Gtd\":\"Size\",\"NG9Ghl\":\"Switch fullscreen\",\"dGrFyD\":\"Switch theme\",\"DLu3TH\":\"The playlist will be deleted\",\"lRkLr5\":\"Use album cover theme color\"}"); \ No newline at end of file +/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages:Messages=JSON.parse("{\"uyJsf6\":\"About\",\"AeXO77\":\"Account\",\"MPPZ54\":\"Add account\",\"uQ+CWJ\":\"Add playlist\",\"Vmuxgj\":\"Add to play queue\",\"gLfZlz\":\"Add to playlist\",\"nYD/Cq\":\"Ascending\",\"R9Khdg\":\"Auto\",\"dEgA5A\":\"Cancel\",\"1gUYFw\":\"Classic\",\"xCJdfg\":\"Clear\",\"yz7wBu\":\"Close\",\"YDWhuY\":\"Color mode\",\"srRMnJ\":\"Customize\",\"pvnfJD\":\"Dark\",\"HKH+W+\":\"Data\",\"cnGeoo\":\"Delete\",\"Cko536\":\"Descending\",\"dVoWOX\":\"Enter new title\",\"sER+bs\":\"Files\",\"rvhCbi\":\"Folders first\",\"CXDHcv\":\"Grid\",\"t3SPBU\":\"HD thumbnails\",\"0caMy7\":\"History\",\"x5DnMs\":\"Last modified\",\"1njn7W\":\"Light\",\"2BBAbc\":\"List\",\"2QFkSI\":\"Local metaData cache\",\"wckWOP\":\"Manage\",\"eK4SL/\":\"Media only\",\"IU7sBy\":\"Modern\",\"2FYpfJ\":\"More\",\"/u/nsV\":\"Multicolumn list\",\"6YtxFj\":\"Name\",\"dMizp8\":\"New playlist\",\"zga9sT\":\"OK\",\"zAd2xF\":\"Open in folder\",\"OZNIzM\":\"Open source dependencies\",\"tVR7Hf\":\"Play all\",\"2ckL2r\":\"Play queue\",\"W7OEzk\":\"Playback rate\",\"2t5KJY\":\"Please use Microsoft account authorization to log in\",\"t/YqKh\":\"Remove\",\"2wxgft\":\"Rename\",\"A1taO8\":\"Search\",\"+O3PfQ\":\"Select account\",\"EFKJQT\":\"Setting\",\"ML96zX\":\"Shuffle all\",\"5lWFkC\":\"Sign in\",\"fcWrnU\":\"Sign out\",\"Cj2Gtd\":\"Size\",\"NG9Ghl\":\"Switch fullscreen\",\"dGrFyD\":\"Switch theme\",\"DLu3TH\":\"The playlist will be deleted\",\"lRkLr5\":\"Use album cover theme color\"}"); \ No newline at end of file diff --git a/src/locales/zh-CN/messages.po b/src/locales/zh-CN/messages.po index c21a107..c758c8c 100644 --- a/src/locales/zh-CN/messages.po +++ b/src/locales/zh-CN/messages.po @@ -13,28 +13,32 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/pages/Setting.tsx:109 +#: src/pages/Setting.tsx:153 msgid "About" msgstr "关于" -#: src/pages/Setting.tsx:41 +#: src/pages/Setting.tsx:87 msgid "Account" msgstr "账户" -#: src/components/CommonList/CommonMenu.tsx:171 -#: src/pages/Player/Audio/MenuButton.tsx:306 +#: src/pages/Setting.tsx:204 +msgid "Add account" +msgstr "添加账户" + +#: src/components/CommonList/CommonMenu.tsx:176 +#: src/pages/Player/PlayerMenu.tsx:317 #: src/pages/SideBar/Playlists.tsx:49 msgid "Add playlist" msgstr "新建播放列表" -#: src/components/CommonList/CommonMenu.tsx:111 +#: src/components/CommonList/CommonMenu.tsx:116 msgid "Add to play queue" msgstr "添加到播放队列" -#: src/components/CommonList/CommonMenu.tsx:104 -#: src/components/CommonList/CommonMenu.tsx:145 -#: src/pages/Player/Audio/MenuButton.tsx:194 -#: src/pages/Player/Audio/MenuButton.tsx:280 +#: src/components/CommonList/CommonMenu.tsx:109 +#: src/components/CommonList/CommonMenu.tsx:150 +#: src/pages/Player/PlayerMenu.tsx:204 +#: src/pages/Player/PlayerMenu.tsx:291 msgid "Add to playlist" msgstr "添加到播放列表" @@ -42,46 +46,47 @@ msgstr "添加到播放列表" msgid "Ascending" msgstr "正序" -#: src/pages/Setting.tsx:85 +#: src/pages/Setting.tsx:129 msgid "Auto" msgstr "自动" -#: src/components/CommonList/CommonMenu.tsx:176 -#: src/pages/Player/Audio/MenuButton.tsx:311 -#: src/pages/Playlist/Playlist.tsx:168 -#: src/pages/Playlist/Playlist.tsx:191 +#: src/components/CommonList/CommonMenu.tsx:181 +#: src/pages/Player/PlayerMenu.tsx:322 +#: src/pages/Playlist/Playlist.tsx:176 +#: src/pages/Playlist/Playlist.tsx:199 +#: src/pages/Setting.tsx:209 msgid "Cancel" msgstr "取消" -#: src/pages/Player/Audio/MenuButton.tsx:238 +#: src/pages/Player/PlayerMenu.tsx:249 msgid "Classic" msgstr "经典" -#: src/pages/Setting.tsx:66 +#: src/pages/Setting.tsx:110 msgid "Clear" msgstr "清除" -#: src/pages/Files/Files.tsx:174 +#: src/pages/Files/Files.tsx:177 msgid "Close" msgstr "关闭" -#: src/pages/Setting.tsx:92 +#: src/pages/Setting.tsx:136 msgid "Color mode" msgstr "颜色模式" -#: src/pages/Setting.tsx:75 +#: src/pages/Setting.tsx:119 msgid "Customize" msgstr "定制" -#: src/pages/Setting.tsx:87 +#: src/pages/Setting.tsx:131 msgid "Dark" msgstr "深色" -#: src/pages/Setting.tsx:62 +#: src/pages/Setting.tsx:106 msgid "Data" msgstr "数据" -#: src/pages/Playlist/Playlist.tsx:145 +#: src/pages/Playlist/Playlist.tsx:150 msgid "Delete" msgstr "删除" @@ -89,6 +94,10 @@ msgstr "删除" msgid "Descending" msgstr "倒序" +#: src/pages/Playlist/Playlist.tsx:172 +msgid "Enter new title" +msgstr "输入新标题" + #: src/pages/SideBar/SideBar.tsx:19 msgid "Files" msgstr "文件" @@ -113,7 +122,7 @@ msgstr "历史" msgid "Last modified" msgstr "最后修改" -#: src/pages/Setting.tsx:86 +#: src/pages/Setting.tsx:130 msgid "Light" msgstr "浅色" @@ -121,21 +130,25 @@ msgstr "浅色" msgid "List" msgstr "列表" -#: src/pages/Setting.tsx:70 +#: src/pages/Setting.tsx:114 msgid "Local metaData cache" msgstr "本地元数据缓存" +#: src/pages/Setting.tsx:90 +msgid "Manage" +msgstr "管理" + #: src/pages/Files/FilterMenu.tsx:112 msgid "Media only" msgstr "仅限媒体" -#: src/pages/Player/Audio/MenuButton.tsx:226 +#: src/pages/Player/PlayerMenu.tsx:237 msgid "Modern" msgstr "现代" #: src/components/CommonList/CommonListItem.tsx:32 #: src/components/CommonList/CommonListItemCard.tsx:76 -#: src/pages/Playlist/Playlist.tsx:101 +#: src/pages/Playlist/Playlist.tsx:106 msgid "More" msgstr "更多" @@ -148,22 +161,22 @@ msgid "Name" msgstr "名称" #: src/components/CommonList/CommonMenu.tsx:60 -#: src/pages/Player/Audio/MenuButton.tsx:112 +#: src/pages/Player/PlayerMenu.tsx:112 #: src/pages/SideBar/Playlists.tsx:16 msgid "New playlist" msgstr "新播放列表" -#: src/pages/Playlist/Playlist.tsx:175 -#: src/pages/Playlist/Playlist.tsx:192 +#: src/pages/Playlist/Playlist.tsx:183 +#: src/pages/Playlist/Playlist.tsx:200 msgid "OK" msgstr "确定" -#: src/components/CommonList/CommonMenu.tsx:118 -#: src/pages/Player/Audio/MenuButton.tsx:184 +#: src/components/CommonList/CommonMenu.tsx:123 +#: src/pages/Player/PlayerMenu.tsx:184 msgid "Open in folder" msgstr "打开所在文件夹" -#: src/pages/Setting.tsx:118 +#: src/pages/Setting.tsx:162 msgid "Open source dependencies" msgstr "开源库" @@ -171,36 +184,40 @@ msgstr "开源库" msgid "Play all" msgstr "全部播放" -#: src/pages/Player/Audio/MenuButton.tsx:177 +#: src/pages/Player/PlayerMenu.tsx:192 msgid "Play queue" msgstr "播放队列" -#: src/pages/Player/Audio/MenuButton.tsx:166 -#: src/pages/Player/Audio/MenuButton.tsx:251 +#: src/pages/Player/PlayerMenu.tsx:171 +#: src/pages/Player/PlayerMenu.tsx:262 msgid "Playback rate" msgstr "播放速度" #: src/pages/LogIn.tsx:25 -#: src/pages/Setting.tsx:55 +#: src/pages/Setting.tsx:99 msgid "Please use Microsoft account authorization to log in" msgstr "请使用微软账户授权登录" -#: src/components/CommonList/CommonMenu.tsx:134 +#: src/components/CommonList/CommonMenu.tsx:139 msgid "Remove" msgstr "移除" -#: src/pages/Playlist/Playlist.tsx:139 -#: src/pages/Playlist/Playlist.tsx:156 +#: src/pages/Playlist/Playlist.tsx:144 +#: src/pages/Playlist/Playlist.tsx:162 msgid "Rename" msgstr "重命名" -#: src/pages/Files/Files.tsx:161 -#: src/pages/Files/Files.tsx:162 -#: src/pages/Files/Files.tsx:174 -#: src/pages/Files/Files.tsx:174 +#: src/pages/Files/Files.tsx:164 +#: src/pages/Files/Files.tsx:165 +#: src/pages/Files/Files.tsx:177 +#: src/pages/Files/Files.tsx:177 msgid "Search" msgstr "搜索" +#: src/pages/Setting.tsx:176 +msgid "Select account" +msgstr "选择账户" + #: src/pages/SideBar/SideBar.tsx:21 msgid "Setting" msgstr "设置" @@ -210,11 +227,10 @@ msgid "Shuffle all" msgstr "全部随机播放" #: src/pages/LogIn.tsx:27 -#: src/pages/Setting.tsx:46 msgid "Sign in" msgstr "登录" -#: src/pages/Setting.tsx:45 +#: src/pages/Setting.tsx:183 msgid "Sign out" msgstr "注销" @@ -222,19 +238,19 @@ msgstr "注销" msgid "Size" msgstr "大小" -#: src/pages/Player/Audio/MenuButton.tsx:201 +#: src/pages/Player/PlayerMenu.tsx:212 msgid "Switch fullscreen" msgstr "切换全屏" -#: src/pages/Player/Audio/MenuButton.tsx:157 -#: src/pages/Player/Audio/MenuButton.tsx:214 +#: src/pages/Player/PlayerMenu.tsx:162 +#: src/pages/Player/PlayerMenu.tsx:225 msgid "Switch theme" msgstr "切换主题" -#: src/pages/Playlist/Playlist.tsx:188 +#: src/pages/Playlist/Playlist.tsx:196 msgid "The playlist will be deleted" msgstr "播放列表将会被删除" -#: src/pages/Setting.tsx:104 +#: src/pages/Setting.tsx:148 msgid "Use album cover theme color" msgstr "使用专辑封面主题色" diff --git a/src/locales/zh-CN/messages.ts b/src/locales/zh-CN/messages.ts index d933832..eda56c5 100644 --- a/src/locales/zh-CN/messages.ts +++ b/src/locales/zh-CN/messages.ts @@ -1 +1 @@ -/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages:Messages=JSON.parse("{\"uyJsf6\":\"关于\",\"AeXO77\":\"账户\",\"uQ+CWJ\":\"新建播放列表\",\"Vmuxgj\":\"添加到播放队列\",\"gLfZlz\":\"添加到播放列表\",\"nYD/Cq\":\"正序\",\"R9Khdg\":\"自动\",\"dEgA5A\":\"取消\",\"1gUYFw\":\"经典\",\"xCJdfg\":\"清除\",\"yz7wBu\":\"关闭\",\"YDWhuY\":\"颜色模式\",\"srRMnJ\":\"定制\",\"pvnfJD\":\"深色\",\"HKH+W+\":\"数据\",\"cnGeoo\":\"删除\",\"Cko536\":\"倒序\",\"sER+bs\":\"文件\",\"rvhCbi\":\"文件夹优先\",\"CXDHcv\":\"网格\",\"t3SPBU\":\"高清缩略图\",\"0caMy7\":\"历史\",\"x5DnMs\":\"最后修改\",\"1njn7W\":\"浅色\",\"2BBAbc\":\"列表\",\"2QFkSI\":\"本地元数据缓存\",\"eK4SL/\":\"仅限媒体\",\"IU7sBy\":\"现代\",\"2FYpfJ\":\"更多\",\"/u/nsV\":\"多列列表\",\"6YtxFj\":\"名称\",\"dMizp8\":\"新播放列表\",\"zga9sT\":\"确定\",\"zAd2xF\":\"打开所在文件夹\",\"OZNIzM\":\"开源库\",\"tVR7Hf\":\"全部播放\",\"2ckL2r\":\"播放队列\",\"W7OEzk\":\"播放速度\",\"2t5KJY\":\"请使用微软账户授权登录\",\"t/YqKh\":\"移除\",\"2wxgft\":\"重命名\",\"A1taO8\":\"搜索\",\"EFKJQT\":\"设置\",\"ML96zX\":\"全部随机播放\",\"5lWFkC\":\"登录\",\"fcWrnU\":\"注销\",\"Cj2Gtd\":\"大小\",\"NG9Ghl\":\"切换全屏\",\"dGrFyD\":\"切换主题\",\"DLu3TH\":\"播放列表将会被删除\",\"lRkLr5\":\"使用专辑封面主题色\"}"); \ No newline at end of file +/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages:Messages=JSON.parse("{\"uyJsf6\":\"关于\",\"AeXO77\":\"账户\",\"MPPZ54\":\"添加账户\",\"uQ+CWJ\":\"新建播放列表\",\"Vmuxgj\":\"添加到播放队列\",\"gLfZlz\":\"添加到播放列表\",\"nYD/Cq\":\"正序\",\"R9Khdg\":\"自动\",\"dEgA5A\":\"取消\",\"1gUYFw\":\"经典\",\"xCJdfg\":\"清除\",\"yz7wBu\":\"关闭\",\"YDWhuY\":\"颜色模式\",\"srRMnJ\":\"定制\",\"pvnfJD\":\"深色\",\"HKH+W+\":\"数据\",\"cnGeoo\":\"删除\",\"Cko536\":\"倒序\",\"dVoWOX\":\"输入新标题\",\"sER+bs\":\"文件\",\"rvhCbi\":\"文件夹优先\",\"CXDHcv\":\"网格\",\"t3SPBU\":\"高清缩略图\",\"0caMy7\":\"历史\",\"x5DnMs\":\"最后修改\",\"1njn7W\":\"浅色\",\"2BBAbc\":\"列表\",\"2QFkSI\":\"本地元数据缓存\",\"wckWOP\":\"管理\",\"eK4SL/\":\"仅限媒体\",\"IU7sBy\":\"现代\",\"2FYpfJ\":\"更多\",\"/u/nsV\":\"多列列表\",\"6YtxFj\":\"名称\",\"dMizp8\":\"新播放列表\",\"zga9sT\":\"确定\",\"zAd2xF\":\"打开所在文件夹\",\"OZNIzM\":\"开源库\",\"tVR7Hf\":\"全部播放\",\"2ckL2r\":\"播放队列\",\"W7OEzk\":\"播放速度\",\"2t5KJY\":\"请使用微软账户授权登录\",\"t/YqKh\":\"移除\",\"2wxgft\":\"重命名\",\"A1taO8\":\"搜索\",\"+O3PfQ\":\"选择账户\",\"EFKJQT\":\"设置\",\"ML96zX\":\"全部随机播放\",\"5lWFkC\":\"登录\",\"fcWrnU\":\"注销\",\"Cj2Gtd\":\"大小\",\"NG9Ghl\":\"切换全屏\",\"dGrFyD\":\"切换主题\",\"DLu3TH\":\"播放列表将会被删除\",\"lRkLr5\":\"使用专辑封面主题色\"}"); \ No newline at end of file diff --git a/src/pages/Files/Files.tsx b/src/pages/Files/Files.tsx index 85629e1..855831e 100644 --- a/src/pages/Files/Files.tsx +++ b/src/pages/Files/Files.tsx @@ -14,6 +14,7 @@ import SearchRoundedIcon from '@mui/icons-material/SearchRounded' import CloseRoundedIcon from '@mui/icons-material/CloseRounded' import { useEffect, useRef, useState } from 'react' import { t } from '@lingui/macro' +import useUser from '@/hooks/graph/useUser' const Files = () => { @@ -39,6 +40,8 @@ const Files = () => { const { getFilesData } = useFilesData() + const { account } = useUser() + const [searchIsShow, setSearchIsShow] = useState(false) const [searchValue, setSearchValue] = useState('') @@ -52,7 +55,7 @@ const Files = () => { '@microsoft.graph.downloadUrl'?: string; folder?: { childCount: number, view: { sortBy: string, sortOrder: string, viewType: string } }; } - const res: ResItem[] = await getFilesData(path) + const res: ResItem[] = await getFilesData(account, path) return res .map((item) => { @@ -70,7 +73,7 @@ const Files = () => { } const { data: fileListData, error: fileListError, isLoading: fileListIsLoading } = - useSWR(pathConvert(folderTree), fileListFetcher, { revalidateOnFocus: false }) + useSWR(`${account.username}/${pathConvert(folderTree)}`, () => fileListFetcher(pathConvert(folderTree)), { revalidateOnFocus: false }) const filteredFileList = !fileListData diff --git a/src/pages/Player/Audio/Classic.tsx b/src/pages/Player/Audio/Classic.tsx index 368d34b..c6a91db 100644 --- a/src/pages/Player/Audio/Classic.tsx +++ b/src/pages/Player/Audio/Classic.tsx @@ -7,7 +7,7 @@ import { timeShift } from '@/utils' import { CloseFullscreen, FastForward, FastRewind, KeyboardArrowDownOutlined, OpenInFull, PanoramaOutlined, PauseCircleOutlined, PlayCircleOutlined, QueueMusicOutlined, Repeat, RepeatOne, Shuffle, SkipNext, SkipPrevious } from '@mui/icons-material' import { Container, Box, IconButton, Typography, Slider, CircularProgress } from '@mui/material' import Grid from '@mui/material/Unstable_Grid2' -import MenuButton from './MenuButton' +import PlayerMenu from '../PlayerMenu' import { SpringValue, animated } from '@react-spring/web' const Classic = ({ player, styles }: { player: HTMLVideoElement | null, styles: { borderRadius: SpringValue } }) => { @@ -143,7 +143,7 @@ const Classic = ({ player, styles }: { player: HTMLVideoElement | null, styles: : } - + {/* 封面和音频信息 */} diff --git a/src/pages/Player/Audio/Modern.tsx b/src/pages/Player/Audio/Modern.tsx index 7919d99..782d1e3 100644 --- a/src/pages/Player/Audio/Modern.tsx +++ b/src/pages/Player/Audio/Modern.tsx @@ -20,7 +20,7 @@ import usePlayerControl from '@/hooks/player/usePlayerControl' import usePlayQueueStore from '@/store/usePlayQueueStore' import usePlayerStore from '@/store/usePlayerStore' import useUiStore from '@/store/useUiStore' -import MenuButton from './MenuButton' +import PlayerMenu from '../PlayerMenu' import { timeShift } from '@/utils' const Modern = ({ player, styles }: { player: HTMLVideoElement | null, styles: { borderRadius: SpringValue } }) => { @@ -165,7 +165,7 @@ const Modern = ({ player, styles }: { player: HTMLVideoElement | null, styles: { } - + diff --git a/src/pages/Player/PlayerControl.tsx b/src/pages/Player/PlayerControl.tsx index a577016..b41c612 100644 --- a/src/pages/Player/PlayerControl.tsx +++ b/src/pages/Player/PlayerControl.tsx @@ -18,7 +18,7 @@ import useUiStore from '@/store/useUiStore' import useFullscreen from '@/hooks/ui/useFullscreen' import usePlayerControl from '@/hooks/player/usePlayerControl' import { timeShift } from '@/utils' -import MenuButton from './Audio/MenuButton' +import PlayerMenu from './PlayerMenu' import VolumeControl from './VolumeControl' const PlayerControl = ({ player }: { player: HTMLVideoElement | null }) => { @@ -278,7 +278,7 @@ const PlayerControl = ({ player }: { player: HTMLVideoElement | null }) => { - + diff --git a/src/pages/Player/Audio/MenuButton.tsx b/src/pages/Player/PlayerMenu.tsx similarity index 90% rename from src/pages/Player/Audio/MenuButton.tsx rename to src/pages/Player/PlayerMenu.tsx index f066455..2eee948 100644 --- a/src/pages/Player/Audio/MenuButton.tsx +++ b/src/pages/Player/PlayerMenu.tsx @@ -20,7 +20,7 @@ import usePlaylistsStore from '@/store/usePlaylistsStore' import shortUUID from 'short-uuid' import useFullscreen from '@/hooks/ui/useFullscreen' -const MenuButton = () => { +const PlayerMenu = () => { const navigate = useNavigate() @@ -115,7 +115,12 @@ const MenuButton = () => { // 添加到播放列表 const addToPlaylist = (id: string) => { if (currentFile) { - insertFilesToPlaylist(id, [currentFile]) + insertFilesToPlaylist(id, [{ + fileName: currentFile.fileName, + filePath: currentFile.filePath, + fileSize: currentFile.fileSize, + fileType: currentFile.fileType, + }]) setAddToPlaylistDialogOpen(false) } } @@ -170,6 +175,16 @@ const MenuButton = () => { + { + currentFile && + + + + + + + } + @@ -177,22 +192,18 @@ const MenuButton = () => { - - - - - - - - { - setAddToPlaylistDialogOpen(true) - handleCloseMenu() - }}> - - - - - + { + currentFile && + { + setAddToPlaylistDialogOpen(true) + handleCloseMenu() + }}> + + + + + + } @@ -316,4 +327,4 @@ const MenuButton = () => { ) } -export default MenuButton \ No newline at end of file +export default PlayerMenu \ No newline at end of file diff --git a/src/pages/Playlist/Playlist.tsx b/src/pages/Playlist/Playlist.tsx index e8a3494..68638e2 100644 --- a/src/pages/Playlist/Playlist.tsx +++ b/src/pages/Playlist/Playlist.tsx @@ -22,7 +22,7 @@ const Playlist = () => { const [menuOpen, setMenuOpen] = useState(false) const [renameDialogOpen, setRenameDialogOpen] = useState(false) const [deleteDiaLogOpen, setDeleteDiaLogOpen] = useState(false) - const [newTitle, setNewTitle] = useState('') + const [newTitle, setNewTitle] = useState(playlist?.title) const { getManyLocalMetaData } = useLocalMetaDataStore() const [metaDataList, setMetaDataList] = useState([]) @@ -48,6 +48,11 @@ const Playlist = () => { setAnchorEl(null) } + const handleCloseRenameDialog = () => { + setRenameDialogOpen(false) + setNewTitle(playlist?.title) + } + //从播放列表移除文件 const removeFiles = (filePathArray: string[][]) => { id && removeFilesFromPlaylist(id, filePathArray) @@ -149,23 +154,26 @@ const Playlist = () => { {/* 重命名播放列表 */} setRenameDialogOpen(false)} + onClose={handleCloseRenameDialog} fullWidth + disableRestoreFocus maxWidth='xs' > {t`Rename`} setNewTitle(event.target.value)} + placeholder={t`Enter new title`} /> - + - : + } > @@ -128,6 +172,43 @@ const Setting = () => { + + {t`Select account`} + + { + accounts.map((account, index) => + + handleLogout(account)}> + + + + }> + handleChangeAccount(index)}> + + {account.name?.split(' ')[0]} + + + + ) + } + + login()}> + + + + + + + + + + + + + diff --git a/src/router.tsx b/src/router.tsx index fa1cb4e..b033bfe 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -5,6 +5,7 @@ import History from './pages/History' import Playlist from './pages/Playlist/Playlist' import NotFound from './pages/NotFound' import Setting from './pages/Setting' +import Refresh from './pages/Refresh' const router = createHashRouter([ { @@ -27,6 +28,10 @@ const router = createHashRouter([ { path: '/setting', element: , + }, + { + path: '/refresh', + element: } ] }, diff --git a/src/store/usePlayQueueStore.ts b/src/store/usePlayQueueStore.ts index d881009..f1bb12b 100644 --- a/src/store/usePlayQueueStore.ts +++ b/src/store/usePlayQueueStore.ts @@ -4,11 +4,15 @@ import { createWithEqualityFn } from 'zustand/traditional' import { shallow } from 'zustand/shallow' import { createJSONStorage, persist } from 'zustand/middleware' +const initialState: PlayQueueStatus = { + type: 'audio', + playQueue: null, + currentIndex: 0, +} + const usePlayQueueStore = createWithEqualityFn()( persist((set) => ({ - type: 'audio', - playQueue: null, - currentIndex: 0, + ...initialState, updateType: (type) => set(() => ({ type: type })), updatePlayQueue: (playQueue) => set(() => ({ playQueue: playQueue })), updateCurrentIndex: (currentIndex) => set(() => ({ currentIndex: currentIndex })), @@ -28,12 +32,15 @@ const usePlayQueueStore = createWithEqualityFn set(() => ({ ...initialState })), }), { name: 'playqueue-store', storage: createJSONStorage(() => localStorage), } - ), shallow) + ), + shallow +) export default usePlayQueueStore \ No newline at end of file diff --git a/src/store/usePlayerStore.ts b/src/store/usePlayerStore.ts index 09a6f9e..1d7adff 100644 --- a/src/store/usePlayerStore.ts +++ b/src/store/usePlayerStore.ts @@ -2,7 +2,7 @@ import { PlayerStatus, PlayerAction } from '../types/player' import { shallow } from 'zustand/shallow' import { createWithEqualityFn } from 'zustand/traditional' -const usePlayerStore = createWithEqualityFn((set) => ({ +const initialState: PlayerStatus = { currentMetaData: null, metadataUpdate: false, playStatu: 'paused', @@ -10,13 +10,21 @@ const usePlayerStore = createWithEqualityFn((set) = cover: './cover.svg', currentTime: 0, duration: 0, - updateCurrentMetaData: (currentMetaData) => set(() => ({ currentMetaData: currentMetaData })), - updateMetadataUpdate: () => set((state) => ({ metadataUpdate: !state.metadataUpdate })), - updatePlayStatu: (playStatu) => set(() => ({ playStatu: playStatu })), - updateIsLoading: (isLading) => set(() => ({ isLoading: isLading })), - updateCover: (cover) => set(() => (({ cover: cover }))), - updateCurrentTime: (currentTime) => set(() => ({ currentTime: currentTime })), - updateDuration: (duration) => set(() => ({ duration: duration })), -}), shallow) +} + +const usePlayerStore = createWithEqualityFn( + (set) => ({ + ...initialState, + updateCurrentMetaData: (currentMetaData) => set(() => ({ currentMetaData: currentMetaData })), + updateMetadataUpdate: () => set((state) => ({ metadataUpdate: !state.metadataUpdate })), + updatePlayStatu: (playStatu) => set(() => ({ playStatu: playStatu })), + updateIsLoading: (isLading) => set(() => ({ isLoading: isLading })), + updateCover: (cover) => set(() => (({ cover: cover }))), + updateCurrentTime: (currentTime) => set(() => ({ currentTime: currentTime })), + updateDuration: (duration) => set(() => ({ duration: duration })), + resetPlayer: () => set(() => ({ ...initialState })), + }), + shallow +) export default usePlayerStore \ No newline at end of file diff --git a/src/store/useUiStore.ts b/src/store/useUiStore.ts index b8f7822..fd7818d 100644 --- a/src/store/useUiStore.ts +++ b/src/store/useUiStore.ts @@ -6,6 +6,7 @@ import { createJSONStorage, persist } from 'zustand/middleware' const useUiStore = createWithEqualityFn()( persist( (set) => ({ + currentAccount: 0, folderTree: ['/'], audioViewIsShow: false, audioViewTheme: 'modern', @@ -20,7 +21,7 @@ const useUiStore = createWithEqualityFn()( volume: 80, playbackRate: 1, coverColor: '#8e24aa', - CoverThemeColor: false, + CoverThemeColor: true, colorMode: 'auto', display: 'multicolumnList', sortBy: 'name', @@ -28,6 +29,7 @@ const useUiStore = createWithEqualityFn()( foldersFirst: true, mediaOnly: true, hdThumbnails: false, + updateCurrentAccount: (currentAccount) => set(() => ({ currentAccount: currentAccount })), updateFolderTree: (folderTree) => set(() => ({ folderTree: folderTree })), updateAudioViewIsShow: (audioViewIsShow) => set(() => ({ audioViewIsShow: audioViewIsShow })), updateAudioViewTheme: (audioViewTheme) => set(() => ({ audioViewTheme: audioViewTheme })), diff --git a/src/types/playQueue.ts b/src/types/playQueue.ts index 116bb3d..4bd0f90 100644 --- a/src/types/playQueue.ts +++ b/src/types/playQueue.ts @@ -15,4 +15,5 @@ export interface PlayQueueAction { updatePlayQueue: (PlayQueue: PlayQueueStatus['playQueue']) => void; updateCurrentIndex: (index: PlayQueueStatus['currentIndex']) => void; removeFilesFromPlayQueue: (filePathArray: File['filePath'][]) => void; + resetPlayQueue: () => void; } \ No newline at end of file diff --git a/src/types/player.ts b/src/types/player.ts index 88f9312..6ae4f73 100644 --- a/src/types/player.ts +++ b/src/types/player.ts @@ -18,4 +18,5 @@ export interface PlayerAction { updateCover: (cover: PlayerStatus['cover']) => void; updateCurrentTime: (currentTime: PlayerStatus['currentTime']) => void; updateDuration: (duration: PlayerStatus['duration']) => void; + resetPlayer: () => void; } \ No newline at end of file diff --git a/src/types/ui.ts b/src/types/ui.ts index 452dcc3..fa06aa8 100644 --- a/src/types/ui.ts +++ b/src/types/ui.ts @@ -1,4 +1,5 @@ export interface UiStatus { + currentAccount: number; folderTree: string[]; audioViewIsShow: boolean; audioViewTheme: 'classic' | 'modern'; @@ -24,6 +25,7 @@ export interface UiStatus { } export interface UiAction { + updateCurrentAccount: (currentAccount: UiStatus['currentAccount']) => void; updateFolderTree: (folderTree: UiStatus['folderTree']) => void; updateAudioViewIsShow: (audioViewIsShow: UiStatus['audioViewIsShow']) => void; updateAudioViewTheme: (audioViewTheme: UiStatus['audioViewTheme']) => void;