Merge pull request #126 from nini22P/dev

v1.9.2

.gitignore

@@ -27,3 +27,8 @@ dist-ssr
 .env
 .env.development
 .env.production
+
+# auto generated
+src/data/info.ts
+src/locales/en/messages.ts
+src/locales/zh-CN/messages.ts

generate-version-info.mjs

@@ -0,0 +1,27 @@
+import { readFile, writeFile } from 'node:fs/promises'
+
+const filePath = './src/data/info.ts'
+
+const run = async (isDev) => {
+  const packageString = await readFile('./package.json', { encoding: 'utf-8' })
+  const version = JSON.parse(packageString).version
+
+  const finalVersion = isDev ? `${version}-dev` : version
+
+  const newInfo = `const INFO = {
+  version: '${finalVersion}',
+  dev: ${isDev},
+  buildTime: '${new Date().toISOString()}',
+}
+
+export default INFO`
+
+  await writeFile(filePath, newInfo, { encoding: 'utf-8' })
+  console.log(`Generate version info to ${filePath}`)
+}
+
+const isDev = process.argv.includes('--dev')
+
+run(isDev).catch(err => {
+  console.error('Error updating the file:', err)
+})

package.json

@@ -2,13 +2,16 @@
   "name": "omp",
   "description": "OneDrive Media Player",
   "private": true,
-  "version": "1.9.1",
+  "version": "1.9.2",
   "scripts": {
-    "dev": "webpack serve",
-    "build": "node update-version-info.mjs && webpack --mode=production --node-env=production",
-    "lint": "eslint src --report-unused-disable-directives --max-warnings 0",
-    "watch": "webpack --watch",
-    "lingui": "lingui extract & lingui compile --typescript"
+    "build": "npm run generate && webpack --mode=production --node-env=production",
+    "build:dev": "npm run generate:dev && webpack --mode=production --node-env=production",
+    "dev": "npm run generate:dev && webpack serve",
+    "lint": "npm run generate && eslint src --report-unused-disable-directives --max-warnings 0",
+    "lint:dev": "npm run generate:dev && eslint src --report-unused-disable-directives --max-warnings 0",
+    "lingui": "lingui extract && lingui compile --typescript",
+    "generate": "node generate-version-info.mjs && npm run lingui",
+    "generate:dev": "node generate-version-info.mjs --dev && npm run lingui"
   },
   "dependencies": {
     "@azure/msal-browser": "3.26.1",

public/manifest.json

@@ -6,7 +6,7 @@
   "display_override": [
     "window-controls-overlay"
   ],
-  "description": "OneDrive Media Player",
+  "description": "OneDrive Media Player / OneDrive 媒体播放器",
   "dir": "auto",
   "icons": [
     {
@@ -37,5 +37,35 @@
       "purpose": "maskable"
     }
   ],
+  "screenshots": [
+    {
+      "src": "./screenshots/audio-light.webp",
+      "sizes": "1317x904",
+      "type": "image/webp",
+      "form_factor": "wide",
+      "description": "Audio Light"
+    },
+    {
+      "src": "./screenshots/audio-dark.webp",
+      "sizes": "1317x904",
+      "type": "image/webp",
+      "form_factor": "wide",
+      "description": "Audio Dark"
+    },
+    {
+      "src": "./screenshots/audio-light-narrow.webp",
+      "sizes": "1082x2402",
+      "type": "image/webp",
+      "form_factor": "narrow",
+      "description": "Audio Light"
+    },
+    {
+      "src": "./screenshots/audio-dark-narrow.webp",
+      "sizes": "1082x2402",
+      "type": "image/webp",
+      "form_factor": "narrow",
+      "description": "Audio Dark"
+    }
+  ],
   "edge_side_panel": {}
 }

readme.md

@@ -25,9 +25,8 @@ English | [中文](./readme_cn.md)
 
 ## Screenshots
 
-![Audio light](./screenshots/audio-light.png)
-![Audio dark](./screenshots/audio-dark.png)
-![Files](./screenshots/files.png)
+![Audio light](./public/screenshots/audio-light.webp)
+![Audio dark](./public/screenshots/audio-dark.webp)
 
 ## FAQ
 

readme_cn.md

@@ -25,9 +25,8 @@
 
 ## 截图
 
-![音频 亮色模式](./screenshots/audio-light.png)
-![音频 暗色模式](./screenshots/audio-dark.png)
-![文件列表](./screenshots/files.png)
+![音频 亮色模式](./public/screenshots/audio-light.webp)
+![音频 暗色模式](./public/screenshots/audio-dark.webp)
 
 ## FAQ
 

