Added support for spatial navigation (Navigation using arrow keys) and also support for tv remote keys #1885
Conversation
jellyfin-bot
added
frontend:plugins
|
Kudos, SonarCloud Quality Gate passed!
|
ferferga
added
the
discussion needed
|
so, anybody knows? does this project support smart tv remote? |
|
I haven't yet gone around to review this PR, we had a lot of work with the recent Vue 3 merge. I don't mind adding support for keys and remotes, what I don't guarantee is that the client will work on smart TVs. We use a pretty recent software stack, with which TVs usually aren't compatible. But adding support for keys isn't something I'll block, I just need to take some time :) Also, @gibahjoe , can you resolve the conflicts with the codebase please? :) |
|
sorry, im not good at web code, so im not not sure what the browser version this project depends on |
|
It seems at least to need Chromium 87, as Vite specifies, and this isn't checking the other modules we use. |
|
oops, so sad |
|
@ThibaultNocchi The previous vue app worked on TVs (tested on LGTV) but Vite didn't as at 3 months ago when I tested it. I will take a look at it again and resolve these merge conflicts |
|
@gibahjoe Still it's useful if this can be navigated through keyboard for accessibility reasons or TVs that have latest Chromium versions. There's no harm in supporting as much use cases as possible, as long as the support is good! |
|
Update: I already began work on this a few days back. Unfortunately, the plug-in I used previously doesn't support Vue 3 so I have had to copy over the code and make a couple of adjustments. Anyway, I should be done by this weekend. |
|
@gibahjoe The other day I was thinking about the media type redesign and it came across to my mind again what to do for this PR. In general, I think we should have three views for libraries: card grid (the only one right now), coverflow one (the current one for fullscreen music player, which is already useful for touch-based units like Echo Show or Android Auto but it also might be a presentation people like for books and TVs) and a list view (specially for music) For the home sections, music and that hypothetical coverflow view, we already have full keyboard support through swiper. Why I'm saying all of this? Maybe before you do further work here, perhaps we should gather feedback from people who might benefit from this the most. I'm not a TV user myself, so all I can do is give my review in the impl details, etc, but maybe not much insight in how it should be UX-wise |
jellyfin-bot
removed
frontend:plugins
… keys on keyboard and remote control. Also add support for play/pause button on webos # Conflicts: # frontend/src/store/playbackManager.ts
jellyfin-bot
added
vue
|
Kudos, SonarCloud Quality Gate passed!
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| currentFocusedElement.blur(); | ||
| } | ||
|
|
||
| focusNscroll(elem); |
Check warning
Code scanning / CodeQL
Superfluous trailing arguments
| return false; | ||
| } | ||
|
|
||
| focusNscroll(elem); |
Check warning
Code scanning / CodeQL
Superfluous trailing arguments
| // This might also be split into different directives to handle remove eventlisteners | ||
| Vue.directive('focus-events', { | ||
| mounted(el, binding) { | ||
| for (const [i, key] of Object.keys(binding.value).entries()) { |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class
| for (const candidate of candidates) { | ||
| var rect = getRect(candidate); | ||
|
|
||
| if (rect) { |
Check warning
Code scanning / CodeQL
Useless conditional
Cloudflare Pages deployment
|
ferferga
force-pushed
the
master
branch
8 times, most recently
from
937e458
to
6c210e6
Compare
ferferga
force-pushed
the
master
branch
15 times, most recently
from
acb6ecf
to
5d6a7c8
Compare
ferferga
force-pushed
the
master
branch
2 times, most recently
from
c360429
to
f3260d9
Compare
This PR adds support for Spatial navigation which is especially useful when using jellyfin-vue on a TV.
Also support for TV remote keys during playback (Tested with LGTV remote) was also added.
The main focus of this PR is to let TV users select items on their screen using the arrow keys of the remote and also to allow the remote media keys (tested with LGTV magic remote, webOS 5 and 6 but it can be easily expanded for other tv types if their keycodes are different).