From 75b2db4749442bbfdfc99d0a7766a96083856fb4 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Thu, 5 Aug 2021 10:21:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=92=AD=E6=94=BE=E5=99=A8?= =?UTF-8?q?=E5=AF=B9=E7=B3=BB=E7=BB=9F=E5=AA=92=E4=BD=93=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E4=B8=8E=E6=98=BE=E7=A4=BA=E7=9A=84=E5=85=BC=E5=AE=B9=E5=A4=84?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- publish/changeLog.md | 3 + src/renderer/components/core/Player.vue | 77 +++++++++++++++++-- src/renderer/components/core/PlayerDetail.vue | 2 +- 3 files changed, 76 insertions(+), 6 deletions(-) diff --git a/publish/changeLog.md b/publish/changeLog.md index ba21f092..e305bab2 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -2,6 +2,9 @@ - 新增局域网同步功能（实验性，首次使用前建议先备份一次列表），此功能需要配合PC端使用，移动端与PC端处在同一个局域网（路由器的网络）下时，可以多端实时同步歌曲列表，使用问题请看"常见问题"。 +### 优化 + +- 添加播放器对系统媒体控制与显示的兼容处理，现在在windows下的锁屏界面可以正确显示当前播放的音乐信息及切换歌曲了 ### 修复 diff --git a/src/renderer/components/core/Player.vue b/src/renderer/components/core/Player.vue index 2df4ae1d..255e78e0 100644 --- a/src/renderer/components/core/Player.vue +++ b/src/renderer/components/core/Player.vue @@ -236,6 +236,7 @@ export default { break } }) + this.registerMediaSessionHandler() navigator.mediaDevices.addEventListener('devicechange', this.handleMediaListChange) document.addEventListener('mousemove', this.handleVolumeMsMove) document.addEventListener('mouseup', this.handleVolumeMsUp) @@ -255,6 +256,8 @@ export default { if (window.restorePlayInfo) { this.handleRestorePlay(window.restorePlayInfo) window.restorePlayInfo = null + navigator.mediaSession.playbackState = 'paused' + this.updateMediaSessionInfo() return } // console.log('changePlay') @@ -480,6 +483,7 @@ export default { }, async play() { this.clearDelayNextTimeout() + this.updateMediaSessionInfo() const targetSong = this.targetSong @@ -551,20 +555,28 @@ export default { this.handleUpdateWinLyricInfo('play', audio.currentTime * 1000) this.setAppTitle() this.sendProgressEvent(this.progress, 'normal') + navigator.mediaSession.playbackState = 'playing' }, stopPlay() { this.isPlay = false window.lrc.pause() this.handleUpdateWinLyricInfo('pause') - this.sendProgressEvent(this.progress, 'paused') this.clearAppTitle() + this.$nextTick(() => { + if (this.playMusicInfo) { + this.sendProgressEvent(this.progress, 'paused') + navigator.mediaSession.playbackState = 'paused' + } else { + this.sendProgressEvent(this.progress, 'none') + navigator.mediaSession.playbackState = 'none' + } + }) }, handleSetProgress(event) { - this.setProgress(event.offsetX / this.pregessWidth) + this.setProgress(event.offsetX / this.pregessWidth * this.maxPlayTime) }, - setProgress(pregress) { + setProgress(time) { if (!audio.src) return - const time = pregress * this.maxPlayTime if (this.restorePlayTime) this.restorePlayTime = time if (this.mediaBuffer.playTime) { this.clearBufferTimeout() @@ -636,6 +648,7 @@ export default { this.getPic(targetSong).then(() => { if (targetSong !== this.targetSong) return this.musicInfo.img = targetSong.img + this.updateMediaSessionInfo() }) } }, @@ -836,7 +849,7 @@ export default { this.playNext() break case 'progress': - this.setProgress(data) + this.handleSetProgress(data) break case 'volume': break @@ -904,6 +917,60 @@ export default { if (this.setting.player.togglePlayMethod == 'random') this.setPlayedList(this.playMusicInfo) }, + updateMediaSessionInfo() { + navigator.mediaSession.metadata = new window.MediaMetadata({ + title: this.targetSong.name, + artist: this.targetSong.singer, + album: this.targetSong.albumName, + artwork: [ + { src: this.targetSong.img }, + ], + }) + }, + 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('stop', () => { + if (!this.isPlay || !this.playMusicInfo) return + console.log('stop') + this.stopPlay() + }) + navigator.mediaSession.setActionHandler('seekbackward', details => { + if (!this.isPlay || !this.playMusicInfo) return + console.log('seekbackward') + this.setProgress(Math.max(audio.currentTime - details.seekOffset, 0)) + }) + navigator.mediaSession.setActionHandler('seekforward', details => { + if (!this.isPlay || !this.playMusicInfo) return + console.log('seekforward') + this.setProgress(Math.min(audio.currentTime + details.seekOffset, audio.duration)) + }) + navigator.mediaSession.setActionHandler('seekto', details => { + console.log('seekto', details.seekTime) + let time = Math.min(details.seekTime, audio.duration) + time = Math.max(time, 0) + this.setProgress(time) + }) + navigator.mediaSession.setActionHandler('previoustrack', () => { + console.log('previoustrack') + this.playPrev() + }) + navigator.mediaSession.setActionHandler('nexttrack', () => { + console.log('nexttrack') + this.playNext() + }) + // navigator.mediaSession.setActionHandler('skipad', () => { + // console.log('') + // }) + }, }, } diff --git a/src/renderer/components/core/PlayerDetail.vue b/src/renderer/components/core/PlayerDetail.vue index 3ed3442b..7cd02a0c 100644 --- a/src/renderer/components/core/PlayerDetail.vue +++ b/src/renderer/components/core/PlayerDetail.vue @@ -282,7 +282,7 @@ export default { setProgress(event) { this.$emit('action', { type: 'progress', - data: event.offsetX / this.pregessWidth, + data: event, }) }, setProgressWidth() {