Change fine navigation alternative for non small pointer devices

[dascritch]

The fine poisition alternative panel for big fingers is not really easy, as it is really a pain to activate it if you don't know how to do it. I think we must bet to change the height of the component under the navigation main, it won't change too much a page, as long we can prevent display it via attributes.

Here is what I think to do ;

• [ ] Transform fine navigation as a panel
• [ ] Display it by default only with media-query any-pointer:coarse
• [ ] Modify showHandheldNav() action in element_cpu.js
• [ ] Remove old fine navigation alternative (may be the most tricky, to clean the old event code)
• [ ] Add an attribute to add it
• [ ] Document it

[dascritch]

we can do it js side with this method

window.matchMedia( '(any-pointer:fine)' ).matches returns a boolean. It can even get events

[dascritch]

May be we should add an attribute ? fineposition="auto|no|yes" ? I don't know yet Or may be it should be a panel but a specific <details>/<summary> alike, where the "close" button is also closing itself ? So, we will have something like × |<< <<< << >> >>> . We also may imagine a new input form to enter manually a specific moment by this way.

But getting a new panel is making the page reflowing. And if the player is in a navigation context, or at the bottom of the viewport, we risk inconsistancies.

This is a really impactful situation, I think this is a major release situation, i.e. for 8.0

[dascritch]

Youtube introduced a new gesture on itsplayer : on the time line, swipping to the up will do appearing a more precise navigation. A clever idea for us : disappear the title to make room for the fine position buttons. And can also be used for Tab-key navigation.