Highlight hovered token if collectable#866
Conversation
killergerbah
left a comment
There was a problem hiding this comment.
Would it make sense to put this feature behind a setting? While it's generally useful I can imagine some users finding it distracting.
|
I added the highlight as an option, defaults to 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 |
|
Awesome thanks, the blue outline looks to be addressed as well |

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.