Add ability to collapse the grid view

[PVince81]

To be able to focus on the video / screen of the current presenter.

Fixes #4245

Todos

• Fix design/positioning of button
• Move microphone/video/etc actions to the bottom of the screen when the grid is collapsed
• Test multiple call modes to make sure it looks fine
• Test with sidebar view - blocked by JS FileInfo regressions, breaks file list sidebar tabs server#23445

[PVince81]

After talking with @ma12-co we decided to keep my PR and I've taken a similar approach from #4365 and added (and fixed) the slide animation.

Next up is extracting the local call controls to a higher layer to make them always visible and available even when collapsed.

[PVince81]

• sort out isBig attribute and expected logic
• wire up other missing attributes
  • isSidebar

[PVince81]

current state when open:

and collapsed:

[PVince81]

most stuff sorted out, but one thing remaining:

• network quality warning broken when grid is collapsed: quickest would be to move it back to the media controls location as it creates an extra temporary icon.

I do wonder if there is another kind of interaction we could use to show that warning and not clutter that bottom right corner with a bubble.

[PVince81]

next challenge:

[PVince81]

ok, it will look like this:

[PVince81]

Please review.

I'm optimistic that it will work in sidebar mode correctly, but still want to confirm. I can't test that bit because of a server issue nextcloud/server#23445

[PVince81]

• BUG: missing mute and video buttons in sidebar mode

(tested using this PR merged with #4291)

[PVince81]

I've fixed the sidebar mode. It required me to move the LocalMediaControls from the Grid to the CallView.

I've also tested the "network connection warning" mode and it looks fine in sidebar mode.

[PVince81]

[marcoambrosini]

• shouldn't this transition be applied to the .grid-main-wrapper div?
  At the moment the transition feels a bit weird, it seems like .grid-main-wrapper comes in without transition and its content slides up in it

[marcoambrosini]

I get this error when switching to grid:

[PVince81]

when testing I had the latest nextcloud-vue master included.
retrying with the latest spreed master

[PVince81]

Got it, the exact steps are:

1. Start a call with three people
2. Collapse the strip
3. Switch to grid view
4. Switch back to speaker view

The reason is that isStripe() watcher is re-generating the grid in makeGrid, and the latter function is trying to access the grid object while it's not visible. I'll try adding a check there to avoid calling makeGrid when collapsed.

Too many states :-S

[PVince81]

@ma12-co I've fixed the issue when switching back and forth to grid while collapsed

[marcoambrosini]

Amazing :)
One last cool thing would be a tooltip that shows up on hover that says something like "Hide videos" and "Show videos"

[PVince81]

it's not videos if you only see avatars there, so not sure about the text.
maybe we can look into tooltips separately as I noticed there are more tooltips missing in the call view

[danxuliu]

Since this pull request when the call view is shown in the sidebar the media controls are a bit off from the video (I have tested with nextcloud/server@fd178b9^ and also rebasing #4291 and using it against nextcloud/server@766590d204^, so it should not be a problem of an outdated style from server):

Before:

After:

Is that intended, or known?

[PVince81]

I didn't observe this before. Can you make a ticket and provide steps to reproduce and maybe also window size ?
With all the different tests I made I didn't see that.

The reason is that now the controls are not part of the video box any more, they are outside. But how did you manage to have the video box smaller than usual ?

[marcoambrosini]

We really need to implement tests for the call view. There are so many scenarios that I's becoming impossible to test all of them whenever someone changes something there

[PVince81]

I've raised #4440 for adding automated tests for the frontend

[PVince81]

@ma12-co while we might be able to test the code and logic, we can't test layout and styling stuff, so if a background color looks off or a container is not stretched correctly, we'd still need some manual testing to find that out. However we wouldn't need to retest all the logic.