Design: Check buttons/symbols for video windows control

oas777 commented 1 year ago

The symbols used to deal with individual videos (moving in slides, maximizing/minimizing, closing) are similar to the ones Lisa suggested, but somehow different in line strenght/width and size. Could you please check with Lisa's repository?

miesgre commented 1 year ago

Player updated. Please check! Demo: https://polimediaupv.github.io/paella-ethz/?id=belmar_16_9_hls

oas777 commented 1 year ago

No, these are not the ones Lisa designed:

grafik

Cf. https://www.figma.com/file/7wbHm2GkTXsWfg9omeb7i6/Redesign?node-id=0-1&t=rjiYhXsLiIjvPcKs-0 (lower left corner, you have to zoom in)

oas777 commented 1 year ago

PS: paella icon-button-small paella icon-button-small(4) paella icon-button-small(3) paella icon-button-small(2) paella icon-button-small(1)

miesgre commented 1 year ago

Sorry for the error. Icons updated. Please check! Demo: https://polimediaupv.github.io/paella-ethz/?id=belmar_16_9_hls

oas777 commented 1 year ago

Thanks, this looks good! Some remaining details:

Audio level: Can you make the bar blue according to the audio level? Cf. grafik

Minimize video: Can you replace your symbol with Lisa's?

grafik grafik

Video layout: Remove the symbols and replace with text:

grafik grafik

Show video slides: Use Lisa's symbol instead of empty squares:

grafik grafik

I know this is tedious, apologies...

miesgre commented 1 year ago

Thanks, this looks good! Some remaining details:

Minimize video: Can you replace your symbol with Lisa's?

How layout buttons works in current paella layout:

Starting with a side by side view, you can click to maximize any video
Then you can return to side by side view by clicking the side my side button.

Lisa designs

In the same way, you can click to maximize, to maximize the video
Then you have two different buttons (with different icons)

Questions

Minimize button, should go to side by side? Or should minimize this videos and maximize the other? Same for maximize button?
Both icons should return to side by side view? Why are both different?
If maximize button should maximize this video, and minimize, minimize the video, how can we go back to side by side?

oas777 commented 1 year ago

Maybe there's a misunderstanding, but in my understanding the symbol

should only be used if there is only one video. As it says in the hover-over: "Show second video stream" (I would suggest "Show second video", by the way), this makes me think there should be only one video when the symbol is active.

If there are two videos, you show Lisa's symbol

identical in both videos if they have the same size (at the start), so the user can decide which one to maximize.
Once he did, the videos are different in size and offer different options therefore: Maximise or minimise.

So

makes no sense in this context of two different size videos because there still are two videos (and changing the hover-over information is not consistent).

Makes sense?

miesgre commented 1 year ago

Sorry, there are some hover-over labels that are not updated, and It is causing confusion.

Meaning of the symbols:

The idea of this symbol is to go to slide by slide (50%, 50%) - same size. This is the reason it is used in 1 video layout and 2 video layout (when one video is maximized). We have to look for a good hover-over text.

The idea of this symbol is to maximize one video (when dual video layout). And is only visible when dual video layout are at 50%, 50% (same size).

For me, the problem I see using what you are proposing is when dual video layout with one video maximized:

Once he did, the videos are different in size and offer different options therefore: Maximise or minimise.

So, the symbol "maximize" has two different meaning:

In dual video layout (same size) it means "Maximize one video" going to 25%, 75% video layout
But in (25%, 75% layout) clicking that symbol (that only will be in minimized video) end with videos al 50%, 50% and not (75%, 25%) as I expected

What do you think? Which one makes the most sense? @oas777? @turro?

oas777 commented 1 year ago

Sorry for my late reply. I see your point. So use

to make two videos equally large (when one is small). Hover-over: "Align videos".

Use

to increase the size of one video. Hover-over: "Enlarge video" (because switching to one video would be "Maximize").

Don't use

at all.

Makes sense?

miesgre commented 1 year ago

Done. Demo: https://polimediaupv.github.io/paella-ethz/?id=belmar_16_9_hls

oas777 commented 1 year ago

I think we're done...

oas777 commented 1 year ago

Sorry, but I only just saw

https://polimediaupv.github.io/paella-ethz/?id=belmar_16_9_hls has some German hover-over information: Is this due to my browser settings?
Also, some hover-over information (e. g. "Seek video to the next slide") are not in https://github.com/polimediaupv/paella-core/ - where is the "ethz" vocabulary?

miesgre commented 1 year ago

@oas777 Yes. If you have your browser in German, paella will use German.

Localization for ethz is here: https://github.com/polimediaupv/paella-ethz/tree/main/src/i18n

oas777 commented 1 year ago

Really? I'm looking at https://polimediaupv.github.io/paella-ethz/?id=belmar_16_9_hls again and now all hover-over texts are in English with a German browser. So I cannot reproduced this. Let's revisit when/if we fully translate Paella to German.

oas777 commented 1 year ago

PS: Is that a new symbol for "Align videos"? grafik

miesgre commented 1 year ago

Really? I'm looking at https://polimediaupv.github.io/paella-ethz/?id=belmar_16_9_hls again and now all hover-over texts are in English with a German browser. So I cannot reproduced this. Let's revisit when/if we fully translate Paella to German.

Yes, But I was making some tests and this part was not working when you tested. Now is fixed. You should see it in German.

PS: Is that a new symbol for "Align videos"?

No. There is a problem with this icon. We are going to fix it.

oas777 commented 1 year ago

Let's look at "hover-over" and "translation" separately. This one is fixed.

polimediaupv / paella-ethz