修复启用全局快捷键时与Media Session注册冲突的问题

build-config/renderer/webpack.config.base.js

@@ -104,7 +104,7 @@ module.exports = {
         ],
       },
       {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
         type: 'asset',
         parser: {
           dataUrlCondition: {

publish/changeLog.md

@@ -1,32 +1,7 @@
-从v2.2.0起，我们发布了一个独立版的[数据同步服务](https://github.com/lyswhut/lx-music-sync-server#readme)，如果你有服务器，可以将其部署到服务器上作为私人多端同步服务使用，详情看该项目说明
-
-### 不兼容性变更说明
-
-- 同步功能，从这个版本起，数据同步功能至少需要移动端v1.0.0的版本才能连接，连接的地址格式也略有改变，详情看[文档说明](https://lyswhut.github.io/lx-music-doc/desktop/faq/sync)
-
-### 新增
-
-- 重构数据同步功能，新增客户端模式
-- 新增全屏时自动关闭歌词设置，默认开启，可以去设置-桌面歌词设置更改
-- 新增设置-桌面歌词设置-重置窗口设置功能，点击时会重置桌面歌词窗口大小及位置
-- 新增设置-其他-列表数据清理功能，点击时会清空已创建的所有列表及所有收藏的歌曲
-
 ### 优化
 
-- 支持wy源flac hires歌曲类型的显示
-- 快捷键调整音量时每次加减2%音量改为4%（#1220）
-- 音量、播放模式等设置弹出式按钮在鼠标移到按钮上时将自动弹出设置内容，保留点击切换显示/隐藏
-- 支持kg源搜索列表、排行榜flac hires歌曲类型的显示（#1231, #1238 By @helloplhm-qwq, @Folltoshe）
-- 播放速率的粒度调整为0.01，范围0.6-2.0x
+- 优化对系统Media Session的支持，现在切歌不会再会导致信息丢失的问题了
 
 ### 修复
 
-- 修复同步连接的处理问题
-- 修复记住播放进度的情况下，使用Scheme URL打开应用播放的歌曲进度没有被重置的问题
-- 修复使用酷狗码无法打开某些类型的歌单的问题
-- 修复tx源某些歌单因为歌曲信息缺失导致打开失败的问题
-- 修复连续选择时的初始选择歌曲位置被意外改变的问题
-
-### 其他
-
-- 更新 Electron 到v22.3.4
+- 修复启用全局快捷键时与Media Session注册冲突的问题，启用全局快捷键时，不再注册媒体控制快捷键

src/common/defaultHotKey.ts

@@ -29,21 +29,21 @@ const local: LX.HotKeyConfig = {
 const global: LX.HotKeyConfig = {
   enable: false,
   keys: {
-    MediaPlayPause: {
-      type: HOTKEY_PLAYER.toggle_play.type,
-      name: '',
-      action: HOTKEY_PLAYER.toggle_play.action,
-    },
-    MediaPreviousTrack: {
-      type: HOTKEY_PLAYER.prev.type,
-      name: '',
-      action: HOTKEY_PLAYER.prev.action,
-    },
-    MediaNextTrack: {
-      type: HOTKEY_PLAYER.next.type,
-      name: '',
-      action: HOTKEY_PLAYER.next.action,
-    },
+    // MediaPlayPause: {
+    //   type: HOTKEY_PLAYER.toggle_play.type,
+    //   name: '',
+    //   action: HOTKEY_PLAYER.toggle_play.action,
+    // },
+    // MediaPreviousTrack: {
+    //   type: HOTKEY_PLAYER.prev.type,
+    //   name: '',
+    //   action: HOTKEY_PLAYER.prev.action,
+    // },
+    // MediaNextTrack: {
+    //   type: HOTKEY_PLAYER.next.type,
+    //   name: '',
+    //   action: HOTKEY_PLAYER.next.action,
+    // },
     'mod+alt+f5': {
       type: HOTKEY_PLAYER.toggle_play.type,
       name: HOTKEY_PLAYER.toggle_play.name,

src/main/utils/index.ts

@@ -154,7 +154,15 @@ export const initHotKey = async() => {
   let localConfig = electronStore_hotKey.get('local') as LX.HotKeyConfig | null
   let globalConfig = electronStore_hotKey.get('global') as LX.HotKeyConfig | null
 
-  if (!localConfig) {
+  if (globalConfig) {
+    // 移除v2.2.0及之前设置的全局媒体快捷键注册
+    if (globalConfig.keys.MediaPlayPause) {
+      delete globalConfig.keys.MediaPlayPause
+      delete globalConfig.keys.MediaNextTrack
+      delete globalConfig.keys.MediaPreviousTrack
+      electronStore_hotKey.set('global', globalConfig)
+    }
+  } else {
     // migrate hotKey
     const config = await migrateHotKey()
     if (config) {

src/renderer/core/useApp/usePlayer/useMediaSessionInfo.ts

@@ -1,19 +1,44 @@
 import { onBeforeUnmount } from '@common/utils/vueTools'
 import { getDuration, getPlaybackRate, getCurrentTime } from '@renderer/plugins/player'
-import { musicInfo } from '@renderer/store/player/state'
+import { isPlay, musicInfo, playMusicInfo } from '@renderer/store/player/state'
 import { playProgress } from '@renderer/store/player/playProgress'
-import { playNext, playPrev, stop } from '@renderer/core/player'
-// import { } from ''
+import { pause, play, playNext, playPrev, stop } from '@renderer/core/player'
 
 export default () => {
+  // 创建一个空白音频以保持对 Media Session 的注册
+  const emptyAudio = new Audio()
+  emptyAudio.autoplay = false
+  emptyAudio.src = require('@renderer/assets/medias/Silence02s.mp3')
+  emptyAudio.controls = false
+  emptyAudio.preload = 'auto'
+  emptyAudio.onplaying = () => {
+    emptyAudio.pause()
+  }
+  void emptyAudio.play()
+  let prevPicUrl = ''
+
   const updateMediaSessionInfo = () => {
+    if (musicInfo.id == null) {
+      navigator.mediaSession.metadata = null
+      return
+    }
     const mediaMetadata: MediaMetadata = {
       title: musicInfo.name,
       artist: musicInfo.singer,
       album: musicInfo.album,
       artwork: [],
     }
-    if (musicInfo.pic) mediaMetadata.artwork = [{ src: musicInfo.pic }]
+    if (musicInfo.pic) {
+      const pic = new Image()
+      pic.src = prevPicUrl = musicInfo.pic
+      pic.onload = () => {
+        if (prevPicUrl == pic.src) {
+          mediaMetadata.artwork = [{ src: pic.src }]
+          // @ts-expect-error
+          navigator.mediaSession.metadata = new window.MediaMetadata(mediaMetadata)
+        }
+      }
+    } else prevPicUrl = ''
 
     // @ts-expect-error
     navigator.mediaSession.metadata = new window.MediaMetadata(mediaMetadata)
@@ -48,25 +73,27 @@ export default () => {
     navigator.mediaSession.playbackState = 'none'
   }
   const handleSetPlayInfo = () => {
-    updateMediaSessionInfo()
-    updatePositionState({
-      position: playProgress.nowPlayTime,
-      duration: playProgress.maxPlayTime,
+    emptyAudio.play().finally(() => {
+      updateMediaSessionInfo()
+      updatePositionState({
+        position: playProgress.nowPlayTime,
+        duration: playProgress.maxPlayTime,
+      })
+      handlePause()
     })
-    handlePause()
   }
 
   // const registerMediaSessionHandler = () => {
-  // navigator.mediaSession.setActionHandler('play', () => {
-  //   if (this.isPlay || !this.playMusicInfo) return
-  //   console.log('play')
-  //   this.startPlay()
-  // })
-  // navigator.mediaSession.setActionHandler('pause', () => {
-  //   if (!this.isPlay || !this.playMusicInfo) return
-  //   console.log('pause')
-  //   this.stopPlay()
-  // })
+  navigator.mediaSession.setActionHandler('play', () => {
+    if (isPlay.value || !playMusicInfo) return
+    console.log('play')
+    play()
+  })
+  navigator.mediaSession.setActionHandler('pause', () => {
+    if (!isPlay.value || !playMusicInfo) return
+    console.log('pause')
+    pause()
+  })
   navigator.mediaSession.setActionHandler('stop', () => {
     console.log('stop')
     setStop()
@@ -107,6 +134,8 @@ export default () => {
   window.app_event.on('pause', handlePause)
   window.app_event.on('stop', handleStop)
   window.app_event.on('error', handlePause)
+  window.app_event.on('playerEmptied', handleSetPlayInfo)
+  // window.app_event.on('playerLoadstart', handleSetPlayInfo)
   window.app_event.on('musicToggled', handleSetPlayInfo)
   window.app_event.on('picUpdated', updateMediaSessionInfo)
 
@@ -117,6 +146,8 @@ export default () => {
     window.app_event.off('pause', handlePause)
     window.app_event.off('stop', handleStop)
     window.app_event.off('error', handlePause)
+    window.app_event.off('playerEmptied', handleSetPlayInfo)
+    // window.app_event.off('playerLoadstart', handleSetPlayInfo)
     window.app_event.off('musicToggled', handleSetPlayInfo)
     window.app_event.off('picUpdated', updateMediaSessionInfo)
   })