v1.2.3

.github/workflows/ci.yml

@@ -1,54 +1,51 @@
-# Simple workflow for deploying static content to GitHub Pages
 name: Deploy
 
 on:
-  # Runs on pushes targeting the default branch
   push:
     branches: ['main']
 
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow one concurrent deployment
 concurrency:
   group: 'pages'
   cancel-in-progress: true
 
 jobs:
-  # Single deploy job since we're just deploying
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+    - name: Set up Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18
+        cache: 'npm'
+    - name: Install dependencies
+      run: npm install
+    - name: Build
+      env:
+        CLIENT_ID: ${{ secrets.CLIENT_ID }}
+        REDIRECT_URI: ${{ secrets.REDIRECT_URI }}
+      run: npm run build
+    - name: Upload artifact
+      uses: actions/upload-pages-artifact@v2
+      with:
+        path: './dist'
   deploy:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
+    needs: build
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Set up Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm install
-      - name: Build
-        env:
-          CLIENT_ID: ${{ secrets.CLIENT_ID }}
-          REDIRECT_URI: ${{ secrets.REDIRECT_URI }}
-        run: npm run build
       - name: Setup Pages
         uses: actions/configure-pages@v3
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
-        with:
-          # Upload dist repository
-          path: './dist'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v2

.github/workflows/pr-check.yml

@@ -7,7 +7,7 @@ on:
       - synchronize
 
 jobs:
-  Build-Check:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

package.json

@@ -2,7 +2,7 @@
   "name": "omp",
   "description": "OneDrive Media Player",
   "private": true,
