(extension) improve danmaku offset control [DA-399]

[Mr-Quin]

Screen.Recording.2026-03-16.114757.mp4

[Mr-Quin]

Task linked: DA-399 Improve danmaku offset control UI

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	danmaku-anywhere-ui-preview	72bd248	Commit Preview URL Branch Preview URL	Mar 16 2026, 07:05 PM

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
danmaku-anywhere-web-dvay	Ready	Preview, Comment	Mar 16, 2026 7:05pm

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! 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!

This pull request focuses on improving the user interface for numerical input, particularly for the danmaku time offset setting. It introduces a versatile NumberScrubber component that allows users to adjust values intuitively through dragging, mouse wheel, and modifier keys, offering a more granular and efficient control mechanism. The integration of this new component into the danmaku styles form provides a more interactive and user-friendly experience for configuring danmaku timing, complemented by updated localization and display formatting for clarity.

Highlights

• New NumberScrubber Component: Introduced a new NumberScrubber component that provides enhanced control for numerical input fields, including horizontal dragging, mouse wheel adjustments with modifier keys (Shift for fast, Alt for slow), and hold-to-adjust functionality for precise value manipulation.
• Refactored Danmaku Time Offset Control: The danmaku time offset input in the DanmakuStylesForm has been replaced with the new LabeledScrubber component, significantly improving the user experience for adjusting this setting with more interactive and precise controls.
• Improved Time Offset Display: The offsetValueLabelFormat function was updated to automatically display large time offset values in seconds (e.g., '+1.5s') instead of milliseconds, enhancing readability for users.
• Localization Updates: Added new localization strings for the scrubber component's precision tooltips (Drag/Wheel, Shift, Alt) and a 'Reset to 0' option in both English and Chinese. The 'Time Offset' label was also simplified by removing '(milliseconds)'.

Changelog

• packages/danmaku-anywhere/src/common/components/form/NumberScrubber.tsx
  • Added a new NumberScrubber component with drag, wheel, and hold-to-adjust functionality.
• packages/danmaku-anywhere/src/common/localization/locales/en/translation.json
  • Added new localization keys for form precision tooltips and 'Reset to 0'.
  • Updated 'Time Offset' label to remove '(milliseconds)'.
  • Updated 'offsetScrubber' tooltip text.
• packages/danmaku-anywhere/src/common/localization/locales/zh/translation.json
  • Added new localization keys for form precision tooltips and '归零'.
  • Updated '时间轴' label to remove '(毫秒)'.
  • Updated 'offsetScrubber' tooltip text.
• packages/danmaku-anywhere/src/content/common/DanmakuStyles/DanmakuStylesForm.tsx
  • Replaced the LabeledSlider with the new LabeledScrubber for the offset control.
  • Updated offsetValueLabelFormat to display large values in seconds.
  • Removed unused imports (Grid, Input, useState, withStopPropagation).
• packages/danmaku-anywhere/src/content/common/DanmakuStyles/LabeledScrubber.tsx
  • Added a new LabeledScrubber component to wrap NumberScrubber with labels, tooltips, and precision details.
• packages/danmaku-anywhere/vite.config.ts
  • Updated the development server port configuration.

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. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new NumberScrubber component to provide a more advanced and user-friendly way to control numeric values, specifically for the danmaku time offset. This is a significant improvement over the previous slider-and-input implementation, resulting in cleaner and more maintainable code. My review includes a couple of suggestions for the new components: one to improve the robustness of timer handling in NumberScrubber.tsx, and another to correct the usage of Material-UI's Grid component in LabeledScrubber.tsx to fix a layout issue. Overall, this is a great enhancement to the extension's UI.

[Copilot]

Pull request overview

Updates the browser extension’s danmaku style UI to provide finer, more discoverable time-offset control via a new scrubber input component, with supporting i18n strings and minor dev-server config tweaks.

Changes:

• Add a reusable NumberScrubber control (drag/wheel, modifier precision, double-click manual entry, reset).
• Replace the offset slider+input in DanmakuStylesForm with the new scrubber and update offset formatting.
• Add new form.* localization strings and adjust offset label text.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/danmaku-anywhere/vite.config.ts	Changes dev server ports for Chrome/Firefox targets.
packages/danmaku-anywhere/src/content/common/DanmakuStyles/LabeledScrubber.tsx	Adds a labeled wrapper around NumberScrubber with a precision help tooltip.
packages/danmaku-anywhere/src/content/common/DanmakuStyles/DanmakuStylesForm.tsx	Switches offset control to LabeledScrubber and updates formatting/tooltip key.
packages/danmaku-anywhere/src/common/localization/locales/zh/translation.json	Adds form.* strings and updates offset label/tooltip key.
packages/danmaku-anywhere/src/common/localization/locales/en/translation.json	Adds form.* strings and updates offset label/tooltip key.
packages/danmaku-anywhere/src/common/components/form/NumberScrubber.tsx	Introduces the new numeric scrubber component and interaction logic.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.