Skip to content

Conversation

@ShanaryS
Copy link
Collaborator

@ShanaryS ShanaryS commented Jan 26, 2026

This lets the user know which token will be collected if the press a keybind. The highlight only shows when focus is correctly applied to the Video/SubtitlePlayer, only one of VideoPlayer or SubtitlePlayer for the App can receive the keybinds and likewise one of Video or SidePanel for the extension. Essentially, if the highlight is not present, the keybinds won't work.

This is a pure css implementation using :hover and :focus-within. To get the focus working needed .asbplayer-token-container applied in strategic places along with tabIndex=-1 to allow them to be focusable. I needed to apply this to the body of the page when dealing with the subtitle overlay for arbitrary pages with the extension, this might have unintended effects.

Currently the color is a light blue, lighter than selecting text with a mouse but similar enough to be intuitive. This can be changed if desired.

The only issue I noticed is that clicking the title bar when using the App allows collecting tokens on the SubtitlePlayer but it won't be highlighted. This is a small issue though and we should prefer false negatives over false positives for highlighting for this feature. The other concern is that users may think they can collect custom tokens by manually highlighting with the mouse.

@ShanaryS ShanaryS self-assigned this Jan 26, 2026
@ShanaryS ShanaryS added the enhancement New feature or request label Jan 26, 2026
Copy link
Owner

@killergerbah killergerbah left a comment

Choose a reason for hiding this comment

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

Would it make sense to put this feature behind a setting? While it's generally useful I can imagine some users finding it distracting.

@killergerbah
Copy link
Owner

BTW, I guess this is because of focus-within but I am seeing the VideoPlayer have a blue outline:

image

@ShanaryS
Copy link
Collaborator Author

I added the highlight as an option, defaults to true. To reiterate, the collection and highlighting of tokens is still dependent on coloring being enabled.

I couldn't replicate the highlight around VideoPlayer but I added something that might address it.

I also updated the names of some of the other dictionary settings to make them consistent. The reason I prefixed the settings with dictionary is that some of the settings could have meaning outside of a dictionary context, but now I just prefixed them all. This is a breaking change and will require an updated config. It shouldn't affect the translations though as those all already had the prefix.

@killergerbah
Copy link
Owner

Awesome thanks, the blue outline looks to be addressed as well

@killergerbah killergerbah merged commit 3366c8b into killergerbah:main Jan 27, 2026
1 check passed
@ShanaryS ShanaryS deleted the highlight-hovered-token branch January 27, 2026 13:09
@killergerbah killergerbah added this to the Extension v1.14.0 milestone Jan 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants