diff --git a/src/components/AudioPlayer.vue b/src/components/AudioPlayer.vue index 56c418f..9f92da2 100644 --- a/src/components/AudioPlayer.vue +++ b/src/components/AudioPlayer.vue @@ -244,6 +244,7 @@
+
{{ currentPlayingFile.title }} @@ -407,9 +408,16 @@ export default { this.histroyCheckIntervalId = setInterval(() => { this.onUpdatePlayingStatus() }, 60 * 1000) // 每隔一段时间更新一次播放记录 + + if (this.$q.platform.is.desktop) { + window.addEventListener('keydown', this.onKeyDown); + } }, beforeDestroy() { + if (this.$q.platform.is.desktop) { + window.removeEventListener('keydown', this.onKeyDown); + } clearInterval(this.histroyCheckIntervalId) // 原本是想要在关闭窗口时,更新最后一次播放历史 @@ -855,7 +863,32 @@ export default { if (!this.enableVisualizer) return; // 尚未开启音频可视化选项,无法使用音效均衡器 console.warn("flip cover"); this.isFlipCover = !this.isFlipCover; - } + }, + + onKeyDown(event) { + // console.warn("key down code = ", event.code, ", activeElement is ", document.activeElement); + if (document.activeElement.tagName === "INPUT") return; // 禁止文本编辑的按键响应 + if (this.playWorkId === 0) return; // 尚未播放任何作品时,禁止快捷键操作 + const volumeStep = 0.04; // volume is between [0.0, 1.0] + + switch(event.code) { + case "Space": this.togglePlaying(); break; + case "ArrowLeft": this.rewind(true); break; + case "ArrowRight": this.forward(true); break; + + case "PageDown": this.nextTrack(); break; + case "PageUp": this.previousTrack(); break; + + case "ArrowUp": + this.volume = Math.min(1.0, this.volume + volumeStep); break; + case "ArrowDown": + this.volume = Math.max(0.0, this.volume - volumeStep); break; + default: return; // return now + } + + event.preventDefault() + event.stopPropagation() + }, }, created() { diff --git a/src/components/PlayerBar.vue b/src/components/PlayerBar.vue index e44489e..f30ef1b 100644 --- a/src/components/PlayerBar.vue +++ b/src/components/PlayerBar.vue @@ -14,7 +14,10 @@ color="primary" :class="{}" > +
+ +
+ + +
0) clearTimeout(this.volumeDelayHideTimeoutId); + this.showVolumeIndicator = true; + this.volumeDelayHideTimeoutId = setTimeout(() => { + this.showVolumeIndicator = false; + }, this.volumeDelayMills); + } + }, + data() { return { OpState, @@ -193,6 +213,11 @@ export default { vertTriggerPixels: 15, // 向上触发像素距离 horizeTriggerPixels: 10, // 左右触发像素距离 + showVolumeIndicator: false, + volumeIndicatorWidth: 8, // 音量指示器宽度 pixel + volumeDelayMills: 1000, // 音量指示器显示时间 + volumeDelayHideTimeoutId: 0, // timeout id + startClientX: 0, startClientY: 0, startCurrentTime: 0, @@ -355,6 +380,17 @@ export default { height: 100%; /* width: 100%; */ opacity: 1; + transition: 0.5s; +} + +.volumeIndicator { + position: absolute; + background: rgba($warning, $alpha: 0.8); + height: 100%; + right: 0; + bottom: 0; + border-radius: 3px 3px 0 0; + transition: 0.5s; } .simple-progress-dark { @@ -439,4 +475,5 @@ export default { white-space: nowrap; } +