Merge pull request #102 from nini22P/dev

v1.7.3

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"
   }
-}
+}

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

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}`

src/hooks/graph/useFilesData.ts

@@ -1,18 +1,17 @@
-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()
 
   /**
 * 获取文件夹数据
 * @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,
   }

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]
   )

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

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

src/hooks/ui/useTheme.ts

@@ -104,7 +104,7 @@ const useTheme = () => {
       MuiBackdrop: {
         styleOverrides: {
           root: {
-            backgroundColor: 'transparent',
+            // backgroundColor: 'transparent',
           },
         },
       },