src/App.tsx

@@ -14,10 +14,12 @@ import { useSpring, animated } from '@react-spring/web'
 import { useMemo } from 'react'
 import useCustomTheme from './hooks/ui/useCustomTheme'
 import Search from './pages/Search'
+import useStyles from './hooks/ui/useStyles'
 
 const App = () => {
-  const { customTheme, scrollbarStyle } = useCustomTheme()
-  useThemeColor()
+  const customTheme = useCustomTheme()
+  const styles = useStyles(customTheme)
+  useThemeColor(customTheme)
   const windowControlsOverlayOpen = useMediaQuery('(display-mode: window-controls-overlay)')
 
   const { account } = useUser()
@@ -45,8 +47,8 @@ const App = () => {
   )
 
   return (
-    <Box sx={scrollbarStyle}>
-      <ThemeProvider theme={customTheme}>
+    <ThemeProvider theme={customTheme}>
+      <Box sx={styles.scrollbar}>
         <animated.div
           style={{
             width: '100vw',
@@ -111,8 +113,8 @@ const App = () => {
           <Player />
 
         </animated.div>
-      </ThemeProvider>
-    </Box>
+      </Box>
+    </ThemeProvider>
   )
 }
 

src/components/CommonList/CommonList.tsx

@@ -43,7 +43,7 @@ const CommonList = (
   const updatePlayQueue = usePlayQueueStore.use.updatePlayQueue()
   const updateCurrentIndex = usePlayQueueStore.use.updateCurrentIndex()
 
-  const updatePlayStatu = usePlayerStore((state) => state.updatePlayStatu)
+  const updateAutoPlay = usePlayerStore((state) => state.updateAutoPlay)
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const [menuOpen, setMenuOpen] = useState(false)
@@ -85,7 +85,7 @@ const CommonList = (
       const shuffleList = shufflePlayQueue(list) || []
       updatePlayQueue(shuffleList)
       updateCurrentIndex(shuffleList[0].index)
-      updatePlayStatu('playing')
+      updateAutoPlay(true)
     }
   }
 

src/hooks/player/useMediaSession.ts

@@ -28,10 +28,11 @@ const useMediaSession = (player: HTMLVideoElement | null) => {
   } = usePlayerControl(player)
 
   const defaultSkipTime = 10
-  // 向 mediaSession 发送当前播放进度
+  // 更新 MediaSession 播放进度
   const updatePositionState = useCallback(
     () => {
       if ('setPositionState' in navigator.mediaSession && player && !isNaN(player.duration)) {
+        console.log('Update MediaSession Position State')
         navigator.mediaSession.setPositionState({
           duration: player.duration,
           playbackRate: player.playbackRate,
@@ -52,10 +53,11 @@ const useMediaSession = (player: HTMLVideoElement | null) => {
     [player, updatePositionState]
   )
 
-  // 添加 mediaSession
+  // 设置 MediaSession
   useEffect(
     () => {
-      if ('mediaSession' in navigator) {
+      if ('mediaSession' in navigator && currentMetaData) {
+        console.log('Set MediaSession')
         navigator.mediaSession.metadata = new MediaMetadata({
           title: currentMetaData?.title,
           artist: currentMetaData?.artist,
@@ -92,7 +94,8 @@ const useMediaSession = (player: HTMLVideoElement | null) => {
         }
       }
     },
-    [cover, handleClickPlay, handleClickPause, handleClickNext, handleClickPrev, handleClickSeekbackward, handleClickSeekforward, seekTo, currentMetaData?.title, currentMetaData?.artist, currentMetaData?.album, updatePositionState]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cover, currentMetaData]
   )
 }
 

src/hooks/player/usePlayerControl.ts

@@ -13,12 +13,12 @@ const usePlayerControl = (player: HTMLVideoElement | null) => {
   const updatePlayQueue = usePlayQueueStore.use.updatePlayQueue()
 
   const [
-    updatePlayStatu,
+    updateAutoPlay,
     updateCurrentTime,
   ] = usePlayerStore(
     useShallow(
       (state) => [
-        state.updatePlayStatu,
+        state.updateAutoPlay,
         state.updateCurrentTime,
       ]
     )
@@ -46,12 +46,14 @@ const usePlayerControl = (player: HTMLVideoElement | null) => {
 
   // 播放开始
   const handleClickPlay = () => {
-    updatePlayStatu('playing')
+    updateAutoPlay(true)
+    player?.play()
   }
 
   // 播放暂停
   const handleClickPause = () => {
-    updatePlayStatu('paused')
+    updateAutoPlay(false)
+    player?.pause()
   }
 
   // 下一曲