Skip to content

feat(lyric): 歌词页面添加空格键播放/暂停控制#919

Merged
kazukokawagawa merged 2 commits into
SPlayer-Dev:devfrom
laoshuikaixue:feature/lyric-keyboard-control
Feb 22, 2026
Merged

feat(lyric): 歌词页面添加空格键播放/暂停控制#919
kazukokawagawa merged 2 commits into
SPlayer-Dev:devfrom
laoshuikaixue:feature/lyric-keyboard-control

Conversation

@laoshuikaixue
Copy link
Copy Markdown
Contributor

  • 在歌词页面实现空格键控制播放/暂停功能
  • 引入PlayerController统一管理播放器控制逻辑
  • 添加键盘事件监听并在组件挂载时自动绑定
  • 排除输入框等可编辑元素的键盘事件响应
  • 全屏歌词显示时自动激活键盘控制
  • 组件卸载时清理键盘事件监听避免内存泄漏
  • 优化键盘事件处理提升响应性能

- 在歌词页面实现空格键控制播放/暂停功能
- 引入PlayerController统一管理播放器控制逻辑
- 添加键盘事件监听并在组件挂载时自动绑定
- 排除输入框等可编辑元素的键盘事件响应
- 全屏歌词显示时自动激活键盘控制
- 组件卸载时清理键盘事件监听避免内存泄漏
- 优化键盘事件处理提升响应性能
@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @laoshuikaixue, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在增强用户体验,通过在歌词页面引入键盘快捷键来控制音乐播放。核心改动是实现了使用空格键进行播放/暂停的功能,并确保此功能仅在全屏歌词模式下激活,同时避免与输入框等交互元素冲突。这使得用户能够更便捷地管理音乐播放,尤其是在沉浸式歌词体验中。

Highlights

  • 空格键播放/暂停控制: 在歌词页面实现了通过空格键控制音乐的播放和暂停功能。
  • PlayerController集成: 引入了 PlayerController 来统一管理播放器的控制逻辑,提高了代码的模块化和可维护性。
  • 键盘事件管理: 添加了键盘事件监听器,并在全屏歌词显示时自动激活,同时在组件卸载时清理,以避免内存泄漏。
  • 输入框排除: 优化了键盘事件响应,排除了输入框和文本区域等可编辑元素的空格键事件,防止意外操作。
Changelog
  • src/components/Player/FullPlayer.vue
    • 引入 usePlayerController 以统一管理播放器控制逻辑。
    • 添加了 onKeydown 函数,用于处理空格键的播放/暂停操作,并排除输入框的响应。
    • 增加了对 statusStore.showFullPlayer 的监听,以便在全屏歌词模式下动态添加或移除键盘事件监听器。
    • 在组件卸载前移除了键盘事件监听器,以避免潜在的内存泄漏。
Activity
  • 目前没有与此拉取请求相关的评论或审查活动。
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

你好,感谢你的贡献!这次的 PR 通过引入 PlayerController 和添加键盘事件监听,实现了在歌词页面使用空格键控制播放/暂停的功能,这是一个非常实用的用户体验优化。
代码整体结构清晰,逻辑明确:

  • 在全屏歌词页面显示时才添加事件监听,隐藏时移除,有效管理了事件的生命周期。
  • 考虑到了输入框等场景,避免了快捷键冲突。
  • 在组件卸载时也进行了清理,防止了内存泄漏。

我提出了一些建议,主要关于如何使代码更健壮和更符合 Vue 3 的最佳实践,希望能帮助你进一步完善代码。请查看具体的评论。

Comment thread src/components/Player/FullPlayer.vue
Comment thread src/components/Player/FullPlayer.vue Outdated
- 优化键盘事件监听器的注册和注销机制
- 改进焦点判断逻辑,支持可编辑元素的内容判断
- 使用 watchEffect 替代 watch 实现更精确的副作用清理
- 移除组件卸载时重复的事件监听器移除操作
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants