fix: 外部暂停时播放状态不同步

.gitignore

@@ -18,4 +18,5 @@
 *.log
 
 /tmp
-*.zip
+*.zip
+.vscode

package.json

@@ -2,7 +2,7 @@
   "name": "netease-music-crx",
   "description": "能够收听VIP或变灰歌曲的网易云音乐播放器",
   "license": "GPL-3.0-only",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "scripts": {
     "build": "node scripts/build.js",
     "start": "node scripts/webserver.js",

src/background/chrome.js

@@ -83,9 +83,9 @@ function initContextMenu() {
     }
   });
 
-  subscribeKey(store, "playing", (playing) => {
+  subscribeKey(store, "audioPlaying", (audioPlaying) => {
     const id = "togglePlaying";
-    chrome.contextMenus.update(id, contextMenus[id](playing));
+    chrome.contextMenus.update(id, contextMenus[id](audioPlaying));
   });
 
   subscribeKey(store, "userId", (userId) => {

src/background/store.js

@@ -21,6 +21,7 @@ import {
   shuffleArr,
   race,
   randChinaIp,
+  sleep,
 } from "../utils";
 
 // 播放器
@@ -38,12 +39,13 @@ let refreshAt = 0;
 // 上次暂停时间
 let pausedAt = null;
 
-const store = proxy({ ...COMMON_PROPS, dir: 1, chinaIp: null });
+const store = proxy({ ...COMMON_PROPS, playing: false, dir: 1, chinaIp: null });
 
 export async function bootstrap() {
   setInterval(async () => {
     await refreshLogin();
     if (Date.now() - refreshAt > 13 * 60 * 60 * 1000) {
+      store.playing = store.audioPlaying;
       await refreshStore();
     }
   }, 33 * 60 * 1000);
@@ -66,11 +68,13 @@ export function updateAudioTime(currentTime) {
 }
 
 export async function togglePlaying() {
-  let { playing } = store;
+  let { audioPlaying, playing } = store;
   if (!audio) {
-    return { playing };
+    store.audioPlaying = false;
+    store.playing = false;
+    return { audioPlaying: false };
   }
-  if (playing) {
+  if (audioPlaying) {
     pausedAt = Date.now();
     audio.pause();
     playing = false;
@@ -90,7 +94,7 @@ export async function togglePlaying() {
   }
   store.playing = playing;
   persistSave();
-  return { playing };
+  return { audioPlaying: !audioPlaying };
 }
 
 export function toggleMute() {
@@ -315,6 +319,7 @@ function getPopupData() {
   const {
     userId,
     playing,
+    audioPlaying,
     volume,
     playMode,
     playlists,
@@ -324,6 +329,7 @@ function getPopupData() {
   return {
     userId,
     playing,
+    audioPlaying,
     volume,
     playMode,
     playlists,
@@ -688,6 +694,12 @@ function setupAudio() {
       });
     }
   };
+  audio.onplay = () => {
+    store.audioPlaying = true;
+  };
+  audio.onpause = () => {
+    store.audioPlaying = false;
+  };
   audio.oncanplay = () => {
     updateAudioState({
       duration: audio.duration,

src/popup/Player.js

@@ -26,7 +26,7 @@ export default function Player() {
   const [showModal, setShowModal] = useState(false);
   const {
     userId,
-    playing,
+    audioPlaying,
     selectedSong,
     selectedPlaylist,
     volume,
@@ -100,7 +100,7 @@ export default function Player() {
           onClick={() => storeUtils.togglePlaying()}
           title="播放/暂停"
         >
-          {playing ? <PauseIcon /> : <PlayArrowIcon />}
+          {audioPlaying ? <PauseIcon /> : <PlayArrowIcon />}
         </IconButton>
         <IconButton onClick={() => storeUtils.playNext()} title="下一首">
           <SkipNextIcon />

src/utils.js

@@ -90,7 +90,7 @@ export const PLAY_MODE = {
 export const COMMON_PROPS = {
   userId: null,
   vip: false,
-  playing: false,
+  audioPlaying: false,
   volume: 1,
   playMode: PLAY_MODE.LOOP,
   playlists: [],