-  "version": "1.2.2",
+  "version": "1.2.3",
   "scripts": {
     "dev": "webpack serve",
     "build": "webpack --mode=production --node-env=production",

src/components/CommonList/CommonList.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2'
@@ -39,6 +39,14 @@ const CommonList = (
 
   const isPlayQueueView = listData?.some((item) => typeof (item as PlayQueueItem).index === 'number')
 
+  // 打开播放队列时滚动到当前播放文件
+  useEffect(() => {
+    isPlayQueueView && document.getElementById('playing-item')?.scrollIntoView({behavior: 'auto', block: 'center'})
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []
+  )
+
   const handleClickMenu = (event: React.MouseEvent<HTMLElement>, currentFile: File) => {
     setMenuOpen(true)
     setCurrentFile(currentFile)
@@ -136,6 +144,7 @@ const CommonList = (
             <Grid key={index} lg={multiColumn ? 4 : 12} md={multiColumn ? 6 : 12} sm={12} xs={12} p={0} >
               <ListItem
                 disablePadding
+                id = {(item as PlayQueueItem).index === currentIndex ? 'playing-item' : ''}
                 sx={{
                   '& .MuiListItemButton-root': {
                     paddingLeft: 3,

src/hooks/useControlHide.ts

@@ -3,25 +3,28 @@ import useUiStore from '../store/useUiStore'
 
 export const useControlHide = (type: string, videoViewIsShow: boolean) => {
   const updateControlIsShow = useUiStore((state) => state.updateControlIsShow)
-  useEffect(() => {
-    if (type === 'video' && videoViewIsShow) {
-      let timer: string | number | NodeJS.Timeout | undefined
-      const resetTimer = () => {
-        updateControlIsShow(true)
-        clearTimeout(timer)
-        timer = (setTimeout(() => updateControlIsShow(false), 3000))
+  useEffect(
+    () => {
+      if (type === 'video' && videoViewIsShow) {
+        let timer: string | number | NodeJS.Timeout | undefined
+        const resetTimer = () => {
+          updateControlIsShow(true)
+          clearTimeout(timer)
+          timer = (setTimeout(() => updateControlIsShow(false), 3000))
+        }
+        resetTimer()
+        window.addEventListener('mousemove', resetTimer)
+        window.addEventListener('mousedown', resetTimer)
+        window.addEventListener('keydown', resetTimer)
+        return () => {
+          window.removeEventListener('mousemove', resetTimer)
+          window.removeEventListener('mousedown', resetTimer)
+          window.removeEventListener('keydown', resetTimer)
+          clearTimeout(timer)
+        }
       }
-      resetTimer()
-      window.addEventListener('mousemove', resetTimer)
-      window.addEventListener('mousedown', resetTimer)
-      window.addEventListener('keydown', resetTimer)
-      return () => {
-        window.removeEventListener('mousemove', resetTimer)
-        window.removeEventListener('mousedown', resetTimer)
-        window.removeEventListener('keydown', resetTimer)
-        clearTimeout(timer)
-      }
-    }
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [type, videoViewIsShow])
+    [type, videoViewIsShow]
+  )
 }

src/hooks/useMediaSession.ts

@@ -31,40 +31,43 @@ export const useMediaSession = (
       updatePositionState()
     }
   // 添加 mediaSession
-  useEffect(() => {
-    if ('mediaSession' in navigator) {
-      navigator.mediaSession.metadata = new MediaMetadata({
-        title: title,
-        artist: artist,
-        album: album,
-        artwork: [{ src: cover }]
-      })
-      navigator.mediaSession.setActionHandler('play', () => handleClickPlay())
-      navigator.mediaSession.setActionHandler('pause', () => handleClickPause())
-      navigator.mediaSession.setActionHandler('nexttrack', () => handleClickNext())
-      navigator.mediaSession.setActionHandler('previoustrack', () => handleClickPrev())
-      navigator.mediaSession.setActionHandler('seekbackward', (details) => {
-        const skipTime = details.seekOffset || defaultSkipTime
-        handleClickSeekbackward(skipTime)
-      })
-      navigator.mediaSession.setActionHandler('seekforward', (details) => {
-        const skipTime = details.seekOffset || defaultSkipTime
-        handleClickSeekforward(skipTime)
-      })
-      navigator.mediaSession.setActionHandler('seekto', (details) => {
-        if (details.seekTime) {
-          SeekTo(details.seekTime)
+  useEffect(
+    () => {
+      if ('mediaSession' in navigator) {
+        navigator.mediaSession.metadata = new MediaMetadata({
+          title: title,
+          artist: artist,
+          album: album,
+          artwork: [{ src: cover }]
+        })
+        navigator.mediaSession.setActionHandler('play', () => handleClickPlay())
+        navigator.mediaSession.setActionHandler('pause', () => handleClickPause())
+        navigator.mediaSession.setActionHandler('nexttrack', () => handleClickNext())
+        navigator.mediaSession.setActionHandler('previoustrack', () => handleClickPrev())
+        navigator.mediaSession.setActionHandler('seekbackward', (details) => {
+          const skipTime = details.seekOffset || defaultSkipTime
+          handleClickSeekbackward(skipTime)
+        })
+        navigator.mediaSession.setActionHandler('seekforward', (details) => {
+          const skipTime = details.seekOffset || defaultSkipTime
+          handleClickSeekforward(skipTime)
+        })
+        navigator.mediaSession.setActionHandler('seekto', (details) => {
+          if (details.seekTime) {
+            SeekTo(details.seekTime)
+          }
+        })
+        return () => {
+          navigator.mediaSession.setActionHandler('play', null)
+          navigator.mediaSession.setActionHandler('pause', null)
+          navigator.mediaSession.setActionHandler('nexttrack', null)
+          navigator.mediaSession.setActionHandler('previoustrack', null)
+          navigator.mediaSession.setActionHandler('seekbackward', null)
+          navigator.mediaSession.setActionHandler('seekforward', null)
+          navigator.mediaSession.setActionHandler('seekto', null)
         }
-      })
-      return () => {
-        navigator.mediaSession.setActionHandler('play', null)
-        navigator.mediaSession.setActionHandler('pause', null)
-        navigator.mediaSession.setActionHandler('nexttrack', null)
-        navigator.mediaSession.setActionHandler('previoustrack', null)
-        navigator.mediaSession.setActionHandler('seekbackward', null)
-        navigator.mediaSession.setActionHandler('seekforward', null)
-        navigator.mediaSession.setActionHandler('seekto', null)
       }
-    }
-  }, [cover, album, artist, title, handleClickPlay, handleClickPause, handleClickNext, handleClickPrev, handleClickSeekbackward, handleClickSeekforward, SeekTo])
+    },
+    [cover, album, artist, title, handleClickPlay, handleClickPause, handleClickNext, handleClickPrev, handleClickSeekbackward, handleClickSeekforward, SeekTo]
+  )
 }

src/hooks/useSync.ts

@@ -39,34 +39,38 @@ const useSync = (accounts: AccountInfo[]) => {
   const { data, error, isLoading } = useSWR<{ history: File[], playlists: Playlist[] }>(isLoggedIn ? 'fetchAppData' : null, appDatafetcher)
 
   // 自动更新播放历史
-  useMemo(() => {
-    if (!isLoading && !error && data?.history)
-      updateHistoryList(data.history)
+  useMemo(
+    () => {
+      (!isLoading && !error && data?.history) && updateHistoryList(data.history)
+      return true
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data])
+    [data]
+  )
 
   // 自动上传播放历史
-  useMemo(() => {
-    if (historyList !== null) {
-      uploadAppRootJsonData('history.json', JSON.stringify(historyList))
-    }
+  useMemo(
+    () => (historyList !== null) && uploadAppRootJsonData('history.json', JSON.stringify(historyList)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [historyList])
+    [historyList]
+  )
 
   // 自动更新播放列表
-  useMemo(() => {
-    if (!isLoading && !error && data?.playlists)
-      updatePlaylists(data.playlists)
+  useMemo(
+    () => {
+      (!isLoading && !error && data?.playlists) && updatePlaylists(data.playlists)
+      return true
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data])
+    [data]
+  )
 
   // 自动上传播放列表
-  useMemo(() => {
-    if (playlists !== null) {
-      uploadAppRootJsonData('playlists.json', JSON.stringify(playlists))
-    }
+  useMemo(
+    () => (playlists !== null) && uploadAppRootJsonData('playlists.json', JSON.stringify(playlists)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playlists])
+    [playlists]
+  )
 
 }
 

src/index.css

@@ -10,6 +10,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%
 }
 
 a {

src/pages/Player/Audio.tsx

@@ -59,15 +59,13 @@ const Audio = (
   const [playStatu, cover, currentTime, duration, shuffle, repeat, updateShuffle] = usePlayerStore(
     (state) => [state.playStatu, state.cover, state.currentTime, state.duration, state.shuffle, state.repeat, state.updateShuffle])
 
-  const [noBackgound, setNoBackground] = useState(false)
+  const [noBackground, setNoBackground] = useState(false)
   const [color, setColor] = useState('#ffffff')
 
-  useMemo(() => {
-    if (cover !== './cover.png')
-      extractColors(cover)
-        .then(color => setColor(color[0].hex))
-        .catch(console.error)
-  }, [cover])
+  useMemo(
+    () => (cover !== './cover.png') && extractColors(cover).then(color => setColor(color[0].hex)).catch(console.error),
+    [cover]
+  )
 
   return (
     <Container
@@ -80,7 +78,7 @@ const Audio = (
         transition: 'top 0.35s ease-in-out',
         transform: 'translateZ(0)',
         background:
-          (noBackgound || cover === './cover.png')
+          (noBackground || 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',
@@ -89,7 +87,7 @@ const Audio = (
       }}
       style={(audioViewIsShow) ? { top: 0 } : { top: '100vh' }}
     >
-      <Box sx={{ backdropFilter: (noBackgound || cover === './cover.png') ? '' : 'blur(30px)' }}>
+      <Box sx={{ backdropFilter: (noBackground || cover === './cover.png') ? '' : 'blur(30px)' }}>
         <Container maxWidth={'xl'} disableGutters={true}>
           <Grid container
             pt={{ xs: 1, sm: 2 }}
@@ -114,8 +112,8 @@ const Audio = (
               <IconButton aria-label="PlayQueue" onClick={() => updatePlayQueueIsShow(true)} >
                 <QueueMusicOutlinedIcon style={{ color: '#fff' }} />
               </IconButton>
-              <IconButton aria-label="NoBackground" onClick={() => setNoBackground(!noBackgound)} >
-                <PanoramaOutlinedIcon style={noBackgound ? { color: '#aaa' } : { color: '#fff' }} />
+              <IconButton aria-label="NoBackground" onClick={() => setNoBackground(!noBackground)} >
+                <PanoramaOutlinedIcon style={noBackground ? { color: '#aaa' } : { color: '#fff' }} />
               </IconButton>
               <IconButton aria-label="Full" onClick={() => handleClickFullscreen()}>
                 {