feat(filmstrip) Make filmstrip user resizable

[robertpin]

Make conference info and toolbar appear on top of the filmstrip
After a breakpoint, filmstrip pushes over the stage view instead of appearing on top
On user resize make tiles wider; after a breakpoint show grid view in the filmstrip
On filmstrip visibility toggle animate stage view resize

[robertpin]

Jenkins test this please

[saghul]

Some UI/UX feedback:

The filmstrip area is barely noticeable due to the dark on black situation.

The drag handle is very narrow, kinda hard to get a hold of.

The Arrow to close the filmstip is not centered vertically and I cannot unsee that.

This is what happens when you are alone and start dragging. Maybe we shouldn't allow it?

The gaps around the filmstrip are not consistent.

[hristoterezov]

I'm wondering if we want to implement the same feature for horizontal filmstrip too?

Also I see that the feature is explicitly disabled for mobile browsers. I guess for small screens it doesn't make sense to enable the feature at all but I was wondering if we would like to enable it for tablets?

[hristoterezov]

Tested to expand the filmstrip on a 2 participant call and I see:

Maybe we should kind of change a little bit columns rows calculation for cases like this? WDYT?

Another issue is that a horizontal scrollbar appears from time to time:

[hristoterezov]

Left some comments!

In addition switching from the old school filmstrip into tile view filmstrip while dragging was a little shocking. I'm wondering if we can change it in some way?

[robertpin]

The filmstrip area is barely noticeable due to the dark on black situation.

Added a different background for filmstrip hover, but on normal (non-hover) it's still gonna look like this.

The drag handle is very narrow, kinda hard to get a hold of.

Fixed.

The Arrow to close the filmstip is not centered vertically and I cannot unsee that.

Should be fixed now. Could you check again please?

This is what happens when you are alone and start dragging. Maybe we shouldn't allow it?

Fixed. We allow it and you can see the tile.

The gaps around the filmstrip are not consistent.

I changed the gaps, but they're still not consistent because: on top / bottom we don't want to align them with the title bar/ toolbar according to the design. Also, the right margin is larger because it has space for the scrollbar (old behaviour)

[robertpin]

I'm wondering if we want to implement the same feature for horizontal filmstrip too?

No, we don't want to invest any time in the horizontal filmstrip. If anything, we'd like to remove it completely

Also I see that the feature is explicitly disabled for mobile browsers. I guess for small screens it doesn't make sense to enable the feature at all but I was wondering if we would like to enable it for tablets?

It would be too difficult to use. The drag handler is only 9px wide which is too small for a touch target, so we'll leave it just for desktop at the moment

[hristoterezov]

@robertpin I had a quick look, thanks for addressing most of my comments! I still need to retest the PR and I want to do one more detailed pass on the new code!

About the horizontal filmstrip and mobile support - I agree! Thanks for the explanation!

Very important:

I think this should be part of the effort on changing the logic for tile view (like I mentioned on this PR #10860 ). We should change the logic to try to always cover the biggest area.

So does that mean that we should land the PR after the changes you are mentioning? Or the current state should be fine for now?

And finally:

In addition switching from the old school filmstrip into tile view filmstrip while dragging was a little shocking. I'm wondering if we can change it in some way?
What do you mean?

Maybe this will look better when the tile view logic is changed to cover the biggest possible area. But right now when you have 2 people for example you initially see 1 in the bottom and 1 (local) on the top, when you start dragging at some point you see 2 people next to each other at the center of the filmstrip. The transition was a little dramatic for me and I was thinking if we want to smooth it a little bit.

[robertpin]

@hristoterezov

So does that mean that we should land the PR after the changes you are mentioning? Or the current state should be fine for now?

I'd like to merge this PR first, as this is done and the for the other one works hasn't even started yet.

Maybe this will look better when the tile view logic is changed to cover the biggest possible area.

I understand what you're saying, and yes, I think that changing the logic so that we cover the biggest area would help, but as I said, I want to merge this one first.
The logic change is not just for the filmstrip but for the tile view as well, so I think we can do it after

[robertpin]

Jenkins test this please

[saghul]

Left some comments, PTAL. I have been unable to test it because I run into a recursion error.

[saghul]

Some UI / UX feedback, round 2:

Should we support resizing when alone? It's weird.

There are gaps in the background at the top / bottom, and the thumbnail is not centered.

Does this view make sense? Looks very stretched and doesn't add much, does it? Maybe the threshold can be lowered a bit.

The arrow doesn't seem to be in the middle.

With such a small viewport size, it's not possible to drag the filmstrip, and yet the dragging indicator is displayed. I think we should hide it.

[robertpin]

Should we support resizing when alone? It's weird.

I'm fine either way.

There are gaps in the background at the top / bottom, and the thumbnail is not centered.

Fixed the top/bottom ones. The thumbnail is not centered because on the right there is space for the scrollbar. This is not new behavior.

Does this view make sense? Looks very stretched and doesn't add much, does it? Maybe the threshold can be lowered a bit.

I see your point, but if we lower it we're gonna end up with very small tiles because right now the grid has a min of 2 columns. This will be better to update after Hristo's changes (when one column will be allowed in grid view).

The arrow doesn't seem to be in the middle.

Should be fixed now.

With such a small viewport size, it's not possible to drag the filmstrip, and yet the dragging indicator is displayed. I think we should hide it.

I don't know about that. I mean if we hide the indicator when there's not enough width I think it can be kinda weird. I mean opening/ closing a panel (chat or participants) could cause it to hide/ show

@saghul

[hristoterezov]

LGTM!

But needs to be rebased!

Done