Update Paella plugins

[owi92]

Updates:

• paella-basic-plugins 1.44.4 -> 1.44.7
• paella-skins 1.32.4 -> 1.48.0
• paella-zoom-plugin 1.41.1 -> 1.41.3

Also sets the currently set language in Tobira for Paella, and provides english as a fallback default language in Paella's configuration.

[LukasKalbertodt]

The language stuff works as expected and I also see the new icons. As you already noted in chat, the icon colors are not ideal. It seems like paella-skins does not actually define a color for the icon and the SVG uses currentColor (which is apparently either black or white, depending on the color scheme). Can you try to find a fixed color that works well? A few thoughts:

• The color should probably not change with color scheme as nothing else inside the Paella div changes.
• Maybe make the thing more opaque? 60% seems rather transparent?
• The color should probably be a grey, but not white or black.
• Is it possible to make a hover effect that slightly changes the color (or opacity) when any part of the player is hovered? I think that might be nice.

I would suggest that you just experiment with this (using CSS rules in Tobira) and once we are happy, we can upstream the CSS rules into paella-skins.

[owi92]

The color should probably be a grey, but not white or black

I think a pure-ish grey doesn't work that great, and I much prefer a lighter color, close to what it is now (or even before my push in dark mode).

For a quick comparision:

• stock color in dark mode (with higher opacity):

• current iteration (this PR):

I think I would actually prefer the top version, but it's not a huge difference anyway.

Here is a version with "pure" (i.e. #808080) grey:

[LukasKalbertodt]

Oh, by "grey" I wasn't talking about #808080, but just about "any grey tone", i.e. no saturation with any color. So i wasn't ruling out brighter or darker ones.

I like the hover effect now. Might even be a bit stronger still? Maybe just opacity 1 on hover?

Regarding color: i like it for most videos, but it has problems with certain ones: https://pr1162.tobira.opencast.org/v/BxcXNwghXfK

Of course there is no magic color that works for all videos: there can always be a video that matches the color we pick. So my natural instinct is to somehow put a semi-transparent black background behind the icon. Probably very blurred. But not sure how good that looks and if we can even do it with hacky CSS?

I compared it to YouTube: that does suffer from the same problem in theory:

Without hover:

When hovered:

YouTube of course autoplays whenever the laws of physics allow it, so users usually don't see that. And the hover effect is stronger and also makes sure that either the non-hover icon or the hover icon is clearly visible on the background (since they have such different colors).

So yeah, no idea. Maybe it's fine the way you did it, because users will just click on the video anyway. But maybe you have a good idea to improve the situation?

[owi92]

maybe you have a good idea to improve the situation?

I worked out two possible solutions for this:

• Something like you suggested with a blurred background (using backdropFilter: "invert(12%) blur(4px)" and a couple of css lines for centering and some extra juice to make it work in safari......):

• Or just a subtle drop shadow on the svg:

Both work with pretty much all backgrounds.
I prefer the second one. It's looks cleaner™ to me and has none of the somewhat hacky css required for the first suggestion.

[LukasKalbertodt]

Yep I agree, the second solution looks good! Lets just go with that.

[LukasKalbertodt]

Awesome, thanks :)

[geichelberger]

The new play button is in your face, and for me, it doesn't quite fit the rest of the design.

[owi92]

@geichelberger I agree, and Lukas and I talked about this. Before we change it again, we wanted to check back with @oas777 and @dagraf first. I would probably make the icon a little smaller and reduce its stroke-width (i.e. making it less thick). This would result in something like in the below screenshot. Might be a little too subtle so it still needs some tweaking. Would you prefer a different icon altogether?

[geichelberger]

That looks better than the original, and maybe use an acute triangle instead of an equilateral triangle.

[oas777]

Before I comment this: Could someone please shortly explain to me how we came from polimediaupv/paella-skins#5 and the dark grey / black of https://polimediaupv.github.io/paella-skins/ to this new light grey version?

[owi92]

@oas777 The color of the play and spinner icons from https://polimediaupv.github.io/paella-skins/ is dependent on light/dark mode. Light mode uses the dark grey/black, while dark mode uses a similar tone to what you see in my screenshots.

The dark version is hard to see on dark-ish preview images and the black canvas that is shown when a video is loading (which is always black, independent of light or dark mode). So I think it's better to always use the light grey version.

[oas777]

Thanks, @owi92 for your late night explanations. Some random thoughts:

• I prefer the darker grey in general.
• I think with lecture recordings predominant, we will see many white preview images of slides.
• I would like to ignore the problems people have in dark mode. But then: accessibility. So light grey.
• I prefer the thicker version(s).
• I agree with @geichelberger about an equilateral triangle not being ideal.

[owi92]

I prefer the darker grey in general.
I think with lecture recordings predominant, we will see many white preview images of slides.

I suppose we can make a dark version work. I can see your point about most preview images being white. Though at least the spinner would need some sort of outline. That is always shown on a black background, regardless of color scheme.

I would like to ignore the problems people have in dark mode. But then: accessibility. So light grey.

It's really not about dark vs light mode. What I mean is that the icons inside paella should be colored independently of the overall color scheme set in Tobira.

I prefer the thicker version(s).

I'm sure there is a middle ground to be found here.

I agree with @geichelberger about an equilateral triangle not being ideal.

I'm not sure if changing only the triangle of the current icon is possible. It might, but we might also need a different icon altogether.

But let's discuss these things in our meeting next week.

[LukasKalbertodt]

Can someone explain to me what you dislike about the equilateral triangle? But yes as Ole said: this is the play icon of our icon pack of choice. We don't really want to tweak parts of it, but use the exact icons from the pack for consistency.

In addition to what Ole said: Paella did not define a color for the icon at all. So the black you see here https://polimediaupv.github.io/paella-skins/ is just a "happy accident". I don't mind changing the grey-tone of the icon again though. And once we're happy with it in Tobira, we should push these changes back to paella-skins.

[dagraf]

I would probably make the icon a little smaller and reduce its stroke-width (i.e. making it less thick).

I would vote for making it smaller and reduce its stroke-width and aim for this 'middle ground'.

Additionally:

• The equilateral triangle I do not see as a problem.
• I would prefer a grey that is a little bit darker, too.

[oas777]

Can someone explain to me what you dislike about the equilateral triangle?

I recall my "vote" against the equilateral triangle for it gives the icon a certain symmetry. Plus the user a headache when you realise it points in three directions.

I would vote for making it smaller and reduce its stroke-width and aim for this 'middle ground'.

Let's see that middle ground then ...

[owi92]

Let's see that middle ground then ...

I made some adjustments in #1165.
I would suggest you take a look at a couple of videos with different backgrounds. I still think the lighter version works better for a variety of backgrounds, but if as you said the majority of videos will have a white background anyway, the darker version should be ok to use.