Highlight hovered token if collectable #866
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.

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
VideoPlayerorSubtitlePlayerfor theAppcan receive the keybinds and likewise one ofVideoorSidePanelfor the extension. Essentially, if the highlight is not present, the keybinds won't work.This is a pure css implementation using
:hoverand:focus-within. To get the focus working needed.asbplayer-token-containerapplied in strategic places along withtabIndex=-1to allow them to be focusable. I needed to apply this to thebodyof 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
Appallows collecting tokens on theSubtitlePlayerbut 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.