Fix various UI things in our paella integration

[owi92]

This mainly does two things:

• some buttons are moved into a settings menu to make the player appear less crammed on smaller screens (resolution, captions and video layout)
• the control elements (which are also buttons) inside the videos (i.e. maximize video, switch sides etc.) are now less opaque and also smaller when their containers are below a certain width (currently 400px)

Also:

• the fullscreen button is now always on the rightmost side of the control bar (as you would expect)
• the buttons for slide navigation were added to presentation videos

Things mentioned in #1196 but missing here:

• hide Firefox PiP button:
  -> this is not technically possible. Users need to disable it themselves in their browser.
• hover color of vertical separation lines:
  -> I believe this needs to be fixed in paella-skins as any custom changes are always overwritten by that.

Oh and I also noticed the thing @dagraf mentions in #1196 (comment): Open submenus are not fixed but move with the screen when scrolling up or down. This also needs to be fixed in paella.

Closes #1196

Marked as draft bc I still need to figure out how to hide the settings menu when there are no menu items 🙈

[LukasKalbertodt]

Basically all changes look good to me and are a clear improvement! Code looks good as well. I have only two remarks:

the control elements (which are also buttons) inside the videos (i.e. maximize video, switch sides etc.) are now less opaque

I know this was discussed in the issue, but it's worth noting that this is also an accessibility concern. Making them less opaque obviously reduces contrast, and makes it hard to see for some people. Tobira does not yet have a high contrast mode, otherwise we could at least improve the situation in that mode. So yeah, maybe Olaf and David can reconsider whether the buttons in the current form (without this PR) are really too distracting.

Marked as draft bc I still need to figure out how to hide the settings menu when there are no menu items 🙈

I think I would prefer if the quality selection thing could always be there, even if there is only one quality. Then at least users can see the quality they are currently watching. I am not sure if it's possible to convince Paella of that though...

[oas777]

Testing this on a large screen, for once. A certain improvement can be seen, thanks.

However, adding the "Seek video to the previous/next slide" icons was not a request from my end, it was a fear I expressed because it leaves us with eight (!) icons within the video canvass. Which makes me give up on the idea of making them more opaque/"invisible", also in conjunction with the hover-over effect, the different black and grey backgrounds, Firefox adding its thing with a different grey, and the accessibility concerns Lukas mentions. Is there a chance therefore of hiding icons individually the way you added the icons for slide navigation?

I think I would prefer if the quality selection thing could always be there, even if there is only one quality. Then at least users can > see the quality they are currently watching. I am not sure if it's possible to convince Paella of that though...

+1. Which kind of kills the settings menu, does it? The additional "CC" probably shouldn't be hidden there.

[owi92]

Alright, I can certainly remove the changes to the button opacity again, and also the settings menu if we pull out captions and quality selection (which isn't what Lukas was saying with his comment - at least I don't think so - but I see how it could be read like that and you seem to be agreeing with that point, however interpreted).

Is there a chance therefore of hiding icons individually the way you added the icons for slide navigation?

Hm sorry, I'm not sure I understand. In which case should they be hidden and when are they supposed to be shown? In any case, I don't think paella supports that.

An alternative to the slide navigation buttons at the top is to have them at the sides of the video container (which is still inside the container, so that doesn't necessarily improve the overall situation:

Or should we just leave out that feature altogether?

[owi92]

also, re this comment (sorry for not adressing this yet): #1196 (comment):
would you prefer it like this (with blod playtime and colors of the quality selector inverted, if we get rid of the settings menu again)?:

[oas777]

Alright, I can certainly remove the changes to the button opacity again, and also the settings menu if we pull out captions and quality selection (which isn't what Lukas was saying with his comment - at least I don't think so - but I see how it could be read like that and you seem to be agreeing with that point, however interpreted).

I see what you mean, maybe I misread Lukas' comment.

Is there a chance therefore of hiding icons individually the way you added the icons for slide navigation?

Hm sorry, I'm not sure I understand. In which case should they be hidden and when are they supposed to be shown? In any case, I don't think paella supports that.

Version 6 used to allow this. And with adding/removing the slide navigation icons, I thought this might be possible for other icons as well.

An alternative to the slide navigation buttons at the top is to have them at the sides of the video container (which is still inside the container, so that doesn't necessarily improve the overall situation:

Or should we just leave out that feature altogether?

Let's discuss this in our meeting.

[owi92]

I have opened polimediaupv/paella-core#368 to address the issue of open submenus not being fixed to their trigger button, and polimediaupv/paella-skins#6 to figure out what to do with the vertical lines in the progress bar.
Edit: also polimediaupv/paella-slide-plugins#7 in regards to the blurry slidemap progress bar marks.

[LukasKalbertodt]

Nice! Clear improvements on all fronts!

I'm personally not the biggest fan of the bold time-font, but I agree that given the icons and other text, it looks better. Maybe at some point we can make everything a bit thinner, but at least now it's consistent.

[LukasKalbertodt]

For reference, I just checked: it is possible, by changing the Tobira configuration (specifically player.paella_plugin_config) to disable some buttons. For example:

paella_plugin_config = """{
    "es.upv.paella.frameControlButtonPlugin": { "enabled": false }
}"""

This disables the button that lets you see all slide previews. Sadly, the buttons that you, Olaf, wanted to remove most of all -- e.g. the "enlarge" button hovering over the video -- don't seem to be controlled by plugins? Or at least I don't see which ones are responsible for that so I can't disable it right now. But if we are really interested we could dig deeper or ask the Paella devs.